/*----------------------------------------------------------------------------- 
Freek Hol Design Screen Stylesheet 

version:   1.0 
date:      27/06/2009 
author:    Freek Hol Design 
email:     freek [at] freekhol.nl

-----------------------------------------------------------------------------*/

/* Color index 
-----------------------------------------------------------------------------*/ 
/*		#c5c5c5  -  Light Grey
		#222222  -  Medium Grey
		#0b0c0c  -  Dark Grey
		#000101  -  Darker Grey
		#03C3D7  -  Brand Cyan
		#e80057  -  Magenta
*/

/* Import other stylesheets 
-----------------------------------------------------------------------------*/ 
@import url("reset.css");
@import url("typography.css");

/* Styles for layout
-----------------------------------------------------------------------------*/
.clear {clear:both;} 
.right {float:right;} 
.left {float:left;} 
.clearfloat {clear:both; height:0; font-size:1px; line-height:0px;}


/* Set up the document
-----------------------------------------------------------------------------*/

body { 
		background:#222 url(../images/bg-header-rep-x.gif) repeat-x 0 0;
		border-top:solid 5px #00d2e8;
		font-size:62.5%;
		line-height:1.8em;
		text-align:center;
} 

.wrapper {		
		margin:0 auto;
		text-align:left;
		width:955px;	
}

#header {
		background:url(../images/logo-tearoff.png) no-repeat 75% 0; 
		margin:0 20px; 
		padding:29px 0 26px 0; 
		position:relative; 
		width:100%;}

#contentWrap {
		padding-bottom:2em;
		width:100%;
}

.intro {display:inline; float:left; margin:0 0 65px 20px; padding-top:60px; overflow:auto; width:250px;}

#featured {display:inline; float:right; margin:0 20px 65px; padding-top:60px; position:relative; width:600px;}
/*#featured {margin:0 20px 65px 340px; padding-top:60px; position:relative; width:600px;}*/

#footer {
		background:#151515 url(../images/bg-footer-rep-x.gif) repeat-x 0 0;
		clear:both;
		margin:0;
		padding:77px 0;
		position:relative;
		text-align:center;
		width:100%;
}
	#footer .wrapper {
		background:url(../images/fh-schets.png) no-repeat top right;
		min-height:100px;	
}
	#footer .inner {
		margin:0 20px;
		text-align:left;
		width:450px;	
}




/* Contact-form */ 
#contact-form {position:relative; width:550px;}
#subject {clear:both; padding-bottom:12px;}
form {padding:0;}
	form fieldset {background:#1b1b1b; border:1px solid #333; display:block; margin-bottom:2.5em; padding:2em 10px 10px; width:600px;}
	form p {margin:0 0 20px 20px; padding:0;}
	form label {display:inline; padding:10px 0;}
	form label.req {background:url(../images/ster-cyan.png) no-repeat 100% 20%; padding-right:20px;}
	form input,
	form select,
	form textarea {color:#ccc; display:block; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1.2em; margin-top:4px; padding:5px; width:220px; -webkit-border-radius: 3px; -moz-border-radius: 5px;}
	form input[type="text"],
	form select,
	form textarea {background:#222 url(../images/bg-input.png) no-repeat -20px 0; border:1px solid #505050;}
	form input:focus,
	form select:focus,
	form textarea:focus {border-color:#fff; color:#fff;}
	form select {cursor:pointer; width:230px;}
	form input.btn {background:url(../images/btn-versturen.png) no-repeat 0 0; border:none; color:#00d2e8; cursor:pointer; font-size:12px; padding:3px; text-indent:-9999px; text-transform:uppercase; height:16px; width:133px;}
	form input.btn:hover {background-position:0 -17px;}
	form textarea {height:200px; width:542px;}
	form .checkboxes {margin-bottom:20px; padding-left:20px;}
	form .checkboxes input {cursor:pointer; display:inline; outline:none; width:20px;}
	form .checkboxes label {display:inline; margin-bottom:0; padding-top:0; width:auto;}


/* Header 
-----------------------------------------------------------------------------*/ 
#header h1 {background:url(../images/logo-schets.png) no-repeat 0 0; display:block; height:109px; width:377px; text-indent:-9999px;}
#header h1 a {border:none; display:block; height:109px; width:377px;}


/* Navigation 
-----------------------------------------------------------------------------*/ 
#nav {display:inline; overflow:hidden; position:absolute; top:0; right:0;}
#nav a {background-repeat:no-repeat; background-position:0 -52px; border-bottom:none; display:block; float:left; padding:0 10px 10px 10px; text-indent:-9999px;}
#nav a:hover {background-position:0 -22px;}
#nav a.current {background-position:0 8px;}

#nav #n-home {background-image:url(../images/nav-home.gif); height:25px; width:50px;}
#nav #n-portfolio {background-image:url(../images/nav-portfolio.gif); height:25px; width:84px;}
#nav #n-offerte {background-image:url(../images/nav-offerte.gif); height:25px; width:69px;}
#nav #n-contact {background-image:url(../images/nav-contact.gif); height:25px; width:71px;}

/* Portfolio list */
.intro li {background:#101010 url(../images/ster-cyan.png) no-repeat 4px 50%; display:block; list-style-type:none; padding-left:25px;}
.intro li a {background:#1b1b1b; border:1px dotted #333; border-bottom:none; color:#ccc; display:block; font-size:1.3em; padding:20px 10px;}
.intro li a:hover, .intro li.current a {background:#181818; color:#fff;}
.intro li.current a {background:#181818 url(../images/arrow.gif) no-repeat bottom right;}
.intro li.last a {border-bottom:1px dotted #333;}
.intro li a span {display:block; color:#666; font-size:.7em; letter-spacing:2px; text-transform:uppercase;}
.intro li a:hover span {color:#ccc;}



/* Portfolio 
-----------------------------------------------------------------------------*/ 
#portfolio {height:385px; width:615px; padding:0; margin:4.5em 0 0 0;} 
#portfolio img {background-color:#111; border:1px dotted #333; width:615px; height:385px; top:0; left:0;}
#portfolio a {border:none;}

#portfolio-pagination {clear:both; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; margin:10px 0 0 0; padding:0; width:615px;}
#portfolio-pagination ul { float:left; list-style-type:none; margin:0; overflow:hidden; padding:0 14px 0 0; position:relative; height:30px;}
#portfolio-pagination li {display:inline; float:left; list-style-type:none; margin:0; padding:0; position:relative;}
#portfolio-pagination li a {background:url(../images/btn-pagination.png) no-repeat 50% 50%; border:none; color:#ebebeb; float:left; font-size:1.2em; font-weight:bold; padding:5px 11px 6px;}
#portfolio-pagination li a:hover,
#portfolio-pagination li a.activeSlide {background:url(../images/btn-pagination-active.png) no-repeat 50% 50%;}

.client-link {margin-top:1em; position:absolute; top:560px; right:-15px; }
.client-link a {background:#1b1b1b; border:1px dotted #333; display:block; font-size:1.2em; padding:8px;}

.desc, .mssg {background:#1b1b1b url(../images/arrow.gif) no-repeat bottom right; border:1px dotted #333; display:block; font-size:1.2em; margin-top:2em; padding:12px; position:relative; width:590px;}
.desc h3 {font-size:1.25em;}
.desc p:last-child, .mssg p:last-child {margin-bottom:0;}
.mssg {background:#1b1b1b url(../images/check.gif) no-repeat 10px 5px; padding:20px; width:577px}
.mssg p {padding-left:60px;}

blockquote {background:#101010; border:1px dotted #333; display:inline; float:right; margin-left:20px; overflow:hidden; padding:12px 0; position:relative; width:200px;}
blockquote p {padding:0 12px;}
blockquote span {font-size:3em; line-height:.5em;}
blockquote .quotee {background:url(../images/icon-quote.png) no-repeat 12px 4px; color:#666; display:block; font-size:0.75em; padding:0 12px 0 34px; text-transform:uppercase;}
blockquote .quotee a, blockquote .quotee a:visited {border:none; color:#666; display:block;}
blockquote .quotee a:hover {color:#ccc; text-decoration:underline;}




/* Custom Rules 
-----------------------------------------------------------------------------*/


.noBotMar {margin-bottom:0;}