/* CSS Document */

body { margin: 0px; padding: 0px; font-family:Arial, Helvetica, sans-serif; }
.font {font-family: 'Renovatie', sans-serif;}
.narrow {font-family: 'Narrow', sans-serif;}
img{ border:none;}

a { text-decoration:none;}
a:hover { text-decoration:underline;}

a.font { font-size:10px; font-weight:bold; color: #ff6600; text-decoration:none; }
a.font:hover { color: #ffffff; }

a.firstnav { font-family: 'Narrow', sans-serif; font-size:14px; color: #ffffff; text-decoration:none; display: block; width: auto; height: 31px; padding: 47px 9px 0px 9px; float: left; margin-left: 255px; }
a.nav { font-family: 'Narrow', sans-serif; font-size:14px; color: #ffffff; text-decoration:none; display: block; width: auto; height: 31px; padding: 47px 9px 0px 10px; float: left;  }
a.firstnav:hover, a.nav:hover { background: url(../images/btn_hover.png) center top ; color: #ff6600;}
a.firstnav_ { font-family: 'Narrow', sans-serif; font-size:14px; color: #ffffff; text-decoration:none; display: block; width: auto; height: 31px; padding: 47px 9px 0px 9px; float: left; margin-left: 255px;background: url(../images/btn_on.png) center top ;}
a.nav_ { font-family: 'Narrow', sans-serif; font-size:14px; color: #ffffff; text-decoration:none; display: block; width: auto; height: 31px; padding: 47px 9px 0px 9px; float: left; background: url(../images/btn_on.png) center top ;}
a.firstnav_:hover, a.nav_:hover { text-decoration:none;}

a.main-btn, a.main-btn:hover { color:#ff6600; }

h1 { font-family: 'Renovatie', sans-serif; font-size: 21px; font-weight:bold; padding: 22px 0 0 0; margin:0 ; font-weight:bold;}
h1.white { font-size: 25px;}
h2 { font-family: 'Renovatie', sans-serif; font-size: 16px; color: #ff6600; font-weight:bold;}
h3 { font-family: 'Renovatie', sans-serif; font-size: 14px; color: #333333;}
h4 { font-size: 16px; color: #000000; font-weight:100; font-stretch:condensed;}
h4.orange { color: #ff6600; position: relative; top: -15px;}
h4.black { position: relative; top: -30px;}
h4 img { margin-top: 10px;}
h5 { font-size: 12px; color: #333333; font-weight:100;}

#header { background: #333333;}
#footer { background: #ff6600; height: 170px; border-top: solid 1px #333333;}
#contact { background: #333333 url(../images/renovatie_top.png) center top no-repeat ; height: 10px;}

#header-content, #footer-content, #main-content, #contact-content, #heading-content { width: 1080px; margin-left: auto; margin-right: auto; }
#contact-content { text-align:right;}
#header-content { height: 465px;}
#heading-content { height: 194px;}
#main-content { background:url(../images/renovatie_striping.png) left top no-repeat; min-height: 450px;}

/*  NAV  */
#btn_home { display: block; width: 180px; height: 465px; float: left; background:url(../images/renovatie_icon.png) left top no-repeat;}
#btn_main { display: block; width: 180px; height: 194px; float: left; background:url(../images/renovatie_icon.png) left top no-repeat;}
#navigation { display: block; width: 900px; height: 78px; background:url(../images/renovatie.png) left top no-repeat; float: left;}
#contact-content a { position: relative; top: -3px;}

/*  SLIDESHOW  */
#slider { display: block; width: 900px; height: 387px; float: left;}

/*  HEADER  */
#heading { display: block; width: 900px; height: 116px; float: left; background:url(../images/header-2014.png) center top no-repeat;}

/*  MAIN  */
.main-title { font-family: 'Renovatie', sans-serif; display: block; width: 466px; height: 43px;  text-align: right; margin-left: 614px;}
.btn { display: block; width: auto; height: 18px; font-size: 16px; background-color: #ffffff; padding: 5px 0px 5px 10px;  margin-top: 104px; text-align:right; float: right;  font-family: 'Narrow', sans-serif; }
.kelderdichting { background:url(../images/renovatie_kelderdichting.png) center top no-repeat;}
.doorvoeren { background:url(../images/renovatie_doorvoeren.png) center top no-repeat;}
.geveldichting { background:url(../images/renovatie_geveldichting.png) center top no-repeat;}
.betonherstelling { background:url(../images/renovatie_betonherstellingen.png) center top no-repeat;}
.terrasvernieuwing { background:url(../images/renovatie_terrasvernieuwing.png) center top no-repeat;}
.gevelrenovatie { background:url(../images/renovatie_gevelrenovatie.png) center top no-repeat;}
.orange {color: #ff6600}
.white { color: #ffffff}
.grey { color: #333333;}
a.grey { position: relative; top: -40px; width: 280px;}
a.grey:hovers { color: #ff6600}

/*  FOOTER  */
#adres { display: block; width: 130px; background:url(../images/renovatie_logo.png) left top no-repeat; padding: 60px 0px 0px 50px; color: #ffffff; font-size: 12px; float: left;}
#sitemap { display: block; width: 620px; color: #ffffff; font-size:12px; float: left; text-align: right; padding: 36px 30px 0px 0px; line-height: 20px; }
#sitemap a { color:#333333; }
#call-to-action { display: block; width: 250px; height: 101px; color: #ffffff; font-size:14px; float: left; padding: 36px 0px 0px 0px; font-weight:100; background:url(../images/renovatie_telnr_wit.png) left top no-repeat;  }
#credits, #credits a { font-size:9px;  color:#333333; }

/*  CONTACT  */
googlemaps.a { font-family: 'Renovatie', sans-serif; font-size:9px; text-decoration: none; color: #333333;  }
googlemaps.a:hover { color: #ff6600; text-decoration: underline; }


/* Slider */
		
#slider ul, #slider li { margin:0; padding:0; list-style:none; }
#slider li { width:900px; height:387px; overflow:hidden; }	
#slider li a:hover { text-decoration: none;}						
		
p#controls { margin:0; position:relative;} 
	
#prevBtn, #nextBtn { display:block; margin:0; overflow:hidden; text-indent:-8000px; width:13px; height:41px; position:absolute; left:180px; top:251px; }	
#nextBtn { left:1067px;}														
#prevBtn a, #nextBtn a {  display:block; width:13px; height:41px; background:url(../images/slider/btn_prev.gif) no-repeat 0 0;	}	
#nextBtn a { background:url(../images/slider/btn_next.gif) no-repeat 0 0;	}												

#slide01 { background:url(../images/slider/01.jpg) left top no-repeat; height: 387px; padding: 275px 0px 0px 50px;}
#slide02 { background:url(../images/slider/slide_betonherstelling.png) left top no-repeat;  height: 387px; padding: 125px 0px 0px 50px;}
#slide03 { background:url(../images/slider/slide_gevelrenovatie.png) left top no-repeat;  height: 387px; padding: 125px 50px 0px 475px;}
#slide04 { background:url(../images/slider/slide_kelderdichting.png) left top no-repeat;  height: 387px; padding: 50px 50px 0px 50px;}
#slide04 h2, #slide04 h5 {margin-left: 300px;}
#slide04 h1.white { font-size: 28px;}
#slide05 { background:url(../images/slider/slide_terrasvernieuwing.png) left top no-repeat;  height: 387px; padding: 100px 50px 0px 50px;}
#slide06 { background:url(../images/slider/slide_gevel.png) left top no-repeat;  height: 387px; padding: 100px 50px 0px 50px;}


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
body { width: 100%;}
#header { background: #333333; width: 1180px; margin: 0px; display: block; }
#footer { background: #ff6600; height: 170px; border-top: solid 1px #333333;  width: 1180px; margin: 0px; display: block; }
#contact { background: #333333 url(../images/renovatie_top.png) center top no-repeat ; height: 10px; width: 1180px; margin: 0px; display: block;}
#header-content, #footer-content, #main-content, #contact-content, #heading-content { width: 1080px; margin: 0px; }
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
body { width: 100%;}
#header { background: #333333; width: 1180px; margin: 0px; display: block; }
#footer { background: #ff6600; height: 170px; border-top: solid 1px #333333;  width: 1180px; margin: 0px; display: block; }
#contact { background: #333333 url(../images/renovatie_top.png) center top no-repeat ; height: 10px; width: 1180px; margin: 0px; display: block;}
#header-content, #footer-content, #main-content, #contact-content, #heading-content { width: 1080px; margin: 0px; }
}