/* ===================================================
CSS for The Bell Pub - v1.1

Author: 		whitespacedesign
Contact: 		north@whitespacedesign.co.uk
Website: 		http://www.whitespacedesign.co.uk
created: 		25.04.09
=================================================== */


/****************** universals *********************/

body {
	font: 75% helvetica, sans-serif; /* reset font size to 12px; */
	background: #2D2523 url(../graphics/bg0.jpg) no-repeat center 0;
	}
body#bodyHome {
	background-image: url(../graphics/bg1.jpg);
	}
body#bodyVenue {
	background-image: url(../graphics/bg2.jpg);
	}
body#bodyFood {
	background-image: url(../graphics/bg3.jpg);
	}

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,table,td,tr,th
	{margin:0; padding:0 }
	
h1,h2,h3,h4,h5,h6,pre,code,input,textarea {font-size:1em;font-weight: normal;}

a img,:link img,:visited img { border:none;}

:link,:visited { text-decoration:none;}

ul,ol { list-style:none;}

address {font-style: normal;display:inline;}

.screenreader {
	position: absolute;
	left: -9000px;
	top: -9000px;
	}

.imageReplace {text-indent: -9000px;}

.clearfix:after { /* makes float container block clear floated blocks inside it */
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	}

a:active {outline: none;}
:focus {-moz-outline-style: none;}


a[href$='.pdf'] {
	background-image: url(../graphics/icons/pdf_icon.gif);
	background-position: right;
	padding-right: 20px;
	background-repeat: no-repeat;
}

a[href$='.pdf']:after {
	padding-left: 0px;
	padding-right: 0px;
	content: " (PDF)";
}

a[href$='.doc'],
a[href$='.docx'] {
	background-image: url(../graphics/icons/doc.png);
	background-position: right;
	padding-right: 20px;
	background-repeat: no-repeat;
}

a[href$='.doc']:after,
a[href$='.docx']:after {
	padding-left: 0px;
	padding-right: 0px;
	content: " (WORD)";
}


/****************** content *********************/


a#logo {font-size: 3em;}

p a {
	color: #CCC;
	background: transparent url(../graphics/bg_light.png) repeat 0 0;
	padding: 0 2px;
	border-bottom: 1px solid #CCC;
	}
p a:hover {
	color: #666;
	background: #FFF;
	border-bottom: 1px solid #FFF;
	}
	
#content ul li a:link,
#content ul li a:visited,
#content ul li a:hover,
#content ul li a:focus,
#content ul li a:active {
	color: #CCC;
	border-bottom: 1px solid #CCC;
	margin-bottom: 0.5em;
	}
	
#content li {
	margin-bottom:1em;
}

#global {
	width: 1014px;
	margin: 0 auto;
	}

#scrolls {
	height: 136px;
	width: 800px;
	background: transparent url(../graphics/scroll.png) no-repeat 0 0;
	position: absolute;
	left: -293px;
	}

#header {
	position: relative;
	height:268px;
	background: transparent url(../graphics/birds.png) no-repeat 285px 50px;
	}


#content {
	margin-bottom: 10px;
	float: left;
	}

#header img {
	margin: 42px 0 0 0;
	}
	
#header ul {
	position: absolute;
	bottom: 0;
	left: 512px;
	width: 502px;
	}
	
#header ul li a {
	display: block;
	width: 502px;
	height: 38px;
	font: normal 2em/1.2em georgia;
	color: #E8E4D0;
	background: transparent url(../graphics/nav_type.png) no-repeat 0 0;
	text-indent: -9999px;
	}
	
#header ul li#nav4 {display:none;}

#header ul li#nav1 a {background-position: -502px 6px;}
#header ul li#nav2 a {background-position: -502px -32px;}
#header ul li#nav3 a {background-position: -502px -70px;}
#header ul li#nav4 a {background-position: -502px -108px;}
#header ul li#nav5 a {background-position: -502px -146px;}
#header ul li#nav6 a {background-position: -502px -184px;}

#header ul li#nav1 a:hover {background-position: 0 6px;}
#header ul li#nav2 a:hover {background-position: 0 -32px;}
#header ul li#nav3 a:hover {background-position: 0 -70px;}
#header ul li#nav4 a:hover {background-position: 0 -108px;}
#header ul li#nav5 a:hover {background-position: 0 -146px;}
#header ul li#nav6 a:hover {background-position: 0 -184px;}

li#nav1:hover {background: transparent url(../graphics/nav_pattern1.gif) repeat 0 0;}
li#nav2:hover {background: transparent url(../graphics/nav_pattern2.gif) repeat 0 0;}
li#nav3:hover {background: transparent url(../graphics/nav_pattern3.gif) repeat 0 0;}
li#nav4:hover {background: transparent url(../graphics/nav_pattern4.jpg) no-repeat 0 0;}
li#nav5:hover {background: transparent url(../graphics/nav_pattern5.gif) repeat 0 0;}
li#nav6:hover {background: transparent url(../graphics/nav_pattern6.gif) repeat 0 0;}


#bodyHome #header ul li#nav1 a {background-position: -1004px 6px;}
#bodyFood #header ul li#nav2 a {background-position: -1004px -32px;}
#bodyDrinks #header ul li#nav3 a {background-position: -1004px -70px;}
#bodyEvents #header ul li#nav4 a {background-position: -1004px -108px;}
#bodyVenue #header ul li#nav5 a {background-position: -1004px -146px;}
#bodyContact #header ul li#nav6 a {background-position: -1004px -184px;}
#bodyHome #header ul li#nav1:hover,
#bodyFood #header ul li#nav2:hover,
#bodyDrinks #header ul li#nav3:hover,
#bodyEvents #header ul li#nav4:hover,
#bodyVenue #header ul li#nav5:hover,
#bodyContact #header ul li#nav6:hover {background:none;}
	
#col1,
#col2,
#col3,
#col4 {
	float: left;
	display: inline;
	border-top: 1px solid #E8E4D0;
	padding-top: 10px;
	}
	
#col1 {width: 502px;}
#col2,
#col3,
#col4 {width: 246px;margin-left: 10px;}

#upcoming,
#join,
#contact,
#find,
#venue,
#food,
#drinks,
#internalLink,
#venueMain, #venue1, #venue2, #venueOverview,
#thanks,
.picture {padding: 10px 10px 30px 10px;}

#contact,
#find,
#internalLink {width:226px;}

#thanks {height: 126px;}
   
#upcoming h2,
#join h2,
#bodyVenue h1,
#bodyVenue h2,
#contact h1,
#find h2,
#venue h2,
#food h1,
#drinks h1,
#internalLink h2,
#thanks h1 {
	text-indent: -9999px;
	height: 10px;
	margin: 8px 0 30px 0;
	}
#upcoming h2 {background: transparent url(../graphics/h2_upcoming.png) no-repeat 0 0;}
#join h2 {background: transparent url(../graphics/h2_join.png) no-repeat 0 0;}
#venue h2 {background: transparent url(../graphics/h1_venue.png) no-repeat 0 0;}
#contact h1 {background: transparent url(../graphics/h2_contact.png) no-repeat 0 0;}
#find h2 {background: transparent url(../graphics/h2_find.png) no-repeat 0 0;}
#food h1 {background: transparent url(../graphics/h1_food.png) no-repeat 0 0;}
#drinks h1 {background: transparent url(../graphics/h1_drinks.png) no-repeat 0 0;}
#internalLink h2 {background: transparent url(../graphics/h2_link.png) no-repeat 0 0;}
#bodyVenue h1 {background: transparent url(../graphics/h1_venue.png) no-repeat 0 0;}
#bodyVenue h2 {background: transparent url(../graphics/h2_main_bar.png) no-repeat 0 0;}
#venue1 h2 {background: transparent url(../graphics/h2_basement.png) no-repeat 0 0;}
#venue2 h2 {background: transparent url(../graphics/h2_upstairs.png) no-repeat 0 0;}
#thanks h1 {background: transparent url(../graphics/h1_thanks.png) no-repeat 0 0;}

h1, h2 {width: 226px;}

h3 {
	margin: 8px 0 10px 0;
	font-weight: bold;
	color: #FFF;
	}

table,
p,
address {
	font-size: 1em; /* 12px */ 
	line-height: 1.5em; /* 18px */ 
	color:#FFF;
	}

#col1 p {padding: 0 20px 12px 0;}
#col3 p {width: 226px;}

p span {font-size: .8em;}
p img {float: left;padding-right: 12px;}
	
p img.pdf {float: none;padding:0;}

b { font-size: 1.5em;
	font-weight: normal;
	}

#upcoming,
#join,
#venue,
.general,
#contact,
#find,
#internalLink {
	background: transparent url(../graphics/bg_dark.png) repeat 0 0;
	float:left;
	margin-bottom: 10px;
	}
    #venue1.general  {
	margin-bottom:0px;
}

/************************ home ***************************/

#bodyHome h1 {position: absolute;left: -9000px;top: -9000px;}

#bodyHome #col1 p {padding: 14px 30px 0 10px;}
	
.upcomingGig.last {
	border-bottom: 1px solid #C7C4B3;
	}	
.upcomingGig {
	padding: 2px 0 10px 0;
	width: 226px;
	border-top: 1px solid #C7C4B3;
	}
.eventWhen p {color: #C5C2B1;}
	
#venue p {padding-bottom: 12px;}


span.closecontrol { 
	float:left; 
	width: 482px;
	background: transparent url(../graphics/bg_dark.png) repeat 0 0;  
	margin-bottom: 10px;  
	padding: 10px; 
}  

span.closecontrol a {
	text-indent: -9000px;	
}

span.closecontrol a,
span.back a {    
	display: block;
   	background: url('../graphics/page_turner.png') no-repeat top left;
   	width: 482px;
   	height: 15px;
	color: #fff;  
	padding-left: 44px; 
   } 
	
	#bodyVenue span.closecontrol,
	#bodyVenue span.closecontrol a,
	#bodyVenue span.back a {    
	   	width: 226px;
	}

span.back a {    
   	background: url('../graphics/page_turner_back.png') no-repeat top left; 
	text-indent: 0px; 
	}

#col1 .closeable {padding-bottom: 10px; margin-bottom: 0px;}   

/************************ food ***************************/

#menu {
	padding: 20px 10px;
	background: transparent url(../graphics/bg_light.png) repeat 0 0;
	}
	
#menu h2 {
	color: #F5ECDB;
	text-transform: uppercase;
	padding: 12px 0 4px 0;
	}
	
#menu table {
	font-family: georgia;
	padding-bottom: 30px;
	width: 462px;
	}
#menu table td {
	vertical-align: top;
	padding: 0 6px 0 0;
	}
#menu table span {
	font-size: .8em;
	}
#menu p {
	font-family: georgia;
	padding-bottom: 30px;
	}

#menu table td.itemCol {width:410px;}
#menu table td.priceCol {width:52px;}



/************************ venue hire ***************************/

#bodyVenue img {margin-bottom: 10px;}

#bodyVenue #col1 {width: 246px;}



/************************ join form ***************************/
	
#join form {margin-top: 10px;}
	
#join form input {
	background: #C5C2B1;
	border: 0;
	width: 204px;
	padding: 2px 1px;
	font-family: georgia, serif;
	}

#join form label {
	background: transparent url(../graphics/input_corners.gif) repeat-y 0 0;
	padding: 1px 0;
	float: left;
	width: 206px;
	margin-top: 4px;
	}

#join form input.submit {
	width: 66px;
	height: 16px;
	background: transparent url(../graphics/submit.png) no-repeat 0 0;
	text-indent: -9999px;
	margin: 4px 0 0 148px;
	}
#join form input.submit:hover {
	background-position: 0 -16px;
	cursor: pointer;
	}



/************************ footer ***************************/
	
#footer {
	float: left;
	padding-top: 6px;
	margin-top: 20px;
	}
	
#footer div {
	float: left;
	display:inline;
	width: 502px;
	border-top: 1px solid #E8E4D0;
	}
#footer p,
#footer address {
	width: 502px;
	margin-top: 2px;
	}
#footer p span,
#footer address span {
	position: absolute;
	left: -9000px;
	top: -9000px;
	}
	
#footer address {
	float: left;
	width: 502px;
	height: 12px;
	background: transparent url(../graphics/footer_address.png) no-repeat 0 0;
	}
#footer address a {
	display:block;
	width: 99px;
	height: 14px;
	margin-left: 240px;
	background: transparent url(../graphics/footer_link.png) no-repeat 0 0;
	}
#footer address a:hover {background-position: 0 -14px;}

#footer p.tel {
	width: 502px;
	height:12px;
	background: transparent url(../graphics/footer_tel.png) no-repeat 0 0;
	margin: 18px 0 0 0;
	}



#footer div.credit {margin-left: 10px;}

#footer div.credit p {
	float: right;
	width: 130px;
	height: 10px;
	background: transparent url(../graphics/footer_credit.png) no-repeat 0 0;
	}
#footer div.credit p a {
	display: block;
	width: 80px;
	height: 10px;
	margin: 0 0 0 50px;
	background: transparent url(../graphics/footer_credit_link.png) no-repeat 0 0;
	border: none;
	}
#footer div.credit p a:hover {background-position: 0 -10px;}