/* @override http://juliekesti.com/wp-content/themes/juliekesti/style.css */

/*
Theme Name: juliekesti_v2
Theme URI: http://randykarels.com/
Description: The flashy juliekest.com overhaul
Version: 1
Author: Randy Karels
Author URI: http://randykarels.com/
Tags: 

*/

/* RESET  ============*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0;  border: 0;  outline: 0; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;}
html {font-size:100.01%;}
/* remember to define focus styles! */
:focus {outline: 0;}
body {line-height: 1em; color:black; background:#d3e9ff; min-height:1200px; padding-bottom:100px;}
ul {list-style:disc; margin:0 0 12px 16px;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
:link img {border: 0px none;}
img, a img {padding:0; margin:0; border:none; display:block;}
strong {font-weight:bold;}
em {font-style:italic;}
 
/* !MAIN TYPOGRAPHY  ============*/
 
p, h1, h2, h3, li, blockquote {font-family:Arial, Helvetica, sans-serif;}
 
p, blockquote {
    font-size:12px;
    line-height:18px;
    margin:0 0 12px 0;
}
p + ul {margin-top:-12px;}


 
a, a:visited, p a, p a:visited {color:#92163b; text-decoration:underline;}
ol li, ol li a, ul li, ul li a { font-size:12px; line-height:16px; margin:0;}
 
h1 {
    font-size:24px;
    color:#ff3300;
    line-height:30px;
    font-weight:normal;
    margin:0 0 12px 0;
    width:300px;
}

 
h2, h2 a, h2 a:visited {
	color:#222a41; 
	font-size:16px; line-height:18px; 
	font-weight:bold; margin:30px 0 4px 0;
	text-decoration:none;
	}
	h2 a:hover {color:#ff3300; border-bottom:1px solid;}

h3 {
	font-size:11px; 
	line-height:18px; 
	color:#ff3300; 
	text-transform:uppercase; font-weight:bold;
	}
	
	h3.date {font-size:10px;}
	
	span.permalink {
		font-size:10px; 
		color:#ccc; 
		text-decoration:none; 
		text-transform:uppercase;
		padding-left:6px;
		}

span.edit {border:1px solid red; padding:2px 4px; float:right;}
span.edit a {
	color:red;
	font-family:arial, sans-serif; 
	font-size:11px;
	text-transform:uppercase; 
	font-weight:bold;
	text-decoration:none;
	}

h2 + h3 {margin-top:0px;}
h3 + h2 {margin-top:3px;}
h1 + h2 {margin-top:18px;}
	
h4 {font-size:0.8em; line-height:1.4em; font-weight:bold; color:#8b5c29;}

blockquote {
 border: 2px solid #dbdb51;
 border-width: 2px 0;
 background:#fffe9d; 
 padding:18px 30px; 
 margin-bottom:18px;
}

p.wp-caption-text {color:#666; text-align:right; font-style:italic; padding-right:10px;}

#intro {
	/* the little intro blurb on the homepage */
	display:block;
	width:420px; height:100px;
	background:white url(images/intro.gif) -10px 0 no-repeat;
	text-indent:-9000px;
	margin:0 0 30px 0; padding:0;
}

#logo {
	width:335px; height:80px;
	background:white url(images/header.jpg) -426px -195px no-repeat;
	position:absolute; top:195px; left:326px;
	}
	#logo a {width:335px; height:80px; display:block; text-indent:-9000px;}



/* !BASIC SITE STRUCTURE */

#header, #page, #footer {
	position:relative;
	width:1000px; height:auto;
	margin:0 auto;
}

#headerwrap {
	/* wraps header to give color to background before background image loads */
	width:100%; 
	background:#fef8df url(images/bodybg.jpg) top left repeat-x;
	}

	#header, #header div.emptyleft, #header div.emptyright {
		/* header has two empty divs to the right and left
		that contain the blend between the background and the
		main header image. Implemented so that the width would
		left edge of the main content instead of the left edge of
		where the blending starts. */
		height:280px;
		background:transparent url(images/header.jpg) -100px 0 no-repeat;
		}
	
		#header div.emptyleft {
			width:100px; position:absolute; top:0; left:-100px; background-position:0 0;}
		#header div.emptyright {
			width:100px; position:absolute; top:0; right:-100px; background-position:-1100px 0;}
	


#page {
	/* wrapper around the body area */
	background:transparent; /* background blue will show through */
	}
	
	#content {
		/* the main white content area. */
		background:white; 
		border-top: 1px solid white;
		margin:0 0 0 207px;
		padding: 0 75px 30px 75px;
		min-height:200px; width:436px;
		}
	
	#calendar {
		/* same width as white content areas
		shows up below the contact page. */
		background:white;
		margin: 0 0 0 207px;
		width:586px;
		}
	
		#calendar h2 {margin:0 0 12px 75px; padding:0;}
	
	#julie {
		/* the julie collage on the left */
		width:175px; height:245px;
		background:transparent url(images/juliecollage.jpg) 0 0 no-repeat;
		position:absolute; top:0; left:-3px;
		padding:240px 10px 0 25px;
		}
		
		#julie.home {width:180px; padding:240px 75px 0 25px;}
	
	#lotus {
		/* the lotus collage on the right */
		width:220px; min-height:300px;
		background:transparent url(images/lotuscollage.jpg) 0 0 no-repeat;
		position:absolute; top:0; left:793px;
		padding:300px 0 0 20px;
	}
	
#footer {margin:0 auto; width:400px; text-align:center;}
	#footer p a {color:#444; font-size:11px;}
	
/* !NAV */

#nav {
	/* everything is absolutely positioned
	as a sprite. The image background comes from the
	header image. */

	position:absolute; top:0px; left:800px;
	width:200px; height:240px;
	list-style:none;
	/* background:red; opacity:0.5; */
	}
	
	#nav li {width:60px; height:60px; position:absolute; /* background:blue */;}
	#nav li a {width:60px; height:60px; display:block; text-indent:-9000px;}
	
	#services {top:0; left:80px;}
	#links {top:65px; left:5px;}
	#art {top:70px; left:95px;}
	#bodywork {top:170px; left:90px;}
	#chakrakhan {top:140px; left:15px;}
	
#aboutnav {
	/* everything is absolutely positioned
	as a sprite. The image background comes from the
	collage image. */

	position:absolute; top:92px; left:68px;
	width:135px; height:50px;
	list-style:none;
	padding:0; margin:0;
	}
	
	#aboutnav li {width:120px; height:25px; position:absolute; /*background:blue;*/}
	#aboutnav li a {width:120px; height:25px; display:block; text-indent:-9000px;}
	
	#aboutjulie {top:0; left:0px;}
	#contact {top:25px; left:15px;}


	
div.post {
	clear:both;
	margin-bottom:25px;
}

div.simplepie ul {list-style: none; margin:0; padding:0;}
div.simplepie ul li {margin-bottom:18px;}

.alignright {
 clear: right;
 float: right;
 padding: 4px 0 4px 10px;
}

.alignleft {
 clear: left;
 float: left;
 padding: 4px 4px 4px 0;
}