/* SCREEN.CSS
   This is where all styles for on-screen media are declaired
   
   --------------------------------------------------------------------------------------------------------------------------
   FILE INFO
   Revision number:  1.1.1
   Last updated:     2008/10/14
   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; }

   /* remember to define focus styles! */
   :focus {
     outline: 0; }

   /* 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 : 75%/1.5 Verdana, Helvetica, Ariel, Verdana, sans-serif; }
   html > body {
     font-size : 12px; }
   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; }
   
/* =design | now the browser reset and basic typographic layout is done, lets get designing
   ----------------------------------------------------------------------------------------------------------------------- */
   
/* =html =body */
   html { background:transparent url(../images/background.jpg) repeat 50% 0; }
   body {  }

/* =h1 */
   h1 { background:transparent url(../images/header.jpg) no-repeat 50% 0; height:380px; }
   
/* =h2 */
   #content_supp h2 {
     background-color : #eee; }
     
   #nav_main h2 {
     display : none; }
	 
   h2 {
     color:#FFF; font-weight:bold; }
   .home h2 {
     padding-left:20px; font-weight:bold; }
     
/* =h3 */
   h3 { color:#6c5530; }
   #news-articles h3 { margin-bottom:0; }
   #footer-gallery h3 { clear:both; margin-left:188px; }
   
   
   
   
   h3#news {
     background:transparent url(../images/news-heading.jpg) no-repeat 0 0; width:454px; height:61px; clear:both; text-indent:-999em; }
     
/* =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 > h2 + p,
   #content_main > h1 + p,
   #content_main > h2 + a + 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; }
	 
   #content_main p { font-size:11px; line-height:14px; }
   #news-articles p { margin-top:10px; }
   
   #home-content { padding-left:20px; margin-bottom:52px;}
   
   #content_main  h2 + p { font-size:15px; line-height:18px; }
   #home-content p:first-child { font-size:15px; line-height:18px; }
   
      
     
/* =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; list-style-image:url(/assets/images/list-image.png); }
   #nav_main li {
     display : inline; margin : 0 0 0 1em; }
     
/* =img */
   img,
   img a { border : none; }
   .attributed img {
     margin : 0; }
	 
    img.home-gallery, .gallery table img { display:block; margin:0; } 
   
/* =hr */
   hr { display : none; }

/* =a */
   a:link    { color : #6c5530; text-decoration : none; }
   a:visited { color : #6c5530; text-decoration : none; }
   a:hover   { text-decoration : none; color:#FFF; }
   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; }
	 
	 
   h1 a { height:150px; position:absolute; right:150px; top:30px; width:189px; text-indent:-999em; }
   
   
   .home #nav_main li#home-nav a { background:transparent url(../images/hover-image.png) no-repeat 50% 0; }
   .route #nav_main li#route-nav a { background:transparent url(../images/hover-image.png) no-repeat 50% 0; }
   .rules #nav_main li#rules-nav a { background:transparent url(../images/hover-image.png) no-repeat 50% 0; }
   .gallery #nav_main li#gallery-nav a { background:transparent url(../images/hover-image.png) no-repeat 50% 0; }
   .hall_of_fame #nav_main li#hall_of_fame-nav a { background:transparent url(../images/hover-image.png) no-repeat 50% 0; }
   .news #nav_main li#news-nav a { background:transparent url(../images/hover-image.png) no-repeat 50% 0; }
   .links #nav_main li#links-nav a { background:transparent url(../images/hover-image.png) no-repeat 50% 0; }
   .previous_winners #nav_main li#previous_winners-nav a { background:transparent url(../images/hover-image.png) no-repeat 50% 0; }
   .contact_us #nav_main li#contact_us-nav a { background:transparent url(../images/hover-image.png) no-repeat 50% 0; }
   
    #nav_main a { padding-top:20px; font-weight:bold; } 
   
   #content_main a#route-map {  background:transparent url(../images/route-map.png) no-repeat 0 0; display:block; width:323px; height:345px; position:absolute; top:-20px; left:35px; text-indent:-999em; z-index:10;  }
   
   table a:hover { color:#000; }
   
   #footer a { float:right; margin-left:15px; }
   
/* =table */
   table {
     width : 100%; border : 1px solid #000; }
	 
   .home table { border:none; margin:0 auto; width:auto; }
	 
   .gallery table { border:none; }
   #footer-gallery table { border:none; margin:0 auto; width:auto;  }

/* =caption */
   caption {  }

/* =thead */
   thead {
     text-align : left; background : #ddd; }

/* =tfoot */
   tfoot {
     background-color : #ddd; }
   
/* =tbody */
   tbody {  }
   
/* =tr */
   tbody tr:hover { background-color : #f6f6f6; }
   .home tbody tr:hover { background-color : transparent; }
   .gallery tbody tr:hover { background-color : transparent; }
   #footer-gallery tbody tr:hover { background-color : transparent; }
   
/* =th */
   th {
     font-weight : bold; padding : 2px; }

/* =td*/
   td {
     border : 1px dotted #000; padding : 2px; }

  .home td { border:none; padding:5px; }
	 
   .gallery td {
     border : none; padding:0; }
	 
	 #footer-gallery td {
     border : none; padding:5px; }

/* =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 */ }

   .contact_us label { margin-bottom:0; }
   
/* =input */
   input[type="text"],
   input[type="password"],
   textarea {
     border : 1px solid #8A845D; }
   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 : 60%; height : 8em; }

/* =select */
   label select {
     width : 100%; }
   select:focus {
     background-color : #ff9; }
     
/* =div */
   #container {
     background:transparent url(../images/body.jpg) repeat-y 50% 0;
     position : relative; overflow:hidden;
     width : 959px; margin : 0 auto; }
   #page_context,
   #site_context  {
     margin:0 auto; height:255px; }
   #nav_main {
     position : absolute; top : 206px; right : 180px; width:635px;
     margin : 0; padding-bottom:7px; border-bottom:1px solid #8a845d; }
   #content {
     position:relative; width:860px; margin:0 auto; }
   #content_main { width:605px; }
   .home #content_main { width:445px; float:right; margin-top:22px; margin-right:90px; }
   #content_main { margin-left:125px; }
   .contact_us #content_main { margin-left:125px; }
   .gallery #content_main { width:635px; margin-left:125px; }
   #news-articles { background:transparent url(../images/news-preview.jpg) no-repeat 0 0; width:467px; height:142px; margin-left:-8px; margin-top:-21px; }
   .article { width:605px; }  
   #home-content { border-left: 1px solid #8A845D; }
   #footer { clear:both; border-top:1px solid #8a845d; margin:0 auto; width:605px; }
   .home #footer-gallery { margin-top:330px; border-top:1px solid #8A845D; position:relative; left:150px; width:200px; }
   
/* =span */
   label span {
     display : block; }
   label.boolean span {
     display : inline; }
   
/* =layout-classes */

   .route-map { float:left; margin-right:20px; }

   #news-articles .float-left {
     float : left;
	 width:200px;
	 padding:15px 0 0 30px;
      }
	  
   .float-left-home  {
     float : left;
	 width:210px; border-left:1px solid #aca182; padding-left:20px; }
      
   #news-articles .float-right {
     float : right;
	 width:200px;
	 padding:15px 30px 0 0;
      }
   .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; }
	 
   .more-button {
	 position:absolute; }
	 
	 img.overlay {
      margin-top:-90px; position:absolute;}
	  
	.gallery img.overlay { bottom:18px; margin-top:0; }