@charset "utf-8";
body{ font-family:'MyriadProRegular', arial; font-size: 13px; color:#6bb121; margin: 0;  padding: 0; width:100%; height:100%; line-height:1.4em; }
#content{ width:927px; height:596px;  margin:0 auto; }
#content.home{ background:url(../images/home_bg.jpg) no-repeat top left #fff; }
#content.flavours{ background:url(../images/flavour_bg.jpg) no-repeat top left #fff; }
#content.contact{ background:url(../images/contact_bg.jpg) no-repeat top left #fff; }

h1{ font-family:'funkydoriregular', arial; font-size:34px; line-height:1.0em; color:#fff; text-align:left; text-shadow: -1px 0 #6bb121, 0 1px #6bb121, 1px 0 #6bb121, 0 -1px #6bb121; }  
h2{ font-family:'funkydoriregular', arial; font-size:30px; line-height:0.6em; color:#88bdd8; text-align:left; margin-top:20px; margin-bottom:0px; }  

input, textarea { -webkit-appearance:none; width:100%; padding:5px; border:1px dashed #88bdd8; margin-bottom:10px; width:263px; color:#000; font-family:'MyriadProRegular', arial; font-size: 13px; color:#000; }
.button{ background-color:#cc3335; color:#fff; text-transform:uppercase; width:276px; border:none; }

.menu { width:195px; height:276px; float:left; margin-top:88px; margin-left:32px; }

.menu .m-home{ width:195px; height:276px; background-image:url(../images/home.png); background-position:left; z-index:10; position:absolute; }  
.menu .m-home:hover{ cursor:pointer; background-position:right; }
.menu .m-story{ width:195px; height:60px; background-image:url(../images/our_story.png); background-position:left; z-index:20; position:absolute; margin-top:72px; }  
.menu .m-story:hover{ cursor:pointer; background-position:right; }
.menu .m-flavour{ width:195px; height:60px; background-image:url(../images/our_flavours.png); background-position:left; z-index:30; position:absolute; margin-top:128px; }  
.menu .m-flavour:hover{ cursor:pointer; background-position:right; }
.menu .m-contact{ width:195px; height:60px; background-image:url(../images/contact.png); background-position:left; z-index:40; position:absolute; margin-top:185px; }  
.menu .m-contact:hover{ cursor:pointer; background-position:right; }

.menu .selected { background-position:right; }

.text-right{ float:left; width:640px; margin:30px 40px 30px 20px; height:536px; }
.homeboer{ background-image:url(../images/home_boer.png); background-repeat:no-repeat; background-position:top left; }
.appelkist-home{ width:226px; height:191px; background-image:url(../images/appelkist.png); background-repeat:no-repeat; position:relative; top:395px; left:-30px; }

.storylogo{ background-image:url(../images/logo.png); background-repeat:no-repeat; background-position:left 60px top; }

.flavour-img { float:left; width:460px; height:373px; margin-top:40px; margin-left:85px; background-image:url(../images/flavours.png); background-repeat:no-repeat; background-position:top left; }
.flavour-text { width:847px; height:142px; float:left; margin:20px 40px; }
.flavour-text .column { width:150px; margin-right:19px; height:142px; float:left; }
.flavour-title { width:250px; height:40px; position:absolute; margin-top:370px; margin-left:30px; z-index:100; }

.contact-container { width:315px; height:440px; background-color:#fff; float:left; margin-left:68px; margin-top:120px; }
.contact-hand-container{ width:275px; height:360px; padding:60px 20px 20px 20px; background-image:url(../images/vingers.png); background-repeat:no-repeat; background-position:top center; margin-top:-20px; }  
.contact-info{ width:206px; height:205px; float:left; margin-top:180px; margin-left:110px; color:#6bb121; }
.contact-info a{ color:#6bb121; }