/*
Theme Name: Foliage [v1.02]
Theme URI: http://5thirtyone.com/eyecandy
Description: Inspiried by nature, Foliage maintains the simplicity of a single column layout with a obvious bias towards the color green. Green with envy.
Version: 1.02
Author: Derek Punsalan
Author URI: http://5thirtyone.com

This theme was designed and coded by Derek Punsalan.
You can find his ramblings and additional work at http://5thirtyone.com/

This theme was remixed by Christina Chun.
You can find her ramblings and additional work at http://www.christinachun.com/

The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php
*/ 

* { margin: 0; padding: 0; outline: none;}
h1, h2, h3, p, pre, blockquote, form, fieldset, ul, ol { margin: 1em 0; }
body {font: 62.5% verdana, arial, sans-serif; color: #666; background: #000; text-align: center; }
a:link, a:active, a:visited {color: #3C89CA; font-weight: 800;}
  a:hover { color: #ff0000; }
  a { text-decoration: none; }
h1, h2, h3, h4 { text-transform: lowercase; color: #ff000; }
h1 { font-size: 2em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.3em; }
.chrondate { color: #3f3f3f; padding-left: 0.5em; }
.chrondate a { color: #3f3f3f; }
.chrondate a:hover { color: #d0dda3; }
#shelfwrap { background: #000; }
  #shelf { color: #d6ddbc; background: #000; text-align: left; margin: 0 100px; width: 700px; line-height: 1.5em; }
 #shelf .header { background: url(http://www.christinachun.com/images/cc_logo.jpg) no-repeat; width: 700px; height: 268px;}
	#shelf .left {width: 240px; padding: 0 0.5em 0.5em; }
		ul#navigation { margin: 0; padding: 0 0 1em 0; list-style: none; }		
		#navigation li { background: url(images/dot.gif) repeat-x 0.7em 0; }
		#navigation li a { float: left; background: #000; padding: 0 0.2em 0 0; }
		ul#navigation li span { float: right; padding: 0 0.2em; background: #000; }
		ul#navigation li br { clear: both; }
	#shelf .right { width: 27em; margin: 130px -255px 0 0; padding: 0 0.5em 0.5em; border-left: 1px solid;}
        #shelf a:hover {color: #ff0000;} 
        #shelf a:visited {color: #F0D818;} 
  		ul#recentposts {list-style: none; }		
		#recentposts li { background: url(images/li.gif) no-repeat 0 0.3em; padding-left: 15px;	margin-left: 4px; }
#shelfbreak { background: #000; height: 1em; }
#searchbar { background: url(images/searchbg.jpg) no-repeat top left; display: block; height: 41px; width: 280px; margin: 0 0 0 -0.2em; padding: 0.2em 0 0 1em;}
	#searchform div { padding: 0.2em 0 0 0; }
		#searchform span { margin-left: 3.6em; }
	#search { width: 140px; background: #fff; border: 1px solid #000; font-weight: 800;font-size: 1em; font-family: verdana, arial, sans-serif; color: #000; padding: 1px; }

/* top banner */
#banner { background: #000 url(images/lawn.jpg) repeat-x top left; height: 400px; }
	#foliage { margin: 0 auto; background: none no-repeat top left; display: block; width: 70em; height: 18em; }
	#pull a {	float: right; display: block; width: 105px; height: 146px; text-indent: -9999em; background: url(images/pull.png) no-repeat top right; }
	#pull a:hover { background: url(images/pull.png) no-repeat bottom right; }
		
/* -------------------------------------------- content */
#top {background: #FFF;}
#content {margin-top: -225px; margin-left: 405px;  margin-right: auto; min-height: 50px; min-width: 600px; max-width: 750px; padding: 0 265px 15px 50px; text-align: left; line-height: 1.5em; }
	.post { padding: 0 0 3.5em 0; }
	.entrymeta { margin: -1em 0 2em 0; text-transform: lowercase;}		
  .entry img { padding: 3px; border: 0px;} 
.entry a:hover {color:#ff000;}
	.entry ul li, .mulch ul li { list-style: none; background: url(images/li.gif) no-repeat 0 0.3em; padding-left: 1.5em; margin-left: 2.2em; }
	.entry ol, .mulch ol { margin-left: 3.5em; }
	.entry li, .mulch li { padding-bottom: 0.3em; width: 423px; font-size: 1em;	}
	.entry blockquote, .mulch blockquote { margin-left: 3.9em; color: #666; width: 423px; border-bottom: 1px solid; }
	.entry strong, .mulch strong { color: #000; }
.returnhome { float: right; }

/* -------------------------------------------- content details */

.commentnote { color: #B3BE82; padding: 1em 2em 0em 2em; }
#singlecontent {margin-top: -225px; margin-left: 405px;  margin-right: auto; min-height: 50px; padding: 0 265px 15px 50px; text-align: left; line-height: 1.5em; }
	#singlecontent .post { padding: 0 0 3.5em 0; } 		
#commentscolumn { background: url(images/box.jpg);color: #d6ddbc; margin: -3em -11em 0 45px; position: left; width: 266px; height: 266px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px;overflow: auto; overflow-x: hidden;}
	.comments {color: #d6ddbc; padding: 15px 3px 0 13px;}
        .comments a {color: #ff000;}
        .comments a:visited a:active {color: #5EA1D5;} 
#commentwrap { float: left; margin:0; padding-bottom: 3em; }
	#commentform small {color: #555;}
  .commentlist li { list-style: none; border-top: 1px solid #717a50; margin-left: 10px; width: 95%; padding-top: 0.3em;}
	.author .commententry { background: url(images/author.gif) no-repeat top right;}
	.commententry { padding: 0 0.8em 0 0.9em; overflow: hidden;}
	.commententry blockquote {color: #B3BE82; margin-left: 1em;}
#author, #email, #url, #comment {font: 11px verdana, arial, sans-serif; background: #FFF; border: 1px solid #555; color: #ddd; padding: 1px; }
  #author, #email, #url {width: 185px;}	
  #comment {width: 436px; height: 125px; overflow: auto; font-size: 10px;}
  #submit {background: #000; border: 1px solid #d6ddbc; color: #d6ddbc; font-size: 11px; padding: 0 1em;}



#bottom {
height: 300px;
padding: 5px;
}
/* -------------------------------------------- footer content */

/* bottom content area */
#footercontent {

	background: url(images/bottom_wrap.gif) repeat-x top left;
        margin: 0 0 -1em 0;
	line-height: 1.5em;
	text-align: center;
	}

	#bottomwrap {
		background: none;
                width: 1000px;
		margin: -1.4em auto 0;
		text-align: left;
		}	

	#bottomcontent {
		color: #d6ddbc;
                width: 1000px;
                height: 260px;
		margin: 1em 0 0 85px;
		padding-top: 50px;
		}

	#bottomcontent a:hover {
		color: #ff0000;
		font-weight: 800;
		}

	#bottomcontent a:active {
		color: #ff0000;
		}

.foot {
        margin: 0 auto;
        width: 85%;
        text-align: center;
        padding: 55px 0 25px 0;
}
	.foot a:visited,a:active {
		color: #d6ddbc;
		}
	.foot a:hover{
		color: #ff0000;
		}
#footer {
	color: #d6ddbc;
	width: 58em;
	margin: 2em auto 0;
	text-transform: lowercase;
}
#footercolumns {padding:3em 0 14em 10%;}
#footercolumns ul { list-style-type: none;}
#footercolumns .block {float:left; padding: 5px 15px 15px 20px;}
#footercolumns .first, * html #footercolumns .first{clear:both; margin:0;}


/* -------------------------------------------- misc */
.clear {clear: both;}
.center {text-align: center;}
	
/* ----------------------------------- floats */
.right { float: right; }
.left { float: left; }
.clear { clear: both; }
.fix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.fix { display: inline-block; }
* html .fix { height: 1%; }
.fix { display: block; }

/* ----------------------------------- forms */

#formcontact {
width:535px;
font-size:10px;
font-family:verdana, arial, helvetica, sans-serif;
}

#formcontact p {
font-size: 11px;
text-align:left;
margin:0;
font-weight: 800;
padding: 6px;
}

#formcontact label {
display:block;
float:left;
text-align:left;
padding-right:2px;
color: #000;
}

#formcontact input {
border:2px solid #008ECE;
padding-left:0.5em;
color: #000;
width:235px;
background:#fff;
}

#formcontact label2 {
display:block;
text-align:left;
padding-right:2px;
color: #000;
}
#formcontact label2 {
color: #000;
width:155px;
text-align: left;
}
#formcontact select {
margin:0 0 1em 0.5em;
}

#formcontact textarea {
width:410px;
height:125px;
border:2px solid #008ECE;
overflow:auto;
background:#fff;
padding:0.5em;
}

#formcontact input:hover,#formcontact textarea:hover {
background:#fff;
border:2px solid #ddd;
color:#000;
}

#formcontact input:focus,#formcontact textarea:focus {
background:#fff;
border:2px solid #008ECE;
color:#b80b38;
}

.required {
color: #000;
}

	.welcome {
                float: left;
		margin-top: -200px;
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		background: url(http://www.christinachun.com/images/cc_logo_hood.png) no-repeat;
                width: 450px;
                height: 500px;
                clear: both;
		}	
	.bio {
                float: left;
		margin-top: -200px;
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		background: url(http://www.christinachun.com/images/bio.png) no-repeat;
                width: 450px;
                height: 500px;
                clear: both;
		}	
	.fos {
                float: left;
		margin-top: -200px;
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		background: url(http://www.christinachun.com/images/fos.png) no-repeat;
                width: 405px;
                height: 500px;
                clear: both;
		}	
	.arc {
                float: left;
		margin-top: -140px;
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		background: url(http://www.christinachun.com/images/archives.png) no-repeat;
                width: 403px;
                height: 500px;
                clear: both;
		}

	.portfolio {
                float: left;
		margin-top: -135px;
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		background: url(http://www.christinachun.com/images/portfolio.jpg) no-repeat;
                width: 450px;
                height: 588px;
                clear: both;
		}	

	.freestuff {

                float: left;
		margin-top: -135px;
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		background: url(http://www.christinachun.com/images/freestuff.png) no-repeat;
                width: 450px;
                height: 588px;
                clear: both;
		}	
	.resume {
                float: left;
		margin-top: -135px;
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		background: url(http://www.christinachun.com/images/resume.gif) no-repeat;
                width: 450px;
                height: 588px;
                clear: both;
		}
.text {
width: 550px;
text-align: left;
}

.pgallery {
float: left;
margin-top: -225px;
margin-left: -50px;
width: 575px;
text-align: left;
}
.pgallery2 {
float: left;
margin-top: -225px;
margin-left: -10px;
width: 575px;
text-align: left;
}
.preview {
float: left;
width: 100px;
}

.format-left {
float: left;
width: 300px;
padding: 2px;
}