/*
Rally Coverage | Terra Firma
Author: Where I Put Stuff
Author URI: http://www.whereiputstuff.com
version: 1.0
*/

/* RESET 
_______________________________________________________________________________________________________________________________ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;}

/* remember to define focus styles! */
:focus {outline:0;}
body {overflow:auto; line-height:1; color:#000; background:#FFF; font-family:Georgia, "Times New Roman", Times, serif;}
ol, ul {list-style:none;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse:separate; border-spacing:0;}

/* GLOBAL 
_______________________________________________________________________________________________________________________________ */
/* TYPOGRAPHY 
________________________________________*/
h1 {font-family:"league-gothic-1","league-gothic-2", Impact, Helvetica, Arial, sans-serif; font-size:74px; text-transform:uppercase; margin-bottom:12px;}
h2 {font-family:"league-gothic-1","league-gothic-2", Impact, Helvetica, Arial, sans-serif; font-size:58px; color:#000; text-transform:uppercase;}
h3 {font-family:"league-gothic-1","league-gothic-2", Impact, Helvetica, Arial, sans-serif; font-size:32px; color:#FFF; text-transform:uppercase;}
h4 {font-family:"league-gothic-1","league-gothic-2", Impact, Helvetica, Arial, sans-serif; font-size:22px; color:#000; text-transform:uppercase;}
h5 {font-family:Georgia, "Times New Roman", Times, serif; font-size:20px; text-transform:uppercase;}
h6 {font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; text-transform:uppercase;}

p {font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; line-height:20px; color:#494949;}

a:link {font-style:italic; color:#595959; text-decoration:underline;}
a:visited {font-style:italic; color:#494949; text-decoration:underline;}
a:hover {font-style:italic; color:#CD5A28; text-decoration:none;}
a:active {font-style:italic; color:#F9A23D; text-decoration:none;}

img, img a{border:none; padding:0;}
small {font-size:12px; font-style:italic;}
strong {font-weight:bold;}
em {font-style:italic; color:#595959;}

/* COLOR 
________________________________________*/
.turquoise {color:#248A99;}
.green {color:#A3CD39;}
.purple {color:#601A66;}
.dkorange {color:#CD5A28;}
.orange {color:#F9A23D;}
.yellow {color:#FEBE10;}
.dkgrey {color:#494949;}
.grey {color:#595959;}
.mdgrey {color:#A9A9A9;}
.ltgrey {color:#F2F2F2;}

/* ELEMENTS 
________________________________________*/
.right {float:right;}
.left {float:left}
.clear {clear:both;}

.hr-dkgrey {width:100%; height:1px; border:none; background:#595959;}
strong {color:#FFF917;}

/* LAYOUT 
_______________________________________________________________________________________________________________________________ */
#layout {width:100%; height:100%;}
#layout-header {width:100%; height:90px; margin-bottom:0; padding-top:12px;}
#layout-content {width:100%; height:auto;}
#layout-footer {width:100%; height:60px; clear:both; background:#000;}

/* HEADER 
________________________________________*/
.header-logo {width:120px; height:73px; margin:0 auto; display:block;}
#layout-header h1 {width:120px; height:73px; margin:auto; display:block; background:url(../img/header-logo.gif) no-repeat; text-indent:-9999px;}

/* CONTENT
________________________________________*/
#content-left {z-index:200; position:absolute; width:260px; height:auto; float:left; display:block; padding:0 12px 0 24px; background:#FFF;}

/* TWITSTREAM LEFT */
#content-left .twitStream {font-family:Georgia, "Times New Roman", Times, serif; font-size:12px;}
#content-left .twitStream a {font-family:Georgia, "Times New Roman", Times, serif; font-size:12px;}
#content-left .tweet {display:block; padding:.4em; margin:.4em 0; border-bottom:1px solid #A9A9A9;}
#content-left .tweet-left {float:left; margin-right:1em;}
#content-left .tweet-left img {border:1px solid #A9A9A9;}
#content-left .tweet p.text {margin:0; padding:0;}

#content-right {z-index:100; position:absolute; top:inherit; left:296px;; width:100%; height:auto; float:left; display:inline; background:#FFF;}
	#content-right h2 {color:#FFF; line-height:100%; letter-spacing:1px; margin:0; padding:6px 12px;}
		#content-right h2 a:link, #content-right h2 a:visited {color:#FFF; font-style:normal; text-decoration:none;}
		#content-right h2 a:hover, #content-right h2 a:active {color:#FFF; font-style:normal; text-decoration:none;}
	#rally-america {background:#248A99;}
	#rally-america h2 a:hover, #rally-america h2 a:active {color:#0E5A60;}
		#ra-events {clear:both;}
		#ra-events a:link, #ra-events a:visited {color:#0E5A60; text-decoration:none;}
		#ra-events a:hover, #ra-events a:active {color:#0E5A60; text-decoration:underline;}
	#world-rally-championship {background:#CD5A28;}
	#world-rally-championship h2 a:hover, #world-rally-championship h2 a:active {color:#893A1F;}
		#wrc-events {clear:both;}
		#wrc-events a:link, #wrc-events a:visited {color:#893A1F; text-decoration:none;}
		#wrc-events a:hover, #wrc-events a:active {color:#893A1F; text-decoration:underline;}
	#intercontinental-rally-challenge {background:#F9A23D;}
	#intercontinental-rally-challenge h2 a:hover, #intercontinental-rally-challenge h2 a:active {color:#C9660D;}
		#irc-events {clear:both;}
		#irc-events a:link, #irc-events a:visited {color:#C9660D; text-decoration:none;}
		#irc-events a:hover, #irc-events a:active {color:#C9660D; text-decoration:underline;}
	#canadian-rally-championship {background:#A3CD39;}
	#canadian-rally-championship h2 a:hover, #canadian-rally-championship h2 a:active {color:#657A25;}
		#crc-events {clear:both;}
		#crc-events a:link, #crc-events a:visited {color:#657A25; text-decoration:none;}
		#crc-events a:hover, #crc-events a:active {color:#657A25; text-decoration:underline;}
	#united-states-rally-championship {background:#601A66;}
	#united-states-rally-championship h2 a:hover, #united-states-rally-championship h2 a:active {color:#240928;}
		#usrc-events {clear:both;}
		#usrc-events a:link, #usrc-events a:visited {color:#240928; text-decoration:none;}
		#usrc-events a:hover, #usrc-events a:active {color:#240928; text-decoration:underline;}
	#national-auto-sport-association {background:#FEBE10;}
	#national-auto-sport-association h2 a:hover, #national-auto-sport-association h2 a:active {color:#B77E00;}
		#nasa-events {clear:both;}
		#nasa-events a:link, #nasa-events a:visited {color:#B77E00; text-decoration:none;}
		#nasa-events a:hover, #nasa-events a:active {color:#B77E00; text-decoration:underline;}
	.hash-tag {width:300px; height:auto; float:left; display:block; padding:0 12px;}

/* TWITSTREAM RIGHT */
#content-right .twitStream {font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; color:#FFF;}
#content-right .twitStream a {font-family:Georgia, "Times New Roman", Times, serif; font-size:12px;}
#content-right .tweet {display:block; padding:.4em; margin:.4em 0; border-bottom:1px solid #FFF;}
#content-right .tweet-left {float:left; margin-right:1em;}
#content-right .tweet-left img {border:1px solid #FFF;}
#content-right .tweet p.text {margin:0; padding:0; color:#FFF}

/* FOOTER
________________________________________*/
#footer-content {padding:12px 24px;}
.logo-footer a:link, .logo-footer a:visited {z-index:100; position:relative; display:block; width:71px; height:36px; padding-right:12px; float:left; background:url(/assets/img/logo-footer.gif)no-repeat; text-indent:-9999px;}
.logo-footer a:hover, .logo-footer a:active {background-position:0 -36px;}
.copyright-footer {margin-top:20px;}
	#footer-content p {color:#FFF;}
	#footer-content a:link, #footer-content a:visited {color:#FFF917; text-decoration:none;}
	#footer-content a:hover, #footer-content a:active {color:#F2F2F2; text-decoration:none;}
	
/* Instructions Window */
.instructions {text-align:center;}
.center-img {display:block; margin:12px auto;}
.dialog-content strong {color:#494949;}
#dialog-overlay {
	/* set it to fill the whole screen */
	width:100%; height:100%;
	/* transparency for different browsers */
	filter:alpha(opacity=0); -moz-opacity:00; -khtml-opacity: 00; opacity: 0; background:#FFF; 
	/* make sure it appear behind the dialog box but above everything else */
	position:absolute; top:0; left:0; z-index:3000; 
	/* hide it by default */
	display:none;}

#dialog-box {
	/* css3 drop shadow */
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	/* css3 border radius */
	-moz-border-radius: 5px; -webkit-border-radius: 5px;
	background:#FFF;
	border:4px solid #FFF;
	/* styling of the dialog box, i have a fixed dimension for this demo */ 
	width:500px; 
	/* make sure it has the highest z-index */
	position:fixed; 
	z-index:5000; 
	/* hide it by default */
	display:none;}

#dialog-box .dialog-content {padding:10px; margin:12px;}
	.dialog-content h2 {text-align:center; padding-bottom:12px;}
	.dialog-content p {text-align:left; color:#494949; font-size:12px; font-weight:normal !important;}
	
a.button {
	/* styles for button */
	display:block; width:50px; margin:10px auto 0 auto; padding:5px 10px 6px; background-color:#000;
	color:#FFF; font-size:11px; font-style:normal; font-weight:bold; text-align:center; text-decoration:none; line-height:1;
	
	/* css3 implementation :) */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
	/*text-shadow:0 -1px 1px rgba(0,0,0,0.25);*/
	border-bottom:1px solid rgba(0,0,0,0.25);
	position:relative;
	cursor:pointer;}

a.button:hover {background-color:#494949;}

/* extra styling */
#dialog-box .dialog-content p {font-weight:700; margin:0;}
#dialog-box .dialog-content ul {margin:10px 0 10px 20px; padding:0; height:50px;}