@charset "utf-8";
/* CSS Document */
html{ overflow-y: scroll; }
body{
	background: #fbfbfb url(../images/bg.jpg) top center repeat-x;
	font-family: "Trebuchet MS";
}

.clear{ clear: both; }
.left{ float: left; }
.left2{ float: left; margin: 0 0 0 10px; }
strong{ color: #ed6400; font-weight: bold; font-size: 12px; }
span.redirect{ unicode-bidi:bidi-override; direction: rtl; }

/*     HEADING     */
h1{ position: absolute; top: -999px; }
h2{ color: #ED6400; font-size: 13px; margin: 10px 0 5px 0; }
h3{ color: #ed6400; font-size: 12px; margin: 15px 0 10px 0; }
h4{ color: #fff; font-size: 20px; margin: 10px 0 0 10px; }

/*     HEAD     */
#wrapper-head{ float: left; background: url(../images/bg-head.png) top left repeat-x; width: 100%; height: 126px; }
#wrapper-head #head{
	width: 900px;
	height: 126px;
	margin: 0 auto;
}

/* logo */
#logo{ float: left; }

/* menu */
ul.tabs{ float: left; margin: 80px 0 0 383px; }
ul.tabs li {
	display: block;
	float: left;
	width: 50px;
	margin: 0 0 0 10px;
}
ul.tabs li a.menu {
	display: block;
	background: url(../images/bg-menu.jpg) top left no-repeat;
	position: relative;
	width: 51px;
	height: 34px;
}
ul.tabs li a.menu span{
	display: block;
	position: relative;
	width: 41px;
	height: 22px;
	padding: 12px 0 0 10px;
	overflow: hidden;
}
ul.tabs li a.menu:hover{ top: -12px; padding: 12px 0 0 0; }
ul.tabs li a.menu:hover span{ overflow: visible; top: -12px; padding: 12px 0 0 10px; }
ul.tabs li.active{
	float: left;
	display: block;
	position: relative;
	top: -52px;
	background: #535353 url(../images/bg-menu-active.jpg) top left no-repeat;
	width: 151px;
	height: 98px;
	overflow: hidden;
}
ul.tabs li.active a.menu{ display: none; }
ul.tabs li .hidden { display:none; }
ul.tabs li .show { display:visible; }
p.menu{ color: #fff; margin: 10px 10px 0 10px; font-size: 12px; }
.active-icon{ float: right; margin: 0 10px 0 0; }


/*     CONTENT     */
#wrapper-content{ float: left; background: #333333 /*url(../images/bg-content1.png) url(http://www.aboutdj.nl/templates/aboutdj/img/bg.jpg)*/ url(http://www.sohtanaka.com/web-design/examples/popoutdetails/bg.jpg) top left; width: 100%; }
#wrapper-content #content{
	width: 900px;
	margin: 0 auto;
	padding: 10px 0 0 0;
}
.content-item{
	float: left;
	display: block;
	background: #fff;
	width: 880px;
	margin: 0 0 10px 0;
	padding: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	font-size: 12px;
}
.content-item #content-wrapper{
	float: left;
	display: block;
	width: 500px;
}
.content-item #content-wrapper p{
	color: #545454;
	font-size: 11px;
	line-height: 20px;
	margin: 0 0 15px 0;
	padding: 0 10px 0 0;
	text-align: justify;
}

/* portfolio */
ul.columns{
	width: 900px;
	list-style: none;
	margin: 0 auto;
	padding: 0;
}
ul.columns li{
	width: 158px;
	float: left;
	display: inline;
	margin: 10px;
	padding: 0 0 0 2px;
	position: relative;
}
ul.columns li:hover{ z-index: 99; }


ul.columns li img{
	position: relative;
	filter: alpha(opacity=50);
	opacity: 0.5;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*--IE8 Specific--*/
}
ul.columns li:hover img{
	z-index: 999;
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}


ul.columns li .info{
	position: absolute;
	left: -10px;
	top: -10px;
	padding: 162px 10px 20px;
	width: 158px;
	display: none;
	background: #fff;
	font-size: 1.2em;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
ul.columns li:hover .info{ display: block; }
ul.columns li p{ font-size: 11px; color: #545454; line-height: 20px; }
ul.columns li .skills-line{ margin: 5px 0 5px 0; padding: 5px 0 0 0; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; }
ul.columns li a{ font-size: 11px; color: #545454; line-height: 20px; text-decoration: none; }
ul.columns li a:hover{ color: #ED6400; }
ul.columns li hr{ color: #545454; }

/*.portfolio-item, .portfolio-item-end{
	float: left;
	display: block;
	background: #fff;
	width: 152px;
	height: 214px;
	padding: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
#screenshot{
	position:absolute;
	background:#333;
	padding:1px;
	margin: 20px;
	display:none;
	color:#fff;
	}
.portfolio-item{ margin: 0 10px 10px 0; }
.portfolio-item-end{ margin: 0 0 10px 0; }
.portfolio-item a, .portfolio-item-end a{ color: #ed6400; text-decoration: none; font-size: 11px; }
.portfolio-item a:active, .portfolio-item-end a:active{ position: relative; top: 1px; }
.portfolio-item .skills, .portfolio-item-end .skills{ float: left; }
.portfolio-item .skills .skills-item, .portfolio-item-end .skills .skills-item{ float: left; margin: 8px 10px 0 0; }*/

/* CONTACT */
form{ float: left; }
input.text{
	background: #e9e9e9 url(../images/bg-input-klein.jpg);
	font-family: "Trebuchet MS";
	border: none;
	width: 350px;
	height: 20px;
	margin: 0 0 10px 0;
	padding: 10px 10px;
	color: #7e7e7e;
}
input.text.focused{
	background: #e9e9e9 url(../images/bg-input-klein-active.jpg);
	border: none;
	width: 350px;
	height: 20px;
	margin: 0 0 10px 0;
	padding: 10px 10px;
	color: #202020;
	font-family: "Trebuchet MS";
}
textarea{
	background: #e9e9e9 url(../images/bg-input-groot.jpg);
	border: none;
	width: 350px;
	height: 200px;
	margin: 0 0 10px 0;
	padding: 10px 10px;
	color: #7e7e7e;
	font-size: 12px;
	font-family: "Trebuchet MS";
}
textarea.focused{
	background: #e9e9e9 url(../images/bg-input-groot-active.jpg);
	border: none;
	width: 350px;
	height: 200px;
	margin: 0 0 10px 0;
	padding: 10px 10px;
	color: #202020;
	font-size: 12px;
	font-family: "Trebuchet MS";
}
li.btn{ margin: 0 0 0 270px; }
input.submit{
	background: #e9e9e9;
	width: 100px;
	height: 30px;
	border: none;
	color: #7e7e7e;
	font-family: "Trebuchet MS";
	cursor: pointer;
}
input.submit:hover{ background: #ed6400; color: #000; }
div.errormsg{ color: #FF0000; }

ul.naw{ float: left; margin: 0 0 0 10px; }
ul.naw li.naw-item{ color: #545454; line-height: 20px; }
ul.naw li.naw-item-float{ float: left; color: #545454; line-height: 20px; margin: 0 10px 0 0; }

/*     FOOTER     */
#wrapper-footer{ float: left; background: #fbfbfb url(../images/bg-footer.jpg) top left repeat-x; width: 100%; }
#wrapper-footer #footer{
	width: 900px;
	height: 27px;
	margin: 0 auto;
	font-size: 11px;
	color: #5b5b5b;
	padding: 25px 0 0 0;
}
#wrapper-footer #footer a{ color: #5b5b5b; text-decoration: underline; }
#wrapper-footer #footer a:hover{ text-decoration: none; }
#wrapper-footer #footer span.menu{ float: right; }
.tel{ background: url(../images/icons/telefoon.jpg) top left no-repeat; height: 14px; padding: 0 0 0 20px; }
.email{ background: url(../images/icons/email.jpg) top left no-repeat; height: 14px; padding: 0 0 0 20px; }