* {
	margin: 0;
	padding: 0;
}

body {
	background: #000;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
}

img {
	border: 0;
}

h1 {
	font-size: 40px;
	letter-spacing: -2px;
	margin-bottom: 50px;
	margin-left: 10px;
}

div.content {
	position: relative;
	width: 1000px;
	margin: 0 auto;
}

span#gridknop {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 999;
	display: none;
}

span#grid {
	position: absolute;
	left: 24px;
	top: 0;
	width: 972px;
	height: 1051px;
	background: url(../img/grid.png) no-repeat;
	z-index: 998;
	display: none;
}

/************************************************* HEADER */

div#header {
	width: 100%;
	height: 398px;
	background: #fff;
	color: #8c8484;
}

.content div#header {
	height: 230px;
}

div#header .content {
	background: url(../img/header_home.jpg) no-repeat;
	padding: 125px 0 0 24px;
	height: 273px;
	width: 976px;
}

body.content div#header .content {
	height: 105px;
}


div#header p {
	width: 500px;
	font-size: 18px;
	font-weight: bold;
	line-height: 20px;
	margin-left: 10px;
}

ul#nav {
	position: absolute;
	top: 361px;
	left: 24px;
	list-style: none;
}

body.content ul#nav {
	top: 193px;
}

ul#nav li {
	float: left;
}

ul#nav li a {
	display: block;
	background: #262525;
	border-bottom: 1px solid #363737;
	line-height: 36px;
	font-size: 16px;
	color: #918f8f;
	font-weight: normal;
	text-decoration: none;
	padding: 0 18px;
	border-left: 1px solid #363737;
}

ul#nav li a.active {
	background: #000;
	border-bottom: 1px solid #000;
	color: #c9c7c7;
}

ul#nav li a:hover {
	background: #000;
	border-bottom: 1px solid #000;
}

/*************************************************** CONTENT */

div#content {
	width: 100%;
	height: 193px;
	background: #000;
	color: #8c8484;
}

body.content div#content {
	height: auto;
}

body.content div#content .content {
	padding: 35px 0 35px 30px;
	width: 970px;
}

img#arrow_previous {
	position: absolute;
	left: 50px;
	top: 88px;
	cursor: pointer;
	cursor: hand;
}

img#arrow_next {
	position: absolute;
	left: 624px;
	top: 88px;
	cursor: pointer;
	cursor: hand;
}

div#units {
	position: absolute;
	width: 480px;
	height: 131px;
	left: 106px;
	top: 31px;
	overflow: hidden;
}

div.unit {
	position: absolute;
	left: 0;
	top: 0;
	width: 469px;
	height: 131px;
	padding-left: 11px;
}

div.unit img {
	float: left;
	border: 3px solid #970f00;
	margin-right: 23px;
}

div.unit img.design {
	margin-right: 33px;
}

div.unit img.laatste {
	margin-right: 0;
}

div.unit h2 {
	color: #92c502;
	font-size: 18px;
	line-height: 25px;
	font-weight: normal;
}

div.unit h2 a {
	color: #92c502;
	text-decoration: none;
}
div.unit h2 a:hover {
	text-decoration: underline;
}

div.unit p {
	font-size: 12px;
	line-height: 20px;
}

div.unit div.hosting {
	float: left;
	width: 152px;
	margin-right: 21px;
}

div.unit div.producten {
	float: left;
	width: 143px;
}

div.unit li {
	list-style: none;
	background: url(../img/li_unit.gif) no-repeat right;
	line-height: 20px;
	font-size: 12px;
}

div.unit li a {
	color: #8c8484;
	text-decoration: none;
}

div.unit li a:hover {
	text-decoration: underline;
}

div.unit a.portfolio:hover img {
	border: 3px solid #92c502;
}

/*************************************************** STANDAARD MEUK */

div.standaard {
	clear: both;
	margin-left: 10px;
	width: 640px;
}

div.standaard h2 {
	font-size: 20px;
	margin-bottom: 15px;
	color: #92c502;
	font-weight: normal;
}

div.standaard h2 span {
	color: #fff;
}

div.standaard p {
	clear: both;
	line-height: 20px;
	margin-bottom: 20px;
}

div.standaard p a {
	color: #92c502;
	text-decoration: none; 
}

/*************************************************** ABOUT */

div.contact {
	float: left;
	padding-bottom: 50px;
	margin-bottom: 30px;
	border-bottom: 1px solid #363737;
	line-height: 20px;
}

div.contact h3 {
	color: #92c502;
	font-size: 13px;
}

div.contact p {
	margin-bottom: 20px;
}

div.contact div.intro {
	float: left;
	width: 461px;
	padding-right: 25px;
	font-size: 13px;
}

div.contact div.gegevens {
	float: left;
	width: 480px;
	line-height: 20px;
	margin-left: 0px;
}

div.contact div.adres,
div.contact div.email,
div.contact div.kvk,
div.contact div.telefoon,
div.contact div.bankrelatie,
div.contact div.fax,
div.contact div.btw {
	float: left;
	width: 142px;
	padding-left: 10px;
}

div.contact div.email,
div.contact div.telefoon,
div.contact div.kvk,
div.contact div.bankrelatie {
	padding-bottom: 10px;
	margin-bottom: 9px;
	border-bottom: 1px solid #363737;	
}

div.contact div.adres,
div.contact div.email,
div.contact div.telefoon,
div.contact div.fax {
	margin-right: 12px;
}

div.netwerk {
	width: 630px;
	line-height: 20px;
}

div.netwerk h2 {
	font-size: 20px;
	margin-bottom: 15px;
	color: #92c502;
	font-weight: normal;
}

div.netwerk h2 span {
	color: #fff;
}

div.netwerk p {
	margin-bottom: 20px;
}

div.persoonlijk {
	float: left;
	display: inline;
	padding-bottom: 30px;
	margin-bottom: 30px;
	border-bottom: 1px solid #363737;
}

div.persoonlijk div.tag {
	float: left;
	width: 316px;
}

div.persoonlijk div.martijn {
	background: url(../img/martijn.gif) no-repeat;
	margin-left: -6px;
}
div.persoonlijk div.dennis {
	background: url(../img/dennis.gif) no-repeat;
	margin-left: 12px;
}
div.persoonlijk div.joost {
	background: url(../img/joost.gif) no-repeat;
	margin-left: 12px;
}

div.persoonlijk h3 {
	position: absolute;
	margin-left: 150px;
	margin-top: 140px;
	font-size: 13px;
	color: #92c502;
}

div.persoonlijk h4 {
	margin-left: 150px;
	margin-top: 160px;
	color: #000;
	font-size: 13px;
}

div.persoonlijk p {
	margin-top: 50px;
	line-height: 20px;
	padding: 0 10px;
}

/*************************************************** SPECIFICATIES */

div.specificaties {
	float: left;
	width: 514px;
	padding: 0 30px 0 10px;
}

div.specificaties p {
	line-height: 20px;
}

div.specificaties p a {
	color: #92c502;
	text-decoration: none;
}

div.specificaties h2 {
	color: #92c502;
	font-weight: normal;
}

div.specificaties h2 span {
	color: #fff;
}



ul.hosting {
	float: left;
	display: inline;
	width: 316px;
	margin-left: 12px;
	list-style: none;
	border-top: 1px solid #363737;
}

ul.hosting li {
	float: left;
	width: 316px;
	line-height: 29px;
	border-bottom: 1px solid #363737;
}

ul.hosting li a {
	display: block;
	padding-top: 2px;
	height: 27px;
	padding-left: 10px;
	color: #92c502;
	font-size: 18px;
	text-decoration: none;
	background: url(../img/li_unit.gif) no-repeat 235px 10px;
}

ul.hosting li a:hover {
	background-color: #222;
}

table.specificaties {
	clear: both;
	float: left;
	width: 882px;
	border-collapse: collapse;
	margin-top: 35px;
}

table.domeinen {
	width: 500px;
}

table.specificaties th.normaal {
	height: 63px;
	width: 142px;
	text-align: left;
	color: #e2beba;
	background: url(../img/th_normaal.gif) no-repeat;
	vertical-align: top;
	line-height: 22px;
	padding-left: 10px;
}

table.specificaties th.breed {
	width: 215px;
	height: 63px;
	background: url(../img/th_breed.gif) no-repeat;
	vertical-align: top;
	line-height: 22px;
	padding-left: 10px;
	text-align: left;
	color: #e2beba;
}

table.specificaties th.leeg {
	width: 12px;
}

table.specificaties tr:hover td {
	background: #171717;
}

table.specificaties td {
	line-height: 29px;
	border-bottom: 1px solid #363737;
}

table.specificaties td.label {
	color: #92c502;
	padding-left: 10px;
}

table.specificaties tr.footer td {
	border: 0;
	padding-top: 10px;
}

table.specificaties tr.footer:hover td {
	background: #000;
}

/*************************************************** OVERZICHT */

div.design {
	margin-bottom: 30px;
}

div.design p {
	line-height: 20px;
}

div.overzicht {
	clear: both;
	width: 930px;
	height: 132px;
	border: 0px solid #000;
	padding: 21px;
}


div.informatie:hover,
div.informatie_hover {
	border: 1px solid #4d4d4d;
	width: 930px;
	height: 132px;
	padding: 20px;
	background: #171717 url(../img/ballon_informatie2.jpg) no-repeat 655px 20px;
}

div.portfolio:hover,
div.portfolio_hover {
	border: 1px solid #4d4d4d;
	width: 930px;
	height: 132px;
	padding: 20px;
	background: #171717 url(../img/ballon_quote.jpg) no-repeat 655px 20px;
}

div.bestellen:hover,
div.bestellen_hover {
	border: 1px solid #4d4d4d;
	width: 930px;
	height: 132px;
	padding: 20px;
	background: #171717 url(../img/ballon_bestellen.jpg) no-repeat 655px 20px;
}

div.overzicht_clear {
	background: #000 !important;
}


div.portfolio blockquote {
	position: absolute;
	color: #fff;
	font-size: 18px;
	line-height: 20px;
	font-weight: bold;
	width: 230px;
	margin-left: 680px; 
	margin-top: 55px;
	display: none;
}

div.portfolio blockquote p {
	float: none;
	width: auto;
}

div.portfolio:hover blockquote,
div.portfolio_hover blockquote {
	display: block;
}

div.overzicht img {
	float: left;
	margin-right: 20px;
	border: 3px solid #970f00;
}

div.overzicht p {
	float: left;
	line-height: 20px;
	width: 460px;
	
}

div.overzicht h2 {
	float: left;
	font-weight: normal;
	color: #92c502;
	font-size: 20px;
	width: 460px;	
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #363737;
}

div.overzicht h2 span {
	color: #fff;
}

div.overzicht h2 a {
	color: #92c502;
	text-decoration: none;
}

div.overzicht p a {
	color: #92c502;
	text-decoration: none;
}

div.bestellen a.bestellen,
div.informatie a.bestellen {
	position: absolute;
	width: 245px; 
	height: 120px;
	margin-top: 5px;
	margin-left: 70px;
}

div.bestellen a.bestellen span,
div.informatie a.bestellen span {
	display: none;
}

/*************************************************** PORTFOLIO */

div#portfolio div.details {
	float: left;
	display: inline;
	width: 410px;
	margin-left: 5px;
}

div#portfolio div.details dl {
	line-height: 29px;
	margin-top: 20px;
}

div#portfolio div.details dt {
	float: left;
	width: 160px;
	border-bottom: 1px solid #363737;
}

div#portfolio div.details dd {
	float: left;
	width: 215px;
	border-bottom: 1px solid #363737;
}

div#portfolio div.details a {
	color: #92c502;
	text-decoration: none;
}

div#portfolio div.beschrijving {
	float: left;
	width: 550px;
	padding-top: 8px;
}

div#portfolio div.beschrijving h2 {
	color: #92c502;
	font-size: 20px;
	font-weight: normal;
	border-bottom: 1px solid #363737;
	padding-bottom: 10px;
	margin-bottom: 15px;
}

div#portfolio div.beschrijving h2 span {
	color: #fff;
}

div#portfolio div.beschrijving p {
	line-height: 20px;
	margin-bottom: 20px;
}

/*************************************************** FORMULIER */

form.standaard {
	padding: 40px;
	margin-bottom: 40px;
	line-height: 24px;
	background: #171717;
	
	
}

form.standaard fieldset {
	float: left;
	width: 175px;
	border: 0;
}

form.standaard fieldset.details {
	clear: both;
	width: 350px;
	margin-top: 20px;
	line-height: 30px;
}

form.standaard legend {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 8px;
	color: #8c8484;
}

form.standaard fieldset.details label {
	float: left;
	clear: left;
	width: 120px;
}

form.standaard input {
	border: 0;
	width: 195px;
	background: #171717;
	color: #fff;
	border: 1px solid #8c8484;
	padding: 1px 5px;
}

form.standaard input.submit {
	float: left;
	border: 0;
	display: inline;
	margin-left: 0px;
	margin-top: 58px;
	width: 205px;
	height: 82px;
	background: url(../img/ballon_contact.jpg) no-repeat;
	cursor: hand;
	cursor: pointer;
}

/*************************************************** DOMEINEN */

form.domeincheck {
	margin-bottom: 40px;
}

form.domeincheck input {
	border: 0;
	background: #171717;
	border: 1px solid #4d4d4d;
	color: #fff;
}

form.domeincheck input.submit {
	position: absolute;
	right: 100px;
	top: 250px;
	border: 0;
	width: 295px;
	height: 132px;
	background: url(../img/ballon_informatie.jpg) no-repeat;
	cursor: hand;
	cursor: pointer;
}

/*************************************************** FOOTER */

div#footer {
	width: 100%;
	height: 214px;
	background: #970f00;
	color: #fff;
}

div#footer .content {
	background: url(../img/footer.gif) no-repeat;
	height: 214px;
	overflow: hidden;
}

div#footer div.visie {
	float: left;
	padding: 30px;
	width: 370px;
}

div#footer div.contact {
	float: left;
	padding: 30px 15px;
}

div#footer h2 {
	margin-bottom: 20px;
	font-size: 20px;
	line-height: 20px;
	font-weight: normal;
}

div#footer p {
	line-height: 20px;
}

div#footer a {
	text-decoration: none;
	color: #fff;
}

div#footer a:hover {
	color: #92c502;
}

div#random_quote {
	position: absolute;
	background: url(../img/ballon_quote.gif) no-repeat;
	width: 293px;
	height: 132px;
	left: 687px;
	top: 30px;
	opacity: 1;
	filter:alpha(opacity=0);  
}

div#random_quote span {
	display: block;
	margin: 55px 15px 0 45px;
	color: #fff;
	font-size: 18px;
	line-height: 20px;
	font-weight: bold;
}

div#random_klant {
	float: right;
	margin: -45px 0 0 0;
}

div#random_klant span {
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}


a#link_dennis {
	position: absolute;
	width: 90px;
	height: 175px;
	left: 700px;
	top: 38px;
}

a#link_martijn {
	position: absolute;
	width: 85px;
	height: 175px;
	left: 790px;
	top: 38px;
}

a#link_joost {
	position: absolute;
	width: 90px;
	height: 175px;
	left: 875px;
	top: 38px;
}

a#link_dennis span,
a#link_martijn span,
a#link_joost span {
	display: none;
}

div#info_dennis {
	position: absolute;
	background: url(../img/ballon_dennis.jpg) no-repeat;
	width: 265px;
	height: 150px;
	left: 715px;
	top: 30px;
	opacity: 0;
	filter:alpha(opacity=0);  
}

div#info_martijn {
	position: absolute;
	background: url(../img/ballon_martijn.jpg) no-repeat;
	width: 265px;
	height: 150px;
	left: 715px;
	top: 30px;
	opacity: 0;
	filter:alpha(opacity=0);  
}

div#info_joost {
	position: absolute;
	background: url(../img/ballon_joost.jpg) no-repeat;
	width: 265px;
	height: 150px;
	left: 715px;
	top: 30px;
	opacity: 0;
	filter:alpha(opacity=0);  
}

div#info_dennis span,
div#info_martijn span,
div#info_joost span {
	display: block;
	margin-top: 60px;
	margin-left: 15px;
	color: #fff;
	font-size: 18px;
	line-height: 20px;
	font-weight: bold;
}

/*************************************************** LOGIN */

div.tools
{
	float: left;
	padding-bottom: 50px;
	margin-bottom: 30px;
	border-bottom: 1px solid #363737;
	line-height: 20px;
}

div.tools h2 {
	font-size: 20px;
	margin-bottom: 15px;
	color: #92c502;
	font-weight: normal;
}

div.tools h2 span {
	color: #fff;
}

div.tools h3 {
	font-size: 16px;
	margin-bottom: 15px;
	color: #92c502;
	font-weight: normal;
}

div.tools h3 span {
	color: #fff;
}

div.tools h4 {
	margin-bottom: 10px;
	color: #fff;
	font-weight: normal;
}

div.tools h4 span {
	color: #92c502;
}

div.tools p {
	margin-bottom: 20px;
}

div.tools p span.white {
	color: #fff;
}

div.tools p span.color {
	color: #92c502;
}

div.tools div.menu {
	float: left;
	width: 175px;
	margin-right: 25px;
	font-size: 13px;
}

div.tools div.menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

div.tools div.menu ul li {
	float: left;
	clear: both;
	width: 175px;
	margin: 0;
	padding: 0;
}

div.tools div.menu ul li a {
	display: block;
	background: #262525;
	border-bottom: 1px solid #363737;
	line-height: 32px;
	font-size: 14px;
	color: #918f8f;
	font-weight: normal;
	text-decoration: none;
	padding: 0 16px;
	border-left: 1px solid #363737;
}

div.tools div.menu ul li.top a {
	border-top: 1px solid #000;
}

div.tools div.menu ul li.top a.active {
	background: #000;
	border-top: 1px solid #363737;
	border-bottom: 1px solid #000;
	color: #c9c7c7;
}

div.tools div.menu ul li a.active {
	background: #000;
	border-bottom: 1px solid #000;
	color: #c9c7c7;
}

div.tools div.menu ul li a:hover {
	background: #000;
	border-bottom: 1px solid #000;
}

div.tools div.customer {
	float: left;
	clear: right;
	width: 480px;
	padding: 0;
	margin: 0;
	color: #fff;
	font-size: 12px;
	text-align: right;
}

div.tools div.body {
	float: left;
	width: 480px;
	line-height: 20px;
	margin: 10px 0px;
}
div.tools div.body a {
	color: #92c502;
	text-decoration: none;
}

div.tools div.body a:hover {
	color: #c9c7c7;
}

div.tools table.verbruik td {
	padding: 0 2px 0 2px;
}

div.tools table.verbruik td.hover {
	background: #262525;
	color: #fff;
	border-bottom: 1px solid #555;
}

div.tools table.verbruik td.hoverValue {
	background: #262525;
	color: #fff;
	text-align: right;
	border-bottom: 1px solid #555;
	border-right: 1px solid #555;
}

div.tools table.verbruik td.hoverRed {
	background: #262525;
	color: red;
	text-align: right;
	border-bottom: 1px solid #555;
	border-right: 1px solid #555;
}

div.tools table.verbruik td.hoverOrange {
	background: #262525;
	color: orange;
	text-align: right;
	border-bottom: 1px solid #555;
	border-right: 1px solid #555;
}

div.tools table.verbruik td.hoverGreen {
	background: #262525;
	color: green;
	text-align: right;
	border-bottom: 1px solid #555;
	border-right: 1px solid #555;
}

div.tools table.verbruik td.banner {
	color: #c9c7c7;
	border-bottom: 1px solid #555;
}

div.tools table.verbruik td.property {
	color: #c9c7c7;
	border-bottom: 1px solid #555;
}

div.tools table.verbruik td a {
	color: #92c502;
	text-decoration: none;
	font-size: 15px;
}

div.tools table.verbruik td a:hover {
	color: #c9c7c7;
}

div.tools table.verbruik td.value {
	color: #fff;
	text-align: right;
	border-bottom: 1px solid #555;
	border-right: 1px solid #555;
}

div.tools table.verbruik td.limit {
	color: #fff;
	text-align: right;
	text-decoration: bold;
	border-bottom: 1px solid #555;
	border-right: 1px solid #555;
}

div.tools table.verbruik td.red {
	color: red;
	text-align: right;
	text-decoration: bold;
	border-bottom: 1px solid #555;
	border-right: 1px solid #555;
}

div.tools table.verbruik td.orange {
	color: orange;
	text-align: right;
	text-decoration: bold;
	border-bottom: 1px solid #555;
	border-right: 1px solid #555;
}

div.tools table.verbruik td.green {
	color: green;
	text-align: right;
	text-decoration: bold;
	border-bottom: 1px solid #555;
	border-right: 1px solid #555;
}

div.tools table.verbruik td.grey {
	color: grey;
	text-align: right;
	text-decoration: bold;
	border-bottom: 1px solid #555;
	border-right: 1px solid #555;
}

div.tools span.green {
	color: green;
}

div.tools span.red {
	color: red;
}