/*
De Goede Schilders Site CSS
@author: Publer.com
@version: 20090126
*/


/* General styling
**********************************/
body, #publerBody {
	text-align: center; /* Center the contents for IE */
	background: url(/images/degoedeschilders/backgrounds/body.png) repeat top left;
}

#container {
	position:relative;
	width:1004px;
	height:499px;
	margin:auto; 
	text-align: left;
	margin-bottom:100px;
	}
#header {
	height: 180px;
	background-color:white;
	position:relative;
	margin:25px 0;
	}

	#header h1{
		margin:0;
		padding:0;
		position:absolute;
		top:0;
		left:0;
		}
		#header h1 a{
			display:block;
			width:306px;
			height:65px;
			background: url(/images/degoedeschilders/logos/logo.png) no-repeat top left;
			text-indent:-5555px;
		}
	ul#top-nav{
		position:absolute;
		right:15px;
		top:35px;
		list-style:none;
		text-align:right;
		width:660px;
		border-top:1px solid #919499;
		border-bottom:1px solid #919499;

		}
		ul#top-nav li{
			display:inline;
			line-height:2.5em;
			margin:0 0 0 15px;
			}
			ul#top-nav li a{
				text-transform:lowercase;
				color:#919499;
				text-decoration:none;
				}
				ul#top-nav li a:hover, ul#top-nav li.selected a{
					color:#f36c2c;
					}
div#main {
	position:relative;
	height:1%;
	}
div#wrapper {
	float:left;
	width:100%;
	} /* workaround */
div#contents {
	margin: 21px 428px 0 0;	/*Geef de margins zo breed als de columns */
	background-color:white;
	height:253px;
	overflow:auto;
	padding:10px 30px;
	font-size:12px;
		height:322px;
}
div#contents h1{
	margin-top:14px;
	line-height: 1.4em;
	margin-bottom:6px;
	}
ul#navigation {
	position: absolute;
	clear:both;
	top: 0;
	width: 576px;
	height: 50px;
	left:0;
	list-style:none;
	margin:0;
	padding:0;
	height:21px;
	z-index:99;
	}
	ul#navigation li{
		float:left;
		margin-right:4px;
		width:141px;
		padding:0;
		}
		ul#navigation li.last{
			margin-right:0;
			}
		ul#navigation li a{
			display:block;
			width:121px;
			height:18px;
			background:url(/images/degoedeschilders/backgrounds/nav-li.png) no-repeat top left;
			padding:3px 10px 0 10px;
			color:white;
			text-decoration:none;
			}
		ul#navigation li:hover a, ul#navigation li.hover a, ul#navigation li.selected a{
			background-position: 0 -21px;			
			}
		ul#navigation li ul{
			display:none;
			width:141px;
			list-style:none;
			padding:0;
			margin:0;
			}
			ul#navigation li ul li{
				float:none;
				display:block;
				width:141px;
				margin:0;
				border-bottom:1px solid white;
				}
			ul#navigation li ul li a{
				background-color:#dadde1;
				background-image:none;
				color:#92969a;
				}
				ul#navigation li ul li a:hover{
					color:#f36c2c;
					}
			
		ul#navigation li:hover ul, ul#navigation li.hover ul{
			display:block;
			}
div#sub-navigation{
	float:left;
	width:413px;				/* De breedte + padding + border + margin moet even breed zijn als de margins van de contents */
	margin-left:-413px; 	/* Zo breed als de column */
	
}
div#sub-navigation img{
	float:left;
	}
#address{
	float:right;
	}

ul#carousel{
	list-style:none;
	margin:0;
	padding:0;
	overflow:hidden;
	display:block;
	height:75px;
	}
	
ul#carousel li{
	margin:0;
	padding:0;
	float:left;
	width:75px;
	height:75px;
	}
	
	ul#carousel li a{
		height:75px;
		width:75px;
		display:block;
		position:relative;
		overflow:hidden;
		}
	
ul#carousel li a img{
	position:absolute;
	top:0;
	left:0;
	width:75px;
	height:150px;
	}
	ul#carousel li a:hover img{
		top:-75px;
		}

div#carousel-content{
	width:976px;
	height:340px;
	padding:0 14px 15px;
	margin:0;
	display:none;
	background:white;
	position:relative;
	top:-25px;
	text-align:center;
	}
	div#carousel-content.loading{
		background: url(/images/degoedeschilders/icons/loading.gif) no-repeat 50% 50% white;
	}
	div#carousel-content img{
		cursor:pointer;
		}
div#footer{
	clear:left;
	width:100%;
	}
	
a#carousel-prev, a#carousel-next{
	position:absolute;
	top:0;
	left:-12px;
	background: url(/images/degoedeschilders/icons/arrows.png) no-repeat top left;
	display:block;
	width:8px;
	height:75px;
	line-height:12px;
	text-indent:-5555px;
	padding:0;
	}
a#carousel-prev{
	padding-right: 20px;
}	
a#carousel-next{
	left:958px;
	background-position:bottom right;
	padding-left: 20px;
	}
	
a.close-pic{
	position:absolute;
	top:180px;
	right: 15px;
	right/*\**/: 14px\9;
	*top: 205px;
	display:block;
	width:30px;
	height:30px;
	background: url(/images/degoedeschilders/icons/cross.png) no-repeat bottom left;
	_background: url(/images/degoedeschilders/icons/cross_ie.png) no-repeat bottom left;
	z-index:99999;
	margin: 0;
	padding: 0;
	text-indent: -5555px;
}
a.hide{
	display: none;
}

/* Contact formulier
**********************************/
*html form{
	padding-bottom: 20px;
}
form label{
	width: 100px;
	margin-bottom: 2px;
}
form input{
	width: 395px;
	float: left;
	margin-bottom: 2px;
	border: 1px solid #000;
}
textarea, select{
	width:395px;
	border:1px solid #000;
	height:100px;
}
select{height:auto;width:397px;}
*html form input{
	width: 380px;
}
form input#sPhone, form input.medium{
	width: 170px;
	margin-right: 10px;
}
form input#sCity { width: 80px; }
form label.sEmail, form label.medium{
	width: 43px;
}

*html form input#sEmail, *html form input.medium2{
	width: 153px;
}
form input#sEmail, form input.medium2{
	
	width: 170px;
	*width:168px;
}
.contact form label.sEmail{width:48px;}
*html .contact  form input#sEmail{width:158px;}
.contact form input#sEmail{width:155px;*width:153px;}


form input#sPostal{
	width:225px;position:relative;left:25px;	
	 width /*\**/: 133px\9;
}

form label.postal{
	width:53px;
}
form input.box{
	width: auto;
	border: 0;
}
form input#submit, button{
	font-weight: bold;
	width: auto;
	color: #FFF;
	margin-top: 10px;
	border:none;
	background:none;
	font-size:12px;
	padding-top:2px;
	padding-bottom:2px;
	background-color: #1aa0a0;
}

.contact label{width:110px;}
.contact input{width:385px;}


body.contact a{
	color: #000;
	text-decoration: underline;
	font-weight: normal;
}
button{margin-left:0;}
form label.long{
	width: auto;
}
form label.verplicht{
	margin-left: 182px;
	float:right;
	position:relative;
	right:20px;

}
*html form label.verplicht{
	margin-left: 170px;
	width: 188px;
}

#sFunction2{display:none;margin-top:6px;}

p.wrap input{
	width:auto;float:none;
	border:none;
}
body.solliciteren #contents,body.vacatures #contents{height:auto;}

table input{
	width:138px;
}
table input.small{width:70px;float:none;}
label.wrap{
	width:auto;
	float:none;
}
label.wrap input{
	width:auto;
	border:none;
}
	
h3 a{
	float:right;
	margin-right:10px;
	width:420px;
	font-weight:normal;
	color:#000;
	text-decoration:underline;
}
h3 span{float:left; width:80px; font-weight:normal;}

h3 a.green-button{margin-left:15px;text-decoration:none;float:left;font-weight:bold;width:auto;padding-right:10px;}

.contact a.orange-button{width:190px; color:white;font-weight:bold;text-decoration:none;}

body.downloads h3 a{
	width: 330px;
	margin-bottom: 5px;
}
body.downloads h3  span{
	float:left; 
	width:160px; 
	margin-bottom: 5px;
	font-weight:normal;
}

p.news-desc{
	padding-left:95px;
	clear:both;
}
/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: absolute;
	width:975px !important;
	top:90px !important;
	left:15px !important;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
	width:100%; /*ie6 overflow hidden bug*/
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    width: 75px;
    height: 75px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}