/*
 * Name: Carpenter
 * Date: October 2011
 * Description: Webdesign by Fritz Airhead Productions
 * Version: 1.0
 * Coder: Fritz
 * Coder URL: http://www.airhead.nl
 */

/*Imports
*/
@import url('reset.css');

/* Global Styles
*/

html {
	overflow-y: scroll;
	
	-webkit-font-smoothing: antialiased;
}

body {
	background: #88B6E0;
	border-top: 15px solid #336;
	color: #393939;
	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 68.8%; /* Base font size: 11px */
	line-height: 1.5;
	margin: 0;
	padding: 0;
	text-align: left;
}

/* Font Sizes
*/
h1 {font-size: 1.636em;	/*18px */
	font-weight: 600;}	 
h2 {font-size: 1.273em;	/*14px */
	font-weight: normal;}	 
h3 {font-size: 1.091em;	/*12px */
	font-weight: 500;}	
p {font-size: 1.091em;	/*12px */
	font-weight: normal;}	

h1, h2, h3, p {
	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

/* Links
*/
a:link {color: #393939;}
a:visited {color: #393939;}
a:hover {color: #393939; text-decoration: none;}
a:active {color: #393939;}

/* Layout
*/
#stage {
	background: #fff;
	margin: 0 auto;
	position: relative;
	width: 960px;
}

header {
	background-image: url(../images/bg-carpenter.jpg);
	clear: both;
	height: 160px;
	position: relative;
	width: 960px;
}

#logo {
	left: 32px;
	position: absolute;
	top: 20px;
}

#naam {
	left: 348px;
	position: absolute;
	top: 52px;
}

nav {
	background-color: #336;
	clear: both;
	height: 30px;
	width: 960px;
}

#algemeen {
	float: left;
	margin: 4px 0 0 32px;
}

#nieuwbouw {
	float: left;
	margin: 4px 0 0 32px;
}

#verbouw {
	float: left;
	margin: 4px 0 0 32px;
}

#renovatie {
	float: left;
	margin: 4px 0 0 32px;
}

#timmerwerk {
	float: left;
	margin: 4px 0 0 32px;
}

a.locatie {
	color: #f00;
	font-size: 1.182em;
	font-weight: bold;
	text-decoration: underline;
}

a.navigatie {
	color: #fff;
	font-size: 1.182em;
	font-weight: bold;
	text-decoration: none;
}

a.navigatie:hover {
	color: #f00;
	text-decoration: underline;
}

section {
	clear: both;
}

#slideshow {
	float: left;
	height: 300px;
	margin: 32px;
	position: relative;
	width: 400px;
}

#slideshow IMG {
	left: 0;
    opacity: 0.0;
	position: absolute;
	top: 0;
    z-index: 1;
}

#slideshow IMG.active {
    opacity: 1.0;
	z-index: 3;
}

#slideshow IMG.last-active {
    z-index: 2;
}

#foto {
	float: left;
	height: 300px;
	margin: 32px;
	width: 400px;
}

#content {
	float: left;
	margin: 32px 0;
	width: 464px;
}

p.adres {
	font-size: 1.273em;
	text-align: center;
}

#thumbheader {
	margin: 32px 32px 0 32px;
	text-align: center;
}

.thumbs {
	float: left;
	height: 80px;
	margin: 28px 0 0 28px;
	width: 105px;
}

#thumbfooter {
	float: left;
	margin: 32px;
	text-align: center;
	width: 960px;
}

footer {
	background-color: #336;
	clear: both;
	color: #fff;
	height: 17px;
	width: 960px;
}

p.copyright {
	font-size: 0.909em;
	font-weight: bold;
	margin: 0 0 0 32px;
}