/*--------------------------------------------------------------------
// wsc.css | © Zocoloco Studios 2005 | All Rights Reserved | http://www.zocoloco.com
//-------------------------------------------------------------------*/



/* HTML STYLES  :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::  */

body {
	margin: 0px;
	padding: 0px;
	background: #FFFFFF;
	height: 100%;
	width: 100%;
	position: absolute;
}

/* hyperlink and anchor tag styles */

a:link, a:visited {
	color: #3B3125;
	text-decoration: none;
}

a:hover {
	color: #97282E;
	text-decoration: none;
}

a:active, a:focus {
	color: #97282E;
	text-decoration: none;
}

.burgandy a:link, a:visited {
	color: #97282E;
	text-decoration: none;
}

.burgandy a:hover {
	color: #97282E;
	text-decoration: none;
}

.burgandy a:active, a:focus {
	color: #97282E;
	text-decoration: none;
}


/* LAYOUT DIVS  :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::  */

#base {
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
	margin-top: -245px;
	margin-left: -380px;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 490px;
	width: 760px;
	filter:alpha(opacity=60);					/* IE opacity -> percentage */
	-moz-opacity:0.6;							/* gecko browsers opacity -> decimal */
	opacity: 0.6;										/* CSS 3 */
	z-index:0;
}

#content {
	margin-top: -245px;
	margin-left: -380px;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 490px;
	width: 760px;
	z-index:1;
}

#footer {
	position: absolute;
	margin-top: 250px;
	margin-left: -380px;
	top: 50%;
	left: 50%;
	height: 30px;
	width: 760px;
}

/* COMPONENT DIVS  :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::  */

/* BASE COMPONENTS: MENUHEADER  ::::::::::::::::::::::  */
#menuHeader {
	height: 150px;
	width: 760px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font: bold 10pt Arial, Helvetica, sans-serif;
	color: #3B3125;
	z-index:2;
}

#hideMenus {
	position:absolute;
	left:0px;
	top:0px;
	width:400px;
	height:90px;
	z-index:3;
}

.menuItem {
	position: absolute;
	top: 10px;
	left: 10px;
	width:auto;
	line-height: 17px;
	z-index:4;
}

.menuItem a:link, .menuItem a:visited {
	color: #3B3125;
	text-decoration: none;
}

.menuItem a:hover {
	color: #97282E;
	text-decoration: none;
}

.menuItemActive {
	position: absolute;
	top: 10px;
	left: 10px;
	width:auto;
	line-height: 17px;
	z-index:4;
}

.menuItemActive a:link, .menuItemActive a:visited {
	color: #97282E;
	text-decoration: none;
}

.menuItemActive a:hover {
	color: #97282E;
	text-decoration: none;
}

#menuItemProcessSub {
	position: absolute;
	top: 20px;
	left: 190px;
	width:120px;
	line-height: 17px;
	visibility: hidden;
	z-index:5;
}

#menuItemPortfolioSub {
	position: absolute;
	top: 20px;
	left: 253px;
	width:120px;
	line-height: 17px;
	visibility: hidden;
	z-index:5;
}

/* BASE COMPONENTS: CENTER IMAGES  :::::::::::::::::::  */
#image { 
	position: absolute;
	top: 100px;
	left: 28px;
	height: 234px;
	width: 234px;
}

/* BASE COMPONENTS: CONTENT   :::::::::::::::::::::::::::  */
.headerLarge {
	position: absolute;
	top: 120px;
	left: 10px;
	height: 35px;
	font: 36pt Arial, Helvetica, sans-serif;
	color: #3B3125;
	letter-spacing: -1px;
}

.headerMedium {
	position: absolute;
	top: 350px;
	left: 28px;
	height: 30px;
	width: 705px;
	font: 24pt Arial, Helvetica, sans-serif;
	color: #9F6B23;
	letter-spacing: -1px;
}

.headerSmall {
	position: absolute;
	top: 350px;
	left: 28px;
	height: 30px;
	width: 705px;
	font: 22pt Arial, Helvetica, sans-serif;
	color: #9F6B23;
	letter-spacing: -1px;
}

.headerSmall a:link, .headerSmall a:visited {
	color: #9F6B23;
	text-decoration: none;
}

.headerSmall a:hover {
	color: #97282E;;
	text-decoration: none;
}

.subHeader {
	position: absolute;
	top: 104px;
	left: 10px;
	height: 15px;
	font: 12pt Arial, Helvetica, sans-serif;
	color: #97282E;
}

.tag {
	position: absolute;
	top: 440px;
	left: 200px;
	height: 15px;
	width: 500px;
	font: 12pt Arial, Helvetica, sans-serif;
	color: #9F6B23;
}

.bodyCopy {
	position: absolute;
	font: 10pt Arial, Helvetica, sans-serif;
	color: #3B3125;
	line-height:13pt;
	overflow: auto;
}

#next {
	position: absolute;
	top: 400px;
	left: 630px;
	height: 15px;
	width: 100px;
}

#previous {
	position: absolute;
	top: 400px;
	left: 630px;
	height: 15px;
	width: 100px;
}

.nextPrevBut {
	font: bold 7pt Arial, Helvetica, sans-serif;
}

a.nextPrevBut:link, a.nextPrevBut:visited {
	color: #9F6B23;
	text-decoration: none;
}

a.nextPrevBut:hover {
	color:#97282E;
	text-decoration: none;
}


/* PORTFOLIO COMPONENTS DIVS  ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::  */
.portfolioSection {
	position: absolute;
	top: 92px;
	left: 10px;
	height: 35px;
	width: 550px;
	font: 36pt Arial, Helvetica, sans-serif;
	color: #3B3125;
	letter-spacing: -1px;
}

.portfolioProject {
	position: absolute;
	top: 180px;
	left: 25px;
	height:20px;
	width: 175px;
	font: 10pt Arial, Helvetica, sans-serif;
	color: #9F6B23;
	text-align:left;
	line-height: 20px;
}

.portfolioProject a:link, .portfolioProject a:visited {
	color: #97282E;
	text-decoration: none;
}

.portfolioProject a:hover {
	color: #9F6B23;
	text-decoration: none;
}

.portfolioProject a:active, .portfolioProject a:focus {
	color: #9F6B23;
}

.portfolioProjectActive {
	position: absolute;
	top: 180px;
	left: 25px;
	height:20px;
	width: 175px;
	font: 10pt Arial, Helvetica, sans-serif;
	color: #9F6B23;
	text-align:left;
	line-height: 20px;
}

.portfolioProjectActive a:link, .portfolioProjectActive a:visited {
	color: #9F6B23;
	text-decoration: none;
}

.portfolioProjectActive a:hover {
	color: #9F6B23;
	text-decoration: none;
}

.portfolioWhiteBullet {
	color: #FFFFFF;
}

.projectDescription {
	position: absolute;
	top: 175px;
	left: 235px;
	height: 290px;
	width: 500px;
	font: 10pt Arial, Helvetica, sans-serif;
	color: #3B3125;
	line-height:13pt;
	overflow: auto;
}

.client {
	font: 18pt Arial, Helvetica, sans-serif;
	color: #9F6B23;
	line-height: 28px;
}

.clientLocation {
	font: 8pt Arial, Helvetica, sans-serif;
	color:#C0C0C0;
	line-height: 10px;
}

.jobTitle {
	font: 12pt Arial, Helvetica, sans-serif;
	color: #9F6B23;
	line-height: 28px;
}

.portfolioView {
	font: 10pt Arial, Helvetica, sans-serif;
	color: #97282E;
	line-height: 14pt;
}

.portfolioView a:link, .portfolioView a:visited {
	color: #9F6B23;
	text-decoration: none;
}

.portfolioView a:hover {
	color: #97282E;
	text-decoration: none;
}

.portfolioView a:active, .portfolioView a:focus {
	color: #97282E;
}

div#portfolioLinks {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 19px;
	height: 19px;
}
   
#portfolioLinks a:hover {
	filter:alpha(opacity=60);					/* IE opacity -> percentage */
	-moz-opacity:0.6;							/* gecko browsers opacity -> decimal */
	opacity: 0.6;										/* CSS 3 */
}
   
#portfolioLinks a span {
	display: none;
}

#portfolioLinks a:hover span {
	display: block;
	position: absolute;
	top: 22px;
	left: 5px;
	width: auto;
	overflow:visible;
	padding: 1px 1px 1px 1px;
	background-color:#FFFFCC;
	border: 1px solid #C0C0C0;
	font: normal 10px/12px Verdana, sans-serif;
	color: #660000;
	text-align:center;
	z-index:100;
}

.portfolioImage {
	position: absolute;
	height: 19px;
	width: 19px;
}

.toolTip {
	position: relative;
	top: 3px;
	left: 0px;
	height: 14px;
	background:#fcfce6;
	border: 1px solid #fbd197;
	font: 8pt Arial, Helvetica, sans-serif;
	color: #9F6B23;
	text-align:center;
	line-height:14px;
}

.portfolioDownload {
	position: absolute;
	top: 260px;
	left: 0px;
	width: 175px;
	font: 7pt Arial, Helvetica, sans-serif;
	color: #9F6B23;
}

.portfolioDownload a:link, .portfolioDownload a:visited {
	color: #97282E;
	text-decoration: none;
}

.portfolioDownload a:hover {
	color: #9F6B23;
	text-decoration: none;
}




/* PORTFOLIO VIEWER ::::::::::::::::::::::::::::::::::::  */
.portfolioBase {
	position: absolute;
	top: 0px;
	left: 0px;
	width:  498px;
	height: 288px;
	border: 1px solid #CCCCCC;
	background-color:#FFFFFF;
}

.portfolioRule {
	position: absolute;
	top: 1px;
	left: 1px;
	height: 20px;
	width: 498px;
	border-bottom: 1px solid #CCCCCC;
}

.portfolioClose {
	position: absolute;
	top: 4px;
	left: 482px;
	height: 12px;
	width: 12px;
	cursor: pointer;
	cursor: hand;
	z-index:30;
}

.portfolioBackground {
	position: absolute;
	top: 28px;
	left: 8px;
	height: 250px;
	width: 480px;
	background-color:#8C6B4A;
	border: 1px solid #000000;
	text-align: center;
}

.portfolioHeader {
	position: absolute;
	top: 4px;
	left: 12px;
	right: 12px;
	height: 15px;
	width: 350px;
	font: bold 8pt Arial, Helvetica, sans-serif;
	color:#999999;
}

.portfolioNav {
	position: absolute;
	top: 4px;
	right: 26px;
	height: 15px;
	width: 170px;
	font: bold 8pt Arial, Helvetica, sans-serif;
	color:#999999;
	text-align:right;
}

.portfolioNav a:link, .portfolioNav a:visited {
	color: #999999;
	text-decoration: none;
}

.portfolioNav a:hover {
	color: #9F6B23;
	text-decoration: none;
}

.portfolioNav a:active, .portfolioNav a:focus {
	color: #9F6B23;
}

.portfolioNavActive {
	color:#97282E;
}

/* PORTFOLIO VIEWER  :::::::::::::::::::::::::::::::::::::::  */






/* WEB  ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::  */
/* FILM/TV  ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::  */




.videoBackground {
	position: absolute;
	top: 30px;
	left: 10px;
	height: 250px;
	width: 480px;
	z-index:150;
	text-align:center;
}


/* SHARED  :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::  */


/* FOOTER COMPONENTS:  CREDITS ::::::::::::::::::::::::::  */
#zocoloco {
 	font: bold 7pt Arial, Helvetica, sans-serif;
	color: #CCCCCC;
	text-align:center;
	position: relative;
	top: 1px;
	left: 180px;
	height: 14px;
	width: 400px;
}

a.zocolocoLink, a.zocolocoLink:visited {
	color: #CCCCCC;
	text-decoration: none;
	filter:alpha(opacity=60);					/* IE opacity -> percentage */
	-moz-opacity:0.6;							/* gecko browsers opacity -> decimal */
	opacity: 0.6;										/* CSS 3 */
}

a.zocolocoLink:hover {
	color:#CCCCCC;
	text-decoration: none;
	filter:alpha(opacity=90);					/* IE opacity -> percentage */
	-moz-opacity:0.9;							/* gecko browsers opacity -> decimal */
	opacity: 0.9;										/* CSS 3 */
}



.portfolioSectionNOT USED {
	position: absolute;
	top: 80px;
	left: 12px;
	height: 25px;
	width: 150px;
	font: bold 10pt Arial, Helvetica, sans-serif;
	color: #97282E;
}

.portfolioBody {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 275px;
	width: 500px;
	font: 10pt Arial, Helvetica, sans-serif;
	color: #3B3125;
	line-height:13pt;
	overflow: auto;
}

.portfolioBorder {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 290px;
	width: 500px;
	background-color:#FFFFFF;
}