/*
--------------------------------
Default Stylesheet for iomtt.com
Written and maintained by Adam Duke
Version 1.2 06/03/07
version 1.4 15/03/07
version 1.5 04/04/07

Version History
***************
0.1 Working in firefox & ie6 without bottom section, implements max-width resizing.  See thinkvitamin.com for example.
0.2 Footer working now with bg image on left col
0.3 Implement IE 4-5 double margin hack (see: http://www.positioniseverything.net/explorer/doubled-margin.html)
		change separators in header to solid lines.  Change left layout floats to images instead of divs to trigger IE 4/5
		haslayout property.
0.4 Fixes problem with clear in main content div which caused content to push below LHS and RHS divs.
    Implements pseudo-table hack as per http://www.456bereastreet.com/archive/200412/clearing_floated_images_in_body_text/
    LHS nav section goes white when content of main div is shorter than the RHS advert - fixed using min-height.
    Replaces spurious clearing span tages with a single css class using :after pseudo-class as per:
    http://www.positioniseverything.net/easyclearing.html
0.5 Fixes float bug in ie6 which causes 3px jog bug on left menu float. Implements negative margin on sidebar, and 0 margin on main container div via tan hack.
1.0 Implement dynamic layout classes to allow scalable floatable third and two-third layouts.
    Adds some style to bullets.
    Removed extraneous styles from press login box.
1.1 Added text-align:justify to content paragraphs, changed line height to 1.45
1.2 Fixed ie6 max-min width expression
1.3 Changed application of margin to third and twothird blocks to use a css class instead.  This saves space with the last float.
1.4 Added styles for left nav
1.5 Attempt to fix floating issue in firefox.  Applied width to advercolumn and designated padding on image.
    Also applied display table and layout:fixed to advertcolumn as per: http://www.gunlaug.no/tos/moa_12a.html
1.6 changed content id to class to avoid inheritance override issues.

Known issues 1.6
****************
Occasional float drop on third column in firefox/gecko
--------------------------------
*/


/*
-----------------------
Body and Page level CSS
-----------------------
*/

/* Nullify margins - must be explictly defined at lower level */
/** { margin: 0; padding: 0;}
html, body{
  margin: 0;
  padding: 0;
}

body {
  font-size: 100%;
  font-family: Arial, Hevetica, sans-serif;
}
*/

/*#bodyhome {
  background: #555 url('/images/body_bg.gif');
}*/

.Normal {
  font: 9pt verdana;
  background: #fff;
}

/*
a { font-weight: bold; text-decoration: none; }
a:link { color: #336699; }
a:visited {color: #003366; }
a:hover, a:active, a:focus { color : #669999; text-decoration: underline; }
*/
/*
a { font-weight: bold; text-decoration: none; }
a:link { color: #1F4B7F; }
a:visited {color: #BF2F2F; }
a:hover, a:active, a:focus { color : #599EEF; text-decoration: underline; #6991c1} 
*/

a { font-weight: bold; text-decoration: none; }
a:link { color: #1F4B7F; }
a:visited {color: #6991c1; }
a:hover, a:active, a:focus { color : #BF2F2F; text-decoration: underline; } 


#container {
  margin: 0 auto;
  max-width: 63em;
  min-width: 770px;
  background: #000000 url('/images/trophyghost.gif') no-repeat scroll bottom left;
  /*can also use bottom left instead of 0% 90% */
  color: #000;
  line-height: 1.4;
  /*border-left: 2px solid #6a6c56;
  border-right: 2px solid #0a0c05; */
}

/* ie5,6 tan hack for max-width */
/*    width: expression(document.body.clientWidth > 690? "90%": "670px" ); */
/** html #container {
  width: expression(document.body.clientWidth < 772? "770px" : document.body.clientWidth > 1006? "1004px" : "auto");
}*/
  
  
img { border: none; }

/*
--------------
Header section
--------------
*/

/*#header {
  height: 114px;
  display: block;
  line-height: 0.8;
}
*/

/*
#ttlogo {
  display: block;
  float: left;
  clear:left;
  width: 153px;
  height: 114px;
}
*/

#usefullinks {
  float: none;
  height: 46px;
  background: #fd1b14 url('/images/stripe_horizontal.gif') repeat-x 0 35px;
  margin-left: 153px;
  text-transform: uppercase;
  font-size: 0.7em;
}

#usefullinks ul {
  /* do not give this a height - it kills the iomtt.com logo float in ie6 */
  list-style: none;
  display: inline;
  font-weight: bold;
}

#usefullinks li {
  display:block;
  float:left;
  text-align: center;
  /* border-left: 1px solid #6d6e47;
  border-right: 1px solid #383915; */
  padding-top: 1.7em;
  padding-right: 1.5em;
  line-height: 0.9em
}

#usefullinks a {
  color: #ffffff;
  text-decoration: none;
}

#usefullinks a:hover {
  text-decoration: underline;
}

/*
#iomttlogo {
  float:right;
  display: block;
  margin: 5px 10px 0 0;
  padding: 0 0 0 0;
  vertical-align: middle;
  width: 97px;
  height: 25px;
}
*/

#nav {
  width: auto;
  clear:right;
  display: block;
  background-color: #fff;
  /* margin-left: 193px;  do not need this since we are not using 100% width */
  /* padding: 15px 0 4px 0 ; */
  margin-bottom: 0px;
  height: 22px;
  /*border-bottom: 1px solid #FFFF00;*/
}

#nav ul {
  list-style-type: none;
  height: 22px;
}

#nav li {
  float: left;
  display: inline;
  text-align: center;
  border-left: 1px solid #ccc; 
  /* border-right: 2px solid #ccc;*/
  /* border-right: 1px solid #383915; */
  line-height: 22px;
  /*margin-top: 0.6em;*/
}

#nav a {
  /*margin-top:10px;*/
  display: block;
  color: #333;
  background-color: #FFF;
  float: left;
  text-decoration: none;
  /*padding-top: 0.3em;*/
  font-weight: bold;
  padding: 0 10px 0 10px;
 }

#nav a:hover, #nav .selected a, #nav .selectedchild a {
  text-decoration: underline;
  background-color: #FFFFCC; /* #FFFFCC; */
}


#nav .first {
  border-left: none;
}
#nav .first a {
  padding-left: 0px;
}

#nav .last {
  border-right: none;
}


#nav .selectedchild a.home
{
  text-decoration: none !important;
  background-color: #FFF !important;
}

/* upper case */
#nav {
  text-transform: uppercase;
  /*letter-spacing: 0.05em;*/
  font-size: 0.75em;
}

/*#searchbar {
  color: #fff ;
  font-size: 0.75em;
  font-weight: bold;
  line-height: 1.9em;
  height: 46px;
  margin-left: 153px;
  font-size: 0.7em;
  }
  
#searchbar fieldset {
  padding-top: 10px;
  border: 0px;
}

#searchbar #searchinput {
  margin: 0;
  padding: 0;
}
*/

#countdown {
  color: #eee;
  margin-left: 153px;
  line-height: 23px;
  font-weight: bold;
  font-size: 0.75em;
  background: #1a1718 url('/images/grahams-stripe.gif') repeat-x left bottom;
  height: 46px;
}

#countdown p.countdownresult {
	float:right;
	padding: 8px 10px 0 0;
	font-size: 1.3em;
}
#countdown img.grahamslogo {
	float:left;
	padding: 7px 10px 0 0;
}

#countdown span#occasion {
	color: #ffff00;
}

.ttlive {
  padding-left: 25px !important;
  background-image: url('/images/icons/sitecore/ttlive/ttlive.gif') !important;
  background-repeat: no-repeat;
  background-position: 5px 2px;
}


/*
------------------
Lower Page Content
------------------
Left Bar 
------------------
*/

#sidebar {
  position:relative;
  display:block;
  top: 0px;
  clear: left;
  float: left;
  width: 103px;
  min-height: 400px; /* we set min-height to fix ie */
  /*padding: 0 0 100px 10px;*/
}

#subnav {
  color: #fff;
  font-size: 0.75em;
  line-height: 1.5em;
  /*padding: 0 0 100px 10px;*/
  padding: 0 3px 0 4px;
}

#subnav h3 {
  font-size: 1.2em;
}

#subnav ul {
  /*width: 103px;*/
  list-style-type: none;
  font-weight: bold;
}

#subnav ul li a
{
  display:block;
  padding: 0 4px;
  margin-bottom: 1px;
  color: #fff;
  text-decoration: none;
}

#subnav ul li a:hover, #subnav ul li a:focus  {
  color: #ffff00;
  text-decoration: underline;
}

#subnav ul li a.selected {
  color: #ffff00;
}

#subnav ul li ul {
  margin: 5px 0;
}

#subnav ul li ul li a {
  background-color: #999;
}                                                               

#subnav ul li ul li a:hover, #subnav ul li ul li a:focus {
  color: #fff;
  background-color: #555;
  text-decoration: underline;
}

#subnav ul li ul li a.selected {
  background-color: #555;
  color: #fff;
}

/* hack to fix ie6 rendering bug */
#subnav ul
{
  zoom: 1;
}



/*
-----------------
Main Page Content
-----------------
*/


#main {
  padding-left: 18px;
  margin-left: 103px;
  float: none; /* this is the key - we can't float without a width (which we don't know) */
  background: #ffffff url('/images/mainleftstrip.gif') repeat-y scroll 0px 50px;
}

/* sidebar negative margin hack for ie 6 only - hide from MacIE \*/
* html #sidebar {
	margin-right: -3px;
	}
* html #main {
  margin: 0px;
}
/* end hide */


#contentcontainer {
  margin-right: 140px;
  padding-top: 10px;
  font-size: 0.8em;
}

/*.content p {
  padding: 0.5em 0;
}*/

.content h1
{ 
	/*background: url('/images/tt-2010/stripe-grey.png') repeat;*/
	background: #333;
	/*-moz-border-radius: 8px; -webkit-border-radius: 8px;*/
	color: #fff;
	margin-top: 0;
	margin-bottom: 20px;
  font-size: 1.3em;
  padding-left: 15px;
  min-height: 22px;
  line-height: 1.8em;
}


.content h2
{ 
  color: #333;
  font-size: 1.2em;
  line-height: 1.1em;
}

.content h2.heading1 {
	/*background: url('/images/tt-2010/stripe-grey.png') repeat;*/
	background: #333;
	/*-moz-border-radius: 8px; -webkit-border-radius: 8px;*/
	color: #fff;
	margin-bottom: 20px;
  font-size: 1.3em;
  padding-left: 15px;
  min-height: 22px;
  line-height: 1.8em;
}

.content h3
{ 
  color: #555;
  font-size: 1em;

}

h5.sectionheader {
	/*background: url('/images/tt-2010/stripe-grey.png') repeat;*/
	background: #333;
	/*-moz-border-radius: 8px; -webkit-border-radius: 8px;*/
	color: #ccc;
	margin-bottom: 20px;
  font-size: 1.3em;
  padding-left: 15px;
  min-height: 39px;
  line-height: 2em;
}
h5.sectionheader a {
	color: #fff;
}

/* generic float clear hack to give the ability to clear floats in the content div without pushing down past the nav divs */
.floatclear {
  display:inline-block;
  width:100%;
}
  
/* Hide from IE Mac \*/
* html .floatclear {
  height:1%;
  width:auto;
}

.floatclear {
  display:table;
}
/* End hide from IE-mac */
/* Interesting rules end here */


/* this hack enables a container div to expand to fill its contents */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


#advertcolumn {
  float: right;
  margin: 10px 0 0 0;
  width: 140px;
  display: table;
  border-collapse:collapse;
  table-layout:fixed;
}

#advertcolumn img {
  padding-left: 10px;
}

#advertcolumn ul {
  list-style: none;
}

#advertcolumn li {
  padding: 0 0 10px 0;
}




/*
---------------------------------
Content Classes for use by editor
---------------------------------
*/

#content .floatright {
  float: right;
}

#content .floatleft {
  float: left;
}

#content .clear {
  clear: both;
}

#content .third {
  width: 31%;
}

#content .twothirds {
  width:67%;
}

#content .marginleft {
  margin-left: 2%;
}

#content .marginright {
  margin-right: 2%;
}

#content .padleft {
  padding-left: 10px;
}

#content .padright {
  padding-right: 10px;
}

#content .padtop {
  padding-top: 10px;
}

#content .padbottom {
  padding-bottom: 10px;
}

#content .pad {
  padding: 10px;
}

#content .borderleft {
  border-left: 1px solid;
}


#content .fixedheight {
  height: 162px;
}

#content .hideoverflow {
  overflow: hidden;
}

.tightleading {
  line-height: 1.3;
}

.tightheadings h1,h2,h3 {
  margin-bottom: 0;
  padding: 0;
}

#content .trianglebullet li, a.trianglebullet {
  /*margin-left: 1em;*/
  /*background: url(/images/triangleright.gif) no-repeat 0 4px;
  padding-left: 14px;*/
}

/* colours and backgrounds */
#content .lightyellowbg {
  background-color: #FFFFCC;
}

#content .lightgreybg {
  background-color: #ddd;
}

#content .red {
  color: #fd1b14;
}

#content .smalltext {
  font-size: 0.9em;
}

.homepagenews ul {
  padding-top: 0 !important;
}


/* 
-------
Footer2 
-------
*/
/*
#footer {
  background-color: #fff;
  color: #ffffff;
  font-size: 0.75em;
  height: 37px;
  margin-left: 111px;
}

#footer ul {
  padding-left: 10px;
  position: relative;
  top:15px;
  height:22px;
  background-color: #d0d0d0;
  list-style: none;
  display: block;
  text-transform: uppercase;
}

#footer li {
  list-style: none;
  display: inline;
}

#footer a {
  font-weight: bold;
  padding-right: 20px;
  color: #333;
  text-decoration: none;
}

#footer a:hover {
  text-decoration: underline;
  color: #000;
}
/*

#leftcorner {
  display:block;
  width: 111px;
  clear:both;
  float:left;
}

#footer #leftcorner {
  float: left;
  width: 138px;
}


/* 
---------------
Generic Classes
---------------
*/
.clear {
  display: block;
  clear: both;
}

.center {
  text-align: center;
}


/* 
----------------------
Login and registration
----------------------
*/


.loginbox {
  width: 340px;
  background-color: #ddd; border: 2px solid #ccc;
  display: block;
}

.loginbox table {
  display:inline;
  padding: 10px;
}

.upper {
  text-transform: uppercase;
}

.loginbox table input {
  margin: 3px;
  padding: 3px;
}

.loginbox table input.loginbutton {
  margin-left: 30px;
  font-size: 1.2em;
}


/* 
--------------------
Circuit Guide
--------------------
*/

div.maplinks {
  margin: 20px 0;
}

div.spectatorkey {
  color: #333;
}

div.spectatorkey dl dt {
  font-weight: bold;
  float:left;
  width:2em;
}

table.spectatorguide {
  border-spacing: 0;
  border-collapse: collapse;
  color: #333;
}

table.spectatorguide td{
  margin: 0;
  padding: 3px 5px;
  vertical-align: top;
}

table.spectatorguide th {
  text-align:left;
  padding: 3px 3px 0 3px;
}


/*
--------------------
Photo Gallery
--------------------
*/

.gallerybutton {
  background-color: #999;
}

.gallerybutton img {
  float:left;
  width: 70px;
  height: 70px;
  padding-right: 5px;
}

.gallerybutton a {
  display:block;
  height: 70px;
}

.gallerybutton a:hover {
  text-decoration: none;
}

.gallerybutton p {

  font-size: 1.2em;
  line-height: 1em;
  font-weight: bold;
  color: #fff;
}
.gallerybutton:hover, .gallerybutton:focus {
  background-color: #444;
}


/* 
--------------------
MCN News Feeds
--------------------
*/


div#mcn-rss-feeds {
  margin-top: 20px;
  font-size: 0.7em;
  width: 120px;
  display: block;
  padding-left: 10px;
}

div#mcn-rss-feeds img {
  padding: 0px; 
}


/* 
--------------------
Generic Page Classes
--------------------
*/

ul.downloads
{

}

ul.downloads li {
  list-style: none;
}

ul.downloads li a {
  list-style: none;
  padding-left: 40px;
  line-height: 40px;
}

ul.downloads li.doc {
  background: url(/images/icons/sitecore/word.gif) no-repeat 0 50%;
}

ul.downloads li.pdf {
  background: url(/images/icons/sitecore/acrobat.gif) no-repeat 0 50%;
}
ul.downloads li.txt {
  background: url(/images/icons/sitecore/document_text.png) no-repeat 0 50%;
}
ul.downloads li.zip {
  background: url(/images/icons/sitecore/winzip.gif) no-repeat 0 50%;
}

a.rss {
  padding-left: 20px;
  margin-top: 6px;
  display: block;
  background: url(/images/icons/feed-icon-14x14.png) no-repeat 0 10%;
}

abbr, acronym, .help {
  border-bottom: 1px dotted #333;
  cursor: help;
}

blockquote {
  background-color: #f9f9f9;
  padding: 10px;
}

/*#content fieldset {
  padding: 10px;
}*/

#content fieldset legend {
  /*border: 1px solid #555;
  padding: 3px 10px;
  clear: both;
  font-weight: bold;*/
}
#content fieldset p label{
  display:block;
  float:left;
  width: 200px;
  font-weight: bold;
}

#content fieldset table label {
  padding: 5px;
}

#content fieldset input[type='text']{
  width: 280px;
  font-size: 1.1em;
}

#content blockquote {
  margin: 1em;
  font-style: italic;
}

.alternatelightbg {
  background-color: #FFFFCC;
}

.alternatedarkbg {
  background-color: #FBFBE2;
}

/* News stuff */
.RSSLink { background: url(/images/icons/rss.gif) no-repeat; font-size: 0.75em; padding-left: 20px; display: block; height: 14px; margin-left: 15px; margin-top: 5px; float: right; padding-right: 20px }
/*#ArchiveOverview { margin: 10px; padding-left: 5px; font-size: 75%; background: #ffff99 }
#ArchiveOverview h3 { color: black; border-bottom: solid 1px #aaaaaa; font-size: 1.3em } */
#ArchiveOverview ul { font-weight: bold; margin:0; }
#ArchiveOverview ul li ul li { display: block; width: 33px; float: left }
#ArchiveOverview ul li ul li a { color: #fff; font-weight: normal;  }
#ArchiveOverview ul li ul li a:hover { color: #ddd; }


/* Image Gallery stuff */
div#imageGallery { padding: 10px;}
div#imageGallery fieldset { padding: 20px 10px 20px 10px; font-size: 95%; }
div#imageGallery fieldset legend { display: none;  }
div#imageGallery fieldset p { display: block; float: left; margin: 2px; }
div#imageGallery fieldset input,
div#imageGallery fieldset select { font-size: 95%; }
div#imageGallery ul.imagesUl {  }
div#imageGallery ul.imagesUl li { display: block; list-style-type: none; float: left; width: 120px; height: 120px; text-align: center; border-bottom:solid 1px #ddd; border-right: solid 1px #ddd; padding: 5px; }
div#imageGallery ul.imagesUl li a img { float: none; clear: both; border: none; }
div#imageGallery ul.imagesUl li span { clear: both; float: none; font-weight: normal; font-size: 95%;}
div#imageGallery ul.imagesUl li span a { font-weight: normal; }
div#imageGallery ul.pageNumbersUl { float: right; clear: both; font-weight: normal; }
div#imageGallery ul.pageNumbersUl li { display: block; list-style-type: none; float: left; padding: 2px 5px 5px 5px; }
div#imageGallery ul.pageNumbersUl li a { font-weight: normal; }
div#imageGallery ul.pageNumbersUl li.selectedPage { background-color: #ddd; border: solid 1px #aaa; }
div#imageGallery ul.pageNumbersUl li.selectedPage a { font-weight: bold; }
div#imagePreview { }
div#imagePreview p { }

div#radiott { }
div#radiott ul { padding: 0px 0px 0px 170px; margin: 5px; background-image: url(/images/tt-live/manxradio.gif); background-repeat: no-repeat; font-size: 90%; }
div#radiott ul li {  }
div#radiott ul li a {  }
div#radiott ul li a img { border: none; vertical-align: middle; margin: 0px 3px 0px 0px;  }
/* TT Live! Subscription */
div#ttLivePopup { background-position: 0px 70px; background-image: url(/images/tt-live/popup/ghostrider.jpg); background-repeat: no-repeat; height: 100%; }
div#ttLivePopup h1 { width: auto; background-image: url(/images/tt-live/popup/redbar.gif); background-repeat: repeat-x; height: 43px; padding: 0px 0px 0px 10px; margin: 0px;}
div#ttLivePopup h1 img { margin: 7px 0px; }
div#ttLivePopup h2 { width: auto; background-image: url(/images/tt-live/popup/greybar.gif); background-repeat: repeat-x; height: 27px; padding: 3px 0px 0px 10px; margin: 0px; font-family: Arial, Sans-Serif; font-size: 90%; }
div#ttLivePopup p { font-family: Calibri, Arial, Sans-Serif; font-size: 75%; margin: 5px; }
div#ttLivePopup h3 { font-size: 90%; margin: 5px; padding: 5px; border-bottom: solid 1px #ccc; }
div#ttLivePopup p a#closeButton { display: block; background-image: url(/images/tt-live/popup/close.gif); background-repeat: no-repeat; width: 64px; height: 22px; text-indent: -5000px; }
div#ttLivePopup p a#closeButton:hover {  background-image: url(/images/tt-live/popup/close.gif);}
div#ttLivePopup table { font-size: 70%; }

/* TT Calendar Stuff */
#calendarContainer { background: #bbbbbb; width: 95%; padding: 5px; margin-right: auto; margin-left: auto }
.calendarThird { width: 30%; float: left; display: block }
.eventButton { font-size: 80%; text-decoration: none; font-weight: normal; padding: 2px; width: 100%; border-top: solid 2px #eeeeee; border-left: solid 2px #eeeeee; border-bottom: solid 2px #888888; border-right: solid 2px #888888; margin-bottom: 5px }
.eventButton:hover { background: #ffffcc; border-bottom: solid 2px #eeeeee; border-right: solid 2px #eeeeee; border-top: solid 2px #888888; border-left: solid 2px #888888; margin-bottom: 5px }

.eventButtonPractice { background: #ddffff; }
.eventButtonRace { background: #eeffee }
.eventButton strong { font-size: larger }

.eventButton a { color: #444444; width: 100% }
.eventButton a:hover { text-decoration: none }

#calendarLinks { margin-top: 5px }
#calendarLinks a div { background: #aaaaaa }

#calendarInfo { font-size: 90% }
#calendarInfo h3 { color: Red; font-weight: bold }

.calendarSmallText { font-size: 75%; color: #555555 }

/* Social */
a.SocialEvent { color: #0088aa; padding: 5px; background: #eeeeff; width: 15%; height: 40px; display: block; float: left; margin-right: 5px; border: solid 1px #aaaaaa }
a.SocialEvent:hover { color: #0088aa; text-decoration: none; background: #ccccdd; }
#SocialTable { width: 100% }
#SocialTable td,th { border: solid 1px #aaaaaa ; padding: 2px}