/*
Theme Name: Fotofolio
Theme URI: http://pupungbp.erastica.com/
Description: Wordpress Theme for Photography lovers, Graphic Designers, of even a Drawer. By: Pupung Budi Purnama.
Version: 1.0.8
Author: Pupung Budi Purnama
Tags: White, Gray, 2 Column
/*
/******* GOLBAL ELEMENT *******/

* {
	margin: 0;
	padding: 0;
}

body {
	background: #fff; 
        font-size: 12px;
        font-family: Georgia, Times New Roman, Serif;
	color: #505050;
	overflow-x: hidden;
	margin: 0;
	padding: 0;

}

h1, h2, h3, h4 {
	font-family: Georgia, Times New Roman, Serif;
	font-weight:normal;
	}

a {
	color: #505050;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	}

img {
	border: none;
}


ul, li, ol {
	width: 100%;
	padding: 0px;
	margin: 3px;
	}

/******* HEADER *******/
#header {
	margin-top: 23px;
	margin-left: 38px;
	padding: 0;
	display: block;

}

#header h1{
	margin: 0;
        display: block;
        float: left;
}

#header .blog-desc {
	margin-left: 5px;
	margin-top: 28px;
	float: left;
        font: italic 13px Georgia;
	padding: 0;

}



/****** BOTTOM CONTAINER *******/
#bottom {
	position:relative;
	z-index: 0;
	font-size: 13px;
	margin: 15px 0 0;
}

#bottom #scrolls {
	position:absolute;
	top: -185px;
	left: 20px;
	width: 361px;
	height: 347px;
	background:  url(images/scrolls.png) no-repeat 0 0;
	
}


#bottom .container {
        width: 1000px;
        background: url(images/stripe.png) repeat-y 0 0;
}


#bottom .container .top {
    height: 0;
    clear: both;
	padding: 0;
}
#bottom .container .bottom {
    height: 15px;
	clear: both;

}

#bottom h2 {
	padding-left: 20px;
    color: #352511;
	font-weight: bold;
	letter-spacing: 5px;
	padding-bottom: 5px;
	font-size: 13px;
    margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.3em;
}

#bottom a {
        color: #fff;
}

#bottom h2 a {
        color: #352211;
        letter-spacing: 0.3em;
}

#bottom ul li, #bottom .bottom-right p {
        color: #fff;
}

#bottom .bottom-left {
	position:relative;
    float: left;
    margin: 12px 0 0 0;
	padding: 0 0 0 253px;
	width: 127px;
}


#bottom .bottom-middle {

	float: left;
	margin: 12px 0 0 0;
	width: 310px;

}

#bottom .bottom-right {
	float: right;
	margin: 12px 0 0 0;
	width: 280px;
}

#bottom .bottom-middle a, .bottom-left a, .bottom-right a {
    color: #fff;
}

#bottom .bottom-left ul, #bottom .bottom-middle ul {
	padding: 0;
    margin: 0;
}



/**** Change the bottom middle listing to 2 column begin, remove these row will fallback to single column *****/ 

#bottom .bottom-middle ul {
        width: 310px;
}
#bottom .bottom-middle li {
        width: 145px;
}

/**** Change the bottom middle listing to 2 column  end here. ******/ 


#bottom ul, #bottom li {
    list-style: none;
	padding: 2px 0 2px 0;
	margin: 0px;
	float: left;
}



#bottom ul a, #bottom li a {
	padding-left: 20px;
	font-weight: bold;
	text-decoration: none;
}       

#bottom ul li a:hover, #bottom .current-cat, #bottom .active, #bottom .current_page_item, #bottom .current-menu-item {
    background: url(images/current.png) no-repeat left center;
    
}



#bottom-about {
	margin-left: 0px;
	padding-bottom: 0px;
	}

#bottom-about h2 {
	padding: 0 0 5px 0;
	}

#bottom-about p {
	line-height: 22px;
	font-weight:bold;
	}

#bottom-twitter {
	margin-left: 0;
	padding-left: 0;
	}

#bottom-twitter h2 {
	padding-top: 15px;
	}
	




/****** RIGHTSIDE CONTAINER ******/

.front-legend {
	float: left;
	width: 340px;
	position: relative;
	margin-left: 25px;
	padding: 0px;
	margin-top: 0;
}

.front-notes {
	margin: 0;
        width: 100%;
	font-size: 13px;

}

.front-notes h2 {
    font-weight: normal;
	font-size: 24px;
	margin: 0 0 5px 0;
	padding: 0px;
	text-transform: uppercase;
	}
	
.front-legend h2 {
    font-weight: normal;
	font-size: 24px;
	margin: 0 0 5px 0;
	padding: 0px;
	text-transform: uppercase;
	}

.front-legend h3 {
	padding-top: 25px;
    font: bold 12px;
	text-transform: uppercase;
	letter-spacing: 3px;
	}

.legend {
	float: left;
	width: 340px;
	position: relative;
	margin-left: 25px;
	padding: 0px;
	margin-top: 0;
}


.archive-legend {
	float: left;
	width: 340px;
	position: relative;
	margin-left: 25px;
	padding: 0px;
	margin-top: 0;

}

.legend h2, .archive-legend h2 {
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 0px;
	font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
}

.legend h2 a, .archive-legend h2 a{
        color: #574433;
}

.legend h3, .archive-legend h3 {
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 0px;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
}

.legend h4, .archive-legend h4 {
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 0px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
}

.archive-description {
	font-size: 12px;
	}

.photo-archive-description {
	font-size: 15px;
	}
	
.author {
        font-family: Helvetica, Arial, sans-serif;
	margin: 0px;
	padding: 0px;
}

h2.photo-archive-legend {
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 24px;
	margin-top: 15px;
	}

.notes {
        border-top: 1px solid #999;
	margin-top: 5px;
        width: 100%;
}

.notes li {
	margin-left: 15px;
	}

.notes img {
	margin: 3px;
}

.notes .exif-meta {
	margin-top: 10px;
	}

.archive-notes {
	margin-top: 5px;
	width: 100%;
        min-width: 300px;
        min-height: 300px;
        height: auto !important;
        height: 300px;

}




/****** PAGE STYLE ******/
.page-item {
	width: 725px;
	margin: 15px 0 0 273px;
	padding-bottom: 10px;
	padding-left: 0px;
}

.page-item h3 {
	margin: 0px;
	padding: 0px;
}

.page-item p{
	margin-top: 15px;
	}


.page-content {
	font-size: 13px;
	border-top: 1px solid #999;
	margin-top: 5px;
	width: 100%;
	min-height: 250px;
        height: auto !important;
        height: 250px;

}



/*** FOOTER ***/
#footer {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 9px;
	width: 995px;
    padding: 15px 5px 5px 5px;
	text-align:right;
	/* text-transform: uppercase; */
}


#footer a.social-link { display:inline-block;  width:24px; height:24px; background:url(images/social-icons.png) no-repeat; margin-right: 5px;  }
#footer a.social-link span { display:none; }

#footer a.twitter {background-position:0 0;}
#footer a.facebook {background-position:-26px 0;}
#footer a.vimeo {background-position:0 -26px;}
#footer a.rss {background-position:-52px -26px;}


/****** MAIN LAYOUT ********/
#container {
	position: relative;
	width: 97%;
	margin: 0;
	text-align: left;
	z-index: 10;
}

.front-featured {
	position:relative; 
	z-index:1;
	padding: 10px 0px 10px 0px;
	min-height: 300px;
	height: auto !important;
	height: 300px;
	display: inline-block;
	margin: 0;
}

.featured {
	position:relative; 
	z-index:1;
	padding-right: 0;

	display: inline;
	margin-left: 0;
}

.blog-index {
	width: 725px;
	margin: 15px 0 0 273px;
	padding-bottom: 10px;
	padding-left: 0px;

}


.single {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 0;
        min-height: 300px;
        height: auto !important;
        height: 300px;

	display: inline;
}

.imgborder img {
	padding: 5px;
	margin: 0px;
	background: #eae6e6;
}


.photo-holder {

	float: left;
	margin: 0;
	padding: 0;
	width:635px;
	display: inline-block;

}


.photo {
	float: right;
	margin: 0;
	padding: 5px 5px 10px 5px;
	width: 362px;
	height: 297px;
	background: url(images/dropshadow.png) no-repeat right bottom;
	display: inline;
}

.photo-single {
	float: right;
	margin: 0;
	padding: 5px 5px 10px 5px;
	background: url(images/dropshadow.png) no-repeat right bottom;
}


ul#photoslide {
	list-style: none;
	margin: 0px;
	padding: 0;
	width: 350px;
	height: 285px;
	overflow: hidden;
	border: solid 6px #FFF;
}
ul#photoslide li {
	margin: 0px;
	padding: 0px;

}

ul#photoslide li img {
	margin: 0px;
	padding: 0px;


}

.category-list {
	width: 100%;
	float: left;
	}

div.news .pic {
        width: 80px;
        height: 80px;
        background: #000;
        float: left;
        margin-right: 8px;
        margin-bottom: 8px;
}

div.category-list .pic {
        width: 80px;
        height: 80px;
        background: #000;
        margin-right: 8px;
        margin-bottom: 8px;
}



.archive-image {
	float: right;
	margin: 0 0 50px 25px;
	}

.archive-image .pic {
	float: left;
	margin-right: 5px;
	}

/****** FRONT PAGE NEWS SECTION ******/
.news h2 {
        padding-top: 0px;
}

.news h3 {
	margin-bottom: 10px;
	letter-spacing: 3px;
	}

div.news .pic {
	width: 60px;
	height: 60px;
}



/****** COMMENT STYLE *******/
div.comments {
	width: 100%;
	margin: 15px 0 0 0px;
	padding: 10px 0;
}
#respond {

	padding: 0;

}
#respond p {

	padding: 0;
	margin: 0;

}
.commentlist {
	width: 100%;

}
.comments .navigation {
}

.navigation-comment {
	width: 100%;

}
.comment-box {

}
h3#comments, div#respond h3 {
}
ol.commentlist {
	list-style: none;
	line-height: 18px;
}
ol.commentlist li {
	padding: 5px 0;
	width: 95%;
}
ol.commentlist li .avatar {
	margin: 0px 8px 5px 0;
}

.children li {
	list-style: none;
	}
cite.fn {
}
.says {
}
	
.comment-body img {
	float: left;
	}
.comment-body {
	margin-top: 0px;
	background:#faf6f6;
	padding: 10px;
	}
.comment-meta {
}
.comment p {
	margin-top: 15px;
}
form#commentform p {
	padding: 5px 0;
}
form input {
	border: 1px solid #999;
	padding: 5px;
}
form textarea {
	border: 1px solid #999;
	padding: 5px;
	width: 95%;
}
form input#submit {
	background: #ccc;
}

ol.commentlist img {
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
}

/****** Slide Comment Toggle *********/


.comment-slide-btn {
        background: #999;
        font: normal 10px Helvetica;
        padding-top: 3px;
        padding-bottom: 3px;
        width: 120px;
        text-align: center;
        margin: 25px 0 5px 0;
        color: #fff;
	
}

.comment-slide-btn:hover, .active {
        text-decoration: none;
        background: #aaa;
        }


#toggle-comment {
        float: left;
        color: #fff;
        font-weight: bold;
        }

#toggle-comment a {
        color: #fff;
        }

#comment-area {
		overflow: hidden;
		
	}


/****** POST LIST STYLE *******/

.blog-index li {
	margin-left: 0;
    list-style-type: none;
}

.blog-index h3 a {
	font-size: 16px;
	color: #574733;
	margin: 0; 
	padding: 0;
	}

#blog-index-item {
	border-top: 1px dotted #999;
	margin-top: 5px;
	margin-bottom: 20px;
	padding: 0;
	}

#post-entry {
	margin-top: 10px;
	}
#post-entry a {
	color: #574733;
	font-weight: bold;
	}

#post-entry ul {
	padding: 0;
	margin: 5px 0 0 0;
	}

#post-entry li {
	list-style-type: none;
	margin-left: 0px;
	padding-top: 5px;
	width: 100%;
	}

.post-entry-excerpt {
	font: normal 12px Georgia;
	padding-left: 15px;
	padding-right: 15px;
	margin-top: 10px;
	margin-bottom: 10px;
	}


/****** BLOG POST STYLE *******/

#blog-post {

	width: 725px;
	margin: 15px 0 0 273px;
	padding-bottom: 10px;
	padding-left: 0px;
	}

#blog-post h2 {
	font-size: 16px;
	color: #574433;
	}

#blog-post h3 {
	color: #574433;
	}

#blog-content {
	border-top: 1px solid #999;
	font-size: 13px;
	margin-right: 5px;
	margin-top: 5px;
	line-height: 22px;
	}

#blog-content li {
	margin-left: 15px;
	}

#blog-content p {
	margin-top: 15px;
	}


#com-blog-content {
        font-size: 13px;
        line-height: 22px;
        }




/******* IMAGE PREVIEW STYLE*******/

.pic a img {
        border: none;
		background: #eae6e6;
}
.pic a:hover img {
        background: #b59db6;
}


#imgPreviewWithStyles {
    background: #eae6e6;
    padding: 5px;
    z-index: 9;
    border: none;
}

#imgPreviewWithStyles span {
    color: #eae6e6;
    text-align: center;
    display: block;
    padding: 10px 0 3px 0;
}


/****** NAVIGATION ******/
#navigation {
        font: bold 8px arial, Verdana, Helvetica, Verdana, Sans-Serif;
        letter-spacing: 0.1em;
	width: 100%;
	padding-top: 15px;
	float: left;
	padding-bottom: 10px;
}

#navigation a {
        color: #505050;
}

.alignleft {
	float: left;
        text-align: left;
}
.alignright {
	float: right;
        text-align: right;
}

#single-navigation {
	clear: both;
	display: block;
    font: bold 9px arial, Verdana, Helvetica, Verdana, Sans-Serif;
    letter-spacing: 0.1em;
	padding: 15px 5px 5px 0px;
    float:right; 
	width: 317px;
}
#single-navigation a {
        color: #505050;
}

.single-alignleft {
        float: left;
	padding-top: 5px;
        text-align: left;
}
.single-alignright {
        float: right;
	margin-right: 0px;
	padding-top: 5px;
        text-align: right;
}


.navigation .alignleft {
        width: 40%;
        float: left;
        margin-left: 15px;
}

.navigation .alignright {
        width: 20%;
        float: right;
	padding-right: 0px;
}
.single #navigation {
        width: 100px; 
}



#photo-navigation {

	width:100%;
    font: bold 9px arial, Verdana, Helvetica, Verdana, Sans-Serif;
    letter-spacing: 0.1em;
	padding: 15px 5px 15px 0px;

	margin: 15px 0 0;
	display: inline-block;
}

#photo-navigation a {
        color: #505050;
}

.photo-alignleft {
        float: left;
        padding-top: 5px;
        text-align: left;
}
.photo-alignright {
        float: right;
        margin: 0 0 0 15px;
        padding: 0;
        text-align: right;
}




/****** TAG STYLE ******/


#tag-page ul {
        margin-top: 10px;
        margin-left: 10px;
        }

#tag-page a {
        color: #352511;
	font-weight: bold;
        border-bottom: 1px dotted #999;
}

#post-tags {
	font-size: 11px;
	margin-top: 5px;
	margin-bottom: 10px;
        padding: 0px;
        }

#post-tags small {
	font-size: 12px;
	}

#post-tags a {
	font-weight: bold;
	color: #574733;
	}


/******* WIDGETS ******/
/* Blog Widget */

#blog-widget {
        padding-left: 20px;
        min-width: 200px;
        width: 20%;
        float: left;
	padding-bottom: 20px;
}

#blog-widget h2 {
	font-size: 14px;
	color: #574733;
	margin-bottom: 5px;
	padding: 0;
	
	}
#blog-widget a {
        font-weight: bold;
	padding: 0px;
	margin: 0px;
        }


#blog-widget ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}


#blog-widget li {
	padding-bottom: 3px;
	margin-left: 0px;
	width: 100%;
        }






/* Search Widget */
#s {
	margin-top: 5px;
	margin-bottom: 5px;
	height: 0.8em;
	border: 1px solid #999;
	}

#searchsubmit {
	display: none;
	}

.screen-reader-text {
	display: none;
} 

#sidebar-searchform {
	margin-left: 15px;
	padding: 0 0 5px;
	}
#ss {
	width: 150px ;
	height: 0.8em;
	border: 1px solid #999;
	}


/******* MISC ******/
.ffix {
        clear: both;
}

p.clear {
        clear: both;
		height: 0px;
}