/*

	STUDIOWEB.NL
	VERSION 1.0
	MODIFIED : April 1, 2009
	
	CONTENTS ----------
	
	   BODY
	   DEFAULT STYLING
	   FORMS
	   LINKS
	   HEADINGS
	   LAYOUT
	   NAVIGATION
	
    -------------------
    
    COLOURS -----------
    
        green #929292
        blue #004f79
        white #ffffff
    
    -------------------
	
*/

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

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

/* LAYOUT BASIC */
@charset "ISO-8859-1";
/* LAYOUT BASIC */
html, body {
	min-height: 100%;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
* {
	margin: 0px;
	padding: 0px;
}
body {
	background: #3a3c3a;
	margin: 0;
	padding: 0;
	text-align: center;
}
* html body {
	behavior: url("/templates/js/csshover.htc");
}
#wrapper {
	margin:0px auto;
	width: 1000px;
	min-height: 821px;
	background: url(../img/content-bg.png) top right repeat-y;
	text-align: center:
}
* html #wrapper {
	height: 820px;
}

#header {
	clear: both;
	width:1000px;
	height:334px;
}
#sfeer {
	width:900px;
	height:306px;
	overflow: hidden;
}
#sfeermask{
	position:absolute;
	width:900px;
	height:306px;
	background: url(../img/bg.png) top left repeat-y;
	z-index:10;
}

#top {
	width:900px;
	height:334px;
	margin-left:50px;
}
#logo {
  	position:absolute;
	width:900px;
	height:155px;
	background: url(../img/top.png) top left no-repeat;
	z-index:11;
}
#logo a {
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
}
#logo2 a {
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
}
#topmenu {
	width:900px;
	height:28px;
	background-color:#c82f52;
}
#particulier {
	float:left;
	width:165px;
	height:28px;
	background: url(../img/particulier.png) top left no-repeat;
}
#particulier a{
	display:block;
	width:165px;
	height: 28px;
}
#zakelijk {
	float:left;
	width:165px;
	height:28px;
	background: url(../img/zakelijk.png) top left no-repeat;
}
#zakelijk a{
	display:block;
	width:165px;
	height: 28px;
}
#menu {
	float:left;
	width:710px;
	height:28px;
	text-align:left;
	margin-left:25px;
}
.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;
}

.left-menu {
	padding-top:50px;

}
.left-menu li{
	line-height:28px;
	text-align:right;
	width:165px;
	list-style:none;
	background: url(../img/left-menu-bottom.png) bottom left no-repeat;
}

.left-menu li a{
	display:block;
	color:#a6b7cc;
	text-decoration:none;
	padding-right:20px;
	font-size:14px;
}

.left-menu li:hover a{
	color:#fff;
	background: url(../img/left-li.png) right no-repeat;
}
.left-menu li.active a{
	color:#fff;
	background: url(../img/left-li.png) right no-repeat;
}


.left-menu li ul {
	position: absolute;
	list-style: none;
	list-style-image: none;
	padding: 0 0 0 0; 
	margin: 0 0 0 0; 
	border: 0;
	width: 165px;
	display: none;
	padding-left: 10px;
	margin-left: 165px;
	margin-top: -30px;
	background: url(../img/submenu-bg.png) top right repeat-y;

}
.lef-menu li ul li, .left-menu li:hover ul li {
	padding:0;
	height: 30px;
	background: none;
}
.left-menu li:hover ul li a {
	line-height: 30px;
	display: block;
	margin: 0;
	padding:0;
	color:#1f568b; 
	font-size: 13px;
	text-decoration: none; 
	text-align: left;	
	background: none;
	padding-left: 25px;
}
.left-menu li:hover ul li:hover a{
	color:#fff;
	background: #1f568b url(../img/left-li.png) left no-repeat;
}

/* second sub ul */
.left-menu li:hover ul, .left-menu li:hover li:hover ul { 
	display: block !important;
}
	
.left-menu li ul ul, .left-menu li:hover ul ul {
	display: none !important;
}




#content {
	clear: both;
	margin: 0px auto;
	width:900px;
	color:#636363;
	text-align: left:
}
#content-left{
	float:left;
	min-height:400px;
	width:165px;
}
#content-center{
	float:left;
	width:445px;
	margin-left:30px;
	margin-top:45px;
	padding-bottom: 15px;
	text-align:left;
}
#content-right {
	float:left;
	width:205px;
	border-left: 1px dotted #7992b3;
	margin-top:45px;
	text-align:left;
	padding-left:15px;
	font-size:14px;
	line-height:18px;
	margin-left:30px;
}
#content-right h3{
	color:#ce4a6a;
	font-size:20px;
	margin-bottom:5px;
}

#content-right .cycle  {
	height: 110px;
	overflow-y: hidden;
} 

/* Fonts */
body {
	font: normal 12px/130% Helvetica, 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:#3e6392;
	font-size:26px;
	line-height: 26px;
}
h2 {
	color:#3e6392;
	font-size:22px;
}
h3 {
	color:#3e6392;
	font-size:18px;
}
h4 {
	color:#3e6392;
	font-size:16px;
}
h5 {
	color:#3e6392;
	font-size:14px;
	border-bottom: 1px dotted #7992b3;
}
h6 {
	color:#3e6392;
	font-size:14px;
}

#footer {
	margin:0px auto;
	padding:0;
	width:1000px;
	height:79px;
	background: url(../img/footer.png) top right no-repeat;
}

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


a{
	text-decoration:none;
	color:#ce4a6a;

}
a:hover {
	color:#3e6392;

}

.pink, .pink * {
	color: #ce4a6a;
	font: inherit;}
.blue2, .blue2 * {
	color: #6881b3;
	font: inherit;}

.inline {
	display: inline;
}
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}


/* 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: 10px;
	text-align: left;
}
.project-item .inner{
	background: #e3e9f2;
	padding: 8px 9px 2px 9px;
}
.project-item.odd {
	margin-left: 0;
	clear: left;
}
.project-body {
	padding: 3px 0 0 0;
}
.project-image{
	display: block;
	float: left;
	border: none;
	width: 190px;
	height: 80px;
	overflow: hidden;
}
.project-image img{
	position: relative;
	border: 0;
}



#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 */
.sidebox{
	width:200px;
}
.sidebox ul li{
	list-style-image:url(../img/right-li.png);
	margin-left:15px;
}
.sidebox ul li a{
	display:block;
	color:#636363;
	text-decoration:none;
}
.sidebox ul li:hover a{
	color:#3e6392;
}

.sidebox ul li:hover {
	list-style-image:url(../img/right-li-hv.png);
}


.sidebox2 {	
	border-top:1px dotted #7992b3;
	margin-top:14px;
	padding-top:10px;
	width:200px;
}

/* 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;
}


/* 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;
}

#content-right .projectlink{
	color:#ce4a6a;
}
#content-right .projectlink:hover{
	color:#3e6392;
}