@charset "utf-8";

/************************************************************/
/********************* BEGIN General reset, using modified version of SenCSS, http://sencss.kilianvalkhof.com/ ****************/
/************************************************************/

html,body,div,span,applet,object,iframe,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,strong,tt,var,dl,dt,dd,blockquote,fieldset,form,i,b,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;vertical-align:baseline}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
:focus{outline:1px dotted}
a{text-decoration:underline}
a:hover,a:focus{text-decoration:none}
abbr,acronym{border-bottom:1px dotted;cursor:help;font-variant:small-caps}
address,cite,em,i{font-style:italic}
blockquote p{margin:0 1.5em 1.5em;padding:0.75em}
del{text-decoration:line-through}
dfn{border-bottom:1px dashed;font-style:italic}
dl{margin:0 0 1.5em}
dt{font-weight:700}
dd{padding-left:1.5em}
h1{font-size:2em;font-weight:700;margin:0 0 0.75em}
h2{font-size:1.5em;margin:0 0 1em}
h3{font-size:1.1666em;margin:0 0 1.285em}
h4{font-size:1em;margin:0 0 1.5em}
h5{font-size:0.8333em;margin:0 0 1.8em}
h6{font-size:0.666em;margin:0 0 2.25em}
img{display:inline-block;vertical-align:bottom;border:none;}
ins{text-decoration:overline}
ol{list-style:inside decimal}
p{font-weight:300;margin:0 0 1.5em}
pre{font-family:"Courier New", Courier, monospace;margin:0 0 1.5em}
sub{top:0.4em;font-size:0.85em;line-height:1;position:relative;vertical-align:baseline}
sup{font-size:0.85em;line-height:1;position:relative;bottom:0.5em;vertical-align:baseline}
strong,b{font-weight:700}
ul{list-style:inside disc}
ul,ol{margin:0 0 1.5em;padding:0}
li ul,li ol{margin:0}
li li{padding-left:1.5em}
table{border-collapse:collapse;border-spacing:0;margin:0 0 1.5em;padding:0}
caption{font-style:italic;text-align:left}
tr.alt td{background:#eee}
td{border:1px solid #000;padding:0.333em;vertical-align:middle}
th{font-weight:700;padding:0.333em;vertical-align:middle}

body {
	background: #fff;
	color: #595959;
	font-weight: bold;
	margin: 0;
	padding: 0;
	line-height:1.5em; /* for safari2 */
	font:12px/1.5em georgia, "lucida bright", "times new roman", serif;
}
/************************************************************/
/********************* END General reset, using modified version of SenCSS, http://sencss.kilianvalkhof.com/ ****************/
/************************************************************/




/************************************************************/
/********************* BEGIN GENERAL LAY-OUT ****************/
/************************************************************/

/* #content is in html, #wrapper is generated via JQuery  */
#content, #wrapper {
	height: 404px; /* 404 + 96 = 500 (navigation) */
	text-align: center;
	margin-left: -503px;
	position: absolute;
	top: 96px; 
	left: 0;
	left: 50%;
	z-index: 100;}
/* and the navigation */
#navigation {
	height: 500px; 
	text-align: left;
	margin-right: -502px;
	position: absolute;
	right: 50%;}
/**********************************************************/
/********************* END GENERAL LAY-OUT ****************/
/**********************************************************/





/*************************************************/
/********************* CONTENT ****************/
/*************************************************/
 
 
/*********************************************************************************************/
/********** BEGIN styling of classes being added dynamically via JQuery in the DOM ***********/
/*********************************************************************************************/
.javascript-on#mainpictureholder ul img {
	border: 0;
}
.javascript-on#mainpictureholder ul a:hover img {
	border: 0;
	color: #fff;
}
.javascript-on img {
	display: none;
}

.no-slideshow .javascript-on img.first-image {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
	margin: 0;
	padding: 0;
}

/*********************************************************************************************/
/********** END styling of classes being added dynamically via JQuery in the DOM ***********/
/*********************************************************************************************/ 
 
 
 
 
 
 
/*********************************************************************************************/
/********** BEGIN styling the Lightbox (via JQuery) ***********/
/*********************************************************************************************/
#mainpictureholder ul {
list-style: none;
}
#lightbox-container-image-box {
	background-color: #fff;
}
#lightbox-loading {
	position: absolute;
	top: 200px;
	left: 300px;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top:430px;
	right: 250px;
	width: 140px;
	background: transparent;
	text-align: center;
}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	text-decoration: none;
	color: #555;
	width: 40px;
	height: 40px;
	text-indent: 50px;
	overflow: hidden;
}
#lightbox-nav-btnPrev { 
	background: transparent url(previous.gif) top left no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	}
#lightbox-nav-btnNext { 
	background: transparent url(next.gif) top left no-repeat;
	position: absolute;
	top: 0;
	right: 0;
}
#lightbox-image-details-currentNumber {
/*	float: left; */
}
/*********************************************************************************************/
/********** END styling the Lightbox (via JQuery) ***********/
/*********************************************************************************************/





/****************************************************************************************/

/*************************************************/
/********************* NAVIGATION ****************/
/*************************************************/


/**********************************************************************************/
/************ BEGIN styling the links ***************/
/**********************************************************************************/
#navigation a  {
	padding-left: 14px;
	text-decoration: none;
	margin: 0;
	color: #595959;
}
#navigation a:active, #navigation a:hover  {
	background: transparent url(arrow.gif) 0 2px no-repeat;
	color: #090909;
}
#navigation li {
	list-style-type: none;
	list-style-position: outside;
	padding-left: 0;
}
#navigation ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
/**********************************************************************************/
/************ END styling the links ***************/
/**********************************************************************************/


/**********************************************************************************/
/************ BEGIN positioning of the main-menu ***************/
/**********************************************************************************/
.menu-main {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 109px;
	margin: 0;
	padding: 0;
}
/**********************************************************************************/
/************ END positioning of the main-menu ***************/
/**********************************************************************************/



/**********************************************************************************/
/************ BEGIN positioning of the sub-menu's ***************/
/**********************************************************************************/
.menu-sub {
	position: absolute;
	width: 140px;
}

#menu-advertising {			bottom: 4.5em;	right: 112px;	}
#menu-fashion {				bottom: 3em;	right: 112px;	}
#menu-editorial {			bottom: 13.5em;	right: 87px;	}
#menu-portraits {			bottom: 12em; 	right: 87px;	}
#menu-contact 	{			bottom: 1.5em;	right: 112px;	}
#menu-books 	{				bottom: 9em;	right: 87px;	}	
#menu-gallery 	{			bottom: 7.5em;	right: 87px;	}
#menu-licensing 	{			bottom: 0;		right: 112px;	}
/*end menu*/
/**********************************************************************************/
/************ END positioning of the sub-menu's ***************/
/**********************************************************************************/




/**********************************************************************************/
/************ BEGIN positioning of the caption (the 'sub-sub-menu') ***************/
/**********************************************************************************/
#lightbox-image-details-caption {
	text-align: right;
	position: absolute;
	width: 100px;
	font-weight: normal;
	color: #666;
	}


/****** horizontal positioning of the caption ******/
/*
this is redundant I think

#page-portrait-overview #lightbox-image-details-caption,
#page-portrait-art #lightbox-image-details-caption,
#page-portrait-music #lightbox-image-details-caption,
#page-portrait-filmtv #lightbox-image-details-caption,
#page-portrait-design #lightbox-image-details-caption,
#page-portrait-fashion #lightbox-image-details-caption,
#page-portrait-culture #lightbox-image-details-caption,
.page-books #lightbox-image-details-caption
 {
	left: 635px;
}
*/

#lightbox-image-details-caption
 {
	left: 670px;
}


#page-personal #lightbox-image-details-caption {
	left: 750px;
}


/****** vertical positioning of the caption ******/
/* portrait */
#page-portrait-overview #lightbox-image-details-caption {
	bottom: 21em;
}	
#page-portrait-art #lightbox-image-details-caption {
	bottom: 19.5em;
}
#page-portrait-music #lightbox-image-details-caption {
	bottom: 18em;
}
#page-portrait-filmtv #lightbox-image-details-caption {
	bottom: 16.5em;
}
#page-portrait-design #lightbox-image-details-caption {
	bottom: 15em;
}
#page-portrait-fashion #lightbox-image-details-caption {
	bottom: 13.5em;
}
#page-portrait-culture #lightbox-image-details-caption {
	bottom: 12em;
}

/* personal */
#page-personal #lightbox-image-details-caption {
	bottom: 15em;
}

/* books */
#page-books-le-corbusier #lightbox-image-details-caption {
	bottom: 18em;
}
#page-books-still-life #lightbox-image-details-caption {
	bottom: 16.5em;
}
#page-books-love-story #lightbox-image-details-caption {
	bottom: 15em;
}
#page-books-photojournal #lightbox-image-details-caption {
	bottom: 13.5em;
}
#page-books-mark-borthwick #lightbox-image-details-caption {
	bottom: 12em;
}
#page-books-film-stills #lightbox-image-details-caption {
	bottom: 10.5em;
}
#page-books-proenza-schouler #lightbox-image-details-caption {
	bottom: 9em;
}
/********************************************************************************/
/************ END positioning of the caption (the 'sub-sub-menu') ***************/
/********************************************************************************/


/* now we also have to set the active menu's... */

/*********************************************/
/* BEGIN setting active menu (little arrows) */
/*********************************************/
.page-personal #main-personal a,
.page-editorial #main-editorial a,
.page-portrait #main-portrait a,
.page-overview #main-overview a,
.page-books #main-books a,
.page-fashion #main-fashion a,
.page-advertising #main-advertising a,
.page-contact #main-contact a,
.page-about #main-about a,
.page-gallery #main-gallery a,
.page-licensing #main-licensing a,

#page-portrait-overview #overview a,
#page-portrait-art #art a,
#page-portrait-music #music a,
#page-portrait-filmtv #filmtv a,
#page-portrait-design #design a,
#page-portrait-fashion #fashion a,
#page-portrait-culture #culture a,

#page-editorial-overview #overview a,
#page-editorial-ten-magazine #ten-magazine a,
#page-editorial-beople #beople a,
#page-editorial-double #double a,
#page-editorial-fantastic-man #fantastic-man a,
#page-editorial-french-vogue #french-vogue a,
#page-editorial-muse #muse a,
#page-editorial-purple #purple a,

#page-books-le-corbusier #le-corbusier a,
#page-books-still-life #still-life a,
#page-books-love-story #love-story a,
#page-books-photojournal #photojournal a,
#page-books-mark-borthwick #mark-borthwick a,
#page-books-film-stills #film-stills a,
#page-books-proenza-schouler #proenza-schouler a,
#page-books-film-stills #film-stills a

{
	background: transparent url(arrow.gif) 0 2px no-repeat; color: #090909; 
}
/*********************************************/
/* END setting active menu (little arrows) */
/*********************************************/




/* when hovering over a menu item, the title attribute (when available) will be become visible via JQuery. Here is the css used to place it */

/********************************************************************/
/************** BEGIN title attr animation of menu-items ************/
/********************************************************************/
.menu-sub li em {
	width: 100px;
	height: 45px;
	position: absolute;
	left: -100px;
	text-align: center;
	font-style: normal;
	z-index: 2;
	display: none;
}
/********************************************************************/
/************** END title attr animation of menu-items ************/
/********************************************************************/






/* giving special links (with class="cleanlinks" a clean look, no indents etc */
#navigation a.cleanlink, #content a.cleanlink {
	background-image: none;
	padding: 0;
	text-decoration: underline;
	color: #444;
	}

	
/* about page special styling */
.page-about  #text-about{
	text-align: left;
	width: 750px;
}
.website-credits {
	position: absolute;
	top: -99999em;
	left: -99999em;
}