/*
	Title:      Screen styles
	Author:     Poort80 - Frontend
	Copyright:  2009, Poort80  All rights resevered
*/

/* common 
============================================================= */
body {
	margin:0px;
	padding:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height: 18px;
	color:#fff;
	background:url(../gfx/bg_repeater.jpg) repeat-y;
}
a img, img {
	border:none;
	outline:none;
}
h1 {
	font-size:20px;
}
h2 {
	font-size:18px
}
h3 {
	font-size:16px
}
h4 {
	font-size:14px
}
h5 {
	font-size:12px
}
h6 {
	font-size:11px
}
h1, h2, h3, h4, h5, h6, strong, dt {
	font-weight:bold;
}
p, h1, h2, h3, h4, h5, h6, ol, ul, dl, hr, pre, table, address, fieldset, input, caption, legend {
	margin:0px 0px 10px 0px;
}
a {
	color:#4ed9a0;
	border-bottom:1px dotted #ff0078;
	text-decoration:none;
	outline:none;
}
a:hover {
	color:#4ed9a0;
	border-bottom:none;
}
object {
	outline:none;
}
ol, ul, dl {
	margin-left:20px;
}
ol li {
	list-style:decimal outside;
}
ul li {
	list-style-image:url(../gfx/list_drup.png);
}
optgroup {
	font-weight:normal;
}
abbr, acronym {
	border-bottom:1px dotted #000;
	cursor:help;
}
em {
	font-style:italic;
}
del {
	text-decoration:line-through;
}
table {
	border-collapse:collapse;
}
th, td {
	padding:2px;
}
th {
	font-weight:bold;
	text-align:center;
}
caption {
	text-align:center;
}
sup {
	vertical-align:super;
}
sub {
	vertical-align:sub;
}
button, input[type="checkbox"], input[type="radio"], input[type="reset"], input[type="submit"] {
	padding:1px;
}
input,
textarea{
	outline:none;
}
textarea{
	font-family:Arial, Helvetica, sans-serif;
	overflow:auto;
	font-size:12px;
}
label {
	cursor:pointer;
}
pre, code, kbd, samp, tt {
	font-family:monospace;
}
/* common trigger classes
============================================================= */
.hide {
	display:none;
}
hr {
	border:0px #ccc solid;
	border-top-width:1px;
	clear:both;
	height:0px;
}
.float-right {
	float:right;
}
.float-none {
	float:none;
}
.float-left {
	float:left;
}
.clear-left {
	clear:left;
}
.clear-both {
	clear:both;
}
.clear-right {
	clear:right;
}
/* button (a)
============================================================= */
.btn{
	display:inline-block;
	height:30px;
	line-height:30px;
	font-weight:bold;
	text-decoration:none;
	border:none;
}
.btn span.txt{
	padding:0px 10px 0px 15px;
	display:inline-block;
	height:30px;
	background:url(../gfx/btn_standard_l.png) no-repeat left top;
	color:#fff;
	float:left;
}
.btn span.arrow{
	display:inline-block;
	width:25px;
	height:30px;
	text-indent:-9999px;
	background:url(../gfx/btn_standard_r_green.png) no-repeat right top;
}
.btn:hover span.txt{
	background:url(../gfx/btn_standard_l_on.png) no-repeat left top;
	color:#aaa;
}
.btn:hover span.arrow{
	background:url(../gfx/btn_standard_r_green_on.png) no-repeat right top;
}
/* button (input)
============================================================= */
.btn.submit{
	display:inline-block;
	height:30px;
	line-height:30px;
	font-weight:bold;
	text-decoration:none;
	float:right;
	cursor:pointer;
}
.btn.submit span.txt{
	padding:0px;
	display:inline-block;
	height:30px;
	background:url(../gfx/btn_standard_l.png) no-repeat left top;
	color:#fff;
	float:left;
}
.btn.submit span.txt input{
	padding:0px 10px 0px 15px;
	border:none;
	width:100px;
	height:30px;
	background:none;
	color:#fff;
	font-weight:bold;
	cursor:pointer;
}
.btn.submit:hover span.txt input{
	color:#aaa;
}
.btn.submit span.arrow{
	display:inline-block;
	width:25px;
	height:30px;
	text-indent:-9999px;
	background:url(../gfx/btn_standard_r_pink.png) no-repeat right top;
}
.btn.submit:hover span.txt{
	background:url(../gfx/btn_standard_l_on.png) no-repeat left top;
}
.btn.submit:hover span.arrow{
	background:url(../gfx/btn_standard_r_pink_on.png) no-repeat right top;
}
/* header > content > branding
============================================================================= */
.branding {
	padding-top:20px;
	float:left;
}
.branding a {
	display:block;
	width:139px;
	height:119px;
	background:url(../gfx/logo.png) no-repeat;
	text-indent:-9999px;
	border:none;
}
/* header > content > nav-main
============================================================================= */
.nav-main {
	padding-top:40px;
	float:right;
	width:660px;
	height:100px;
	position:relative;
}
.nav-main ul {
	margin:0px;
	padding:0px;
}
.nav-main ul li {
	margin:0px;
	float:left;
	list-style:none;
}
.nav-main ul li ul {
	position:absolute;
	left:0px;
	top:90px;
	width:640px;
	background:url(../gfx/dotted_line.png) repeat-x;
	display:none;
}
.nav-main ul li.active ul{
	display:block;
}
.nav-main ul li ul li {
	margin:0px 25px 0px 0px;
}
.nav-main ul li ul li a {
	padding-top:10px !important;
	font-size:12px;
	height:auto;
}
.nav-main ul li ul li:last-child {
	margin:0px;
}
.nav-main ul li a {
	padding-top:15px;
	height:30px;
	text-align:center;
	display:block;
	font-size:14px;
	color:#121e2d;
	text-decoration:none;
	border:none;
}
.nav-main ul li.active ul li a{
	color:#121e2d;
}
.nav-main ul li ul li.active a{
	color:#fff;
}
.nav-main ul li.active ul li a:hover{
	color:#fff;
	cursor:pointer;
}
.nav-main ul li a:hover, .nav-main ul li.active a {
	color:#fff;
	padding-bottom:4px;
}
.nav-main ul li a:first-child {
	width:77px;
}
.nav-main ul li.active a:first-child {
	background:url(../gfx/btn_home.png) no-repeat;
}
.nav-main ul li ul li a:first-child{
	width:auto !important;
	background:none !important;
}
.nav-main ul li a[title="Zwembaden"]  {
	width:125px;
}
.nav-main ul li.active a[title="Zwembaden"]  {
	background:url(../gfx/btn_zwembaden.png) no-repeat;
}
.nav-main ul li a[title="Afdekking"] {
	width:117px;
}
.nav-main ul li.active a[title="Afdekking"] {
	background:url(../gfx/btn_afdekking.png) no-repeat;
}
.nav-main ul li a[title="Installaties"] {
	width:132px;
}
.nav-main ul li.active a[title="Installaties"] {
	background:url(../gfx/btn_installaties.png) no-repeat;
}
.nav-main ul li a[title="Renovatie"] {
	width:113px;
}
.nav-main ul li.active a[title="Renovatie"]{
	background:url(../gfx/btn_renovatie.png) no-repeat;
}
.nav-main ul li a[title="Service"] {
	width:87px;
}
.nav-main ul li.active a[title="Service"] {
	background:url(../gfx/btn_service.png) no-repeat;
}
/* content > big-box
============================================================================= */
.big-box {
	margin-bottom:20px;
}
.bb-top {
	width:940px;
	height:15px;
	background:url(../gfx/big_box_top.png) no-repeat;
}
.bb-bottom {
	width:940px;
	height:15px;
	background:url(../gfx/big_box_bottom.png) no-repeat;
}
.bb-content {
	padding:5px 20px;
	width:900px;
	overflow:hidden;
	background:url(../gfx/big_box_repeater.png) repeat-y;
}
/* intro */
.intro {
	margin-right:20px;
	width:280px;
	float:left;
}
.intro h1 {
	color:#fff;
}
.intro p {
	color:#fff;
}
.photogallery {
	padding:2px 0px 0px 2px;
	float:left;
	position:relative;
}
.photogallery.big{
	width:596px;
	height:256px;	
}
.photogallery.small{
	width:256px;
	height:156px;	
}
.photogallery .overlay{
	position:absolute;
	top:0px;
	left:0px;
}
.photogallery.big .overlay{
	width:600px;
	height:260px;
	background:url(../gfx/photogallery_overlay.png) no-repeat;
}
.photogallery.small .overlay{
	width:260px;
	height:160px;
	background:url(../gfx/photogallery_overlay2.png) no-repeat;
}
.photogallery .btn_overlay{
	display:block;
	position:absolute;
	top:-3px;
	right:-6px;
	text-indent:-9999px;
	border:none;
	z-index:20;
}
.photogallery .btn_overlay{
	width:129px;
	height:76px;	
	background:url(../gfx/photogallery_btn_overlay.png) no-repeat top left;
}
.photogallery .btn_overlay:hover{
	background-position:bottom left;
}
/* slider  */
#slider{
	overflow:hidden;
	position:relative;
	z-index:15;
}
#slider ul, #slider li{
	margin:0px;
	padding:0px;
	list-style:none;
}
#slider li a{
	border:none;
}
.photogallery.small #slider li a{
	position:relative;
	z-index:10;
}
.photogallery.big #slider li{
	width:596px;
	height:256px;
	overflow:hidden;
}
.photogallery.small #slider li{
	width:256px;
	height:156px;	
	overflow:hidden;
}
#prevBtn, #nextBtn{
	display:block;
	position:absolute;
	z-index:30;
}
.photogallery.big #prevBtn,
.photogallery.big #nextBtn{
	top:113px;
}
.photogallery.small #prevBtn,
.photogallery.small #nextBtn{
	top:70px;
}
#prevBtn{
	left:10px;	
}
#nextBtn{
	right:10px;
}
#prevBtn a, #nextBtn a{
	display:block;
	position:relative;
	text-indent:-9999px;
	border:none;
}
.photogallery.big #prevBtn a, 
.photogallery.big #nextBtn a{
	width:36px;
	height:36px;	
}
.photogallery.small #prevBtn a, 
.photogallery.small #nextBtn a{
	width:25px;
	height:25px;	
}
.photogallery.big #prevBtn a{
	background:url(../gfx/btn_prev.png) no-repeat top left;
}
.photogallery.big #nextBtn a{
	background:url(../gfx/btn_next.png) no-repeat top left;
}
.photogallery.small #prevBtn a{
	background:url(../gfx/btn_prev2.png) no-repeat top left;
}
.photogallery.small #nextBtn a{
	background:url(../gfx/btn_next2.png) no-repeat top left;
}
.photogallery.big #prevBtn a:hover,
.photogallery.big #nextBtn a:hover,
.photogallery.small #prevBtn a:hover,
.photogallery.small #nextBtn a:hover{
	background-position:bottom left;
}
/* content > small-box
============================================================================= */
.small-box {
	margin:0px 20px 20px 0px;
}
.sb-top {
	width:300px;
	height:15px;
	background:url(../gfx/small_box_top.png) no-repeat;
}
.sb-bottom {
	width:300px;
	height:15px;
	background:url(../gfx/small_box_bottom.png) no-repeat;
}
.sb-content {
	padding:5px 20px;
	width:260px;
	overflow:hidden;
	background:url(../gfx/small_box_repeater.png) repeat-y;
}
/* contact */
.contact .errors{
	margin-bottom:10px;
	padding:5px;
	background-color:#ffd8d8;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border:2px solid #86a0ae;
	color:#121e2d;
	font-size:11px;
}
.contact .errors strong{
	background:url(../gfx/icons/error.png) 0px 2px no-repeat;
	padding-left:20px;
	display:inline-block;
	color:#121e2d;
	font-size:12px;
}
.contact span.required{
	color:#ff0078;
}
.contact label{
	font-size:11px;
	font-weight:bold;
}
.contact span.text{
	margin:0px 0px 5px 0px;
	background:url(../gfx/rounded_input_l.png) no-repeat top left;
	height:30px;
	display:block;
}
.contact span.text input{
	margin:0px 0px 0px 6px;
	padding:7px 0px 0px 0px;
	background:url(../gfx/rounded_input_r.png) no-repeat top right;
	height:23px;
	display:block;
	width:254px;
	border:none;
}
.contact span.text:focus{
	background-position:bottom left;
}
.contact span.text input:focus{
	background-position:bottom right;
}
.sb-content .contact span.textarea{
	margin:0px;
	background:url(../gfx/rounded_textarea_l.png) no-repeat top left;
	height:123px;
	display:block;	
}
.contact span.textarea textarea{
	margin:0px 0px 0px 6px;
	padding:7px 0px 0px 0px;
	background:url(../gfx/rounded_textarea_r.png) no-repeat top right;
	height:116px;
	display:block;
	width:254px;
	border:none;
}
.contact span.textarea:focus{
	background-position:bottom left;
}
.contact span.textarea textarea:focus{
	background-position:bottom right;
}
.contact p.required{
	color:#ff0078;
	font-size:10px;
}
/* service-box */
.service-box{
	height:260px;
	font-size:11px;
}
.service-box h3{
	margin:0px;
}
.service-box p,
.service-box a{
	display:inline
}
.service-box a.small-photo{
	margin-bottom:10px;
	width:260px;
	height:125px;
	display:block;
	position:relative;
	border:none;
	overflow:hidden;
}
.service-box a.small-photo img{
	margin:2px 0px 0px 2px;
}
.service-box a.small-photo span.overlay{
	width:260px;
	height:125px;
	position:absolute;
	top:0px;
	left:0px;
	display:block;
	background:url(../gfx/service_photo_overlay.png) no-repeat;
}
/* adress */
.adress h2{
	margin:0px 0px 4px 0px;
}
.adress h5{
	margin:10px 0px 5px 0px;
	display:none;
}
.adress .vcard h5{
	display:block;
}
.adress .tel{
	padding:0px 0px 0px 20px;
	background:url(../gfx/icons/mobile.png) 3px 0px no-repeat;
}
.adress .tel2{
	padding:0px 0px 0px 20px;
	background:url(../gfx/icons/phone.png) 0px 0px no-repeat;
}
/* content > medium-box
============================================================================= */
.medium-box {
	margin-bottom:20px;
	float:left;
}
.mb-top {
	width:620px;
	height:15px;
	background:url(../gfx/medium_box_top.png) no-repeat;
}
.mb-bottom {
	width:620px;
	height:15px;
	background:url(../gfx/medium_box_bottom.png) no-repeat;
}
.mb-content {
	padding:5px 20px;
	width:580px;
	min-height:797px;
	overflow:hidden;
	background:url(../gfx/medium_box_repeater.png) repeat-y;
}
.mb-content .textbox h5{
	margin:0px;
}
/* footer > content
============================================================================= */

#footer .content .site-info{
	float:left;
	width:300px;
}
#footer .content .site-info p{
	font-size:11px;	
}
#footer .content .nav-supplementary{
	float:right;
}
#footer .content .nav-supplementary ul{
	margin:0px;
}
#footer .content .nav-supplementary ul li{
	margin:0px;
	padding-right:30px;
	list-style:none;
	float:left;
	background:url(../gfx/dot.png) no-repeat right center;
}
#footer .content .nav-supplementary ul li.last{
	padding:0px;
	background:none;
}
#footer .content .nav-supplementary ul li a{
	margin:0px;
	border:none;
	color:#fff;
	font-size:11px;
}
#footer .content .nav-supplementary ul li a:hover,
#footer .content .nav-supplementary ul li.active a{
	border-bottom:1px dotted #4ed9a0;	
}
/* login */
.login input{
	margin:0px;
}
.login td{
	vertical-align:top;
}