/* $Id: default.css,v 1.15 2008/12/01 14:31:56 damien Exp $ */
/*
Colours:
La Terrazza burgundy = #8d262a;
*/
/*
Dimensions:
#container = width: 800px;
#content = width: 800px
.header-class = width: 800px;

#left: width: 520px; padding: 10px 10px 20px 10px; (top, right, bottom, left)
  left width = 520 + 10 + 10 = 540.
#right: width: 229px; padding: 20px 10px 20px 20px;(top, right, bottom, left)
  right width = 229 + 10 + 20 = 259.
  left + right = 799 (i.e. just less than width of #container and #content).
*/
body{
	margin: 0px;
	padding: 0px;
    background: url(images/headers/thornhill-george-painting.jpg) no-repeat center top; 
    background-color: #8d262a; /* La Terrazza burgundy. */
	text-align: center;
	font: 12px /*Verdana,*/Arial,Helvetica,sans-serif;
}
/* #toparea is not used. */
#toparea{
	width: 700px;
	margin: auto;
	padding-bottom: 20px;
    /*background-color: white;*/
}
#container{
	width: 800px;
	margin: auto;
	padding-bottom: 20px;
    background-color: white;
}

/* basic styles */
h1,h2,h3,h4,h5,h6{
	font-family: Georgia,Verdana,Arial,Helvetica,sans-serif;
	/*font-weight: lighter;*/
	margin: 0px/*10px*/ 0px 0px 0px;
	color: #222;
}
h1{
	font-size: 28px;
}
h2{
	font-size: 25px;
	/*color: #0a294f;*/
	margin-bottom: 10px;
}
h3{
	font-size: 22px;
	color: #202f0f;
}
h4{
	font-size: 18px;
	color: #911322;
	margin-bottom: 10px;
}
h5{
	font-size: 16px;
	color: #af3d0a;
}
h6{
	font-size: 11px;
	font-weight: bold;
	color: #222;
}
del{
	color: #999;
}
acronym{
	/*border-bottom: 1px dotted #222;*/
	border: none;
	background: url(images/dottedborder_dark.gif) repeat-x bottom center;
	padding-bottom: 1px;
	cursor: help;
}
hr{
	width: 100%;
	border: 0;
	margin: 5px 0px !important;
	margin: 2px 0px 5px 0px;
	height: 1px;
	/*color: #777;*/
	background-color: #777;
}
a{

	color: #af2639;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
p{
	line-height: 22px;
	margin: 5px 0px 15px 0px;
	/*text-align: justify;*/
}
.noborder{
	border: 0;
}
#content ul{
	margin: 0px;
	padding: 10px 10px 5px 15px;
	list-style-type: none;
}
#content ol{
	margin: 0px;
	padding: 0px 0px 5px 33px; /* was: 0 10 5 33 */
}
#content ul li{
	/*padding-bottom: 7px;*/
	background: transparent url(images/arrow.gif) no-repeat 0px 5px;
	padding-left: 10px;
}
#content ol li{
	padding-bottom: 7px;
}
#content ul li ul{
	margin: 8px 0px -7px 0px;
}
/* I can't get <pre> to display inline very well so just use <span class="pre"> */
#content .pre{
	font: 12px "Courier New",Courier,sans-serif;
	color: #af454a;
}

/* For list within the copy, with some extra spacing for readability. */
.copy-list li{
  padding-bottom: 7px;
}

img{
	border: none;
}
img.floatright,
img.floatleft,
#left img{
	border: 1px solid #222;
}
a:hover img.floatright,
a:hover img.floatleft,
#left a:hover img{
	border: 1px solid #af2639;
}

/* DAMIEN */
#left ol > li > p, #left ul > li > p {
  color: #8d262a;
  font-style: italic;
  padding: 0px;
}

/* floats, positioning, and widths */
.floatleft{
	float: left;
}
.floatright{
	float: right;
}
.w50{
	width: 50%;
}
.floatleft p{
	padding: 0px 10px 0px 0px;

}
.floatright p{
	padding: 0px 0px 0px 10px;
}
img.floatleft{
	margin: 15px 15px 5px 0px;
}
img.floatright{
	margin: 15px 0px 5px 15px;
}

.price {
  /* Hide prices until they are updated. */
  /*display: none;*/
}

/* rounded corners */
.tl{background: #222 url(images/corners/tl.gif) no-repeat top left;}
.tr{background: transparent url(images/corners/tr.gif) no-repeat top right;}
.br{background: transparent url(images/corners/br.gif) no-repeat bottom right;}
.bl{background: transparent url(images/corners/bl.gif) no-repeat bottom left;}

.ltl{background: #efefef url(images/corners/l_tl.gif) no-repeat top left;}
.ltr{background: transparent url(images/corners/l_tr.gif) no-repeat top right;}
.lbr{background: transparent url(images/corners/l_br.gif) no-repeat bottom right;}
.lbl{background: transparent url(images/corners/l_bl.gif) no-repeat bottom left;}

.special-offer { display: none; background-color: red; }
.special-offer h3 { color: yellow; }
.special-offer p { color: white; }

/* blockquotes and code*/
blockquote{
	min-height: 35px;
	width: 100%;
	display: block;
	margin: 10px auto;
	background: transparent url(images/blockquote/quote.gif) no-repeat 10px 10px;
}
* html blockquote{
	min-height: 35px;
	height: auto !important;
	height: 35px;
}
blockquote p{
	margin: 0px;
	line-height: 17px;
	padding: 10px 10px 10px 50px;
}
blockquote span{
	color: #999;
	font-size: 9px;
	padding-top: 5px;
	display: block;
}
blockquote span a{
	color: #555;
	text-decoration: none;
}
blockquote span a:hover{
	text-decoration: underline;
}
blockquote.go{
	background: transparent url(images/blockquote/go.gif) no-repeat 10px 50%;
}
blockquote.stop{
	background: transparent url(images/blockquote/stop.gif) no-repeat 11px 50%;
}
blockquote.exclamation{
	background: transparent url(images/blockquote/exclamation.gif) no-repeat 23px 10%;
}
/* Get rid of the background quotes symbol. */
blockquote.no-symbol{
	background-image: none;
}
blockquote.christmas{
	background: url(images/blockquote/christmas-holly.gif) no-repeat left center;
}
blockquote.two-colour-bg{
	background: url(images/two-colour-background.png) repeat-y center center;
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
}
blockquote.two-colour-bg h3, blockquote.two-colour-bg h4 {
  color: white;  /* Make the text readable against the two colour background. */
}
blockquote h4 a {
  text-decoration: underline;
}
.centred {
    text-align: center;
}
/* Don't need the left or right padding because text is centred. */
blockquote.centred p{
    padding-left: 0px;
    padding-right: 0px;
}
code{
	display: block;
	width: 92%;
	margin: 0px auto 15px auto;
	line-height: 17px;
}
code .red{
	color: #af454a;
}

/* forms */
form select,
form input,
form textarea{
	font: 11px /*Verdana,*/Arial,Helvetica,sans-serif;
	border: 1px solid #888;
}

form input:hover,
form input:focus,
form textarea:hover,
form textarea:focus,
form select:hover,
form select:focus{
	background-color: #f9f9f9;
	/*border: 1px dotted #888;  optional thought */
	border: 1px solid #444;
}
form select{
	padding: 1px;
}
form input{
	padding: 1px;
}
form label{
	display: block;
	color: #777
}
form textarea{
	padding: 1px;
	line-height: 16px;
}
form p{
	margin: 10px 0px;
}

/* top section */
#top{
    /* Turn off left/right side border lines. */
	/*background: url(images/contentbg.gif) repeat-y top center;*/
        background-color: transparent;
}

/* very bottom curve */
#bottom{
    /* Turn off bottom curve. */
	/*background: url(images/container_b.gif) no-repeat bottom center;*/
	height: 0px;/*9px;*/
}
* html #bottom{
	margin-top: -4px;
}

#header p {
    color: #fff;
}
.header-class {
	width: 800px;/*680px;*/
	height: 226px;/*175px;*/
	margin: auto;
    /* Don't need to set the fonts because there is no text in this div. */
	/*font-family: Georgia,Verdana,Arial,Helvetica,sans-serif;*/
    /*font-size: 30px;*/
	/*text-align: left;*/
    /* Move background down as Rudi suggested. */
    background-position: center bottom; /*20px;*/
    /* Background graphics are 800x206 and will repeat. Set no-repeat to stop this. */
    background-repeat: no-repeat;
    /* Let the body background image show in the 20px (226-206) area not covered by header background. */
    background-color: transparent;
}
/* header */
#header-generic {
	background-image: url(images/headers/thornhill-with-text.jpg);
}
#header-lunch{
	background-image: url(images/headers/bsp-prawns-dish.jpg);
}
#header-dinner {
	/*background-image: url(images/headers/bsp-rack-of-lamb.jpg);*/
    background-image: url(images/headers/serving-pan.jpg);
}
#header-wines{
    /*background-image: url(images/headers/bsp-red-wine.jpg);*/
	background-image: url(images/headers/wine-bottles-in-rack.jpg);
}
#header-reviews{
	/*background-image: url(images/headers/reviews-with-text.jpg);*/
	background-image: url(images/headers/restaurant-signage.jpg);
}
#header-takeaway{
    background-image: url(images/headers/pizza-oven-with-text.jpg);
}
#header-restaurant{
    background-image: url(images/headers/restaurant-tables.jpg);
    /* Alternative photo - different angle. */
    /*background-image: url(images/headers/restaurant-layout.jpg );*/
}
#header-specials{
    background-image: url(images/headers/chef-special.jpg);
}
#header-table-setting{
    background-image: url(images/headers/table-setting.jpg );
}
/* Logo stuff */
#logo {
    /*width: 100%;*/
    padding-top: 40px;
    text-align: center;
    /*vertical-align: text-bottom;*/
    /*margin-left: auto;
    margin-right: auto;*/
}
/* id="title" is not used. */
#title{
	margin-top: 130px;
	margin-left: 13px;
	position: absolute;
	color: #fff;
	background-color: transparent;
	cursor: default;
}

/* menubar */
.nav{
	height: 30px;
	background-color: white; /*#222;*/
	color: black; /*#fff;*/
	width: 680px;
	margin: auto;
	text-align: left;
	font-size: 11px;
	cursor: default;
}
.nav2{
	height: 40px;
}
#slogan{
	position: absolute;
	margin: 11px 0px 0px 15px;
	font-size: 14px;
}
#navdiv{
	text-align: center;
}
#navlist{
	list-style-type: none;
	margin: 0px;
	padding: 8px 8px 0px 0px;
}
#navlist li{
	display: inline;
}
/* IE does not show the :before and :after stuff. */
/*#navlist li:before{
        content: "|";
}
#navlist li:after{
        content: "|";
}*/
#navlist li a{
	color: black; /*#fff;*/
	/* font-weight: bold;*/
	text-decoration: none;
	height: 40px;
	padding: 8px 6px 9px 6px;
}
#navlist li a:hover{
	color: #bfbfbf;
	/* other thoughts
	border-top: 5px solid #fff;
	color: #df521b;
	*/
}

#navlist #here {
    text-decoration: underline;
}

/* content */
#content{
	min-height: 400px;
	width: 800px;
	margin: auto;
	color: #222;
	text-align: left;
}
* html #content{
	min-height: 400px;
	height: auto !important;
	height: 400px;
}
#left{
	width: 520px;
	float: left;
	padding: 10px 10px 20px 10px;
        border-right: 1px dashed #222;
    background-color: white;
}
* html #left{
	padding-top: 20px;
}

/* sidebar */
#right{
	width: 229px;
	float: right;
	padding: 20px 10px 20px 20px;
    background-color: white;
}
* html #right{
	padding-top: 30px;

}
#right .sideitem{
	margin-bottom: 25px;
}
#right .sideitem h4{
	font: 12px Georgia,Arial,Helvetica,sans-serif;
	font-weight: bold;
	color: #222;
	width: 100%;
	background: #fff url(images/dottedborder.gif) repeat-x bottom center;
	padding-bottom: 3px;
	margin-bottom: 13px;
}
#right .sideitem b{
	/*display: block;*/
}
#right .sideitem p{
	padding: 0px 5px;
}
#right .sideitem ul{
	margin-left: -4px;
}

/* footer */
.footer{
	height: 30px;
	width: 800px;
	margin: auto;
	color: #fff;
	text-align: left;
	clear: both;
}
.footer div{
	height: 30px;
}
#copyright{
	text-align: left;
	float: left;
	padding: 8px;
	margin-top: 0px !important;
	margin-bottom: -16px;
}
#designcredit{
	float: right;
	text-align: right;
	padding: 8px;
	margin-bottom: -16px;
}
#designcredit a{
	color: #9f9f9f;
}
#designcredit a:hover{
	color: #cf262d;
	text-decoration: none;
}