/* ---------------- -------------------*/
body{background: url(../images/chart_header.jpg) no-repeat top center #00001B;}

input, textarea{padding:0.4em; border:none; -moz-border-radius: 0.4em; -webkit-border-radius:0.4em; border-radius:0.4em; font-size: 0.9em; color:#363636; background: url(../images/input-bg.jpg) no-repeat bottom left #fff;}
input:focus, textarea:focus{/*border:1px solid #e0604e;*/}
input.alert{border:1px solid red;}
.submit, input[type=submit]{cursor: pointer; background:#F07D21; color:#ffffff; font-family:'ArcherMedium', 'Palatino', 'Times New Roman', Times, serif; padding-bottom:0.3em;}

#header{ float:left; padding:5em 0 0 3em; margin-bottom: 2.5em;}
	#branding{ color:#444;  font-size:1.6em; line-height: 6; margin:-2.2em 2em 0em 0; padding:0.5em 0 0.6em; float:left; }
		#branding a{background:url(../images/logo.png) no-repeat top left; color: #F07D21; display: block; height:142px; width:301px; text-indent: -9999px; text-decoration: none; text-transform: uppercase;}
	#utility{position: absolute; top:10px; right:10px; font-size:0.8em; color:#727272;}
		#utility a{color:#f2f2f2;}
	.message{border:2px solid black; border-top:0;background:#ffffff; background-color: rgba(255,255,255,0.95); padding: 2em; margin: 0 auto; position: absolute; top:0; left:50%; margin-left:-300px; width:600px;}
		.message p{padding:1em;}
		.success{border-color: green;}
		.alert{border-color: red;}
	.alertbox{background:#ffffff; background-color: rgb(205,205,205); padding: 2em; margin: 0; clear:both; }
	
	#list_selector { float: left; margin:0 0 4em; font-size: 0.92em; position: relative; z-index: 98;}
		#list_selector>div { float:left; margin-right:0.5em; position: relative; z-index: 99;}
			#list_selector input{height: 27px; padding:0 4px;}
			#list_selector label{color:#f2f2f2; font-family:'ArcherMedium', 'Palatino', 'Times New Roman', Times, serif; margin-left:0.6em;}		
			#list_selector input#listid{width:auto; padding-right:45px; cursor: pointer; background-position: right -4px;}
			#list_selector .submit{margin:0; padding:0; width:122px; height: 27px; vertical-align: top; background: transparent; }
			#list_dropdown{display:none; position: absolute; width:100%; background: #fff; border:1px solid #ccc; z-index: 100;}
				#list_dropdown li{cursor: pointer;}
				#list_dropdown li:hover, #list_dropdown li.hover{background: #cdcdcd;}
			#list_selector input#screen_name{-webkit-border-radius:0.4em; border-radius:0.4em; -moz-border-radius:0.4em; margin-right:0;}
		#list_loading { width:16px; height:16px; background:url(../images/loader-16.gif) no-repeat; text-indent:-9999px; }

	#list_info{padding-top:10px; margin-top:5px; background: url(../images/bubble-point-purple.png) 14px 0 no-repeat; position: absolute; z-index: 97;}
	#list_info ul{color:#F47D1C; font-size:0.8em; padding: 1em; width:242px; background: #2B234E; -webkit-border-radius:8px; -moz-border-radius: 8px; border-radius:8px; font-style: italic; }
	#list_info a{color:#fff; font-style: normal;}


/* ---------------- Home Page -------------------*/


.home{background:#C7EBED url(../images/home-bg.jpg) repeat-y center; text-align: center;}	
.home #wrapper{ background: url(../images/home-wrapper-bg.jpg) no-repeat top center #00001B;
	width:780px; height: 750px; margin:0 auto; position: relative; }
.home #branding, .home #footer, .home #header{display: none;}
.home #content{margin:0 0 0 280px;}
.home h1{color:#F47D1C; font-size:2.4em; line-height: 1.2; margin-bottom:0; padding-top:160px; font-weight: normal;}
.home p{}

.home #connect-twitter{width:207px; height:82px; color: #2B234E; position: relative; display: block; margin:0 auto;}
.home #hero_image{float:left;}

#tour{overflow: hidden; position: relative;}
#tour ul{width:9000px; height: 450px; overflow: hidden; position: relative;}
	#tour li{font-family:'ArcherMedium', 'Palatino', 'Times New Roman', Times, serif; color: #F47D1C; font-size: 2em; line-height: 1.2; font-weight: normal; width:540px; margin:0 auto; float: left; margin:0 120px;}
		#tour li div{height: 285px; position: relative; text-align: center; vertical-align: bottom; line-height: 2; margin-bottom:40px;}
			#tour li img{position: absolute; bottom: 0; left: 50%;}
.home #next, .home #previous{position: absolute; top:320px; background: transparent; display: block; width:106px; height: 80px; line-height: 4;}
	.home #next:hover, .home #previous:hover{}
	.home #next span, .home #previous span{display: block; position: absolute; top:0; left:0; width:100%; height: 100%;}
.home #next{right:-47px; width:108px;}
	.home #next span {background: url(../images/home-more.png);}
.home #previous{left:-46px; }
	.home #previous span {background: url(../images/home-previous.png); }

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

.meta{margin:0 0; border-top:none; border-bottom:none; overflow: hidden; position: relative; padding: 0.3em 2em; position: relative; clear: both; background: transparent;}
	.meta dt, .meta dd{float:left; margin-right:1em; color:#727272; text-decoration: none;}
		.meta a{color:#727272; text-decoration: underline;}
	.meta a:hover{text-decoration: underline;}
	.meta dt{font-family:'ArcherMedium', 'Palatino', 'Times New Roman', Times, serif; color: #F47D1C; }
	.meta dd{font-size:0.8em; line-height: 1.8; /*border-right:1px solid #727272;*/ padding-right:1em;}
		.meta dd:last-child, .meta dd .last{border:none;}
#available_charts{margin:0;}

.statistic{position: relative; clear:both; padding-right:100px; background:#F2F2F2; background: transparent; overflow: hidden;}

.statistic.even {background:#DEDEE2;}
	.statistic h2{margin:1em 0 0.2em 2em; float: left;}
	.statistic.odd h2 {color:#ffffff;}
	.statistic .totop{position: absolute; right:1em; top:1em; font-size:0.8em; text-decoration: underline; color:#727272;}
	.statistic.even .totop{color:#727272;}
	
.statistic .sort_by{color:#cdcdcd; float: right; margin:3.5em 1em 0; font-size:0.8em;}
	.statistic.even .sort_by{color:#727272;}
	.statistic .sort_by dt, .statistic .sort_by dd{float: left; margin-right: 0.5em;}
	.statistic .sort_by dd{text-decoration: underline;}

#twitter_meta{display:none; padding-left:3em;}

#footer{overflow: hidden; margin-top:1em; padding:3em; clear: both; }
	#footer div{width:33%; float:left; margin-bottom:1em;}	
	#footer li{line-height: 1em; margin-bottom:0.5em;}
	#footer h2{color:#F07D21;}
	#footer a{color:#fff;}
	#footer #colophon{clear:both; padding:1em 0 1em 0; margin:1em 0 0 0; font-size: 0.8em; text-align: center;}
	#footer input{width:auto; margin:4px 0 0;}
	#footer textarea{padding:5px; width:85%; font-family: 'Helvetica Neue', Helvetica, Arial, Lucida Grande, Verdana, Sans-serif; background:#fff;}
	
	
ul.legend{overflow: hidden; margin-bottom:1em; line-height: 1.4;}
	ul.legend li{float:left; overflow: hidden; font-size:1em; margin-right:1em; color: #6AA5CB;}
	ul.legend span{width:1.2em; height: 1.2em; margin-right: 0.3em; background: #6AA5CB; display: block; float: left;}

.graph{clear: both; width:auto; margin:0 1em 3em; padding:2em; background: #ffffff; -webkit-box-shadow:0px 5px 10px rgba(0,0,0,0.2); -moz-box-shadow:0px 5px 10px rgba(0,0,0,0.2); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px; }
	.graph:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.horizontal_bar_graph{ font-size:1em; line-height: 2.4;  }
.horizontal_bar_graph .bar{padding:0 1%; border-bottom:1px solid #f2f2f2; float: left; width:98%; position: relative; clear: both; z-index: 49;}
	.horizontal_bar_graph .hover{-moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.3); -moz-border-radius:5px; -webkit-border-radius:5px; z-index: 50; background: #f1f1f1;}
.horizontal_bar_graph .bar_title{text-transform: uppercase; font-weight: 600; width:18%; float:left; margin-right:2%; border-right:none; padding:0 0 0em 0; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; position: relative;}
	.horizontal_bar_graph .bar_title a{color:#787878; text-decoration: none; font-weight:300; text-transform: none; margin-left:36px; }
	.horizontal_bar_graph .bar_title a.profile_image{position: absolute; margin-left:0; left:0;}
		.horizontal_bar_graph .bar_title a.profile_image img{vertical-align: middle;}
.horizontal_bar_graph .bar_wrapper{width:65%;  background:none; float:left; padding:0; margin:0;  position:relative; line-height: 1.5;}
	.horizontal_bar_graph .bar_wrapper .bar_proper{background: #6AA5CB; margin:0.5em 0; position: relative; z-index: 1; text-indent: -9999px;}
		.two_rows .horizontal_bar_graph .bar_wrapper .bar_proper{font-size:0.6em;}
	.horizontal_bar_graph .bar_wrapper .alpha{margin-bottom:-0.4em;}
	.horizontal_bar_graph .bar_wrapper .bar_proper:nth-child(even){background:#D4AF74;}
	.horizontal_bar_graph .bar_stat{width:12%; margin-left:2%; float:left; padding:0 0 0em 0;}
		.horizontal_bar_graph .bar_stat span{}
	.tick_marks{position: absolute; top:0; left:0; width:100%; height: 100%; z-index: 0; background:url(../images/1px-gray.gif) repeat-y left top;}
	.tick_marks span{display: block; width:10%; height:100%; text-indent: -9999px; background:url(../images/1px-gray.gif) repeat-y right top; float:left;}
	.horizontal_bar_graph .legend{border: none;}
	ul.legend{margin-left:0.7em;}
	div.legend .tick_marks span{text-indent:0; text-align:right; padding-right:2%; width:18%; background: none;}
	div.legend .bar_title{border-color:#ffffff;}
	.bar_utility{position: absolute; display: none; top:0; left:0; background: #fff; }
	.hover .bar_utility{display: block;}
		.bar_utility .status{width:400px; position: absolute; top:3em; left: 0;  font-size:0.8em; line-height: 1.2; background: transparent url(../images/bubble-point-purple.png) 16px top no-repeat; padding:10px 0 0;}
			.bar_utility .status div{background: #2B234E; -moz-border-radius:5px; -webkit-border-radius:5px; -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.5); padding:1em; color:#fff;}

.timeline .line{width: 100%; display: block; position: relative; height: 100px; }
.timeline .users{position: relative; left:-16px; width:87%; margin:0 auto;}
.timeline .user{position: absolute; top:0; z-index: 99; }
.timeline .hover{z-index: 100;}
	.timeline .user span{display: block; background: transparent url(../images/bubble-point-gray.png) center top no-repeat; padding:10px 0 0; }
	.timeline .odd span{padding:0 0 10px; background-position: bottom center;}
		.timeline .user span a{display: block; width: 32px; height: 32px; padding:2px; background: #cdcdcd;}
	.timeline .user .joined{display: none; font-size:0.8em; -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.5); -moz-border-radius:5px; -webkit-border-radius:5px; position: absolute; top:-5px; left:-5px; padding:5px 5px 0px 46px; width:200px; height: 100%; background: #fff; }
	.timeline .hover .joined{display: block; z-index: 101;  }
		.timeline .hover span{z-index: 102; position: relative; background: none;}
.timeline .even{top:60px;}
	.timeline .even .joined{top:5px;}
.timeline .legend{border-top:1px solid #cdcdcd; width:100%; top:52px; position: absolute;}
	.timeline .legend .first, .timeline .legend .last{background: #fff; position: relative; top:-.8em;}
	.timeline .legend .first{float:left;}
	.timeline .legend .last{float:right;}

.statistic.odd .sort_by {color:#4d4d4d;}
.statistic.odd .bar_wrapper .bar_proper {background:#80C060;}
.statistic.odd .bar_wrapper .alpha {background:#364970;}
.statistic.odd ul.legend li {color:#80C060;}
	.statistic.odd ul.legend span {background:#80C060;}
	.statistic.odd .bar_stat span {color:#80C060;}
.statistic.odd ul.legend .alpha {color:#364970;}
	.statistic.odd ul.legend .alpha span {background:#364970;}
	.statistic.odd .bar_stat span.alpha {color:#364970; margin-right:0.2em;}
	
#map_canvas{}
	#map_canvas h1{font-size:1.3em; padding:0; margin:0;}
	#map_canvas p{font-size:0.8em;}
	#map_canvas .description{z-index: 100; position: absolute; bottom:0; width: 100%; background: #fff;}