/**********************************/
/***   TimeTravellerTM CSS      ***/
/***   Angela Gabereau          ***/
/***   April 23, 2010           ***/
/**********************************/	

/****************************/
/***      GENERAL         ***/
/****************************/	

*									{ margin: 0; padding: 0; }
html								{ overflow-y: scroll; }
html, body							{ height: 100%; }
body {
	font-size: 62.5%;
	margin:0;
	padding:0;
	padding-top: 10px;
	font-family:Arial,Verdana, Helvetica,Sans-Serif;
	font-size:14px;
	background: #ffffff;
	line-height: 1.22em;
	color: #272727;
	background: url(images/body-bg.png) top center repeat-x white;
	}									  									  
ul									{ list-style: square inside; }
ol									{ list-style: decimal inside;margin: 0.5em 0 0 1.5em;padding: 0; }
a									{ outline: none; text-decoration: none; }
a:link 								{ text-decoration: none; }
a:visited  							{ text-decoration: none; }
a:hover 							{ text-decoration: none; }
a:active 							{ text-decoration: none; }
a img								{ border: none; background: none; }
img									{ vertical-align: middle;border:0; }
table								{ border-collapse: collapse; }
hr 									{ color: #6dc90a; }

h1, h2, h3, h4, h5, h6 {
	font-family: 'Trebuchet MS', Verdana, Arial, sans;
	margin: 0;
	padding: 0;
	font-weight: normal;
	}
  
h1 {
	font-size: 22px;
	}

h2 {
	font-size: 18px;
	}

h3 {
	font-size: 16px;
	margin: 8px 0;
	line-height: 20px;
	font-weight: bold;
	color: #295785;
	}

p {
	margin: 0.5em 0em 1em 0em;
	line-height: 1.3em;
	}

#clear {
	clear:both;
	}


/****************************/
/***       LAYOUT         ***/
/****************************/	

#wrapper {
  position: relative;
  width:940px;
  margin:0 auto;
  padding: 0;
  background: #fff;
  }
  
#main {
  float:right;
  margin:0;
  padding: 0;
  padding-top:140px;
  width:980px;
  border-left-width: 1px;  border-left-style: single; border-left-color: #6dc90a; 
  }

#content {
	width:940px;
	height: auto !important;
	margin:0;
	}  

#textwrapper {
	width:940px;
	margin:0px 20px 0px 20px;
	float:left;
	}  
    
#banner {
	position: absolute;
	top: 0px;
	width:980px;
	height:122px;
	margin:0;
	padding: 0;
	background: url('../images/brushed_steel.jpg') no-repeat;
	}


/****************************/
/***        LOGOS         ***/
/****************************/	

#abteclogo {
	position: relative;
	width:188px;
	height:74px;
	margin:0;
	padding: 0;
	float:right;
	}
#abteclogo img {
	width:160px;
	margin:0;
	padding: 13px;
	}
	
#ttlogo {
	margin:0;
	padding: 15px 0 0 15px;
	}
  
#ttlogo img {
	width:400px;
	margin:0;
	padding: 0px;
	}
  
#ttlogo h2{
	color: #6dc90a;
	padding-left:60px;
	padding-top:8px;
	padding-bottom:60px;
	font-size: 24px;
	}

	
/****************************/
/***    IMAGES/VIDEO      ***/
/****************************/

#billboard { 
	color: #000; 
	font-size: 16px; 
	width: 980px; 
	margin: 0 auto 18px; 
	overflow: hidden; 
	position: relative;
	background: url('../images/sl-glasses.jpg') no-repeat; 
	height: 360px; 
	margin-top:0px;
	}

#tt-advert {
	position: relative;
	margin:0;
	padding: 30px 20px;
	float:left;
	width: 450px;
	}
#glasses-small {
	position:absolute;
	top:130px;
	left:320px;
	height:200px;
	z-index: -1;
	}
  
#imagebanner {
	display:block;
	margin: 0 20px;
	}
  
#imagebanner img {
	width:300px;
	padding:10px 0;
	}
  
#video-player {
	display:block;
	width:720;
	height:405;
	padding: 80px 110px 80px 110px;
	}
#hud-img {
	width:800px;
	padding:20px 0px 0px 60px;
	}
#hud-descr {
	width:790px; 
	padding:20px 0px 40px 70px;
	}


/****************************/
/***     BUTTONS          ***/
/****************************/
  
#button-collection {
	float:right;
	padding:200px 0px 0px 0px;
	}
  
#button-collection a{
	color: #000000;
	}
  
#button-collection a:hover{
	color: #FFFFFF;
	}
  
#button-text {
	position:relative;
	left:-115px;
	top:-3px;
	font-size:13px;
	font-weight: bold;
	font-family: 'Trebuchet MS', Verdana, Arial, sans; 	
	}

	
/****************************/
/***       FOOTER         ***/
/****************************/
  
#footer {
	position: relative;
	width:980px;
	margin:0;
	padding: 0;
	text-align: right;
	color: #8a8a8a;
	border-top-width: 4px;  
	border-top-style: double; 
	border-top-color: #6dc90a; 
	}
  
#footer a {
	text-decoration: none;
	color: #8a8a8a;
	}
  
#footer a:hover {
	color: #333;
	}


#limegreen {
	color: #6dc90a;
	}

.dark-grey {
	color:#231F20;
	font-weight:bold;
	}
.light-grey {
	color:#808284;
	}

.sub-header	{
	font-size: 20px;
	margin: 0px;
	padding: 0 0 5px 0px;
	line-height: 20px;
	font-weight: bold;
	color: #295785;
	display:block;
	border-bottom: 1.5px solid #B8B8B8;
	width:940px;
	}
	
	
/****************************/
/***        MENU          ***/
/****************************/
  
.menu {
	width:980px; 
	font-size:0.85em;
	position:absolute;
	top: 82px;
	left: 0;
	z-index:9999;
	background: #55aaff;
	height: 35px;
	}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
	height: 35px;
	padding:0;
	margin:0;
	list-style-type:none;
	}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
	float:left;
	position:relative;
	vertical-align:top;
	}
/* style the links for the top level */
.menu a, .menu a:visited {
	width: 142px;
	display:block;
	font-size:13px;
	text-decoration:none; 
	color:#fff; 
	background:#55aaff; 
	padding: 7px 10px; 
	line-height:21px;
	text-align: center;
	}

.menu a.borderright {
	border-right: 1px solid #295785;
	}

.menu a.borderright:hover {
	background: #55aaff;
	}

.menu a#selected {
	background: #6dc90a;
	}

.menu a#selected:hover {
	background: #444444;
	}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {

}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
	background:#e9e9e9;
	}
/* style the second level hover */
.menu ul ul a.drop:hover{
	background:#6dc90a;
	}
.menu ul ul :hover > a.drop {
	background:#6dc90a url(../images/none.gif) no-repeat;
	}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
	visibility:hidden;
	position:absolute;
	height:0;
	top:35px;
	left:0; 
	width:150px;
	}
/* another hack for IE5.5 */
* html .menu ul ul {
	top:35px;
	t\op:35px;
	}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
	background:#e9e9e9; 
	color:#000; 
	height:auto; 
	line-height:1em; 
	padding:5px 10px; 
	width:142px;
	border: 1px solid #ccc;
	border-width: 0 0 1px 0;
	/* yet another hack for IE5.5 */
	}
* html .menu ul ul a {
	width:129px;
	w\idth:129px;
	}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
	color:#fff; 
	background:#6dc90a;
	}
.menu :hover > a, .menu ul ul :hover > a {
	color:#fff;
	background:#6dc90a;
	}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
	visibility:visible; 
	}