/* ===================================================
CSS for Poetry Translation Centre - v1.1

Author: 		whitespacedesign
Contact: 		christian@whitespacedesign.co.uk
Website: 		http://www.whitespacedesign.co.uk
created: 		16.04.08
=================================================== */

/****************** universals *********************/

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,table,td,tr,th
	{margin:0; padding:0 }
	
body {
	font: 75% helvetica, sans-serif; /* reset font size to 12px; */
	text-align: center;
	background: #FFF url(../graphics/bg_body.gif) 50% 0 repeat-y;
	}

h1,h2,h3,h4,h5,h6,pre,code,input,textarea {font-size:1em;font-weight: normal;}

a img,:link img,:visited img { border:none;}

:link,:visited { text-decoration:none;}

ul,ol {list-style:none;}

address {font-style: normal;}

h2,
.screenreader,
p.moreLink span,
.item li a:link span,
.item li a:visited span {
	position: absolute;
	left: -9000px;
	top: -9000px;
	}
	
a:active {outline: none;}
:focus {-moz-outline-style: none;}
	
.imageReplace {text-indent: -9000px;}

.clearfix:after,
.index .item li:after { /* makes float container block clear floated blocks inside it */
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	}



/************************************************
                    structure
************************************************/


#global {
	width: 820px;
	margin: 0 auto;
	text-align: left; /* reset */
	background: url(../graphics/bg_global.gif) 0 0 repeat-x;
	}
	

/*--------------------------- header --------------------------*/

#header {
	float: left;
	width: 820px;
	}

h1 {float: left;}
h1 a {
	display:block;
	width: 155px;
	height: 105px;
	background: #FFFFFF url(../graphics/title.gif) 0 bottom no-repeat;
	}
h1 a:hover {
	background-position: -155px bottom;
	}


ul#nav {float: right;}
ul#nav li {float: left;}

ul#nav li a {
	display: block;
	height: 105px;
	border-left: 1px solid #B0B0B0;
	padding: 0 10px 0 1px;
	}
	
li#portfolio a {
	background: url(../graphics/nav_portfolio.gif) 1px bottom no-repeat;
	width: 60px;
	}
#portfolio a:hover,
.portfoliobody #portfolio a {
	background-position: -79px bottom;
	/*border-left: 1px solid #424242;*/
	}
	
li#info a {
	background: url(../graphics/nav_info.gif) 1px bottom no-repeat;
	width: 25px;
	}
#info a:hover,
.infobody #info a {
	background-position: -44px bottom;
	/*border-left: 1px solid #424242;*/
	}


/*--------------------------- content structure --------------------------*/

#content {
	float: left;
	margin: 36px 0 0 0;
	}

#leftcol {
	float: left;
	width: 180px;
	}

#rightcol {
	float: left;
	width: 640px;
	position: relative;
	}
	
	
#rightcol #thumbnails {
	float: left;
	width: 50px;
	margin: 0 26px 0 2px;
	display: inline;
	}
#rightcol #thumbnails a {
	float: left;
	display: block;
	width: 50px;
	height: 50px;
	margin: 0 0 1px 0px;
	}
#rightcol #thumbnails a:hover,
.thumbnail_center {
	background-position: -50px 0 !important;
	}
	
#rightcol #thumbnails a.reviewlink,
#rightcol #thumbnails a.videolink {
	width: 48px;
	height:48px;
	line-height: 48px;
	color: #B0B0B0;
	text-align: center;
	background-color: #FFF;
	border: 1px solid #B0B0B0;
	}	
#rightcol #thumbnails a.reviewlink:hover,
#rightcol #thumbnails a.videolink:hover,
#rightcol #thumbnails a.videolink.onState {
	color: #666;
	background-color: #E1E1E1;
	border: 1px solid #666;
	}

#rightcol #imageContainer,
#rightcol #image,
#rightcol #imagedetails {
	float: left;
	width: 562px;
	}
	
#rightcol #image.sound {border: 1px solid #B0B0B0;}
	
#rightcol #image #audioplayer1 {
	margin: 115px auto 114px auto;
	position: relative;
	width: 500px;
	}

#rightcol #image a {
	float: left;
	display:block;
	width: 562px;
	text-align: center;
	}

#rightcol #imageContainer p#imagedetails_caption {
	color: #919191;
	text-align: right;
	margin: 26px 0 0 0;
	padding-right: 2px;
	float: right;
	}
#rightcol #imageContainer p#imagedetails_caption em {
	display: block;
	font-size: 1.2em;
	padding-bottom: 5px;
	}

#rightcol #imageContainer.imagedetails_details p,/*this style to replace the one on the next line eventually*/
#rightcol #imageContainer p#imagedetails_details {
	color: #666;
	width: 450px;
	line-height: 1.3em;
	margin-bottom: 1em;
	}
	
.photoCredit {
	color: #999;
	font-size: .8em;
	padding-top: 2px;
	float: left;
	}



/*-------------------------- cv styles ------------------------*/

	
.infobody h2 {
	position: static;
	color: #333;
	margin: 0 0 1.35em 2px;
	font-size:1.333em;
	line-height: 1.125em;
	}

.infobody#reviews h2 {
	position: absolute;
	}

.infobody div#rightcol p {
	margin: 0 0 1em 2px;
	line-height: 1.4em;
	}

.infobody div#rightcol {
	line-height: 1.2em;
	color:#535353;
	}

h3 {
	color: #666666;
	margin: 2em 0 1.2em 2px;
	font-size:1.167em;
	line-height: 1.286em;
	height: 18px;
	}
	
h4 {
	font-weight: bold;
	margin: 0 0 0 2px;
	}
	
#cv #rightcol dl, 
#cv #rightcol ul {
	border: 0px solid #000;
	margin: 0 0 1.636em 2px;
	font-size: .917em;
	}
	
#cv dt {
	float: left;
	clear: left;
	width: 4em;
	color: #7B7B7B;
	}

#cv dd {
	border-left: 1px solid #B0B0B0;
	margin: 0 0 0 5em;
	padding: 0 0 .3em 1px;
	line-height: 1.2em;
	}
	
a#downloadcv {
	display: block;
	float: right;
	height: 22px;
	width: 87px;
	padding: 6px 0 0 22px;
	background: #FFF url(../graphics/cv.gif) 0 0 no-repeat;
	color: #BC6100;
	font-size: .8em;
	}
	
a#downloadcv:hover {background-position: 0 -28px;}
	
#scrollwindow {
	width: 546px;
	height: 324px;
	overflow: auto;
	position: relative;
	margin-top: 0px;
	padding-bottom: 26px;
	float: left;
	}

#cv #scrollwindow {height: 400px;}


/*----------------------- contact styles ---------------------*/
	
div#rightcol p a {color: #BC6100;}
div#rightcol p a:hover {text-decoration: underline;}

.infobody div#rightcol p {width: 470px;}


/*--------------------- reviews styles ---------------------*/

.review #scrollwindow {
	margin-top: 0px;
	width: 453px;
	height: 500px;
	}
	
.review div#rightcol #scrollwindow p {width: 378px;}
	
#reviewsNav {
	float: left;
	width: 163px;
	display: inline;
	}
#reviewsNav ul {
	float: left;
	width: 163px;
	margin: 0 0 0 2px;
	display: inline;
	}
#reviewsNav ul li {
	float: left;
	padding: 0 0 13px 0;
	width: 120px;
	display: inline;
	}
#reviewsNav ul li a {color: #6E6E6E;}
#review-teenkicks #reviewsNav ul li#review1 a,
#review-machination #reviewsNav ul li#review2 a,
#review-bloweyelevel #reviewsNav ul li#review3 a,
#review-cmoncmoncat #reviewsNav ul li#review4 a,
#review-cmoncmonrev #reviewsNav ul li#review5 a,
#review-eldorado-voir #reviewsNav ul li#review6 a,
#review-teenagekicks-voir #reviewsNav ul li#review7 a,
#review-petard #reviewsNav ul li#review8 a,
#reviewsNav ul li a:hover {color: #000;}

.review h2 {width: 160px;}
.review h3 {margin-top: 0px;}
.infobody div#rightcol p.reviewsource {
	color: #666; 
	padding-bottom: .5em;
	border-bottom: 1px solid #B0B0B0;
	}


/*----------------------- info nav ----------------------*/

ul#infomenu {
	width: 153px;
	padding-top: 2px;
	}
	
ul#infomenu li.sectiondivider {margin-bottom: 20px;}
	
ul#infomenu li a {
	display: block;
	padding: 0 0 6px 2px;
	color: #6E6E6E;
	}
ul#infomenu li a:hover {color: #000;}

#news li#infomenu0 a,
#statement li#infomenu1 a,
#demarche li#infomenu2 a,
#bio-eg li#infomenu3 a,
#bio-fr li#infomenu4 a,
.review li#infomenu5 a,
#cv li#infomenu6 a,
#contact li#infomenu7 a {color: #000;}


/*----------------------- portfolio nav ----------------------*/

ul#projectsmenu {
	float: left;
	width: 153px;
	margin: 0 0 0 1px;
	}
	
ul#projectsmenu li {float: left;}
	
ul#projectsmenu li a {
	float: left;
	display: block;
	width: 50px; 
	height: 50px;
	margin: 0 0 1px 1px;display: inline;
	}
	
li#button1 a {background: url(../images/thm_01.jpg) -50px 0px no-repeat;}
li#button2 a {background: url(../images/thm_02.jpg) -50px 0px no-repeat;}
li#button3 a {background: url(../images/thm_03.jpg) -50px 0px no-repeat;}
li#button4 a {background: url(../images/thm_04.jpg) -50px 0px no-repeat;}
li#button5 a {background: url(../images/thm_05.jpg) -50px 0px no-repeat;}
li#button6 a {background: url(../images/thm_06.jpg) -50px 0px no-repeat;}
li#button7 a {background: url(../images/thm_07.jpg) -50px 0px no-repeat;}
li#button8 a {background: url(../images/thm_08.jpg) -50px 0px no-repeat;}
li#button11 a {background: url(../images/thm_11.jpg) -50px 0px no-repeat;}
li#button12 a {background: url(../images/thm_12.jpg) -50px 0px no-repeat;}
li#button13 a {background: url(../images/thm_13.jpg) -50px 0px no-repeat;}
li#button14 a {background: url(../images/thm_14.jpg) -50px 0px no-repeat;}
li#button15 a {background: url(../images/thm_15.jpg) -50px 0px no-repeat;}
li#buttonConcert a {background: url(../images/thm_16.jpg) -50px 0px no-repeat;}
li#buttonLong a {background: url(../images/thm_17.jpg) -50px 0px no-repeat;}
li#buttonPetard a {background: url(../images/thm_18.jpg) -50px 0px no-repeat;}
li#buttonGuitarpick a {background: url(../images/thm_19.jpg) -50px 0px no-repeat;}
li#buttonDrag a {background: url(../images/thm_20.jpg) -50px 0px no-repeat;}
li#buttonBackmasking a {background: url(../images/thm_21.jpg) -50px 0px no-repeat;}
li#button1 a:hover, 
#happiness li#button1 a,
li#button2 a:hover, 
#grotesque li#button2 a,
li#button3 a:hover, 
#viciouscircle li#button3 a,
li#button4 a:hover, 
#blow li#button4 a,
li#button5 a:hover, 
#getwellsoon li#button5 a,
li#button6 a:hover, 
#machination li#button6 a,
li#button7 a:hover, 
#eldorado li#button7 a,
li#button8 a:hover, 
#neonsigns li#button8 a,
li#button15 a:hover, 
#theend li#button15 a,
li#button14 a:hover, 
#screaminggirls li#button14 a,
li#button13 a:hover, 
#dictionary li#button13 a,
li#button12 a:hover, 
#bigsigh li#button12 a,
li#button11 a:hover, 
#awcmon li#button11 a,
li#buttonConcert a:hover, 
#concertposters li#buttonConcert a,
li#buttonLong a:hover, 
#longshot li#buttonLong a,
li#buttonPetard a:hover, 
#petard li#buttonPetard a,
li#buttonGuitarpick a:hover, 
#guitarpick li#buttonGuitarpick a,
li#buttonDrag a:hover, 
#drag li#buttonDrag a,
li#buttonBackmasking a:hover, 
#backmasking li#buttonBackmasking a { background-position: 0px 0px;}

.longshot1 #thumbnails #thumbnail1,
.longshot2 #thumbnails #thumbnail2,
.longshot3 #thumbnails #thumbnail3,
.petard1 #thumbnails #thumbnail1,
.petard2 #thumbnails #thumbnail2,
.petard3 #thumbnails #thumbnail3,
.guitarpick1 #thumbnails #thumbnail1,
.guitarpick2 #thumbnails #thumbnail2,
.guitarpick3 #thumbnails #thumbnail3,
.guitarpick4 #thumbnails #thumbnail4,
.guitarpick5 #thumbnails #thumbnail5,
.drag2 #thumbnails #thumbnail1,
.screaminggirls1 #thumbnails #thumbnail1,
.screaminggirls2 #thumbnails #thumbnail2,
.screaminggirls3 #thumbnails #thumbnail3,
.screaminggirls4 #thumbnails #thumbnail4,
.backmasking1 #thumbnails #thumbnail1 {
	background-position: -50px 0 !important;
	}
.longshot4 #rightcol #thumbnails #thumbnail4,
.petard4 #rightcol #thumbnails #thumbnail4,
.guitarpick6 #rightcol #thumbnails #thumbnail6,
.drag1 #rightcol #thumbnails #thumbnail2,
.drag3 #rightcol #thumbnails #thumbnail3,
.screaminggirls5 #rightcol #thumbnails #thumbnail5,
.backmasking2 #rightcol #thumbnails #thumbnail2 {
	color: #666;
	background-color: #E1E1E1;
	border: 1px solid #666;
	}


/*--------------------------- splash --------------------------*/

#footer {
	float: left;
	width: 820px;
	margin: 4px 0 0 0;
	}

#footer p {
	text-align: right;
	color:#919191;
	font-size: .8em;
	}
	
#footer p a {color:#919191;}
#footer p a:hover {
	text-decoration:underline;
	color: #424242;
	}

#footer p a.nolink,
div#rightcol p a.nolink {text-decoration: none;}
	
#footer p a.nolink:hover {
	color: #919191;
	cursor: default;
	}
	
div#rightcol p a.nolink {
	color: #535353;
	cursor: default;
	}