@charset "UTF-8";

body {
	background: url(/images/backgrad.jpg) repeat-x #000000;
	margin: 0px;
	color: #030303;
	font-family: Verdana, Arial, Helvetica, sans-serif; /*or any other font family you prefer*/
	font-size: 12px;
	}
	
#container {
	position: relative;
	width: 800px;
	margin: auto;
	height: auto;
	}
	
div.imageholder { /*page image holder*/
	position: absolute;
	width: 800px; /*Width of Image*/ 
	height: 600px; /*Height of Image*/ 
	left: 0px; /* This is applied relative to edge of container */ 
	top: 0px;
	z-index: 0;
	}
	
div.imageholder2 { /*page image holder*/
	position: absolute;
	width: 800px; /*Width of Image*/ 
	height: 600px; /*Height of Image*/ 
	left: 0px; /* This is applied relative to edge of container */ 
	top: 0px;
	z-index: 10;
	}

	
/*
div.logotext{
            position:absolute;
            width:376px;
            height:90px;
            left:0px;
            top: 453px;
}
*/

div.navigation {
	position: absolute;
	width: 800px;
	height: 20px;
	right : 0px;
	top: 25px;
	word-spacing: 2em;
	letter-spacing: .5px;
	z-index: 12; /*z-index the higher number the higher layer*/
	line-height: 30px;
	font-size: 14px;
	font-weight: 500;
	color: #666;
	text-align: right;
}

div.footer {
	position: absolute;
	width: 800px;
	height: 20px;
	right: 0px;
	top: 578px;
	z-index: 12; /*z-index the higher number the higher layer*/
	font-size: 8px;
	color: #666;
	text-align: right;
}

div.footerleft {
	position: absolute;
	width: 800px;
	height: 20px;
	left: 0px;
	top: 580px;
	z-index: 20; /*z-index the higher number the higher layer*/
	font-size: 10px;
	color: #666;
	text-align: left;
}

.style1 {/*nav bullet color*/
	color: #666;
	font-weight: lighter;
	}
	
.style2 {/*nav link on mode red*/
	color: #800000;
	/*text-decoration: none;*/
	}
.style2b {/*nav link on mode gry*/
	color: #A7A7A7;
	/*text-decoration: none;*/
	}
	
a.navigation:link {
	text-decoration: none;
	color: #A7A7A7;
	}

a.navigation:visited {
	text-decoration: none;
	color: #666;
	}

a.navigation:hover {
	text-decoration: none;
	color: #D9D9D9;
	/*background: #663300;*/
	}
	
a.navigation:active {
	text-decoration: blink;
	color: #800000;
	}
	
a.style1:hover {
	text-decoration: none;
	color: #A7A7A7;
	/*background: #663300;*/
	}

div.subhead {
	position: absolute;
	/*width: 542px;*/
	height: 110px;
	left: 0px;
	top: 10px;
	z-index: 11;
}

div.contentarea {
	position: absolute;
	width: 600px;
	height: 308px;
	left: 100px;
	top: 135px;
	font-size: 14px;
	text-align: justify;
	color: #666;
	z-index: 7;
	line-height: 22px;
	overflow: auto;
	padding-right: 25px;
}

a.rollover{
     position: relative;
	 text-decoration: none;
	color: #A7A7A7;
}

a.rollover span{
     position: absolute;
	 height: 400px;
	 width: 600px;
	 border-style: dotted;
     top: -25px;
     left: 100px;
     display: none;
}

a.rollover:hover span{
     display: block;
}

.workdate {
	position: relative;
	left: 0px;
	top: -13px;
	color: #D9D9D9;
	z-index: 7;
	}
	
#portcat {
	position: absolute;
	top: 150px;
	left: 70px;
	color: #666;
	text-align: left;
	z-index: 12;
	word-spacing: 2em;
	letter-spacing: .5px;
	font-size: 14px;
	font-weight: 600;
	}
	
div.portcat2 {
	position: absolute;
	top: 45px;
	left: 425px;
	color: #666;
	text-align: right;
	z-index: 12;
	word-spacing: 2em;
	letter-spacing: .5px;
	font-size: 12px;
	}

.portlink2 {
	}
	
a.portlink2:link {
	color: #800000;
	}
	
a.portlink2:visited {
	color: #800000;
	}

a.portlink2:hover {
	color: #A7A7A7;
	}
	
a.portlink2off:link {
	text-decoration: none;
	color: #666;
	}
	
a.portlink2off:visited {
	text-decoration: none;
	color: #666;
	}

a.portlink2off:hover {
	color: #A7A7A7;
	}

p.portlink {
	text-align: left;
	}

p.portlink a {
	text-decoration: none;
	display: block;
	color: #666;
	}

p.portlink a:hover {
	color: #A7A7A7;
	}
	
a.portlink a:active span {
	text-decoration: blink;
	color: #800000;
	}

	
p.portlink a:link span {
	display: none;
	}

p.portlink a:visited span {
	display: none;
	}

p.portlink a:hover span {
	display: block;
	}

div.portimage {
	position: absolute;
	left: 170px;
	top: 150px;
	color: #D9D9D9;
	z-index: 12;
	}
	
div.worktext {
	z-index: 7;
	width: 580px;
	line-height: 18px;
	font-size: 13px;
	color: #D9D9D9;
}

.workdetail {
	position: relative;
	width: 460px;
	/*height: 308px;*/
	left: 120px;
	top: -31px;
	font-size: 13px;
	color: #D9D9D9;
	/*font-size: 14px;
	text-align: left;
	color: #666;*/
	z-index: 7;
	line-height: 18px;
}

.worksub {/*resume subhead*/
	position: relative;
	font-weight: bold;
	color: #800000;
	/*text-decoration: none;*/
	}

a.contentarea:link {
	text-decoration: none;
	color: #800000;
	}

a.contentarea:visited {
	text-decoration: none;
	color: #800000;
	}

a.contentarea:hover {
	text-decoration: underline;
	color: #666;
	/*background: #663300;*/
	}
	
a.contentarea:active {
	text-decoration: blink;
	color: #800000;
	}

/*#navigator {
	background-color: #ff7d00;
	width: 25%;
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 1px;
	z-index: 200;
}*/

#thumbs {
	position: absolute;
	color: #F1F1F1;
	font-family: Verdana, Arial, Helvetica, sans-serif; /*or any other font family you prefer*/
	z-index: 100;
	top: 125px;
	left: 50px;
	margin: 4px 4px 0px 0px;
	padding-right: 6px;
	width: 100px;
	height: 355px;
	overflow: auto;
	}
		
/*#thumbs a span img {
	display: none;
	z-index: 0;
	}*/
	
a.feature01 {
	/*display: block;
	width: 40px;
	height: 40px;
	top: 150px;
	left: 0px;
	float: left;
	line-height: 20px;
	letter-spacing: 1px;
	position: absolute;*/
	z-index: 10;
	display: block;
	top: 150px;
	border: 0px;
	border-width: 0 0px 0px 0;
	margin: 4px 4px 1em 4px;
	float: left;
	position: relative;
	text-decoration: none;
	}

/*a.feature01:hover {
	border-color: #800040; 
	}*/
	
a.feature01:hover .overlay01 {
	position: absolute;
	z-index: -10;
	width: 800px; /*Width of Image*/ 
	height: 600px; /*Height of Image*/ 
	left: 0px; /* This is applied relative to edge of container */ 
	top: -154px;
	border: 0px;
	display: block;
	}

a.feature02:hover .overlay01 {
	left: -48px; /* This is applied relative to edge of container */
}

a.feature03:hover .overlay01 {
	left: -144px; /* This is applied relative to edge of container */
}

a.feature04:hover .overlay01 {
	left: -48px; /* This is applied relative to edge of container */
}
	
a.feature01 .overlay01 .caption01 {
	position: absolute;
	width: 800px; /*Width of Image*/ 
	height: 600px; /*Height of Image*/ 
	z-index: -10;
	display: none;
	}

a.feature01:hover .caption01 {
	position: absolute;
	width: 800px; /*Width of Image*/ 
	height: 600px; /*Height of Image*/ 
	z-index: -10;
	display: block;
	}

a.feature02:hover .caption01 {
	z-index: -10;
}
a.feature03:hover .caption01 { top: 50%; background: rgb(30,82,140); background: rgba(30, 82, 140, 0.75); }
		
a.feature01 img {
	display: block;
	}