/* @override 
	http://juliekesti.com/wp-content/themes/juliekesti/style.css
	http://jk.com/wp-content/themes/juliekesti/style.css?120112a
	http://juliekesti.com/wp-content/themes/juliekesti/style.css?120112a
*/

/*
Theme Name: Julie Kesti
Theme URI: http://randykarels.com/
Description: The latest and greatest. Includes a few tweaks made prior to Julie leaving for China.
Version: 3.3
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: black;}
ol, ul {list-style: none;}
/* 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;}


/* ELEMENTS */
html { background:rgb(116,104,83) url(images/bg.jpg) top left repeat; }
body { background:transparent url(images/bgtop.jpg) left top repeat-x; }

/* !MAIN TYPOGRAPHY  ============*/
 
p, h1, h2, h3, li, blockquote {font-family:Arial, Helvetica, sans-serif;}
 
p {
    font-size:12px;
    line-height:18px;
    margin:0 0 12px 0;
}
 
p a, p a:visited {color:#726246; 
text-decoration:none; font-weight:bold;
border-bottom:1px dotted;
}
p a:hover {color:maroon; text-decoration:none; border:none;}

blockquote {
font-size:12px;
line-height:18px;
margin:0 0 12px 12px;
padding-left:18px;
border-left:1px solid #aaa;
}


ul li, ul li a { font-size:12px; line-height:16px; margin:0;}
 
h1 {
    font-size:30px;
    color:#3c3324;
    line-height:30px;
    font-weight:normal;
    margin:12px 0 12px 0;
    width:500px;
    font-family: Helvetica, Arial, sans-serif;
}
 
h2 {color:#9b0b23; 
font-size:18px; 
line-height:18px; 
font-weight:normal; 
margin:18px 0 6px 0;
}

h3 {font-size:11px; line-height:18px; color:#ff3300;
text-transform:uppercase;
font-weight: bold;
letter-spacing: 1px;
}
h4 {font-size:0.8em; line-height:1.4em; font-weight:bold; color:#8b5c29;}

/* IDS */

#banner {
/* the wrapper around the top slideshow. */
position:relative;
left:-5px;
overflow:hidden;
}

#banner img {position:absolute; z-index:400;}

#banner.top {width:530px; height:300px;}
#banner.bodywork {
margin: 10px 0 20px 0; 
width:454px; height:281px;}


#content {
position:relative;
border-top:1px solid transparent;
}

#content.home {
width: 380px;
left: 20px;
padding-bottom: 20px;
border-bottom:1px solid white;
}

#content.index {
width: 380px;
left: 20px;
padding: 20px 0;
border-bottom:1px solid white;
}

div.post {margin-top: 20px; padding-bottom: 80px;}

div.post div.featured-image img {
position:relative;
left:-25px;
margin-bottom:12px;
}


div.post h1 {font-size:22px; margin:0 0 12px 0;}
div.post h1 a {color:#3c3324;
text-decoration: none;
border-bottom:1px dotted;}
div.post h1 a:hover {color:maroon; border:none;}

div.post p.date {margin:0;font-size:11px;font-weight:bold;color:#666;}


#footer {
width:755px;
padding: 6px 0 30px 0;
}

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

#footer p a {color:black; text-decoration:none; border-bottom:1px dotted #333; font-weight:normal;}

#main {
/* main encompasses all of the white area that needs to be centered on teh screen */
margin:0 auto;
width:960px;
background:transparent;
position:relative;
}

#page {
width:755px;
background:white url(images/sideart.gif) right 327px no-repeat;
position:relative;
height:auto;
min-height:600px;
margin:0;
padding:0;
border-left:5px solid rgb(255,205,77);
}

#latest-news {
width:760px;
background:rgb(69,64,49);
min-height:200px;
}

h1#logo {
width:224px; height:160px;
position:absolute;
z-index: 500;
top:110px;
left:530px;
background:white url(images/sprite.png?111231a) 0 -100px no-repeat;
}

h1#logo a {width:224px; 
height:160px; background:transparent; 
text-decoration:none; border:none;
text-indent:-9000em;
display:block;}

div.overlay {
position:absolute;
right:0; top:0;
width:89px;
height:300px;
background:transparent url(images/sprite.png?111231a) -560px 0 no-repeat;
z-index:401;
}

#banner.bodywork div.overlay {
background:transparent url(images/sprite.png?111231a) -565px 0 no-repeat;
}


#stitch {
/* decorative stitch connecting the two banners on julie's site */
position:absolute; top:275px; left:-65px;
background: transparent url(images/sprite.png?111231a) left bottom no-repeat;
width: 500px;
height: 48px;
z-index:500;
}

/* @group navs */

#nav {
background:transparent url(images/sprite.png?111231a) right top no-repeat;
position:absolute; top:0; left:684px;
width:210px;
height:327px;
}

#nav ul {
width: 210px;
height: 150px;
display: block;
}

#nav ul li {
display: block; 
position: relative;
height: 36px;
}

#nav ul li a {
display: block;
width: 100%;
height: 36px;
}


#nav ul li.bodywork {
margin: 16px 0 0 16px;
width: 190px;
}

#nav ul li.art {
margin: 8px 0 0 56px;
width: 130px;
}

#nav ul li.blog {
margin: 8px 0 0 76px;
width: 110px;
}


#sidenav {
position:absolute; top:327px; left:760px;
background:transparent url(images/buttons.jpg) top left no-repeat;
width:217px; height:207px;
}

#sidenav ul {
width: 210px;
height: 190px;
display: block;
}

#sidenav ul li {
display: block; 
position: relative;
height: 36px;
}

#sidenav ul li a {
display: block;
width: 100%;
height: 36px;
}

#sidenav ul li.session {
margin: 12px 0 0 36px;
width: 165px;
}

#sidenav ul li.gift {
display: none;
margin: 8px 0 0 30px;
width: 150px;
}

#sidenav ul li.contact {
margin: 8px 0 0 30px;
width: 170px;
xborder: 1px solid red;
}

#sidenav ul li.newsletter {
margin: 8px 0 0 16px;
width: 185px;
height: 45px;
xborder: 1px solid yellow;

}

/* @end */


h2.aboutme {
display:block;
position:relative;
margin:0; padding:0;
top: 0; left:-45px;
text-indent: -9000em;
width:200px;
height:62px;
background: transparent url(images/sprite.png?111231a) top left no-repeat;
}

#main.blog #logo { display: none;}

/* @group art stuff */

/*#main.art #logo { display: none;} */
#main.art #page { background-image: none; padding-bottom: 200px;}
#main.art #sidenav { 
background:transparent url(images/buttons_white.jpg?120102a) top left no-repeat;
position:absolute; top:327px; left:759px;
}
#main.art #content.home {
 width: 550px;
}



/* @end */

/* @group latest news */

#latest-news {
padding: 18px 0;
}

#latest-news div.post {margin:0 0 22px 0; padding:0;}

#latest-news div.post p {margin-bottom:6px;color:#ccc;
font-size:13px;}

#latest-news div.post p strong a {color:white; padding-right:8px;}

#latest-news div.post a {color:#ccc;}

#latest-news div.post p.date {margin:0;font-size:11px;font-weight:bold;}

/* @end */


div.latest-blog-posts {width:400px; margin: 12px 0 0 18px;}
div.latest-blog-posts h3 {
color:#ffcd4d;
text-transform: uppercase;
font-size: 11;
font-weight:bold;
margin-bottom:18px;
}

div.home-sidebar h3 a {
color:#ffcd4d;
text-transform: uppercase;
font-size: 11;
font-weight:bold;
margin-bottom:18px;
border-bottom: 1px dotted;
text-decoration: none;
}


#latest-news div.post h2 {
margin:0 0 4px 0; 
padding: 0;
}

#latest-news div.post p {
margin-bottom:6px;color:#ccc;
font-size:13px;}font-size:16px;
font-weight:normal;
}

#latest-news div.post h2 a {
color:white;
text-decoration:none;
border-bottom:1px dotted #ccc;
}

div.latest-blog-posts div.post h2 a:hover {
color:#ffcd4d; border-bottom:none;
}

div.home-sidebar {
width:250px;
float:right;
padding:10px 20px;
border-left:1px dotted #aaa;
}

ul.tweets {padding: 9px 0;}

ul.tweets li {
color: white;
margin:  0 0 18px 0;
}

ul.tweets a {
color: #ccc;
}

div.bottom-nav {margin-bottom: 50px;}

div.bottom-nav a {
margin:12px 0;
font-size: 14px;
font-family:Helvetica, Arial, sans-serif;
display:block;
color:maroon;
}

img.alignright {
float:right;
padding:2px 0 6px 6px;
}

img.alignleft {
float:left;
padding:2px 6px 6px 0;
}

a#home-button {
width: 60px;
height: 25px;
xborder: 1px solid red;
background:white url(images/sprite.png?111231a) -305px -105px no-repeat;
position: absolute; top: 160px; right: 140px;
z-index:402;
text-indent: -9999px;
}

#subscribe {
position: absolute; 
top: 500px; right: 10px;
z-index:402;
width: 160px;
}

#subscribe p {
color: white;
font-size: 14px;
}

#subscribe p a {
color: lightgoldenrodyellow;
font-weight: normal;
}

div.slideshowlink {
margin:6px;
position: relative;
height: 20px; 

}

div.slideshowlink a {
color:#ff3300;
position: absolute;
top: 0px; right: 70px;
}