@import"css/reset.css";

/*********************/
/* GLOBAL */
/*********************/
body {
	font-family: Georgia, Times, serif;}

h3 {
	font-weight: bold;
	font-style: italic;
	font-size: 1.4em;
	line-height: 1.2em;
	text-transform: lowercase;
	margin-bottom: 8px;}
	
p, li {
	font-size: 1.4em;
	line-height: 1.6em;}
	
.clearfloat{
	clear: both;}

#rap {
	width: 954px;
	margin: 0 auto;
	overflow: hidden;}
	
#header, #footer {
	color: #ffffff;}
	
#header {
	margin-bottom: 80px;}
	
#header .container {
	height: 20px;
	padding: 10px 0px 0 14px;
	background-color: #000000; }

#header h1 a {
	font-size: 2.4em;
	font-weight: normal;
	text-transform: lowercase;
	color: #ffffff;
	text-decoration: none;}
	
#header h1 a:hover {
	color: #999999;}

#headerangle {
	width:0; 
	height: 0px; 
	border-left: 954px solid #000000; 
	border-right: 0px solid transparent;
	border-top: 0px solid #000000;
	border-bottom: 30px solid transparent;
}

#header {
	margin-bottom: 80px;}
	
#body {
	overflow: hidden;}
	
#body h2, #body .sectioncontent, #footer h2, #footer .sectioncontent {
	float: left;}
	
#body h2 {
	color: #ffffff;
	font-size: 1.2em;
	text-transform: uppercase;
	letter-spacing: .15em;
	padding: 5px 11px 5px 14px; 
	width: 176px;
	margin-right: 70px;
	background: #000000 url(img/wt-blk-arrow.gif) no-repeat top right;}
	
#footer h2 {
	color: #000000;
	font-size: 1.2em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .15em;
	padding: 5px 11px 5px 14px; 
	width: 176px;
	margin-right: 70px;
	background: #FFD400 url(img/ylw-blr-arrow.gif) no-repeat top right;}
	
.sectioncontent {
	width: 680px;
	border-bottom: 3px #FFD400 dotted;
	margin-bottom: 50px;
	padding: 2px 0px 10px 0;}
	
.projects .sectioncontent {
	padding-top: 0px;}
	
.sectioncontent .col1, .sectioncontent .col2 {
	float: left;
	width: 260px;
	margin-right: 20px;}

.projimgs {
	width: 580px;}

.projimgs li {
	border:1px dashed #DDDDDD;
	display: inline;
	float: left;
	line-height: 0em;
	margin: 0 3px 3px 0;}
	
.projimgs li:hover {
	border-style: solid;}
	
/* About Section*/
.about p, .contact p {
	font-size: 1.8em;
	line-height: 1.6em;
	font-style: italic;
	margin-top: -7px;}
	
.about p {
	font-weight: bold;
	width: 560px;}
	
.about p span {
	text-decoration: underline;
	font-weight: normal;}
	
.contact p {
	font-weight: bold;}
	
.contact a {
	color: #000000;
	text-decoration: none;}
	
.contact a:hover { 
	background-color: #FFD400;}
	
.intro {
	width: 550px;
	font-style: italic;
	margin-bottom: 20px;
	margin-top: -4px;}
	
/* Flickr Badge */

.flickr_badge_image {
	display: inline;
	margin:0 4px 0px 0px;}
.flickr_badge_image img {
	border: 0px solid #ccc;
	width: 64px;
	height: 64px;}
	
#flickr_badge_image8 {
	margin: 0px;}

#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}

/* more */
.more li {
	}
	
.more li a {
	font-size: 1.0em;
	color: #ffffff;
	text-transform: lowercase;
	text-decoration: none;
	border-bottom: 1px dotted #ffffff;}
	
.more li a:hover {
	background-color: #FFD400;
	color: #000000;}
	
/* Footer */
div#footerangle {
	clear: both;
	width:0; 
	height: 0px; 
	border-right: 954px solid #000000; 
	border-left: 0px solid transparent;
	border-bottom: 00px solid #000000;
	border-top: 30px solid transparent;}
	
div#footer {
	background-color: #000000;
	width: 954px;
	overflow: hidden;
	padding: 60px 0 40px;}
	
.footerinfo {
	clear: both;
	padding: 2px 0 10px 271px;
	background: #000000 url(img/arrow.gif) no-repeat top left;
	height: 20px;}
	
.footerinfo li {
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	display: inline;
	float: left;
	margin-right: 8px;}
	
.footerinfo a {
	color: #ffffff;
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: #ffffff dotted 1px;}
	
.footerinfo a:hover {
	color: #000;
	background-color: #FFD400;
	border-bottom: none;}
	
/* Tool tips */
.tooltip {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 50;
	background: transparent url(img/tooltip.png) no-repeat 10px bottom ;
	padding-bottom: 14px;}

.tooltip p {
	font-style: italic;
	background-color: #FFD400;
	padding: 4px 10px 4px 8px;}

/*********************/
/* LIGHTBOX */
/*********************/

#lightboxwall {
	height: 100%;
	width: 100%;
	background: transparent url(img/basic/lightbox.png) repeat top left;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 100;}

* html div#lightboxwall {
	position: absolute;
	height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#lightbox {
	position: relative;
	margin: 65px auto 0px;
	width: 600px;
	height: auto;
	overflow: visible;}
  
#lightbox .rap {
	width: 498px;
	margin: 0 31px;
	padding: 20px;
	position: relative;
	background-color: white;}

#lightbox .sectioncontent {
	border-bottom: none;}

#lightbox .post, #lightbox .rap .post{
	margin-bottom: 12px;
	overflow: visible;
	font-size: 100%;} 

#lightbox .post h5{
	padding-top: 340px;}  
  
#lightbox img {
	position: absolute;
	top: 30px;
	left: 0px;}
	
#lightbox .description, #lightbox .metadesc {
	float: left;}
	
#lightbox .description {
	width: 320px;
	min-height: 80px;
	margin-bottom: 20px;
	margin-right: 18px;}
	
#lightbox .description p {
	margin-bottom: 4px;
	font-style: normal;
	font-size: 1.2em;
	line-height: 1.5em;}

#lightbox .navigation{
	position: absolute;
	bottom: 0px;
	left: 0px;}
	
#lightbox .navigation .alignright a{
	float: right;
	display: block;}
	
#lightbox .navigation .alignleft a{
	float: left;
	display: block;}
  
#lightbox .navigation .alignright a:hover, #lightbox .navigation .alignleft a:hover{
	background-color: #64594e;}
  
#lightbox .addtoany_share_save_container {
	margin: 5px 0 !important;}
	
.home #lightbox .post p, .home #lightbox .post h5 {
	padding-left: 0px;}

#lightbox .removelightbox {	
	position: absolute;
	top: 3px;
	right: 0px;
	font-size: 1.5em;}
	
.addtoany_share_save {	
	left: 10px;}
	
	
#lightbox .imgnav li {
	display: inline;
	float: left;}
	
#lightbox .imgnav li a, .removelightbox {
	font-family: Times, Georgia, serif;
	padding: 2px 5px 1px;
	font-size: 1em;
	font-style: italic;
	background-color: #ffffff;
	margin-left: 8px;
	color: #000000;
	text-decoration: none;}
	
#lightbox .imgnav li a:hover, #lightbox .imgnav li a.selected, .removelightbox:hover {
	background-color: #FFD400;}

#lightbox .imgnav {
	position: absolute;
	top: 0px;
	right: 60px;}
	
.home #lightbox .post h5 {
	margin: 0px;
	padding-bottom: 0px;
	border-bottom: none;}