﻿/* George Inn Coleorton - Website (c) 2010 */

/* Generic styles */
body { background: #fff4cd url(../images/main_background.jpg) repeat-x 0 0; font-family: Verdana, Arial, Sans-Serif; font-size: 13px; }
.clearall { clear: both; margin: -100000px; }
.hidden { display: none; }

/* Main page container */
#container { width: 1008px; margin: 0 auto 0 auto; padding: 0; background: #fff4cd url(../images/main_body_bg.png) repeat-y 1px 245px; }

/* Heading related styles */
#header { width: 1007px; height: 245px; margin: 0; padding: 0; float: left; display: block; position: relative; }
#header #georgeinnimage { width: 321px; height: 245px; background: #fff4cd url(../images/georgeinn_logo_tl.jpg) no-repeat 0 0; display: block; margin: 0; padding: 0; position: absolute; left: 0; bottom: 1px; }
#header #headerright { width: 687px; height: 244px; background: #fff4cd url(../images/georgeinn_header_tr.jpg) no-repeat 0 0; padding: 0; margin: 0; display: block; position: absolute; left: 321px; bottom: 1px; text-align: right; }
#header #headeraddress { width: 647px; height: 135px; position: absolute; top: 30px; right: 40px; color: #290f3b; font-style: italic; font-weight: bold; }

/* Page specific titles */
#header #homeheader { width: 651px; height: 65px; margin: 0; padding: 0; background: #ffe589 url(../images/homeheader.png) no-repeat 0 0;  display: block; margin: 0; padding: 0; position: absolute; left: 0; bottom: 0; z-index: 2; }
#header #menuheader { width: 651px; height: 65px; margin: 0; padding: 0; background: #ffe589 url(../images/menuheader.png) no-repeat 0 0;  display: block; margin: 0; padding: 0; position: absolute; left: 0; bottom: 0; z-index: 2; }
#header #drinkheader { width: 651px; height: 65px; margin: 0; padding: 0; background: #ffe589 url(../images/beerandwineheader.png) no-repeat 0 0;  display: block; margin: 0; padding: 0; position: absolute; left: 0; bottom: 0; z-index: 2; }
#header #foodheader { width: 651px; height: 65px; margin: 0; padding: 0; background: #ffe589 url(../images/foodheader.png) no-repeat 0 0; display: inline; float: left; z-index: 2; }
#header #historyheader { width: 651px; height: 65px; margin: 0; padding: 0; background: #ffe589 url(../images/historyheader.png) no-repeat 0 0;  display: block; margin: 0; padding: 0; position: absolute; left: 0; bottom: 0; z-index: 2; }
#header #locationheader { width: 651px; height: 65px; margin: 0; padding: 0; background: #ffe589 url(../images/locationheader.png) no-repeat 0 0;  display: block; margin: 0; padding: 0; position: absolute; left: 0; bottom: 0; z-index: 2; }
#header #messageheader { width: 651px; height: 65px; margin: 0; padding: 0; background: #ffe589 url(../images/messageboardheader.png) no-repeat 0 0;  display: block; margin: 0; padding: 0; position: absolute; left: 0; bottom: 0; z-index: 2; }
#header #photosheader { width: 651px; height: 65px; margin: 0; padding: 0; background: #ffe589 url(../images/photosheader.png) no-repeat 0 0;  display: block; margin: 0; padding: 0; position: absolute; left: 0; bottom: 0; z-index: 2; }
#header #motherheader { width: 651px; height: 65px; margin: 0; padding: 0; background: #ffe589 url(../images/motherheader.png) no-repeat 0 0; display: block; margin: 0; padding: 0; position: absolute; left: 0; bottom: 0; z-index: 2; }
#header #valentineheader { width: 651px; height: 65px; margin: 0; padding: 0; background: #ffe589 url(../images/valentineheader.png) no-repeat 0 0; display: block; margin: 0; padding: 0; position: absolute; left: 0; bottom: 0; z-index: 2; }
#header #xmasheader { width: 651px; height: 65px; margin: 0; padding: 0; background: #ffe589 url(../images/xmasheader.png) no-repeat 0 0; display: block; margin: 0; padding: 0; position: absolute; left: 0; bottom: 0; z-index: 2; }

/* Navigation styles */
#navigation { width: 157px; float: left; margin: 0 0 0 ; padding: 0; }
#navigation ul { list-style-type: none; width: 200px; margin: 0; padding: 0; }
#navigation ul li.navitem { width: 157px; height: 25px; background: #ffe589 url(../images/nav_bg.png) no-repeat 0 0; margin: 0 0 5px 0; padding: 0; float: left; display: block; }
#navigation ul li.navitem a,#navigation ul li.navitem a:visited, #navigation ul li.navitem a:link 
{ width: 157px; height: 25px; display: block; margin: 0; padding: 0; color: #000; text-decoration: none; background: #ffe589 url(../images/nav_bg.png) no-repeat 0 0; padding: 0; }
#navigation ul li.navitem a:hover, #navigation ul li.navitem a.currentpage { width: 157px; height: 25px; background: #ffe589 url(../images/nav_bg.png) no-repeat 0 -25px; padding: 0; margin: 0; float: left; display: inline; }

#navigation ul li.navitem a #navhome { background: #ffe489 url(../images/home_nav.png) no-repeat 0 0; padding: 0; margin: 0; float: right; width: 125px; height: 25px; display: block; z-index: 2; }
#navigation ul li.navitem a #navmenu { background: #ffe489 url(../images/menu_nav.png) no-repeat 0 0; padding: 0; margin: 0; float: right; width: 125px; height: 25px; display: block; z-index: 2; }
#navigation ul li.navitem a #navbeerwine { background: #ffe489 url(../images/beerwine_nav.png) no-repeat 0 0; padding: 0; margin: 0; float: right; width: 125px; height: 25px; display: block; z-index: 2; }
#navigation ul li.navitem a #navhistory { background: #ffe489 url(../images/history_nav.png) no-repeat 0 0; padding: 0; margin: 0; float: right; width: 125px; height: 25px; display: block; z-index: 2; }
#navigation ul li.navitem a #navphotos { background: #ffe489 url(../images/photos_nav.png) no-repeat 0 0; padding: 0; margin: 0; float: right; width: 125px; height: 25px; display: block; z-index: 2; }
#navigation ul li.navitem a #navlocation { background: #ffe489 url(../images/location_nav.png) no-repeat 0 0; padding: 0; margin: 0; float: right; width: 125px; height: 25px; display: block; z-index: 2; }
#navigation ul li.navitem a #navmessage { background: #ffe489 url(../images/message_nav.png) no-repeat 0 0; padding: 0; margin: 0; float: right; width: 125px; height: 25px; display: block; z-index: 2; }
#navigation ul li.navitem a #navmother { background: #ffe489 url(../images/mothering_nav.png) no-repeat 0 0; padding: 0; margin: 0; float: right; width: 125px; height: 25px; display: block; z-index: 2; }
#navigation ul li.navitem a #navxmas { background: #ffe489 url(../images/christmas_nav.png) no-repeat 0 0; padding: 0; margin: 0; float: right; width: 125px; height: 25px; display: block; z-index: 2; }
#navigation ul li.navitem a #navvalentine { background: #ffe489 url(../images/valentines_nav.png) no-repeat 0 0; padding: 0; margin: 0; float: right; width: 125px; height: 25px; display: block; z-index: 2; }
 
/* Main content */
#content { width: 958px; float: left; display: block; padding:20px 0 0 50px; margin: 0; }
#main { width: 740px; float: left; display: block; padding: 0 0 0 10px; margin: 0; }

#menu { width: 592px; margin: 0 auto; padding: 0; background: #ffe589 url(../images/menu_bg_middle.jpg) repeat-y 0 0; display: block; position: relative; z-index: 1;}
#menutop { width: 592px; height: 216px; position: absolute; top: 0; left: 0; display: block; background: #ffe589 url(../images/menu_bg_top.jpg) no-repeat 0 0;z-index: -1;}
#menubottom { width: 592px; height: 193px; position: absolute; bottom: 0; left: 0; display: block; background: #ffe589 url(../images/menu_bg_bottom.jpg) no-repeat 0 0;z-index: -1;}
#menumain { width: 502px; float: left; z-index: 3; font-family: "Comic Sans MS", Verdana, Arial; font-size: 1.0em; display: block; padding: 40px 60px 40px 30px; margin: 0;}

#mapcontainer { width: 425px; height: 350px; margin: 0 auto; padding: 10px; background: #fff; border: solid 1px #000; }

.comment { width: 720px; background: #fbe48f; margin: 0 0 10px 0; padding: 10px; }
.comment p { width: 700px; background: #fbe48f; color: #000; margin: 0; padding: 0; display: block; }
.comment em { width: 700px; background: transparent; color: #666; font-size: 0.7em; font-style: italic; }

.headingcentre { font-size: 1.5em; font-weight: normal; text-align: center; }
.paracentre { font-weight: normal; text-align: center; }
.textcentre { font-weight: normal; text-align: center; margin: 15px 0 0 0; }
.desccentre { font-weight: normal; text-align: center; margin: 0;}
.heading { font-size: 1.5em; font-weight: bold; }
.para { font-weight: normal; }
.text { font-weight: normal; margin: 15px 0 0 0;}
.desc { font-weight: normal; }
.winetext { font-weight: normal; margin: 0 0 0 20px;}


/* Photo Container - This just keeps all the stuff together in a container */
.photocontainer { padding: 0; margin: 0; display: block; width: 740px; }

/* Photo center/left/right - Self explanatory */
.photocenter { margin: 0 auto 0 auto; width: 500px; height: 335px; padding: 10px; display: block; background: #fff; border: solid #000 1px;}
.photopan { margin: 0 auto 0 auto; width: 698px; height: 260px; padding: 10px; display: block; background: #fff; border: solid #000 1px;}
.photoleft { margin: 0; padding: 10px; float: left; width: 340px; height: 228px; border-style: none; display: inline; background: #fff; border: solid #000 1px; }
.photoright { margin: 0; padding: 10px; float: right; width: 340px; height: 228px; border-style: none; display: inline; background: #fff; border: solid #000 1px; }

/* This is how to display the img tag that is contained within the div - I have added a border 1px black */
.photocenter img { width: 500px; height: 335px; display: block;  }
.photoleft img, .photoright img { width: 340px; height: 228px; display: block; }

/* This is how to display the caption - if supplied under the photo with a little margin above to space it */
.captionleft, .captionright { margin: 0; padding: 0; width: 294px; height: 53px; text-align: center; }
.captioncentre { margin: 0 0 0 0; padding: 0; width: 294px; height: 53px; text-align: center; }
.captionpan { margin: 0 0 0 0; padding: 0; width: 294px; height: 53px; text-align: center; }
.photopan p { margin: 5px auto 0 auto; padding: 0; width: 678px; text-align: center; }

/* Image Thumbnails */
.thumbnail { width: 160px; height: 180px; margin: 10px; padding: 0; }
.thumbnailimage { border: 0; border-style: none; }

/* Footer */
#footer { width: 1008px; height: 55px; margin: 0 ; margin: 0; padding: 0; font-size: 0.8em; font-weight: bold; }
#footer a#footerleft { width: 122px; height: 55px; float: left; margin: 0; padding: 0; display: block; background: #fff4cd url(../images/footer_bl.jpg) no-repeat 0 0; border-style: none; border: 0; }
#footer #footerright { width: 886px; height: 55px; float: left; margin: 0; padding: 0; display: block; background: #fff4cd url(../images/footer_br.jpg) no-repeat 0 0; }
#footer #footerright p { color: #290f3b; text-align: left; padding: 5px 0 0 15px; }