@charset "utf-8";
/* CSS Document */

/* CLEARFIX */
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

body {margin: 0; font-size: 100%; font-family: 'Actor', Arial, Helvetica, sans-serif; background: #dbe5b2 url("img/bg_header.png") repeat-x; text-align: center; color: #333;}
h1 {margin: 0; font-size: 189%; color: #fff; font-weight: 400; font-family: Oswald, Arial, Helvetica, sans-serif; background-color: #5c473b; display: inline-block; padding: 10px;}
h2 {margin: 0; font-size: 138.5%; color: #333; font-weight: 400; font-family: Oswald, Arial, Helvetica, sans-serif;}
h3 {margin: 0; font-size: 123.1%; color: #88ae46; font-weight: 400; font-family: Oswald, Arial, Helvetica, sans-serif;}
h4 {margin: 0; font-size: 108%; color: #333; font-weight: 400; font-family: Oswald, Arial, Helvetica, sans-serif;}
a {color: #88ae46; text-decoration: underline;}
a:HOVER, a:ACTIVE {color: #88ae46; text-decoration: none;}
p {margin: 0 0 1em 0;}
abbr {border: 0;}
img {max-width: 100%; height: auto;}
strong {font-weight: 700;}

table {width: 100%; padding: 0; border-collapse: collapse;}
th {background-color: #531e00; color: #fff; padding: 5px; text-align: left; font-weight: bold;}
td {padding: 5px;}
table p {margin: 0;}

form {margin: 0;}
label {float: left; width: 18%; font-weight: normal;}
label.inline {float: none; width: auto; font-weight: normal;}
label.inline.next {float: none; width: auto; margin-left: 20px;}
.formrow {margin-bottom: 10px;}
.formrow.inline label {float: none; width: auto;}
.formrow.inline input {margin-left: 25%; width: auto; float: none;}
input, select, textarea {border: 1px solid #ccc; font-size: 100%; padding: 5px; font-family: Actor, Arial, Helvetica, sans-serif; float: right; width: 75%;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}
input:FOCUS, select:FOCUS, textarea:FOCUS {border: 1px solid #666;}
input.spinner:FOCUS {border: 0;}
select {width: 75%;}
textarea {height: 140px;}
.formhint {margin-left: 25%; margin-top: 3px; font-style: italic; background: url("img/icon_info.png") no-repeat center left; padding-left: 20px; color: #0062C8;}
.formerror, .formerror:FOCUS {border: 1px solid #e00; border-right: 2px solid #e00; border-bottom: 2px solid #e00;}
.formblock {float: left; width: 75%;}
.mandatory:BEFORE {content: "* "; font-weight: normal;}
input.inline {float: none; width: auto;}
fieldset {}
legend {font-weight: 700; font-size: 116%;}

img, a img {border: 0;}

.error {background: #ce0100 url("img/bg_error.png") repeat-x; color: #fff; font-weight: bold; padding: 5px; border: 1px solid #bb0500; margin-bottom: 10px;}
.error p {background: url("img/icon_error.png") no-repeat; padding-left: 20px; margin: 0;}

.success {background: #028d00 url("img/bg_success.png") repeat-x; color: #fff; font-weight: bold; padding: 5px; border: 1px solid #047700; margin-bottom: 10px;}
.success p {background: url("img/icon_success.png") no-repeat; padding-left: 20px; margin: 0;}

.warning {background: #fec006 url("img/bg_warning.png") repeat-x; color: #666; font-weight: bold; padding: 5px; border: 1px solid #cc9900; margin-bottom: 10px;}
.warning p {background: url("img/icon_warning.png") no-repeat; padding-left: 20px; margin: 0;}

.info {background: #c9d8dd url("img/bg_info.png") repeat-x; color: #666; font-weight: normal; padding: 5px; border: 1px solid #ccc; margin-bottom: 10px;}
.info p {background: url("img/icon_info.png") no-repeat; padding-left: 20px; margin: 0;}

.error a, .success a {color: #fff;}
.warning a, .info a {color: #666;}


.submitknop {margin: 3% 0 0 0; text-align: right;}
.submitknop input, a.button {
	border: 1px solid #88ae46;
	background: #88ae46; /* Old browsers */
	font-weight: 700;
	color: #fff;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 7px 0;
	text-transform: uppercase;
	width: 20%;
	text-decoration: none;
	text-align: center;
	display: block;
	margin: 0 auto;
	}

.submitknop input {padding: 9px 0;}

.submitknop input:HOVER, a.button:HOVER {

	}


.inner {max-width: 980px; width:95%; margin: 0 auto; text-align: left; font-size: 85%;}

/*CORRECT (UN)ORDERED LISTS */
#maincontent ul {list-style-type: none; padding: 0 0 0 24px; margin: 16px 0;}
#maincontent ol {list-style-type: decimal; padding: 0 0 0 36px; margin: 16px 0;}
#maincontent ul li {background: url("img/bg_li.png") no-repeat 0 7px; padding-left: 16px;}

#header .inner {margin-bottom: 16px;}
#logo {float: left; width: 40%; padding-top: 30px;}
#phone {width: 180px; float: right; background: url("img/bg_phone_site.png") no-repeat top left; font-family: Oswald, Arial, Helvetica, sans-serif; color: #dbe5b2; text-align: right; margin-top: 10px;}
#phone a {color: #88ae46;}
#phone p {margin: 0;}
#phone .number {font-weight: 700; font-size: 197%; padding: 28px 0 0 0; margin: 0 0 10px 0;}
#phone .hours {text-transform: uppercase; font-size: 93%;}

#contentbody {background-color: #fff; padding: 15px; line-height: 1.6; margin: 0 0 36px 0; min-height: 236px;}

#webshops {text-align: center; margin: 0 0 36px 0; clear: both;}
#webshops h2 {display: inline-block; color: #fff; font-size: 189%; padding: 15px; background-color: #8a0; margin: 0 auto;}
#webshopsbody {background-color: #8a0; color: #fff; padding: 15px;}
#webshopsbody ul {width: 80%; margin: 0 auto;}
#webshopsbody ul li {width: 20%; float: left; margin-bottom: 25px;}
#webshopsbody ul li a {color: #fff; padding-top: 80px; display: inline-block; font-family: Actor, Arial, Helvetica, sans-serif; font-size: 146.5%; text-decoration: none;}
#webshopsbody ul li a.boomschors {background: url("img/bg_icon_boomschors.png") no-repeat top center;}
#webshopsbody ul li a.houtpellets {background: url("img/bg_icon_houtpellets.png") no-repeat top center;}
#webshopsbody ul li a.strooizout {background: url("img/bg_icon_strooizout.png") no-repeat top center;}
#webshopsbody ul li a.gazonafboording {background: url("img/bg_icon_gazonafboording.png") no-repeat top center;}
#webshopsbody ul li a.graszaadshop {background: url("img/bg_icon_graszaadshop.png") no-repeat top center;}


#contact {position: relative;}
#mailbox {position: absolute; top: 4px; left: 0;}
#contact h2 {display: inline-block; color: #fff; font-size: 189%; padding: 15px; background-color: #666; float: right;}
#contactbody {background-color: #e6e6e6; color: #222; padding: 26px 15px; clear: right;}
#contactbody ul {text-align: right;}
#contactbody ul li {display: inline; margin-right: 36px;}
#contactbody ul li:last-child {margin: 0;}
#contactbody ul li:first-child {font-weight: 400; font-size: 123.1%; font-family: Oswald, Arial, Helvetica, sans-serif;}
#contactbody ul li a {color: #222; text-decoration: none;}
#contactbody ul li a:HOVER {text-decoration: underline;}






@media screen and (min-width: 601px) and (max-width: 900px) {
	#contactbody ul li {display: block; margin: 0 0 10px 0;}
    #webshopsbody ul li {width: 50%;}
	}
	

@media screen and (min-width: 481px) and (max-width: 600px) {
	#contactbody ul li {display: block; margin: 0 0 10px 0;}
	body {background: #dbe5b2 url("img/bg_header.png") repeat-x 0 -120px;}
	#webshopsbody ul {width: 100%;}
    #webshopsbody ul li {width: 100%; float: none;}
	}



@media screen and (min-width: 321px) and (max-width: 480px) {
	#contactbody ul li {display: block; margin: 0 0 10px 0;}
	body {background: #dbe5b2 url("img/bg_header.png") repeat-x 0 -150px;}
	#webshopsbody ul {width: 100%;}
    #webshopsbody ul li {width: 100%; float: none;}
	h1 {line-height: 1.3;}
	}


@media screen and (max-width: 320px) {
	#contactbody ul li {display: block; margin: 0 0 10px 0;}
	body {background: #dbe5b2 url("img/bg_header.png") repeat-x 0 -150px;}
	#webshopsbody ul {width: 100%;}
	#webshopsbody ul li {width: 50%; float: left; margin-bottom: 24px;}
	#mailbox {width: 40%; top: 24px;}
	h1 {line-height: 1.3; font-size: 161.6%;}
	#logo {float: none; width: 100%; text-align: center; margin-bottom: 16px;}
	#phone {float: none; margin: 0 auto;}
    #webshopsbody ul li {width: 100%; float: none;}
	}