html { overflow: auto; }
html, body { margin: 0; }

img { border: none; }
* { outline: none; }

body { background-color: #434040; color: #fff; font-size: 10px; font-family: Verdana, Geneva, sans-serif; }

form { margin:0px; padding: 0px; }
input { margin:0px; padding: 0px; }
fieldset { border: none; margin: 0; padding: 0; }

/* CONTENT */
h1	{ color: #ffd800; font-weight: bold; font-size: 12px; height: 20px; vertical-align: middle; line-height: 20px; margin: 10px 0px; }
h2	{ color: #fff; font-weight: bold; font-size: 10px; height: 15px; vertical-align: middle; line-height: 15px; margin: 10px 0px; }
p	{ margin: 24px 0px; }

ul	{ margin: 0px 0px 10px 0px; padding: 0px; list-style: circle; }
li	{ margin: 0px 0px 0px 20px; padding: 0px; }

#content #text		{ float: left; width: 354px; padding-left: 10px; line-height: 16px; }
#content #news		{ float: right; width: 300px; height: 280px; margin-top: 10px; background-color: #4a4747; }
#content #advbox	{ float: left; padding-left: 10px; width: 301px; padding-top: 10px;}

a:link    { color: #FFFFFF; text-decoration: none; }
a:visited { color: #e9e9e9; text-decoration: none; }
a:hover   { color: #FFFFFF; text-decoration: underline; }

#content a:link    { color: #FFFFFF; text-decoration: underline; }
#content a:visited { color: #e9e9e9; text-decoration: underline; }
#content a:hover   { color: #FFFFFF; text-decoration: none; }


#container 	{ width: 989px; margin: auto; }
#header		{ float: left; width: 100%; }
#imageblock	{ float: left; width: 100%; margin-top: 10px; }
#content	{ float: left; width: 100%; }
#footer		{ float: left; width: 100%; height: 30px; background: url(../img/layout/footer_bg.gif); margin-top: 10px; }
#copyright	{ margin: auto; width: 989px; height: 20px;  }

#header #logo			{ float: left; width: 217px; height: 44px; padding-left: 15px; padding-top: 20px; }
#header #headerblock 	{ float: left; width: 691px; height: 37px; margin-left: 65px; margin-top: 22px; background: url(../img/layout/header_bg.png); }
#header #spaceblock 	{ float: left; width: 100%; height: 25px; }
#header #menu			{ float: left; width: 100%; height: 58px; }

#footer #footertext	{ width: 100%; text-align: center; color: white; height: 30px; line-height: 28px; vertical-align: middle; }
#copyright #copyrighttext { float: left; width: 60%; text-align: right; color: white; font-size: 9px; margin-top: 5px; line-height: 30px; }
#copyright #footericons { float: left; width: 40%; text-align: right; color: white; font-size: 9px; margin-top: 5px; }
#copyright .icon { margin-left: 10px;}

#dropdownproducten, #dropdowninformatie { position: absolute; z-index: 1000; }
#menu ul	{ margin: 0; padding: 0; list-style: none; }
#menu li	{ float: left; margin: 0; padding: 0; }

/*IMAGEBOX*/
.imagebox_home_selector 		{ float: left; margin: 5px 10px 5px 10px; }
#imagebox_home_imgselector 		{ background-image: url(../img/imagebox/selector_bg.png); }

/*PROJECTBOX*/
.imagebox_selector 		{ float: left; margin: 5px 10px 5px 10px; }
#imagebox_imgselector 		{ background-image: url(../img/imagebox/selector_bg.png); }

/*TEKSTGROOTTE*/
#textsize	{ font-size: 10px; width: 130px; float: right; }
#textsize .ts { color: #ffd800; font-weight: bold; text-decoration: underline; cursor: pointer; }
#textsize #ts1 { font-size: 12px; }
#textsize #ts2 { font-size: 14px; }
#textsize #ts3 { font-size: 16px; }

/*SEARCHBOX*/
#search			{ margin: 9px 0px 0px 10px; }
#searchinput	{ float: left; width: 135px; height: 17px; background-image: url(../img/layout/searchbox_bg.jpg); border: 1px outset; border-right: none; }
#searchbutton	{ float: left; width: 24px; height: 19px; }
#searchresults	{ position: absolute; width: 157px; border: 1px solid #2e5f99; border-top: none; background: #fff; margin-left: 10px; display: none; }
#searchresults ul 	{ list-style: none; }
#searchresults li	{ color: #2e5f99; font-weight: bold; margin-top: 20px; cursor: pointer; }

/*MENU*/
#dropdownproducten	{ position: absolute; display: none; width: 185px; background: #ffd800 url(../img/layout/dropdown_bg.png); margin-top: -10px; margin-left: 4px; border: none; border-left: 1px #463b00 solid; border-right: 1px #463b00 solid; }
#dropdownproducten li { float: none; color: #2e5f99; margin-left: 15px; font-size: 12px; height: 34px; line-height: 34px; vertical-align: middle; }
#dropdownproducten a		{ display: block; }
#dropdownproducten.submenu a		{ color: #2e5f99; font-weight: normal; background-color: transparent;  width: 185px; margin-left: 0px; border: none; text-decoration: none; }
#dropdownproducten.submenu a:hover	{ color: #2e5f99; font-weight: bold; background-color: #ffd800; width: 190px;  padding-left: 20px; margin-left: -20px; border: 1px #d9b700 solid; text-decoration: none; }

#dropdowninformatie	{ position: absolute; display: none; width: 185px; background: #ffd800 url(../img/layout/dropdown_bg.png); margin-top: -10px; margin-left: 4px; border: none; border-left: 1px #463b00 solid; border-right: 1px #463b00 solid; }
#dropdowninformatie li { float: none; color: #2e5f99; margin-left: 15px; font-size: 12px; height: 34px; line-height: 34px; vertical-align: middle; }
#dropdowninformatie a		{ display: block; }
#dropdowninformatie.submenu a		{ color: #2e5f99; font-weight: normal; background-color: transparent;  width: 185px; margin-left: 0px; border: none; text-decoration: none; }
#dropdowninformatie.submenu a:hover	{ color: #2e5f99; font-weight: bold; background-color: #ffd800; width: 190px;  padding-left: 20px; margin-left: -20px; border: 1px #d9b700 solid; text-decoration: none; }

/*NEWS*/
.heading1	{ color: #ffd800; font-weight: bold; font-size: 12px; height: 20px; vertical-align: middle; line-height: 20px; margin: 0; }
.heading1 span { margin: 10px; } 
.newsitem	{ padding: 10px 0; margin-left: 10px; }
.date		{ margin-bottom: 10px; }
.more		{ float: left; width: 100%; margin-top: 10px; }
.morebutton	{ float: right; margin-right: 10px; }
.readfurther{ float: right; margin-right: 10px; }
.time		{ float: left; }
.newsitemcontainer {  float: left; height: 220px; overflow: auto; }
.newsitemcontainer2 { float: left; width: 100%; overflow: auto; }
.newsitemcontainers .image		{ float: left; width: 200px; height: 150px; }
.newsitemcontainers .title		{ float: left; width: 789px; font-weight: bold; font-size: 14px; text-decoration: underline; }

.newsitem { float: left; width: 100%: }
.newsitem .titles { float: left; width: 100%; height: 25px; font-weight: bold; font-size: 14px; line-height: 25px; }
.newsitem .image { float: left; width: 200px; height: 150px; }
.newsitem .textcont { float: left; width: 750px; margin-left: 20px; }
.newsitem .text { float: left; width: 100%; }

/*Productmenu*/
.productmenu { list-style: none; margin-bottom: 30px; }
.productmenu li { float: left; margin-left: 20px; width: 100%; }

/*Projectmenu*/
#projects .menu { float: left; width: 100%; }
#projects #imagebox { float: left; width: 100%; }
#projectmenu { float: left; width: 100%; list-style: none; margin-bottom: 30px; }
#projectmenu li { float: left; margin-left: 20px; }

/*Kunststof*/
#kunststofproduct 			{ float: left; width: 100%; }
#kunststofproduct .title 	{ float: left: width: 100%; }
#kunststofproduct .mainrow	{ float: left: width: 100%; }
#kunststofproduct .imagecol	{ float: left; width: 306px; }
#kunststofproduct .textcol	{ float: left; width: 400px; margin-left: 26px; }
#kunststofproduct .menucol	{ float: left; width: 170px; }
#kunststofproduct .imageblock { float: left; }
#kunststofproduct .toggle 	{ float: left; width: 100%; text-align: right; text-decoration: underline; cursor: pointer; margin-bottom: 10px; }
#kunststofproduct .image 	{ float: left; width: 100%;  }
#kunststofproduct .specsblock { float: left; width: 100%; }
#kunststofproduct .spectable { float: left; width: 100%; border: 1px solid white; line-height: 25px; }
#kunststofproduct .spectable .col1 { float: left; width: 99px; height: 25px; border-bottom: 1px solid white; }
#kunststofproduct .spectable .col2 { float: left; width: 206px; height: 25px; border-bottom: 1px solid white; border-left: 1px solid white; }
#kunststofproduct .spectable .content { float: left; margin-left: 5px; }

#kunststofproduct .brochure { height: 32px; line-height: 24px; text-align: right; }
#kunststofproduct .brochure a { text-decoration: none; line-height: 24px; }
#kunststofproduct .brochure a:hover { text-decoration: none; }
#kunststofproduct .brochure img { vertical-align: middle; }

/*Voordeuren*/

#voordeurenslider { position: relative; width: 987px; height: 548px; background: url(../img/imageslider/bg.jpg); overflow: hidden; }
#voordeurenslider .voordeurcontainer	{ float: left; margin-top: 25px;}
#voordeurenslider .voordeur				{ float: left; width: 199px; margin-left: 100px; }
#voordeurenslider .image				{ float: left; width: 100%; height: 405px; }
#voordeurenslider .title				{ float: left; width: 100%; text-align: center; font-size: 16px; margin-top: 30px; text-transform: uppercase;   }
#voordeurleft 	{ position: absolute; left: 10px; top: 200px; height: 156px; width: 64px; background: url(../img/imageslider/left.png); cursor: pointer; }
#voordeurright 	{ position: absolute; right: 10px; top: 200px; height: 156px; width: 64px; background: url(../img/imageslider/right.png); cursor: pointer; }


#map_canvas { width: 988px; height: 384px; color: #000; }
#contact { width: 100%; height: 179px; }
#contact .information { margin-top: 20px; }
#contact .col1 { float: left; width: 310px; height: 100%; }
#contact .col2 { float: left; width: 428px; height: 100%; }
#contact .col3 { float: left; width: 250px; height: 100%; }

#contact .col1 .col1 { float: left; width: 120px; height: 16px; }
#contact .col1 .col2 { float: left; width: 190px; height: 16px; }
#contact .col2 .col1 { float: left; width: 180px; height: 16px; }
#contact .col2 .col2 { float: left; width: 248px; height: 16px; }
#contact .col3 .col1 { float: left; width: 109px; height: 16px; }
#contact .col3 .col2 { float: left; width: 141px; height: 16px; }

#contact .col3 {  font-size: 12px; }
#contact .col3 .title { margin-top: 5px; font-weight: bold; }
#contact .col3 .sp { margin-top: 5px; }

/*Aanvraag*/
#aanvraag { float: left; width: 100%; }
#aanvraag .productadder { float: left; width: 700px; background-color: #515151; }
#aanvraag .productadder .productimage { float: left; width: 75px; margin-left: 10px; }
#aanvraag #typemodalbutton { float: left; width: 100%; cursor: pointer; text-decoration: underline; margin-left: 12px; }

#aanvraag .title { float: left; width: 100%; height: 24px; line-height: 24px; font-size: 14px; margin-left: 5px; }
#aanvraag .typebox { float: left; width: 130px; margin-left: 5px;  }
#aanvraag .dimensions { float: left; width: 160px; }
#aanvraag .dimensions .left { float: left; width: 60px; height: 24px; line-height: 24px; }
#aanvraag .dimensions .right { float: left; width: 100px; height: 26px; line-height: 26px; }
#aanvraag .dimensions input { width: 40px; }
#aanvraag .material { float: left; width: 130px; }
#aanvraag .description { float: left; width: 200px; }

#aanvraag .addproduct { float: left; width: 75px; }
#aanvraag #addproductbutton { width: 40px; height: 40px; background: url(../img/icons/add.png); cursor: pointer; }

#aanvraag .producten { float: right; width: 280px; background-color: #515151; }
#aanvraag .overalldescription { float: left; width: 700px; background-color: #515151; margin-top: 10px; }
#aanvraag .overalldescription textarea { float: left; width: 600px; height: 200px; margin-left: 45px; }

#aanvraag .productline { float: left; width: 100%; }
#aanvraag .productline .soort { float: left; width: 70px; }
#aanvraag .productline .afmeting { float: left; width: 90px; }
#aanvraag .productline .materiaal { float: left; width: 80px; }
#aanvraag .productline .opmerking { float: left; width: 20px; cursor: pointer; }
#aanvraag .productline .delete { float: left; width: 20px; cursor: pointer; }

#aanvraag .send { float: left; width: 100%; text-align: right;}
#aanvraag .send .button { float: right; background: #515151; color: #fff; border: 3px solid #3b3b3b; height: 40px; width: 180px; cursor: pointer; font-size: 14px; }
#aanvraag .send .button:hover { background: #414141; }

#aanvraag .send .button2 { line-height: 40px; text-align: center; }

#aanvraag .overalldescriptionfield { margin-bottom: 20px; }

#aanvraag .typemodal { position: absolute; width: 820px; height: 450px; left: 50%; top: 50%; margin-left: -410px; margin-top: -225px; background: #515151; border: 4px solid #3B3B3B; display: none; }
#aanvraag .typemodal .header { float: left; width: 100%; height: 25px; color: #fff; background: #3B3B3B; line-height: 25px; font-size: 14px; font-weight: bold; }

#aanvraag .typemodal .header .title { float: left; width: 300px; }
#aanvraag .typemodal .header .close { float: right; width: 60px; cursor: pointer; }
#aanvraag .typemodal .content { float: left; width: 100%; height: 425px; overflow: auto; }
#aanvraag .typemodal .content img { float: left; width: 150px; height: 150px; margin: 5px; }

#aanvraag .credentialsmodal { position: absolute; width: 340px; height: 520px; left: 50%; top: 50%; margin-left: -170px; margin-top: -260px; background: #515151; border: 4px solid #3B3B3B; display: none; }
#aanvraag .credentialsmodal .header { float: left; width: 100%; height: 25px; color: #fff; background: #3B3B3B; line-height: 25px; font-size: 14px; font-weight: bold; }

#aanvraag .credentialsmodal .header .title { float: left; width: 200px; }
#aanvraag .credentialsmodal .header .close { float: right; width: 60px; cursor: pointer; }
#aanvraag .credentialsmodal .content { float: left; width: 100%; height: 550px; overflow: auto; }

#aanvraag .credentialsmodal label { display: block; height: 20px; margin-top: 5px; }
#aanvraag .credentialsmodal input { display: block; width: 300px; height: 24px; font-size: 22px; }
#aanvraag .credentialsmodal .form { margin: 20px; } 
#aanvraag .credentialsmodal .postalcodefield { display: inline; width: 85px; }
#aanvraag .credentialsmodal .cityfield { display: inline; width: 190px; margin-left: 10px; }
#aanvraag .credentialsmodal .postalcodelabel { display: inline }
#aanvraag .credentialsmodal .citylabel { display: inline }
#aanvraag .credentialsmodal .addressfield { margin-bottom: 5px; }

#aanvraag .credentialsmodal .citypostalcodelabels { height: 20px; line-height: 20px; }
#aanvraag .credentialsmodal .send { margin-top: 20px; }


/*Brochures*/
#brochures { float: left; width: 200px; }
#brochures .brochurerow { float: left; width: 100% }
#brochures .brochurerow.head { float: left; width: 100%; height: 24px; line-height: 24px; }
#brochures .brochuretitle 		{ float: left; width: 75%; }
#brochures .brochuredownload 	{ float: left; width: 25%;  }