/* global and layout elements */

* { padding: 0; margin: 0; }

html {
	height: 100%; /* for footer functionality */
}

body {
	height: 100%; /* for footer functionality */
	background: url('images/bg.jpg') repeat-y center;  
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

a { 
	outline: none; text-decoration: none; 
} 

#wrapper {
	width: 950px;
	margin: auto; 
	min-height: 100%; /* for footer functionality */
	height: auto !important;
	height: 100%;
}

#nonfooter {
	position: relative; 
	min-height: 100%; /* for footer functionality */
	height: auto !important;
	height: 100%;
	padding-bottom: 45px;
}

* html #nonfooter {
	height: 100%; /* for footer functionality */
}

* html #wrapper {
	height: 100%; /* for footer functionality */
}


.clearer {
	clear: both;
}


/* navigation */

ul#nav {
 	width: 926px; 
	list-style: none;
	text-align: center; font-size: 0.9em;
	padding-bottom: 12px;
	border-bottom: 5px solid #D8DCEF;
	margin-left: 12px; margin-right: 12px; 
	float: left; 
}

ul#nav li { 
	float: left;
	border-left: 12px solid #fff;
}

ul#nav li ul { 
	list-style: none;
	font-size: 0.8em; 
	background-color:#FFFFFF;
}

ul#nav li#home {
	width: 75px; background-color:#D8DCEF;
}

ul#nav li#about {
	width: 65px; background-color:#E6E6F3; 
}

ul#nav li#projects { 
	width: 115px; background-color:#F4EDF4;
}

ul#nav li#contact { 
	width: 90px; background-color:#CBCBD8;
}

ul#nav li#logo { 
	width: 450px; height: 179px; 
	margin-top: 12px; margin-right: 12px;
	float: right;	
}

ul#nav li a { 
	width: 100%;
	display: block;
	color: #999999;
	padding-top: 165px; padding-bottom: 10px;	
}
	
ul#nav li a:hover {
 	width: 100%;
	display: block;
	padding-top: 145px; padding-bottom: 10px;
	border-bottom: 20px solid #fff;	
}

ul#nav li a:active {
	width: 100%;
	display: block;
	color: #D8DCEF;
	padding-top: 145px; padding-bottom: 10px;
	border-bottom: 20px solid #fff;	
}

ul#nav li a.current, ul#nav li a.current:hover { 
	display: block;
	color: #999999;
	padding-top: 100px; padding-bottom: 10px;
	border-bottom: 0px;	
	cursor: default;	
}

/* sub navigation */

ul#nav li ul { 
	display: none;
}

ul#nav li ul li:first-child { 
	padding-top: 10px;
}

ul#nav li ul li { 
	list-style: none;
	text-align: center; 
	background-color:#FFFFFF;
	border-left: 0px;
	line-height: 1.5em;
	width: 100%;
}

ul#nav li ul.current { 
	display: block;
}

ul#nav li ul a, ul#nav li ul a:hover { 
	color: #999999;
	padding-top: 0px; padding-bottom: 0px;	
	border-bottom: 0px;	
}

ul#nav li ul.current a:hover {
	color: #D8DCEF;
}

/* images */

#images {
	position: relative;
	text-align: left;
	float: right;
	margin: 40px 24px 40px 0px;
	width: 520px; 
}

#images thumbs {
	position: relative;
	float: right;
	width: 520px; 
}

#images p {	
	font-size: 0.9em;
	line-height: 1.4em;
	color: #666666;
}
#images img#loading { 
	border: 2px solid #efefef;
	position:absolute; 
	padding:0; margin:0;
	top: 140px; left: 240px;
	background: #fff;
}

#images img {
	float: right;
	padding: 9px;
	border: 1px solid #D8DCEF;
}

#images img.thumb {
	margin-left: 12px; margin-top: 12px;
}

#images img.thumb:hover {
	padding: 0px;
	border: 10px solid #D8DCEF;
	margin-left: 12px; margin-top: 12px;
}

#images img.thumb-left {
	padding: 9px;
	margin-top: 12px;
}

#images img.thumb-left:hover {
	padding: 0px;
	border: 10px solid #D8DCEF;
	margin-left: 0px; margin-top: 12px;
}


/* text */

#text {
	float: right;
	position: relative;
	margin: 40px 102px 40px 0px;
	text-align: right;
	width: 250px;	
}

#text p {
	font-size: 0.9em;
	line-height: 1.4em;
	color: #666666;
}

#text p a{
	color: #D8DCEF;
	font-weight: bold;
}

#text p a:hover{
	text-decoration: underline;
}
	
h2 {
	margin-bottom: 0.5em;
	margin-top: -4px;
	font-size: 1.1em;
	font-weight: lighter;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #D8DCEF;
}

span.intro {

	font-weight: bold;
	font-variant: small-caps;

}

#text img {
	float: right;
	padding: 9px;
	border: 1px solid #D8DCEF;
}

/* footer */


#footer { 
	position: relative; 
	height: 45px;
	width: 926px; 
	margin: -45px auto 0px auto;
}

#footer ul {
 	width: 100%;
	padding-top: 12px; padding-bottom: 12px;
	border-top: 5px solid #D8DCEF;
	list-style: none;
	text-align: center; font-size: 0.9em;
	float: left; 
}

#footer ul li { 
	float: left;
	padding: 0 12px 0 12px;
	border-left: 2px solid #D8DCEF;	
}

#footer ul li a {
	color: #999;
}

#footer ul li a:hover {
	color: #D8DCEF;
}

#footer ul li:first-child { 
	float: left;
	padding: 0 12px 0 12px;
	border-left: 0px;	
}

#footer ul li.copyright { 
	float: right;
	padding: 3px 12px 0 12px;
	border-left: 0px;
	font-size: 0.7em;	
}