/*
	HTML5 Reset :: style.css
-------------------------------------------------------------------------------*/


/* Defaults
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}									

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
/*img,
object,
embed {max-width: 100%;}*/

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 4px; border: 0; margin: 1.4em 0; padding: 0; background:url(../images/divider.png) top left repeat-x;}

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 75%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: " "; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }


/* Page Structure
-------------------------------------------------------------------------------*/
html,body
{
height:100%;
}

body
{
background-color: #ffffff;
background:url(../images/header_bg.jpg) top center no-repeat;
}

.wrapper
{
width: 1000px;
margin: 0 auto;
}

#pageHead
{
height:137px;
}

#pageHead .wrapper
{
position: relative;
height: 137px;
}

h1
{
position: absolute;
top: 22px;
left: 29px;
width:220px;
height:59px;
overflow:hidden;
background:url(../images/logo.png) top left no-repeat;
}

h1 a
{
display:block;
width:220px;
height:59px;
text-indent:-9999px;
text-decoration:none;
}

#pageHead nav ul
{
list-style:none;
margin:0 0 0 5px;
padding: 95px 0 0 0;
}

#pageHead nav ul li{
display:inline-block;
width:145px;
height:38px;
overflow:hidden;
background:url(../images/nav_item_bg.png) top left no-repeat;
margin-left:15px;
}

#pageHead nav ul li a,
#pageHead nav ul li a:link,
#pageHead nav ul li a:visited
{
display:inline-block;
width:135px;
height:33px;
margin:5px 0 0 0;
overflow:hidden;
font-size:28px;
font-weight:normal;
white-space:nowrap;
text-decoration:none;
text-indent:-9999px;
background:url(../images/nav_matrix.png) top left no-repeat;
}

#pageHead nav ul li a:hover,
#pageHead nav ul li a:focus,
#pageHead nav ul li a.active
{
text-decoration:none;
}

#pageHead nav ul li a.active{
cursor:default;
}

#pageHead nav ul li #home{background-position: 0 0;}
#pageHead nav ul li #home:hover, #pageHead nav ul li #home:focus, #pageHead nav ul li #home.active{background-position: 0 -33px;}
#pageHead nav ul li #about{background-position: -135px 0;}
#pageHead nav ul li #about:hover, #pageHead nav ul li #about:focus, #pageHead nav ul li #about.active{background-position: -135px -33px;}
#pageHead nav ul li #works{background-position: -270px 0;}
#pageHead nav ul li #works:hover, #pageHead nav ul li #works:focus, #pageHead nav ul li #works.active{background-position: -270px -33px;}
#pageHead nav ul li #faqs{background-position: -405px 0;}
#pageHead nav ul li #faqs:hover, #pageHead nav ul li #faqs:focus, #pageHead nav ul li #faqs.active{background-position: -405px -33px;}
#pageHead nav ul li #flavours{background-position: -540px 0;}
#pageHead nav ul li #flavours:hover, #pageHead nav ul li #flavours:focus, #pageHead nav ul li #flavours.active{background-position: -540px -33px;}
#pageHead nav ul li #join{background-position: -675px 0;}
#pageHead nav ul li #join:hover, #pageHead nav ul li #join:focus, #pageHead nav ul li #join.active{background-position: -675px -33px;}


#pageHead aside{
position:absolute;
top:14px;
right:18px;
font-size:14px;
}

#pageHead aside a{
font-weight:bold;
}

#mainPage{
background-color: #F7F4EF;
}

#mainPage .wrapper
{
width: 944px;
min-height:300px;
padding:30px 28px 30px 28px;
background-color: #ffffff;
}


#mainPage .wheretobuy
{

width: 944px;
min-height:100px;
padding:30px 28px 30px 28px;
background-color: #ffffff;
}

#pageFoot{
min-height:110px;
background:url(../images/footer_bg.png) top left repeat-x #ffffff;
font-size:11px;
font-weight:bold;
}

#pageFoot .twoCols .colOne,
#pageFoot .twoCols .colTwo
{
width:48%;
font-size:11px;
}

#pageFoot .twoCols .colTwo
{
text-align:right;
}

#pageFoot p
{
margin:12px 0 0 0;
}

#pageFoot ul{
list-style:none;
margin:12px 0 0 0;
}

#pageFoot ul li{
overflow:hidden;
display:inline-block;
}

#pageFoot a
{
color:#ff9900 !important;
}

#pageFoot nav ul li
{
margin-left:4px;
padding-left:5px;
line-height:1.2;
border-left:solid 1px #fffce9;
}

#pageFoot nav ul li:first-child
{
margin-left:0;
padding-left:0;
border:none;
}

#pageFoot nav ul li a
{
color:#fffce9 !important;
}

#pageFoot .socialLinks li
{
display:inline-block;
margin-right:10px;
line-height:1;
}

#pageFoot .socialLinks li *
{
vertical-align:middle;
}


/* Fonts and inline styles
-------------------------------------------------------------------------------*/

body{
font-family:Georgia, serif;
font-size:14px;
line-height:1.6;
}

/* default text colour */
body, select, input, textarea {color:#536666;}

/* headings */
#mainPage h2{
font-size:24px;
font-weight:normal;
line-height:1.3;
}

#mainPage h3{
font-size:16px;
font-weight:bold;
line-height:1.4;
}

#mainPage h4{
font-size:14px;
font-weight:bold;
line-height:1.4;
}

#mainPage * + h2,
#mainPage * + h3,
#mainPage * + h4,
#mainPage h2 + h3
{
margin-top: 1.4em !important;
}

#mainPage h2 + *,
#mainPage h3 + *,
#mainPage h4 + *,
#mainPage h3 + h4
{
margin-top: 4px !important;
}

#mainPage hr + h2,
#mainPage hr + h3,
#mainPage hr + h4
{
margin-top:0;
}

h2 .number
{
display:inline-block;
width:40px;
height:54px;
margin-right:2px;
background:url(../images/numbers_matrix.png) 0 0 no-repeat;
overflow:hidden;
vertical-align: middle;
}

h2 .number.one{background-position:0 0;}
h2 .number.two{background-position:0 -54px;}
h2 .number.three{background-position:0 -108px;}

/* paragraphs */
#mainPage * + p
{
margin-top:1.4em;
}

.intro
{
font-size:26px;
font-family:'SteelfishRegular';
text-transform:uppercase;
letter-spacing:1px;
}

.intro a
{
font-weight:normal !important;
}

/* links */
a,
a:visited{
font-weight:bold;
color:#ff9900;
text-decoration:none;
}

a:hover,
a:focus{
color:#ff9900;
text-decoration:underline;
}

/* Custom text-selection colors */
::-moz-selection{background: #ff9900; color: #fff; text-shadow: none;}
::selection {background: #ff9900; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #ff9900;} 

/* lists */
#mainPage * + ul,
#mainPage * + ol{
margin-top:1.4em;
}

#mainPage ul,
#mainPage ol
{
margin-left:20px;
}

/* images */
.imgWrapper img
{
display:block;
}

#mainPage * + .imgWrapper
{
margin-top:1.4em;
}

.imgWrapper.flushFooter
{
margin-bottom:-30px;
}

.imgWrapper.flushRight
{
overflow:hidden;
margin-right:-28px;
}

.imgWrapper.flushRight img
{
float:right;
}

/* buttons */
.button,
.button:visited
{
display:inline-block;
height:34px;
padding:0 10px;
overflow:hidden;
background:url(../images/button_bg.png) top left repeat-x;
line-height: 34px;
font-size: 16px;
text-align:center;
color:#ffffff;
white-space:nowrap;
text-decoration:none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}

.button:hover,
.button:focus
{
text-decoration: none;
}

/* asides */
#mainPage aside
{
font-size:13px;
}

/* misc */

ins {background-color: #ff9900; color: #000; text-decoration: none;}
mark {background-color: #ff9900; color: #000; font-style: italic; font-weight: bold;}

#mainPage hr + * {margin-top:0;}

.right{text-align:right;}

.floatLeft{float:left;}
.floatRight{float:right;}


/* Page Styles and Structures
-------------------------------------------------------------------------------*/

/* column layouts */

.colWrapper:before,
.colWrapper:after
{
content:"";
display:table;
}

.colWrapper:after
{
clear:both;
}

.colWrapper.twoCols .colOne
{
float:left;
width:670px;
}

.colWrapper.twoCols .colTwo
{
float:right;
width:250px;
}

.colWrapper.twoCols.even .colOne,
.colWrapper.twoCols.even .colTwo
{
width:48%;
}

.colWrapper.twoCols .colOne img{max-width:670px;}
.colWrapper.twoCols .colTwo img{max-width:264px;}

.colWrapper.threeCols.even .colOne,
.colWrapper.threeCols.even .colTwo,
.colWrapper.threeCols.even .colThree
{
float:left;
width:30%;
margin-right:5%;
}

.colWrapper.threeCols.even .colThree
{
margin-right:0;
}

* + .colWrapper
{
margin-top: 1.2em;
}


/* Home style overrides */
.home #mainPage .wrapper
{
background:url('../images/content_bg.png') 1px 0px repeat-y #ffffff;
}

.home .colOne{
font-size:16px;
}


/* FAQs structure */
.faqs .twoCols .colOne,
.faqs .twoCols .colTwo
{
width:458px;
}

.faqs .collapsing
{
margin-top:0.5em;
padding:8px;
background:url(../images/faq_bg.png) top left repeat-x #fffcea;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
}

.showHide
{
padding:0 24px 0 0;
background:url(../images/green_down_arrow.png) right 5px no-repeat;
}

.faqs h3.showHide
{
font-size:15px !important;
font-weight:normal !important;
}

.faqs .hidden
{
font-size:14px;
}

/* Flavours */
.flavour
{
clear: both;
margin-top: 20px;
}

#mainPage h3 + .flavour
{
margin-top: 12px !important;
}

.flavour img
{
float: left;
display: block;
margin: 0 14px 0 0;
}

.flavour .inner
{
overflow: hidden;
}

.monthly_favs
{
	margin-bottom: 15px;
}



.flavour .featured
{
	float: left;
	width: 234px;
}

.flavour .member_exclusives
{
	
	width: 900px;
}

.featured div
{
	margin: 10px 0 0 0;
}

.flavour_subhead 
{
	font-size:16px;
	line-height:1.4;
}

#flavour_nav ul
{
	list-style-type:none;
	margin:0;
	margin-left:0;
	padding-bottom: 12px;
	overflow:hidden;;
}

#flavour_nav li
{
	float:left;
	color:#ff9900;
	font-weight:bold;
	padding-right: 10px;
}


#flavour_nav a
{ 
	text-decoration:none;
	color:#536666;
	font-weight:normal;
    
}



.monthly img
{
	border: 1px solid #724314;
}

.signature
{
	float: left;
	width: 222px;
	margin: 15px 14px 20px 0 !important;
}

.signature img
{
	border: 1px solid #78542f;
	display: block;
	width: 222px;
	height: 168px;
}



.limited-edition-flavour
{
	float: left;
	width: 222px;
	margin: 15px 14px 20px 0 !important;
}

.limited-edition-flavour img
{
	border: 1px solid #78542f;
	display: block;
	width: 222px;
	height: 168px;
	margin-bottom:10px;
}


.cookie
{
	float: left;
	width: 335px;
	margin: 15px 20px 20px 0 !important;
}

.cookie img
{
	border: 1px solid #78542f;
	display: block;
	width: 335px;
	height: 255px;
	margin-bottom:20px;
	
}

.signature h4
{
	line-height: 2.4 !important;
}

.coming-soon
{
	margin: 15px 0 0 0 !important;
}

.coming-soon img
{
	border: 1px solid #526666 !important;
}


/* Mail Chimp sign up styles
-------------------------------------------------------------------------------*/

#mc_embed_signup .email
{
border:solid 1px #a37047;
width:200px;
padding:5px 4px 4px 4px;
margin-right:6px;
font-size:14px;
}

#mc_embed_signup .formSubmit
{
border:0px;
padding:0px;
margin:0px;
width:30px;
height:27px;
background:url(../images/sbmt_bg.png) top left no-repeat;
}


/* Twitter styles
-------------------------------------------------------------------------------*/
#twitterFeed
{
background:url(../images/divider.png) top left no-repeat;
padding-top:20px;
margin-top:14px;
}

#twitterFeed .twtr-widget
{
font-family:Georgia, serif !important;
font-size:13px !important;
}

#twitterFeed .twtr-hd
{
padding:0px;
font-family:Georgia, serif !important;
}

#twitterFeed .twtr-bd
{
padding:0px;
}

#twitterFeed .twtr-widget .twtr-tweet
{
border-bottom:0px;
padding:0px;
background:url(../images/divider.png) top left no-repeat;
}

#twitterFeed .twtr-widget .twtr-reference-tweet+.twtr-tweet
{
background:none;
}

#twitterFeed .twtr-widget .twtr-tweet .twtr-tweet-wrap
{
padding:15px 4px 15px 0;
}

#twitterFeed .twtr-widget em,
#twitterFeed .twtr-widget .twtr-new-results
{
font-size:12px;
margin-top:4px;
}

#twitterFeed .twtr-widget a
{
font-weight:normal;
}

#twitterFeed .twtr-ft
{
background-color:#556666;
color:#ffffff;
}

#twitterFeed .twtr-ft span a
{
background-color:#556666;
color:#ffffff !important;
}


/* Print styles
-------------------------------------------------------------------------------*/
@media print {

}


/* Media queries
-------------------------------------------------------------------------------*/

@media screen and (max-device-width: 480px) {

}

@media all and (orientation: portrait) {

}

@media all and (orientation: landscape) {

}