/* Normalization */
body, div dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, input, p, blockquote, th, td, form { margin : 0; padding : 0; }
h1, h2, h3, h4, h5, h6 { font-size : 100%; }
ol, ul { list-style: none; }
address, caption, cite, code, dfn, em, th, var { font-style : normal; font-weight: normal; }
table { border-collapse : collapse; border-spacing: 0; }
fieldset, img { border : 0; }
caption, th { text-align : left; }
q:before, q:after { content :'';}

.indent {text-indent: -9999px;}
.left {float: left;}
.right {float: right;}
.clear {clear: both;}

span.highlight {background-color:#FFFF99;}

img.left {margin: 0 10px 5px 0px;}

a:link, a:visited, a:active {color: #0e7fc7; text-decoration: none; outline: 0;}
a:hover {text-decoration: underline;}

a.up {float:right; background: url(../images/framework/bullet-arrow-up.gif) left center no-repeat; padding-left: 15px;}

/* framework */
html {

}

body {
background: #1A4147 url(../images/framework/body_bg.jpg) repeat-x left -5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 62.5%;
}

#wrapper {
width: 950px;
margin: 0 auto;
position: relative;
}

#masthead {
position: absolute;
width: 315px;
height: 25px;
right: 70px;
background: url(../images/framework/login-register.gif) no-repeat bottom center;
text-align: center;
color: #E7FFDC;
font-size: 1.1em;
font-weight: bold;
padding-top: 5px;
}

#masthead a {
font-weight: normal;
}

h1 {
padding: 33px 0 15px 10px;
}

h1 span.indent {
position: absolute;
text-indent: -9999px;
left: 0;
}

#container {
/*background-color: #fff;*/
margin-bottom: 20px;
background: #fff url(../images/framework/nav_fade_bg.gif) repeat-x left 35px;
}

#container ul#nav_main {
background: #009B25 url(../images/framework/nav_bg2.png) no-repeat;
padding: 5px 5px 0 10px;
width: 935px;
border-bottom: 3px solid #006611;
}

#container ul#nav_main:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}

#container ul#nav_main li {
float: left; position: relative;
bottom: -3px;
}

#container ul#nav_main li a {
display: block;
padding: 6px 12px 8px 12px;
}

#container ul#nav_main li.first {
}

#container ul#nav_main li.last {

}

#container #content {
clear: both;
padding: 0px 20px 10px 25px;
position: relative;
}

#footer {
color: #fff;
text-align: center;
padding-bottom: 3em;
}

#content ul.nav {width:881px; height:23px; padding:0; margin:10px 0 10px 0; font-size: 1.1em; border-bottom:1px dashed #ccc;}
#content ul.nav li{float:left; background:url(../images/framework/nav-arrow.gif) no-repeat right 5px;padding-right:12px; margin-right:8px; list-style:none;}
#content ul.nav li.last{background:none; font-weight:bold; color:#666;}
#content ul.nav li a{}
/*-----------------------------------------------------------*/

/* General Layout - Colors and Fonts */

#container ul#nav_main{
color: #fff;
font-size: 1.3em;
}

#container ul#nav_main li a:link, #container ul#nav_main li a:visited {
color: #fff;
text-decoration: none;
}

#container ul#nav_main li a:hover {
background-color: #00BA44;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 3px solid #009B25;
}

#container ul#nav_main li.first a:link.current, #container ul#nav_main li.first a:visited.current  {
background-color: #E7FFDC;
}

#container ul#nav_main li a:link.current, #container ul#nav_main li a:visited.current {
color: #046992;
background-color: #E7FFDC;
text-decoration: none;
}

#container ul#nav_main li a:hover.current {
border-bottom-color: #E7FFDC;
}

#content h2 {
color: #006611;
font-family: Helvetica, Verdana, sans-serif;
font-size: 3.3em;
font-weight: normal;
padding-top: 25px;
}

#content h3 {
font-size: 2.4em;
line-height: 1em;
font-variant: normal;
padding: 10px;
color: #597C00;
letter-spacing: 0em;
font-weight: normal;
}

#content #features h3 {
font-size: 2.4em;
line-height: 1em;
font-variant: normal;
padding: 10px;
color: #597C00;
color: #d1e7c7;
letter-spacing: 0em;
font-weight: normal;
}

#content h4 {
font-size: 1.4em;
line-height: 2.4em;
color: #343434;
font-variant: small-caps;
letter-spacing: .1em;
}

#content p {
font-size: 1.3em;
line-height: 1.8em;
}

#content label {
font-size: 1.4em;
font-weight: bold;
}

#content p > label {font-size:1em;}

#content #intro p {
color: #009B25;
font-size: 1.8em;
line-height: 1.5em;
width: 550px;
}

#content #features ul {
font-size: 1.7em;
list-style: url(../images/framework/bullet-arrow-red.gif) inside;
padding-left: 20px;
color: #d1e7c7;
}

#content #features ul li {
padding-bottom: 10px;
}

#content a.arrow-link {
padding-left: 20px;
font-weight: bold;
background: url(../images/framework/bullet-arrow-orange.gif) no-repeat center left;
}

#content #extra h4 {
color: #006611;
font-variant: normal;
letter-spacing: normal;
}

#content #extra p {
font-size: 1.1em;
color: #777;
}


/*-------------- Homepage --------------*/
#intro {
padding: 0 20px 15px 25px;
border-bottom: 1px solid #009B25;
margin: 0 -20px 2px -25px;
background: #E7FFDC;
position: relative;
}

#intro #quote-brdr {
border: 1px solid #666;
width: 280px;
position: absolute;
top: 25px;
right: 20px;
}

#intro #quote-brdr-wh {
border: 10px solid white;
background: #DE0077;
padding: 10px;
}

#intro #quote-brdr h2 {
font-size: 1.6em;
padding: 0 0 1em 0;
color: #FFEEE6;
}

#intro #join-brdr {
border: 1px solid #666;
width: 280px;
position: absolute;
top: 90px;
right: 50px;
}

#intro #join-brdr-wh {
border: 10px solid white;
background: #80B4FF;
padding: 10px;
}

#intro #join-brdr h2 {
font-size: 1.6em;
padding: 0;
color: #FFEEE6;
}

#join-brdr input.subscribe-b {background:url(../images/framework/subscribe-b.png) no-repeat; width:75px; height:27px; border:0; cursor:pointer;}

#join-brdr label{border:1px solid #fff; float:left; margin-right:5px;}
* html #join-brdr label{float:none;}
#join-brdr label input{width:140px; height:20px; border:1px solid #80B4FF; color:#b6b6b6;}

#intro #join-brdr p {
font-size: 1.1em;
color: #FFEEE6;
width: auto;
}

#features {
background: #009B25;
padding: 15px 20px 15px 25px;
margin: 0 -20px 2px -25px;

}

#features-brdr {
border: 1px solid #666;

}

#features-brdr-wh {
border: 10px solid white;
background: #307300 url(../images/framework/features_bg.jpg) no-repeat top right;
padding-left: 350px;
}

#features img#screenshot {
display: block;
margin-top: -256px;
margin-bottom: -15px;
margin-left: 30px;
padding: 0;
}

#features a img {
padding: 2px 0 9px 220px;
}


#column1 {
width: 590px;
padding-right: 15px;
margin-right: 15px;
border-right: 1px solid #ccc;
}

#column1 #diensten {
width: 280px;
padding-right: 10px;
margin-right: 10px;
}

#column1 #diensten ul {
font-size: 1.3em;
}

#column1 #diensten ul li {
list-style-position: outside;
list-style-image: url(../images/framework/check-green.gif);
margin-left: 20px;
margin-bottom: .8em;
}

#column1 #project {
width: 260px;
padding-bottom: 1em;
}

#column2 {
width: 275px;
}

#column2 ul {
font-size: 1.3em;
line-height: 1.5em;
color: #666;
}

#column2 ul#screenshots a img{
background-color: #fff;
border: 2px solid #dcdcdc;
}

#column2 ul#screenshots a:hover img{
background-color: #fff;
border: 2px solid #64D90D;
}

#column2 ul li {
padding-top: 10px;
}

#column2 ul li a{
font-weight: bold;
}



#extra {
clear: both;
position: relative;
top: 20px;
margin: 10px -20px 20px -25px;
padding: 30px 20px 0px 25px; 
border-top: 1px solid #D7EECC;
background: #fff url(../images/framework/nav_fade_bg.gif) repeat-x left 2px;
height: 126px;
}

#extra #pro {
width: 300px;
border-right: 1px dashed #C0C47B;
position: relative;
}

#extra #downloads {
width: 575px;
position: relative;
}

/*-------------- Overzicht --------------*/
#content.overzicht #column1 {
width: 670px;
padding-right: 15px;
margin-right: 15px;
border-right: 1px solid #ccc;
}

#content.overzicht #column1 h2{
padding-top: 10px;
}

#content.overzicht #column1 ul {
width: 580px;
}

#content.overzicht #column1 ul li {
padding-left: 90px;
float: left;
clear: both;
margin-bottom: 20px;
width: 100%;
}

#content.overzicht #column1 ul li img {
float: left;
margin-left: -80px;
margin-top: 10px;
}

#content.overzicht #column1 ul li p {
padding-left: 10px;
}

#content.overzicht #column1 ul {
padding-top: 20px;
}

/*-------------- Features --------------*/
#content.features #column1 ul {
font-size: 1.3em;
padding-left: 10px;
}

#content.features #column1 ul li {
list-style-position: outside;
list-style-image: url(../images/framework/check-green.gif);
margin-left: 20px;
margin-bottom: .8em;
}

#content.features #column1 {
width: 670px;
padding-right: 15px;
margin-right: 15px;
border-right: 1px solid #ccc;
}

#content.features #column1 h2{
padding-top: 10px;
}
#content.features #column1 h3 {
clear: both;
}

#content.features #column1 h4{
padding-left: 10px;
}

#content.features .TwoColumnContainer {
float: left;
padding-bottom: 20px;
}

#content.features .TwoColumnContainer .Column {
width: 330px;
}

#content.features .TwoColumnContainer .Left {
float: left;
}
#content.features .TwoColumnContainer .Right {
float: left;
}


/*-------------- Interface --------------*/
#content.interface #column1 {
width: 670px;
padding-right: 15px;
margin-right: 15px;
border-right: 1px solid #ccc;
}

#content.interface #column1 h2{
padding-top: 10px;
}

#content.interface ol {
font-size: 1.3em;
list-style: decimal;
padding-left: 20px;
}

#content.interface ol li {
padding-bottom: 10px;
}

#content.interface #column1 img.border {
border: 1px solid #ccc;
margin-bottom: 1em;
}

#content #column2.sub_nav {
width: 200px;
}

#content #column2.sub_nav h3{
border-bottom: 1px solid;
}

#content #column2.sub_nav ol {
margin: 10px;
list-style: upper-roman;
font-size: 1.3em;
padding-left: 20px;
}

#content #column2.sub_nav ol li{
padding-left: 10px;
padding-bottom: 10px;
}

#content #column2.sub_nav ol li a:link{

}


/*-------------- Technisch --------------*/
#content.technisch #column1 ul {
font-size: 1.3em;
padding-left: 10px;
}

#content.technisch #column1 ul li {
list-style-position: outside;
list-style-image: url(../images/framework/check-green.gif);
margin-left: 20px;
margin-bottom: .8em;
}

#content.technisch #column1 {
width: 670px;
padding-right: 15px;
margin-right: 15px;
border-right: 1px solid #ccc;
}

#content.technisch #column1 h2{
padding-top: 10px;
}


/*-------------- Tarieven --------------*/
#content.prijs #column1 {
width: 670px;
padding-right: 15px;
margin-right: 15px;
border-right: 1px solid #ccc;
}

#content.prijs #column1 h2{
padding-top: 10px;
}

.tblPricing {
width: 370px;
font-size: 1.4em;
letter-spacing: .05em;
margin: 1em auto;
}

.tblPricing thead {
background-color: green;
}

.tblPricing thead th {
font-weight: bold;
color: #e7ffdc;
}

.tblPricing tr.row {
background-color: #e7ffdc;
}

.tblPricing tr td, .tblPricing thead tr th {
padding: 5px 30px 5px 10px;
text-align: right;
}

.tblPricing td.rh {
font-weight: bold;
}


/*-------------- Downloads --------------*/
#content.downloads #column1 {
width: 670px;
padding-right: 15px;
margin-right: 15px;
border-right: 1px solid #ccc;
}

#content.downloads #column1 h2{
padding-top: 10px;
}

#content.downloads #column1 ul {
width: 580px;
padding-top: 20px;
}

#content.downloads #column1 ul li {
padding-left: 90px;
float: left;
clear: both;
margin-bottom: 20px;
width: 100%;
}

#content.downloads #column1 ul li img {
float: left;
margin-left: -80px;
margin-top: 10px;
}

#content.downloads #column1 ul li p {
padding-left: 10px;
}


/*-------------- Contact --------------*/
#content.contact #column1 {
width: 670px;
padding-right: 15px;
margin-right: 15px;
border-right: 1px solid #ccc;
}

#content.contact #column1 h2{
padding-top: 10px;
}

#content.contact label {
float:left;
width: 120px;
padding-top: 5px;
}

#content.contact p > label {
float: none;
width: auto;
}

#content.contact input, #content.contact textarea {
font-size: 1.4em;
padding: 5px;
margin-bottom: 10px;
width: 200px;
}

#content.contact form span {
font-size: 3em;
color:#009933;
}

#content.contact form small {
display: block;
font-size:1.3em;
margin-bottom: 1em;
padding-top: .25em;
}
#content.contact form small span{
float: left;
font-size: 2em;
margin-top: -.2em;
margin-right: .5em;
}

#content.contact form input.submit-b {background:url(../images/framework/verzenden.png) no-repeat; width:154px; height:44px; border:0; cursor:pointer;}

/*-------------- Probeer --------------*/
#content.probeer #column1 {
width: 670px;
}

#content.probeer p#creeer {
margin: 20px;
}


/*-------------- Templates --------------*/
#content.templates #column1 {
width: 870px;
padding-right: 0;
border-right: none;
}

#content.templates div.thumb-container {
padding-left:10px;
}

#content.templates div.thumb-container div.thumb {
float: left;
width: 216px;
margin-right: 100px;
padding-top: 50px;
}

#content.templates div.thumb-container div.thumb.last {
margin-right: 0px;
}

div.thumb div.descr {
height: 5.5em;
}

div.thumb img.download {
float: left;
}

div.thumb div.preview1 {
float: right;
}

div.thumb div.preview2 a{
float: right;
padding-right: 10px;
font-weight: bold;
font-size: 1.1em;
color: #ff9950;
}

/*-------------- Blog --------------*/
#content.blog #column1 {
width: 670px;
padding-right: 15px;
margin-right: 15px;
border-right: 1px solid #ccc;
}

#content.blog #column1 h2{
padding-top: 10px;
}

#content.blog p {
margin-bottom: 1em;
}

/*------------------------------------------------------------
------------------------ Landing -----------------------------
-------------------------------------------------------------*/


#content.landing #column1 {
width: 670px;
padding-right: 15px;
margin-right: 15px;
border-right: 1px solid #ccc;
}

#content.landing #column1 h2{
padding-top: 10px;
}

#content.landing #column1 h3 {
clear: both;
}

#content.landing #column1 h4{
padding-left: 10px;
}

#content.landing ul#images li {
float: left;
padding: 0 3px 10px 3px;
}

#content.landing ul#images li.first {
padding-left: 0;
}

#content.landing ul#images li.last {
padding-right: 0;
}

#content.landing ul#images li a {
display: block;
padding: 2px 1px 0 1px;
border: 1px solid #ccc;
}

#content.landing ul#images li a:hover {
border-color: #597C00;
}

#content.landing ul#images li a img {
margin: 0;
}

#content.landing .TwoColumnContainer {
float: left;
padding-bottom: 20px;
}

#content.landing .TwoColumnContainer .Column {
width: 330px;
}

#content.landing .TwoColumnContainer .Left {
float: left;
}
#content.landing .TwoColumnContainer .Right {
float: left;
}

#content.landing #column1 .TwoColumnContainer ul {
font-size: 1.3em;
padding-left: 10px;
}

#content.landing #column1 .TwoColumnContainer ul li {
list-style-position: outside;
list-style-image: url(../images/framework/check-green.gif);
margin-left: 20px;
margin-bottom: .8em;
}

/*-------------- Registreer --------------*/
#content.registreer #column1 {
width: 670px;
border-right: none;
}

#content.registreer #column1 h2{
padding-top: 10px;
}

#content.registreer form {
margin-top: 3em;
}

#content.registreer form fieldset.left {
width: 30%;
}

#content.registreer form div#versie.registratie.right {
border-left: 1px solid #ddd;
width: 60%;
padding-left: 5%;
margin-bottom: 5%;
}

#content.registreer form fieldset legend {
font-size: 1.5em;
font-weight: bold;
color: green;
padding: 0 0 1em 0;
margin-left: -8px;
}

#content.registreer form fieldset label {
font-size: 12px;
width: 145px;

text-align: right;
padding:0px 5px;
}

#content.registreer form fieldset input {
padding: 2px;
}
#content.registreer form fieldset input#email {
width: 190px;
}

#content.registreer form fieldset select {
width: 227px;
margin-bottom: .2em;
padding:2px;
}

#content.registreer form fieldset p.label {
padding-left: 25px;
font-size: 11px;
color: #666;
margin-bottom: 1em;
}

#content.registreer form fieldset.left span {
font-size: 11px;
color: #666;
}

#content.registreer div#column2 {
padding-top: 17px;
position: relative;
}

#content.registreer div#column2 h4 {
width: 180px;
position: relative;
left: -10px;
padding-left: 10px;
border: 1px solid #ddd;
font-variant: normal;
font-weight: normal;
letter-spacing: .03em;
font-size: 1.8em;
background-color: #e7ffdc;
color: #597c00;
}

#content.registreer div#column2 span {
display: block;
width: 180px;
position: relative;
left: -10px;
padding: 7px 0 7px 10px;
border: 1px solid #ddd;
margin-top: 5px;
font-size: 1.2em;
font-weight: bold;
background-color: #ece9d8;
color: #666;
}

#content.registreer div#column2 ul {
display: block;
width: 180px;
position: relative;
left: -10px;
padding-left: 10px;
border: 1px solid #ddd;
border-top: none;
border-bottom: none;
}

#content.registreer div#column2 ul li {
margin-left: -10px;
padding: 3px 0px 3px 35px;
border-bottom: 1px solid #ddd;
font-size: 11px;
position: relative;
background-repeat: no-repeat;
background-position: 10px center ;
}

body #content.registreer div#column2 ul li.current-step {
background-image: url(http://www.mailmarketing.be/images/framework/blue-play.png);
font-weight: bold;
}

body #content.registreer div#column2 ul li.incomplete-step {
background-image: url(http://www.mailmarketing.be/images/framework/gray-button.png);
}

body #content.registreer div#column2 ul li.complete-step {
background-image: url(http://www.mailmarketing.be/images/framework/green-check.png);
}

#content.registreer form div#vervolledig.registratie {
border-left: 1px solid #ddd;
width: 60%;
padding-left: 5%;
margin-bottom: 5%;
float:right;
}

#content.registreer form div#vervolledig fieldset label {
font-size: 12px;
width: 130px;
float: left;
text-align: right;
padding:2px 5px;
}

#content.registreer form div#vervolledig fieldset input {
width: 220px;
margin-bottom: .2em;
padding: 2px;
}

#content.registreer form fieldset.left label {
padding-left: 0;
}

#content.registreer form fieldset.left input, #content.registreer form fieldset.left select {
width: 190px;
margin-bottom: 2em;
padding: 2px;
}
#content.registreer form div#vervolledig fieldset select {
margin-bottom: .2em;
padding:2px;
}

body #content.registreer input#prijs {border: none;width: 115px;background: #fff;text-align:right;font-size: 11px; color: #666;}

.validation-advice {
color: red;
background: #fff url(http://www.mailmarketing.be/images/framework/alert.gif) no-repeat left top;
padding: 1px 20px 10px 20px;
margin-left: 130px;
float: right;
} 

/*-------------- Algemene Voorwaarden --------------*/
#content.voorwaarden #column1 {
width: 670px;
padding-right: 15px;
margin-right: 15px;
border-right: 1px solid #ccc;
}

#content.voorwaarden #column1 h2{
padding-top: 10px;
}

#content.voorwaarden #column1 ol, #content.voorwaarden #column1 ul {
padding-left: 25px;
font-size: 13px;
line-height: 1.5em;
color: #555;
} 

#content.voorwaarden #column1 li {
padding-bottom: 1em;
}

#content.voorwaarden #column1 ol {
list-style: decimal;
}

#content.voorwaarden #column1 ul {
list-style: disc;
}

/*-----------------------------------------------------------*/
/* framework - bg_images */
body #container #content {background: url(../images/framework/round_corner_bottom.png) no-repeat bottom;}