/*--[TABLE OF CONTENTS]---------------------------------------------
Remember order attributes: {position, size, margin, padding, border, text, the rest}

* BODY
	+ GLOBAL STYLES

* HEADER

* CONTENT

* FOOTER

* CUSTOM CLASSES

* PAGE SPECIFIC

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

/*--[BODY]--------------------------------------------------------*/
body { position:relative; width:100%; margin:0; padding:0; font-size:0.625em; font-family:Verdana, sans-serif; text-align:left; background:url(/img/background.jpg) bottom left repeat-x fixed;   }

	div { }

	#site-container { width:100%; margin:0 auto; }

	/*--[GLOBAL STYLES]-------------------------------------------*/
	.clr { clear:both; height:0; overflow:hidden; margin:0;  }
	strong { font-weight:bold; }
	em { font-style:italic; }
	a { cursor:pointer; }
	
	.right { float:right; margin:0 10px 10px 10px; }
	.middle { text-align:center; margin:0 auto; }
	
	h1 { }
	h2 { }
	h3 { }
	p { }
	blockquote { }
	ol { }
		ol li { }
	ul { }
		ul li { }
	
/*--[HEADER]------------------------------------------------------*/
#header { padding:10px;  }
	#header h2 { position:relative; height:60px; width:320px; }
		#header h2 span { position:absolute; left:0; top:0; height:60px; width:320px; background: url(/img/logo-inner.jpg) no-repeat; }


/*--[CONTENT]-----------------------------------------------------*/
#content { position:relative; width:100%; margin:0; }
	#timeline { position:relative; margin-top:10px; height:460px; width:100%; }
	#timeline #tweets { position:absolute; z-index:1; border:1px solid #000; width:2880px; height:400px; background:url(../img/hour.jpg) right center repeat-x; }
	#timeline #tweets a { display:block; position:absolute; width:150px; height:0.8em; background:#eeeeee; border:1px solid #a1a1a1; padding:5px; overflow:hidden;  -moz-border-radius: 5px; -webkit-border-radius: 5px;	 z-index:2;}
	#timeline #tweets a span { line-height:1.2em; }
	#timeline #tweets a:hover { display:block; overflow:visible; width:150px; height:80px; cursor:default;  z-index:3; background:#cdcdcd; border:1px solid #000; cursor:default; }
	#timeline #tweets a:hover span { line-height:1.2em; }
	#timeline #tweets a:hover span:hover { background:#cdcdcd; line-height:1.2em; }
	#timeline .one { top:10px; }

	#timeline .two { top:40px; }
		
	#timeline .three { top:70px;}
		
	#timeline .four { top:100px;}
		
	#timeline .five { top:130px;}
		
	#timeline .six 	{ top:160px;}
		
	#timeline .seven { top:190px;}
	
	#timeline .eight { top:220px;}
		
	#timeline .nine { top:250px;}
		
	#timeline .ten 	{ top:280px;}
	
	#timeline .eleven { top:310px;}
	
	#timeline .twelve 	{ top:340px;}
		
	#timeline .thirteen	{ top:370px;}
	
	#timeline .fourteen	{ top:390px;}
		
	#timeline .fifteen { top:420px;}
	
	#timeline .sixteen { top:450px;}
	
	#timeline .seventeen { top:480px;}
	
	#timeline .eighteen { top:510px;}
	
	#timeline .nineteen { top:540px;}
	
	#timeline .twenty { top:570px;}
	#timeline .name { color:#FF0000;}
	
	#now { position:absolute; z-index:2; top:-2em; height:1.8em; width:400px; font-weight:bold; text-align:center;  text-decoration:underline; color:#000; background: url(../img/pointer.jpg) bottom center no-repeat; }
	.hours { position:absolute; z-index:-1; bottom:3.4em; height:1em; overflow:hidden; }
	.hours li { display:block; float:right; width:60px; text-align:right;}
	#x-line { position:absolute; top:450px; width:100%; }
	#x-line li { display:block; position:relative; float:right; }
	#backandforth { position:absolute; z-index:1; bottom:0.8em; width:99%; }
	#backandforth a { margin:0 10px; text-decoration:none; font-weight:bold; color:#000; }
	#backandforth a:hover { line-height:1em; }
	#backandforth .back { position:relative; float:left }
	#backandforth .forth { position:relative; float:right; text-align:right; }	
	#backandforth .zoom { position:relative; width:200px; margin:0 auto; font-size:1.2em; font-weight:bold; text-align:center; z-index:-1; }
/*--[FOOTER]------------------------------------------------------*/
#footer { clear:both; position:relative; margin:10px auto 0 auto; text-align:center; }
	#footer a { font-style:italic; color:#000;}

/*--[CUSTOM CLASSES]----------------------------------------------*/
.error { width:400px; margin:0 auto; font-size:1.6em; text-align:center; font-weight:bold; }

/*--[PAGE SPECIFIC]-----------------------------------------------*/
body.index #site-container { position:relative; width:800px; margin:0 auto; font-size:1.4em;}

body.index #site-container #header { width:100%; text-align:center; }
body.index #site-container #header h2 { height:130px; width:640px; margin:o auto; }
body.index #site-container #header h2 span { height:130px; width:640px; background: url(/img/logo.jpg) no-repeat; }

body.index h1 { margin:1em 0; font-size:2em; font-weight:bold;}
body.index h2 { margin:1em 0 0.5em 0; font-size:1.5em; font-weight:bold; }
body.index h3 { font-weight:bold; }
body.index p { margin:1em 0; line-height:1.2em; }
body.index form { width:200px; margin:0 auto; }
body.index img.right { border:1px solid #C7C8C3; }