/* SCREEN.CSS
   This is where all styles for on-screen media are declaired
   
   --------------------------------------------------------------------------------------------------------------------------
   FILE INFO
   Revision number:  1.0
   Last updated:     2010/03/28
   Last updated by:  Matt Wilcox
   ----------------------------------------------------------------------------------------------------------------------- */

/* =global_reset | based on http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
   ----------------------------------------------------------------------------------------------------------------------- */
   
   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,
   b, u, i, center,
   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-size: 100%; vertical-align: baseline; background: transparent; }
   body {
     line-height: 1; }
   ol, ul {
     list-style: none; }
   blockquote, q {
     quotes: none; }

   /* turn off outline for clicked links, whilst leaving it on for keyboard navigation */
   a:active { outline: none; }

   /* remember to highlight inserts somehow! */
   ins {
     text-decoration: none; }
   del {
     text-decoration: line-through; }

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

/* =typography | based on http://alistapart.com/articles/settingtypeontheweb/
                          http://24ways.org/2006/compose-to-a-vertical-rhythm/
                          
    NOTE: found that margin-top applied to everything is be a pain - it often messes up layout and requires jumping through
          hoops to fix, so have stopped doing this as a default and now add top margin manually when required instead.
    NOTE: using px for type is bad for people using IE6, but good for my brain. IE6 is dying, so I think that's OK. Feel free
          to tut if you're a purist. I'm a pragmatist.
   ----------------------------------------------------------------------------------------------------------------------- */
   body {
     font : 100%/1.5 Helvetica, Arial, Verdana, sans-serif; }
   html > body {
     font-size : 16px; }
   div, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   address, img, dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td {
     margin-bottom : 1.5em; }
   h1,
   .home h2 { font-size : 24px; line-height: 36px; margin-bottom: 18px; font-weight : normal; }
   h2 { font-size : 20px; line-height: 36px; margin-bottom: 18px; font-weight : normal; }
   h3, h4, h5, h6 {
     font-size : 18px; line-height: 18px; margin-bottom: 18px;
     font-weight : normal; }
   /* fix safari to stop it rendering fat text against dark backgrounds
   body { -webkit-text-stroke : 1px transparent; } */
   
   /* custom fonts
    * The following fonts are freeware, web versions generated by http://www.fontsquirrel.com - thanks Ethan! */

    @font-face {
      font-family: 'ChineseRocksRegular';
      src: url('../fonts/chinese_rocks_rg.eot');
      src: local('Chinese Rocks'), local('ChineseRocksRg-Regular'), url('../fonts/chinese_rocks_rg.woff') format('woff'), url('../fonts/chinese_rocks_rg.ttf') format('truetype');
    }
   
/* =design | now the browser reset and basic typographic layout is done, lets get designing
   ----------------------------------------------------------------------------------------------------------------------- */
   
/* =html =body */
   html {
     background : #dbe5f3 url(../images/html.png) 50% 0 no-repeat; }
   body {  }

/* =h1 */
   h1 {
     margin-bottom : 42px;
     font : 62px/62px ChineseRocksRegular; color : #61002e; }
   
/* =h2 */
   #content_main h2 {
     margin-bottom : 24px;
     font : 32px/32px ChineseRocksRegular; color : #E7820E; }
     
   #nav_main h2 {
     display : none; }
     
/* =h3 */
   #content_main h3 {
     margin-bottom : 18px;
     font : 24px/24px ChineseRocksRegular; color : #D43211; }
     
/* =h4 */
   h4 {  }

/* =p */
   p.accessibility {
     position : absolute;
     margin : -3.5em 0 0 0;
     z-index : 2; }
     
   blockquote p:before {
     content : "\201c"; }
   blockquote p:after {
     content : "\201d"; }
   blockquote p.author {
     border-top : 1px dotted #666; }
   blockquote p.author:before,
   blockquote p.author:after {
     content : ""; }
     
   .attributed p {
     margin-bottom : 0; }
     
   #content_main > h1 + p {
     font-size : 1.333em; line-height : 1.125em; margin : .929em 0 2.25em 0; }
     
   label p.error {
     padding : .5em; color : #fff;
     background : #c00; text-align : left; }
     
/* =blockquote */
   blockquote {
     clear : both; }

/* =em =strong =del =ins =abbr =acronym =code */
   em          { font-style : italic; }
   strong      { font-weight : bold; }
   del         { text-decoration : line-through; }
   ins         { text-decoration : none; color : #006; }
   del[title],
   ins[title]  { cursor : help; }
   acronym,
   abbr        { text-decoration : none; border-bottom : none; font-style : italic; cursor : help; }
   code        { font-family : dialogue, 'Courier New', courier, serif; }
   sup         { vertical-align : super; font-size : .8333em; }
   sub         { vertical-align : sub; }
   
/* =address */
   address {  }

/* =dl =dt =dd */
   dl {  }
   dt {
     margin-bottom : 0;
     font-weight : bold; font-style : italic; }
   dd {
     margin-top : 0;
     border-left : .3em solid #ddd; padding : .5em 0 0 .7em; }
   
/* =ul */
   #content ul {
     margin-left : 1em;
     list-style : disc outside; }
   #nav_main ul {
     margin : 0; }
   
/* =ol */
   #content ol {
     margin-left : 1.6em;
     list-style : decimal outside; }

/* =li */
   li {
     margin : .5em 0; }
     
/* =img */
   img,
   img a { border : none; }
   .attributed img {
     margin : 0; }
   
/* =hr */
   hr { display : none; }

/* =a */
   a:link    { color : #007cc6; text-decoration : none; }
   a:visited { color : #007cc6; text-decoration : none; }
   a:hover   { text-decoration : underline; }
   a:focus   { background-color : #ff9; color : #333; }
   a:active  { background-color : #ff6; color : #000; outline : none; }
   :target   { background-color : #ff6; }
   
   p.accessibility a {
     margin : 0; padding : 0; line-height : 1em; }
   p.accessibility a:focus {
     position : absolute; left : 1em;
     margin-top : 2.5em;
     background-color : #ffff99; }

/* =form */
   form {
     position : relative;
     width : 100%;
     overflow : hidden; }
     
   #nav_main form {
     margin : 0; }
   
/* =fieldset */
   fieldset {  }

/* =legend */
   legend {
     margin : 0; }
   
   #nav_main legend {
     display : none; }
   
/* =blockquote */
   blockquote {
     border-left : 5px solid #666; padding-left : 5px; }

/* =label */
   label {
     position : relative; /* so we can absolutely position errors */
     display : block;
     overflow : hidden; /* so no collapsing float issues */ 
	margin-bottom:0;
	margin-top:5px;}
   
/* =input */
   input[type="text"],
   input[type="password"],
   textarea {
     border : 1px solid #999; }
   input[type="text"]:focus,
   input[type="password"]:focus,
   textarea:focus {
     background-color : #ffd; }
     
   label input {
     width : 97%; }
   .boolean input {
     width : auto; margin-right : .5em; }
   
/* =textarea */
    textarea {
      width : 99%; height : 8em; }

/* =select */
   label select {
     width : 100%; }
   select:focus {
     background-color : #ff9; }
     
/* =div */
   #container {
     position : relative;
     width : 960px; margin : 0 auto 100px auto; overflow : hidden; }
   #page_context,
   #site_context  {
     height : 355px; margin-bottom : 0; }
     
/* =span */
   label span {
     display : block; }
   label.boolean span {
     display : inline; }
   
/* =layout-classes */
   .float-left {
     float : left;
     margin-right : 30px; }
   .float-right {
     float : right;
     margin-left : 20px; }
   .float-left.last {
     margin-right : 0; }
   .clear {
     clear : both; }
     
   /* full width portions */
   .one-third {
     width : 300px; text-align : justify; /* text align to show column bounds */ }
   .two-thirds {
     width : 630px; text-align : justify; /* text align to show column bounds */ }
   .half {
     width : 465px; text-align : justify; /* text align to show column bounds */ }
     
   /* portions inside a two-third parent portion */
   .two-thirds .one-third {
     width : 190px; }
   .two-thirds .two-thirds {
     width : 410px; }
   
/* =display-classes */
   .attributed {
     padding : 9px; border : 1px solid #eee;
     background-color : #f6f6f6; }
     
/* =column_layout */
   #content_main {
     float : right;
     width : 585px; }
   #content_supp {
     float : left;
     width : 330px; }
   #content_supp a img {
     margin-bottom : 12px; display : block; }
     
/* =header */
   #site_context h1 { margin : 0; }
   #site_context .company a {
     position : absolute; top : 39px; left : 0;
     display : block; width : 369px; height : 200px; margin : 0; }
   #site_context .company a span {
     position : absolute; top : 0; left : 0;
     display : block; width : 100%; height : 100%; margin : 0;
     background : url(../images/header_logo.png) 0 0 no-repeat; }
   #site_context .company a:hover span {
     background-position : 0 -200px; }
     
   #site_context a.register {
     position : absolute; top : 41px; left : 427px;
     display : block; width : 191px; height : 189px; }
   #site_context a.register span {
     position : absolute; top : 0; left : 0;
     display : block; width : 100%; height : 100%;
     background : url(../images/register2010.png) 0 0 no-repeat; }
   #site_context a.register:hover span {
     background-position : 0 -189px; }
     
/* =footer */
   #container_2 {
     position : relative;
     margin : 0;
     background : #AEC3E2 url("../images/footer.jpg") 50% 0 no-repeat; }
     
   #sitemap {
     position : relative;
     margin : auto; width : 960px; padding-top : 90px; min-height : 165px;
     font-size : 11px; }
     
   #sitemap > ul > li {
     float : left;
     width : 100px; margin-right : 20px; }
   #sitemap > ul > li > a {
     font: 18px/18px ChineseRocksRegular; color : #61002e;}
   #sitemap > ul > li li a {
     font-size : 12px; color : #000; }
     
   #event_sponsors {
     position : absolute; top : -100px; left : 375px;
     display : block; width : 573px; height : 70px;
     background : url(../images/partners.png) 0 0 no-repeat; }
   #event_sponsors h2 {
     position : absolute; left : -999em; overflow : hidden; }
     
   #event_sponsors a.partners_haven {
     position : absolute; top : 0; left : 175px;
     display : block; width : 185px; height : 70px;
     text-indent : -999em; overflow : hidden; }
   #event_sponsors a.partners_rpfh {
     position : absolute; top : 0; left : 412px;
     display : block; width : 45px; height : 70px;
     text-indent : -999em; overflow : hidden; }
   #event_sponsors a.partners_sportsaid {
     position : absolute; top : 0; left : 514px;
     display : block; width : 59px; height : 70px;
     text-indent : -999em; overflow : hidden; }
     
   ul.site_info {
     position : relative;
     width : 960px; margin : 0 auto; }
   ul.site_info li {
     display : inline; margin-right : 20px; }
   ul.site_info li a {
     font: 18px/18px ChineseRocksRegular; }
   ul.site_info li.site-credit {
     position : absolute; right : 0; bottom : 0; margin : 0; } 
     
/* =nav_main */
   #nav_main {
     position : absolute; top : 270px; left : 0;
     margin : 0;
     font-family: ChineseRocksRegular; }
   #nav_main ul {
     margin-left : -20px; }
   #nav_main li {
     display : inline; margin : 0 0 0 20px; }
   #nav_main li a {
     color : #61002e; font-size : 26px; padding : 3px 6px; background-color : transparent; -moz-border-radius : 9px; -webkit-border-radius : 9px; border-radius : 9px;
     -webkit-transition: background-color 0.25s ease-in-out;
     -o-transition: background-color 0.25s ease-in-out; /* Ready for Opera 10.5 */
     -moz-transition: background-color 0.25s ease-in-out; /* Ready for Firefox 3.7, fingeres crossed */
     transition: background-color 0.25s ease-in-out; /* I live in hope */ }
   #nav_main li a:hover {
     background-color : #61002e; color : #fff; text-decoration : none; }
   #nav_main li.current a {
     background-color : #61002e; color : #fff; }
     
/* homepage */
   .home #content_main h2 {
     margin-bottom : 80px;
     font : 62px/62px ChineseRocksRegular; color : #61002e; }
   .home #content_main h3,
   .home #content_main h4 {
     font : 26px/26px ChineseRocksRegular; color : #f57800; }

   .home #content ul.results,
   .home #content ul.downloadresults {
     margin : 0; overflow : hidden; }
   .home ul.results li,
   .home ul.downloadresults li {
     float : left;
     display : block; width : 240px; padding-right : 50px;
     margin : 0; list-style-type : none; }
     
   .home #content_main ul.results li {
     font-size : 13px; }
   .home #content_main ul.results li h4 {
      margin-bottom : 0;
     font : 16px/18px Helvetica, Arial; color : #000; }
     
   .home #content ul.downloadresults {
     margin-bottom : 18px; }
   .home ul.downloadresults a {
     font : 26px/26px ChineseRocksRegular; color : #007cc6; }
     
/* countdown_timer */
   #countdown_full {
     position : relative;
     background:#DE8B26 url(../images/timer_bg.jpg) no-repeat scroll 0 0;
     color:#FFFFFF;
     font-size:15px;
     font-weight:normal;
     height:91px;
     overflow:hidden;
     padding:10px 20px;
     width:270px;
     font-weight : bold;  }
   
   .countdown.hasCountdown { display : none; }
   
   .timer_readout.expired { background: #000 url(../images/good-luck.jpg) no-repeat 50%;}
   .timer p { margin: 15px 0 0 12px; color : #fff; font-size : 14px; font-weight : normal; }
   .timer p { font : 26px/26px ChineseRocksRegular; color : #fff; margin : 0; }
   .timer_readout { margin : 0; }

   .timer_readout .days    { position : absolute; left : 23px; top : 50px; }
   .timer_readout .hours   { position : absolute; left : 112px; top : 50px; }
   .timer_readout .minutes { position : absolute; left : 176px; top : 50px; }
   .timer_readout .seconds { position : absolute; left : 241px; top : 50px; }

   .timer_readout .time { float:right; display : block;}
   .timer_readout span span,
   .timer_readout span span { margin-right : 1px; padding: 0; float:left; text-indent:-999em; display:block; background: transparent url(../images/timer_digits.jpg) no-repeat; height:31px; width:22px;}

   .timer_readout .d0 { background:transparent url(../images/timer_digits.jpg) no-repeat 0 0;}
   .timer_readout .d1 { background:transparent url(../images/timer_digits.jpg) no-repeat 0 -31px;}
   .timer_readout .d2 { background:transparent url(../images/timer_digits.jpg) no-repeat 0 -62px;}
   .timer_readout .d3 { background:transparent url(../images/timer_digits.jpg) no-repeat 0 -93px;}
   .timer_readout .d4 { background:transparent url(../images/timer_digits.jpg) no-repeat 0 -124px;}
   .timer_readout .d5 { background:transparent url(../images/timer_digits.jpg) no-repeat 0 -155px;}
   .timer_readout .d6 { background:transparent url(../images/timer_digits.jpg) no-repeat 0 -186px;}
   .timer_readout .d7 { background:transparent url(../images/timer_digits.jpg) no-repeat 0 -217px;}
   .timer_readout .d8 { background:transparent url(../images/timer_digits.jpg) no-repeat 0 -248px;}
   .timer_readout .d9 { background:transparent url(../images/timer_digits.jpg) no-repeat 0 -279px;}
   .timer_readout .dots { background:transparent url(../images/timer_digits.jpg) no-repeat 0 -310px;}

   .timer_readout .days-to-go {
     position : absolute; top : 26px; left : 87px;
     display : block; width : 92px; height : 17px;
     background : url(../images/days_to_go.jpg) 0 0 no-repeat; }
    
/* left column */
   div.buttons a {
     position : relative; margin-bottom : 12px; }
   a.keepintouch {
     display : block; width : 332px; height : 142px; }
   a.routeplan {
     display : block; width : 332px; height : 138px; }
   a.photogallery {
     display : block; width : 332px; height : 143px; }
   a.chips {
     display : block; width : 332px; height : 143px; }
   a.timetrial {
     display : block; width : 332px; height : 156px; }
     
   div.buttons a span {
     position : absolute; top : 0; left : 0;
     display : block; width : 100%; height : 100%; }
   a.keepintouch span {
     background : url(../images/keepintouch.png) 0 0 no-repeat; }
   a.routeplan span {
     background : url(../images/routeplan.png) 0 0 no-repeat; }
   a.photogallery span {
     background : url(../images/photogallery.png) 0 0 no-repeat; }
   a.chips span {
	 background : url(../images/chips.png) 0 0 no-repeat; }
   a.timetrial span {
     background : url(../images/timetrial.png) 0 0 no-repeat; }
     
   a.keepintouch:hover span,
   a.keepintouch:focus span {
     background-position : 0 -142px; }
   a.routeplan:hover span,
   a.routeplan:focus span {
     background-position : 0 -138px; }
   a.photogallery:hover span,
   a.photogallery:focus span {
     background-position : 0 -143px; }
   a.chips:hover span,
   a.chips:focus span {
	 background-position : 0 -143px; }
   a.timetrial:hover span,
   a.timetrial:focus span {
     background-position : 0 -156px; }

/* =quote */
   div#quote { padding-top : 24px;}
   div#quote p { font : 26px/26px ChineseRocksRegular; color : #206100; margin : 0 0 12px 0; }
   div#quote p.name { font : 18px/18px ChineseRocksRegular; margin : 0 0 22px 0; color: #444; float: right;  }

    
/* =tweet */
   div#twitter { padding-top : 34px;}
   p.tweet { font : 26px/26px ChineseRocksRegular; color : #61002e; margin : 0 0 12px 0; }
   p.followus { font : 18px/18px ChineseRocksRegular; margin : 0 0 12px 0; }
   
/* =ambassadors */
   #content_main h2 {
     clear : both; }
     
/* =inline images */
   div.image a {
     display : block; margin : 0; }
   div.image a img {
     display : block; margin : 0; }
     
 #content_main ul.flickr { margin-left:-20px;}
 #content_main ul.flickr li { height:262px; float:left; background-image:none; padding:10px;margin:0.5em; margin-bottom:0.5em;}
 #content_main ul.flickr li a {  border:none;}
 #content_main ul.flickr li a span { position:relative; width:488px; background-color:#fff; background-color:rgba(255,255,255,0.8);  top:-72px; display:block; padding:6px; margin:6px; text-align:right;}
 #content_main ul.flickr li a:hover span { background-color:#fff; }

 #content_main ul.flickrset { margin-left:-5px;}
 #content_main ul.flickrset li { background-image:none; float:left; padding:12px; margin-bottom:-35px;}

 #content_main ul.flickrset li a { border:none;}
 
 /* new - login button */
  a#login_header {
    position : absolute; top : 10px; right : 0;
    display : block; width : 71px; height : 33px;
    font-size : 12px; overflow : hidden; }
  a#login_header span {
    position : absolute; top : 0; right : 0;
    display : block; width : 100%; height : 100%;
    background : url(../images/login-button.png) 0 0 no-repeat; }
  a#login_header:hover span {
    background-position : 0 -33px; }
    
  a#signup_teams { 
    background : url(../images/signup_teams.png) 0 0 no-repeat; 
    width : 157px; height : 150px; display:block; text-indent: -999em; float:left;}
  a#signup_teams:hover {
    background : url(../images/signup_teams.png) 0 -150px no-repeat; }
    
  a#signup_guardian {
    background : url(../images/signup_guardian.png) 0 0 no-repeat;
    width : 159px; height : 159px; display : block; text-indent: -999em;
    margin-left : 80px; margin-bottom : 100px; float : left;}
  a#signup_guardian:hover { 
    background : url(../images/signup_guardian.png) 0 -159px no-repeat; }
    
  a#signup_team_form {
    background : url(../images/signup_team_form.png) 0 0 no-repeat;
    width : 386px; height : 134px; display : block; text-indent : -999em; }
  a#signup_team_form:hover {
    background : url(../images/signup_team_form.png) 0 -134px no-repeat; }
  a#signup_guardian_form {
    background : url(../images/signup_guardian_form.png) 0 0 no-repeat;
    width : 3869px; height : 159px; display : block; text-indent : -999em; }
  a#signup_guardian_form:hover {
    background : url(../images/signup_guardian_form.png) 0 -159px no-repeat; }