body {
    font-size: 14px;
    line-height: 1.7em;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    margin: auto;
    background: #f4f4f4;
    color: #616161;
}


/* content */

a {
    color: #662d91;
}
a:hover {
    color: #03a0e1;
}

h1, h2, h3, h4, h5, h6 {
    color: #000000;
    font-weight: 300;
}
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
    font-weight: 600;
}
h1, h2 {
    margin: 40px 0px 25px 0px;
    font-size: 35px;
    line-height: 45px;
}
h2 {
    font-size: 25px;
    line-height: 35px;
}
h3, h4, h5, h6 {
    margin: 30px 0px 20px 0px;
    font-size: 25px;
    line-height: 35px;
}
h4 {
    font-size: 20px;
    line-height: 30px;
}
h5, h6 {
    font-size: 16px;
    line-height: 25px;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: none;
}

p, ul {
    margin: 20px 0px;
}

ul {
    list-style: none;
    padding: 0px;
}
ul li {
    margin: 10px 0px;
    padding-left: 40px;
    background: url('/img/ictwaarborg/amore_0.png') no-repeat 15px 7px;
}

p.right {
    text-align: right;
}
p.center {
    text-align: center;
}

a img {
    border: none 0px;
}

img, iframe {
    vertical-align: bottom;
}

strong {
    font-weight: 600;
}

/* content variants */

a.more {
    font-weight: 600;
    text-decoration: none;
}
a.more:after {
    content: url('/img/ictwaarborg/amore.png');
    margin-left: 10px;
    width: 4px;
}
a.more:hover:after {
    content: url('/img/ictwaarborg/amore_1.png');
}

ul.showcase {
    list-style: none;
    padding: 0px;
    margin: 30px 0px;
}
ul.showcase li {
    margin: 15px 0px;
    padding: 0px 0px 0px 91px;
    background: url('/img/ictwaarborg/logo_showcase.png') no-repeat 20px 5px;
    min-height: 70px;
}

img.introvideo {
    cursor: pointer;
}
div.introvideo:after {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -46px 0px 0px -46px;
    cursor: pointer;
    height: 93px;
    width: 93px;
    background: url('/img/ictwaarborg/video_play.png') no-repeat left top;
    content: '';
}
div.introvideo:hover { }
div.introvideo:hover::after {
    background-position: left bottom;
}

img.star {
    vertical-align: middle;
    padding: 0px 1px;
}
h6 img.star {
    position: relative;
    top: -2px;
}

/* header */

div#header {
    height: 155px;
    width: 940px;
    margin: auto;
    position: relative;
    padding: 0px 10px;
}
div#header img#logo {
    position: absolute;
    left: 6px;
    top: 37px;
    z-index: 100;
}

ul#swap {
    margin: 0px -470px 0px 0px;
    padding: 0px;
    position: absolute;
    right: 50%;
    list-style: none;
}
ul#swap li {
    float: left;
    font-size: 15px;
    line-height: 20px;
    background: none;
    padding: 0;
    margin: 0;
}
ul#swap li.active {
    background: url('/img/ictwaarborg/swapbg.jpg') no-repeat left top;
}
ul#swap li a {
    display: block;
    width: 141px;
    height: 65px;
    padding: 90px 10px 0px 10px;
    text-align: center;
    color: #000000;
    position: relative;
    text-decoration: none;
}
ul#swap li a strong {
    display: block;
}
ul#swap a:hover {
    color: #03a0e1;
}
ul#swap li a:after {
    content: url('/img/ictwaarborg/swap_customer_0.png');
    position: absolute;
    top: 35px;
    left: 60px;
}
ul#swap li.active a:after {
    content: url('/img/ictwaarborg/swap_customer.png');
}
ul#swap li.company a:after {
    content: url('/img/ictwaarborg/swap_company_0.png');
}
ul#swap li.active.company a:after {
    content: url('/img/ictwaarborg/swap_company.png');
}
ul#swap li.active a:after {
    filter: none;
    -webkit-filter: grayscale(0%);
}

div#navigation {
    height: 43px;
    background: #FFFFFF;
    position: relative;
    min-width: 960px;
}
div#navigation:after {
    position: absolute;
    left: 50%;
    top: 0px;
    margin-left: -470px;
    content: url('/img/ictwaarborg/navigationbg.png');
    z-index: 20;
}
div#navigation ul#mainnav {
    margin: 0px;
    padding: 0px;
    list-style: none;
    position: absolute;
    right: 50%;
    margin-right: -470px;
    z-index: 40;
}
div#navigation ul#mainnav li {
    float: left;
    display: block;
    background: none;
    padding: 0;
    margin: 0 0 0 35px;
}
div#navigation ul#mainnav a {
    display: block;
    line-height: 43px;
    font-weight: 400;
    color: #616161;
    text-decoration: none;
}
div#navigation ul#mainnav a:hover {
    background: url('/img/ictwaarborg/navigationhover.png') no-repeat center bottom;
}
div#navigation ul#mainnav li.active a {
    color: #662d91;
}
div#navigation ul#mainnav a:hover, div#navigation ul#mainnav li.active a:hover {
    color: #03a0e1;
}

div#subheader {
    background: #3c1f54 url('/img/ictwaarborg/subheaderbg.png') no-repeat center top;
    height: 125px;
    min-width: 940px;
    color: #FFFFFF;
    text-align: center;
    font-size: 35px;
    line-height: 35px;
    font-weight: 300;
    padding: 80px 10px 10px 10px;
    cursor: default;
}
div#subheader small {
    font-size: 14px;
    font-weight: 400;
    color: #af97c2;
    line-height: 24px;
    transition: color 0.3s;
}
div#subheader:hover small {
    color: #d7cae1;
}

/* containers/grid */

div.container {
    padding: 50px 0px;
    position: relative;
    min-width: 960px;
}
div.container.compact {
    padding: 10px 0px;
}
div.container :first-child {
    margin-top: 0px;
}
div.container :last-child {
    margin-bottom: 0px;
}
div.container.shadow {
    background: url('/img/ictwaarborg/containerbg.png') repeat-x top;
}
div.container.bright {
    background: #FFFFFF;
}
div.container.bright.shadow {
    background: #FFFFFF url('/img/ictwaarborg/containerbg.png') repeat-x top;
}
div.container.dark {
    background: #6b6b6b;
}
div.container.dark, div.container.dark * {
    color: #FFFFFF;
}
div.container.dark a:not(.button) {
    text-decoration: underline;
}
div.container.subfooter {
    padding: 55px 0px;
}
div.container.logo {
    background-image: url('/img/ictwaarborg/container_logobg.png');
    background-repeat: no-repeat;
    background-position: center center;
    padding: 40px 0px;
}
div.container.city {
    background-image: url('/img/ictwaarborg/container_citybg.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    padding: 70px 0px;
}
div.frame {
    width: 960px;
    margin: auto;
}

div.frame.extralogin {
    text-align: right;
    padding: 2px 10px 0px 10px;
    width: 940px;
    line-height: 30px;
}
div.frame.extralogin input {
    box-shadow: none;
    border: none;
    border-radius: 5px;
    vertical-align: top;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 5px;
}
div.frame.extralogin input[type=text] {
    margin-left: 6px;
}
div.frame.extralogin button {
    width: 36px;
    background-image: url('/img/ictwaarborg/extralogin_button.png');
    background-repeat: no-repeat;
    background-position: center center;
    height: 28px;
}
div.frame.extralogin button span {
    display: none;
}

div.column {
    /* Correct inline-block rendering in different browsers */
	display: -moz-inline-stack;
	display: inline-block;
	zoom: 1;
	*display: inline;
	vertical-align: top;
    margin-right: -3px;
    width: 960px;
    position: relative;
}

div.column.half {
    width: 480px;
}
div.column.third {
    width: 320px;
}
div.column.quarter {
    width: 240px;
}
div.column.twothirds {
    width: 640px;
}
div.column.threequarters {
    width: 720px;
}

div.box {
    margin: 10px;
    overflow: hidden;
    clear: both;
    position: relative;
}
div.box.rounded {
    border: 1px solid #A9A9A9;
    border-radius: 4px 4px 4px 4px;
    margin: 9px;
}
div.box.rounded.space {
    background: #FFFFFF;
    border-color: #dfdfdf;
    padding: 20px 28px;
}
div.box.center {
    text-align: center;
}

div.container.bright + div.container:before {
    content: url('/img/ictwaarborg/sep1.png');
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -24px;
}
div.container.bright + div.container.compact:before {
    content: '';
}

/* Buttonbox */
div.buttonbox {
    width: 670px;
    margin: auto;
}
div.buttonbox div.buttons {
    border: solid 1px #dfdfdf;
    border-radius: 4px;
    height: 112px;
    background: #FFFFFF;
    overflow: hidden;
}
div.buttonbox div.button {
    float: left;
    width: 222px;
    height: 37px;
    border-left: 1px solid #dfdfdf;
    padding-top: 75px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
}
div.buttonbox div.button:hover {
    box-shadow: inset 0px 0px 10px #f4f4f4;
}
div.buttonbox div.button:first-child {
    border-left: none;
}
div.buttonbox div.button:after {
    content: url('/img/ictwaarborg/buttonbox_icon_logo.png');
    position: absolute;
    left: 85px;
    top: 22px;
}
div.buttonbox div.button.active:after { content: url('/img/ictwaarborg/buttonbox_icon_logo_1.png');}
div.buttonbox div.button.zekerheden:after { content: url('/img/ictwaarborg/buttonbox_icon_zekerheden.png');}
div.buttonbox div.button.zekerheden.active:after { content: url('/img/ictwaarborg/buttonbox_icon_zekerheden_1.png');}
div.buttonbox div.button.vinden:after { content: url('/img/ictwaarborg/buttonbox_icon_vinden.png');}
div.buttonbox div.button.vinden.active:after { content: url('/img/ictwaarborg/buttonbox_icon_vinden_1.png');}
div.buttonbox div.button.active {
    background: #03a0e1;
    color: #FFFFFF;
    box-shadow: inset 0px 0px 10px #0081b7;
}
div.buttonbox div.content {
    display: none;
    padding: 20px 60px 0px 60px;
    clear: both;
}
div.buttonbox div.content.active {
    display: block;
}

/* Picker UL */
ul.picker {
    list-style: none;
    margin: 20px 0px;
    padding: 0px;
}
ul.picker li {
    border-top: dashed 1px #e1e1e1;
    padding: 8px 20px 8px 35px;
    background: url('/img/ictwaarborg/amore_0.png') no-repeat 0px 15px;
    transition: background-position 0.1s;
    margin: 0;
}
ul.picker li:hover {
    background-image: url('/img/ictwaarborg/amore.png');
    background-position: 10px 15px;
}
ul.picker li:first-child {
    border-top: none 0px;
}
ul.picker a {
    color: #616161;
    text-decoration: none;
}
ul.picker a:hover {
    color: #622e8a;
}

/* Forms */

form {
	margin: 25px 0px;
}

form div.input {
	margin: 18px 0px;
	padding-left: 170px;
	position: relative;
	min-height: 20px;
}
form div.input.nolabel {
    padding-left: 0px;
}
form div.button {
    margin: 25px 0px;
    text-align: right;
}

div.input label {
	display: -moz-inline-stack;
	display: inline-block;
	zoom: 1;
	*display: inline;
}

div.input label:first-child {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 160px;
}

div.input label, input, select, textarea {
	vertical-align: top;
}

div.input fieldset label {
    position: static;
}
div.input fieldset {
    border: none;
    padding: 0px;
    margin: 0px;
}
div.input legend {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
}

input[type=text], input[type=email], input[type=password], input[type=tel], select, textarea {
	margin-right: 6px;
	border: solid 1px #e8e8e8;
	border-radius: 2px;
	font-size: 14px;
	padding: 4px 6px;
	color: #4d4d4d;
    background: #ffffff;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    box-shadow: inset 0px 2px 3px #e9e9e9;
}
div.bright input[type=text], div.bright input[type=email], div.bright input[type=password], div.bright input[type=tel], div.bright select, div.bright textarea,
div.space input[type=text], div.space input[type=email], div.space input[type=password], div.space input[type=tel], div.space select, div.space textarea {
    background: #f4f4f4;
	border-color: #ececec;
}
input {
	margin-right: 6px;
}

div div.input :active, div div.input :focus {
	border-color: #5ac8f0;
}

button, button:focus, a.button {
	border-radius: 5px;
	background: #03a0e1;
	color: #FFFFFF;
	font-size: 14px;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
	padding: 0px 10px;
	line-height: 30px;
	height: 30px;
	display: -moz-inline-stack;
	display: inline-block;
	zoom: 1;
    text-decoration: none;
	*display: inline;
	margin: 2px 0px;
	cursor: pointer;
	vertical-align: top;
    font-weight: 600;
    border: none 0px;
}
button {
	position:relative;
	top: -2px;
}
button:hover, button:active, a.button:hover, a.button:active {
	color: #FFFFFF;
	background: #5ac8f0;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

form.justified input[type=text], form.justified input[type=email], form.justified input[type=password], form.justified input[type=tel], form.justified select, form.justified textarea {
    width: 100%;
    padding: 10px 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; 
}
form.justified button, a.button.big, button.big {
    padding: 0px 28px;
    height: 43px;
    line-height: 43px;
}
a.button.biggest, button.biggest {
    padding: 0px 35px;
    height: 55px;
    line-height: 55px;
    font-size: 20px;
}

a.button.stamp, button.stamp {
    padding: 0px 34px 0px 82px;
    height: 65px;
    line-height: 65px;
    background-image: url('/img/ictwaarborg/button_icon_stamp.png');
    background-repeat: no-repeat;
    background-position: 35px 21px;
}


button.secondary, a.button.secondary {
    background: transparent;
    color: #1ba1de;
}
button.secondary:hover, a.button.secondary:hover {
    color: #662d91;
}

div.error-message {
    color: #bd232d;
}

/** add * for required fields */
form div.required label:after,
form div.required legend:after,
form label.required:after {
	content: ' *';
    display:inline;
    color: #b1b1b1;
}

/** remove * for multiple checkbox */
form div.required .checkbox label:after,
form div.radio.required label:after,
form div.required .multiple-checkbox label:after{
	content: '';
    display:inline;
}

/* special layout for signup page */
form.signupcompact {
    position: relative;
}
form.signupcompact div.input {
    padding-left: 135px;
}
form.signupcompact div.input label {
    border-radius: 5px 0px 0px 5px;
    background: #b2b2b2 url('/img/ictwaarborg/form_signupcompact_labelbg.gif') no-repeat center right;
    padding: 0px 20px;
    line-height: 43px;
    height: 43px;
    color: #FFFFFF;
    font-weight: bold;
    width: 95px;
    font-size: 18px;
}
form.signupcompact div.input input {
    box-shadow: none;
    border: none;
    outline: none;
    line-height: 43px;
    height: 43px;
    padding: 0px 10px 0px 0px;
    border-radius: 0px 5px 5px 0px;
    font-size: 16px;
    width: 235px;
}
form.signupcompact button {
    position: absolute;
    left: 395px;
    top: 0px;
    margin-top: 0px;
}

/* kenniscentrum */

table.articles {
    border-collapse: collapse;
    margin: 20px 0px;
    width: 100%;
}
table.articles tr.odd td {
    background: #f4f4f4;
}
table.articles td {
    padding: 10px;
    vertical-align: top;
}
table.articles td.icon {
    width: 60px;
    padding: 20px;
}
table.articles p {
    margin: 5px 0px;
}

/* member profile, partner list */
table.categories, table.partners {
    border-collapse: collapse;
    margin: 20px 0px;
    width: 100%;
}
table.categories th {
    text-align: left;
    width: 180px;
    padding: 5px 10px;
}
table.categories td, table.partners td {
    padding: 5px 10px;
}
table.categories tr.odd td, table.categories tr.odd th,
table.partners tr.odd td, table.partners tr.odd th{
    background: #f4f4f4;
}
table.categories td.icon {
    width: 16px;
    text-align: center;
    vertical-align: middle;
}
table.categories td.icon img {
    vertical-align: middle;
}
table.categories tr.disabled td {
    color: #979797;
}
table.partners td.logo {
    width: 10%;
}
table.partners td.name {
    width: 40%;
    min-height: 50px;
    vertical-align: top;
    padding: 10px;
}


/* Networkfooter */
div#networkfooter {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    margin-top: 0px;
}

/* Subnav */
ul#subnav, ul#usermenu {
    list-style: none;
    margin: 0px;
    padding: 0px 10px;
    height: 25px;
}
ul#subnav li, ul#usermenu li {
    float: left;
    background: none;
    padding: 0px;
    margin: 0px;
}
ul#subnav li.active, ul#usermenu li.active {
    font-weight: 600;
}
ul#subnav li.active li,
ul#usermenu li.active li{
    font-weight: 400;
}
ul#subnav li.active li.active,
ul#usermenu li.active li.active{
    font-weight: 600;
}
ul#subnav li a,
ul#usermenu li a{
    color: #FFFFFF;
    background: #b1b1b1;
    float: left;
    display: block;
    padding: 0px 8px;
    line-height: 25px;
    border-radius: 2px;
    margin-right: 18px;
    text-decoration: none;
}
ul#subnav li a:hover,
ul#usermenu li a:hover{
    background: #03a0e1;
}
ul#subnav ul,
ul#usermenu ul{
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
}
ul#subnav ul a,
ul#usermenu ul a {
    color: #662d91;
    background: transparent;
    padding: 0px;
}
ul#subnav ul a:hover,
ul#usermenu ul a:hover {
    color: #03a0e1;
    background: transparent;
}

/* Scheme tables */
table {
    width: 100%;
}
th, td {
    vertical-align: top;
    text-align: left;
}
tr.odd td, tr.odd th {
    background: #f4f4f4;
}
th a {
    color: inherit;
}

td.icon {
    text-align: center;
}
td.icon img {
    vertical-align: middle;
}


/* Error messages */
div.message { 
	margin: 10px auto;            
	background: #fbcccc url('/img/icons/exclamation.png') 10px 14px no-repeat;
	padding: 10px 20px 10px 40px; 
    width: 880px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px; 
}
div.column div.message {
	margin-left: 0px;
}            
div.message.warning {
	background-color: #fffdcc; 
	background-image: url('/img/icons/error.png');
}
div.message.info {
	background-color: #d9ebf6;    
	background-image: url('/img/icons/information.png');
} 
div.message.succes {
	background-color: #dcf5c3;  
	background-image: url('/img/icons/accept.png');
}

/* Backend style grid */
div.frame.backend div.column {
    width: 240px;
    margin-bottom: 20px;
}
div.frame.backend div.column.wide {
    width: 480px;
}
div.frame.backend div.column.wider {
    width: 720px;
}
div.frame.backend div.column.widest {
    width: auto;
}