/*==============================================================
	Index
==============================================================*/
.styleGray, .styleRed, .styleBlue, .styleOrange {line-height:90%; font-size:10px;}	
.styleRed a:hover {color:#cc3333;}
.styleGray a:hover {color:#aaa;}
.styleBlue a:hover {color:#33ccff;}
.styleOrange a:hover {color:#FFCC33;}

.plugTable {text-align:center;}

/*#pindexp {
	position:absolute;
	width:200px;
	top:40%;
	top:30%;
	left:39%;
	text-align:left;
	border-left:40px solid #333;
	border-right:40px solid #333;
	padding:20px;
	background:#000 url(images/content/pindexbg.gif) repeat-y;
	}*/
#pindexp {
	position:relative;
	width:200px;
	height:960px;
	padding:100px 20px 20px 20px;
	background:#000 url(images/content/pindexbg.gif) repeat-y;}
body.pindexb{background-color:#333}
/*==============================================================
	Layout Main Pages
==============================================================*/
body{
	margin:0px;
	padding:0px;
	font:11px/15px verdana, arial, helvetica, sans-serif;
	color:white;
	background:#333;}
#content {
	text-align:left;
	position:relative;
	width:774px;
	border:0px solid white;
	background:#000 url(images/content/hw_02.gif) repeat-y;}
.works, .links {
	position:relative;
	top:60px;
	left:160px;
	width:400px;
	margin-bottom:100px;}
.titlePage {
	position:absolute;
	top:320px;
	left:20px;
	clear:left}
/*==============================================================
	Header
==============================================================*/
#header {width:774px;
	height:320px;
	text-align:right;
	background: url(images/content/headerBW.jpg) no-repeat;}
	
#header a{font-size:6px;color:#999;}
#header a:hover{font-size:10px;color:#cc3333}
.cssPad {padding-right:20px;}
.cssPad a:link, .cssPad a {padding-bottom:35px}/*----------------------------------------------------------------------------------*/

/*==============================================================
	Navigation
==============================================================*/
#nav{
	width:150px;
	text-align:right;
	margin-top:80px;
	position:absolute;
	right:24px;
	background:url(images/content/nv_bgBW.gif) no-repeat;}	
#nav a:hover{
	border-left: 4px solid #333;
	padding-left:10px;
	color:#aaa;}
#nav h2{text-transform:lowercase;}

/*==============================================================
	Resume - Link Pages
==============================================================*/
.notAcrobat{border:none !important;padding:0px !important;float:none !important;margin:0px !important;}
.needMarg{margin-top:40px;}
.styleLookLarge{font-size:20px; color:#708090;}
.styleLookAlike p{margin-top:-5px;margin-left:72px;}
.styleLookAlike{color:#708090;}/*for jump to on resume*/

.links a {padding-left:15px;}
.links a:hover{color:#aaa}
	
/*==============================================================
url,auto,crosshair,default,pointer,move,e-resize,ne-resize,nw-resize
n-resize,se-resize,sw-resizes-resize,w-resize,text,wait,help
==============================================================*/
.works img {padding:3px; float:left; margin:0px 10px 0px 10px;}
.works img:hover {
	border-bottom:4px solid #333;position: relative;
	top: 1px;
	left: 1px;}
.works p {margin-top:-5px;}
.works p, .works h2 {margin-left:72px;}

h1 {font-size:20px;margin:0px;padding:0px;}	
h3 {color:#708090;font-size:14px;margin-top:40px;}
h3 a {font-size:16px;color:#708090;}
h2 {font-size:10px;}
h2, h3{margin-bottom:10px;}	
em, h2{color:#eee;}


a {font:12px/15px Verdana, Arial, Helvetica, sans-serif; text-decoration:none;}
h2, span.first {text-transform:uppercase}
span.first {color:#708090}
a:link, a:visited {color:white;}
a:hover {
	position: relative;
	top: 1px;
	left: 1px;}
ul {list-style-position:inside;}	
li {list-style-type:none;}
li.p_up {list-style-image:url(images/content/jump.gif)}/*----------------------------------------------------------------------------------*/
/*==============================================================
	Footer
==============================================================*/
#footer a:hover{
	position: relative;
	top: 1px;
	left: 1px;
	color:#aaa;}
#footer h2 {text-transform:lowercase;}
#footer {margin-right:20px;
	background: url(images/content/cs_logo.gif) bottom right no-repeat;
	height:40px;}
#footer h2 {
	text-align:right;
	margin-right:58px;
	position:absolute;
	bottom:0px;
	right:0px;}
	
/*==============================================================
	LrgShot files
==============================================================*/	
.lrgshotBody {background:#000 url(images/content/bbwall5.jpg) top left no-repeat}

#contentMotion {text-align:center;
	margin:0px;
	position:absolute;
	top:40%;
	left:39%;
	border:1px dashed #708090;}
	
#contentWork {position:absolute;
	bottom:0px;
	right:0px;
	margin:0px;
	border-left:1px dashed #708090;
	border-top:1px dashed #708090;
	z-index:0;}
	
#lrgshotName {
	position:relative;
	color:#708090;
	font-weight:600;
	font-size:18px;
	text-transform:uppercase;
	border-bottom:1px dashed #aaa;
	padding-top:45px;
	z-index:1;}
	
#lrgshotText {position:relative;margin:50px 50px;width:300px;z-index:1;background-color:#000;}
#lrgshotNav {
	position:absolute;
	top:250px;
	margin-left:50px;
	width:300px;
	z-index:1;
	background-color:#000000;}
#lrgshotText p {margin-top:-5px;}
.lrgshotTitle {position:relative;float:right;border-left:1px dashed #aaa;z-index:2;}
.lrgshotTitle img {border:0px}
a:hover{color:#aaa}
.lrgshotTitle a:hover{position: relative;top: 0px;left: 0px;}
/*==============================================================
	LrgShot Interactive files
==============================================================*/
.lrgshotIntBody {background-color:#000}
table.Int {width:100%;border-bottom:1px dashed #aaa;margin:0px;padding:0px;}

#lrgshotIntName {
	color:#708090;
	font-weight:600;
	padding:5px;
	font-size:18px;
	text-transform:uppercase;}

#lrgshotIntText {width:300px;padding-right:10px;}
#lrgshotIntText p, #lrgshotIntText em{
	margin:0px;
	padding:0px;
	font:11px/15px verdana, arial, helvetica, sans-serif;}
#lrgshotIntText p{margin-top:-5px}
#lrgshotIntText em{font-style:italic}
#lrgshotIntNav {width:90px;}
	
.lrgshotIntTitle {border-left:1px dashed #aaa;width:160px;}
.lrgshotIntTitle img {border:0px}	
.lrgshotIntTitle a:hover{position: relative;top: 0px;left: 0px;}	




#imageContainer {
	position:relative;
	margin:auto;
	width:500px;
	border:1px solid #000;
}

/*#imageContainer {
	height:309px;
}
*/
#imageContainer img {
	display:none;
	position:absolute;
	top:0; left:0;
}