/*-------------------------
GENERIC STYLES
--------------------------*/
body {
	font-family: Arial, sans-serif;
	color: #404040;
	background-color: #555555/*#9e977b*/;
	text-align: center;
	font-size: 12px;
	height: 100%;
	padding: 20px 0 0;
	}

a,
a:active {
	color: #910000;
	}

a:hover {
	color: #dd0000
	}

a img {
	border: 0;
	}

ul.inline {
	margin: 0;
	padding: 0;
	}

ul.inline li {
	list-style: none;
	display: inline;
	border-left: #c2c2c2 1px solid;
	padding: 0 0.6em 0 0.7em;
	}

ul.inline li.first {
	border: none;
	padding-left: 0;
	}

/* Hack to make sure a container having floated children, spans all the way to the bottom of the children
-------------------------------------------------*/
.clearfix:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

/*-------------------
STRUCTURE
--------------------*/
#Wrapper {
	margin: 0 auto;
	width: 883px;
	position: relative;
	}
	
#Viewport {
	width: 735px;
	height: 635px;
	background-color: #f8f8f8; /*#efefef*/;
	position: relative;
/*	position: absolute;
	right: 0;
*/	/*margin: 0 auto;
	*/
	margin-left: 153px;
	z-index: 5;
	
	}
	
body.NoDrawer #Wrapper {
	width: 755px;
	}
	
body.NoDrawer #Viewport,
body.NoDrawer #Disclaimer {
	margin-left: 20px;
	}

/* ----------------
HEADER AREA STYLES	
-------------------*/

#Header {
	height: 48px;
	}

#Header #Logo {
	float: left;
	height: 46px;
	}
#Header #Logo:hover {
	background-color: #e5e5e5;
	}
	
#Header #Navigation {
	margin: 0 0 0 272px;
	height: 46px;
	}

#Header ul#Navigation li {
	text-align: left;
	border: none;
	width: 150px;
	height: 46px;
	float: left;
	margin-left: 1px;
	padding: 0;
	line-height: 13px;
	}

#Header ul#Navigation li a {
	display: block;
	text-decoration: none;
	color: #404040;
	padding: 3px;
	height: 40px;
	}	
body.Projects #Header ul#Navigation li a.Projects,
body.Contact #Header ul#Navigation li a.Contact,
body.About #Header ul#Navigation li a.About,
#Header ul#Navigation li a:hover {
	background-color: #e5e5e5;
/*	border-bottom: 3px solid #cccccc;
*/	}
#Header ul#Navigation li strong {
	display: block;
	}
				
#Header ul#Navigation li span {
	font-size: 11px;
	color: #aaaaaa;
	}
#Header #Tools {
	width: #14px;
	padding: 0 4px;
	position: absolute;
	right: -22px;
	top: 0px;
	height: 14px;
	}
 	
/*--------------------
MAIN CONTENT AREA
---------------------*/

#Content {
	margin: 0 10px;
	padding: 10px 0;
	height: 567px;
	border-top: 1px solid #dddddd;
	vertical-align: middle;
	text-align: left;
	line-height: 15px;
	}
	
#Content h1 {
	font-size: 1.5em;
	margin: 5px 0 15px 0;
	}

#Content h2 {
	font-size: 1em;
	margin: 0 0 10px 0;
	}
#Content p {
	margin: 0 0 15px 0;
	}
#Content ul {
	margin: 0 0 10px 0;
	padding: 0 0 0 10px;
	}
#Content ul li {
	list-style: none;
	padding-bottom: 5px;
	}

/* ------------------------
HOME PAGE STYLES
---------------------------*/

body.Home div.project1 {
	width: 400px;
	text-align: center;
	float: left;
	}
	
body.Home div.project2 {
	width: 315px;
	text-align: center;
	float: right;
	}
		
body.Home a.project_link {
	color: #999999;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	height: 25px;
	width: 150px;
	line-height: 23px;
	float: right;
	background: url(/images/elements/project_link_off.gif) no-repeat top left;
	text-align: left;
	padding-left: 8px;
	margin-top: 10px;
	}
body.Home a.project_link:hover {
	background: url(/images/elements/project_link_on.gif) no-repeat top left;
	color: #777777;
	}
	
body.Home div.project1 a.project_link {
	padding-left: 15px;
	}
/* ------------------------
PHOTO PAGE STYLES
---------------------------*/
	
#Content #MainImg,
#Content .MainImg {
	height: 538px;
	line-height: 538px;
	text-align: center;
	background: url(/images/elements/spinner.gif) center center no-repeat transparent;
	}
#Content #MainImg img,
#Content .MainImg img {
	vertical-align: middle;
	}
#Content p.ImageTitle,
#Content p#ImageTitle {
	margin: 0;
	color: #8a8a8a;
	text-align: center;
	line-height: 25px;
	}
	
#Content a.photo_link {
	color: #999999;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	height: 25px;
	width: 125px;
	line-height: 23px;
	padding-left: 8px;
	float: right;
	background: url(/images/elements/photo_link_off.gif) no-repeat top left;
	}
#Content a.photo_link:hover {
	background: url(/images/elements/photo_link_on.gif) no-repeat top left;
	color: #777777;
	}
	
/* -------------------
PHOTO NAVIGATION STYLES
---------------------------*/

#PhotoNav ul.inline li {
	border: none;
	}

#PhotoNav a {
	position: absolute;
	bottom: 12px;
	width: 48px;
	height: 25px;
	line-height: 23px;
	color: #aaaaaa;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	}

#PhotoNav a.prev {
	background: url(/images/elements/prev_off.gif) no-repeat left top;
	padding: 1px 0 0 3px;
	left: 0;
	}

#PhotoNav a.prev:hover {
	background-image: url(/images/elements/prev_on.gif);
	color: #555555;
	}
	
#PhotoNav a.next {
	background: url(/images/elements/next_off.gif) no-repeat right top;
	padding: 1px 3px 0 0;
	right: 0;
	}	

#PhotoNav a.next:hover {
	background-image: url(/images/elements/next_on.gif);
	color: #555555;
	}
	
/*-----------------------
DISCLAIMER
-----------------------*/

#Disclaimer {
	width: 725px;
	margin-left: 153px;
	padding: 5px;
	font-size: 11px;
	background: url(/images/elements/drop_shadow_vertical.gif) repeat-x top transparent;
	}

#Disclaimer div.copyright {
	text-align: left;
	width: 200px;
	float: left;
	}
	
#Disclaimer div.morphus {
	line-height: 14px;
	text-align: right;
	width: 206px;
	float: right;
	}
#Disclaimer div.morphus span {
	float: left;
	}
#Disclaimer div.morphus a {
	display: block;
	width: 61px;
	height: 14px;
	margin-left: 145px;
	text-decoration: none;
	}
#Disclaimer div.morphus a img {
	border: none;
	border-bottom: none;
	}
	
/*------------------------
DRAWER
-------------------------*/
#Drawer {
	width: 128px;
	height: 617px;
	background: url(/images/elements/drop_shadow.gif) right repeat-y #dddddd;
	border-right: none;
	/*text-align: right;*/
	padding: 5px 10px 5px 15px;
	position: absolute;
	top: 6px;
	/*left: -137px;*/
	left: 0;
	}
	
body.NoDrawer #Drawer,
#Drawer.closed {
	width: 20px;
	padding: 5px 0;
	overflow: hidden;
	}

#Drawer.closed h2,
#Drawer.closed .thumbsWrapper,
#Drawer.closed #thumbsWrapper {
	display: none;
	}
	
#Drawer h2 {
	font-size: 1.15em;
	margin: 35px 0 10px;
	}
	
#Drawer h2 a {
	color: #404040;
	text-decoration: none;
	}
	
#Drawer h2 a:hover {
	text-decoration: underline;
	}
	
#Drawer p {
	margin: 3px 0 2px 0;
	font-size: 11px;
	}
	
#Drawer .thumbsWrapper,
#Drawer #thumbsWrapper {
	background-color: #f2f2f2;
	padding: 3px;
	border: 1px solid #d2d2d2;
	height: 520px;
	overflow: hidden;
	position: relative;
	}
	
/*
#Drawer ul {
	background-color: #f2f2f2;
	padding: 3px;
	border: 1px solid #d2d2d2;
	}
*/
#Drawer ul.inline li {
	float: left;
	width: 62px;
	text-align: center;
	border: none;
	padding: 4px 0;
	margin: 0;
	line-height: 0;
	}

#Drawer ul.inline li.portrait {
	height: 50px;
	line-height: 49px;
	}
#Drawer ul.inline li a {
	display: block;
	font-size: 10px;
	color: #f2f2f2;
	width: 100%;
	height: 100%;
	}

#Drawer ul.inline li a img {
	border: 2px solid #ffffff;
	}
#Drawer ul.inline li a:hover img {
	border: 2px solid #555555;
	}
#Drawer ul.inline li.portrait img {
	vertical-align: middle;
	}
	
/*
#Drawer ul.inline li a {
	border: 2px solid #dddddd;
	}
#Drawer ul.inline li a:hover {
	border: 2px solid #efefef;
	}
#Drawer ul.inline li a.active {
	border: 2px solid #ffffff;
	}
*/
#Drawer .dressing {
	width: /*13px*/ 18px;
	height: /*63px*/ 100%;
	background: url(/images/elements/dressing_full.gif) top left no-repeat;
	position: absolute;
	top: /*3px*/ 0;
	left: 0;
	}	

#Drawer #bottom_shadow {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 3px;
	background: url(/images/elements/drop_shadow_vertical_drawer.gif) repeat-x;
	height: 5px;
	}

/*---------------------------
Pagination for drawer
---------------------------*/

#Drawer ul.thumbsPage {
	position: absolute;
	left: 122px;
	top: 0;
	width: 100%;
	}
	
ul#DrawerPagination	{
	font-size: 11px;
	text-align: center;
	padding: 0;
	margin: 5px 0;
	position: absolute;
	bottom: 0;
	width: 122px;
	color: #777;
	list-style: none;
	left: 0;
	}

#Drawer ul#DrawerPagination li {
	width: auto;
	float: none;
	display: inline;
	line-height: 11px;
	margin: 0;
	}

ul#DrawerPagination li a#previousThumbsPage {
	padding: 2px 6px;
	background: url(/images/elements/arrow_left.gif) no-repeat center center transparent;
	line-height: 11px;
	text-decoration: none;
	margin-right: 5px;
	}

ul#DrawerPagination li a#nextThumbsPage {
	padding: 2px 6px;
	background: url(/images/elements/arrow_right.gif) no-repeat center center transparent;
	line-height: 11px;
	text-decoration: none;
	margin-left: 5px;
	}

ul#DrawerPagination li a#previousThumbsPage:hover,
ul#DrawerPagination li a#nextThumbsPage:hover {
	background-color: #e3e3e3;
	}
	
/*---------------------------------
 ABOUT SECTION STYLES
---------------------------------*/	

body.About #Content {
	height: 562px;
	overflow: auto;
	}