/*-------------------------------------------------------------
Cascading style sheet

versie:    1.1
auteur:    Jacob Francke
copyright: Dytech Solutions 2008
email:     info@dytechsolutions.nl
website:   http://www.dytechsolutions.nl
-------------------------------------------------------------*/

* {	padding: 0;	margin: 0; }

html, body { margin: 0;	padding: 0; }

a:link, a:visited { text-decoration: none; color: #BEBEBE; font: 13px Verdana, Helvetica, sans-serif; } 
a:hover, a:focus, a:active { text-decoration: none; color: #BEBEBE; font: 13px Verdana, Helvetica, sans-serif; } 

h3 a:link, h3 a:visited, h3 a:hover, h3 a:focus, h3 a:active {
	font: 0.8em Verdana, Helvetica, sans-serif;
	color: #7F7F83;
}

a:hover, a:focus, a:active {
	text-decoration: underline;
}

img { border: 0; }

ul { list-style: none; }

body { 
	background: #fff url(/images/front/bground.png) no-repeat top; 
}


p {
	font: 12px Verdana, Helvetica, sans-serif;
	color: #7F7F83;
	margin: 8px 0; 
}



/*	HEADINGS
-------------------------------------------------------------*/

h1 {
	background: url(/images/front/logo-ds.png) no-repeat top left;
	text-indent: -99999px;
	position: absolute;
}
h1 a {
	display: block;
	height: 67px;
	width: 313px;
}

h2 {
	font: 1.255em Verdana, Helvetica, sans-serif;
	color: #646464;
	float: right;
	margin:20px 8px 0pt 0pt;
	
}

h3 {
	font: 1.255em Verdana, Helvetica, sans-serif;
	color: #bebebe;
}

h4 {
	font: bold 1.055em Verdana, Helvetica, sans-serif;
	color: #7F7F83;
	margin: 0 0 5px;
}

div#projecten h3 {
	font: 1.255em Verdana, Helvetica, sans-serif;
	color: #C3DA48;
	margin: 15px 0px 0px;
	padding:14px 0px 4px 22px;
}


div#contact h3 {
	font: 1.255em Verdana, Helvetica, sans-serif;
	color: #FFF;
}







/*	MENU
-------------------------------------------------------------*/

ul#menu {
	position: absolute;
	z-index: 2;
	width: 929px;
}

ul#menu li {
	list-style-type: none;
	float: left;
	margin: 0;
	position: relative;
	margin:0px 2px 0px 0px;
}

ul#menu li ul {
	display: none;
}

ul#menu li a {
	border: 0;
	text-decoration: none;
	background: transparent url(/images/front/menubalk.png) no-repeat;
	font: bold 1em Verdana, Helvetica, sans-serif;
	color: #7F7F83;
	font-variant: small-caps;
	display: block;
	height: 40px;
	width: 130px;
	text-align: center;
	padding: 11px 0 0;
}

ul#menu li a:hover, ul#menu li.active a {
	border: 0;
	text-decoration: none;
	background: transparent url(/images/front/menubalk-black.png) no-repeat;
	font: bold 1em Verdana, Helvetica, sans-serif;
	font-variant: small-caps;
	display: block;
	color: #c3da48;
	height: 40px;
	width: 130px;
}



/*	SUBMENU
-------------------------------------------------------------*/

.secondarymenu {}
.secondarymenu h4 { 
	background-color: #58585A; 
	font: 1.255em Verdana, Helvetica, sans-serif;
	color: #C3DA48;
	width: 307px;
	padding: 3px 0 20px 15px;
	margin: 0px;
}
.secondarymenu ul{ 
	background: #58585A url(/images/front/ds.png) 97% 97% no-repeat; 
	width:322px; 
	padding: 0px 0px 60px; 
}

.secondarymenu ul li { 
	margin: 0 8px;
	padding: 5px 0 0 7px; 
	height: 25px;
}

.secondarymenu ul li:hover{ 
	margin: 0 8px;
	padding: 5px 0 0 7px; 
	background: #333333 url(/images/front/menu-active.gif) no-repeat scroll 97% 50%; 
}
.secondarymenu ul li a { font-weight: bold; }
.secondarymenu ul li.active  { 
	background: #333333 url(/images/front/menu-active.gif) no-repeat scroll 97% 50%; 
	margin: 0 8px;
	padding: 5px 0 0 7px;
}
.secondarymenu ul li.active a { color:#C3DA48;}
.secondarymenu .menutop { width:322px; height:10px; background: url(/images/front/menutop.jpg) no-repeat; }
.secondarymenu .menubottom { width:322px; height:10px; background: url(/images/front/menubottom.jpg) no-repeat; }

.secondarymenu ul.submenu { width: 307px; }
.secondarymenu ul.submenu li { padding: 0; width: 307px; }
.secondarymenu ul.submenu li.active,
.secondarymenu ul.submenu  li:hover {}


/* FORMS
-------------------------------------------------------------*/
.form td span {
	font: 12px Verdana, Helvetica, sans-serif;
}

.form ul{
	margin: 0 0 0 90px;
}

.form ul li{
	font: 12px Verdana, Helvetica, sans-serif;
	color: #7F7F83;
	width: 90px;
	height: 26px;
}

.form ul li input{
	width: 13px;
	float: right;
	margin: -14px 0 0;
}

.formTable td.textbox input {
	font: normal 12px Verdana, Helvetica, sans-serif;
	color: #7F7F83;
	padding: 6px;
	width: 455px;
	border: 1px solid;
	height: 16px;
}

.formTable td.textarea textarea {
	width: 455px;
	height:100px;
	font: 12px Verdana, Helvetica, sans-serif;
	border: 1px solid;
	color: #7F7F83;
	padding: 6px;
}


.formTable td p.errormsg {
	color: #ff3a3a;
	padding: 0 0 0 20px;
}

p.errormsg {
	background: transparent url(/images/front/error.gif) no-repeat scroll 0px 0px;
}

.form td select {
	font: 12px Verdana, Helvetica, sans-serif;
	color: #7F7F83;
	width: 500px;
}

#formBottom {
	border-top: 1px #BEBEBE solid;
	margin-bottom: 30px;
}

#formBottom a.button{
	margin:-25px -21px 0;
}

.form p.verplicht {
	width:180px;
	font: 12px Verdana, Helvetica, sans-serif;
	color: #7F7F83;
	margin: 15px 0 0;
}

/* TABLES
-------------------------------------------------------------*/
div.blockContent table {
	border-collapse: collapse; 
	width: 100%;
	font: 12px Verdana, Helvetica, sans-serif;
	color: #7F7F83;
}

table tr.first {
	background: #393939;
	color: #bfd73b;
	font: bold 16px Verdana, Helvetica, sans-serif;
}

table tr.odd {
	background: #ededed;
}

table td {
	border: 1px #dcdcdc solid; 
	padding: 5px;
}

table.formTable td {
	border: medium none;
	padding: 10px 0;
	vertical-align: top;
}

table.formTable td.label {
	width: 150px;
}

table.formTable td.label label {
	color: #7F7F83;
	font: bold 12px Verdana, Helvetica, sans-serif;
}





/* CONTENT PAGE
-------------------------------------------------------------*/

#colMain {
	width: 596px;
	float: left;
	padding:13px 0 0;
}

/*	LAYOUT
-------------------------------------------------------------*/

div.blockContent {
	margin: 15px 0px;
	padding: 0 5px;
}

div.blockContent p {
	font: 13px Verdana, Helvetica, sans-serif;
	color:#7F7F83;
	margin: 16px 0px 0px;
	line-height:22px;
}

div.blockContent ul {
	margin: 10px 0;
}

div.blockContent ul li { 
	background:transparent url(/images/front/bullit.gif) no-repeat scroll 0pt 5px;
	font: 13px Verdana, Helvetica, sans-serif; 
	color: #7f7f83;
	padding:0px 0px 0px 15px;
}

div.blockContent ol li { 
	font: 13px Verdana, Helvetica, sans-serif; 
	color: #7f7f83;
}

div.blockContent ol {
	margin: 10px 0px 10px 20px;
}

a.button {
	background: transparent url(/images/front/button-bg.jpg) no-repeat scroll 0% 50%;
	color:#C3DA48;
	float:right;
	font-family:Tahoma,Arial,Verdana,sans-serif;
	height:27px;
	width: 92px;
	line-height:1.1em;
	margin:-1px -21px 0;
	padding: 11px 0 0 20px;
	text-decoration:none;
}



#banner img { border: 0; margin: 20px 0 20px 0;}

div#header {
	margin-top: 54px;
	height: 100px;
	width: 929px;
}

#wrap p { 
	float: left; 
	font: bold 1.2em Arial, Helvetica, sans-serif; 
	font-variant: small-caps; 
	margin: 0 5px 0 0; 
}


#colLeft {
	float: left;
	width: 970px;
	padding-right: 5px;
}

#colMiddle{
	float: left;
	width: 331px;
	padding: 0 5px 0 5px;
}

#colRight{
	float: left;
	width: 250px;
	padding-left: 5px;
}

div#checkDomein {
	background: url(/images/front/checkDomein.png) no-repeat top left;
	height: 146px;
	position: relative;
}

div#checkDomein h3{
	font: 1.255em Verdana, Helvetica, sans-serif;
	color: #646464;
	left:18px;
	position:absolute;
	top:23px;
}

div#checkDomein input{
	font-family: Tahoma,Arial,Verdana,sans-serif;
	font-size:13px;
	left: 64px;
	position: absolute;
	top: 65px;
	width: 175px;
	padding-left: 5px;
}

div#checkDomein select{
	font-family: Tahoma,Arial,Verdana,sans-serif;
	font-size:13px;
	position: absolute;
	right: 27px;
	top: 64px;
}

div#checkDomein a.button {
	background: transparent url(/images/front/button-CD-bg.jpg) no-repeat scroll 0% 50%;
	color:#C3DA48;
	float:right;
	font-family:Tahoma,Arial,Verdana,sans-serif;
	height:27px;
	width: 92px;
	line-height:1.1em;
	margin:-1px 0pt 0pt;
	padding:11px 25px 0pt 20px;
	text-decoration:none;
	position: absolute;
	right: -20px;
	bottom: 13px;
}

div#projecten {
	background: transparent url(/images/front/portfolioBlock.jpg) no-repeat scroll 0% 50%;
	width: 322px;
	height: 527px;
	margin: -14px 0 0;
	position: relative;
}
div#projecten_overzicht {
	margin: 20px 0 0 0;
	position: relative;
}
#projecten_overzicht div.project {
	border-bottom: 1px #5B5B5B solid;
	padding: 6px 12px;
	margin: 6px 12px;
	float:left;
	
} 
#projecten_overzicht div.project:hover {
	background: #5B5B5B;
}

div.project {
	border-bottom: 1px #BEBEBE solid;
	padding: 6px 12px;
	margin: 6px 12px;
} 

div.project:hover {
	background: #333333;
} 

div.project h4 {
	font: bold 12px Verdana, Helvetica, sans-serif;
	color: #BEBEBE;
	margin-bottom: 7px;
}

div.project h4 span {
	font: normal 12px Verdana, Helvetica, sans-serif;
	margin:24px 0px 0pt 0px;
	padding: 0px 0px 0px 20px;
	background: transparent url(/images/front/project-item.gif) no-repeat scroll 0% 50%;
}

div.project img { 
	float: left; 
	margin: 0px 7px 0px 0px;
	border: 1px #c8c8c8 solid;
}

div.project p {
	font: 13px Verdana, Helvetica, sans-serif;
	color:  #969696;
	line-height:22px;
}

div#projecten a.button {
	background: transparent url(/images/front/button-portfolio-bg.jpg) no-repeat scroll 0% 50%;
	bottom: 13px;
	color: #C3DA48;
	float: right;
	font-family: Tahoma,Arial,Verdana,sans-serif;
	height: 27px;
	line-height: 1.1em;
	margin: 0 -7pt 0;
	padding: 11px 25px 0pt 20px;
	position: absolute;
	right: -20px;
	text-decoration: none;
	width: 92px;
	
}

.block {
	padding: 0 10px;
}


div#contentHome {
	width: 929px;
	margin: 0 auto;
	position: relative;
}

div#bc_background {
	background: #F0F0F0 none repeat scroll 0 0;
	border-top: 1px solid #5B5B5B;
	height: 36px;
	position: absolute;
	top: 194px;
	width: 100%;
}
div#breadcrumbs {
	height: 23px;
	margin: 40px 0pt 0pt;
	padding: 6px 0px 0px 10px;
}

div#breadcrumbs p{
	font: 13px Verdana, Helvetica, sans-serif; 
	color: #7f7f83;
	float: left;
	margin: 4px 10px 0 0;
}

div#breadcrumbs span{
	font: 13px Verdana, Helvetica, sans-serif; 
	color: #7f7f83;
	margin: 0px 7px;
}

div#breadcrumbs ul{
	margin: 5px 0 8px;
}

div#breadcrumbs ul li{
	font: 13px Verdana, Helvetica, sans-serif; 
	float: left;
	margin:0 0 0 11px;
	padding:0 0 0 13px;
	background: transparent url(/images/front/bc_bckgrnd.png) no-repeat 0 4px;
}

div#breadcrumbs ul li#bcHome{
	font: 13px Verdana, Helvetica, sans-serif; 
	float: left;
	margin: 0 0 0 18px;
	background: #F0F0F0;
}

div#content {
	margin-top: 30px;
}

div#contact {
	background: transparent url(/images/front/contactBlock.png) no-repeat scroll 0% 50%;
	font-family:Tahoma,Arial,Verdana,sans-serif;
	width: 244px;
	height: 195px;
	margin: -36px 0px 0px;
	padding:51px 20px 0px;
}

div#contact p{
	color: #FFF;
}

div#contact a{
	color: #646467;
}

div#laatsteNieuws {
	position: relative;
	width: 244px;
}

div#subscribeRss {
	position: absolute;
	top: 7px;
	right: 0px;
}

div#laatsteNieuws h3 {}

div.newsItem  {
	border-bottom:1px solid #BEBEBE;
	margin:6px 0;
	padding:6px 0;
}


div.newsItem h4 {
	margin-bottom: 7px;
}

div.newsItem h4 a {
	font: bold 12px Verdana, Helvetica, sans-serif;
	color: #c3da48;
	margin-bottom: 7px;
}

div.newsItem h4 span a{
	font: normal 12px Verdana, Helvetica, sans-serif;
	color: #BEBEBE;
}

div.newsItem img {
	border: 1px solid #C8C8C8;
	float: left;
	margin: 0px 7px 0px 0px;
}

div.newsItem p a{ 
	color: #7f7f83;
	font: 13px Verdana,Helvetica,sans-serif;
}

div#webhosting {
	padding: 25px 0 0;
}

div#webhosting .pakket {
	float: left;
	width: 182px;
	padding: 0px 0px 0px 16px;
	text-align: center;
}

div#webhosting .pakket {
	float: left;
	width: 182px;
	padding: 0px 0px 0px 16px;
	text-align: center;
	margin: 0 52px;
}

div#webhosting .pakket img{
	margin: 0 0 0 -26px;
}

div#webhosting .pakket_omschrijving {
	text-align: left;
	padding: 0 5px 0 10px;
	background: #EBEBEB;
	width: 159px;
	border-left: 1px #CBCBCB solid;
	border-right: 1px #CBCBCB solid;
}

div#webhosting .pakket_omschrijving p {
	margin: 0;
}

div#webhosting .pakket_omschrijving_top {
	width: 176px;
	height: 10px;
	background: transparent url(/images/front/webhosting_top.jpg) no-repeat scroll 0 0;
}

div#webhosting .pakket_omschrijving_bottom {
	width: 176px;	
	height: 10px;
	background: transparent url(/images/front/webhosting_bottom.jpg) no-repeat scroll 0 0;
}

div#webhosting .priceholder {
	height: 90px;
	width: 159px;
	padding: 20px 0 0;
}

div#webhosting .price {
	position: relative;
}

div#webhosting .price img {
	position: absolute;
	right: -50px;
	top: -15px;
}




div#footer {
	background: #DADADA none repeat scroll 0 0;
	margin-top: 20px;
	padding: 18px 0 0;
	height: 38px;
	text-align: center;
}

div#footer span { 
	font: 13px Verdana, Helvetica, sans-serif; 
	color: #7f7f83; 
	padding:0px 0px 0px 7px;
}

div#footer ul#logos{
	margin:0px 0px 0px 30px;
}

div#footer ul#logos li{
	margin:10px 15px 0px;
}

div#footer ul#logos li a img{ 
	filter: Alpha(Opacity=35); 
	-moz-opacity: 0.35; 
	opacity: 0.4; 
}

div#footer ul#logos li a:hover img { 
	filter: Alpha(Opacity=100); 
	-moz-opacity: 1.00; 
	opacity: 1; 
}


div.FooterItem {
	float: left;
	margin: 25px 36px;
	width: 160px;
}




/*	CONTENT HELPERS
-------------------------------------------------------------*/

.clear { clear: both; }

.left { float: left; margin: 8px 8px 0 0; }
.right { float: right; margin: 8px 0 0 8px; }

span.flashAudio { display: block; width: 200px; height: 20px; background: url(/images/cms/bar.jpg); }
.swfObject { background-position:center; background-repeat:no-repeat; background-color:#ffffcc; }
.swfObject {background-image:url(/js/tiny_mce3/plugins/media/img/flash.gif);}