@charset "UTF-8";
/* CSS Document */

body {
margin: 0;
padding: 0;
font: 14px Helvetica, Arial, sans-serif;
}

#frontLayout {
background: #95a3ab /*url goes here*/ repeat-x fixed;
}
#portfolioLayout {
background: #95a3ab /*url goes here*/ repeat-x fixed;
}
#resumeLayout {
background: #95a3ab /*url goes here*/ repeat-x fixed;
}


/* default links */
a img {
	border: none;
}

a, a:active, a:link {
background-color: transparent;
text-decoration: underline;
color: #001822;
border:none;
}
a:hover {
text-decoration: underline;
color: #54666f;
border:none;
}

a:visited {
background-color: transparent;
text-decoration: underline;
color: #000;
border:none;
}

/* headers here */

h1 {
margin: 0px;
font-size: 150%;
padding: 0 0 140px 20px;
color: #fff;
position: absolute;
left: -9000px;
}

h2 {
margin: 16px 0px 4px 0px;
padding: 3px;
font-size: 14px;
color: #ffffff;
background: #253842;
}

/* these h3 statements, unique to whichever section has been attached above, can give the headers the appropriate background color (but have not been) */

h3 {
text-transform: uppercase;
margin: 0;
padding: 0;
}

.default h3 {
background: #95a3ab;
}
.about h3 {
background: #95a3ab;
}
.contact h3 {
background: #95a3ab;
}
.design h3 {
background: #95a3ab;
}
.illustration h3 {
background: #95a3ab;
}
.logos h3 {
background: #95a3ab;
}
.photoshop h3 {
background: #95a3ab;
}

h4 {
margin: 4px 0 4px 0;
padding: 3px;
font-size: 12px;
background: #b4bbbf;
}

h5 {
	font-style:italic;
	font-weight: bold;
	font-size: 12px;
	margin-bottom: 0px;
	margin-top:0px;
}


/* main wrapper that holds it all centrally */

#wrapper {
width:800px;
margin:auto;
align: center;
/*background-color: #95a3ab;*/
}


/* default masthead holding the banner and mainNav */

#header {
	width: 800px;
	height: 135px;
	background: #95a3ab url(../resources/header.jpg) no-repeat left;
}

/* content for text pages*/

/* note here that specifying resumeLayout in the body will activate the following div instead of the default primaryContent */
#resumeLayout #primaryContent {
/*float:left;*/
width:660px;
font-size:12px;
float: right;
/*margin-left: 120px;*/
}


/* top horizontal main menu navigation */

#mainNav {
/*margin: 65px 0 0 0;*/
padding: 104px 0 0 20px ;
width: 800px;
height: 36px;
font-weight: bold;
font-size: 14px;
}

#mainNav ul {
list-style: none;
margin: 0;
padding: 0;
}

#mainNav li {
display: block;
margin: 0;
padding: 0;
float: left;
/*width: auto;*/
}

#mainNav a {
color: #fff;
display: inline;
width: auto;
text-decoration: none;
background: #253842;
margin: 0;
padding: 10px 10px;
border-right: 1px solid #FFF;
}

#mainNav a:hover, #mainNav a:active { 
background: #839098;
color: #000; 
}

#mainNav a.active:link, #mainNav a.active:visited
{
position: relative;
z-index: 102;
background: #BBB;
color: #D7D493;
font-weight: bold;
}


/* Highlighting the current page */
 
body.home #mainNav a#home,
body.about #mainNav a#about,
body.contact #mainNav a#contact,
body.design #mainNav a#design, 
body.illustration #mainNav a#illustration,
body.logos #mainNav a#logos,
body.photoshop #mainNav a#photoshop 
{ 
	color: #fff;
	background: #6b7b84;
	text-decoration: underline;
}
body.home #mainNav a:hover#home, 
body.about #mainNav a:hover#about,
body.contact #mainNav a:hover#contact,
body.design #mainNav a:hover#design, 
body.illustration #mainNav a:hover#illustration,
body.logos #mainNav a:hover#logos,
body.photoshop #mainNav a:hover#photoshop
{ 
	color: #000;
}


/* my code for thumbnails */

#thumbs {
	float: left;
	width: 120px;
	height: 520px;
	padding: 16px 0 0 0;
	margin: 0;
	font-weight:bold;
	text-align: center;
	border:none;
	background-color: transparent;
	background: url(../resources/grill.gif) repeat;
}

/*
.thumbnail {
float: left;
width: 36px;
border: none;
margin: 0 2px 2px 0;
padding: 1px;
}
*/

.thumbhead {
float: left; 
width: 104px;/*104px;*/
height: 18px;
background:#253842;
color:#FFF;
padding: 4px 8px;
margin: 0 2px 2px 0;
border:none;
}

.fronthead {
float:left;
text-align:left;
width: 104px;
background:#253842;
color: #FFF;
padding: 4px 8px 8px 8px;
margin: 0 4px 4px 0;
border:none;	
}

/* Highlighting text in thumbnail bars of ABOUT pages */

#plaintag {
/*text-align: center;*/
float: left;
width: 104px;
height: 18px;
background: #253842;
color:#FFF;
text-decoration: underline;
font-weight: bold;
padding: 4px 8px ;
margin: 0 4px 4px 0;
border:none;
}

#plaintag a:link, #plaintag a:visited {
text-decoration: none;
color: #ffffff;
}
#plaintag a:hover {
/*background-color: transparent;*/
text-decoration: none;
color: #95a3ab;
}

/* the footer */

#footer {
	clear: both;
	width: 800px;
	height: 40px;
	background: #253842 url(../resources/bottom.gif) no-repeat bottom left;
	margin: 0 0 30px 0;
}

#footer p {
	margin: 0;
	text-align: center;
	padding-top: 12px;
	color: #253842;
	font-weight: bold;
}

#footer a {
color: #fff;
display: inline;
width: auto;
text-decoration: none;
padding: 8px;
background: #253842;
/*padding: 10px 20px 8px 20px;*/
}

#footer a:hover, #footer a:active { 
background: #839098;
color: #000; 
}

#footer a.active:link, #footer a.active:visited
{
position: relative;
z-index: 102;
background: #253842;
color: #D7D493;
font-weight: bold;
}


/* image control. */

/*Define stuff common to ALL images on the page. It is then up to other styles to override these. They will all float left. */

img {
float: left;
margin: 0;

}

/* For any images in the default boxes, I don't want the 2px border. So I set border to 0 
.default img {
border: 0;
}
*/


/* For these larger images, I don't want them to float, because that causes the h3 above to be pushed to the right. I also declare a top margin to space the header and image apart, and also increase the border width slightly.  We also set it to display:block so that if body id is twoColLayout, the image will force the header and other bits to wrap around it */

.mainImage {
display: block;
float: none;
align: center;
margin-top: 16px;
}

/* drop shadow effect for the gallery thumbnails. This requires a div to be wrapped around the image markup. */

.img-wrapper {
margin: 4px 0px 4px 8px;
/*background: url(../resources/shadow.gif) no-repeat bottom right;
background-color: transparent;*/
clear: right;
float:left;
line-height:0;
position: relative;
/*color: #FFF;*/
}
 
.img-wrapper img {
float: none;
margin: -4px 4px 4px -4px;
background-color: transparent;
/*background:#95a3ab;*/
position:relative;
display: block;
position: relative;
}


/* spacer used immediately after the floated gallery thumbnails to ensure the box expands to hold them all */

.spacer {
	height: 0;
clear: both;
}


.clearboth { 
clear: both; 
}


#main {
	width: 660px;
	height: 500px;
	float: right;
	margin-top: 16px;
/*	margin-left: 16px;*/
	background:#95a3ab;
}

#main img {
	width: 500px;
	align: center;
	padding: 0 0 16px 0;
/*	border-bottom: 2px solid #253842;*/
}

#maintext {
width: 144px;
float: right;
margin:0;
padding:0;
/*padding: 18px 8px 226px 8px;
background: #253842;
color:#FFF;*/
}

#front {
	width: 800px;
	height: 636px;
	background: url(../resources/front.jpg);
/*	align: center; */
	float: none;
}

#front p {
	color: #000;
	font-size: 80%;
	line-height: 150%;
}


/* paragraph styles for the main box */

#main p {
	padding: 0;
	top: 10px;
	color: #000;
	font-size: 80%;
	line-height: 150%;
}

/* java-script-enabled text */

#imagenav {
	font-family: helvetica, arial, sans-serif;
	font-size: 13px;
	font-weight: bold;
	/*width: 500px;*/
	/*text-decoration: none;*/
	color: #253842;
	/*padding:10px 24px 10px 24px;*/
}