/*
Theme Name: GZG Theme
Theme URI: http://bsieders.com
Description: Theme for Groenten Zonder Grenzen
Version: 1.0
Author: Balthazar Sieders
Author URI: http://bsieders.com
*/

/* Generic Styles */
* {margin:0; padding:0;}
html, body {margin-bottom:1px; background:#111; min-width:900px; font-family: 'Volkhov', serif; color: #333; font-size:17px;}
li {margin-left:15px;}
ol li {margin:0 0 20px 25px;}
a {color:#356541; text-decoration:none; font-weight:bold; cursor:pointer;}
p, ul {padding-bottom:14px;}
img {border:none;}
h1 {font-size:29px; color:#356541; line-height: 1.3; margin-bottom:10px;}
h2, h2 a {font-size: 18px; margin:0 0 8px 0; font-weight:bold; }
h3 {font-size: 15px; margin-bottom:3px;}
input, textarea {border:none; background:rgba(0,0,0,0.5); margin:0 8px 5px 0; color:#fff;}
input { padding:3px 5px 3px 5px; line-height:20px; cursor:pointer;}
textarea {width:92%; padding: 5px; margin:0 0 15px 0; font-family:arial; color: #333;}

.form {margin-top:10px;}
.left  {float:left!important;}
.right {float:right!important;}
.center {text-align:center;} 
.hide, .hidetemp {display:none;}
.clear {clear:both; overflow:hidden;}
.grey {color:#888!important;}
.bold {font-weight:bold;}
.field {width:200px; vertical-align: top;}
.horlist span, .horlist span, .horlist a {margin-right:10px;}
.rounded {-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; behavior: url(pie/PIE.htc);}
.shadow {-webkit-box-shadow: 0px 7px 7px 0px rgba(0,0,0,0.6); -moz-box-shadow: 0px 7px 7px 0px rgba(0,0,0,0.6); box-shadow: 0px 7px 7px 0px rgba(0,0,0,0.6);}


/* Header Styles */
.header {position:relative; height:300px; background:url(images/header.jpg);}
.logo {position:absolute; right:6%; top:80px; cursor:pointer;}
.logo:hover {opacity:0.8;}
.pagetitle {position:absolute; font-weight:bold; left:6%; bottom:25px; font-size:38px; margin-right:400px; color:#222;}

/* Top menu Styles */
.headbar {position:absolute; top:0; left:0; width:100%; line-height:50px; height:50px; font-size:17px; color:#fff; z-index:20;}
.headbar {
    background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.headbar a {color:#fff; text-decoration:none;}
.headnav {list-style:none; position:relative; float:left; font-weight:bold; margin-left:4%; padding:0;}

.menu {float:right}
.menu li {list-style:none; float:left; margin:0 15px 0 0;}
.menu li:hover ul {display:block;}
.menu ul li {clear:left; white-space: nowrap;}
.menu a {color:#fff; }
.menu a:hover {color:#ccc;}


/* Translation menu Styles */
.langmenu {float:right; margin:0 4% 0 0; font-family: 'Volkhov', serif; }
.langmenu ul, .lang ul {list-style: none; }
.langmenu a {padding-left:25px; background-position: 0px 5px;}
.langactive li {display:none;}
.langactive .active {display:block;}
.langmenu:hover .langdropdown {display:block;}
.langdropdown {position:absolute; right:2%; top:40px; padding:10px 15px 10px 0; background:rgba(0,0,0,0.5); line-height:30px;}
.langdropdown .active,  .langdropdown {display:none;}
.langdropdown li:hover {opacity:0.7;}


/* Page Styles */
.table {position:relative; max-width:1900px; margin:0 auto; overflow:hidden;}
.recipecontent {padding:30px 3% 20px 3%;}
.page {background:url(images/background.jpg); min-height:400px; overflow:hidden;}
.content, .content-single {padding:30px 6% 20px 6%;}
.plate {position:absolute; right:0; top: 380px; z-index:1;}
.tab {overflow:hidden; margin-bottom:30px;}
.singlepage { max-width:720px; padding:20px; background:#fff; overflow:hidden; line-height:1.6em;}

.gzgtable {border-spacing: 10px;  border-collapse: separate;}
.gzgtable img {width:90%;}
.gzgtable td {vertical-align: top;}

.description {font-size:25px; margin-bottom: 50px; max-width:800px; }
.readmore {font-size:18px; font-weight:bold;}

.eventcard { max-width:700px; padding:10px; margin:20px; background:#fff; overflow:hidden;}
.eventcard { -ms-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg);}
.chairnum {font-size:30px;}



/* BoxStyles */
.boxcard {float: left; width:26%; padding:1%; margin:2%; background:#fff; overflow:hidden;}
.boximage {position:relative; margin-bottom:8px; overflow:hidden; background:#ccc;}
.imgratio {position:relative; z-index:0;}
.imgholder {position:absolute; display:block; top:0; left:0; overflow:hidden; z-index:1;}
.imgholder img {position:relative; width:100%;}


.boxtitle {font-size:19px; line-height:30px}
.boxtext {height:170px; overflow-y:scroll; overflow-x:hidden; margin-bottom:10px; }
.boxlink {display:block; color:#fff; padding:5px; font-weight:bold; text-align: center; background:#356541;}
.boxlink:hover {background:#147d37}

.tabbar {font-size:28px; padding: 20px 0 10px; clear:both; }
.morelink {float:right; font-size:20px; margin:2px 6% 0 0;}
.eventdata {margin-bottom:8px; color:#111;}
.nextdate {font-size:19px;}

/* Box angles */
.angle1 {}
.angle2{ -ms-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); transform: rotate(-1deg);}
.angle3 { -ms-transform: rotate(-2deg); -webkit-transform: rotate(-1deg); transform: rotate(-2deg);}
.angle4 { -ms-transform: rotate(1deg); -webkit-transform: rotate(1deg); transform: rotate(1deg);}
.angle5 { -ms-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg);}


/* Featured post */
.postcard { max-width:800px; padding:10px; margin:20px; background:#fff; overflow:hidden;}
.postimage {position: absolute; top: 0; left: 0; width: 40%; height: 93%;  margin: 2%; overflow: hidden;}
.posttitle {font-size:26px; margin-top:10px;}
.posttext {width:55%; float:right;}
.btn-default {margin-top:27px!important; color:#fff!important; padding:6px 10px!important; font-weight:bold!important; background:#356541!important;}
.singlepage img {margin-bottom:10px;}

/* Reservation form */
.map {float:left; width:55%; height:370px; background:#eee;}
.reservationtext {margin:20px 0 20px 0;}
.eventtext {float:right; width:43%; font-size:17px;}
.eventtitle {margin:5px 0 10px 0;}
.eventdate {display:block; margin-bottom:20px; font-size:19px;}

/* Footer Styles */
.helpboxes {position:relative; height:270px;}
.helpbox {position:absolute; width:260px; height:195px; padding:10px; background:#fff; cursor:pointer;}
.inzamelen {top:10px; left:2%; -ms-transform: rotate(1deg); -webkit-transform: rotate(1deg); transform: rotate(1deg);}
.koken {top:30px; left:33%; -ms-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); transform: rotate(-1deg);}
.eten {top:20px; left:66%; -ms-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg);}
.helpbox:hover {opacity:0.9;}
.helpimg {display:block; height:160px; overflow:hidden; margin-bottom:10px;}

/* Footer Styles */
.footer {position:relative; clear:both; height:300px; background:url(images/footer.jpg);}
.sponsors {width:500px; position:absolute; right:15%; top:40px; background:#fff; padding:15px;}
.sponsors h3 {color:#888;}
.logos {display:block; height:50px; float:left; cursor:pointer;}
.logos:hover {background:rgba(255,255,255,0.5)}
.logo1 {width:40%;}
.logo2{width:40%;}
.logo3 {width:40%;}

.followus { position: fixed; left: 10px; top:45%; z-index: 10;}


/* Form Styles */
.timer {margin-top:10px;}
.timer div {display: inline-block; padding-right:40px; font-size: 70px;}
.timer span {display: block; font-size: 20px;}
.caldera-grid {margin-top:10px;}
.rsvpmessage {color:#356541; font-size:17px; font-weight:bold; margin: 10px 0 20px 0;}

.qtranxs-available-languages-message {display: none;}


/* Responsive Styles*/

@media (max-width: 800px) {
    .description {font-size:18px;}
    .pagetitle {font-size:24px;}
}

@media (max-width: 1000px) {
    .plate {display:none;}
}

@media (max-width: 1100px) {
    .plate {right:-100px;}
}