/*styles.css*/

/*
	colour pallete
	--------------
	
	burnt orange - #9B301A
	orange		 - #dd7008
	light gray	 - #f4f3f2


/*
	Contents
	--------
	
	0	Reset
	1	Typography
	2	Headings
	3	Layout
	4	Navigation
	5	Home


*/

/*-----0-------- Reset Styles ----------------*/

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, sub, sup, tt, var, 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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

a { outline:0 none; color: #383738; }
a:active { outline:0 none; text-decoration: none;}
a:hover { outline:0 none; text-decoration: none; color:#9B301A; }

/*remove blue border around linked images*/
a img { border: 0 none;}

ol, ul {list-style: none; margin: 10px 0 20px 0; font-size: 14px;}
blockquote, q {quotes: none;}

input [type=submit] { outline-width: 0; }

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

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

strong {font-weight:bold;}

acronym { border-bottom: 1px dashed #444; cursor: help; }
acronym:hover {border-bottom: 1px solid #444;}

/*-----1-------- Typography ------------------*/

body{
	font: 75%/1.25 "Trebuchet MS", Arial, Helvetica, sans-serif; color: #383738;
}

/* Paragraph styles */

p{ font-size: 14px; line-height: 1.25em; margin: 0 0 10px 0; color: #000; letter-spacing:-0.01em;}

small {
	font-size: 10px; font-style: italic; margin: 10px 0 10px 0;
}

blockquote { font-size: 14px; letter-spacing:-1px; font-style:italic; margin: 10px 0 10px 0; padding:0 0 5px 0; border-bottom: 3px dotted #444; float: left; clear:both; color: #301401; }
blockquote span {float: right; font-weight: bold; }

span.highlight { color: #9B301A;}
span.highlight2 { color: #fff;}
span.highlight3 { color: #dd7008;}
p.em { font-size: 15px; font-style:italic; line-height: 1.8em; margin:15px 0 0 0;}
/*
@font-face {
  font-family: 'narkisim';
  src: url(/font/narkisim.eot);
  src: local('narkisim'), local('narkisim'),
       url(/font/narkisim.otf) format("opentype");
}
*/

dl { margin: 10px auto; width: 425px; font-size: 14px;}
dt, dd {display: inline; float:left;}
dt { width: 150px; color:#9B301A;}
dd{ font-weight:bold; font-style:italic;}

br.clear {width: 100%; clear: both; height:1px;}

/*----2-------- Headings-------------- */

h1 {font-size: 40px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 10px 0 15px 0; color: #9b301a; text-transform:uppercase; }

h2 { font-size: 22px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 10px 0 15px 0;color: #9b301a; line-height:20px; }

h3 { font-size: 18px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 10px 0 15px 0; color: #9b301a }

h4 { font-size: 14px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 10px 0 15px 0; color: #9b301a }


/*---3--------- Layout-------------- */

body {
	background: #fff repeat 0px 0px;
	margin: 0;
	width: 100%;
	padding: 0;
}

#container {
	margin: 0 auto;
	width: 960px;
	position:relative;
}

#main {
	float: left;
	width: 960px;
}

#header {
	float: left;
	display: inline;
	padding-left: 110px;
	width: 850px;
}
	#header h1.logo {
		margin: 0;
		width: 250px;
		float: left;
	}
	
	#header h1.logo a {
		border: 0 none;
	}

#content {
	display:block;
	float:left;
	min-height: 320px;
	height:auto!important;
	height: 320px;
	width:955px;
}

#content #centercol {
	display:inline;
	float:left;
	width: 540px;
	margin:0;
	padding: 20px 25px 20px 30px;
	min-height: 280px;
	height:auto!important;
	height: 280px;
	background-color: #f4f3f2;
}

#middle {
	background-color: #f4f3f2;
	float:left;
}

#content #leftcol {
	display:inline;
	float:left;
	width: 110px;
	height:280px;
	position:relative;
}

#content #rightcol {
	display:inline;
	float: right;
	width: 250px;
/*	padding: 0 0 0 5px;*/
	margin: 0 0 5px 0;
	/*background-color: #f4f3f2;
	min-height: 440px;
	height:auto!important;
	height: 440px;*/
}

#footer {
	background: url(../images/footer-img.jpg) no-repeat 110px 0;
	margin: 0px auto;
	float: left;
	width: 845px;
	padding: 0 0 0 110px;
}
	.sub-footer1 {
		display:inline;
		float:left;
		height: 150px;
		width: 735px;
		padding-left: 110px;
		overflow: hidden;
	}
	
		.sub-footer1 .opening-times {
			background-color:#b4afac;
			height:150px;
			width:222px;
			margin: 0;
			padding: 0 10px;
		}
		
		.sub-footer1 .social-network {
			background-color:#b4afac;
			height:150px;
			width:230px;
			margin: 0 0 0 0;
			padding: 0 10px;
			position: relative;
		}
			.sub-footer1 .opening-times p {
				font-size: 12px;
				color: #ffffff;
			}
		
		.sub-footer1 div, .sub-footer1 img { float:left; display: inline; margin: 0 3px; }
	
	.sub-footer2 {
		background-color: #edece8;
		margin: 0 0 0 108px;
		float:left;
		height: 30px;
		width: 736px;
		padding:0;
		border-top: 3px solid #fff;
	}
		ul.foot-info {
			margin: 8px 0 10px 0px;
			font-size: 12px;
			text-align:center;
		}
		
		ul.foot-info li {
			display: inline;
			margin: 0 5px 0 0px;

		}
			
			ul.foot-info li.siteby a {
				background: transparent url(../images/siteby.png) no-repeat 0 0;
				display:block;
				text-indent: -999em;
				height: 25px;
				width:110px;
			}
				li.siteby a:hover { border: 0 none; }
				
				
	
	.sub-footer-links {
		background-color: #edece8;
		float:left;
		width: 844px;
		height: 60px;
		margin: 0 0 0 0px;
		border-top: 3px solid #fff;
	}
		.sub-footer-links ul {
			margin: 0;
		}
			.sub-footer-links ul li {
				display: inline;
				float:left;
				margin: 0 28px 0 0;
			}
			
			.site-by { float: right; }
			.site-by a {
				background: transparent url(../images/propeller.jpg) no-repeat 0 0;
				display:block;
				text-indent: -999em;
				height: 25px;
				width:110px;
				margin: 2px 5px 0 0;
			}

h2.btn {
	background: url(../images/btns/btn-img.png) no-repeat right center;
	width:200px;
}

a.offers {
	display:block;
	float: right;
	margin: 0 0 3px 0;
}

/*social network feed*/

.social-network p.post {
	font-size: 11px;
	color: #fff;
	word-wrap: break-word;
}

.social-network {
	position:relative;
}

.social-network p.fuzzytime {
	font-size: 10px;
	color: #9b301a;
	margin:0;
}

.social-links {
	position: absolute;
	bottom: 0;
	right:0;
	
}

.social-network .quote-left {
position: absolute;
top: 30px;
left:0px;
}

.social-network .quote-right {
position: absolute;
bottom: 50px;
right: 0;
}

	
/*---4-------- Navigation --------------*/

#nav {
	position: relative;
	bottom: 100px;
	left:0;
	background-color: #f4f3f2;
	z-index:5;
}

ul.main-nav {
	margin: 0 0 0 10px;
}

ul.main-nav li {
	font-size: 16px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	letter-spacing:0.5px;
	line-height:35px;
}

ul.main-nav li a {
	color: #666366;
	text-decoration:none;
	letter-spacing:-0.5px;
}

ul.main-nav li.hire {
	line-height: 20px !important;
	padding: 10px 0;
}

ul.main-nav li a:hover, ul.main-nav li a.hover {
	color: #9b301a;
	font-weight:bold;
}

/*-----5-------- Home ----------------*/

/*-----6-------- dine ----------------*/

#rightcol .menus {
	background-color: #fff;
	float: right;
	display: inline;
	width: 250px;
	padding: 0 0 5px 0;
}

#rightcol .menus p.btn {
	margin: 15px 0 15px 10px;
}

/*-----7-------- drink ----------------*/

/*-----8-------- whats on ----------------*/

/*-----9-------- private hire ----------------*/

/*-----10-------- bookings ----------------*/

/*-----11-------- gallery ----------------*/

/*-----12-------- local area ----------------*/

/*-----13-------- find us ----------------*/

#map {
	margin: 0 auto 20px;
	height: 200px;
	width:530px;
	border: 2px solid #9B301A;
}

/*-----13-------- find us ----------------*/


/*-----14-------- floorplan ----------------*/

/*- Rollover Floorplan -*/

#floorplan {
	position:relative;
	background: url(../images/floorplan.jpg) no-repeat 0 0;
	height: 207px;
	width:500px;
	overflow:hidden;
	margin: 0 auto;
}

#floors {
	background: url(../images/floorplan-sprite.png) no-repeat 0 0px;
	width: 500px;
}

#floors a {
	background: url(../images/floorplan-sprite.png) no-repeat 0px 0px;
}

.rollover {
	position:relative;
	margin:10px auto;
	padding:0;
}

.rollover li {
	display: inline;
	list-style: none;
	margin: 0!important;
	padding: 0!important;
	position:absolute;
}

.rollover a {
	display: block;
	text-decoration:none;
	text-indent: -999em;
}


#floors .entrance {
bottom:-106px;
height:51px;
left:14px;
width:54px;
z-index:2;
}	
	#floors .entrance a {height: 80px; background-position: -4px 7px;}	
		#floors .entrance a:hover {background-position: -64px 7px;}
		
		
#floors .courtyard {
	left: 172px;
	bottom: -62px;
	width: 94px;
	height: 62px;
	z-index:1
}	
	#floors .courtyard a {height: 80px; background-position: -149px 0px;}	
		#floors .courtyard a:hover {background-position: -252px 0px;}
		
#floors .casual-eating {left: 67px; bottom:-172px; width: 165px; height: 87px;}	
	#floors .casual-eating a {height: 102px; background-position: -7px -94px;}	
		#floors .casual-eating a:hover {background-position: -180px -94px;}

		
#floors .restaurant {left: 262px; bottom:-264px; width: 135px; height: 260px;}	
	#floors .restaurant a {height: 264px; background-position: -362px -9px;}	
		#floors .restaurant a:hover {background-position: -502px -9px;}


/*- Rollover BarPlan -*/

#bar {
	position:relative;
	background: url(../images/barplan.jpg) no-repeat 0 0;
	height: 224px;
	width:350px;
	overflow:hidden;
	margin: 20px auto 0;
}

#basement {
	background: url(../images/barplan-sprite.png) no-repeat 0 0px;
	width: 350px;
}

#basement a {
	background: url(../images/barplan-sprite.png) no-repeat 0px 0px;
}


		
#basement .bar {left: 209px; bottom:18px; width: 124px; height: 10px;}	
	#basement .bar a {height: 85px; background-position: 0px 35px;}	
		#basement .bar a:hover {background-position: -140px 35px;}

		
#basement .tables {left: 231px; bottom:-205px; width: 115px; height: 163px;}	
	#basement .tables a {height: 163px; background-position: 0px -60px;}	
		#basement .tables a:hover {background-position: -140px -60px;}


#floorplan-image {
	width: 350px;
	height: 225px;
	border: 4px solid #9B301A;
	margin: 20px auto 0;
	overflow:hidden;
}

.absolute {
	position: absolute;
	top: 0;
	left: 0;
}

.hide {
	display: none;
}

.menu-holder {
	width: 236px;
	overflow: hidden;
	float: right;
	border: 2px solid #9B301A;
	margin: 0 0 5px 0;
}