﻿
/* Reset */

body {color:#000;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup,sub {line-height:-1px;vertical-align: text-top;}
sub {vertical-align:text-bottom;}
input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}

img{vertical-align:top; border:0px;}
legend{height:0; font-size:0;}
a, input, select, textarea{outline:none;}
.clear, .Clear{clear:both; font-size:0px; line-height:0px;}


/* Template Styles */

HTML{background:white; background:url(../i/backHtml.jpg) center top;}
BODY{font-family:Arial, Tahoma, Verdana, Sans-Serif; font-size:62.5%; color:#A1A598; background:url(../i/backBody.jpg) center top repeat-x;}

.pad{padding-bottom:10px;}
.doublePad{padding-bottom:20px;}

#mainWrapper{background:url(../i/backWrapper.png) center top no-repeat;}
#main{width:940px; margin:auto;}
#header{height:120px; background:url(../i/header.jpg);}
#logo{padding-top:10px;}
#logo A{display:block; width:220px; height:90px; margin:auto;}

#menuWrapper{height:37px; background:url(../i/menuBack.jpg);}
#topMenu{width:488px; margin:auto; height:37px;}
#topMenu LI{float:left;}
#topMenu LI A{display:block; height:37px; background:url(../i/menu.gif);}
#topMenu .seperator{width:20px; height:37px; background:url(../i/menu.gif) -61px 0px;}
#topMenu .active{cursor:default;}
#topMenu .home{width:61px;}
#topMenu .home A:hover{background-position:0px -37px;}
#topMenu .home .active{background-position:0px -37px;}
#topMenu .menu{width:61px;}
#topMenu .menu A{background-position:-81px 0px;}
#topMenu .menu A:hover{background-position:-81px -37px;}
#topMenu .menu .active{background-position:-81px -37px;}
#topMenu .deli{width:87px;}
#topMenu .deli A{background-position:-162px 0px;}
#topMenu .deli A:hover{background-position:-162px -37px;}
#topMenu .deli .active{background-position:-162px -37px;}
#topMenu .catering{width:124px;}
#topMenu .catering A{background-position:-269px 0px;}
#topMenu .catering A:hover{background-position:-269px -37px;}
#topMenu .catering .active{background-position:-269px -37px;}
#topMenu .contact{width:75px;}
#topMenu .contact A{background-position:-413px 0px;}
#topMenu .contact A:hover{background-position:-413px -37px;}
#topMenu .contact .active{background-position:-413px -37px;}

#contentWrapper{background:#1A1C1C url(../i/contentBack.jpg) no-repeat;}

#footerWrapper{height:50px; background:#1A1C1C url(../i/footerBack.jpg);}
#footer{text-align:right; padding:15px 15px 0 0; color:#808477;}
#footer A{color:#808477;}

.columns{}
.column1{float:left; width:276px; margin:0 28px 0 28px;}
.column2{float:left; width:276px; margin:0 28px 0 0;}
.column3{float:left; width:276px; margin:0 28px 0 0;}
.column12{float:left; width:580px; margin:0 28px 0 28px;}

.content{font-size:1.1em; line-height:1.5em;}

.button{position:relative;}
.buttonLeft{left:-5px;}
.buttonRight{left:5px;}
.button A{display:block; height:30px;}
.button A:hover{background-position:0px -30px;}
.button A:active{background-position:0px -60px;}

/* Home Page */
#homeColumns{padding-top:20px;}

.buttonMoreInfo{width:86px;}
.buttonMoreInfo A{background:url(../i/buttonMoreInfo.png);}

#facebookButton{width:179px; float:right;}
#facebookButton A{display:block; height:56px; background:url(../i/facebookButton.jpg);}
#facebookButton A:hover{background-position:0px -56px;}

/* Menu Page */
#menuColumns{padding-top:20px;}
#pageMenu H1{font-size:2em; border-bottom:solid 1px #373A38; padding:10px 0 6px 0; margin-bottom:6px;}
#menu H3{font-weight:bold; color:White; font-size:1.2em;}
#menu .price{float:right; font-weight:bold; color:White; font-size:1.3em;}
#menu .description{}
#menu LI{border-bottom:solid 1px #373A38; padding-bottom:8px; margin-bottom:6px;}
#menuList{background:#111211; border:solid 1px #262929;}
#menuList .inner{width:240px; margin:auto; padding:15px 0px;}
#menuList UL{padding-top:10px;}
#menuList UL LI{margin-bottom:20px;}
#menuList UL LI A{display:block; height:40px; background:url(../i/menuList.png); text-decoration:none;}
#menuList UL .active A{background-position:0px -40px; cursor:default;}
#menuList UL LI A:hover{background-position:0px -40px;}
#menuList UL LI A SPAN{display:block; color:White; font-size:1.4em; padding:10px 0 0 10px;}

.priceHeader{position:relative; top:10px; float:right; font-size:1.2em; color:white;}

/* Deli Page */
#columnsDeli{padding-top:20px;}

#promoBox{}
#pageDeli .column2{padding-top:16px;}
#pageDeli .column3{padding-top:35px;}
#promoBoxTop{height:44px; background:url(../i/promoBox.png);}
#promoBoxMiddle{background:url(../i/promoBox.png) -276px 0px;}
#promoBoxBottom{height:20px; background:url(../i/promoBox.png) 0px -44px;}
#promoBox .inner{width:220px; margin:auto;}
#promoBox .title{font-size:2em; color:White; text-align:center; padding-bottom:6px; margin-bottom:6px; border-bottom:solid 1px #812E2E;}
#promoBox .description{font-size:1.4em; color:White; line-height:1.3em; text-align:center; padding-bottom:10px;}

.buttonPromoVoucher{width:165px; margin:auto; margin-top:5px;}
.buttonPromoVoucher A{background:url(../i/buttonPromoVoucher.png);}

/* Catering Page */
#columnsCatering{padding-top:20px;}
#cateringPic{padding-top:10px;}

/* Contact Page */
#columnsContact{padding-top:20px;}
#columnsContact .column2{padding-top:46px;}
#pageContact #map{width:276px; height:276px;}

#contactDetails{margin-bottom:10px; padding-top:10px;}
#contactDetailsLeft{float:left; width:120px; font-size:1.1em; line-height:1.3em;}
#contactDetailsRight{float:left; width:156px;}
#contactDetailsRight A{color:#A1A598;}
#contactDetails .label{float:left; width:40px; color:white; font-weight:bold; font-size:1.1em;}
#contactDetails .value{float:left; width:116px; font-size:1.1em;}

/* Enquiry Form */
#contactForm{position:relative; background:#111211; border:solid 1px #262929;}
#contactForm .inner{width:240px; margin:auto; padding:15px 0px;}
#contactForm .title{padding-bottom:10px;}

#contactForm .textBox{margin-bottom:6px;}
#contactForm .textBox .labelCell{float:left; width:60px; padding-top:6px;}
#contactForm .textBox LABEL{color:#7E634C; font-size:1.1em;}
#contactForm .textBox .controlCell{float:left; width:180px;}
#contactForm .textBox INPUT{width:168px; font-size:1.2em; padding:4px; border:solid 2px #3A3E3E; background:#CED3C2 url(../i/formControlBack.png) repeat-x;}

#contactForm .textArea{}
#contactForm .textArea LABEL{display:block; color:#7E634C; font-size:1.1em; margin-bottom:6px;}
#contactForm .textArea TEXTAREA{width:228px; height:100px; font-size:1.2em; padding:4px; border:solid 2px #3A3E3E; background:#CED3C2 url(../i/formControlBack.png) repeat-x;}

#contactFormProgress{display:none; position:absolute; width:276px; padding-top:150px; text-align:center;}
#contactFormThanks{display:none; z-index:1000000; position:absolute; width:276px; text-align:center;}
#contactFormThanks .title{width:200px; margin:auto; font-size:2em; color:White; padding:120px 0 8px 0;}
#contactFormThanks .message{width:200px; margin:auto; font-size:1.2em; padding-bottom:8px; color:White;}
#contactFormThanks .reset A{color:White;}

#contactForm .errors{margin-top:5px; color:red;}

.buttonSendMessage{width:111px; margin-top:5px; float:right;}
.buttonSendMessage A{background:url(../i/buttonSendMessage.png);}