/*
* voor:		Kubro
* van:		progresso.nl - ST
* based on:	www.getskeleton.com
* datum: 	aug 2013
*/

/* ----------- Kleuren --------------
FEL BLAUW:  #0090CE #0088CC
D BLAUW		#004E6F
ORANJE		#FF290B
GROEN:		#98D62D
GRIJS: 		#f6f6f6
GRIJS rand:	#ddd

.toprow {width:100%;
		height: 22px;
		border-bottom:2px solid #0088CC;
		background: none repeat scroll 0 0 #f6f6f6;}
---------------------------------- */
.toprow {width:100%;
		height: 32px;}
		
.tel{  
    float: right;
    font-weight: 500;
	letter-spacing:1px;}		

.wrapper {
    background: none repeat scroll 0 0 #fff;
	border-bottom: 5px solid #ccc;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
    padding: 0 10px ;}
	
header.main { padding: 0; background-color:#fff;}

header h1.logo { float: left;
    margin: 0;
    padding-bottom: 1px;}
	
header h1.logo a {
    background: url("../images/logo2.png") no-repeat scroll 0 0 transparent;
    color: transparent;
    display: block;
    height: 70px;
    text-shadow: none;
    width: 240px;
	margin-top:10px;}
	
/* ------------- action unit = motto -------------- */	
.action-unit {
    border-bottom: 1px dotted #efefef;
    border-top: 1px dotted #efefef;
    margin: 15px 0 20px;
    padding: 5px 0;
    text-align: center;}
	
.action-unit h3 {
    color: #0088CC;
    font-size: 22px;
	line-height: 36px;
	font-weight: 300;
    letter-spacing: 1px;
    margin-top: 10px;
}

/* ------------ Navigation --------------- */
.js .selectnav {
    display: block;
}
.selectnav {
    cursor: pointer;
    float: left;
    font-size: 14px;
    height: 37px;
    padding: 8px;
    width: 100%;
}
nav {
    float: right;
}
nav ul, nav li {
    display: inline;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
nav ul li {
    float: left;
    position: relative;
}
nav ul li a, nav ul li a:visited {
    color: #0088CC;
    display: inline-block;
    font-size: 14px;
	font-weight:bold;
	letter-spacing:1px;
	text-transform: uppercase;
	 font-weight: 700;
    border-radius: 2px 2px 2px 2px;
	margin: 12px 5px 10px 5px;
    padding:20px 8px;
    text-decoration: none;
}
nav ul li a:hover {
	background-color:#eee;	
    color: #0088CC;
	font-weight: bold;
}


	
.ie-dropdown-fix {
    position: relative;
    z-index: 5;
}


.navbalk {
	background: none repeat scroll 0 0 #0088CC;
	width:100%;
	height:40px;
	color: #fff;
	position: relative;
	padding: 0;}

.menu{float:left;}

.menu ul li {
    float: left;
    position: relative;
	border-right: 1px solid #fff;}	

.menu ul li a{
	background: none repeat scroll 0 0 #0088CC;
	color:#fff;
	display:inline-block;
	font-size:15px;
	margin: 0;
    padding:11px 20px;
	letter-spacing:1px;
	text-decoration:none;
	text-transform: uppercase;
	 font-weight: 700;}
	 
.menu ul li a:hover{
	background: none repeat scroll 0 0 #ddd;
	color:#0088CC;}	 
	

/* ----------------- tekstvlak naast slider --------------------- */
.tekstvlak  {
    color: #0088CC;
    display: block;
    font-family: 'Open Sans',sans-serif;
    font-size: 42px;
    font-weight: 600;
    line-height: 54px;
    margin-bottom: 11px;
	}
	
	

/*------------- BLOX ------------------ */
.blox { background: none repeat scroll 0 0 #fafafa;
		border: 1px solid #ddd;
		color: #444;
		padding: 10px;
		margin:20px 0;
		text-align:center}
		
.blox h3{text-transform: uppercase;}		


		
.hamer {  background: url("../images/icon-hamer.png") no-repeat scroll left 1px transparent; margin-bottom: 6px;    padding: 5px 0 0 50px;}
.kwast  { background: url("../images/icon-kwast.png") no-repeat scroll left 1px transparent; margin-bottom: 6px;    padding: 5px 0 0 50px;}
.roller {background: url("../images/icon-roller.png") no-repeat scroll left 1px transparent; margin-bottom: 6px;    padding: 5px 0 0 50px;}
.kruiwagen {background: url("../images/icon-kruiwagen.png") no-repeat scroll left 1px transparent; margin-bottom: 6px;    padding: 5px 0 0 50px;}

.blox a:hover { background: none repeat scroll 0 0 #ccc;  text-decoration: none;   transition: all 0.3s linear 0s;}

.blox a { text-decoration:none;}

.bloximg {float:center; margin:5px auto; border:1px solid #ccc;}

/* ------------ Items --------------- */

.items {
    list-style: none outside none;
    margin: 20px 0 50px;
}
.items li {
    background: none repeat scroll 0 0 #EFEFEF;
    border-radius: 6px 6px 6px 6px;
    display: inline-block;
    font: 12px/22px Arial,Helvetica,sans-serif;
    margin: 0 8px;
    min-height: 180px;
    padding: 10px;
    text-align: center;
    vertical-align: top;
}
.items li:first-child {
    margin-left: 0;
}
.items li:last-child {
    margin-right: 0;
}
.items li a {
    color: #8A8A8A;
    cursor: pointer;
    display: block;
    padding: 0 10px;
    text-decoration: none;
    transition: all 1s ease-in-out 0s;
    width: 180px;
}
.items li a:hover {
    background: none repeat scroll 0 0 #1B7BAF;
    color: #CDF1FE;
    text-decoration: none;
    transition: all 1s ease-in-out 0s;
}
.items a h3 {
    color: #98D62D
    font: 18px/30px "Open Sans","helvetica","Arial",sans-serif;
    margin: 0 0 10px;
    text-align: center;
    text-transform: lowercase;
}

/* ------------------ FOOTER ------------------------ */
footer{
    border-top: 3px solid #1B7BAF;
    color: #1B7BAF;
    font-size: 11px;
    list-style: none outside none;
	height: 30px;
	margin:30px 0;
	padding: 2px 0;
    }
	
footer h5 { color: #efefef; margin-bottom: 21px;}
	
footer a, a:visited { color: #1B7BAF;}

footer a:hover {   color: #444;}


/* ---------------- icoontjes --------------------- */
.icon-address {   background: url("../images/icon-home.png") no-repeat scroll left 1px transparent; margin-bottom: 6px;    padding: 0 0 0 40px;}
.icon-tel {  background: url("../images/icon-tel2.png") no-repeat scroll left 1px transparent;    margin-bottom: 6px;    padding: 15px 0 0 40px;}
.icon-email {  background: url("../images/icon-email2.png") no-repeat scroll left 1px transparent; margin-bottom: 6px;    padding: 15px 0 0 40px;}
.icon-email a:hover {   text-decoration: none;   transition: all 0.3s linear 0s;}


.adres { color: #FFFFFF; font-size: 10px;}

.disclaimer{ float:right;}

/* -------------------- back to top ------------------------ */
#backtotop {
    bottom: 20px;
    margin: 0 20px 0 0;
    position: fixed;
    right: 0;
}
#backtotop a {
    background: url("../images/back-top.png") no-repeat scroll 50% 50% #1B7BAF;
    border: 0 none;
    border-radius: 12px 12px 12px 12px;
    display: block;
    height: 45px;
    text-decoration: none;
    width: 45px;}
	
	
#backtotop a:hover { background-color: #474747;}
	
.toptitle {
    border-top: 1px dotted #EFEFEF;
    color: #1B7BAF;
    font: 24px/48px "Roboto","helvetica","Arial",sans-serif normal;
    margin: 0;
    padding: 5px 10px;
}

/* ------------------ breadcrumb ------------------------ */
.breadcrumb {
    border-bottom: 1px dotted #EFEFEF;
    border-top: 1px dotted #EFEFEF;
    color: #464646;
    font-size: 10px;
    margin: 5px 0 20px;
    padding: 5px 10px;
}
.breadcrumb a {
    color: #1B7BAF;
}
.breadcrumb a:hover {
    color: #444444;
    text-decoration: underline;
}


/* --------------- diensten lijsten ------------------------ */
.diensten { margin-top: 42px;}

.diensten li a {
    background: url("../images/list1.png") no-repeat scroll left 50% transparent;
    border-bottom: 1px solid #EFEFEF;
    color: #444444;
    display: block;
    font-size: 14px;
    line-height: 2;
    margin-bottom: -12px;
    padding: 7px 0 7px 30px;
}
.diensten li:first-child a {
    border-top: 1px solid #EFEFEF;
}
.diensten li a:hover {
    background: none repeat scroll 0 0 #EFEFEF;
    color: #1B7BAF;
}
.diensten li .active { color: #ccc;}




/* ------------------ images ------------------------ */
.imgleft {
	border: 1px solid rgb(239, 239, 239);
	float: left;
	margin: 5px 20px 40px 0px;
	padding: 3px;}

.imgright {
	border: 1px solid rgb(239, 239, 239);
	float: right;
	margin: 5px 20px 40px 0px;
	padding: 3px;}	
	

.flex-caption {
    display: none;
}