/* CSS

Author: Petro Salema

Contact: petro@petrosalema.com

Client: Sarah Udoh-Grossfurthner

Created: 16 June 2008

Modified: 16 July 2008

*/









/* COLOR KEY

background:	#594E37	- Dirt Gray

------------------------------------------------------------

text:		#AC9F8C - Cream

------------------------------------------------------------

links:		#ECDFCC	- Lighter Cream

------------------------------------------------------------

hover:		#FFFFFF - White

------------------------------------------------------------

hover bg:	#4E432D - Dark Brown

------------------------------------------------------------

link current:	#5F543E - Lighter Brown

------------------------------------------------------------

borders:	#695F4A - Darker Cream

------------------------------------------------------------

*/









/* Global Reset

============================================================ */



body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td

{

	margin: 0;

	padding: 0;

}



table

{

	border-collapse: collapse;

	border-spacing: 0;

}



fieldset,img { border: 0; }



address,caption,cite,code,dfn,em,strong,th,var

{

	font-weight: normal;

	font-style: normal;

}



ol,ul { list-style: none; }



h1,h2,h3,h4,h5,h6

{

	font-weight: normal;

	font-size: 100%;

}



a { text-decoration: none; }









/* Base

============================================================ */



html

{

	overflow-x: auto; height: 100%;

}



body

{

	background: url(../images/top_bg.jpg) repeat-x;

	background-color: #594E37;

	background-attachment: scroll;

	background-position: 50% 0;

}



input[type="text"]

{



}









/* Classes

============================================================ */



.left { float: left; width: 660px; }

.right { float: right; width: 340px; }



.right:after

{

	display: block;

	content: "";

	clear: both;

	height: 0;

	visibility: hidden;

}



.align-center { text-align: center; }

.align-left { text-align: left; }

.align-right { text-align: right; }

.align-justify { text-align: justify; }

.align-middle { vertical-align: middle; }



.clear { clear: both; float: none; font-size: 0; }



.float-left { float: left; }

.float-right { float: right; }



.block { display: block; }

.inline { display: inline; }

.hidden { display: none; }

.visibile { display: block; }



.bold { font-weight: bold; }

.italic { font-style: italic; }

.normal { font-weight: normal; }



.position-relative { position: relative; }

.position-absolute { position: absolute; }



.feedback0 { color: #f33; font-weight: bold; }









/* Typography

============================================================ */



body, h1,h2,h3,h4,h5,h6

{

	font-family:  Georgia, serif;

}



body

{

	color: #FFF ; /*  add hw   #AC9F8C;*/

	font-size: 16px;
	
	letter-spacing: 0.05em;

	line-height: 1.5em;

}



h1,h2,h3,h4,h5,h6

{

	font-weight: normal;

}



h2

{

	margin-bottom: 10px;

	padding: 10px 0 15px;

	border-bottom: 1px solid #695F4A;

	font-size: 30px;

	text-align: left;

}



h3

{

	padding: 10px 0;

	font-size: 20px;

	text-align: left;

}



p { margin-bottom: 20px; }



.first_letter

{

	float: left;

	position: relative;

	top: 0.05em;

	width: 0.8em;

	height: 0.2em;

	padding: 0.3em 0;

	text-transform: uppercase;

	text-align: center;

}





.first_letterw

{

	float: left;

	position: relative;

	top: 0.05em;

	width: 1.02em;

	height: 0.2em;

	padding: 0.3em 0;

	text-transform: uppercase;

	text-align: left;

}





/* Lists

============================================================ */



ul, li

{

	height: auto;

	margin: 0;

	padding: 0;

	list-style: none;

}









/* Links

============================================================ */



a, a:link, a:visited, a:active

{

	color: #ECDFCC;

	text-decoration: none;

}



a:hover

{

	color: #FFF;

	text-decoration: none;

}



a .arr { font: normal 18px Arial; }



a .arr_small { font: normal 10px Arial; }









/* Layout

============================================================ */



#header, #torso, #footer

{

	clear: both;

	float: none;

	position: relative;

	/* width: 80%;
	mod hw wep 09 */
	width: 800px;

	min-width: 800px;

	margin: 0 auto;

	text-align: left;

}



#header

{

	height: 200px;

}



#torso

{

	margin-top: 25px;

}



#footer

{

	margin-top: 40px;

	padding: 20px 0 40px;

	font-size: 12px;

	text-align: center;

}



#navigation

{

	width: 850px;

	margin: 0 auto;

	padding: 4px 0;

	border-top: 2px solid #695F4A;

	border-bottom: 1px solid #695F4A;

	text-align: center;

}



	#navigation a

	{

		font-weight: bold;

		font-size: 14px;

		padding: 4px 14px 5px;

	}



	#navigation a:hover { background: #4E432D; }



	#navigation a.current

	{

		border: 1px solid #695F4A;

		border-left: 0;

		border-right: 0;

		background: #5F543E;

	}	#blog-nav-link { background: #4E432D; }	a#blog-nav-link:hover { color: #a5b51c; }



#fineprint

{

	width: 500px;

	margin: 0 auto;

	padding: 10px 0;

	border-top: 2px solid #695F4A;

	border-bottom: 1px solid #695F4A;

}



#bio

{

	position: relative;

	min-height: 500px;

	padding: 20px 40px;

}



.breaker

{

	width: 100%;

	height: 70px;

	background: url(../images/divider.jpg) no-repeat center center;

}



#counter

{

	width: 400px;

	margin: 40px auto 20px;

	padding: 10px 0;

	border-top: 1px dotted #695F4A;

	font-size: 16px;

	text-align: center;

}



.small

{

	color: #AC9F8C;;

	font-size: 16px;

}









/* Splashes

============================================================ */



.splash

{

	position: relative;

	width: 100%;

}



	.splash a { font-size: 14px; }



.splash_text

{

	position: relative;

	width: 300px;

	top: 30px;

	padding: 20px;

	border: 1px solid #695F4A;

	background: #5F543E;

	font-style: italic;

	letter-spacing: 0;

	line-height: 175%;

	text-align: center;

}



.splash_bio { height: 330px; 

/* mod hw wep 09 */
margin-left:20px;
width:900px;

background: url(../images/splash_bio.jpg) no-repeat center right; }

.splash_book { height: 470px; background: url(../images/splash_book.jpg) no-repeat center left; }

.splash_sarah { height: 470px; background: url(../images/sarah_1.jpg) no-repeat center left; }









/* Books

============================================================ */



#booklist li

{

	float: left;

	width: 33%;

	margin-bottom: 50px;

	text-align: center;

}



	#booklist li img { width: 250px; }



	#booklist li a

	{

		display: block;

		float: left;

		width: 100%;

		font-size: 11px;

	}



	#booklist li a:hover { color: #FFF; }



	#booklist li a b

	{

		font-weight: bold;

		font-style: italic;

		font-size: 16px;

	}



.bookinfo

{

	position: relative;

	width: 100%;

}



.bookinfo_image

{

	float: left;

	width: 400px;

	text-align: center;

}



.bookinfo_tabs

{

	float: left;

	position: relative;

	width: 400px;

	padding-top: 40px;

}



.bookinfo_text

{

	display: none;

	text-align: center;

}



#form_area

{

	font-size: 12px;

	text-align: center;

}



	#form_area h2

	{

		margin-bottom: 4px;

		padding-bottom: 4px;

		border-bottom: 1px solid #695F4A;

		font-size: 18px;

		text-align: center;

	}



	#form_area .form_label

	{

		float: left;

		width: 54px;

		text-align: right;

	}



	#form_area .form_field

	{

		float: left;

		width: 260px;

		margin: 4px;

	}



	#form_area input

	{

		width: 252px;

		padding: 4px;

		border: 1px solid #695F4A;

		background: #5F543E;

		color: #ECDFCC;

		font-family: Arial;

		font-size: 12px;

	}



	#form_area input.submit

	{

		width: 260px;

		cursor: pointer;

	}



	#form_area input.submit:hover

	{

		border-color: #5F543E;

		background: #4E432D;

		color: #FFF;

	}



	#form_area textarea

	{

		width: 252px;

		padding: 4px;

		border: 1px solid #695F4A;

		background: #5F543E;

		color: #ECDFCC;

		font-family: Arial;

		font-size: 12px;

	}



#error_msg

{

	display: none;

	width: 322px;

	margin: 0;

	padding: 4px;

	border: 2px solid #f45;

	color: #f34;

	font: bold 12px Arial;

	text-align: left;

}



#feedback_msg

{

	display: none;

	width: 284px;

	margin: 4px;

	text-align: center;

	overflow-x: hidden;

}









/* Booklinks

============================================================ */



.bookinfo_links

{

	width: 400px;

	margin: 8px auto;

	font-size: 13px;

}



	.bookinfo_links a

	{

		float: left;

		display: block;

		padding: 4px 10px;

		border-right: 1px solid #695F4A;

	}



	.bookinfo_links a:hover { background: #4E432D; }



	.bookinfo_links a.current

	{

		background: #5F543E;

		cursor: default;

	}



	.bookinfo_links a.current:hover { color: #ECDFCC; }



	.bookinfo_links a.end { border: none; }



	.bookinfo_links a.end:hover { background: transparent; }









/* Preview

============================================================ */



.preview_frame

{

	width: 370px;

	margin: 0 auto;

}



.preview_pageframe

{

	float: left;

	width: 300px;

	min-height: 300px;

	padding: 4px;

	border: 1px solid #695F4A;

	background: #5F543E;

}



	.preview_pageframe img

	{

		width: 300px;

		height: auto;

	}



a.preview_arrow

{

	display: block;

	float: left;

	position: relative;

	top: 10px;

	width: 24px;

	padding: 50px 0;

	border: 1px solid #695F4A;

	background: #5F543E;

	font-family: Arial;

	text-align: center;

	cursor: pointer;

}



a.preview_arrow:hover { background: #4E432D; }



a.preview_arr_l

{

	left: 1px;

	border-right: 0;

}



a.preview_arr_r

{

	left: -1px;

	border-left: 0;

}









/* Reviews

============================================================ */



#review_roll

{

	float: right;

	width: 450px;

	margin: 0 auto;

}





.review

{

	position: relative;

	margin-top: 15px;

	padding: 40px 40px 0;

	background: url(../images/quotes_bg.jpg) no-repeat top left;

	text-align: left;

}



a.review

{

	display: block;

	color: #AC9F8C;

	font-size: 16px;

}



a.review:hover { color: #CCBFAC; }



.testimonial

{

	position: relative;

	width: 600px;

	margin: 20px auto 0;

	padding: 40px;

	background: url(../images/quotes_bg.jpg) no-repeat top left;

	text-align: left;

}



.about

{

	position: relative;

	width: 600px;
/* add hw */
	margin: 20px 0 0 0;

	padding: 40px 0 40px 0;

	background: url(../images/quotes_bg.jpg) no-repeat top left;

	text-align: left;

}



.reviewer

{

	color: #bcaf9c;

	font-style: italic;

	font-size: 11px;

}







/* Effects

============================================================ */



#shadow_top

{

	z-index: 9999;

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	height: 10px;

	background: transparent url(http://www.petrosalema.com/util/gradient_alpha?c=000000&a1=20&a2=0&w=1&h=10) repeat-x;

}



#shadow_bottom {

	z-index: 9999;

	position: fixed;

	bottom: 0;

	left: 0;

	width: 100%;

	height: 7px;

	background: transparent url(http://www.petrosalema.com/util/gradient_alpha?c=000000&a1=0&a2=20&w=1&h=10) repeat-x;

}