/* CSS Document */

body {
	background: url(../images/bghorizontal2.jpg) repeat-x;
	font: 12px Arial;
}

img, table {border:0;}
form {margin:0;padding:0;}

h1 {font-size:18px;}
h2 {font-size:16px;}
h3 {font-size:14px;}

h1, h2, h3, h4, h5 {color:#13b2ec;font-weight: bold; font-family: Arial;margin-bottom:5px;padding:0;}

p {font:12px Arial;color:#554e44;}

a:link, a:visited, a:active {color: #15b5f1;text-decoration:none;}
a:hover {text-decoration:underline;}

a.new-window:link, a.new_window:visited {color:#15b5f1;text-decoration:none;}
a.new-window:hover {text-decoration:underline;}

input, textarea, select {padding-left:5px;color:#0da4dd;}

/*layout*/

/* Hoofddiv ivm plaatsing scherm */
#centeredcontent {
	width: 800px;
	/*height: 580px;*/
	text-align: center;
	position: absolute;
	left: 50%;
	top: 60px;
	margin-left: -400px;
}
#logo {
	background: url(../images/logojst.jpg) no-repeat;
	position:absolute;
	width:288px;
	height:115px;
	z-index:1;
	left: 510px;
	top: 4px;
}	
#topnav {
	position:absolute;
	/*width:500px;	/*401px;*/
	height:22px;
	z-index:4;
	left: 8px;
	top:70px; 	/*64px;*/
}

#outer-left {
	position:absolute;
	float:left;
	width:150px;
	left: -200px;
	top: 20px;
	margin: 10px 18px 0 0;
	/*margin:300px 10px 10px 10px;*/
	text-align:left;
}

.submenu UL{
	margin-left:0px;
	padding-left:0px;
	/*padding-top:40px;*/
}
.submenu LI{
	left:0px;
	color:#554e44;	/*b1c80b;*/
	line-height:24px;
	list-style:none;
	border-bottom:1px dotted #554e44;
	padding-left:0px;
	margin-left:0px;
}
.submenu LI A
{
	color:#554e44;
	list-style:none;
}
.submenu LI A:HOVER, .submenu LI.active A
{
	color:#15b5f1;
	text-decoration:none;
}

#content {
	width:800px;
	min-height:270px;
	float:left;	
	position: relative;
	margin:265px 10px 10px 18px;
	z-index:6;
	text-align:left;
}

#content #left {
	/*position:absolute;*/
	float:left;
	width:424px;
	margin-right:18px;
	margin-bottom:10px;
	/*height:270px;*/
	/*margin:265px 10px 10px 18px;
	z-index:6;
	text-align:left;*/
}

#content #right {
	float:right;
	width:280px;
}

#contactbutton {
	/*position:absolute;*/
	background:url(../images/box.jpg) no-repeat;
	float:left;
	width:250px;/*224px;*/
	height:78px;
	z-index:2;
	/*left: 534px;
	top: 264px;*/
}

#mail {
	float:left;
	margin:2px;
}

#mail a:link, #mail a:visited {
	background:url(../images/envelop.jpg) no-repeat;
	float:left;
	width:55px;
	height:39px;
	margin-top:15px;
	margin-left:25px;
}

#mail a:hover {
	background:url(../images/envelop_hover.jpg) no-repeat;
	text-decoration:none;
}

#tel {
	float:right;
	margin:2px;
}

#tel a:link, #tel a:visited {
	background:url(../images/tel.jpg) no-repeat;
	float:left;
	width:60px;
	height:59px;
	margin-top:5px;
	margin-right:25px;
}

#tel a:hover {
	background:url(../images/tel_hover.jpg) no-repeat;
	text-decoration:none;
}

#nieuws {
	/*position:absolute;*/
	float:left;
	width:256px;
	/*height:115px;*/
	z-index:5;
	margin-top:7px;
	/*padding-bottom:10px;*/
	/*left: 536px;
	top: 348px;*/
	text-align:left;
}

#nieuwsitems {display:none;}
#nieuws ul {margin:0;padding:0;}
#nieuws ul li {
	list-style:none;	
	line-height:16px;
}

#nieuws li a {color:#554e44;text-decoration:none;}
#nieuws li a:hover, #nieuws li a.active {color:#15b5f1;text-decoration:underline;}

.nieuws-foto IMG {
	float:right;
	border:1px solid #cccccc;
	margin-top:0px;
	margin-left:0px;
	margin-right:10px;
	padding: 4px;
}

#footer {
	/*position:absolute;*/
	background: url(../images/bgfooter.jpg) repeat-x;
	float:left;
	/*width:374px;*/
	width:100%;
	/*margin:0 auto;*/
	clear:both;
	height:21px;
	margin-top: 25px;
	margin-bottom:10px;
	padding-top: 10px;
	z-index:1;
	/*left: 421px;
	top: 557px;*/
	text-align:right;
	font: 11px Arial;
	color:#554e44;
}

#topnav ul {padding:0;margin:0;}
#topnav ul li {
	float:left;
	/*margin:17px;*/
	list-style:none;
}

#topnav ul li a {display:block;width:93px;height:45px;}

#topnav ul li a span {display:none;}

li img {border:0;}

li.home a {
	background:url(../images/home.jpg) no-repeat;
}

li.home a:hover, li.home a.active {
	background:url(../images/home_active.jpg) no-repeat;
	cursor:pointer;
}

li.over a {
	background:url(../images/over.jpg) no-repeat;
}

li.over a:hover, li.over a.active {
	background:url(../images/over_active.jpg) no-repeat;
	cursor:pointer;
}

li.producten a {
	background:url(../images/producten.jpg) no-repeat;
}

li.producten a:hover, li.producten a.active {
	background:url(../images/producten_active.jpg) no-repeat;
	cursor:pointer;
}

li.portfolio a {
	background:url(../images/portfolio.jpg) no-repeat;
}

li.portfolio a:hover, li.portfolio a.active {
	background:url(../images/portfolio_active.jpg) no-repeat;
	cursor:pointer;
}

li.contact a {
	background:url(../images/contact.jpg) no-repeat;
}

li.contact a:hover, li.contact a.active {
	background:url(../images/contact_active.jpg) no-repeat;
	cursor:pointer;
}

/*letterstijlen*/
.paginatitel {
	font-family: "Century Gothic";
	font-weight: bold;
	font-size: 16px;
	color: #11ABE7;
}

div.nieuwsitem {
	float:left;
	margin:2px 5px 10px 0px;	
}

h2.subtitle {color:#554e44;font-size:14px;}

div#portfolioitems {
	float:left;
	width:400px;
}

#portfolioitems ul {margin:0;padding:0;}
#portfolioitems ul li {float:left;margin:5px;padding:0;list-style:none;}
#portfolioitems ul li img {float:left;padding:3px;border:2px solid #e1e1e1;}

div.nieuwsitem p {margin:2px;padding:0;}

.titel {color: #13B2EC; font-weight: bold; font-family: Arial; font-size: 14px; }
.standaardtekst {font-size: 12px; font-family: Arial; color: #554e44; }
.nieuwsdatum {color: #15B5F1; font-family: Arial; font-size: 12px; }
.footertekst {font-family: Arial; font-size: 9px;color:#554e44; }
.link {color: #15B5F1; font-family: Arial; font-size: 11px; text-decoration:none;}

.info {padding:5px;font-style:italic; font-size:12px;color:#554e44;}

#Box {font: 12px Arial;}

#Box label{
		margin: 3px 5px 2px 5px;
		float: left;
		width: 120px;
		font-weight:bold;
		color:#11ABE7;
		}

	#Box label.left {
		margin-left:0px;
	}

	#Box label.right {
		width:200px;
	}

	#Box
		legend {
		text-decoration:underline;
	}

	#Box
		input[type=text], textarea, select{
		border:0;
		border-bottom: 1px dashed #15b5f1 ;
		margin: 3px 0px 2px 5px;
		width: 100px;
		color: #554e44;
		/*margin-bottom: 2px;*/
		/*border: 1px solid #000000;*/
	}
	
	#Box input[type=submit] {
		background:#15b5f1;
		border:0;
		color:#fff;
		font-weight:bold;		
	}
	
	#Box input[type=submit]:hover {
		background:#554e44;
		cursor:pointer;
	}
	
	#Box
		textarea{
		width: 250px;
		height: 100px;
		overflow-x:hidden;
		overflow-y:auto;
	}
	#Box
		.boxes{
		width: 1em;
	}

	#Box
		br{
		clear: left;
	}

	.error {
		color:#ca2f2f;
		font: 12px Arial;
		font-weight:bold;
	}