/* Standards */
html {
	background-color: #f7f7f7;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	background: url('../images/bg_body.png') repeat-x top left;
}

#wrapper {
	width: 960px;
	margin: 0 auto;
}

/* CSS3 @Font-face */ 
@font-face {
    font-family: 'AllerBold';
    src: url('../font/aller_bd-webfont.eot');
    src: url('../font/aller_bd-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/aller_bd-webfont.woff') format('woff'),
         url('../font/aller_bd-webfont.ttf') format('truetype'),
         url('../font/aller_bd-webfont.svg#AllerBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AllerItalic';
    src: url('../font/aller_it-webfont.eot');
    src: url('../font/aller_it-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/aller_it-webfont.woff') format('woff'),
         url('../font/aller_it-webfont.ttf') format('truetype'),
         url('../font/aller_it-webfont.svg#AllerItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}



/* Let's get social */
#lets_get_social {
	padding-top: 10px;
	height: 31px;		
}

#lets_get_social ul {
	float: right;
	display: inline;
	
	/* CSS3 Opacity */	
	-moz-opacity: 0.80;
	-khtml-opacity: 0.80;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	opacity: 0.80;
	
	/* CSS3 transition */
	-webkit-transition: all 300ms ;
	-moz-transition: all 300ms ;
	-o-transition: all 300ms ;
	transition: all 300ms ;
}

#lets_get_social ul:hover {
	/* CSS3 Opacity */	
	-moz-opacity: 1;
	-khtml-opacity: 1;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	opacity: 1;	
}

#lets_get_social ul li span {
	color: #b2b2b2;
	font-size: 12px;
	float: left;
	display: inline-block;
	padding-top: 5px;
}


#lets_get_social ul li {
	float: left;
	display: inline;
	padding-left: 8px;
}

/* Header */
#header {
	background: url('../images/bg_header.png') no-repeat bottom right;
	width: 820px;
	height: 323px;
	margin: 40px auto 0;
	position: relative;
}

@font-face {
    font-family: '../font/leagueGothicRegular';
    src: url('../font/league_gothic-webfont.eot');
    src: url('../font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/league_gothic-webfont.woff') format('woff'),
         url('../font/league_gothic-webfont.ttf') format('truetype'),
         url('../font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


#header h1 {
	display: block;	
	padding-top: 25px;
	font-family: '../font/leagueGothicRegular', Arial, Helvetica, sans-serif;
	font-size: 100px;
	color: #f7f7f7;
	text-transform: uppercase;
}

.no-fontface #header h1 {
	font-size: 50px;
	font-weight: bold;
}

#header h2 {
	font-family: 'AllerItalic', Arial, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 24px;
	color: #f7f7f7;
	padding-left: 3px;
	width: 525px;
}

.no-fontface #header h2 {
	font-style: italic;
}

/* Container */
#container {
	padding: 70px 70px 45px;
	background-color: #fafafa;
	overflow: hidden;
	
	/* CSS3 Border Radius */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px; 
	
	/* CSS3 Box Shadow */
	-webkit-box-shadow: 0px 0px 5px 0px rgba(000, 000, 000, 0.65);
	-moz-box-shadow: 0px 0px 5px 0px rgba(000, 000, 000, 0.65);
	box-shadow: 0px 0px 5px 0px rgba(000, 000, 000, 0.65); 
}

#informatie {
	width: 260px;	
	float: left;
	display: inline;
	margin-right: 70px;
	padding-top: 25px;
}

#informatie h3 {
	color: #4c4c4c;	
	font-family: 'AllerBold', Arial, Helvetica, sans-serif;
	font-size: 17px;
	padding-bottom: 1px;
}

.no-fontface #informatie h3 {
	font-weight: bold;
}

#informatie ul {
	margin-bottom: 7px;
	overflow: hidden;
}

#informatie ul li {
	color: #737373;
	font-size: 12px;
	float: left;
	display: inline;
	padding-bottom: 3px;
}

#informatie ul li.left {
	width: 180px;
}

#informatie ul li a {
	color: #737373;
}

#informatie ul li a:hover {
	color: #000;
}

/* Carousel */
#werk {
	float: left;
	display: inline;
	position: relative;
	
}

#werk ul li {
	float: left;
	display: inline;
	background-color: #fff;	
	border: 1px solid #d9d9d9;
	margin-right: 21px;
	
	/* CSS3 Border Radius */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px; 
	
	/* CSS3 Box Shadow */
	-webkit-box-shadow: 0px 0px 3px 0px rgba(000, 000, 000, 0.20);
	-moz-box-shadow: 0px 0px 3px 0px rgba(000, 000, 000, 0.20);
	box-shadow: 0px 0px 3px 0px rgba(000, 000, 000, 0.20); 	
	
	/* CSS3 Opacity */	
	-moz-opacity: 0.85;
	-khtml-opacity: 0.85;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);
	opacity: 0.85;
	
	/* CSS3 transition */
	-webkit-transition: all 250ms;
	-moz-transition: all 250ms;
	-o-transition: all 250ms;
	transition: all 250ms;
}

#werk ul li:hover {
	background-color: #f0f1f5;
	border-color: #b3b3b3;
	
	/* CSS3 Opacity */	
	-moz-opacity: 1;
	-khtml-opacity: 1;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	opacity: 1;
}

#werk ul li span.title {
	font-size: 16px;
	color: #666666;
	font-family: 'AllerBold', Arial, Helvetica, sans-serif;	
	padding: 2px 0 13px;
	line-height: 15px;	
}

#werk ul li span {
	font-size: 12px;
	line-height: 19px;
	color: #595959;
	display: inline-block;	
	float: left;	
}

#carousel {
	padding: 10px;
}

#carousel li a {
	padding: 20px;
	display: inline-block;
	width: 175px;
	text-decoration: none;
}

#werk a#prev, #werk a#next {
	background:url('../images/carousel.png') no-repeat;
	width: 29px;
	height: 29px;
	display: block;
	position: absolute;
	top: 111px;
	text-indent: -9999px;
	outline: none;
}

#werk a#prev { left: -12px; background-position: 0 0; }
#werk a#prev:hover { background-position: 0 -29px; }
#werk a#next { right: -12px; background-position: -29px 0; }
#werk a#next:hover { background-position: -29px -29px; }
	
#pagination {
	text-align: center;
	margin-top: 10px;
}

#pagination a {
	background: url('../images/carousel.png') -9px -67px no-repeat transparent;
	width: 11px;
	height: 11px;
	display: inline-block;
	margin-right: 8px; 
}

#pagination a.selected {
	background-position: -38px -67px;
	cursor: default;
}

#pagination a span {
	display: none;
}

/* Footer */
#footer {
	text-align: right;
	padding: 55px 0 20px;
}

#footer span {
	color: #737373;
	font-size: 12px;
}

#footer span a { color: #737373; }
#footer span a:hover { color: #404040; }