/*
Copyright: Raar Ontwerp
Design: Raar Ontwerp
Design URL: http://www.raarontwerp.nl
*/

*{
	border:0;
	margin:0;
	padding:0;
	list-style:none
}
html { height: 100% }
body{
	font-family: 'Varela Round', sans-serif;
	font-size:10px;
	margin:0;
	padding:0;
	height:100%;
}

/*SUPERSIZED */	
#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}	
#supersized {  display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }	/*Speed*/
#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }			/*Quality*/
#supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
#supersized a { width:100%; height:100%; display:block; }
#supersized li.prevslide { z-index:-20; }
#supersized li.activeslide { z-index:-10; }
#supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
#supersized li.image-loading img{ visibility:hidden; }
#supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }
/* Text with images */	
#slidecaption { float:right; top:0; color: #FFF; font-size:90px; text-shadow: 0px 0px 4px #333;}
/* PREV NEXT */				
#prevslide, #nextslide{ position:absolute; height:50px; width:50px; top:50%;}
#prevslide{ left:2px; background:url('../images/back.png'); }
#nextslide{ right:2px; background:url('../images/forward.png'); }
#prevslide:active, #nextslide:active{ }
#prevslide:hover{ cursor:pointer; background:url('../images/back-hover.png'); }
#nextslide:hover{ cursor:pointer; background:url('../images/forward-hover.png'); }	
/* SLIDE LIST */				
ul#slide-list{ padding:15px 0; float:right; position:absolute; right:10px;}
ul#slide-list li{ list-style:none; width:10px; height:10px; float:left; margin:0 5px 0 0; }
ul#slide-list li.current-slide a, ul#slide-list li.current-slide a:hover{ background-position:0 0px; }
ul#slide-list li a{ display:block; width:10px; height:10px; background:url('../images/nav-dot.png') no-repeat 0 -20px; }
ul#slide-list li a:hover{ background-position:0 -10px; cursor:pointer; }
/* Progress Bar */		
#progress-back{ z-index:5; position:fixed; bottom:0px; left:0; height:8px; width:100%; background:url('../images/progress-back.png') repeat-x; }
#progress-bar{ position:relative; height:8px; width:100%; background:url('../images/progress-bar.png') repeat-x; }
/* Google map */	
#map_canvas {
	width:100%;
	height:100%;
}
a{
	text-decoration:none;
	color:#0C0;
}
a:hover {
	color:#333;
}
img{
	display:block;
	border:none;
}
/*CONTAINER*/	
#container{
	z-index:10;
	position:absolute;
	top:60%;
	right:100px;
	width:500px;
	bottom:2px;
	color:#FFF;
	background:#FFF;
	box-shadow: inset 0px 0px 4px #333
}
/*CONTENT*/	
#contentimg{
	position:absolute;
	top:170px;
	left:0;
	height:30px;
	width:500px;
	background: url(../images/bg-content.png) ;
}
#content{
	positon:absolute;
	top:200px;
	left:0;
	padding:0 30px 0 30px;
	overflow: auto;
	color:#666;
	border-bottom: solid 30px #FFF;
	background:#FFF;
}
#content .portfolio-item {
	width: 180px; height:100px; padding: 20px; background: #eee; text-align: center;
	float: left; margin: 0 7px 14px 7px;
}
#content .portfolio-item p.btn {
	margin: 0;
}
#content .portfolio-item p.btn a {
	display: block; width: 183px; height: 29px; padding: 7px 0 0 0;
	background: url(images/see-more-bg.png);
	font-weight: bold; text-align: center; text-transform: uppercase;
	text-decoration: none;
}
	
/*LOGO*/
#logo {
	height:125px;
	width:200px;
	margin-top:0px;
}
/* NAV
----------------------------*/	
#nav{
	position: fixed;
	width:200px;
	height:100%;
	top:0px;
	left:100px;
	z-index:20;
}
#nav ul{
	margin-top:2px;
}
.nav li{
	width:200px;
	margin-bottom:2px;
	margin-left:0px;
	line-height:30px;
	font-size:12px;
}
.nav li a{
	padding:0 20px;
	height:30px;
	display:block;
	color:#999;
	background:#fff;
}
.nav a:hover {
	color:#333;
	background: url(../images/nav-hover-bg.png);
}
.nav a:focus,li.cur a{
	color:#fff;
	background: url(../images/nav-bg.png);
}
/*BLOG*/
.blog{
	position:absolute;
	top:100px;
	left:500px;
	width:500px;
	padding-bottom:100px
}
.blog div{
	line-height:1.5em;
	/*background:#fff;*/
	padding:20px 30px
}
.blog div a{
	text-decoration:underline
}
/*TEXT*/
h1{
	padding:0;
	margin:0;
	font-size:16px;
}
h2{
	text-transform:uppercase; 
	font-size:14px;
}
h3{
	font-weight:400;
	font-size:12px;
}
h3 span{
	position:absolute;
	right:510px;
	top:29px;
	background:#000;
	text-align:center;
	padding:0 5px;
	white-space:nowrap;
	display:block;
	color:#fff;
	font-weight:normal;
	font-size:12px;
}
h4{
	font-weight:400;
	font-size:11px;
}
h5{
	padding:5px 5px;
	font-weight:normal;
	line-height:17px;
	font-size:10px;
}
/* TWITTER BOX */
#twitter {
	position:absolute;
	bottom:45px;
	width:200px;
}
/* TWITTER BUTTON */
#twitter ul{
	margin-bottom:2px;
}
.twitter li{
	width:200px;
	height:30px;
	margin-bottom:2px;
	margin-left:0px;
	line-height:30px;
	font-size:12px;
}
.twitter li a{
	padding:0 20px;
	display:block;
	color:#666;
}
.twitter a:hover {
	color:#333;
	background: url(../images/nav-hover-bg.png);
}
.twitter a:focus,li.cur a{
	color:#fff;
	background: url(../images/nav-bg.png);
}
/* TWEETS */
#twitter .twtr-hd { display:none !important; }
#twitter .twtr-timestamp { display: none !important; }
#twitter .twtr-reply { display: none !important; }
#twitter .twtr-fav { display: none !important; }
#twitter .twtr-rt { display: none !important; }
#twitter .twtr-ft { display:none !important; }
#twitter .twtr-widget,
#twitter .twtr-doc {
    width: 100%;
    height: auto;
	background: #FFF;
}
#twitter .twtr-user { display:none !important;} 
#twitter .twtr-tweet a:link,
#twitter .twtr-tweet a:visited,
#twitter .twtr-tweet a:hover { 
	color: #0C0 !important;
	background:none !important;
}
#twitter .twtr-tweet-wrap { border-bottom: 1px solid #0C0 !important; }
#twitter .twtr-tweet .twtr-tweet-text p{ padding-bottom: 0px !important; }
#twitter .twtr-tweet .twtr-tweet-text p {
    color: #333 !important;
	font-size:11px;
}
/*FOOTER */
#footer {
	position:absolute;
	z-index:30;
	height:45px;
	width:200px;
	bottom:0px;
	background:#FFF;
}
#footer a {
	color:#000;
}
#footer a:hover {
	color:#0C0;
}