﻿@import url('base-typo.css');
@import url('Syntax.css');

/* LAYOUT ELEMENTS   
----------------------------------------------------------*/
#header {
	background: #000 url('../img/bgHeader.png') repeat-x top left;
	height: 160px;
}
#main {
	clear:both;
	border-bottom: solid 2px #7AB800;
	background-color:#eee;
}

#headerBody, #mainBody
{
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

#mainBody {
	width: 900px;
	padding: 0 15px 30px;
	background-color:#fff;
	min-height:350px;
	height:auto;
	overflow-x:hidden;
	overflow-y:auto;
}

#main:after, #mainBody:after, .summary dl:after, .col123:after, .col12:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

#header #logo a {
	margin: 26px 0 0 0;
	display:block;
	width: 198px;
	height: 92px;
	background: transparent url('../img/logoHeader.png') no-repeat;
}
#header #logo span {
	position:absolute;
	left: -999px;
	top:-999px;
}
#header #logo {
	float:left;
	margin:0;
	background-color:Transparent;
}
#header h2 {
	float: right;
	font-size: 107.69%; /* 14px */
	letter-spacing: 0.05em;
	text-transform:uppercase;
	color: #fff;
	font-weight:normal;
	margin:75px 0 0 0;
	padding:0;
	border-bottom: none;
	clear:none;
	background-color:Transparent;
}
#header ul {
	clear: both;
	margin: 0;
	padding: 12px 0 0 0;
}
#header li, #footer li {
	margin-left:0;
	display:inline;
}
#header .rss {
	position:relative; 
	top: -18px;
	left: 886px;
	width: 18px;
}
.col1, .col2, .col3, 
.col12, .col123 {
	position:relative;
}
.col1, .col2, .col3 {
	width: 285px;
	margin-right: 15px;
	float:left;
}
.col12, .col123 {
	float:left;
	
}
.col12 {
	width: 585px;
}
.col3 {
	margin:0;
	width: 300px;
	float:right;
}
.col123 {
	clear:both;
	width: 900px;
}
#footer {
	clear:both;
	padding-top: 20px;
	text-align:center;
}
#footer ul {
	margin:1em auto;
}
#footer p {
	clear:both;
	color: #fff;
}
/* LINKS   
----------------------------------------------------------*/
.linkList {
	margin: 0;
}	
.linkList li {
	list-style-type:none;
	margin-left:0;
	background: transparent url(../img/icons/liBG.gif) no-repeat 0 8px;
	padding-left: 0.8em;
}
p.linkList {
	background: transparent url(../img/icons/liBG.gif) no-repeat 0 8px;
	padding-left: 0.8em;
}

a:link, a:visited {
	color: #115BF8;
	text-decoration: none;
}
a {
	outline: none;
}
a:hover, a:active, a:focus, .folioItem:hover a,
.linkList a:hover, .linkList a:active , .linkList a:focus, 
a.on:link, a.on:visited,a.on:hover, a.on:active, a.on:focus {
	color: #7AB800;
	text-decoration: none;
}
a.vCard {
	display:block;
	background: transparent url('../img/icons/vCard.png') no-repeat left center;
	padding: 5px 0 5px 40px;
}

#header li.skip {
	display:none;
}
a.external, a.external-blog {
	background: transparent url(../img/icons/external.gif) 100% 3px no-repeat;
	padding-right: 13px;
}
a.external:hover, a.external-blog:hover {
	background-position: 100% -17px;
}

/*
#mainBody .col3 h2 {
	background: transparent url('../img/bgSideBarH2.png') no-repeat top left;
	border-bottom:none;
	height:32px;
	padding: 10px 0 0 15px;
	margin:8px 0;
}
*/
.col3 h2 a:link, .col3 h2 a:visited {
	display:block;
	width: 270px;
	color: #333;
	text-decoration:none;
}
.col3 h2 a:hover, .col3 h2 a:active,.col3 h2 a:focus {
	background: url('../img/icons/chevRed.png') no-repeat 100% 50%;
	color: #900;
}
#header li a {
	font-size: 115.38%; /* 15px */
	padding: 3px 12px 3px 18px;
	background: url('../img/bgNav.png') no-repeat left center;
}

#header li.first a {
	padding-left: 0;
	background-image:none;
}
#footer li a {
	padding: 3px 6px 3px 9px;
	background: url('../img/bgFooterNav.gif') no-repeat left center;
}
#footer li.first a {
	padding-left: 0;
	background-image:none;
}
#footer li a:link, #footer li a:visited {
	color: #ccc;
	text-decoration:none;
}
#header li a:link, #header li a:visited {
	color: #fff;
	text-decoration:none;
}
#header li a:hover, #header li a:active, #header li a:focus,
#header li a.on:link, #header li a.on:visited,
#header li a.on:hover, #header li a.on:active, #header li a.on:focus,
#footer li a:hover, #footer li a:active, #footer li a:focus,
#footer li a.on:hover, #footer li a.on:active, #footer li a.on:focus,
#footer li a.on:link, #footer li a.on:visited
{
	color: #7AB800;
}

/* FORMS   
----------------------------------------------------------*/
label {
	display: block;
	margin:1em 0 0.2em;
}
button {
	display: block;
	margin: 0.5em 0;
	background: #fff;
	border: solid 1px #666;
	width: 70px;
	margin-left: 336px;
	padding: 1px 0;
	color: #666;
	letter-spacing: 1px;
}
button:hover {
	color:#7AB800;
	border: solid 1px #7AB800;
}
input.text, textarea {
	background: #fff !important;
	border: solid 1px #666;
	letter-spacing: 1px;
	padding: 3px 2px;
	width: 400px;
}
input.search {
	width: 217px;
}
button.search {
	margin: 0 0 0 2px;
	display:inline;
}
/* COMMON CONTENT STYLES  
----------------------------------------------------------*/

p.moreLink {
	text-align:right;
	margin-right:0;
}

p {
	margin-right: 1em; 
}
label.error {
	display: block;
	padding: 2px;
	color: #F58220;
	margin: 5px 0;
}
.contentItem {

}
.contentItem h3 {
	margin-top: 0;
}
/* PORTFOLIO BROWSER  
----------------------------------------------------------*/

.folioScroller {
	margin-bottom: 30px;
	overflow:auto;
	height: auto;
}
.folioPanel {
	position:relative;
}
.folioPanel h2, .folioPanel dt {
	background:#fff;
}
.folioItem, .folioItemMiddle {
	float:left;
	margin: 0;
	width: 252px;
}
.folioItems {
	overflow:visible;
	height: auto;
}
#portfolio {
	position:relative;
	
}
#portfolio h3 {
	width: 100%;
	z-index:10;
}
#folioNav {
	z-index:100;
	top: 55px;
	right: 0;
	position:absolute;
	background: #fff url('../img/icons/pfPagerBG.gif') repeat-x -10px 0px;
}
#folioNav a, #folioNav div {
	display:block;
	float:left;
}
#folioNav div { 
	background: transparent url('../img/icons/pfPager.gif') no-repeat 0px 0px;
	height: 18px;	
}
#folioNav div a {
	width: 30px;
	height:18px;
} 
#folioNav a.prev, #folioNav a.next {
	background: #fff url('../img/icons/arrowsSprite.gif') no-repeat;
	width: 10px;
	height: 18px;
}
#folioNav a.prev:link, #folioNav a.prev:visited {
	margin-right: 10px;
	background-position: 0px 0px;
}
#folioNav a.prev:hover, #folioNav a.prev:active {
	background-position: 0px -18px;
}
#folioNav a.next:link, #folioNav a.next:visited {
	background-position: -10px 0px;
}
#folioNav a.next:hover, #folioNav a.next:active {
	background-position: -10px -18px;
}
.folioItemMiddle {
	margin: 0 72px;
}
.folioImage {
	position:relative;
	display: block;
	width: 252px;
	height:197px;
	margin-top:10px;
}
.folioImage img {
	position:absolute;
	top: 18px;
	left:17px;		
}
.folioFrame {
	display:block;
	width: 252px;
	height:197px;
	background: transparent url('../img/pfFrame.png') no-repeat top left;
	top: 0;
	left:0;	
}

.summary {
	float:left;
	width: 900px;
	overflow:hidden;
	margin-bottom: 30px;
}
.summary dl, 
.cv dl {
	float: left;
	margin-left: 20px;
}
.summary dt, .summary dd, 
.cv dt, .cv dd {
	display:block;
	float:left;	
	padding: 3px 0;
}
.summary dd {
	width: 485px;
}
.summary dt,
.cv dt {
	clear:left;
	color: #7AB800;
	width: 130px;
}

img.blogPic {
	padding: 5px;
	border: solid 1px #7AB800;
	background-color: #F2FFD9;	
}
/* TAG CLOUD
----------------------------------------------------------*/
.tag1  {font-size:84.61%}  /* 11px */
.tag2  {font-size:92.28%}  /* 12px */
.tag3  {font-size:100%}    /* 13px */
.tag4  {font-size:108%}    /* 14px */
.tag5  {font-size:115.38%} /* 15px */
.tag6  {font-size:123.04%} /* 16px */
.tag7  {font-size:130.73%} /* 17px */
.tag8  {font-size:138.56%} /* 18px */
.tag9  {font-size:146.11%} /* 19px */
.tag10 {font-size:153.80%} /* 20px */
/* RESUME  
----------------------------------------------------------*/
.cv dd h5 {
	margin-top:0;
}
.cv dt {
	font-weight:bold;
	color: #333;
	width: 160px;
}
.cv dd {
	width: 410px;
}
/* MISC  
----------------------------------------------------------*/
.center {
	text-align:center;
}
.clearB
{
    clear: both;
}
.floatL {
	float:left;
}
.floatR {
	float:right;
}
.skyscraper {
	text-align:center;
	padding-top: 30px;
}