Versie 1.24 - 10/9/15

opties staan nu direct onder elkaar
Menuopties opnieuw opgebouwd
Alles voor mobiel staat nu onderaan verzameld
Formulier opties toegevoegd voor achtergrondkleur, velden en vertical-resize
Anchors zijn standaard toegevoegd
Language button is nu standaard groter
Icons makkelijk toe te voegen in het menu of in de footer

Kopieer de code
(klik in de box en doe vervolgens ctrl+A)
plak de code in de CSS editor
Sla de wijzigingen in de CSS op
Schrijf toevoegingen onder het bijbehorende kopje, of onderaan de pagina

/*-----*\ CSS 1.24 - DTG - Goed gevonden /*-----*/
/*-- header --*/																.header, .topHead, .menuSlide 
{ background: #ddd; }

/* bedrijfsnaam */	                                                        .header-title .h1 
	{ color: #000;
	  font-family: inherit;
	  font-size: inherit; }

/* telefoonnummer en slogan */	                                            #actionLine, #phoneNumber
	{ color: #333; }

/*-- menu --*/																	.nav-primary a
{ color: #444; }																.nav-primary
{ background: transparent; }													.nav-primary a, .nav-primary ul ul a
{ font-family: inherit;
  font-size: inherit; }

/* hover */																	.nav-primary a:hover, .nav-dropdown a:hover
	{ color: inherit;
	  border-bottom: 0; }														.nav-primary li:hover
	{ background: inherit; }

/* actief */																.nav-primary .active > a, ul > li.active> a
	{ color: inherit;
	  border-bottom: 0; }														.nav-primary li.active
	{ background: inherit; }

/* submenu */																.nav-primary ul ul a
	{ color: inherit;
	  font-family: inherit; }													.nav-primary ul ul, .nav-primary > ul ul::after, .nav-primary > ul ul::before
	{ background: #eee; }
		
		/* hover */																.nav-primary ul ul a:hover
		{ color: inherit;
	      font-family: inherit; }												.nav-primary ul ul li:hover
		{ background: inherit; }

/* actief */															.nav-primary ul ul.active a
		{ color: inherit;
	      font-family: inherit;}												.nav-primary ul ul .active
		{ background: inherit;}

/* menubutton */                                                            #menuBar #menubutton
        { color: #000;
          background: inherit; }
        
        /* hover */																#menubutton:hover, #menubutton:before:hover
        { color: inherit; }

/*-- body --*/	                                                                body, input, textarea, select, button, .contact-combined dd, .contact-combined .contact-combined-opening-hours, .contact-combined .contact-combined-opening-hours p, .contact-combined a, .map .small, .comments > .small:first-child, .comments dt.small, .columns .column
{ color: #333; }																.contentArea, .columns .column
{ font-family: inherit; }														p, ul, ol, .spotcall .textbox > *, .columns .column, .map .small 
{ font-size: 1em;
  line-height: 1.5; }

/* Bold tekst */															b, strong, .contact strong
	{ font-weight: 700; }

/*-- links --*/                                                                 a, .box a, .footer-container a, .preamble a
{ color: blue; 
  text-decoration: none; }

/* links hover */                                                           a:hover, .box a:hover, .footer-container a:hover, #menubutton:before:hover, .preamble a:hover
	{ color: #222; 
	  text-decoration: none; }

/*-- inleiding --*/	                                                            .preamble, .preamble p, .preamble ul, .preamble ol, .testimonial blockquote.preamble > :first-child:before, .testimonial blockquote.preamble > :last-child:after, .testimonial figcaption 
{ color: #000; }																.preamble p, .preamble ul, .preamble ol 
{ font-family: inherit; }														.preamble p, .preamble ul, .preamble ol
{ font-size: 1.3em;
  line-height: 1.6em; }

/* inleiding links */													    .preamble a
  	{ color: inherit;
      text-decoration: inherit; }

/* hover */																.preamble a:hover
    	{ color: inherit;
    	  text-decoration: inherit; }

/*-- koppen --*/	                                                            .h1, .contentAreaC .carousel figcaption, .contentAreaD .carousel figcaption, .h2, .bar .h2, .linklist .h2, .contact-combined dt, .carousel figcaption, .formbuilder .legend, .display > *, .contentAreaD .carousel figcaption, .h2, .cart-container .headline, .carousel figcaption, .product-units .price, .image-text .price, .checkoutArea .h1, .checkoutArea .contentAreaC .carousel figcaption, .contentAreaC .carousel .checkoutArea figcaption, .checkoutArea .contentAreaD .carousel figcaption, .contentAreaD .carousel .checkoutArea figcaption, .cart-checkout .product-name, .checkoutNav .active, .cart-checkout .subTotal strong, .checkoutDetail strong, .checkoutDetail h3, .checkoutArea .total .price-total, .module.h2, .module.h1   
{ color: #000; }																.display > *, .contentAreaC .carousel figcaption, .contentAreaD .carousel figcaption, .h1, .module.h1, .module.h2, .module .carousel figcaption, .module .h1, .module .h2, .module .contentAreaC .carousel figcaption, .contentAreaC .carousel .module figcaption, .module .contentAreaD .carousel figcaption, .contentAreaD .carousel .module figcaption, .columns .product-units .price, .checkoutArea .h2
{ font-family: inherit; }
	
	/* H1 */                                                                    .h1, .module .h1, .contentAreaC .carousel figcaption, .contentAreaD .carousel figcaption
	{ color: #000;
	  font-size: 2em;
	  line-height: inherit; }

/* H2 */                                                                    .h2, .module .h2, .module .carousel figcaption, .module .contentAreaC .carousel figcaption, .contentAreaC .carousel .module figcaption, .module .contentAreaD .carousel figcaption, .contentAreaD .carousel .module figcaption
	{ font-size: 2em;
	  line-height: inherit; }

/*-- buttons --*/	                                                            nav.verticalnav a, .btn-large, .formbuilder .btn, .checkoutArea .btn, .product-single .btn, .call .btn, .btn, .box .btn, .callToAction a.btn 
{ color: #fff; }																.btn, .formbuilder .btn, .checkoutArea .btn, .product-single .btn, .btn-large, .call .btn, nav.verticalnav a, .gallery-3 .nav-slider > .prev a:before, .gallery-3 .nav-slider > .next a:before, .carousel .nav-slider > .prev a:before, .carousel .nav-slider > .next a:before, .gallery-4 .prev a:before, .gallery-4 .next a:before 
{ background: #000; }															.btn 
{ font-family: inherit;
  font-size: inherit; }
    
	/* buttons hover */                                                         nav.verticalnav a:hover, .btn-large:hover, .formbuilder .btn:hover, .checkoutArea .btn:hover, .product-single .btn:hover, .call .btn:hover, .btn:hover, .box .btn:hover 
	{ color: #fff; }															.btn:hover, .nav.verticalnav a:hover 
	{ background: #333; }

/* button arrows */															.btn-arrow.btn-arrow.btn-large::before, .formbuilder .btn::before, .checkoutArea .btn::before, .product-single .btn-arrow.btn-arrow.btn::before
	{ font-size: inherit;
	  top: .46em;
	  left: .6em; }

/*-- box --*/                                                                       .box, .box p, .box ul, .box ol, .spotcall .textbox
{ color: #000; 
  font-size: inherit; } 																.box, .spotcall .textbox, .contact-combined, .formbuilder 
{ background: #eee; 
  border: 0px solid #000; }

/* box kop */																.box .h1, .box .h2
  	{ color: #000; }

/* box links */																.box a
	{ color: inherit;
	  text-decoration: inherit; }

/* hover */																.box a:hover
		{ color: inherit;
		  text-decoration: inherit; }

/*-- Formulier --*/																	.formbuilder p, .formbuilder label 
{ color: #000; }																.formbuilder
{ background: #eee; 
  border: 0px solid #000; }														.textarea
{ resize: vertical;
  height: 150px; }

/* velden */																input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], textarea { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; outline: none;  
 	  color: #000; 
  	  background: #fff;
  	  border: 0px solid #000; }	
		
		/* velden focus */														input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus																											
		{ -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1);  
		  -moz-box-shadow: 0 0 5px rgba(0,0,0,0.1);  	
		  box-shadow: 0 0 5px rgba(0,0,0,0.1)}

/*-- footer --*/                                                                    .footer-content, .footer p, .footer-content .column-25 td
{ color: #fff;
  font-family: inherit; }														.footer-container
{ background: #333; }
	
	/* links */																	.footer-container a
	{ color: yellow;
	  text-decoration: underline; }
	
		/* hover */																.footer-container a:hover
		{ color: yellow;
	  	  text-decoration: none; }

/* social media */															.btn.btn-social
	{ background: #000; }														.btn.btn-social:before
	{ color: #fff; }

/* hover */																.btn.btn-social:hover
		{ background: #111; }													.btn.btn-social:hover:before
		{ color: #fff; }

/*-- Mobiel --------------------------------*/
@media only screen and (max-width: 671px) {

/*-- header --*/																#identityWrapper
{ background: #ddd; }

/* bedrijfsnaam */															.header-title .h1
	{ color: #fff; }

/* menuknop */																#menubutton:before
	{ color: #fff; }															#menubutton
	{ background: transparent; }

/* menuknop hover */													#menubutton:before:hover
		{ color: #000; }														#menubutton:hover
		{ background: transparent; }

/*-- menu opengeklapt --*/														.nav-dropdown
{ background: #ddd; }

/* menu-item */																.nav-dropdown li a
	{ color: #000; 
	  background: #fff; }

/* hover */																.nav-dropdown li a:hover
		{ color: #000; 
	  	  background: #eee; }

/* actief */															.nav-dropdown > ul > .active > a
		{ color: #000; 
	  	  background: #eee !important; }

/*-- koppen --*/
	/* display / jumbotron */													.display > *
	{ font-size: 1.5em !important; }

/* H1 */                                                            	    .h1, .module .h1, .contentAreaC .carousel figcaption, .contentAreaD .carousel figcaption
		{ font-size: 1.5em;
		  line-height: inherit; }

/* H2 */                                                          		    .h2, .module .h2, .module .carousel figcaption, .module .contentAreaC .carousel figcaption, .contentAreaC .carousel .module figcaption, .module .contentAreaD .carousel figcaption, .contentAreaD .carousel .module figcaption
		{ font-size: 1.5em;
		  line-height: inherit; }

/*-- two width fix --*/
.columns .column-50 { width: 100%;} .columns .column-50:first-child { padding-bottom:20px;} .columns .column-50:first-child + .column > *, .columns .column-50:first-child + .column + .column + .column > * { margin-left: 0;} .columns .column-50:first-child + .column > ol { margin-left: 2em;} .column-50:first-child + .column.column-50 ul { margin: 0.6875em 0 0 2em;} .columns .column-50:first-child + .column img, .columns .column-50:first-child + .column + .column + .column img { width: 100%;} .main-container { padding-bottom: 0px;}

}

/* FullwidthMapContainer instelling voor Mobiel*/
@media only screen and (max-width: 671px) {  
    .fullWidthMapContainer .columns .column-50  { width: inherit !important;}
}

/*-- Features ------------------------------*/

/* anchor */
.anchor { top: -50px; display: block; position: relative; visibility: hidden; }

@media only screen and (min-width: 672px) {
.no-touch .nav-language ul:last-child {
  font-size: 1.5em;
  background: #000;
  color: #fff;}
.no-touch .nav-language .btn-language:before, .no-touch .nav-language ul:last-child a { color: #fff;}
}

/* menu icons *//*
.nav-primary ul { padding: 0px 0px 0px 1em; list-style: outside none none; line-height: 2em; font-size: 1em; }
.nav-primary li { position: relative; padding-left: 1em; }
.nav-primary li.active:before { content:""; color: yellow; display: block; position: absolute; top: 0em; left: 0em; font-family: FontAwesome; font-size: 1.5em; text-rendering: optimizelegibility; text-indent: 0px; text-transform: none; }
.nav-primary a, .nav-primary ul ul a { padding: 0px 15px; }
*/

/* phone, fax, email icons *//*
*[itemprop="telephone"]:before { content: ""; color: yellow; font-family: FontAwesome; margin-right: 0.5em; }
*[itemprop="email"]:before { content: ""; color: yellow;font-family: FontAwesome; margin-right: 0.5em; }
*[itemprop="faxNumber"]:before{ content: ""; color: yellow;font-family: FontAwesome; margin-right: 0.5em; }
*/