/**
 * 
 * @project viviennekoorland.com
 * @version 1.0
 * 
 * @author Grace Pok (www.gracepok.com)
 * Color Theme:
 * Basic structure:
 */


/* General Style
 * --------------------------------------------------
 */
body {
	font-family: Arial, Helvetica, sans-serif; 
	color: #5a6466;
	font-size: 80%;
	line-height: 1.4;
}
body#pghome{
	background: url("../images/home/main.jpg") no-repeat top center;
}
p, h1, h2 {
	color: #5a6466;
}
p, h1, h2, h3, h4 { margin-top: 0px; }
h1{
	font-size: 200%;
}
h2 {
	font-size: 160%;
}

a 			{ color: #5a6466; }
a:link 		{ }    /* unvisited link */
a:visited 	{  }  	/* visited link */
a:hover 	{ color: black; }   /* mouse over link */
a:active 	{ color: black; }   /* selected link */


/* General Document Structure 
 * Thanks to: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
 * ----------------------------------------------------------------------------*/
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#mastheadwrapper {
	margin: 0 auto;
	padding: 50px 0 30px 0;
	height: 60px; /* needed for IE transparency; px (not em) for height */
}
/* center align */
#masthead, #content, #footer {
	width: 76em;
	margin: auto;
}
#content {
   padding-bottom: 30px;   /* Height of the footer */
}
#footerwrap {
   position:absolute;
   bottom: 0;
   width:100%;
   height: 20px;   /* Height of the footer */
   padding-bottom: 5px;
}



/* 
 * Masthead -- Logo + Menu
 * --------------------------------
 */
#mastheadwrapper {
	background-color: white;
}
#logo {
	border: 0px;
	margin-right: 8px;
}

#masthead h1{ 
	color: #ddd;
	font-weight: normal;
	font-size: 2em;
	
	text-transform: lowercase;
	margin: 0; padding: 0;
}

/* main navigation */
#menu {
	float: right;
	padding: 0;		margin: 0;
	text-transform:  uppercase;
	list-style-type: none; 
	width: 42.4em;
}
#menu li, #menu a { float: left; display: block; }
#menu li {
	padding-left: 2em;
	display: block;
}
#menu li a			{ text-align: center;  text-decoration: none; }
#menu li a:link 	{  }    /* unvisited link */
#menu li a:visited 	{  }  	/* visited link */
#menu li a:hover 	{ color: #303030; }   /* mouse over link */
#menu li a:active 	{ }   /* selected link */

/* separate fixed width so that bold font will not affect other links */
#menu li a#navbio {width: 4em;}
#menu li a#navcurr {width: 5em;}
#menu li a#navpast {width: 3em;}
#menu li a#navdraw {width:  5em;}
#menu li a#navexh {width:  6em;}
#menu li a#navpub {width: 6em;}

/* highlight current item */
#pgbio #menu li a#navbio,
#pgcurr #menu li a#navcurr,
#pgpast #menu li a#navpast,
#pgdraw #menu li a#navdraw,
#pgexhi #menu li a#navexh,
#pgpub #menu li a#navpub
{  
 	font-weight: bold;
}


/* special setting for home page */
#pghome #mastheadwrapper{
	font-weight: bold; 
	-moz-opacity:0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
	filter:alpha(opacity=60);
}
#pghome #menu { margin-top: -1.65em;}
#pghome #footer span {
	background-color: white;
	-moz-opacity:0.4;
	-khtml-opacity: 0.4;
	opacity: 0.4;
	filter:alpha(opacity=40);
}

/*
 * Footer
 * ---------------------------------------------- */
#footer {
	text-align: right;
}
#footer span { font-size: 90%; }
#footer a { text-decoration: none; }
#footer a:hover { text-decoration: underline; }



/* Body
 * ---------------------------------------------------- */

/* 2-col layout (about, works)
 * ---------------------------------------------------- */
#pgbio #content, #pgcurr #content, #pgpast #content, #pgdraw #content {
	
}
#textcol, #pixcol {
	min-height: 420px;
}
#textcol {
	
}
#content div.left {
	float: left;
	width: 22em;
	padding-left: 11.6em;
}
#content div.right {
	width: 40.2em;
	float: right;
}
.projinfo { 
	height: 365px;	/* to bottom-align the navigation buttons */
	line-height: 1.4;
}
.projinfo h2, .projinfo p { margin: 0; }
.projinfo h2 { font-size: 110%; margin-bottom: 1em; text-transform: uppercase; font-weight: normal; }
.projinfo .desc { margin-top: 1em;}
.worksnav { font-size: 90%; }
.worksnav a { text-decoration: none; color: #bbb; text-transform: uppercase; }
.worksnav a:link, .worksnav a:visited .worksnav a:hover, .worksnav a:active { text-decoration: none; }

.worksnav a.clickable { text-decoration: none;  color: #5a6466; }
.worksnav a.clickable:link, .worksnav a.clickable:visited { text-decoration: none; }
.worksnav a.clickable:hover { text-decoration: underline; }
.worksnav a.clickable:active { text-decoration: none; }

.worksnav #btn_prev { padding-right: 5px; margin-right: 5px;}
.worksnav #btn_next { padding-left: 5px; margin-left: 5px;}
#pgcurr #pixcol img, #pgpast #pixcol img, #pgdraw #pixcol img {
	/* images are:  512x380 */
	position: absolute; left:0; top:0; 
}

#slideshow_works {
	position: relative;
	width: 512px;
	height: 380px;
	display: block;
	margin: 0;
	padding: 0;
	overflow:hidden;
}





/* 
 * Utility
 * ------------------------ */
.clear{
	padding: 0px;
	margin: 0px;
	border: 0px;
	font-size: 0px;
	display: block;
	clear: both;
	overflow: hidden;
	height: 0px;
}

.clickable {
	cursor: pointer;
}