/* ------------------------------------------------------ */
/* Copyright 2008 (Non-)verbaal, http://www.nonverbaal.nl */
/* -------------------------------------------------------*/

@import url("reset.css");
@import url("clearfix.css");
@import url("form.css");

body {	
	color: #000000;
	font: 62.5% Verdana, Arial, Helvetica, sans-serif;
	background: #FFFFFF url(../images/body.gif) repeat-y;	
}

a {
	color: #FF8501;
}

a:link,
a:visited,
a:hover,
a:active {
	text-decoration: underline;	
}

/* Basic structure -------------------------------------- */
/* ------------------------------------------------------ */

div.subnavigation {
	position: absolute;
	left: 0;
	width: 180px;
}

div.subnavigation#sub1 {
	top: 140px;
}

div.subnavigation#sub2 {
	padding: 100px 0 0;
	bottom: 26px;
}

div#content {
	position: relative;
	font-size: 1.1em;
	width: 760px;
	padding: 140px 0px 20px 200px;
}

body#home div#content {
	width: 900px;
	padding: 140px 20px 20px 40px;
}

body#basiselementen div#content,
body#toepassingen div#content {
	width: 380px;	
}

img#sample {
	position: absolute;
	top: 140px;
	left: 600px;
	width: 360px;
}

div#navigation {
	position: absolute;
	height: 120px;
	top: 0;
	left: 20px;
	background: #EB6909 url(../images/logo.gif) no-repeat left 15px;
	width: 940px;
}

div#footer {
	clear: both;
	float: left;
	height: 164px;
	width: 100%;
}

h1 {
	position: absolute;
	top: 1em;
	left: 845px;
	color: #FFFFFF;
	font-size: 3em;
	font-family: Arial,Helvetica,sans-serif;	
	z-index: 2000;
}

div#header, 
div#navigation,
img#sample,
div.subnavigation,
h1 {
	position: fixed;
}

/* Alert ------------------------------------------------ */
/* ------------------------------------------------------ */

div.alert {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 2000;
	top: 50%;
	text-align: center;
	font-size: 1.1em;
}

div.alert div {
	margin: auto;
	font-weight: bold;
	padding: 10px;
	color: #000000;
	background-color: #F36F21;		
	border: 1px solid #000000;
	width: 250px;
}

/* Navigation ------------------------------------------- */
/* ------------------------------------------------------ */

div#navigation ul {
	position: absolute;
	width: 940px;
	background: #000000;
	bottom: 0;
}

div#navigation ul li {
	float: left;
	font-size: 1.1em;
}

div#navigation ul li.right {
	float: right;
}

div#navigation ul li a {
	color: #FFFFFF;
	float: left;
	font-weight: bold;
	padding: 0.7em 1em 0.75em;
	text-decoration: none;
}

div#navigation ul li a:hover {
	background: #4D4D4D;
	color: #FFFFFF;	
}

div#navigation ul li a.selected {
	background: #EFEFF1;
	color: #000000;
}

/* Subnavigation ---------------------------------------- */
/* ------------------------------------------------------ */

div#sub1 a,
div#sub2 a {
	text-decoration: none;
}

.subnavigation ul {float: left; width:100%; list-style:none; margin:0; padding: 0; background:url("../images/ag-li-subnav_tcm19-140639.gif") no-repeat; }
.subnavigation { background-image:url("../images/void_tcm19-140669.gif"); }

.subnavigation li {float: left; width:100%; margin:0; padding:0; background-image:none; }
.subnavigation li strong,
.subnavigation li a {float: left; color: #000; width: 100%; background:url("../images/ag-li-subnav_tcm19-140639.gif") 0 100% no-repeat; font-weight:bold; display:block; text-decoration: none;}
.subnavigation li strong span,
.subnavigation li a span { display:block; line-height:1.35em; background: url("../images/blt-subnav-li-a_tcm19-140652.gif") no-repeat; padding:3px 0 5px 31px; }
.subnavigation li a:hover { background:url("../images/ag-li-subnav-ro_tcm19-140642.gif") 0 100% no-repeat; }
.subnavigation li a:hover span { background:url("../images/blt-subnav-li-a-ro_tcm19-140655.gif") no-repeat; }

.subnavigation li strong,
.subnavigation li a.act, .subnavigation li.first a.act,
.subnavigation li a.act:hover, .subnavigation li.first a.act:hover { background:url("../images/ag-li-subnav-keuze_tcm19-140640.gif") 0 100% no-repeat; color: #fff;}

.subnavigation li.first a,
.subnavigation li.first a:hover { background:url("../images/ag-li-subnav-keuze-first_tcm19-140641.gif") 0 100% no-repeat;}

.subnavigation li.first a span { background: url("../images/void_tcm19-140669.gif") no-repeat;}
.subnavigation li.first a:hover span {background:url("../images/blt-subnav-li-a-ro_tcm19-140655.gif") no-repeat; }

.subnavigation li.open strong span,
.subnavigation li.first strong span,
.subnavigation li.first a.act span,
.subnavigation li.open a span { background: url("../images/blt-li-a-anker_tcm19-140648.gif") 0 50% no-repeat;}

.subnavigation li.first a.act:hover span,
.subnavigation li.open a:hover span { background:url("../images/blt-li-a-anker-ro_tcm19-140649.gif") 0 50% no-repeat;}

.subnavigation li.open a span.pijl,
.subnavigation li.open a:hover span.pijl,
.subnavigation li.open strong span.pijl,
.subnavigation li a:hover span.pijl,
.subnavigation li strong span.pijl,
.subnavigation li a.act span.pijl,
.subnavigation ul li.open ul a.act:hover span.pijl,
.subnavigation li.first a:hover span.pijl,
.subnavigation li.first a span.pijl {width: 5px; height: 9px; background: #fff url("../images/pijl_tcm19-140668.gif") no-repeat; padding: 0; position: absolute; right: -11px; margin-top: -17px;}

.subnavigation ul ul {background:url("../images/ag-li-subnav_tcm19-140639.gif") 0 100% no-repeat;}
.subnavigation ul ul a {background:url("../images/ag-li-subnav-li_tcm19-140643.gif") 0 100% no-repeat; font-weight:normal; }
.subnavigation ul li.open ul strong span,
.subnavigation ul li.open ul a span {padding-left:44px; background:url("../images/void_tcm19-140669.gif") 20px 0 no-repeat;}
.subnavigation ul li.open ul a.act:hover span {background:url("../images/blt-subnav-li-a-white-ro_tcm19-140657.gif") 20px 0 no-repeat;}
.subnavigation ul li.open ul a:hover span {background:url("../images/blt-subnav-li-a-ro_tcm19-140655.gif") 20px 0 no-repeat;}
.subnavigation ul ul a:hover {background:url("../images/ag-li-subnav-li-ro_tcm19-140645.gif") 0 100% no-repeat;}
.subnavigation ul ul a.act,
.subnavigation ul ul a.act:hover,
.subnavigation ul ul strong { background:url("../images/ag-li-subnav-li-keuze_tcm19-140644.gif") 0 100% no-repeat; color: #fff; font-weight: normal;}

.subnavigation ul li.open ul ul a span {
	padding-left: 59px;
	color: #666;
}
.subnavigation ul li.open ul ul a.act span {
	color: #FFF;
}

.subnavigation ul li.open ul ul strong span {
	padding-left: 59px;
}
.subnavigation ul li ul li li:hover {
	background:url("../images/ag-li-subnav-li-ro_tcm19-140645.gif") 0 0 no-repeat;
}
.subnavigation ul li ul li:hover ul {
	background: none;
}

/* Content ---------------------------------------------- */
/* ------------------------------------------------------ */

div#content img {
	margin: 0 20px 20px 0;
}

div#content h2 {
	color: #000000;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1.6em;
	font-weight: bold;
	line-height: 1.1em;
	margin: 0 0 1.2em;
}

div#content form {
	margin: 0 0 2em 0;
}

div#content p {
	line-height: 1.4em;
	margin-bottom: 1.2em;
}

div#content strong {
	font-weight: bold;
}

/* Gallery ---------------------------------------------- */
/* ------------------------------------------------------ */

div.gallery {
	margin: 2em 0;
}

div.gallery a {
	color: #000000;
}

div.gallery ul {
	margin: 2em 0;
}

div.gallery ul li {
	float: left;
	margin: 0 1.5em 0 0;
}

div.gallery a span {
	display: none;
}

div.gallery div {
	background-position: center center;
	background-repeat: no-repeat;
	padding: 4px;
	border: 1px solid #DDDDDD;
	line-height: normal;	
}

div.gallery div a {
	display: block;
	width: 120px;
	height: 120px;	
	background: transparent;
}

div.gallery div.hr {
	clear: both;
	width: 100%;
	height: 1px;
	padding: 0;
	border: none;
	background: #F36F21;
}

div.gallery div.hr hr {
	display: none;
}

div.gallery dl {
	margin-top: 0.5em;
}

div.gallery dt {
	margin-bottom: 1em;
	width: 128px;
}

div.gallery dt,
div.gallery dd {
	padding: 2px 0;
} 

div.gallery dd {
	clear: both;
}

div.gallery a.shoppingcart {
	display: block;
	float: left;
	background: url(../images/ic_shoppingcart.gif) no-repeat left top;
	width: 19px;
	height: 19px;
	margin-right: 0.5em;;
}

/* Table data ------------------------------------------- */
/* ------------------------------------------------------ */

table.data {
	margin: 20px 0;
}

table.data tr th {
	font-weight: bold;
}

table.data tr th,
table.data tr td {
	padding: 3px 0;
}	

table.data tr.even td {
	background: #F2F8FD;
}

table.data tr.root td {
	font-weight: bold;
}

/* Results ---------------------------------------------- */
/* ------------------------------------------------------ */

ul.results a {
	color: #000000;
}

ul.results li {
	margin-bottom: 1.4em;
}

ul.results li h3 {
	font-weight: bold;
}