@charset "UTF-8";

body {
	background-position: center;
	background-image:url(../design/pattern.gif);
	margin: 0 auto;
	font-family: Goudy Old Style, Bodoni, Baskerville, serif;
	font-style: normal;
	color: #F4E3C6;
	
}

#container {
	margin: 0 auto;
	width: 900px;
	background-color: #5E3D02;
	background-position: left;
	background-repeat: content;	
}

#sideBarL {
	background: url(../design/side_bar.gif) top right repeat-y;
}

#sideBarR {
	background: url(../design/side_bar.gif) top left repeat-y;
}

#bottom {
	background: url(../design/botBar.gif)  center bottom repeat-x;
}

#header {
	position: relative;
	margin: 0px 50px 15px 50px;
	display:block;
	height: 150px;
}

	#logo a {
		background: url(../design/web_logo.gif) 0 50px no-repeat;
		display: block;
		width: 200px;
		height: 182px;
		text-indent: -9999px;
		padding-top: 50px;
		cursor: pointer;
	}
		
	#designDev {
		position: absolute;
		top: 125px;
		right: 0px;
	}

#mainMenu {
	position: absolute;
	margin: -45px 0 20px 137px;
	z-index: 1;
	border: none;
	padding: 0;
	list-style: none;
	list-style-position: inside;
}
	
	#mainMenu li {
		padding-right: 29px;
		float: left;
		display: block;
	}
			
		#mainMenu li a {
			display: block;
			border: none;
			text-indent: -9999px;
			
		}
		
		#mainMenu li a:visited {
			border: 0;
		}
			
		#mainMenu li#webDesign a {background: url(../design/web-design.gif)  0 0 no-repeat; display: block; width: 108px; height: 59px; }
			#mainMenu li#webDesign a:hover {background-position: 0 -59px; }
			#mainMenu li#webDesign a.active {background-position: 0 -59px; }
		
		#mainMenu li#websites a { background: url(../design/websites.gif) 0 0 no-repeat; display: block; width: 90px; height: 59px; }
			#mainMenu li#websites a:hover {background-position: 0 -59px; }
			#mainMenu li#websites a.active {background-position: 0 -59px; }
			
		#mainMenu li#printDesign a {background: url(../design/print-design.gif)  0 0 no-repeat; display: block; width: 110px; height: 59px; }
			#mainMenu li#printDesign a:hover {background-position: 0 -59px; }
			#mainMenu li#printDesign a.active {background-position: 0 -59px; }
		
		#mainMenu li#resume a { background: url(../design/resume.gif) 0 0 no-repeat; display: block; width: 80px; height: 59px; }
			#mainMenu li#resume a:hover {background-position: 0 -59px; }
			#mainMenu li#resume a.active {background-position: 0 -59px; }
	
		#mainMenu li#contact a { background: url(../design/contact.gif) 0 0 no-repeat; display: block; width: 80px; height: 59px; }
			#mainMenu li#contact a:hover {background-position: 0 -59px; }
			#mainMenu li#contact a.active {background-position: 0 -59px; }

#mainContent {
	position: relative;
	top: 100px;
	margin: 0 50px 0px 50px;
	clear: left;
	min-width: 700px;
	padding-bottom: 150px;
}

#footer {
	margin: 20px;
	padding-bottom: 10px;
	position: relative;
	top: 70px;
	margin-bottom: 20px;
	text-align: center;
	color: #D7BF94;
}

	#footer p {font-size: 11px;}

/* ___________________
	typography 
________________________*/

h1 {
	font-size: 30px;
	text-align: center;
	letter-spacing: 1px;
	margin-top: 0;
}

h2 {
	font-size: 26px;
	margin: 0 0 15px 0;
	letter-spacing: 1px;
}

	h2 a {text-decoration: underline !important; }

h3 {
	font-size: 18px;
	margin: 10px 0;
	letter-spacing: 1px;
}

	h3 a {text-decoration: underline !important; }

p {
	font-size: 15px;
	line-height: 18px;
	letter-spacing: 1px;
	margin-top: 0; 
}

a:link {
	color: #D7BF94;
	text-decoration: none;
}

a:visited {
	color: #D7BF94;
	text-decoration: none;
}

a img {border: none; }

/*
.heading {
	color: #D7BF94;
} */

.floatRight {
	float: right
}
			
.floatLeft {
	float: left;
}


.clear {
	clear: both;
}

/* Easy Clearing Styles
----------------------------------------------------------- */
.group:after 	{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* CF, IE.css, IE6.css */


a.underline {text-decoration: underline; }

/*_________________________	
	index
___________________________*/

#imgRotation {float: right;  overflow: hidden;  margin: 0  0 15px 20px; width: 320px; height: 244px;}

/*_________________________	
	overlay
___________________________*/

#overlay {position: absolute; top: 0; left: 0; width: 100%; background-color: #000000; z-index: 40;}

	#loader {background: url(../design/spinner.gif) no-repeat center center; position: fixed;}

	.close {background: url(../design/close.png) 0 0 no-repeat; width: 44px; height: 45px; right: -23px; top: -23px; z-index: 60; position: absolute; cursor: pointer;}
	

.none {visibility: hidden; }

.show {visibility: visible;}

#portInfo { background-color: #5E3D02; width: 1100px; padding: 25px; position: absolute; z-index: 50; border: 2px solid #886c3b; margin-bottom: 50px; }

/*_______________________
	design pages
_________________________*/
#designImages {float: left; width: 822px; height: 617px; overflow: hidden; position: relative; }

	#designImages img {position: absolute; }
	
		#designImages .right {left: 350px !important; overflow: hidden;}
	
#printDesignImages {overflow: hidden; position: relative; height: 515px; margin-bottom: 20px; }

	#printDesignImages .margin {margin-left: 225px; }

#designInfo {float: left; width: 250px; margin-left: 20px;}

.printImg {margin-bottom: 20px;}

/*________________________
	non js design pages
__________________________*/
.designImages {float: left; width: 500px; clear: right; }
	
	.designImages img {margin-bottom: 20px; }

.designInfo {float: left; width: 275px; margin-left: 25px; clear: right;}

.retro {margin-right: 20px; }

/*_________________________	
	shared styles
___________________________*/
	
.info {
	margin: 25px 20px;
	padding: 15px;
}
	
	.info img {
		float: right;
		margin: 0 15px 15px 20px;
	}
	
	.info a:link {
		color: #D7BF94;
		text-decoration: underline;
	}

	.info a:visited {
		color: #D7BF94;
		text-decoration: underline;
	}

/*_______________
	images
___________________*/

.slideshow {
	margin: 0 0 15px 15px;
}

.websites {
	float: right;
	margin: 0 0 20px 15px;
}

.fltRt {
	float: right;
	margin: 15px;
}

#mainContent img, #designImages img, #printDesignImages img, .printImg {
	-moz-box-shadow: 3px 3px 7px #222;
	-webkit-box-shadow: 3px 3px 7px #222;
	box-shadow: 3px 3px 7px #000;}


/* IE7 */

	* html> #right {
				margin: -145px 0 0 0 ;
			} 
	
	*:first-child+html #right {
				margin: -145px 0 0 0 ;
			} 
			
/*__________________
	form
____________________*/

form { 
	position: relative;
	left: 75px;
	margin: 30px;
	padding-bottom: 30px;
}

.input {
	position: absolute;
	left: 125px;
}

.button {
	position: relative;
	top: 50px;
	left: 200px;
}

/*_______________________
	web design
______________________*/
#designs { list-style: none; margin-left: 0; padding-left: 0;}
	
	#designs li { float: left; width: 375px; padding-right: 25px; text-align: center; margin-bottom: 30px;}
	
		/*#designs li h3.long {text-align: left; padding-left: 15px;} */

/*________________________
	american thorn
_________________________*/

body.american-thorn img {margin-bottom: 30px; }

/*_______________________
	resume
______________________*/

.resume ul {
	margin: 0 0 15px 0;
}


.computer {width: 400px; }

.coding {width: 300px;}
	.coding ul li {
		margin-left: 15px;
		margin-right: 0;
   		width: 170px; 
	}

.resume li {
	font-size: 14px;
	margin-right: 190px;
	letter-spacing: 1px;
	margin-bottom: 0;
}

ul.left {
	float: left;
    width: 165px; 
}

ul.right {
    float: right;
    width: 155px;
	white-space: nowrap;	 
}

ul.left li, ul.right li {margin-left: 15px;}