/* ------ general ------ */

html {overflow:scroll; }

body, div, h1, h2, h3, h4, h5, h6, ol, ul, li, p, img {
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  background-color: #330000;
  color: black;
  font : 95%/1.5 Verdana, Helvetica, arial, sans-serif; 
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  line-height: 1em;
  text-align: left;
  color: #660000;
  padding: 0.6em 0 0.25em 0; 
  clear: left;
}
h1 {  
   font-variant: small-caps; 
}

.jumpto {
       position:absolute;
       left:-1000px;
       width:1px;
       height:1px;
       overflow:hidden;
 }

.dropcap > p:first-child:first-letter {
   letter-spacing:0;  
   text-transform:uppercase;  
   color:#ccc;  
   font-family:times,serif;  
   font-size:6.5em;  
   float:left;  
   margin:0.1em 0.1em 0 0;  
   line-height:0.6;  
}


.print {display: none; }
.clear {clear: both; }
.signature {font-weight: bold; font-style: italic; }
.links ul {padding:0; margin:0; list-style-type:none; }
.links li {padding: 0.25em 0;}

.liststyle1 {list-style-type:none; padding: 0 0 0 3%; margin: 0; float: left;}
.liststyle1 ul {list-style-type:none; }
.liststyle1 li {margin-top: 1em; }
.liststyle1 ul li {margin-top: 0; }
.liststyle1 li em {font-weight: bold; font-style: normal; font-size: 1.1em; }
.liststyle1 li h1 {font-weight: bold; font-style: normal; font-size: 1.6em; }

.bof ol {list-style-position: inside;}

div.photo-left { float:left; margin:0 10px 0 0; border:0; }
div.photo-left p.caption { font-size:0.8em; font-style:italic; text-align:center; margin-top:0; border-top:0; }

#slideshow1 {float:left; margin:0 10px 0 0; border:0; text-align:center; font-size:0.8em; font-style:italic; width:240px; }
#slideshow2 {float:left; margin:0 10px 0 0; border:0; text-align:center; font-size:0.8em; font-style:italic; width:180px; }
#slideshow5 {float:left; margin:0 10px 0 0; border:0; text-align:center; font-size:0.8em; font-style:italic; width:240px; }
#slideshow8 {float:left; margin:0 10px 0 0; border:0; text-align:center; font-size:0.8em; font-style:italic; width:250px; }


#beerofthefestival2010 p.caption, #poty_2009 p.caption {width:240px; margin:0; border:0; } 

div#poty_2009 h2 { margin-bottom:0; }
div#poty_2009 h3 { margin-top:0; padding-top:0; }

.iframe {padding-left:15px;}

div#diary_summary {float:left; width:160px; padding:12px; border: double; margin: 10px 12px 12px 0; font-size:0.8em; }
div#diary_summary h3 {margin:0 0 0 1.4em; padding: 0; font-weight:bold; }

#diary_style ul {padding:0; margin:1em 0 0 0; list-style-type:none; }
#diary_style li.diary_date {font-weight: bold; padding: 0; margin: 0.9em 0 0.5em -0.1em; font-size: 1.1em;}
#diary_style li.diary_item em { color:#660000; font-weight:bold;}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    overflow: hidden;
}

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


/* ------ page ------ */

#page {
  border:0 none;
  padding-bottom: 1.2em;
}

div#page-padding {
  padding: 1em 1em 0 1em;
  border: 0 none;
}
div#page {
  border: 0 none;
  margin: 0 auto;
  width: 770px;
  clear: both;
  background-color: #ffffff;
}

/* ------ header ------ */

#page-updated {font-size:0.75em;}

#col-left h1 {margin-bottom:-0.2em; padding-bottom:0; }

/* ------ footer ------ */

#footer {
  padding: 0.66em 0.66em;
  background-color: #660000;
  color: white;
  line-height: 1em;
  margin-top: 1.5em;
  clear: both;
  text-align: center;
  font-size: 0.8em;
}
#footer a:link, #footer a:visited {
  text-decoration: none;
  font-weight: bold;
  color: #eeeeee;
  border-bottom: 0;
}
#footer a:hover, #footer a:focus, #footer a:active {
  border-bottom: solid 1px;
}

/* ----- banner ----- */

#banner {
  width: 770px;
  position: relative;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}
/* banner.jpg w:770px h:180px */
#banner-logo a {
  display: block;
  height: 180px;
  width: 140px;
  background:url("pwr_stn_left_2.jpg");
  background-position:top;

 }

#banner-logo a:hover, #banner-logo a:focus, #banner-logo a:active {
  height: 180px;
  width: 140px;
  background:url("pwr_stn_left_2.jpg");
  background-position:bottom;

 }

#banner-title {
  margin-left: 140px;
  border-left: 0;
  height: 180px;
  width: 630px;
  background-image: url("pwr_stn_right.jpg");
  background-repeat: no-repeat;
  background-position: right;
}
#banner-title h1 {
  margin-left: 0;
  color: #660000;
  padding: 0.3em 0 0.5em 0;
  white-space: nowrap;
  font-size: 2.5em;
}
#banner-title h2 {
  margin-left: 0;
  margin-right: 200px;
  color: #660000;
  padding: 0.3em 2em 1.4em 0.3em;
  font-size: 1.2em;
}
#banner-title h3 {
  margin-left: 0;
  color: #660000;
  padding: 0.3em 0 0.5em 0.5em;
  white-space: nowrap;
  font-size: 1.1em;
  font-family: 'comic sans ms', Tahoma, sans-serif;
}

span#cer {
  letter-spacing: 0.1em;
  font-style: italic;
  margin-left:0.2em;
}
span#cam {
  position: relative;
  left: 0;
}
/* camra.gif w:100px h:159px */
#banner-logo {
  position: absolute;
  left: 0;
  top: 0;
}
/* End of banner styling */

#battersea_countdown { font-weight:600; text-align:center; }

/* ------ content ------ */

#content {
  padding-left: 1.5em; 
  position: relative;
  clear: both;
  font-size: 76%;
}
#content h2 {
  margin: 0.5em 0;
  font-size: 1.66em;
}
#content h3 {
  margin: 1.2em 0 0.5em 0;
  font-size: 1.4em;
}
#content h4 {
  margin: 1em 0 0.5em 0;
  font-size: 1em;
  font-weight: bold;
}
#content h5 {
  margin: 0.75em 0 0.5em 0;
  font-size: 1em;
  font-style: italic;
}

#content .address {
  font-style: italic;
}

#content p {
  margin-top: 0.5em;
}
#content li {
  margin-left: 2em;
}
/* =a */
#content   a:link    { color : #660000; text-decoration : none; font-weight : bold;}
#content   a:visited { color : #660000; text-decoration : none; font-weight : bold; }
#content   a:hover   { color : #660000; text-decoration : underline; font-weight : bold; }
#content   a:focus   { color : #660000; }
#content   a:active  { color : #000000; outline : none; }
#content   :target   { font-weight : normal; }

#content a.img-link, #content a.img-link:link, #content a.img-link:visited,
#content a.img-link:hover, #content a.img-link:focus, #content a.img-link:active  
{
  border: none 0;
  background-color: #ffffff;
}

/* ------ col-left ------ */

#col-left {
  padding: 0.5em 0.5em 0.5em 1em;
  float: left;
  width: 500px;
  text-align: justify;
}

/* ------ col-right ------ */

#col-right {
  margin-top: 0.5em; 
  padding: 0 0.5em 0.5em 0.5em;
  float: right;
  width: 220px;
  text-align: center; 
  font-size: 75%; 

}

#col-right h2 {
  margin-bottom: 0;
  text-align: center;
  font-size: 1.33em;
  line-height: 1.2em; 
  font-weight: bold; 
}
#col-right h3 {
  margin-bottom: 0.33em;
  text-align: center;
  font-size: 1em;
  font-style: normal;
  font-weight: bold;
}
#col-right div {
  margin: 0 0 1.8em 0; 
}

#col-right p {
  margin-top: 0.33em;
  line-height: 1.33em;
}

#details {margin:1em 3em 1em 3em; list-style-type:none; }
#details em {color:#660000; font-weight:bold;}
#details ul {list-style-type:none; }

#latest_news_from_camra {padding:0 2em;}
#latest_news_from_camra ul {list-style: none; margin-top: 1em; }
#latest_news_from_camra li {margin: 0; padding: 0; } 
.rsspubdate { margin:0 0 1.5em 0; font-style:italic; }

/* styling for the london pub of the year lists */

ul#london_poty_list {list-style: none; margin: 2em 0; }
#london_poty_list li {margin: 0.5em 0; padding: 0; }


/* styling for the pub guide pages */

.PubList {clear: both;}

#pub_guide h1 {margin-bottom: 0; padding-bottom: 0; }
#pub_guide h2 {margin-top:0.2em;  margin-bottom: 0; margin-left:0; padding-top: 0; font-size: 1.25em; }
#pub_guide h3 {margin-top: 0.8em; margin-bottom: 0; }

#pub_guide_liststyle1, #pub_guide_liststyle2 {font-size: 0.75em; margin-top: 0.9em; margin-bottom: 0.6em; font-family: arial, helvetica, sans-serif; } 
#pub_guide_liststyle1, #pub_guide_liststyle2 {list-style-type: none; display: block; margin:0; padding: 0;  font-family: arial, helvetica, sans-serif; }
#pub_guide_liststyle1 li, #pub_guide_liststyle2 li {float: left; font-family: arial, helvetica, sans-serif; }
#pub_guide_liststyle1 a:link, #pub_guide_liststyle1 a:visited, #pub_guide_liststyle2 a:link, #pub_guide_liststyle2 a:visited { border-bottom: 0; font-weight: bold; font-family: arial, helvetica, sans-serif; text-decoration: underline; color: #000000;  }
#pub_guide_liststyle1 a:hover, #pub_guide_liststyle2 a:hover, #pub_guide_liststyle1 a:focus, #pub_guide_liststyle2 a:focus, #pub_guide_liststyle1 a:active, #pub_guide_liststyle2 a:active  {  color:#660000;   background-color: #ffff66; border-bottom: 1px solid #660000;}

.pub {padding: 0 0.6em 0.5em 0.6em; color: #000000; background-color: #FFFFFF; margin: 0.5em; border: 2px solid #000000; }
.pub h4 {font-size: 1.0em; margin: 0; padding: 0.1em 0 0.50em 0;}
.pub p {margin: 0; padding: 0;}
p.pub_photo img {float: right; margin-left: 25px; border: solid 1px #000000; }

.pub_postcode {font-weight: 600; }
.pub_contact {font-weight: 600; text-align: left;}
.pub_beers {font-weight: 600; text-align: left;}
.pub_owner {font-style: italic; text-align: left;}
.pub_description {}
.pub_facilities {font-weight:600; font-size:1.05em;}
.pub_opening { text-align: left;}


.facilities em, #facilities h3 {color:#800; font-weight:bold; font-style:italic; font-family: georgia, serif; font-size:1.05em;}
.conditions {float: right; font-size: 80%; margin: 8px 0 0 0; padding: 6px; border: 2px solid black; background-color: #FFFFFF;}

#print_info {background-color:#CCCCCC; padding: 0.5em 1em 1em 1em; margin-top: 1em;}

/* This rule ensures that the pub lists and news items do not "break" over the page when printing 
   - currently ONLY works with the Opera browser */
   
div.pub, div.news {  page-break-inside: avoid; }

/* ***************************** End of pub guide styling ************************************** */

/* *************************** Styling for the beer festival comments pages *************************** */
div.comments ul>li {margin: 1.05em 0;}
ul li.comments_reply {list-style-type: none;}
.comments_reply {margin: 0.8em -2em; padding-left: 0; color: #660000; width:480px; }
/* ************************ End of Styling for the beer festival comments pages ************************ */


/* *************************** Styling for the obituaries page *************************** */

div.obit { border:3px solid; padding: 0.5em 1.5em; margin-top: 1em; }
div.obit p {  line-height: 1.5em; font-family: Georgia, 'Times New Roman', Times, serif;}
h2.obit {background-color: #000000; color:#FFFFFF; padding: 0.6em; }

.obit_pic1 {
  width:230px; float: left; text-align:center; margin-right: 1em; margin-bottom: 0.3em; font-size:0.9em; font-style: italic; font-weight:bold; 
}
.obit_pic2 {
  width:255px; float: left; text-align:center; margin-right: 1em; margin-bottom: 0.3em; font-size:0.9em; font-style: italic; font-weight:bold; 
}
.obit_pic3 {
  width:160px; float: left; text-align:center; margin-right: 1em; margin-bottom: 0.3em; font-size:0.9em; font-style: italic; font-weight:bold; 
}
.obit_pic4 {
  width:250px; float: left; text-align:center; margin-right: 1em; margin-bottom: 0.3em; font-size:0.9em; font-style: italic; font-weight:bold; 
}

/* *************************** End of Styling for the obituaries page *************************** */


div.print ul {list-style-type: none;}

div.links em { color:#660000; font-weight:bold;}

/* css styling to add a telephone icon before a telephone no. */
.telephone_no {
  padding-left: 20px;
  background: url("images/1277818323_telephone.png") 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/1277818159_mobile_phone.png") transparent no-repeat left;
}
/* css styling to add an email icon before a mailto: link */
.mailto_link {
  padding-left: 20px;
  background: url("images/1277818257_004.png") transparent no-repeat left;
}

/* css styling for social network links */

ul#social {
	width: 160px;
	list-style-type: none;
	position: relative;
	float: right;
	margin: 2em -1em 1.5em 0;
    margin-top: 1em;
}
ul#social li {
	display: inline
}
ul#social li a {
	position: relative;
	display: block;
	float: left;
	height: 36px;
	background-image: url(images/socialnetworks.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	text-indent: -9999px;
	margin: 0
}
ul#social a.twitter {
	width: 52px;
	background-position: 0 0
}
ul#social a.facebook {
	width: 52px;
	background-position: -107px 0
}
ul#social a.twitter:hover {
	width: 52px;
	background-position: 0 -39px
}
ul#social a.facebook:hover {
	width: 52px;
	background-position: -107px -39px
}