/**
 * 
 * @project amysimonfineart.com
 * @version 1.0
 * 
 * @author Grace Pok (www.gracepok.com)
 * @design Christian-Zechner Associates
 * 
 * Color Theme: 
 * 		blue: #85a3ad; 
 * 		grey: #5a6466;
 * Basic structure:
 */


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

a 			{ color: #5a6466; text-decoration: none; border-bottom: 1px dotted #5a6466;}
a:link 		{ }    /* unvisited link */
a:visited 	{  }  	/* visited link */
a:hover 	{ color: black; border-bottom: 1px solid #000; }   /* mouse over link */
a:active 	{ color: black; border-bottom: 1px solid #000; }   /* 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 0px auto;
	padding: 40px 0 30px 0;
	height: 70px; /* needed for IE transparency; px (not em) for height */
}
/* center align */
#masthead, #content, #footer {
	width: 76em;
	margin: auto;
}
#content {
   padding-bottom: 40px;   /* Height of the footer */
}
#footerwrap {
	background-color: white;
   position:absolute;
   bottom: 0;
   width:100%;
   height: 20px;   /* Height of the footer */
   padding-bottom: 5px;
}

#pghome #footerwrap { padding-top: 15px;}

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

#masthead h1{ 
	display: none;
}

/* main navigation */
#menu {
	float: right;
	padding: 0;		margin: 0;
	text-transform:  uppercase;
	list-style-type: none; 
	width: 512px; /* match width of #slideshow_works  */
	margin-top: 1.9em;
}
#menu li, #menu a { float: left; display: block; }
#menu li {
	display: block;
}
#menu li a			{ border: 0; text-decoration: none; margin-right: 1.5em;}
#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#navart {width: 6em;}
#menu li a#navcurr {width: 6em;}
#menu li a#navpast {width: 4em;}
#menu li a#navup {width:  7em;}
#menu li a#navpub {width: 4em;}
#menu li a#navab {width:  5em; text-align: right; margin-right: 0px;}

/* highlight current item */
#pgart #menu li a#navart,
#pgcurr #menu li a#navcurr,
#pgpast #menu li a#navpast,
#pgup #menu li a#navup,
#pgab #menu li a#navab,
#pgnews #menu li a#navpub
{  
 	font-weight: bold;
}



/*
 * Footer
 * ---------------------------------------------- */
#footer {  }
#footer span { margin-right: 2.8em; }
#footer span, #footer a { font-size: 90%; }
#footer a { border-bottom: 0px; }
#footer a:hover { text-decoration: underline; }
#footer em { color: #85a3ad; font-style: normal; font-weight: bold; margin-right: 2px;}


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

/* 2-col layout (about, works)
 * ---------------------------------------------------- */
#textcol, #pixcol, .textcol, .pixcol { min-height: 420px; }
#textcol h1, .textcol h1 { font-size: 1em; text-transform: uppercase; color: #8b999c; font-weight: normal; letter-spacing: 1px;}
#textcol h2, .textcol h2 { font-size: 1.3em;	line-height: 1; color: #444; }
#textcol h2,.textcol h2, #textcol p , .textcol p { }
#textcol p, .textcol p  { line-height: 1.6; }
#textcol p.duration, .textcol p.duration  { margin: 0; } 


#listcol .represented, #listcol .available {
	width: 12em;
	float: left;
	
}
#listcol h2 { font-weight: normal; font-size: 1em; color: #85a3ad; margin-bottom: 0.3em; text-transform: uppercase;}
#listcol ul {
	padding: 0;		margin: 0;
	list-style-type: none; 
}
#listcol .represented { margin-right: 1em;}
#listcol a { border-bottom: 0px; }
#listcol a:hover { border-bottom: 1px dotted black; }
#listcol .cur { font-weight: bold; color: #444;}

#content div.left {
	float: left;
	width: 26em;
	padding-left: 8.3em;
}
#pgup #content div.left, #pgcurr #content div.left { width: 24em; }
#content div.right {
	width: 40.2em;
	float: right;
}
.projinfo { 
	width: 380px;
	float: left;
	line-height: 1.4;
}

.projinfo h1, .projinfo h2, .projinfo p { font-weight: normal; margin: 0; font-size: 1em; margin: 0;}
.projinfo h2 {  }
.projinfo .desc { }
.worksnav { font-size: 85%; float: right; padding-right: 10px; }
.worksnav a { text-decoration: none; text-transform: uppercase;  border-bottom: 0px; }
.worksnav a:hover, .worksnav a:active { text-decoration: underline; }

.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; }

/* Slide Show 
 * ---------------------
 */
.worksnav #btn_prev, .worksnav .btn_prev { padding-right: 3px; margin-right: 3px;}
.worksnav #btn_next, .worksnav .btn_next { padding-left: 3px; margin-left: 3px;}

#pgart #pixcol img,
#pgcurr #pixcol img, #pgpast #pixcol img ,
#pgcurr .pixcol img, #pgpast .pixcol img, 
#pgup .pixcol img {
	/* optimal image size:  510x320 */
	position: absolute; left:0; top:0;   /* needed so that imgs don't flicker as they appear/disappear */
}

#slideshow_works , .slideshow_works {
	position: relative;
	width: 510px;
	min-height: 320px;
	display: block;
	margin: 0;
	padding: 0;
	overflow:hidden;
	margin-bottom: 10px;
}

#pgab #content .hours {  } 
#pgab #content .hours p{ line-height: 1.4; margin-right: 1em;}

/* facebook link */
.fblink a , .fblink img { border: 0px; vertical-align: middle; }
.fblink img { width: 18px; margin-top: -3px; margin-right: 8px }
.fblink a:hover span { text-decoration: underline;}


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

.clickable {
	cursor: pointer;
}

.external { 
	padding-right: 14px; 
	background: transparent url('../assets/icon_popout_graytrans.gif') no-repeat right center;
}
.betatag { text-align: center; color: red; position: absolute; top: 0; left: 0; z-index: 100;}
.newrow { clear: both; text-align: center; height: 60px;
	background: url('../assets/hl_thin.jpg')  no-repeat scroll 230px 0px;
}