/* Voor de basis van deze website is gebruik gemaakt van 'Less Framework 4' van Joni Korpi */

/* Resets */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
  {
    margin: 0;
    padding: 0;
    border: 0;
  }

ul {padding: 0; margin-left: 3px; margin-top: 0px; list-style-type: disc;}
ol {padding: 0; margin-left: 14px;}
li {padding: 0; margin-left: 14px;}

#alert {background-color:#ffffd0; padding:15px; width:945px;  color:#000000; margin-left:auto; margin-right:auto; margin-bottom:25px; border:1px solid #a0a0a0;}

/* stijlen */

h1, h2, h3, h4, h5
  {
    font-family: 'Open Sans', sans-serif;
    margin: 0px;
    padding: 0px;
    font-weight: 400;
    font-style: none;
    color: #77787b;
  }

h1 {font-size: 24px; line-height: 32px; margin-bottom: 25px;}

#beeld h2 
  {
    float: left;
    font-family: 'Merienda One', cursive;
    font-size: 24px; 
    line-height: auto; 
    margin-top: 170px;
  }

h3
  {
    font-size: 18px;
    font-weight: 400;
    line-height: 23px;
    margin-bottom: 5px;
  }

blockquote h3 {color: #8daa38;}

h4
  {
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
  }

h5
  {
    font-family: 'Merienda One', cursive;
    font-size: 16px;
    font-weight: 400;
    line-height: auto;
  }

a, a:hover {text-decoration: none;}
a {color: #0055a4;}
a:hover {color: #8daa38;}

#staart a:hover {color: #fff;}

/* Standaard 992px */

body 
  {
    background-color: #d6dae5;
    -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    color: #77787b;
  }

#logo
  {
    position: absolute; 
    top: 0px; 
    left: 50%;
    margin-left: -447px; 
    z-index: 99; 
    width: 211px;
    height: 155px;
    padding: 0px;
    padding-bottom: 10px;
    overflow: hidden;
    background-image: url('images/eraschabov.png'); 
    background-position: 0% 100%;
    background-repeat: repeat-x;
  }

#kop, #beeld, #menu, #romp, #staart, #breadcrumbs
  {
    position: relative;
    width: 100%;
    overflow: hidden;
    color: #77787b;
    z-index: 1;
  }

#kop, #menu, #romp, #breadcrumbs {background-color: #ffffff;}
#kop, #menu, #romp {padding-top: 20px;}
#kop {padding-top: 20px; padding-bottom: 20px;}
#menu {padding-top: 15px; padding-bottom: 25px;}
#romp {padding-top: 20px; padding-bottom: 75px;}

#beeld 
  {
    background-position: 50% 50%;
    background-repeat: no-repeat; 
  }

.corrytelefoon h2 {color: #fff;}

/* schaduw */

.schaond, .schabov, #staart
  {
    background-repeat: repeat-x;
    width: 100%;
    overflow: hidden;
    margin: 0px;
  }

.schaond {background-image: url('/templates/eracare/images/eraschaond.png'); background-position: 0% 100%;}

.schabov 
  {
    background-image: url('/templates/eracare/images/eraschabov.png'); 
    background-position: 0% 0%; 
    height: 213px;
  }

#staart 
  {
    background-image: url('/templates/eracare/images/eraschabov.png'); 
    background-position: 0% 0%;
    padding-top: 20px; 
    padding-bottom: 75px;
  }

/* flexbox */

.flexbox
  {
    width: 895px; 
    padding: 0px 48px 0px 48px; 
    margin: 0px auto; 
    position: relative; 
    z-index: 2;
  }

#kop .flexbox {z-index: 3;}

/* kolommen */

.kolom01, .kolom02, .kolom03, .kolom0102 {float: left; overflow: hidden;}
.kolom03 {float: right;}

.kolom0102 h1, .kolom0102 h2, .kolom0102 h3, .kolom0102 h4, .kolom0102 h5 {padding: 5px 0;}

#beeld .kolom03 
  {
    width: 180px;
    background-image: url('/templates/eracare/images/eraschabov.png'); 
    background-position: 0% 100%;
    background-repeat: repeat-x;
    padding-bottom: 10px;
  }
#beeld .kolom03.vierkant .afspraak.roken
{
    background: url(/templates/eracare/images/afspraakstoppen.jpg) 50% 50%;
}
#beeld .kolom03.vierkant .afspraak.afvallen
{
    background: url(/templates/eracare/images/afspraakafvallen.jpg) 50% 50%;
}

#kop .kolom01 {margin-left: 210px; width: 560px; padding-top: 1px;}
#kop .kolom03 {width: 60px; text-align: right;}

#romp .kolom01 {width: 210px; padding-top: 5px;}
#romp .kolom02 {width: 450px;}
#romp .kolom0102 {width: 660px; padding-top: 5px;}
#romp .kolom03 {width: 180px; padding-top: 5px;}

#romp .kolom02 img {max-width: 450px; height: auto;}

#romp .home01, #romp .home02 {width: 330px; padding: 0px; margin-right: 40px;}
#romp .home03 {width: 108px;}
.home03 img {width: 108px; height: auto;}

#staart .kolom01 {width: 210px;}
#staart .kolom02 {width: 475px;}
#staart .kolom03 {width: 150px; text-align: right;}

/* menu */

.menuitem, .menuitemover, .menuitemsel
  {
    float: left;
    line-height: auto;
    margin-right: 25px;
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
  }

.menuitemover, .menuitemsel {cursor: pointer;}

#kop .menuitem, #kop .menuitemover {margin-right: 30px;}

#beeld .menuitem, #beeld .menuitemover
  {
    width: 180px;
    font-weight: 600;
  }

.vierkant .menuitem, .vierkant .menuitemover
  {
    height: 180px; 
    margin-top: 15px;
  }

.inzet .menuitem, .inzet .menuitemover
  {
    height: 90px;
    margin-top: 123px;
    color: #fff; 
    background-image: url('/templates/eracare/images/eraschaond.png'); 
    background-position: 0% 100%;
    background-repeat: repeat-x;
  }

.vierkant .menuitem {background-color: #fff; color: #ff0000;}
.vierkant .menuitemover {background-color: #fff; color: #77787b;}
#beeld .vierkant .menuitem a h3,
#beeld .vierkant .menuitemover a h3 
{text-align: center; margin-top: 120px;}

.inzet .menuitem {background-color: #0055a4;}
.inzet .menuitemover {background-color: #8daa38;}
.inzet h3 {text-align: center; color: #fff; margin-top: 20px;}

#romp .menuitem, #romp .menuitemover, #romp .menuitemsel 
  {
    float: none; 
    margin: 0px;
    margin-bottom: 10px;
    margin-top: 5px;
  }

.menuitemsel a {color: #77787B; }
.menuitem a {color: #0055a4; font-weight: 600;}
.menuitemover a {color: #a6ce3b; font-weight: 600;}
.menuitemover a:hover {color: #a6ce3b; font-weight: 600;}

#beeld .vierkant .menuitem a h3 {color: #ff0000;}
.inzet .menuitem a h3 {color: #fff;}

#beeld .menuitemover a h3 {color: #fff;}
#beeld .menuitemover a:hover h3 {color: #fff;}
#beeld .vierkant .menuitemover a h3,
#beeld .vierkant .menuitmover a:hover h3  {color: #77787b;}

.sub, .subsel {display: block; margin-left: 20px; margin-bottom: 10px;}

.subsel a {color: #77787B; }
.sub a {color: #0055a4; font-weight: 400;}
.sub a:hover {color: #a6ce3b; font-weight: 400;}

/* tabellen */

table {border-top: 1px solid #77787b;}
td 
  {
    border-bottom: 1px solid #77787b;
    padding: 3px; 
    padding-left: 0px;
    padding-bottom: 6px;
    vertical-align: top;
  }

/* formulieren */

form {padding: 0px; margin: 0px;}

.formregel, .formregelradio
  {
    width: 100%;
    margin: 0px; 
    margin-top: 10px;
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    color: #77787b;
  }

.formregelradio {float: left; width: 179px;}
.form-error2 {display: none; padding: 5px; border: 2px dotted #bbb;}

label {height: 25px;}
label, input[type='radio'] {float: right;}
input[type='text'], textarea, select
  {
    float: right;
    border: 0px;
    margin: 0px;
    padding: 0px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    background-color: #d6dae5;
    width: 300px;
    color: #77787b;
  }

input[type='text'], select {height: 25px;}
textarea {height: 150px;}

.kolom03 input, .kolom03 textarea, .kolom03 select {float: none; width: 180px;}

.radioknop
  {
    padding: 0px; 
    margin: 0px; 
    margin-right: 10px; 
    float: left; 
    height: 25px; 
    width: 25px; 
    display: inline;
    vertical-align: middle;
  }

.formknop
  {
    background-color: #0055a4;
    color: #FFFFFF;
    font-weight: 400;
  }

.kolom03 .formknop {margin-bottom: 40px;}

.formerror 
  { 
    border: 1px solid #f88; 
    background: #fee; 
    padding-left: 10px; 
  }


/* tabel */

.tabelregel {width: 100%; overflow: hidden; font-size: 11px;}
.t1, .t2, .t3, .t4 {float: left; overflow: hidden;}

.kolom01 .t1, .kolom01 .t2, .kolom01 .t3, .kolom01 .t4 {width: auto;}

.kolom03 .t1 {width: 25px;}
.kolom03 .t2 {width: 70px;}
.kolom03 .t3 {width: 40px;}
.kolom03 .t4 {width: 45px;}

.tb {font-weight: 600; margin-top: 10px;}

/* testimonials en voordelen */

blockquote
  {
    border: 1px solid #8daa38; 
    color: #8daa38; 
    font-weight: 600;
    padding: 10px;
  }

.testvoordeel 
  {
    width: 100%; 
    overflow: hidden; 
    margin-top: 35px; 
    color: #8daa38; 
    font-weight: 600;
    font-size: 12px;
  }

.testkolom {float: left; width: 217px;}

.test 
  {
    display: block; 
    border: 1px solid #8daa38; 
    color: #8daa38; 
    font-weight: 600;
    margin-bottom: 15px; 
    padding-top: 15px; 
    padding-bottom: 15px;
  }

.test h4 
  {
    color: #8daa38; 
    font-weight: 600;
    margin: 15px; 
    margin-top: 0px; 
    margin-bottom: 0px;
  }

.testpersoon 
  {
    margin: 15px; 
    margin-top: 5px; 
    margin-bottom: 0px; 
    overflow: hidden; 
    text-align: right; 
    line-height: normal;
  }

.voordeelkolom 
  {
    float: right; 
    width: 217px; 
    border: 1px solid #8daa38; 
    color: #8daa38; 
    font-weight: 600;
  }

.voordeelkolom h3 
  {
    margin: 15px; 
    margin-bottom: 0px; 
    color: #8daa38; 
    font-size: 16px; 
    line-height: auto;
  }

.voordeelkolom ol 
  {
    margin: 15px; 
    margin-top: 10px; 
    margin-left: 30px;
  }

/* gastenboek */

.guestbook {}
.guestbookmessage {}

.guestbookrow 
  {
    border: 1px solid #8daa38; 
    color: #8daa38; 
    font-weight: 400;
    padding-bottom: 10px;
    margin-bottom: 15px;
  }

.odd {background-color: #fff;}
.guestbookdate, .guestbookname, .guestbookentry {margin: 10px; margin-bottom: 0px;}
.guestbookname {margin-bottom: 5px; font-size: 1.2em; font-weight: normal;}
.guestbookdate {float: right; font-weight: bold;}
.guestbookentry {color: #77787b;}

.guestbooktitle 
  {
    font-size: 18px;
    font-weight: bold;
    line-height: 23px;
    margin-bottom: 5px;
    color: #8daa38;
  }


/* broodkruimels */

#breadcrumbs {height: 18px;}
#breadcrumbs .flexbox {padding-left: 250px; width: 675px;}
#breadcrumbs a {font-size: 10px;}



/* Tablet 768px */

@media only screen and (min-width: 768px) and (max-width: 991px)
{

.flexbox
  {
    width: 580px; 
    padding: 0px 10px; 
    margin: 0px auto;
  }

#logo
  {
    margin-left: -290px; 
    width: 211px;
    height: 155px;
  }

#kop .kolom01 {margin-left: 210px; width: 280px;}
#romp .kolom01 {width: 580px; float: none; margin-bottom: 30px;}
#romp .kolom02 {width: 350px;}
#staart .kolom01 {width: 580px; float: none; margin-bottom: 30px;}
#staart .kolom02 {width: 420px;}
#staart .kolom03 {width: 150px; text-align: right;}

#romp .kolom02 img {max-width: 350px; height: auto;}

#menu .menuitem, #menu .menuitemover, #menu .menuitemsel
  {
    width: 168px; 
    margin-right: 25px;
    margin-bottom: 10px;
  }

#romp .menuitem, #romp .menuitemover, #romp .menuitemsel 
  {
    float: left; 
    margin: 0px;
    margin-right: 15px;
  }

input, textarea, select {width: 200px;}

.testkolom {width: 167px;}
.voordeelkolom {width: 167px;}

}

/* Mobiel 320px */

@media only screen and (max-width: 767px) 
{
 
 #alert {width:260px;}
.flexbox
  {
    width: 260px; 
    padding: 0px 30px; 
    margin: 0px auto; 
    overflow: hidden;
  }

h2 {float: none; margin-top: 25px; line-height: 30px;}

#logo
  {
    top: 22px; 
    margin-left: -150px; 
    width: 130px;
    height: auto;
  }

#logo img {width: 130px; height: auto;}

#beeld {background-size: auto 162px;} 
.schabov {height: 160px;}

#kop .kolom01 {margin-left: 130px; width: 130px;}
#kop .kolom03 {width: 130px; text-align: left; margin-top: 10px;}

#beeld .kolom01 {width: 120px; margin-right: 10px;}
#beeld .kolom03 {width: 130px;}

#romp .kolom01, #romp .kolom02, #romp .kolom03, #staart .kolom01, #staart .kolom02, #staart .kolom03 
  {
    float: none; 
    width: 260px; 
    margin: 0px; 
    overflow: hidden; 
    margin-bottom: 25px;
    text-align: left;
  }

#romp .kolom02 img {max-width: 260px; float: none; height: auto;}

#beeld .menuitem, #beeld .menuitemover
  {
    width: 130px;
    height: 130px;
    margin-top: 15px;
    font-weight: 400;
  }

#beeld h3 {font-size: 18px; margin-top: 38px;}

#menu .menuitem, #menu .menuitemover, #menu .menuitemsel
  {
    width: 130px; 
    margin: 0px;
    margin-bottom: 10px;
  }

#romp .menuitem, #romp .menuitemover, #romp .menuitemsel 
  {
    float: left; 
    margin: 0px;
    margin-right: 15px;
  }

#staart .menuitem, #staart .menuitemover, #staart .menuitemsel 
  {
    width: 130px;
    margin: 0px;
    margin-bottom: 15px;
  }

#romp input, #romp textarea, #romp select {float: none; width: 260px;}

.home03 iframe {float: left; width: 120px; margin-right: 10px; height: auto;}
.home03 img {float: left; width: 120px; margin-right: 10px; height: auto;}

.testkolom {float: none; width: 260px;}
.voordeelkolom {float: none; width: 258px;}



}



/* Mobiel breed 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) 
{
  
#alert {width:400px;}

.flexbox {width: 400px;}

h2 {float: none; margin-top: 25px;}
#beeld h3 {font-size: 18px; margin-top: 38px;}

#logo
  {
    top: 20px; 
    margin-left: -220px; 
    width: 130px;
    height: auto;
  }

#logo img {width: 133px; height: auto;}

#kop {min-height: 80px;}
#beeld {background-size: auto 162px;} 
.schabov {height: 160px;}

#kop .kolom01 {margin-left: 133px; width: 266px;}
#kop .kolom03 {width: 266px; text-align: left; margin-top: 10px;}

#beeld .kolom01 {width: 266px; margin: 0px;}
#beeld .kolom03 {width: 133px;}

#romp .kolom01, #romp .kolom02, #romp .kolom03, #staart .kolom01, #staart .kolom02, #staart .kolom03 {width: 400px;}

#romp .kolom02 img {max-width: 400px; float: none; height: auto;}

#beeld .menuitem, #beeld .menuitemover
  {
    width: 130px;
    height: 130px;
    margin-top: 15px;
    font-weight: 400;
  }

#menu .menuitem, #menu .menuitemover, #menu .menuitemsel
  {
    width: 133px; 
    margin: 0px;
    margin-bottom: 10px;
  }

#romp .menuitem, #romp .menuitemover, #romp .menuitemsel 
  {
    float: left; 
    margin: 0px;
    margin-right: 15px;
  }

#staart .menuitem, #staart .menuitemover, #staart .menuitemsel 
  {
    width: auto;
    margin: 0px;
    margin-right: 15px;
  }

#romp input, #romp textarea, #romp select {float: right; width: 260px;}

.home03 img {float: left; width: 120px; margin-right: 10px; height: auto;}

.testkolom {float: left; width: 192px;}
.voordeelkolom {float: right; width: 192px;}

}

/* Retina */

@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) 
{
	
	body {}

}

#gbform
{
    margin-bottom: 20px;
}

#eXTReMe {
	visibility: hidden;
}
img.avatar 
{
    padding-left: 10px;
    width: 87px;
    height: 87px;
}