/* SCREEN3.CSS
   This is where all styles for on-screen media are declaired
   
   --------------------------------------------------------------------------------------------------------------------------
   FILE INFO
   Revision number:  1.0
   Last updated:     2009/08/15
   Last updated by:  Michael Flynn
   ----------------------------------------------------------------------------------------------------------------------- */

/* =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 : 93.75%/1.5 Verdana, Helvetica, Ariel, sans-serif; }
   html > body {
     font-size : 15px; }
   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
   ----------------------------------------------------------------------------------------------------------------------- */
/* =general classes */
   .clear {
   clear: both; }

/* =print classes */
   .print {display: none;}
   
/* =html =body */
   html {
     background : #000 50% 100% no-repeat; color : #fff; }
  
/* =headings */ 
   h1, h2, h3, h4, h5, h6 {
     color : #6EBECB; }
     
     
/* =main-header */
   #main-head {
   position : relative; top : 0; height: 180px; text-align:center; }
     
   #main-head_index {background : transparent url(../images/20090211_Battersea_2009_011_1800_180.jpg) 50% 0 no-repeat; }
   #main-head_venue {background : transparent url(../images/20090612_BAC_1800_180.jpg) 50% 0 no-repeat; }
   

/* =header */
   #header {
   position:relative ; text-align: left; margin-left:auto; margin-right:auto; padding:25px 0 0 80px; width:770px; height:101px;}
   
   #header h1 {
   font-size:3em; font-style:bold; color:#FFFF00; }
   
   #header h2 {
   font-size:1.8em; font-style:bold; color:#FFFFCC; }
   
   #header h3 {
   font-size:1.2em; font-style:bold; color:#FFFFCC; }
     
/* menu */
   #menu_container {
   position : relative; top : 2em; left : 0; }     
     
/* =div */
   #container {
     position : relative;
     width : 930px; padding: 1em; margin : 0 auto; }
     
   #site_context {
     position : absolute; left : -999em;
     overflow : hidden; }
   #site_info {
     margin-bottom : 12px; }
   
   #content {
     overflow : hidden; }
   #content_supp {
     position : relative; float: left;
     width : 300px; }
   #content_main {
     float : right;
     max-width : 550px; 
     min-width : 300px; 
     padding-right : 20px;
     overflow : hidden; }
   #content_supp div {
     margin-left : 0; }
   #footer {clear:both; }
   #sambrooks-logo {
   float: left; margin-right:2em; }
     
   #battersea_countdown { font-weight : 600 ; text-align : center ; }

/* =a */
   a:link    { color : #6EBECB; text-decoration : none; }
   a:visited { color : #6EBECB; text-decoration : none; }
   a:hover   { color : #6EBECB; text-decoration : underline; }
   a:focus   { color : #fff; }
   a:active  { color : #fff; outline : none; }
   :target   { background-color : #ff6; }
   
   em { color : #6EBECB; font-style : italic; }

/* =img */ 
   img.right-img {
   float:right; margin-left:10px; }
   

   .camra_logo {
   float: right; margin-left:1.3em; }
   
/* =p */
   #caption1 {
   margin-top:-3.5em; margin-left:6em; width:120px; font-size:0.8em; text-align:center; }
   #sambrooks-caption {
   margin-top:-4em; margin-left:-8px; font-size:0.8em; text-align:center; width:120px; }
   
/* comments page replies */
   .comments_reply { 
   margin: 0.8em 0; padding-left: 0; color: #99CCFF; }      
   
/* css styling to add a telephone icon before a telephone no. */
.telephone_no {
  padding-left: 20px;
  background: url("../images/icon_telephone.gif") transparent no-repeat left;
}
/* css styling to add a mobile phone icon before a mobile no. */
.mobile_tel_no {
  padding-left: 20px;
  background: url("../images/icon_mobile_phone.gif") transparent no-repeat left;
}
/* css styling to add an email icon before a mailto: link */
.mailto_link {
  padding-left: 20px;
  background: url("../images/icon_small_email.gif") transparent no-repeat left;
}