/* GENERAL */
* { outline: 0; }
body { min-width: 960px; }
.hide { display: none; }
.inner { margin: 0 auto; position: relative }
.flexBox {
	/* --------------------- *
 	* The flexible box model *
 	* ---------------------- */
	
	display : -moz-box;
	display : -webkit-box;
	display : box;

	-moz-box-orient : horizontal;
	-moz-box-pack : center;
	-moz-box-align : center;
	
	-webkit-box-orient : horizontal;
	-webkit-box-pack : center;
	-webkit-box-align : center;
	
	box-orient : horizontal;
	box-pack : center;
	box-align : center;
}
img.left { margin: 0 20px 20px 0; }
img.right { margin: 0 0 20px 20px; }
p.error { margin: 20px 0; border: 1px solid #F00; padding: 10px; }
blockquote { margin: 1.12em 0 }
sup{ font-size:smaller;vertical-align:baseline;position:relative;bottom:0.33em}
h1 { font-size: 16px; text-transform: uppercase; margin: 0 0 15px 0; }
h2 { font-size: 13px; text-transform: uppercase; margin: 20px 0 10px 0; }
a { color: #FFF; }
a:hover { color: #CCC; }
div.right { float: right; }

/* HEADER */
header { float: left; width: 100%; height: 100px; position: relative; }
#logo { position: absolute; }
#headerLine { position: absolute; top: 95px; left: 0px; width: 146px; height: 5px; }
#btnWebshop { position: absolute; top: 50px; right: 0px; width: 50px; height: 50px; line-height: 50px; text-align: center }
#btnWebshop:hover { background-image: url('http://lib.browsbox.be/library/img/alpha/black_30.png'); }
#btnWebshop img { vertical-align: middle; }
#languages { float: right; margin-top: 15px; font-size: 12px; list-style: none; }
#languages li { display: inline; margin-left: 10px; text-transform: uppercase; }
#languages a:hover { text-decoration: none; }

/* MAIN */
#main { float: left; width: 100%; min-height: 700px; position: relative; padding-bottom: 55px; }
#main .inner { z-index: 5; }
#main .slideBg { position: absolute; top: 0px; left: 0px; width: 100%; min-height: 700px; background-position: top center; background-repeat: no-repeat }
#main .contentOverlay { position: absolute; top: 0px; left: 0px; width: 100%; background-image: url('http://lib.browsbox.be/library/img/alpha/black_80.png'); }

#main section { z-index: 6; position: absolute; top: 80px; left: 200px; width: 710px; height: 440px; }
#main section article {
	padding-right: 30px; 
	width: 680px; height: 440px; overflow: auto
}
#main section article .left { float: left; width: 300px; padding-right: 40px; }
#main section article .right { float: right; width: 320px; }
#main section article ul { list-style: disc; margin: 0 0 0 15px; line-height: 150% }
#main section article ol { text-indent: 0px; list-style-type:decimal; padding: 0px; margin: 0 0 0 30px; }
#main section article ol li { list-style-position:outside; padding: 0px; }
#main section article .pageImages { margin: 30px 0 0 0; }
#main section article .pageImages a { display: table-cell; width: 60px; text-align: left; height: 60px; padding-right: 5px; vertical-align: middle; }
#main section article .pageImages a img { line-height: 60px; }

/* CONTENT */
#main .content { padding-top: 395px; position: relative }

/* NAVIGATION */
#main nav { position: absolute; top: 0px; left: 0px; width: 146px; padding: 18px 0; z-index: 10 }
#main nav .mainnav a { display: block; margin: 0 10px; padding: 11px 0; background: url('http://www.keukeneiland.be/templates/keukeneiland/images/bgMainnavLi.gif') repeat-x bottom left; }
#main nav .mainnav .last a, #main nav .mainnav a.parent.active { background: none; }
#main nav .mainnav .subnav { padding: 10px 0; background-image: url('http://www.keukeneiland.be/templates/keukeneiland/images/bgSubnav.gif'), url('http://www.keukeneiland.be/templates/keukeneiland/images/bgMainnavLi.gif'); background-position: left top, left bottom; background-repeat: repeat-x; }
#main nav .mainnav .subnav a { background: none; padding: 5px 0; }



/* SLIDER */
#main .slide { float: left; position: relative; padding: 15px 30px 75px 30px; width: 880px; min-height: 135px; background-image: url('http://lib.browsbox.be/library/img/alpha/black_60.png'); }
#main .slide p { display: inline; } 
#main .slide .more { display: inline-block; text-align: center; line-height: 45px; width: 124px; font-size: 60px; background-image: url('http://www.keukeneiland.be/templates/keukeneiland/images/bgGradient.png'); background-repeat: repeat-x;  -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 5px 5px 5px #000; -webkit-box-shadow: 5px 5px 5px #000; box-shadow: 5px 5px 5px #000; }
#main .slide .more:hover { background-image: url('http://www.keukeneiland.be/templates/keukeneiland/images/bgGradientHover.png'); }
#main .slide .slideLink { position: absolute; top: 0px; left: 0px; width: 940px; height: 175px; display: block; }
#slidePager { position: absolute; top: 25px; right: 0px; }
#slidePager .page { display: inline-block; width: 8px; height: 8px; margin-right: 7px; -moz-box-shadow: inset 3px 3px 3px #ccc; -webkit-box-shadow: inset 3px 3px 3px #ccc; box-shadow: inset 3px 3px 3px #ccc; }
#slidePager .page.active { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }

/* BANNERS */
.banners { float: left; margin-top: -50px; margin-bottom: 35px; }
.banners.extraSpace { margin-top: 180px; }
.banners .banner { position: relative; -moz-box-shadow: 0 0 5px #333; -webkit-box-shadow: 0 0 5px #333; box-shadow: 0 0 5px #333; width: 220px; height: 205px; background: #FFF;  }
.banners .banner.promo { width: 460px; }
.banners .bannerImg { position: absolute; top: 0px; left: 0px; }
.banners .bannerTxt { position: absolute; top: 0px; left: 210px; }
.banners .bannerTxt .bannerContent { width: 100%; height: 145px; }
.banners .bannerTxt p { display: block; width: 240px }
.banners .bannerMore { display: block; position: absolute; bottom: 0px; left: 0px; width: 200px; height: 60px; background-image: url('http://lib.browsbox.be/library/img/alpha/black_80.png'); line-height: 60px; padding-left: 20px; }
.banners .banner.promo .bannerMore { width: 440px; }
.banners .bannerMore .plus { position: absolute; top: 0px; right: 20px; }
.banners .albumImage { display: block; width: 220px; height: 205px; text-align: center; background: #FFF; /*vertical-align: middle;*/ }
/*.banners .albumImage img { line-height: 205px; }*/
	
/* NEWS ON HOME */
.newsOnHome { width: 460px !important; }
.newsOnHome span { display: inline; padding: 9px 40px 5px 20px; line-height: 52px; background: url('http://www.keukeneiland.be/templates/keukeneiland/images/ico_news.png') no-repeat top right; } 
.newsOnHome .newsItem {float: left; display: block; width: 100%; margin: 12px 0; }
.newsOnHome .newsItem .newsItemDate { display: block; width: 62px; float: left; padding: 0 0 7px 0; }
.newsOnHome .newsItem .newsItemDate .month { opacity: 0.3; margin-bottom: 4px; }
.newsOnHome .newsItem .newsItemContent { display: block; width: 360px; float: left; padding-left: 20px; }

/* CONTACT ON HOME */
.contactOnHome h1 { margin-bottom: 12px; }
.contactOnHome h1 span { display: inline; padding: 9px 50px 5px 20px; line-height: 52px; background: url('http://www.keukeneiland.be/templates/keukeneiland/images/ico_contact.png') no-repeat center right; } 
.contactOnHome p { padding-left: 20px; }
.contactOnHome a { text-decoration: none; }
.contactOnHome p span { display: inline-block; width: 12px; }
.contactOnHome h1.openingHours { margin: 30px 0 15px 20px; }
.contactOnHome .tblOpeningHours { margin-left: 20px; }
.contactOnHome .tblOpeningHours td { vertical-align: top; }
.contactOnHome .tblOpeningHours .label { width: 72px; }
.contactOnHome .directions { margin-top: 65px; }
.tblOpeningHours .point { padding: 0 5px; }
.directions { display: block; margin-top: 10px; padding: 0 0 0 72px; line-height: 62px; background: url(http://lib.browsbox.be/library/icons/gMaps.png) no-repeat top left; text-transform: uppercase; text-decoration: none }
.contactOnHome .socialMedia { margin: 30px 0 0 20px; }
.routebutton { display: inline-block; margin: 20px 0 0 0; padding: 3px 8px; font-weight: bold; text-transform: uppercase; cursor: pointer; border: none; color: #FFF !important; text-transform: uppercase; -moz-border-radius: 3px; border-radius: 3px; text-decoration: none; }

/* FOOTER */
footer { float: left; width: 100%; padding: 20px 0; }
footer #partners li { float: right; line-height: 150px; margin-left: 50px; }

/* NEWS */
/* ---- */
.news { width: 100%}
.newsDate { margin:0px 0 20px 0; padding: 7px 0 0 0; }
.newsTitle { padding-right: 200px; }

/* DATE LIST */
.dateList { float: left; width: 100%; margin: 0 0 5px 0; }
.dateList .date { float: left; width: 100px; }
.dateList .desc { float: left; width: 500px }
.linkmore { float: right; margin-top: 5px; margin-bottom: 15px; padding:0; }

/* PRODUCTSADV */
/* ----------- */
.catalog .catalogItem { float: left; margin: 0px; width: 100%; padding: 15px 0 25px 0}
.catalog .catalogTitle { float: right; width: 500px; margin-bottom: 15px; }
.catalog .catalogContent { float: right; width: 500px; margin-bottom: 15px; }
.catalog .catalogLink { float: right; width: 500px; }
.catalog .catalogLink a.productLink { padding: 2px 0 2px 22px; line-height: 20px; background: url('http://www.keukeneiland.be/templates/keukeneiland/images/ico_link.png') no-repeat center left; }
.catalog .catalogLink a.productFile { padding: 2px 0 2px 22px; line-height: 20px; background: url('http://www.keukeneiland.be/templates/keukeneiland/images/ico_pdf.png') no-repeat center left; }
.catalog .catalogImage { float: left; width: 175px; text-align: left; padding: 0; min-height: 30px; position: relative; }
.catalog .catalogContent.fullWidth, .catalog .catalogTitle.fullWidth, .catalog .catalogLink.fullWidth { float: left; width: 100%; }


/* CONTACTFORM */
/* ----------- */
#frmContactform { float: left; display: block; width: 100%; margin: 35px 0 0 0; }
#frmContactform h2 { margin-bottom: 10px; }
#contactform { float: left; display: block; width: 100%; margin: 0 0 35px; }
#contactform.topMargin { margin-top: 25px; }
#contactform #spcheck { display: none; }
#contactform input.ctext, form#contactform textarea { display: block; font: 11px Verdana, Arial, Helvetica, sans-serif; padding: 3px 5px; margin: 0; width: 235px; background: none; background: none; color: #FFF; border: 1px solid #CCC; -moz-border-radius: 3px; border-radius: 3px; }
#contactform input.check { display: block; padding: 0px; margin: 0; width: auto; border: none; background: none; }
#contactform .invalid { border: 1px solid #C00; }
#contactform input.button { margin: 20px 0 0 0; padding: 3px 5px;  width: 100px; font-weight: bold; text-transform: uppercase; cursor: pointer; border: none; color: #FFF; text-transform: uppercase; -moz-border-radius: 3px; border-radius: 3px;}
#contactform .tblCfOpt { width: 100%; }
#contactform .tblCfOpt td { vertical-align: top; padding: 0 0 5px 0; }
#contactform .tblCfOpt td.optLabel { width: 150px; }
#contactform .tblCfOpt td.optValue { width: 260px; }
#contactform .tblCfOpt td.optRequired span.missing { background: url('/library/icons/alert_12x12.png') no-repeat 0 6px; display: inline-block; color: #C00; font-size: 10px; text-transform: uppercase; padding: 5px 0 3px 18px; }
#contactform .tblCfOpt td.optLabel.invalid { border: none; color: #C00; }
#contactform .tblCfOpt .tblCfOpts td { padding: 0 15px 2px 0; }
#contactform .tblCfOpt .tblCfOpts td.chkBox { vertical-align: middle; }
#contactform p.smaller { margin-top: 15px; }
#contactform .informativeText { margin: 0 0 5px 0; }

.container { float: left; width: 100%; margin-bottom: 15px }

/* RESPONSIVE */
/* ---------- */
@media only screen and (min-width: 940px){
	/* big landscape tablets, laptops, and desktops */ 
	.tablet-only, .mobile-only, .handheld-only { display: none !important; }
}
@media only screen and (max-width: 939px){
	body { min-width: 100%; }
	header { height: 54px; }
	.desktop-only, .mobile-only { display: none; }
	.navbar-inverse { background: #333; height: 54px; }
	.nav-collapse { display: none; background: none repeat scroll 0 0 rgba(60, 60, 60, 0.9); padding: 15px 10px; position: absolute; top: 57px; width: 100%; z-index: 1000; }
	.nav-collapse a { text-decoration: none; line-height: 220%; font-weight: bold; }
	.nav-collapse .subnav { margin-left: 15px }
	.nav-collapse .subnav a { color: #CCC; }
	#logo { left: auto !important; right: 0px !important; top: 0px !important; height: 54px; line-height: 54px; vertical-align: middle; text-align: center; max-width: 30%; }
	#logo img { width: auto !important; height: auto !important; max-height: 90%; max-width: 90%; vertical-align: middle; }
	#slidePager { display: none; }
	#main { padding-top: 365px; }
	#main.lessPadding { padding-top: 265px; }
	#main .content { padding-top: 0px; }
	#main .slideBg { position: absolute; top: 0px; height: 365px; background-size: cover; min-height: 365px; border-top-style: solid; border-top-width: 3px; border-bottom-style: solid; border-bottom-width: 3px; }
	#main .slideBg.smaller { height: 265px; min-height: 265px;  }

	.newsOnHome, .contactOnHome { float: left; width: 45% !important; padding-top: 35px; }	
	.newsOnHome h1 { margin-left: 20px; padding-left: 0px; }
	.newsOnHome span { padding-left: 0px; }
	.newsOnHome .newsItem .newsItemDate { width: 25% }
	.newsOnHome .newsItem .newsItemContent { padding-left: 5%; width: 68%; }
	.contactOnHome { float: right; margin-right: 5% !important; }
	.contactOnHome .tblOpeningHours .label { width: 20% }
	.contactOnHome .tblOpeningHours .point { display: none; }
	.contactOnHome .col2.right { float: left; margin: 0px; }
	.contactOnHome h1 { border-bottom: 1px solid #CCCCCC; }
	.contactOnHome p, .contactOnHome h1 span { padding-left: 0px; }
	.contactOnHome .tblOpeningHours, .contactOnHome h1.openingHours, .contactOnHome .socialMedia { margin-left: 0px !important; }
	.contactOnHome h1.openingHours { line-height: 52px; padding: 9px 0px 5px 0px; border-bottom: 1px solid #CCCCCC;  }
	.contactOnHome p a:hover { text-decoration: underline; }
	.newsOnHome span, .contactOnHome h1 span { background: none; }
	.content .fa { float: right; margin-top: 10px; font-size: 25px; }
	/*header, footer, #headerImg { display: none; }*/
	.route { margin-top: 20px; float: left; width: 100% }
	.route .directions { display: inline-block; width: 25%; background-position: top center; background-size: 50% auto; line-height: 52px; border-right-style: solid; border-right-width: 1px; padding: 0px }
	.route .routeTxt { padding-left: 5%; text-decoration: none }
	.route .routeTxt:hover { text-decoration: underline; }

	.btn-navbar { background: transparent; border: none; color: white; margin: 18px 0 0 10px; display: inline-block; font-size: 15px; text-decoration: none; }
	.btn-navbar:hover { color: #CCC; }
	.btn-navbar .fa { margin-right: 6px; }

	.banners { width: 100%; background: white; border-top: 1px solid #ccc; margin: 0px; padding: 60px 0; }
	.banners .banner { width: 28% !important; float: left; overflow: hidden; margin-right: 5% }
	.banners .banner.promo { width: 28%; }
	.banners .banner:first-child { margin-left: 20px !important; }
	.banners .banner.promo .bannerMore { width: 100% }
	.banners .albumImage { width: 100% }
	.banners .albumImage img { width: 100%; height: auto; }
	.banners .bannerMore { width: 100%; padding-left: 0px; text-align: center; background-image: none; opacity: 0.8 }
	.banners .bannerMore:hover { opacity: 0.9; color: white }
	.banners .bannerImg { width: 100% }
	footer ul { margin-right: 20px; }
	footer ul li { line-height: 70px; vertical-align: middle; }
	footer ul li img { max-height: 70px; vertical-align: middle;  }

	#main .contentOverlay { display: none; }
	#main section { height: auto; position: relative; top: 0px; left: 0px; width: 100%; background: #333; color: #fff;  }
	#main section article { height: auto; padding: 30px 2.5%; width: 95%;  }
	.banners.extraSpace { margin-top: 0px; }

	#main section article a { color: #fff; }
	#main section article a:hover { color: #ccc; }
	.newsDate { color: #BBB }
	.dateList .date { width: 15%; }
	.dateList .desc { width: 85%; }
	.catalog .catalogContent { color: #e1e1e1;}

	#main section article .left { width: 45%; padding-right: 5% }
	#main section article .right { width: 50%; }

	.catalog .catalogImage { width: 20% }
	.catalog .catalogImage img { max-width: 80%; max-height: auto !important }
	.catalog .catalogTitle { width: 80% }
	.catalog .catalogContent { width: 80% }
	.catalog .catalogLink { width: 80% }
}


@media only screen and (max-width: 480px){
	.tablet-only { display: none; }
	.mobile-only { display: block; }
	/*#main .slideBg { height: 265px; min-height: 265px; }
	#main .slideBg.smaller { display: none; }*/
	.newsOnHome, .contactOnHome { width: 95% !important; }	

	.banners { padding: 0px 0; }
	.banners .banner { width: 33% !important; border-right: 1px solid #CCC; height: 125px; margin-right: 0%; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;  }
	.banners .banner.promo { width: 33%; }
	.banners .banner.promo .bannerMore { width: 100% }
	.banners .banner:first-child { width: 33% !important; margin-left: 0px !important; }
	.banners .banner:last-child { border: none;}
	.banners .bannerMore { height: 40px; line-height: 40px; }

	.newsOnHome h1, .contactOnHome  { margin-left: 2.5%; }
	.newsOnHome .newsItem .newsItemDate, .route .directions { width: 20%; }
	.contactOnHome .small, .contactOnHome .col2.right { float: left; margin-left: 2.5%; }

	.dateList .date { width: 100%; }
	.dateList .desc { width: 100%; margin-bottom: 20px; }

	#main section article .left { width: 100%; padding-right: 0 }
	#main section article .right { width: 100%; }
	#main section article .directions { margin-bottom: 30px; }

	.route { margin-left: 2.5% }
	.contactOnHome .directions { margin-top: 0px; }
	.newsOnHome .newsItem .newsItemDate, .route .directions { width: 16%; }
	.route .directions {
	    background-position: left top;
	    background-size: 70% auto;
	}
	.newsTitle { float: left; width: 100%; padding-right: 0px; }
	.catalog .catalogImage img { max-height: 100%; height: auto; }
	footer #partners li { margin-left: 5px;}
}

@media only screen and (max-width: 320px){
	.newsOnHome .newsItem .newsItemDate .month { font-size: 9px; }
	.newsOnHome .newsItem .newsItemDate .day { font-size: 25px; }
	.newsOnHome .newsItem .newsItemDate { width: 27% }
	#main { padding-top: 205px; }
	#main.lessPadding { padding-top: 0px; }
	#main .slideBg { height: 205px; min-height: 205px; }
	#main .slideBg.smaller { display: none; }
	
	.newsOnHome .newsItem .newsItemContent { padding-left: 5%; width: 66%; }
	.route .directions { line-height: 36px; height: 36px;  }
	.banners .banner { height: 80px; line-height: 80px; }
	.banners .bannerMore { font-size: 11px !important; height: 30px; line-height: 30px; }
	footer ul { margin-right: 5px; }
	footer ul li { line-height: 40px; vertical-align: middle; }
	footer ul li img { max-height: 40px; width: auto !important; height: auto !important; max-width: 30%; vertical-align: middle;  }

	#contactform .tblCfOpt td.optLabel { width: 30%; }
	#contactform .tblCfOpt td.optValue { width: 70% }
	#contactform input.ctext, form#contactform textarea { width: 90%; }

}
