/* ----------------------------------------------------- 4Square CSS ----------------------------------------------------- */

/* ----------------------------------------------------- Index ----------------------------------------------------- 


The styles are grouped as follows:

 - HTML tags
 - Layout (the main divs which create the layout)
 - Navigation
 - Forms
 - Type
 - Misc.


*/

/* ----------------------------------------------------- Colours ----------------------------------------------------- 


The colours used throughout the site are:

 - 026b30 - 4Square Green (page background, headings, text)
 - 0a4f27 - Dark Green (navigation bar background)
 - 459454 - Mid Mint Green (right-hand column background)
 - 0dbf5b - Bright Green (headings, action text)
 - 354e40 - Murky Green (footer background)
 - ffffff - White (page background)
 - ff0000 - Red (text)
 - fdeb2a - Lighter yellow (link hover, panel backgrounds)
 - fff697 - Yellow tint
 - fad004 - Gold (nav highlight, horizontal rules)
 - 1e4a31 - Charcoal Green (primary text)
 - 909090 - Grey (secondary text, detail text)
 - c5e4cb - Light Mint (noticeboard copy)


*/

/* ----------------------------------------------------- HTML classes ----------------------------------------------------- */


body {
margin:0;
padding:1px 0 20px 0;
background:url(/i/bg.gif) repeat-y center top #026b30;
color:#1e4a31;
font-family:verdana,arial,helvetica,tahoma,sans-serif;
font-size:11px;
line-height:1.5em;
text-align:center;
min-width:990px;
}

body.specials-top {
background:url(/i/bg-specials.gif) repeat-y center top #026b30;
}

td {
font-size:12px;
line-height:1.5em;
}

blockquote {
color:#909090;
margin:-5px 0 0 0;
float:right;
width:200px;
font-size:16px;
line-height:1.5em;
font-weight:bold;
font-family:;
text-align:left;
}

blockquote.button {
padding:0;
height:30px;

}

blockquote.button img {
float:right;
}

blockquote span {
float:right;
text-transform:uppercase;
font-size:10px;
}

blockquote h3 {
color:#459454;
margin:5px 0 3px 0;

}


blockquote img {
padding:8px 0 0 0;
}


a:visited {
color:#1e4a31;
}

a {
color:#1e4a31;
text-decoration:none;
border-bottom:1px solid #459454;
}

a:hover {
color:#ff0000;
}

a img {
border:0;
display:block;
}

span.green {
color:#019642;
text-transform:uppercase;
}

h1,h2 {
color:#354e40;
font-size:18px;
margin:12px 0 1em 0;
line-height:1em;
border-bottom:1px solid #dbdbdb;
padding:0 0 1em 0;
font-family:arial black;
font-weight:normal;
}

h3 {
color:#;
line-height:1.2em;
font-size:14px;
font-weight:bold;
margin:0 0 1em 0;
}

h4 {
color:#;
font-size:14px;
font-weight:bold;
margin-top:0;
line-height:1.3em;
}

h5 {
font-size:11px;
margin:0 0 5px 0;
line-height:1.2em;
font-weight:bold;
}

.right h5 {
color:#0a4f27;
margin:4px 0 0 0;
line-height:1.5em;
font-size:11px;
font-weight:bold;
}


h6 {
font-size:11px;
font-weight:normal;
margin:0 0 5px 0;
}

p {
margin:0 0 1.3em 0;
}

form {
padding:0;
margin:0;
}

input, select, option {
font-family:arial,verdana,tahoma,helvetica,sans-serif;
font-size:11px;
}

input.text {
padding:2px;
}

ul {
margin:0 0 .8em 0;
padding:0 0 0 1em;
}

li {
}

hr {
background:#dbdbdb;
color:#dbdbdb;
border:0;
height:1px;
clear:both;
margin:1em 0 1em 0;
}

.end-content {
margin:9px 19px 5px 26px;
}

.news hr {
margin-bottom:0;
}




/* ----------------------------------------------------- Layout classes ----------------------------------------------------- */


.container {
margin:0 auto;
padding:0;
width:989px;
position:relative;
text-align:left;
}

.content {
text-align:left;
padding:0;
width:729px;
margin:0 0 0 24px;
border:0;
}

.specials-pdf {
width:966px;
background:#ffffff;
}

.content td {
text-align:left;
border:0;
font-size:11px;

}

.left-content {
width:241px;
padding:0 4px 0 0;
}

.center-content {
width:241px;
}

.right-content {
width:241px;
}

.news img {
float:right;
margin:.6em 0 5px 10px;
}

.header {
text-align:left;
}

.shop-location {
}

.right {
width:210px;
padding:0 0 0 0;
margin:0 0 20px 0;
float:right;
display:block;
background:transparent;
border:none;
}

.left {
margin:0 0 20px 0;
float:left;
width:770px;
}


.footer {
margin:7px 0 20px 24px;
width:729px;
padding:0;
display:block;
position:relative;
text-align:left;
clear:both;
font-size:11px;
line-height:16px;
color:#d2e6bb;
min-height:45px;
font-size:10px;
background:url(/i/bg-nav2.gif) repeat-x left bottom #0a4f27;
border:1px solid #026b30;
}

.footer-four {
position:absolute;
z-index:10;
right:0;
top:0;
}

.footer p {
color:#ffffff;
padding:7px;
margin:0 0 0 0;
}

.footer p a {
color:#ffffff;
text-decoration:none;
border-bottom:1px solid #459454;
}

.footer p a:hover {
color:#fdeb2a;
}

.footerlink {
font-weight:bold;
text-transform:uppercase;
} 

.squaredeals {
background:url(/i/heading-squaredeals.gif) no-repeat center top #fdeb2a;
padding:46px 0 0 0;
}


.squaredeals * {
margin:4px;
}

.lotto {
width:auto;
margin:8px 0 5px 24px;
padding:7px 0 0 0;
border:solid #dbdbdb;
border-width:1px 0 0 0;
width:729px;
}

.lotto a {
border:0;
}

.alcohol-container {
width:729px;
}

.article-page p {
line-height:1.6em;
}

.text-column {
width:500px;
padding:0 0 .5em;
}




/* ----------------------------------------------------- Navigation classes ----------------------------------------------------- */


.left .navigation {
padding:0;
margin:0 0 7px 24px;
width:729px;
background:url(/i/bg-nav.gif) repeat-x #0a4f27;
border:1px solid #026b30;
text-align:left;
color:#59ad40;
font-weight:bold;
clear:both;
}

.left .navigation td {
font-size:11px !important;

color:#ffffff;
background:url(/i/bg-nav-item.gif) no-repeat right top transparent;
padding:0;
width:auto;
text-align:center;
}

.left .navigation a {
color:#ffffff;
background:none;
padding:4px 5px 5px 5px;
display:block;
border:0;
white-space:nowrap;
}

.left .navigation td.current a,.left .navigation a:hover {
color:#ffe901;
}






/* ----------------------------------------------------- Form classes ----------------------------------------------------- */










/* ----------------------------------------------------- Type classes ----------------------------------------------------- */



.normal {
font-weight:normal;
}

.italic {
font-style:italic;
}

.smaller {
font-size:140%;
line-height:1.2em;
}

.bold {
font-weight:bold;
}

.red {
color:#ff0000;
}

.white {
color:#ffffff;
}

.intro {
font-family:verdana;
font-size:13px;
line-height:20px;
text-align:justify;
}

.caps {
text-transform:uppercase;
}

.center {
text-align:center;
}





/* ----------------------------------------------------- Form classes ----------------------------------------------------- */


form.add-listing {
width:190px;
margin:0 8px;
}

.dots {
background:url(/i/bg-notice-item.gif) no-repeat right bottom transparent !important;
}

.add-listing td {
font-size:11px !important;
font-weight:normal;
font-family:verdana,sans-serif;
}

.add-listing div {
margin:0;
padding:0 0 6px 0;
}

.add-listing p {

padding:0 0 6px 0;
margin:0;
}

.add-listing input, .add-listing textarea, .add-listing select {
font-size:11px;
font-weight:normal;
font-family:verdana,sans-serif;
margin:5px 0 0 0;
padding:4px;
border:1px solid #c5e4cb;
border-top:1px solid #333;
border-left:1px solid #333;
background:#aed1be;
}

input.text, textarea, select {
width:184px;
}

.add-listing input.checkbox {
width:12px;
}

.add-listing textarea {
height:80px;    
}

.calendar-link {
padding:7px 0 !important;
}

.calendar {
float:right;
background:url(/i/icon-calendar.gif) no-repeat right center transparent;
width:22px;
height:21px;
margin:4px 2px 4px 0;
border:0 !important;
}

.add-listing .radio {
border:0 !important;
background:transparent !important;
}


.listing-span {
display:block;
padding:3px 0 0 0;
}

.add-listing .right {
float:right !important;
width:100px;
}

.submit-button {
padding:0 0 8px 0 !important;
border:none !important;
margin:5px 0px !important;
background:none !important;
}





/* ----------------------------------------------------- Misc. classes ----------------------------------------------------- */



.shop-location {
width:385px;
float:left;
margin:24px 15px 0 0;
font-size:10px;
line-height:14px;
color:#909090;
padding:0;
white-space:nowrap;
}

.shopname {
margin:0 0 5px 0;
padding:0;
}

.foursquarelogo {
float:left;
display:inline;
margin:0 24px 2px 24px;
}

img.emailnewsletter {
border-top:1px solid #b3d2c0;
padding:8px 0 0 0;
margin:0 0 0 0;
display:block;
}

.free-noticeboard {
position:absolute;
top:-1px;
right:0;
z-index:100;
}

.noticeboard-header {
width:211px;
height:137px;
position:relative;
background:url(/i/bg-noticeboard.gif) no-repeat transparent;
margin:-1px 0 0 0;
}

.noticeboard-note {
position:relative;
z-index:1;
}

.view-all {
position:absolute;
top:81px;
left:31px;
display:block;
z-index:100;
top:100;
}

.add-a-listing {
position:absolute;
top:98px;
left:31px;
display:block;
z-index:100;
top:100;
}

.add-a-listing2 {
position:absolute;
top:86px;
left:23px;
display:block;
z-index:100;
top:100;
}

.no-border {
border:none !important;
}

.no-background {
background:none !important; 
}

.noticeboard-inset {
padding:0 0 31px 5px;
margin:0 0 7px 0;
background:url(/i/bg-notice-item.gif) no-repeat left bottom transparent;
}


.noticeboard-listing {
line-height:1.4em;
color:#c5e4cb;
padding:2px 5px 10px 7px;
margin:0 0 7px 0;
background:url(/i/bg-notice-item.gif) no-repeat left bottom transparent;
/*width:200px;*/
}

.noticeboard-listing h6 span {
color:#c5e4cb;
}

.noticeboard-listing h6:hover {
color:#ffffff;
}

.noticeboard-notes {
color:#0a4f27;
padding:0 5px 10px 7px;
}

.right a {
color:#ffffff;
border-bottom:1px solid #026b30;
}

.right a:hover {
color:#fdeb2a;
}

.noticeboard-notes a {
color:#0a4f27;
border-bottom:1px solid #0a4f27;    
}

.item-text {
padding:5px 10px 6px 0;
text-align:center !important;
color:#026b30;
font-size:10px;
font-weight:bold;
border-bottom:1px solid #fff !important;
border-right:1px solid #fff !important;
}

.item-pic {
padding:5px 0;
border-bottom:1px solid #fff !important;
}

.price {
color:#ff0000;
font-size:18px;
}

.unit {
font-size:10px;
color:#909090;
}

.per {
font-size:10px;
}

.right-content .item-pic {
padding:0;
margin:0;
border:0 !important;
}

.right-content .item-text {
padding:0 0 10px 0;
border:0 !important;
}

.right-content .item-text .price {
padding:0;
margin:0;
line-height:42px;
}

.right-content .item-text .per {
padding:0;
margin:0;
line-height:38px;
}

.price-box {
padding:0;
margin:-15px 0 0 0;
}

.right-content .item-text h5 {
font-size:15px;
padding:0 0 5px 0;
}

.right-content .item-text .bignumeral {
font-size:32px !important;
margin:0 0 -10px 0;
padding:0;
color:#ff0000;
}

.seperator {
padding:15px 0 0 0;
}

.specials {
background:#fff697;
margin-bottom:14px;
}

.float-left {
float:left;
}

.vertical-box {
width:130px;
}

.bottom-product {
border-bottom:none !important;
}

a.no-border {
border:none;
}






/* ----------------------------------------------------- Accordion CSS ----------------------------------------------------- */



.right #container {
margin:0;
padding:0;
width:210px;
}

.alcohol-container #container {
border-top:7px solid #ffffff;
margin:0;
padding:0;
position:relative;
}

.alcohol-container .content {
margin:1px 0 0 0;
}

.alcohol-container .squaredeals {
padding:0;
}

.alcohol-container .content .item-pic, .alcohol-container .content .item-text, .alcohol-container .content .squaredeals, .alcohol-container .content .specials {
background:#afdf94;
}

.age-check {
color:#ffffff;
padding:7px 7px 7px 45px;
background:url(/i/icon-stop.gif) no-repeat 11px 10px #026b30;
}

.age-check h6 {
color:#fff697;
font-weight:bold;
margin:0;
text-transform:uppercase;
}

.alcohol-button {
position:absolute;
right:8px;
top:10px;
}

.hero-image {
float:right;
margin-top:7px;
padding:0 0 20px 27px;
vertical-align:text-bottom;
}

.compact {
display:block;
line-height:1px !important;
padding:0;
margin:0;
}


.listing {
width:729px;
padding:0 0 0 0;

}

.listing .noticeboard-listing {
padding:0;
margin:0;
background:none;
}

.listing h3 {
margin:0;
background:#ffffff;
border-top:1px solid #dbdbdb;
padding:4px 0;
text-transform:uppercase;
color:#459454;
background:none;
font-size:14px;
font-family:arial black;
font-weight:normal;
}

.listing .accordion_toggle {
padding:6px 0;
background:none;

}

.listing .accordion_content {
padding:0 0 0 0;
background:none;
}

.listing table {
width:729px;
margin:0 0 6px 0;
color:#1e4a31;
}

.listing td {
width:33%;
padding:10px 10px 10px 0;
border-top:1px solid #dbdbdb;
}

.listing a {
color:#1e4a31 !important;
text-decoration:none;
border-bottom:1px solid #459454;
}

.listing a:hover {
color:#ff0000 !important;
}

.listing .contact-details {
float:left;
margin:0 10px 0 0;
color:#459454;
}

.supplier-table {
margin-top:0;
margin-bottom:10px;
width:729px;
}

.supplier-table td {
width:178px;
border-right:6px solid #ffffff;
}


.no-border {
border:none !important;
}

.noticeboard-table {
margin-top:0;
margin-bottom:10px;
width:729px;
}

.noticeboard-table td {
width:238px;
border-right:6px solid #ffffff;
}

.noticeboard-table .notice {
background:url(/i/bg-noticeboard1.gif) no-repeat left bottom transparent;
padding:10px 6px;
margin:0 0 10px 0;
width:230px;
}

.noticeboard-table .notice p {
padding:5px;
}

.noticeboard-table h4 {
padding:5px;
margin:0 0 5px 0;
}

.notice-listing a.selected {
border:none;
color:#019642;
}


.notice img {
border:2px solid #ffffff;
display:block;
margin:-3px 0 7px 0;
}

.noticeboard-table .bg1 {
background:url(/i/bg-noticeboard1.gif) no-repeat left bottom transparent;
}

.noticeboard-table .bg2 {
background:url(/i/bg-noticeboard2.gif) no-repeat left bottom transparent;
}

.noticeboard-table .bg3 {
background:url(/i/bg-noticeboard3.gif) no-repeat left bottom transparent;
}

.noticeboard-table .bg4 {
background:url(/i/bg-noticeboard4.jpg) no-repeat left bottom transparent;
}

.noticeboard-table .bg5 {
background:url(/i/bg-noticeboard5.gif) no-repeat left bottom transparent;
}

.noticeboard-table .bg6 {
background:url(/i/bg-noticeboard6.gif) no-repeat left bottom transparent;
}


.intro-table {
color:#c5e4cb;
background:#025c29;
border:solid #025c29;
border-width:24px 0 2px 0;
}


.intro-table p {
padding:0 22px;
}

.border-right {
border-right:2px solid #025c29;
}

.meta-home .footer {
margin:2px auto 0 auto;
width:990px;
position:relative;
text-align:left;
border:0;
}

.imperial {
margin-left:20px;}