/* ---------------------------------
   Base styles
------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	font: 12px helvetica, "helvetica neue", arial, sans-serif;
	color:#2b2f30;
	line-height: 18px;
	text-align:center;
	background:#eae9e8;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

	
p {
	margin-bottom:18px;
	margin-left:4px;
	margin-right:2px;	
}

h2 {
	font-size: 18px;
	padding-top:9px;
	padding-bottom:32px;
	margin-left:4px;
	margin-right:2px;
	font-weight:normal;
}

h3 {
	font-size: 14px;
	margin-left:4px; 
	margin-right:2px;
	margin-top:-1px;
	margin-bottom:1px;
	font-weight:bold;
}

h4 {
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing:0.01em;	      
	margin-left:4px; 
	
} 

  
a {
	color:#2b2f30;
}

a:hover {
	text-decoration:none;
	background:#2b2f30;
	color:#eae9e8;

}

em {
	font-style:italic;
}


/* ---------------------------------
   BASE page lay-out & styling 
------------------------------------*/      

div#container {
	text-align:left;
	margin:0 auto;
	width:940px;
/*	background:url(../img/grid.gif);*/
	
	
}

div#header {
	height:108px;
	position:relative;
	background: url(../img/big_line.gif) no-repeat;


}   
	#header h1 {
		float:left;
		height:21px;
		width:140px;
		margin-top:16px;
	}
    
	#header h1 a {
		background:url(../img/logo2.gif) no-repeat;
		float:left;
		text-indent:-10000px;
		padding:16px 0 0 0;
		width:140px;
	}
	
	#header p {
		margin-left:100px;
		margin-top:23px;
		float:left;
	}
	#header ul, #footer ul {
		float:right;
		width:222px;
	}

 	#header li, #footer li {
		float:right;
		
		 
	}
	
	#header li a, #footer li a, li.dummy { 
		width:72px;
		margin-left:2px;
		display:block;
		text-align:center;
		padding-top:23px;
		padding-bottom:12px;
		background: url(../img/big_line_pat.gif) repeat-x;
		color:#2b2f30;
	} 
	
	#header li a:hover, #footer li a:hover { 
		width:72px;
		color:#eae9e8;
		background-color:#2b2f30;
		
	}
	#header a, #footer a {
		text-decoration:none;
	}
	
	
div#content {
	width:620px;
	float:left;
	background: url(../img/small_line_pat.gif) repeat-x;
}

div#sidebar {
	float:right;
	width:220px;
	background: url(../img/small_line_pat.gif) repeat-x;   
}

div#extra-col {
	background: url(../img/small_line_pat.gif) repeat-x;   
}
	
div#footer {
	height:108px;
	clear:both;
	width:100%;
	background: url(../img/big_line.gif) no-repeat;       
}
	#footer p {
		float:left;
		width:520px;
		margin-top:24px;
		  
	}
/* ---------------------------------
   CONTACT page 
------------------------------------*/


body#contact #wrapper {
	float:left;
	width:100%;
	margin-bottom:72px;
}
	
body#contact #content {
	margin-right:300px;
	width:300px;
	margin-bottom:0px;   
}
		
body#contact #extra-col {
	float:left;
	width:300px; 
	margin-left:-620px;
	margin-bottom:72px;
}

body#contact #sidebar {
	float:left;
	width:220px;
	margin-left:-220px;
}

body#contact #sidebar ul{
	margin-left:4px;
}                      

body#contact #sidebar h4{
	display:inline;
}

	
dl#polaroid   {
	padding: 18px 14px 12px 16px;
	background: #fff;
	color:#2b2f30;
	/*margin-top:31px;*/
}




#polaroid img {
	border:1px solid #eae9e8;

}


#polaroid  dt {
	height:268px;
}

#polaroid  dd {
	clear:both;
	font-size: 11px;
	letter-spacing:0.01em; 
	margin-top:26px;
	color:#fff;
	
}


   
/* ---------------------------------
   HOME page
------------------------------------*/

body#home #content {
	margin-bottom:0px;
}


body#home #extra-col {
	clear:both;
	width:100%;
	background: url(../img/small_line_home.gif) no-repeat;
}         

body#home #extra-col h2 {
	padding-top:8px;
	padding-bottom:27px;
}

body#home ul#work a {
	margin-bottom:18px;
}

/* ---------------------------------
   OVERVIEW page 
------------------------------------*/

body#overview #content {
	width:100%;
	float:left;
	margin-bottom:18px;	
}

body#overview #content h2 {
	padding-bottom:27px;
}

	
ul#work li {
	float: left;
	margin: 0 20px 54px 0;
	}
	
ul#work li a {
	float: left;
	display: block;
	width:196px;
	padding: 14px 12px 12px 12px;
	background-color:#fff;
   	background-position:-8px 14px;
	background-repeat:no-repeat;
    color:#2b2f30;
	text-decoration:none;
	}

ul#work li a:hover {
	border-right: 1px solid #2b2f30;
	border-bottom: 1px solid #2b2f30;
	padding: 14px 11px 11px 12px;
	background-position:-224px 14px;
}



ul#work li.no-margin {
	margin:0;
}

ul#work li span.project-title {
	font-size: 18px;
	margin-top:204px;
	margin-bottom:4px;
	display:block;

}

ul#work li span.project-cat {
	font-size:11px;
	letter-spacing:0.01em;
	display:block;
	margin-left:2px;	
	 	
}

/* overview pics */



ul#work li a#bng-preview {
	background-image: url(/newsite/portfolio/bng/preview-rollover.jpg);
}

ul#work li a#carnivale-preview {
	background-image: url(/newsite/portfolio/carnivale/preview-rollover.jpg);
}

ul#work li a#cgb-preview {
	background-image: url(/newsite/portfolio/cgb/preview-rollover.jpg);
}

ul#work li a#flyers-preview {
	background-image: url(/newsite/portfolio/flyers/preview-rollover.jpg);
}

ul#work li a#het-portaal-preview {
	background-image: url(/newsite/portfolio/het-portaal/preview-rollover.jpg);
}

ul#work li a#in-transit-preview {
	background-image: url(/newsite/portfolio/in-transit/preview-rollover.jpg);
}

ul#work li a#kroese-interiors-preview {
	background-image: url(/newsite/portfolio/kroese-interiors/preview-rollover.jpg);
}

ul#work li a#mcr-preview {
	background-image: url(/newsite/portfolio/mcr/preview-rollover.jpg);
}

ul#work li a#ynno-preview {
	background-image: url(/newsite/portfolio/ynno/preview-rollover.jpg);
}

ul#work li a#diana-preview {
	background-image: url(/newsite/portfolio/diana-yacht-design/preview-rollover.jpg);
}

ul#work li a#persman-preview {
	background-image: url(/newsite/portfolio/archive/persman/preview-rollover.jpg);
} 

ul#work li a#theux-preview {
	background-image: url(/newsite/portfolio/theux/preview-rollover.jpg);
}

ul#work li a#buitenspeel-preview {
	background-image: url(/newsite/portfolio/archive/buitenspeel/preview-rollover.jpg);
}

ul#work li a#maartje-teussink-preview {
	background-image: url(/newsite/portfolio/maartje-teussink/preview-rollover.jpg);
}

ul#work li a#bazaar-preview {
	background-image: url(/newsite/portfolio/archive/bazaar/preview-rollover.jpg);
} 

ul#work li a#ns-hotspots-preview {
	background-image: url(/newsite/portfolio/archive/ns-hotspots/preview-rollover.jpg);
}

ul#work li a#eat-meat-preview {
	background-image: url(/newsite/portfolio/archive/eat-meat/preview-rollover.jpg);
}

ul#work li a#student-support-preview {
	background-image: url(/newsite/portfolio/archive/student-support/preview-rollover.jpg);
}

ul#work li a#morality-preview {
	background-image: url(/newsite/portfolio/archive/morality/preview-rollover.jpg);
} 

ul#work li a#rich-media-preview {
	background-image: url(/newsite/portfolio/archive/rich-media/preview-rollover.jpg);
}


/* ---------------------------------
   PROJECT page 
------------------------------------*/

body#project #content {
	background:#fff;
	text-align:center;
	margin-bottom:0px;
}

body#project #content img {
	margin-top:72px;
}
body#project #content img.top18 {
	margin-top:18px;
}

body#project #extra-col {
   	clear:both;
	height:72px;
	width:100%;
	margin-bottom:72px;
	background: url(../img/bg_project_content.gif) repeat-y;
} 

body#project #extra-col ul {
	float:right;
	margin-top:53px;
}

body#project #sidebar ul {
	width:220px;
}

body#project #sidebar ul li, body#project #extra-col ul li {
	float:left;
}

body#project #extra-col li a, body#project #sidebar li a {  
	display:block;
	float:left;
	height:17px;	
	border-top: 1px solid #2b2f30;
	border-bottom: 1px solid #2b2f30;
	text-indent:-10000px;
	width:72px;
}

body#project #sidebar {
	background:none;
}

body#project #sidebar h2 {
	padding-bottom: 22px;
	padding-top:56px;
}

dl#specs {
	font-size:11px;
	width:100%;
	letter-spacing:0.01em;
	margin-bottom:35px;
	float:left;
	display:block;
}

dl#specs dt{
	width:18px;
	margin-left:4px;
	float:left;
}

dl#specs span {
	display:block;
	margin-left:22px;
}
  
li.next a {
	margin-left:2px;
	background: url(../img/arrow_next.gif) no-repeat;
	                                                                                     
}

li.overview a {
	margin-left:2px;
	background: url(../img/arrow_overview.gif) no-repeat;
	       
}
li.prev a {
	margin-left:0px;                                         
	background: url(../img/arrow_prev.gif) no-repeat;
	       
}

li.next a:hover {
	margin-left:2px;
	background: url(../img/arrow_next_over.gif) no-repeat;
	background-color:#1f2325;
	                                                                                     
}

li.overview a:hover {
	margin-left:2px;
	background: url(../img/arrow_overview_over.gif) no-repeat;
	background-color:#1f2325;
	
}
li.prev a:hover {
	margin-left:0px;                                         
	background: url(../img/arrow_prev_over.gif) no-repeat;
	background-color:#1f2325;
}


/* ---------------------------------
   sIFR 
------------------------------------*/
 
/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */


.sIFR-hasFlash h2 {
	visibility: hidden;
	letter-spacing: 0px;
	font-size:18px;
	line-height:23px; 
	padding-top:8px;
	padding-bottom:28px;

	
}

.sIFR-hasFlash h3 {
	visibility: hidden;
	letter-spacing: 0;
	font-size:14px;
	margin-top:0px;
	margin-bottom:0px;
	
	
}

.sIFR-hasFlash #home #extra-col h2 {
	visibility: hidden;
	letter-spacing: 0;
	font-size:18px;
	line-height:29px; 
	padding-top:7px;
	padding-bottom:23px;
	
}

.sIFR-hasFlash #overview #content h2 {
	visibility: hidden;
	letter-spacing: 0;
	font-size:18px;
	padding-bottom:23px;
	line-height:28px; 
	
}

.sIFR-hasFlash #project #sidebar h2 {
  	visibility: hidden;
	letter-spacing: 0;
	font-size:18px;
	padding-top:5px;
	padding-bottom:19px;
	line-height:34px; 
	margin-top:50px; 
}

.sIFR-hasFlash #work li span.project-title {
	visibility: hidden;
	letter-spacing: 0;
  	font-size: 18px;
	margin-top:7px;
	margin-bottom:1px;
	line-height:22px;
}