/*

	STUDIOWEB.NL
	VERSION 1.0
	MODIFIED : April 1, 2009
	
	CONTENTS ----------
	
	   BODY
	   DEFAULT STYLING
	   FORMS
	   LINKS
	   HEADINGS
	   LAYOUT
	   NAVIGATION
	
    -------------------
	
*/

@import url(reset.css); /* RESET CSS */
@import url(fancybox.css); /* RESET CSS */

/* BODY
---------------------------------------------------------------------- */

/* LAYOUT BASIC */
@charset "ISO-8859-1";
/* LAYOUT BASIC */
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
* {
	margin: 0px;
	padding: 0px;
}
body {
	background: #a2a3a4 url(../img/body-bg.png) top center no-repeat;
	margin: 0;
	padding: 0;
	text-align: center;
}
* html body {
	behavior: url("../js/csshover.htc");
}
#wrapper {
	background:url(../img/wrapper-bg.png) 0px 8px repeat-y;
	position: relative;
	margin:0px auto;
	width: 1011px;
	text-align:left;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
* html #wrapper {	
	height: 100%;
}
html>body #wrapper {
	height: auto;
}
#header {
	position:relative;
	width:1011px;
	height:74px;
	margin:0px auto;
	background:url(../img/header-bg.png) top left repeat-x;
	padding-top:220px;
}
#logo {
	position:absolute;
	width:166px;
	height:107px;
	top:67px;
	left:61px;
	background: url(../img/logo.png) top left no-repeat;
}
#logo a {
	display:block;
	width:100%;
	height:100%;
	text-decoration:none;
}
#sfeer {
	position:absolute;
	width:723px;
	height:207px;
	top:13px;
	right:0px;
	overflow:hidden;
}
#sfeer-blocks{
	position: absolute;
	width:38px;
	height:203px;
	background:url(../img/sfeer-blocks.png) top left no-repeat;
	top:13px;
	left:288px;
	z-index: 1;
	
}
#topmenu {
	width: 1011px;
	height:74px;
	background:url(../img/topmenu-bg.png) top left no-repeat;
	margin:0;
	padding:0;
}
#main-menu{
	float:left;
	height:74px;
	width:725px;
	text-align:left;
}
#little-nav {
	float:left;
	height:74px;
	width:286px;
	text-align:center;
}
#content{
	width:1011px;
	margin:0px auto;
	padding:0;
	text-align:left;

}
#content-filler{
	margin:0px auto;
	padding:0;
	width:1011px;
	height:20px;
	background:url(../img/wrapper-bg-dist.png) top left repeat-y;
}
#content-left{
	float:left;
	width:256px;
	min-width:256px;
	min-height:350px;
}
#kroon {
	position: absolute;
	background:url(../img/left-logo.png) bottom center no-repeat;
	width:151px;
	height:76px;
	bottom:0;
	left:50px;
}
#content-center{
	float:left;
	width:434px;
	min-width:434px;
	padding-left:30px;
	padding-right:30px;
	color:#707173;
}
#content-center-long{
	float:left;
	width:690px;
	min-width:690px;
	padding-left:30px;
	padding-right:30px;
	color:#707173;
}
#content-right{
	float:left;
	width:218px;
	min-width:218px;
}
#content-right img{
	margin-bottom:10px;
	border:0;
	height:auto;
}
.nav {
	float:left;
	text-align:left;
	list-style:none;
}
.nav li{
	display:block;
	float:left;
	line-height:28px;
	margin-right:12px;
}
.nav li .active{
	color:#fff;
}
.nav li a{
	font-size:13px;
	color:#e3969c;
	text-decoration:none;
}
.nav li:hover a {
	color:#982d3e;
}

#content-left .leftmenu{
	list-style:none;
	width:256px;
	margin:0;
	padding:0;
	padding-top:4px;
}
#content-left .leftmenu li{
	display:block;
	width:256px;
	height:41px;
	background-color:#c0beb7;
	margin-bottom:18px;
}
#content-left .leftmenu li a{
	text-decoration:none;
	color:#fff;
	display:block;
	line-height:41px;
	font-size:20px;
	padding-top:2px;
	padding-left:50px;
}
#content-left .leftmenu li:hover a{
	color:#807f7b;
}

#content-left .leftmenu .left-active a{
	color:#807f7b;
}

#main-menu ul{
	width:615px;
	height:74px;
	list-style:none;
	padding-left:110px;
}
#main-menu ul li{
	float:left;
	display:block;
	margin-right:30px;
}
#main-menu ul li a{
	text-decoration:none;
	display:block;
	line-height:74px;
	font-size:18px;
	color:#807f7b;
}
#main-menu ul .active a{
	color:#fac330;
}

#main-menu ul li:hover a{
	color:#fabb13;
}
#main-menu ul li ul {
	display: none;
	position: absolute;
	z-index:99;
	background: #eae6da;
	list-style-image: none;
	padding: 0px 0 0 0; margin: 0 0 0 0; border: 0;
	border: 0;
	width:180px;
	text-align: left;
	}
	
#main-menu ul li ul li, #main-menu ul li:hover ul li {
	position: relative;
	background: #eae6da;
	padding: 0 4px;
	width:180px;
	float: none;
	list-style: none;
}

#main-menu ul li ul li a, #main-menu ul li:hover ul li a, #main-menu ul li ul li a {
	display: block;
	margin: 0; padding: 12px 0px 12px 6px; border: 0;
	color:#807f7b; 
	font-size: 12px; 
	line-height: 14px; 
	text-decoration: none; 
	text-align: left;	
	border-bottom: 1px #f3aa80 solid;
	}
	
#main-menu ul li ul li a.link_active, #main-menu ul li ul li:hover a  {
	color:#fabb13; text-decoration: none; font-weight: bold;}

/* -- second sub ul */
#main-menu ul li:hover ul, #main-menu ul li:hover li:hover ul { 

	display: block !important;
}
	
#main-menu ul li ul, #main-menu ul li:hover ul ul {
	display: none !important;

}
	
#main-menu ul li ul li:hover ul li a {
	background: none !important;
	font-weight: normal;
}
	


#little-nav ul{
	list-style:none;
	text-decoration:none;
	padding-left:40px;
	padding-top:20px;
}
#little-nav ul li{
	float:left;
	display:block;
	height:35px;
	background:url(../img/littlenav-li.png) top center  no-repeat;
	margin-right:30px;
	min-width:45px;
}
#little-nav ul li a{
	display:block;
	line-height:35px;
	text-decoration:none;
	color:#807f7b;
	padding-top:7px;
	font-size:12px;
}
#little-nav ul li:hover a{
	color:#fff;
}

body {
	font: normal 14px/130% "Futur", Arial, sans-serif;
	color: #afb0b2;
}
body table, table p {
	font-size: 100%;}
	
p, div, h1, h2, h3, h4, ul, li, form, input, select, option {
	margin:					0;
	padding:				0;
}
p {
	margin-bottom: 12px;
}

h1 {
	color:#fac330;
	font-size:26px;
	line-height: 1.2;
}
h2 {
	color:#a2a3a4;
	font-size:26px;
	line-height: 1.2;
}
h3 {
	color:#fac330;
	font-size:18px;
	line-height: 1.2;
}
h4 {
	color:#707173;
	font-size:16px;
	line-height: 1.2;
}
h5 {
	color:#fac330;
	font-size:14px;
	border-bottom: 1px dotted #fac330;
	line-height: 1.2;
}
h6 {
	color:#a2a3a4;
	font-size:14px;
	line-height: 1.2;
}
img {
	border:0;
}

.clear {
	clear:both;
	margin:0;
	padding:0;
}

.class1 {
	font-size: 11px;
	line-height: 13px;
}
.class2 {
	font-size: 12px;
}
.class3 {
	font-size: 12px;
	font-weight: bold;
}
.class4 {
	font-size: 16px;
}
.class5 {
	font-size: 22px;
	line-height: 24px;
	font-weight: bold;
}
.yellow, .yellow * {
	color: #fabb13;
	font: inherit;}


a {
	color: #707173;
	text-decoration: underline;
}
a:hover {
	color: #fac330;
	text-decoration: none;
}
a.button {
	background: url("../img/li.png") 0px 3px no-repeat;
	padding: 0 2px 0 16px;
	display: block;
	color: #ed1c24;
	font-weight: bold;
	float: left;
	line-height: 18px;
}
a.button:hover {
	text-decoration:none;
}
a.button.right {
	float: right;
}


blockquote, pre {
	padding: 10px 30px;
}
blockquote {
	font: italic 12px Georgia, Times, serif;
	margin: 8px 0;
}
* html ul, * html ol {
	margin-left: 22px;
}
img {
	margin: 0;
	padding: 0;
	border-color: #bce3e7;
}
.blueborder {
	border-top: 1px #bce3e7 solid !important;
	border-bottom: 1px #bce3e7 solid !important;
}
.pointerhand {
	cursor: pointer;
}
hr {
	border: solid #4f4e4e 0px;
	border-top-width: 1px;
	height: 0px;
	padding: 0px;
	line-height: 0px;
	margin-top: 4px;
	margin-bottom: 4px;
	clear: both;
}
div.hr {
	margin: 4px 0;
	height:1px;}
div.hr hr {
	display:none}
label {
	font-size: 100%;
}
label u {
	font-style: normal;
	text-decoration: underline;
}
input, select, textarea {
	background-color: #fff;
	border: 1px #373535 solid;
	font-family: Arial, sans-serif;
	font-weight: bold;
	color: #d72b53;
	margin: 1px;
	padding: 1px;
	font-size: 12px;
}
.submit, .button {
	background-color: #ce0c85;
	border-color: #ce0c85;
	color: #fff;
}
input:focus, select:focus, textarea:focus {
	background-color: #fff;
	color: #d72b53;
	border-color: #d72b53;
}
textarea {
	overflow: auto;
}

/* FORMS
---------------------------------------------------------------------- */
form {
	margin: 0; 
}
form {
	margin: 0;
	padding: 0;
	font-size: 100%;
}
form p {
	margin-bottom: 1px;
}
form fieldset {
	clear: both;
	font-size: 100%;
	border-color: #004f79;
	border-width: 1px 0 0;
	border-style: solid none none;
	padding: 3px 10px;
	margin: 0;
}
form fieldset legend {
	margin-left: -2px;	
	font-size: 16px;
	font-weight: normal;
	color: #004f79;
	margin: 0 0 0 0;
	padding: 0 2px;
}
label.float-left{
	float: left;
	clear: left;
	text-align: left;
	width: 180px;
	font-size: 12px;
	padding-top: 1px;
}
label {
	margin-top: 5px;
	font-size: 100%;
}
label.error {
	color: red;
}
label u {
	font-style: normal;
	text-decoration: underline;
}
input, select, textarea {
	font-family: "Lucida Grande", Arial, sans-serif;
	color: #393936;
	margin: 1px 2px;
	padding: 1px;
	font-size: 12px;
}
input.error, input.error:focus {
	border: 1px dotted red;
}
input:focus, select:focus, textarea:focus {
	color: #393936;
}
textarea {
	overflow: auto;
}
input.text-input, textarea.textarea-input {
	width: 200px;
}
input.text-input-30 {
	width: 30px;
}
input.text-input-50 {
	width: 50px;
}
.comment-form {
	width: 460px;
}
.input-comment {
	width: 460px;
}


/* MISCELLANEOUS
---------------------------------------------------------------------- */


/* frontpage */
#frontpage{}
#frontpage h1 {
	margin-bottom: 1px;
}

#frontpage .col-s {
	width: 170px;
	margin-right: 15px;
}
#frontpage .col-s p{
	margin-bottom: 0px;
}

/* portfolio */

.project-item {
	margin-bottom: 12px;
	text-align: left;
}
.project-item .inner{
	background: #e3e9f2;
	padding: 8px 9px 2px 9px;
	
}

.project-item-inner {
	background-color: #eae6da;
	color:#707173;
}
.project-item-inner a {
	color:#707173;
}
.project-item-inner a:hover{
	color: #fac330;
}
.project-item-inner h4 {
	color:#707173;
}

.project-item.odd {
	margin-left: 0;
	clear: left;
}
.project-image{
	display: block;
	float: left;
	border: none;
	width: 160px;
	height: 114px;
	overflow: hidden;
	background: #fcf8eb;
	margin-right:10px; 
}
.project-image img{
	position: relative;
	top: 3px; left: 3px;
	border: 0;
}
.project-body {
	padding-top:10px;	
}
.btn-back {
	color:#707173;
}
.btn-back:hover {
	color:#fac330;
}

#portfolio .col-l {}
#portfolio .col-xxl .pagination {
	margin-right: 10px;}

.portfolio-item {
	display: block;
	float: left;
	background: #96b7d1 url("../img/screenshot.png") bottom left repeat-x;
	margin-left: 12px;
	margin-bottom: 12px;
	padding: 10px;
	width: 168px;
	text-align: left;
}
* html .portfolio-item {
	width: 188px; w\idth: 168px;
}
.portfolio-item .inner{
	background: #e3e9f2;
	padding: 8px 9px 2px 9px;
}
.portfolio-item.odd {
	margin-left: 0;
	clear: left;
}
.portfolio-item .portfolio-image{
	background: url("../img/thumbnail_medium_shadow.png") top left no-repeat;
	display: block;
	border: none;
	width: 150px;
	height: 114px;
	overflow: hidden;
}
.portfolio-item .portfolio-image img{
	position: relative;
	top: 3px; left: 3px;
	border: 0;
}
.portfolio-item .portfolio-title{
	display: block;
	padding: 3px 1px 0 1px;
	height: 20px;
	overflow: hidden;
	border: none;
}
.portfolio-customers {
	background: #96b7d1 url("../img/screenshot.png") bottom left repeat-x;
	padding: 10px;
	text-align: left;
}
.portfolio-customers .inner{
	background: #e3e9f2;
	padding: 8px 10px 2px 10px;
}
.portfolio-customers .col{
	float: left;
	padding: 0;
	width: 140px;
}
#portfolio .screenshot {
	background: url("../img/screenshot_shadow.png") top left no-repeat;
	width: 516px;
	height: 391px;
	float: right;
	margin-right: 10px;
	overflow: hidden;
}
#portfolio .screenshot img{
	position: relative;
	top: 8px !important; left: 8px !important;
	margin-bottom: 10px;
	border: 0;
}
#portfolio .thumbnails {
	padding-top: 6px;
}
#portfolio .thumbnail {
	background: url("../img/thumbnail_shadow.png") top left no-repeat;
	float: left;
	width: 104px;
	height: 79px;
}
#portfolio .thumbnail img{
	position: relative;
	top: 2px; left: 2px;
	border: 0;
}
#portfolio .website-url {
	padding-top: 10px;
	padding-left: 55px;
	font-weight: bold;
}
#nav-thumbnails { margin: 0; padding: 0; }
#nav-thumbnails li { 
	background: url("../img/thumbnail_shadow.png") top left no-repeat;
width: 104px;height: 79px; float: left; list-style: none }
#nav-thumbnails a { width: 104px; display: block; }
#nav-thumbnails a.activeSlide { }
#nav-thumbnails a:focus { outline: none; }
#nav-thumbnails img { border: none; display: block; 	position: relative;
	top: 2px; left: 2px;
	border: 0;
 }

/* news */
.news{}
.news .news-item {
	display: block;
	background: #fff;
	margin-bottom: 15px;
	height: auto;
}
.news .news-item.firstitem {
	width: 491px;
	height: 238px;
	float: left
}
.news .news-item-inner {
	padding: 10px 15px;
}
.news .news-item-image {
	float: left;
	width: 270px;
	min-height: 150px;
	padding: 0;
}
.news .news-item-body {
	padding: 0;
}
.news .news-item.odd {
	margin-left: 0;
	clear: left;
}
.news .news-item img.news-image{
	border: none;
}
.news .news-item .news-image:hover{}
.news-photo{
	float: left;
	width: 150px;
}
.news-description{
}
.news .news-item .news-body.long{
	width: auto;
}
.news-item h4 a{
	text-decoration: none;
}
.news .news-item .news-date{
	font-weight: bold;
}
.news .news-item h4{
}

/* comments */
.comments{}
.comments .comment-item {
	display: block;
	float: left;
	margin-bottom: 20px;
	padding: 0;
	height: auto;
}
.comments .member-photo{
	background: url("../img/member_photo.png") 0px 0px no-repeat;
	display: block;
	float: left;
	margin-top: 5px;
	width: 90px;
	min-height: 60px;
}
.comments .member-photo img{
	margin: 2px 0 0 2px;
}
.comments .comment-item-inner {
	background: #fff;
	display: block;
	float: left;
	padding: 10px 15px;
	width: 371px;
	overflow-x: hidden;
}
* html .comments .comment-item-inner {
	width: 401px; w\idth: 371px;
}

/* blog */
.blog{
	padding: 10px 15px;
}
.blog .blog-item {
	clear: both;
	padding: 0;
}
.blog .blog-item.odd {
	margin-left: 0;
}
.blog-image{
	float: left;
	width: 140px;
	min-height: 100px;
	text-align: left;
}
* html .blog-image{
	height: 100px
}
.blog-image img{
	display: block;
	border: none;
}
.blog-body{
	float: left;
	margin: 0;
	padding: 0;
	width: 320px;
}
.blog-description{}
.blog .blog-item .blog-body.long{
	width: auto;
}
.blog-item h4 a{
	text-decoration: none;
}
/* sidebar */
.sidebar{
	background: #4a4a48 url("../img/background2.jpg") top left repeat;
}
.sidebar-body{
	padding: 5px 8px;
	color: white;
}
.sidebar-bottom{
	background: #575757;
	padding: 3px 8px;
	color: white;
}
.sidebar-body h3{
	font-size: 13px;
}

/* sidebar links */
.subnav a{
	display: block;
	background: url("../img/background2.jpg") top left repeat;
	margin-bottom: 5px;
	padding: 5px 5px 5px 20px;
	font-size: 15px;
	text-transform: uppercase;
	color: white;
}
.subnav a:hover, .subnav a.active {
	color: #513988;
}


/* standard table */
#content .table {
	border-collapse: collapse;
	margin: 15px 10px;		
}
#content .table th {
	height: 38px;
	padding-left: 12px;
	padding-right: 12px;
	color: #fff;
	text-align: left;
	background: #ADD163;	
	border-width: 1px;
  	border-style: solid;
  	border-color: #C4DE8F #93C138 #93C138 #C4DE8F;	
}
#content .table tr {
	height: 34px;
	background: #fff;
}
#content .table td {
	padding-left: 11px;
	padding-right: 11px;
	border: 1px solid #E7F0CC;	
}	

/* pagination */
.pagination {
	margin: 0 0 5px 0;
	font-size: 12px;
	color: #004f79;
	text-align: left;
}
.pagination.float-right {
	float: right;
}
.pagination a {
    display: block;
    text-decoration: none;
}
.pagination a:hover {
	background-color: white;
	color: #004f79;
}
.pagination a, .pagination span {
    display: block;
    float: left;
    padding: 3px 5px;
    background: #e3e9f2;
    border: 1px #96b7d1 solid;
    margin-left: 2px;
    margin-right: 2px;
    color: #96b7d1;
}
.pagination span.current_page {
	background-color: #96b7d1;
	color: white;
	border-color: #96b7d1;
}
.pagination .current.next, .pagination .current.prev {
	color: #004f79;
}