html, body {
	height: 100%;
}

body {
	background: #3d3d62 url(/images/bg-site.jpg) no-repeat fixed;
	font: 13px Georgia, "Times New Roman", Times, serif;
	line-height: 21px;
	color: #645648;
}

img {
	vertical-align: middle;
}

a {
	outline: none;
}

@font-face {  
	font-family: "Rockwell";  
	src: url("Rockwell.ttf");
}

p {
	margin: 5px 0 10px 0;
}

h1 {
	font-family: "Rockwell", "Georgia", serif;
	font-size: 30px;
	line-height: 35px;
	font-weight: normal;
	color: #516c7a;
}

h2 {
	font-family: "Rockwell", "Georgia", serif;
	font-size: 20px;
	line-height: 25px;
	font-weight: normal;
	color: #516c7a;
}

h3 {
	font-family: "Rockwell", "Georgia", serif;
	font-size: 20px;
	line-height: 20px;
	font-weight: normal;
	padding-bottom: 5px;
	border-bottom: 1px dashed #999;
	color: #516c7a;
}

.clearfloats {
	clear: both;
}
	
#sitewrapper {
	width: 1020px;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
}

#vineswrapper {
	background:url(/images/bg-vines.png) repeat-x;
	top:0;
	height:127px;
	left:0;
	position:fixed;
	width:100%;
	z-index: 9999;
}

#mastheadwrapper {
	background: url(/images/bg-masthead.jpg) no-repeat;
	width: 1020px;
	height: 239px;
	border-left: 1px solid black;
	border-right: 1px solid black; 
}

#logo {
	width: 360px;
	height: 193px;
	padding-top: 46px;
	margin-left: 39px;
}

/***********************************************************
 MAIN NAVIGATION LAYOUT
************************************************************/

#navwrapper {
	background: url(/images/bg-navbar.jpg) no-repeat;
	width: 1020px;
	height: 68px;
	border-left: 1px solid black;
	border-right: 1px solid black; 
}

ul#menu {
	width: 572px;
	height: 62px;
	list-style: none;
	margin-top: 0;
	padding-top: 3px;
	text-indent: -9999px;
}

ul#menu li {
	float: left;
	width: auto;
}

ul#menu li a {
	background: url(/images/main-nav-sprite.png) no-repeat scroll top left;
	display: block;
	height: 62px;
	position: relative;
}

ul#menu li a.home {
	width: 131px;
	background-position: 0 0;
}

ul#menu li a.homeUP {
	width: 131px;
	background-position: 0px -62px;

}

ul#menu li a.about {
	width: 98px;
	background-position: -131px 0px;
}

ul#menu li a.aboutUP {
	width: 98px;
	background-position: -131px -62px;
}

ul#menu li a.portfolio {
	width: 138px;
	background-position: -229px 0px;
}

ul#menu li a.portfolioUP {
	width: 138px;
	background-position: -229px -62px;
}

ul#menu li a.blog {
	width: 78px;
	background-position: -367px 0px;
}

ul#menu li a.blogUP {
	width: 78px;
	background-position: -367px -62px;
}

ul#menu li a.hireme {
	width: 127px;
	background-position: -445px 0px;
}

ul#menu li a.hiremeUP {
	width: 127px;
	background-position: -445px -62px;
}

ul#menu li a span {
	background:url(/images/main-nav-sprite.png) no-repeat scroll bottom left;
	display:block;
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:100;
}

ul#menu li a span:hover {
	cursor:pointer;
}

ul#menu li a.home span {
	width: 131px;
	background-position: 0px -62px;
}

ul#menu li a.about span {
	width: 98px;
	background-position: -131px -62px;
}

ul#menu li a.portfolio span {
	width: 138px;
	background-position: -229px -62px;
}

ul#menu li a.blog span {
	width: 78px;
	background-position: -367px -62px;
}

ul#menu li a.hireme span {
	width: 127px;
	background-position: -445px -62px;
}

/***********************************************************
 CONTENT LAYOUT
************************************************************/

#contentwrapper {
	background: url(/images/bg-homecontent.jpg) no-repeat;
	background-color: #333;
	width: 1020px;
	min-height: 700px;
	padding-top: 22px;
	border-left: 1px solid black;
	border-right: 1px solid black;
}

#featured {
	width: 875px;
	height: 281px;
	margin-left: 68px;
	position: relative;
}

#featured span {
	text-align: center;
	font-family: "Rockwell", "Georgia", serif;
	font-size: 11px;
	line-height: 10px;
	font-weight: normal;
	color: #fff;
	padding-top: 5px;
}

#featured span.visit {
	position: absolute;
	z-index: 9999;
	top: 160px;
	right: 0;
	width: 92px;
	height: 37px;
	background: url(/images/bg-span-visit.png) no-repeat;
}

#featured span.blog {
	position: absolute;
	z-index: 9999;
	top: 160px;
	left: 0;
	width: 92px;
	height: 37px;
	background: url(/images/bg-span-blog.png) no-repeat;
}

ul#infopanels {
	list-style: none;
	padding: 25px 0 0 11px;
	font: 11px/18px "Lucida Grande", "Helvetica", sans-serif;
	color: #555;
}

ul#infopanels li {
	width: 262px;
	height: 263px;
	padding: 15px 0 0 0;
	float: left;
}

ul#infopanels li.spacer {
	margin-left: 34px;
}

ul#infopanels li p {
	padding: 5px 5px 0 10px;
	clear: both;
}

strong.name {
	font-family: "Rockwell", "Georgia", serif;
	float: right;
	font-weight: normal;
}

ul#infopanels li img {
	padding: 5px 0 0 6px;
}

ul#infopanels li h2 {
	font-family: "Rockwell", "Georgia", serif;
	font-size: 13px;
	font-weight: normal;
	text-transform: uppercase;
	color: #444;
	padding: 0 0 0 10px;
	border-bottom: dashed 1px #999;
}


/***********************************************************
 PORTFOLIO LAYOUT
************************************************************/

.gallery {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gallery li {
	margin: 10px;
	padding: 0;
	float: left;
	position: relative;
	width: 160px;
	height: 120px;
	
}

.gallery img {
	background: url(/images/gallery-frame.png) no-repeat;
	padding: 7px;
	
}

.gallery span {
	width: 160px;
	height: 120px;
	display: none;
	position: absolute;
	top: 1px;
	left: 1px;
}

.gallery .enlarge {
	background: url(/images/gallery-frame-overlay.png) no-repeat;
}

.gallery a {
	text-decoration: none;
}

.gallery a:hover span {
	display: block;
}

/***********************************************************
 SUB CONTENT LAYOUT
************************************************************/

#subcontentwrapper {
	background: #dbd1c6 url(/images/bg-subcontent.jpg) no-repeat;
	width: 1020px;
	padding-top: 25px;
	border-left: 1px solid #333;
	border-right: 1px solid #333;
}

#subcontentbottom {
	background: url(/images/bg-subcontentbottom.jpg) no-repeat;
	width: 1020px;
	height: 319px;
}

.subcontent {
	width: 600px;
	float: left;
	padding-left: 60px;
}

.subcontent p {
	padding: 10px 0 5px 20px;
}

.subcontent span {
	padding-left: 15px;
}

.subcontent h1 {
	padding: 5px 0 10px 0;
}

.subcontent h2 {
	padding: 5px 0 5px 0;
}

h2.gallerypadding {
	padding-top: 25px;
	clear: both;
}

.subsidebar {
	width: 250px;
	float: right;
	padding-left: 10px;
	padding-right: 80px;
	padding-top: 18px;
	font: 11px/18px "Lucida Grande", "Helvetica", sans-serif;
	color: #333;
	background-color: transparent;
	border-left: 1px dashed #999;
}

.subsidebar span.name {
	font-family: "Rockwell", "Georgia", serif;
	font-weight: normal;
	font-size: 14px;
	float: right;
	color: #516c7a;
	padding-bottom: 10px;
	width: auto;

}

.subsidebar p {
	padding: 0px 5px 0 5px;
	clear: both;
}

.subsidebar p strong {
	font-family: "Rockwell", "Georgia", serif;
	font-size: 14px;
	font-weight: normal;
	color: #333;
}

.subsidebar img {
	padding-top: 5px;
}

/***********************************************************
 FOOTER LAYOUT
************************************************************/

#footerwrapper {
	background:url(/images/bg-footer.png) repeat-x;
	bottom:0;
	height:75px;
	left:0;
	position:fixed;
	width:100%;
	z-index: 9998;
}

#tooltip { 
    display:none; 
    background:transparent url(/images/black_arrow.png); 
    font-size:12px; 
    height:70px; 
    width:160px; 
    padding:25px; 
    color:#fff;     
}

div.footercontent {
	width: 475px;
	height: 35px;
	padding-top: 25px;
	margin-left: auto;
	margin-right: auto;
	font-family: Rockwell, "Rockwell Std", Georgia, serif;
	color: #fff;	
	font-size: 12px;
	line-height: 18px;
}

div.footernav {
	width: 250px;
	float: left;
	display: inline;
	border-right: 1px dashed #fff;
	text-align: center;
}

div.footerconnect {
	width: 200px;
	float: left;
	display: inline;
	margin-left: 5px;
}

div.footerconnect img {
	padding: 0 5px 0 5px;
}

div.lcloud {
	background: fixed url(/images/bg-leftcloud.png) left bottom no-repeat;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 150px;
	width: 225px;
	z-index: 9999;
}

div.rcloud {
	background: fixed url(/images/bg-rtcloud.png) right bottom no-repeat;
	position: fixed;
	bottom: 0;
	right: 0;
	height: 112px;
	width: 286px;
	z-index: 9999;
}
	
/************************************************************************
MAIN LINK STYLES
************************************************************************/

a:link {
	color: #43392f;
}

a:visited {
	color: #43392f;
}
	  
a:hover {
	color: #43392f;
}
	  
a:active {
	color: #43392f;
}

/************************************************************************
SIDEBAR, SUBNAV, FOOTER, ALT LINK STYLES - Use class or div name before a:
************************************************************************/

div.footernav a:link {
	color: #fff;
	text-decoration: none;
}
	  
div.footernav a:visited {
	color: #fff;
	text-decoration: none;
}
	  
div.footernav a:hover {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px dashed #fff;
}
	  
div.footernav a:active {
	color: #fff;
	text-decoration: none;
}

/***********************************************************
 FEATURED PANELS SPAN LINKS
************************************************************/

#featured span a:link {
	color: #fff;
	text-decoration: none;
}
	  
#featured span a:visited {
	color: #fff;
	text-decoration: none;
}
	  
#featured span a:hover {
	color: #fff;
	text-decoration: underline;
}
	  
#featured span a:active {
	color: #fff;
	text-decoration: none;
}

/***********************************************************
 HIRE ME LINK STYLE
************************************************************/

.subcontent h2 a:link {
	color: #43392f;
	text-decoration: none;
	border-bottom: 1px dashed #666;
}
	  
.subcontent h2 a:visited {
	color: #43392f;
	text-decoration: none;
	border-bottom: 1px dashed #666;
}
	  
.subcontent h2 a:hover {
	color: #43392f;
	text-decoration: none;
	border: 0;
}
	  
.subcontent h2 a:active {
	color: #43392f;
	text-decoration: none;
	border-bottom: 1px dashed #666;
}