/******************************************************
Style sheet for pixelplume.com

author:  Grace Pok
version 1.0

Color scheme

	Green:  6DB33F
	Light green (link hover):  C1D83D
	white: (active link + text): FFFFFF
	grey: (minor text): D4D4D4

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

/* Global settings 
-------------------------------------------------------------------------*/
* {
	margin: 0px;
	padding: 0px;
	color: white;
}

body {
	font-family: Helvetica, "Myriad", "Myriad Pro", Arial, Verdana, sans-serif;
/*	min-width: 950px;  	/*NOTE:  IE specific hack in IE.css for this */
	background-color: black;
	
	text-align: center;  /* for IE5/Win centering */
}
a {
	cursor: pointer;
	text-decoration: none;
	color: #6DB33F;
}
a:hover {
	color: #C1D83D;
}

/* this wrapper soley exists to centering the entire page */
#wrapper {
	text-align: left;		/* for IE5/Win centering */
	width: 950px;
	margin: 0 auto;	
}

/* Header
-----------------------------------------------------------------------*/
div#header{
	height: 128px;
}
div#header img { /* logo 230 x 121 */
	border: 0;
	padding: 3px 0 0px 10px;
	
}

/* Main Navigation Menu
-----------------------------------------------------------------------*/
#navbox {
	height: 25px;
	padding-left: 10px;
	float: left;
	margin-bottom: 5px;
}
#navbox ul {
	list-style: none;
	float: left;
}
#navbox li {
	float: left;
	padding-right: 30px;
}
#navbox a {
	display: block;
	height: 25px;
	text-indent: -1000px;  /* nav text will not show up w CSS, but will show without CSS */
	overflow: hidden;  /*needed because the above text indent will make outline if you click on the menu */
}

/* need to give individual width to give consistant spacing between items */
#navreel {width: 51px;}
#navproj {width: 89px;}
#navarch {width: 76px;}
#navclie {width: 73px;}
#navfp {width: 160px;}

#navcontact {width: 74px;}


/* Hovering effect  for navigation menu items */
#navbox a#navreel { background: black url("../graphics/reel_default.gif") no-repeat top left; }
#navbox a#navreel:hover { background: black url("../graphics/reel_hover.gif") no-repeat top left; }
body#reel_pg #navbox a#navreel { background: black url("../graphics/reel_active.gif") no-repeat top left; }

#navbox a#navproj { background: black url("../graphics/proj_default.gif") no-repeat top left; }
#navbox a#navproj:hover { background: black url("../graphics/proj_hover.gif") no-repeat top left; }
body#proj_pg #navbox a#navproj { background: black url("../graphics/proj_active.gif") no-repeat top left; }

#navbox a#navarch { background: black url("../graphics/archive_default.gif") no-repeat top left; }
#navbox a#navarch:hover { background: black url("../graphics/archive_hover.gif") no-repeat top left; }
body#arch_pg #navbox a#navarch { background: black url("../graphics/archive_active.gif") no-repeat top left; }

#navbox a#navclie, #navbox a#navfp { 
	background-color: black;
	background-repeat: no-repeat;
	background-position: 0px 0px; 
}

#navbox a#navclie {background-image: url("../graphics/clients.gif");}
#navbox a#navfp {background-image: url("../graphics/friendspartners.gif");}

#navbox a#navclie:hover,  #navbox a#navfp:hover { background-position: 0px -25px; }
#clie_pg #navbox a#navclie, #fp_pg #navbox a#navfp   { background-position: 0px -50px; }


/*  CONTACT PAGE IS REMOVED
#navbox a#navcontact{ background: black url("../graphics/contact_default.gif") no-repeat top left; } 
#navbox a#navcontact:hover { background: black url("../graphics/contact_hover.gif") no-repeat top left; } 
body#contact_pg #navbox a#navcontact{ background: black url("../graphics/contact_active.gif") no-repeat top left; } 
*/

/* Content
------------------------------------------------------------------*/
div#content {
	padding-left: 18px;
}

/** multi-page layout **/
#clie_pg #content, #fp_pg #content {
	padding-top: 20px;
	padding-bottom: 10px;
}

/* Project Selector 
----------------------------------------------------------------- */
div#pmenu {
	width: 894px;
	height: 100px;
	margin-left: 0px;
}

/* scrollable div area -- inside the pmenu selector */
#scrollable {
	float: left;
	width: 888px;  
	height: 80px; 
	overflow: hidden;
	white-space: nowrap;
	border: 3px solid #333333;
	background-color: #333333;
}
#scrollable a  img{
	border: 0;
	border-right: 3px solid #333;  /*match the container color */

	filter:alpha(opacity=60); /* for IE */
	opacity:0.60;  /* CSS3 standard */
	-moz-opacity:0.60; /* for Mozilla */
}

#scrollable a img.hover, #scrollable a img.cur, #scrollable a img:hover{
	filter:alpha(opacity=100); /* for IE */
	opacity:1.0;  /* CSS3 standard */
	-moz-opacity:1.0; /* for Mozilla */
}

/* wrap to make sure that image area is clickable */
#wrap {
	float: left;
	clear: both;
	width: 886px;
	height: 14px;
	background-color: #4D4D4D;
	border: 1px solid #CCC;
	margin-left: 3px;
	display: inline;  /* fixes IE5/Win double margin bug */
}

/* horizontal track */
#track {
	margin-left: 5px;
	width: 876px;    /*margin + width:  slightly smaller than wrapper so that scrollder doesn't look like it's dangling */
	height: 15px;
	font-size: 0;
}

/* horizontal track handle */
#handle {
	width: 102px;
	height: 15px;
	font-size: 0;  /* prevents handle from shifting down when text size is increased */
}

/* Home Page 
 * ------------------------------------------------------------------*/
 #home_pg #content {
	margin: 10px 0 10px 50px
 }
 #home_pg #content p {
	/* color: #C1D83D; */
	/* color: #6DB33F; */
	color: white;
	font-size: 1px;
	visibility: hidden;
}



/* Reel Page
 * The movie should be centered on page
 * ------------------------------------------------------------------*/
#reel_pg #content {
	text-align: center;  /* for IE5/Win centering */
}
#reel_pg  #bigpx{
	margin: 10px auto;
	width: 620px;
}

#reel_pg div#footer  {
 	width: auto;  /* for this page it's centered respect to the body */
}

/* Project Pages
common elements to Motion & Still projects
------------------------------------------------------------------*/
#pinfo {
	font-size: 80%;
	padding-left: 5px;
	padding-top: 20px;
	height: 30px;
	border: 0px solid white;/* DEBUG */	
}
#pinfo span.projtitle {
	font-weight: bold;
}
#pinfo span.projdesc_s {  /* short description */
	margin-left: 2em;
	color: #AAA;
}

#pixcontainer {  /* hold both big picture & thumbnails */
}


/* Clients Pages
------------------------------------------------------------------*/

#clie_pg #content ul {
	list-style: none;
	margin-left: 20px;
	width: 200px;
	float: left;
	font-size: 80%;
	line-height: 1.4;
}
#clie_pg #content ul li {color: #ececec}
#clie_pg #content ul#clients_architects {
	border-left: 1px solid #646464;
	padding-left: 60px;
}
#clie_pg #content ul.clientcol_wide {
	width: 270px;
}


/* Friends and Partners
------------------------------------------------------------------*/
#fp_pg #content div.leftpanel {
	width: 200px;
	padding: 0px 60px 0 20px;
	float: left;
	font-size: 90%;
	line-height: 1.4;
}
#fp_pg #content ul {
	float: left;
	width: 440px;
	list-style: none;
	border-left: 1px solid #646464;
	padding-left: 60px;
}
#fp_pg #content ul li {
	padding-bottom: 15px;
}
#fp_pg #content ul li.lastitem {
	padding: 0;
	}
/* Footer
------------------------------------------------------------------*/
div#footer {
	margin-top: 25px;
	margin-bottom: 5px;
	margin-left: 10px;
	font-size: 80%;
	text-align: center;
}
div#footer .copyright {
	color: #D4D4D4;
	font-size: 90%;
}

p#owner {
	display: none;
}

/* Utility
------------------------------------------------------------------*/
.hidden {
	visibility: hidden;
}

span.tab{
	margin-left: 2em;
}
div.clear{
	padding: 0px;
	margin: 0px;
	border: 0px;
	clear: both;
}


.underline {
	text-decoration: underline
}