* {
	margin:0;
	padding:0;
	font-size:100%;
	outline:none;
	border:0;
	border-collapse:collapse;
}

body {
	font-size:62.5%;
	font-family:'helvetica', 'arial', 'sans-serif';
	color:#FFF;
	background:#1c5b46 url(../../gfx/tremors/ui/bkg_body.jpg) repeat-x top left;
}

h3 {
	font-size:1.6em;
	margin-bottom:0.5em;
}

p {
	font-size:1.2em;
	margin-bottom:0.5em;
}

legend {
	/* Used for Aural devices only */
	position:absolute;
	overflow:hidden;
	font-size:0;
	left:-999em;
}

a:link {
	text-decoration:none;
	color:#4e6cf3;
}

form input.text,
form input.password,
form select {
	padding:0.25em 0.5em;
	border:1px solid #404040;
	
	-webkit-border-radius:4px;
	background:#fdfdfd url(../../gfx/tremors/ui/bkg_input.png) repeat-x left top;
}

button {
	background-color:#98ab2b;
	color:#FFF;
	font-weight:bold;
	font-size:1.6em;
	border:1px solid #404040;
	padding:0.2em 0.5em;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	
}

/* Top level containers */

#pageContainer {
	width:89em;
	margin:38px auto 0 auto;
	padding:0 2em;
	position:relative;
	background:transparent url(../../gfx/tremors/ui/bkg_pageContainer.png) no-repeat top left;
	z-index:10;
}



/*-------------------------------------------*/

#navigation {
	position:absolute;
	top:-38px;
	height:38px;
	line-height:38px;
	width:100%;
	
}
	#navigation h2 {
		float:left;
		font-size:1.1em;
		margin-left:4em;
	}
	
	#navigation ul {
		float:right;
		list-style-type:none;
		margin-right:8em;
	}
	
	#navigation ul li{
		display:inline;
		font-size:1.1em;
		padding-right:1em;
	}
/*-------------------------------------------*/
	
#masthead {
	width:55em;
	margin-left:4em;
	float:left;
	background:transparent url(../../gfx/tremors/ui/logo_main.png) no-repeat left center;
	height:128px;
}

	#masthead h1,
	#masthead p{
		visibility:hidden;
	}

/*-------------------------------------------*/

#tremorList {
	width:55em;
	margin-left:4em;
	float:left;
	border:1px solid #364842;
	background-color:#ebe9d6;
}

	#tremorList li.waiting{
		display:none;
	}

	#tremorList #filter,
	#tremorList #resultTitle, .generalError {
		border-bottom:1px solid #364842;	
	}
	
	#tremorList .generalError {
		background-color:#CC0000;
		color:#222;
		font-size:1.1em;
		padding:0.5em 1em;
		margin:0;
	}
	
	#tremorList #filter {
		background-color:#298565;
		border-top:1px solid #49977c;
		padding:0.5em 1em;
	}
	
	#tremorList #login {
		background-color:rgb(137,101,79);
		padding:0.5em 1em;
	}
	
	#tremorList #login button {
		background-color:rgb(220,177,49);
	}

		#tremorList #filter label, #tremorList #login label,
		#tremorList #filter input, #tremorList #login input,
		#tremorList #filter select, #tremorList #login select {
			font-size:1.6em;
			font-weight:bold;
		}
		
		#tremorList #filter input, #tremorList #login input,
		#tremorList #filter select, #tremorList #login select {
			width:10em;
		}
		
		#tremorList #filter label, #tremorList #login label {
			padding:0 0.5em;
		}
		
	#tremorList #resultTitle{
		background-color:#fff1a4;
		color:#222;
		font-size:1.1em;
		padding:0.5em 1em;
		margin:0;
	}

	#tremorList ol {
		list-style-type:none;
	}
	
	#tremorList ol li{
		color:#222;
		list-style-type:none;
	}
	
	#tremorList li.tremor{
		background-color:#FFF;
		position:relative;
	}
	
	#tremorList li.match{
		display:block;
	}
	
	#tremorList li.noMatch{
		display:none;
	}
	
		#tremorList li.tremor h4,
		#tremorList li.tremor p{
			padding:0.5em 1em; 
		}
		
		#tremorList li.tremor h4 {
			font-size:1.6em;
			font-weight:normal;
			padding-top:0.75em;
		}
		
		#tremorList li.tremor .placeName {
			font-weight:bold;
			cursor:pointer;
		}
		
		#tremorList li.tremor .placeName:hover {
			background-color:#cfd7fa;
			moz-border-radius:3px;
		}	
		
		#tremorList .tweetCount {
			position:absolute;
			right:0.625em;
			top:0.3125em;
			width:30px;
			height:30px;
			font-size:1.6em;
			font-weight:bold;
			color:#3d3d3d;
			background:transparent url(../../gfx/tremors/ui/bkg_tweetCount_large.png) no-repeat center;
			line-height:30px;
			text-align:center;
		}
		
		#tremorList .tweetCount span{
			position:absolute;
			font-size:0;
			left:-999em;
		}
		
		#tremorList .tweetTime {
			font-size:1em;
			color:#666666
		}
		
	
	#tremorList .tweets {
		border-top:1px solid #364842;
		border-bottom:1px solid #364842;
	}
	
		#tremorList .tweets li{
			background-color:#e0e3de;
			border-bottom:1px solid #b4b5b3;
			border-top:1px solid #EEE;
			padding:1.5em 8.5em 0 8.5em;
			position:relative;
			min-height:60px;
		}
	
		#tremorList .tweets h5,
		#tremorList .tweets p {
			display:inline;
			font-size:1.3em;
			padding:0!important;
			margin:0;
			line-height:1.5em;
		}
		
		#tremorList .tweets p {
			margin-bottom:1em;
		}
	
		#tremorList .tweets .mugshot{
			position:absolute;
			right:1em;
			top:50%;
			margin-top:-24px;
			width:48px;
			height:48px;ß
		}
		
		#tremorList .tweets .rating{
			display:block;
			width:48px;
			height:48px;
			position:absolute;
			top:1em;
			left:1em;
			background-position:right bottom;
			background-repeat:no-repeat;
			font-size:0;
			text-indent:-999em;
		}
		
		/* Individual ratings */
		#tremorList .tweets .fantastic {background-image: url(../../gfx/tremors/images/smiley_fantastic.png);}
		#tremorList .tweets .veryGood {background-image: url(../../gfx/tremors/images/smiley_veryGood.png);}
		#tremorList .tweets .good {background-image: url(../../gfx/tremors/images/smiley_good.png);}
		#tremorList .tweets .neutral {background-image: url(../../gfx/tremors/images/smiley_neutral.png);}
		#tremorList .tweets .bad {background-image: url(../../gfx/tremors/images/smiley_bad.png);}
		#tremorList .tweets .awful {background-image: url(../../gfx/tremors/images/smiley_awful.png);}
	
		.resultTools {display:none;}
		
/*-------------------------------------------*/
#totalTweets .title {
	background:#25795b;
	font-size:1.2em;
	padding:5em 0.2em 0.2em;
	border-bottom:1px solid #1d6049;
	text-align:center;
	}
	
	#totalTweets .total {
	font-size:2em;
	padding:0.2em 0.2em 0.2em;
	border-top:1px solid #33a37c;
	border-bottom:1px solid #1d6049;
	background-color:#2c8d6a!important;
	text-align:center;
	
	}
#totalTweets h4{
	color:#a2e2cc;
	}
	
#totalTweets totalProcessed {
	color:white;
	font-weight:bold;
	font-size:1.2em;
	}

#auxiliaryContent {
	float:right;
	width:22em;
	margin-right:4em;
	margin-top:-100px;
	
}

	#auxiliaryContent h3{
		color:#a2e2cc;
	}

	#auxiliaryContent .panel{
		margin-bottom:1em;
		padding:1em;
		
	}
	
#topTen {
	
}

#topTen ol{
	background:#25795b;
	list-style-type:none;
}

#topTen ol li{
	font-size:1.2em;
	padding:0.5em 0.5em 0.5em 38px;
	border-top:1px solid #33a37c;
	border-bottom:1px solid #1d6049;
	position:relative;
	cursor:pointer;
}

#topTen ol li.odd{
	background-color:#2c8d6a!important;
}

#topTen .tweetCount {
	display:block;
	position:absolute;
	left:0.5em;
	top:50%;
	margin-top:-12px;
	width:25px;
	height:25px;
	background:transparent url(../../gfx/tremors/ui/bkg_tweetCount_small.png) no-repeat center;
	text-align:center;
	line-height:25px;
	font-weight:bold;
	font-size:1.2em;
	
}

/*-------------------------------------------*/

#pageFooter {
	clear:both;
	padding:2em 4em;
	text-align:right;
}



/*-------------------------------------------*/
/* The Detail box to show details on individual places */

#detailsPanel {
	position:fixed;
	top:50%;
	left:50%;
	margin-left:-29em;
	margin-top:-16em;
	width:680px;
	height:420px;
	background:transparent url(../../gfx/tremors/ui/shadow_detailsPanel.png) no-repeat center;
	z-index:999;
	display:none;
	cursor:pointer;
}

#detailsPanel .detailsLiner {
	width:56em;
	height:30em;
	padding:2em;
	margin-top:30px;
	margin-left:50px;
	background-color:#2c8d6a;
	border:1px solid #121212;
}

#detailsPanel h2{
	font-size:2.4em;
	margin-bottom:0.5em;
}

#detailsPanel p#detailAddress{
	font-size:1.4em;
	font-weight:bold;
}



/* ----------------------------------------------------- 
	Styles for sortable selection tables
   -----------------------------------------------------*/

button.done,
button.pressed,
button.disabled {
	background:url(../../gfx/rummble/web/forms/button_done_states.png) no-repeat 0px 0px transparent;
	width:84px;
	margin-left:1em;
	outline:none!important;
}

button.active {background-position: 0px -81px!important;outline:none!important;}
button.done[disabled] {background-position: 0px -121px;outline:none!important;}
button.done:focus {background-position: 0px -41px;outline:none!important;}

.highlight { /* Used to highlight keywords within a list */
	background-color:#FBFFA9;
	padding:0.25em;
}

.selected .highlight {
	background-color:#2B6199;
}

#locationRefine {
	width:540px;
	font-size:1.3em;
	margin-left:-320px;
}

#locationRefine h2 {
	margin-bottom:0;
	padding:5px 0;
	text-indent:10px;
	font-size:22px;
	color:#FFF;
	background-color:#371E4F;
}

#locationRefine .liner {
	padding:0;
}

#locationRefine .note{
	text-indent:10px;
}

#locationRefine .buttonBar {
	margin:0;
	background-color:#652973;
}

#locationRefine thead th {
	background-color:#652973;
	font-size:11px;
	padding:8px 5px;
}

#locationRefine span.address {
	font-size:11px;
	color:#666;
}

#locationRefine .selected span.address {
	color:#B3D6FC;
}

.scrollable {
	min-height:16em; /*Used to stop scrollable/pagable sections collapsing when they have little content */
}

table.sortable {
	margin-bottom:0;
}

table.clickable tbody td {
	background-color:#FFF;
	color:#222;
	padding:0;
	border-top:1px solid #FFF;
	border-bottom:1px solid #FFF;
}

table.clickable tbody label {
	display:block;
	padding:8px 10px 8px 5px;
	cursor:pointer;
	font-weight:normal;
}

table.clickable tbody tr.odd td {
	background-color:#E6E5E5;
	border-color:#E6E5E5;
}

table.clickable tbody tr:hover td,
table.clickable tbody tr.hover td,
#filterTags li.hover {
	background-color:#B8DBFB!important;
	border-color:#B8DBFB!important;
}

table.clickable tbody tr.selected td,
table.clickable tbody tr.selected td:hover, 
li.selected  {
	background:#2A84E5 url(../../gfx/rummble/web/ui/bkg_clickableRow_selected.jpg) repeat-x top left!important;
	color:#FFF;
	cursor:default;
	border-top:1px solid #337BD1!important;
	border-bottom:1px solid #3074C5!important;
	
}

table.sortable th.header:hover,
.sortableControls .next:hover,
.sortableControls .prev:hover {
	background-color:#742F84!important;
	cursor:pointer;
}	

table.sortable th.headerSortUp,
table.sortable th.headerSortDown {
  background-repeat: no-repeat; 
  background-position: center right; 
}

table.sortable th.headerSortUp {background-image:url(../../gfx/rummble/web/ui/icon_tableSort_up.gif);}
table.sortable th.headerSortDown {background-image:url(../../gfx/rummble/web/ui/icon_tableSort_down.gif);}

/*column types: */

col.select {width:2%;}
col.name {width:52%;}
col.country {width:28%;}

th.checkBoxColumn {text-indent:-9999em;overflow:hidden;}
td.checkBoxColumn {text-align:center;}

th.locationDistance {white-space:nowrap;}
td.locationDistance {text-align:right;}

/* Row types */

#locationRefine .megaCity label,
#locationRefine .bigCity label {
	font-weight:bold;
}

#locationRefine .megaCity .locationName label,
#locationRefine .bigCity .locationName label {
	font-size:14px;
}

#locationRefine .specific .locationName label {
	padding-left:12px;
	margin-left:4px;
	background:transparent url(../../gfx/rummble/web/ui/icon_locationRefine_specific.png) no-repeat left center;
}

.sortableControls .pagedisplay{
	background:transparent none;
	border:0;
	float:left;
	width:20%;
	text-align:center;
	padding:5px 0;
	font-weight:bold;
	font-size:1.5em;
	color:#AE92BF;
	height:22px;
}

.sortableControls .first, 
.sortableControls .last, 
.sortableControls .pagesize {
	display:none;
}

.sortableControls .next,
.sortableControls .prev {
	width:40%;
	display:block;
	float:left;
	padding:5px 0;
	margin:0;
	height:22px;
}

.sortableControls .prev {
	background:transparent url(../../gfx/rummble/web/ui/icon_prevPage.gif) no-repeat left center;
	text-indent:-9999em;
}

.sortableControls .next {
	background:transparent url(../../gfx/rummble/web/ui/icon_nextPage.gif) no-repeat right center;
	text-indent:-9999em;
}

/* Styles for the search ticker */

#searchTicker h2 {color:#FFF;font-size:22px;}

/*-------------------------------------------*/
/* The scrolling graphic for the seismograph */

#seismograph {
position:absolute;
z-index:9;
background:transparent url(../../gfx/tremors/ui/seismograph.png) repeat-x 0 -10%;
height:75px;
width:600px;
top:65px;
left:50%;
margin-left:-410px;
}