File: D:/HostingSpaces/SBogers10/verrassendveel.komma.pro/wwwroot/css/style.css
@charset "UTF-8";
/*
CSS Document
Mike Ontwerpt voor de Langstraat
www.mikeontwerpt.nl
2012
*/
/* fonts */
@font-face { font-family: 'Andes'; src: url('../fonts/andesbold.eot'); src: url('../fonts/andesbold.eot?#iefix') format('embedded-opentype'), url('../fonts/andesbold.woff') format('woff'),
url('../fonts/andesbold.ttf') format('truetype'), url('../fonts/andesbold.svg#andesbold') format('svg'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'KyrialDisplayPro'; src: url('../fonts/kyrialdisplayproreg.eot'); src: url('../fonts/kyrialdisplayproreg.eot?#iefix') format('embedded-opentype'), url('../fonts/kyrialdisplayproreg.woff') format('woff'),
url('../fonts/kyrialdisplayproreg.ttf') format('truetype'), url('../fonts/kyrialdisplayproreg.svg#kyrialdisplayproreg') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'KyrialDisplayPro'; src: url('../fonts/kyrialdisplayprobold.eot'); src: url('../fonts/kyrialdisplayprobold.eot?#iefix') format('embedded-opentype'), url('../fonts/kyrialdisplayprobold.woff') format('woff'),
url('../fonts/kyrialdisplayprobold.ttf') format('truetype'), url('../fonts/kyrialdisplayprobold.svg#kyrialdisplayprobold') format('svg'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'KyrialDisplayPro'; src: url('../fonts/kyrialdisplayproregit.eot'); src: url('../fonts/kyrialdisplayproregit.eot?#iefix') format('embedded-opentype'), url('../fonts/kyrialdisplayproregit.woff') format('woff'),
url('../fonts/kyrialdisplayproregit.ttf') format('truetype'), url('../fonts/kyrialdisplayproregit.svg#kyrialdisplayproregit') format('svg'); font-weight: normal; font-style: italic; }
/* general */
html{ height: 100%; }
body{ overflow-y: scroll; margin: 0; color: #777574; font-family: 'KyrialDisplayPro', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 14px; line-height: 24px; }
h1{ font-family: 'Andes', Helvetica, Arial; }
h1{ color: #72b660; margin: 0 0 3px -16px; font-size: 24px; }
h2{ font-size: 18px; }
h3{ color: #72b660; margin: 0 0 16px 0; font-size: 20px; }
a{ color: #72b660; text-decoration: none; }
hr{ display: block; height: 1px; background: #C9C8C7; border: none; }
p{ margin: 0 0 16px 0; }
img{ border: none; }
/* structure */
div#background-bar{ position: absolute; left:0; z-index: 1; width: 100%; height: 240px; background: #72b660 url(../images/structure/bg_header.jpg); background-size: cover; }
div#main-container{ position: relative; margin: 0 auto; z-index: 2; width: 992px; }
div#header{ width: 992px; height: 128px; }
div#main-menu{ position: relative; z-index: 100; margin: 0 4px 0 0; width: 988px; height: 32px;font-family: 'Andes', Helvetica, Arial; font-weight: bold; text-align: right; letter-spacing: 0.1em }
div#content{ position: relative; width: 992px; min-height: 748px; }
div.shadow-left{ position: absolute; top: 176px; left: -14px; width: 16px; height: 200px; background: url(../images/structure/langstraat_sprite.png) -280px -24px no-repeat; z-index: -1; }
div.shadow-right{ position: absolute; top: 176px; right: -14px; width: 16px; height: 200px; background: url(../images/structure/langstraat_sprite.png) -296px -24px no-repeat; z-index: -1; }
div#jsbox{ position: absolute; height: 0; width: 0;}
/* buttons */
a.btn-brown-244{ position: relative; display: block; padding: 5px 16px; width: 216px; height: 26px;
background: url(../images/structure/langstraat_sprite.png) -8px -200px; color: #fff; font-family: 'Andes', Helvetica, Arial; font-weight: bold; font-size: 16px; }
a.btn-orange-248{ position: relative; display: block; padding: 18px 16px; width: 224px; height: 52px;
background: url(../images/structure/langstraat_sprite.png) -340px -16px; color: #fff; font-family: 'Andes', Helvetica, Arial; font-weight: bold; font-size: 22px; }
/*a.btn-green-288{ position: relative; display: block; padding: 5px 16px; width: 264px; height: 27px;
background: url(../images/structure/langstraat_sprite.png) -8px -240px; color: #fff; font-family: 'Andes', Helvetica, Arial; font-weight: bold; font-size: 16px; }*/
a.btn-facebook{ position: relative; display: inline-block; width: 36px; height: 36px; background: url(../images/structure/langstraat_sprite.png) -340px -144px; }
a.btn-twitter{ position: relative; display: inline-block; width: 36px; height: 36px; background: url(../images/structure/langstraat_sprite.png) -388px -144px; }
.btn-large-arrow{ position: absolute; right: 24px; top: 24px; }
.btn-arrow{ position: absolute; right: 16px; top: 12px; z-index: 10 }
/*button-hovers*/
a.hover-button{ display: block; position: relative; width: 292px; height: 37px; }
a.hover-button.large{ height: 88px; }
a.hover-button.w248{ width: 256px; }
a.hover-button.w306{ position: absolute;width: 306px; }
a.hover-button.social{ display: inline-block; width: 39px; height: 37px; }
a.hover-button.socialtop{ position: absolute;display: inline-block; width: 39px; height: 37px; }
a.hover-button span.btn-text{ position: absolute; left: 16px; top: 5px; color: #fff; font-family: 'Andes', Helvetica, Arial; font-weight: bold; font-size: 16px; z-index: 10 }
a.hover-button span.btn-text.large{ top: 20px; font-size: 22px;}
a.hover-button span.btn-arrow{ position: absolute; right: 16px; top: 12px; z-index: 10 }
a.hover-button span.btn-arrow.large{ right: 24px; top: 24px; }
a.hover-button span.btn-text-back{ position: absolute; left: 40px; top: 5px; color: #fff; font-family: 'Andes', Helvetica, Arial; font-weight: bold; font-size: 16px; z-index: 10 }
a.hover-button span.btn-arrow-back{ position: absolute; left: 16px; top: 12px; z-index: 10 }
a.hover-button span.btn-green-288{ display: block; position: absolute;width: 292px; height: 36px; background: url(../images/structure/langstraat_sprite.png) -8px -237px; z-index: 1 }
a.hover-button span.btn-darkgreen-288{ display: block; position: absolute;width: 292px; height: 36px; background: url(../images/structure/langstraat_sprite.png) -8px -276px; z-index: 2 }
a.hover-button span.hover{ position: absolute; opacity: 0; z-index: 5}
a.hover-button span.btn-orange-248{ display: block; position: absolute; width: 248px; height: 88px; background: url(../images/structure/langstraat_sprite.png) -340px -16px; z-index: 1 }
a.hover-button span.btn-darkorange-248{ display: block; position: absolute; width: 248px; height: 88px; background: url(../images/structure/langstraat_sprite.png) -600px -16px; z-index: 2 }
a.hover-button span.btn-green-248{ display: block; position: absolute; width: 256px; height: 37px; background: url(../images/structure/langstraat_sprite.png) -340px -104px; z-index: 1 }
a.hover-button span.btn-darkgreen-248{ display: block; position: absolute; width: 256px; height: 37px; background: url(../images/structure/langstraat_sprite.png) -600px -104px; z-index: 2}
a.hover-button span.btn-facebook{ display: block; position: absolute; width: 39px; height: 37px; background: url(../images/structure/langstraat_sprite.png) -340px -144px; z-index: 1}
a.hover-button span.btn-facebookhover{ display: block; position: absolute; width: 39px; height: 37px; background: url(../images/structure/langstraat_sprite.png) -432px -144px; z-index: 2}
a.hover-button span.btn-twitter{ display: block; position: absolute; width: 39px; height: 37px; background: url(../images/structure/langstraat_sprite.png) -388px -144px; z-index: 1}
a.hover-button span.btn-twitterhover{ display: block; position: absolute; width: 39px; height: 37px; background: url(../images/structure/langstraat_sprite.png) -476px -144px; z-index: 2}
a.hover-button span.btn-orange-306{ display: block; position: absolute; width: 320px; height: 88px; background: url(../images/structure/langstraat_sprite.png) -340px -180px; z-index: 1 }
a.hover-button span.btn-darkorange-306{ display: block; position: absolute; width: 320px; height: 88px; background: url(../images/structure/langstraat_sprite.png) -668px -180px; z-index: 2 }
/* span */
/*button-hovers*/
span.hover-button{ display: block; position: relative; width: 292px; height: 37px; }
span.hover-button.large{ height: 88px; }
span.hover-button.w248{ width: 256px; }
span.hover-button.w306{ position: absolute;width: 306px; }
span.hover-button.social{ display: inline-block; width: 39px; height: 37px; }
span.hover-button.socialtop{ position: absolute;display: inline-block; width: 39px; height: 37px; }
span.hover-button span.btn-text{ position: absolute; left: 16px; top: 5px; color: #fff; font-family: 'Andes', Helvetica, Arial; font-weight: bold; font-size: 16px; z-index: 10 }
span.hover-button span.btn-text.large{ top: 20px; font-size: 22px;}
span.hover-button span.btn-arrow{ position: absolute; right: 16px; top: 12px; z-index: 10 }
span.hover-button span.btn-arrow.large{ right: 24px; top: 24px; }
span.hover-button span.btn-text-back{ position: absolute; left: 40px; top: 5px; color: #fff; font-family: 'Andes', Helvetica, Arial; font-weight: bold; font-size: 16px; z-index: 10 }
span.hover-button span.btn-arrow-back{ position: absolute; left: 16px; top: 12px; z-index: 10 }
span.hover-button span.btn-green-288{ display: block; position: absolute;width: 292px; height: 36px; background: url(../images/structure/langstraat_sprite.png) -8px -237px; z-index: 1 }
span.hover-button span.btn-darkgreen-288{ display: block; position: absolute;width: 292px; height: 36px; background: url(../images/structure/langstraat_sprite.png) -8px -276px; z-index: 2 }
span.hover-button span.hover{ position: absolute; opacity: 0; z-index: 5}
span.hover-button span.btn-orange-248{ display: block; position: absolute; width: 248px; height: 88px; background: url(../images/structure/langstraat_sprite.png) -340px -16px; z-index: 1 }
span.hover-button span.btn-darkorange-248{ display: block; position: absolute; width: 248px; height: 88px; background: url(../images/structure/langstraat_sprite.png) -600px -16px; z-index: 2 }
span.hover-button span.btn-green-248{ display: block; position: absolute; width: 256px; height: 37px; background: url(../images/structure/langstraat_sprite.png) -340px -104px; z-index: 1 }
span.hover-button span.btn-darkgreen-248{ display: block; position: absolute; width: 256px; height: 37px; background: url(../images/structure/langstraat_sprite.png) -600px -104px; z-index: 2}
span.hover-button span.btn-facebook{ display: block; position: absolute; width: 39px; height: 37px; background: url(../images/structure/langstraat_sprite.png) -340px -144px; z-index: 1}
span.hover-button span.btn-facebookhover{ display: block; position: absolute; width: 39px; height: 37px; background: url(../images/structure/langstraat_sprite.png) -432px -144px; z-index: 2}
span.hover-button span.btn-twitter{ display: block; position: absolute; width: 39px; height: 37px; background: url(../images/structure/langstraat_sprite.png) -388px -144px; z-index: 1}
span.hover-button span.btn-twitterhover{ display: block; position: absolute; width: 39px; height: 37px; background: url(../images/structure/langstraat_sprite.png) -476px -144px; z-index: 2}
span.hover-button span.btn-orange-306{ display: block; position: absolute; width: 320px; height: 88px; background: url(../images/structure/langstraat_sprite.png) -340px -180px; z-index: 1 }
span.hover-button span.btn-darkorange-306{ display: block; position: absolute; width: 320px; height: 88px; background: url(../images/structure/langstraat_sprite.png) -668px -180px; z-index: 2 }
/* icons */
span.arrow{ display: inline-block; width: 11px; height: 9px; background: url(../images/structure/langstraat_sprite.png) -160px -56px; }
span.arrow-back{ display: inline-block; width: 11px; height: 9px; background: url(../images/structure/langstraat_sprite.png) -160px -72px; }
span.large-arrow-circle{ display: inline-block; width: 32px; height: 32px; background: url(../images/structure/langstraat_sprite.png) -176px -56px; }
span.arrow-circle{ display: inline-block; position: relative; top: 3px; margin-right: 8px; width: 16px; height: 16px; background: url(../images/structure/langstraat_sprite.png) -216px -56px; }
.small-facebook{ display: inline-block; cursor: pointer; position: relative; top: 4px; margin-right: 8px; width: 16px; height: 16px; background: url(../images/structure/langstraat_sprite.png) -232px -56px; }
a.small-twitter{ display: inline-block; position: relative; top: -6px; margin-right: 8px; width: 16px; height: 16px; background: url(../images/structure/langstraat_sprite.png) -248px -56px; }
span.home-house{ display: inline-block; position: absolute; right: 8px; top: 16px; width: 16px; height: 16px; background: url(../images/structure/langstraat_sprite.png) -176px -128px; }
/* header */
#logo{ display: block; position: absolute; z-index: 10000; margin-top: 20px; }
#logo img{ width: 100% }
div#pay-off{ position: absolute; left: 148px; top: 56px; width: 384px; color: #fff; text-shadow: 2px 2px rgba(0,0,0,0.3); font-family: 'Andes', Helvetica, Arial; font-weight: bold; font-size: 28px; line-height: 32px; }
div#route-btn{ position: absolute; right: 0; top: 56px; }
.route-btn-label{ position: absolute; right: 0; top: 26px; font-size: 20px; font-weight: 700; color: #fff; text-shadow: 2px 2px rgba(0,0,0,0.3) }
/* main menu */
ul#main-menu{ margin: 0; padding: 0; }
ul#main-menu li{ float: right; display: inline-block; cursor: pointer; }
ul#main-menu li a{ display: block; padding: 6px 0 0 0; width: 124px; height: 26px; background: url(../images/structure/langstraat_sprite.png) -16px -16px; color: #777574; text-align: center; list-style: none; letter-spacing: 0; }
ul#main-menu li.active a{ display: block; padding: 6px 0 0 0; width: 124px; height: 26px; background: url(../images/structure/langstraat_sprite.png) -144px -16px; color: #fff; text-align: center; list-style: none; }
li.clear{ list-style: none; height: 0; width: 0; clear: both;}
/* footer */
div#footer-bar{ margin-left: 8px; width: 992px; height: 24px; background: url(../images/structure/langstraat_sprite.png) -8px -342px;}
div#footer{ margin-left: 16px; width: 952px; height: 218px; background: #4D4D4D; color: #E6E6E6; }
div#footer a{ color: #E6E6E6; text-decoration: underline; }
div.footer-shadow{ width: 952px; height: 16px; background: url(../images/structure/langstraat_sprite.png) -8px -324px; }
div.footer-column{ position: relative; left: 116px; float: left; margin-right: 20px; width: 184px; height: 160px; }
div.footer-column.contact{ width: 150px; }
div.footer-column h2{ color: #E6E6E6;}
div#footer h2 a { text-decoration: none}
div.footer-more{ position: absolute; bottom: 0; }
/* content */
div.mid-content-container{ position: relative; margin: 0 124px; padding: 56px 0; width: 748px; }
hr.mid-content{ margin: 0 0 24px -16px; width: 776px; }
div.pagetop{ position: absolute; left: 0; z-index: -1; width: 992px; height: 320px; background: url(../images/structure/bg-pagetop.jpg) repeat-x;}
div.page-column{ position: relative; float: left; margin-top: 24px; margin-bottom: 24px; width: 352px; }
div.page-control{ color: #72b660; margin: 0 0 16px 0; font-size: 20px;width: 496px; }
span.page-control-prev{ float: left; cursor: pointer; }
span.page-control-next{ float: right; cursor: pointer; }
/* home */
div#banner-holder{ padding: 8px; width: 976px; height: 304px; background: url(../images/structure/bg-banner.jpg) repeat-x; }
div#banner-image{ width: 976px; height: 304px; background: #fff; }
div.banner-shadow{ margin-bottom: -24px; width: 992px; height: 24px; background: url(../images/structure/langstraat_sprite.png) 0 -376px; }
div.home-text-column{ float: left; margin: 0 128px 0 0; width: 372px; }
div.home-btn-column{ float: left; width: 248px; }
.home-facebook-btn{ position: relative; margin: 4px 4px 0 0; }
.home-twitter-btn{ position: relative; top: -4px;margin: 0 4px 0 0}
.home-facebook-link a{ position: relative; top: -14px; color: #777574; }
.home-twitter-link a{ position: relative; top: -22px; color: #777574; }
.top-facebook-btn{ position: absolute; top: 44px; right: 8px; margin: 0; z-index: 10; }
.top-twitter-btn{ position: absolute; top:44px; right: 48px; margin: 0; z-index:10;}
/* home banner */
div.large-banner-mask{ position: relative; overflow: hidden; width: 976px; height: 304px; }
div.large-banner-holder{ position: absolute; width: 976px; height: 304px; opacity: 0; filter:alpha(opacity=0); }
div.quote-holder{ position: absolute; bottom: 16px; width: auto; height: 72px; text-align: right; color: #72b660; font-size: 18px; font-weight: bold; z-index: 1000; opacity:0; filter:alpha(opacity=0);}
div.quote-left{ position: relative; top: -16px; float: left; width: 40px; height: 88px; background: url(../images/structure/langstraat_sprite.png) -8px -412px; z-index: 1}
div.quote-mid{ position: relative; float: left; padding-top: 12px; width: auto; height: 60px; background: url(../images/structure/quotebg.png) repeat-x; z-index: 2; }
div.quote-right{ position: relative; float: left; width: 24px; height: 72px; background: url(../images/structure/langstraat_sprite.png) -72px -428px; z-index: 2;}
div.quote-mid span.name{ display: block; font-size: 14px; font-weight: normal; }
/* winkelaanbod */
div.thumb-row{ width: 776px; margin: 0 0 16px 0; }
.references .thumb-row .pay-off{ display: block; height: 50px }
div.inner-row{ width: 776px; }
div.thumb-holder{ position: relative; float: left; width: 352px; font-size: 16px}
div.thumb-holder h2{ margin: 0; width: 352px; }
div.thumb-holder .title{ display: block; margin: 0; width: 352px; font-weight: 600 }
div.thumb-holder .pay-off{ display: block; margin: -4px 0 4px 0; color: #97938F; }
.image-holder{ display: block; box-sizing: border-box; position: relative; overflow: hidden; width: 352px; height: auto; }
.image-holder:hover{ border: 3px #72b660 solid; }
a.image-holder{ cursor: pointer; }
.image-holder img{ position: absolute; top: 0; left: 0 }
.image-holder.slider img{ position: relative; }
.image-holder:hover img{ top: -3px; left: -3px }
span.plus{ display: inline-block; position: absolute; left: 50%; top: 50%; margin: -22px 0 0 -24px; width: 40px; height: 40px; background: url(../images/structure/langstraat_sprite.png) -214px -88px; z-index: 15; }
.web-btn{ position: absolute; left: 32px; top: -16px; z-index: 10; }
div.page-column .pay-off{ color: #97938F; }
.thumbnail-telefoon{ display: block; position: relative; width: 352px; color: #97938F; font-size: 13px; }
/* leuk winkelen */
h2.quote{ color: #72b660; font-size: 16px; }
div.thumb-holder h2.quote{ margin: 0 0 0 0; width: 352px; }
span.pay-off .name{ display: block; margin-top: 4px; line-height: 18px; }
span.interiew-name{ display: block; margin: 56px 0 32px 0; color: #777574; font-size: 18px; font-weight: bold}
.interview-image{ margin-top: 76px; }
span.interiew-pay-off{ display: block; margin: -36px 0 40px 0; color: #CEC8C2;}
/* actueel */
div.mid-small-content-container{ margin: 0 248px; padding: 0 0 56px 0; width: 496px; }
div.actueel-item-holder span.date{ display: block; margin: 0 0 16px 0; font-size: 12px; color: #97938F;}
/* route */
.google-maps-image{ position: absolute; right: -96px; top: 107px; }
.google-maps-btn{ position: absolute; right: -8px; top: 131px; z-index: 5; }
ul.route-menu{ margin: -16px 0 32px 0; padding: 0; }
ul.route-menu li{ display: inline-block; margin: 0 32px 0 0; font-size: 14px; list-style: none; }
div.pand-te-huur{ margin: 32px 0 0 0; }
div.pand-te-huur h2{ margin: 0 0 8px 0; }
/* global classes */
.clear{ clear: both; }
.margin-right-40{ margin-right: 40px; }
.hidden{ opacity: 0; filter:alpha(opacity=0);}
.home-our-shops .btn-text{ padding-top: 11px }