/*
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.6
Author:Pupung Budi Purnama
Tags:White, Gray, 2 Column
/*
/* GLOBAL CSS */
* { margin:0; padding:0; }
h1, h2, h3, h4 { font-size:1.6em; }
.ffix { clear:both; }
a { color:#505050; text-decoration:none; }
img { border:none; }
ul { list-style:none; }

/* TYPOGRAPHY */
body { font-family:Arial, Helvetica, Sans-Serif; font-size:62.5%; padding:0 0; color:#505050; /*background-color:#755828*/; }

#header h1 { font-size:1.4em; font-weight:normal; font-style:italic; line-height:4.4em; }

.notes a { border-bottom:none; }
.author { font-size:1.2em; }
.author strong { font-family:Arial, Helvetica, Sans-Serif; }
.notes { font-size:1.3em; line-height:1.6em; }
.page .notes { width:820px; }
.notes p { }

#footer { font-size:0.9em; font-family:Arial, Helvetica, Sans-Serif; text-transform:uppercase; }

hr.line { border:none 0; border-top:1px solid #a74947; /*background-color:#a74947;*/  border-bottom:1px solid #a74947;/*border-top:3px solid #732720;the border*/ width:100%; height:3px;/*whatever the total width of the border-top and border-bottom equal*/ margin:0px auto; /*this will align it center for Mozilla*/ }

/* LAYOUT */
#container { width:820px; margin:0 auto; text-align:left; }

#header-top { min-height:120px; width:100%; background-image:url(images/wood-grain.png); /*background-image:url(images/header.gif);*/ background-position:center; background-repeat:repeat-x; border-bottom:solid 1px #a74947; }

#header { min-height:105px; width:805px; margin:0px auto; border:none; /*background-image:url(images/header2.gif);*/ padding:15px 15px 0 0; }

#header img { margin-left:15px; }

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

#header h1 a { display:block; float:left; /*background:url(images/logo.png) no-repeat top left; width:128px; height:62px; */  /*text-indent:-7777px;*/ }

#search{ float:right; }
.searchform { margin:5px; border:#333 solid 1px; }
.searchfeatured { padding-top:15px; width:820px; padding-bottom:50px; min-height:75px; }
.searchfeatured img { padding:5px; background:#742721; }

.featured { padding-top:15px; width:820px; padding-bottom:50px; min-height:300px; }
.featured img { padding:5px; background:#742721; }
.photo { float:left; }
.shadow-left { background:url(images/shadow-left.png) no-repeat left bottom; }
.shadow-right { background:url(images/shadow-right.png) no-repeat right bottom; padding:15px; }
ul#photos /*{ list-style:none; width:490px; height:285px; text-align:center; }*/
{ list-style:none; margin:0px; padding:0px; width:490px; height:285px; overflow:hidden; }

.legend { float:left; text-align:left; width:280px; padding-top:15px; }
.legend h2 { padding:10px 0 10px 0; }
.legend h3 { }
.legend h2, .legend h3, #data h2, .news h2 { font:bold 1.2em Arial, Helvetica, Sans-Serif; letter-spacing:0.3em; text-transform:uppercase; }
.legend h3 { font-size:2.4em; letter-spacing:0; }
.legend a { text-decoration:none; padding-left:8px; background-image:none; color:#734124; font-size:1.3em; }
.legend a:hover { /*background:url(images/current.png) no-repeat left center;*/ }
.legend .cat-item { background:url(images/current.png) no-repeat left center; }

.notes p { padding-top:5px; }
.news h2 { padding-top:20px; }

/* NAV MENU */
#navmenu ul { float:right; list-style:none; }
#navmenu li { display:inline; margin-left:8px; }
#navmenu ul li a { text-decoration:none; padding-left:8px; background-image:none; color:#FFF; /*color:#411613;*/ font-size:1.3em; }
#navmenu ul li a:hover { color:#734224; text-decoration:underline; }
#navmenu ul li .current_page_item { color:#734224; text-decoration:underline; }

#notes ul li { list-style:disc; margin-left:12px; }

#browse ul li a { padding-left:8px; font-size:12px; }
#browse ul li a:hover { font-size:12px; background:url(images/current.png) no-repeat left center; }

/* DATA */
#data h2 { color:#352511; padding-left:8px; }
#data ul li, #data .resume p { font-size:1.3em; color:#fff; line-height:1.6em; }
#data { background-color:#c0712c;/*background-color:#a69785;*/ text-align:center; }
#data .container { text-align:left; margin:0 auto; width:820px; /*background:url(images/stripe.png) repeat-y 410px 0;*/ }
#data .container .top { background-color:#c0712c;/*background-color:#a69785;*/ /*background:url(images/arrow-top.png) no-repeat 402px 0;*/ height:9px; clear:both; }
#data .container .bottom { background-color:#c0712c;/*background-color:#a69785;*/ /*background:url(images/arrow-top.png) no-repeat 402px 0;*/ height:9px; clear:both; }
#data .about { padding:25px 0; width:150px; }
#data .about, #data .category { float:left; padding-left:5px; }
#data .about li { clear:both; }
#data .category { padding:25px 0; margin-left:25px; width:500px; }
#data .category li { width:225px; }
#data ul { list-style:none; padding-top:10px; }
#data ul li { float:left; }
#data ul li a { padding-left:8px; }
#data ul li a:hover, .current-cat, .active, .current_page_item { background:url(images/current.png) no-repeat left center; }
#data a { color:#fff; }

.contact-left { float:left; padding:5px 0 5px 55px; font-size:1.1em; color:#fff; line-height:1.6em; }

.contact-right { float:right; padding:5px 55px 5px 0px; font-size:1.1em; color:#fff; line-height:1.6em; }

/* DATATOP */
#datatop h2 { color:#352511; padding-left:8px; }
#datatop ul li, #datatop .resume p { font-size:1.3em; color:#fff; line-height:1.6em; }
#datatop { background-color:#edae4d;/*background-color:#f2d7b6;background-color:#a69785;*/ text-align:center; border-bottom:solid 1px #a74947; }
#datatop .container { text-align:left; margin:0 auto; width:820px; /*background:url(images/stripe.png) repeat-y 410px 0;*/ }
#datatop .container .top { width:100%; background-color:#c0712c;/*background-color:#a69785;*/ /*background:url(images/arrow-top.png) no-repeat 402px 0;*/ height:3px; clear:both; }
#datatop .container .bottom { background-color:#f2d7b6;/*background-color:#a69785;*/ /*background:url(images/arrow-top.png) no-repeat 402px 0;*/ height:0px; clear:both; }
/*#datatop .about { padding:5px 0; width:150px; }
#datatop .about, #datatop .category { float:left; padding-left:5px; }
#datatop .about li { clear:both; }*/
#datatop .category { padding:5px 0; margin-left:25px; width:820px;}
#datatop .category li { width:225px; }

#datatop ul { list-style:none; padding-top:5px; }
#datatop ul li { float:left; }
#datatop ul li a { padding-left:8px; }
#datatop ul li a:hover, .current-cat, .active, .current_page_item { background:url(images/current.png) no-repeat left center; }
#datatop a { color:#734124; /*color:#fff;*/ }

/* databottom */
#databottom h2 { color:#352511; padding-left:8px; }
#databottom ul li, #databottom .resume p { font-size:1.3em; color:#fff; line-height:1.6em; }
#databottom { min-height:120px; width:100%; background-image:url(images/footer.gif); background-position:center; background-repeat:repeat-x;border-bottom:solid 1px #a74947; border-top:solid 1px #a74947; }
#databottom .container { text-align:left; margin:0 auto; width:820px; /*background:url(images/stripe.png) repeat-y 410px 0;*/ }
#databottom .container .top { width:100%; background-color:#c0712c;/*background-color:#a69785;*/ /*background:url(images/arrow-top.png) no-repeat 402px 0;*/ height:3px; clear:both; }
#databottom .container .bottom { background-color:#f2d7b6;/*background-color:#a69785;*/ /*background:url(images/arrow-top.png) no-repeat 402px 0;*/ height:0px; clear:both; }
#databottom .about { padding:5px 0; width:150px; }
#databottom .about, #databottom .category { float:left; padding-left:5px; }
#databottom .about li { clear:both; }
#databottom .category { padding:5px 0; margin-left:25px; width:500px;}
#databottom .category li { width:225px; }
#databottom ul { list-style:none; padding-top:5px; }
#databottom ul li { float:left; }
#databottom ul li a { padding-left:8px; }
#databottom ul li a:hover, .current-cat, .active, .current_page_item { background:url(images/current.png) no-repeat left center; }
#databottom a { /*color:#734124;*/ color:#fff; }

.resume { width:820px; padding:25px 0 0 0; float:left; }
.resume img { padding:3px; float:left; margin-top:0px; }
.resume h2 { padding-bottom:10px; }
.resume p { float:right; width:746px; font:1.2em Helvetica, Arial, sans-serif; text-align:justify; }
.resume a { border-bottom:none; }

#footer { padding:15px; }
div.category-list { width:400px; float:left; padding-top:15px; padding-left:30px; }
div.category-list .pic, div.news .pic { width:80px; height:80px; background:#ffffff; float:left; margin-right:8px; margin-bottom:8px; }
.pic a img { border:none; }
.pic a:hover img { background:#c0712c; /*background:#666;*/ }
div.news .pic { width:60px; height:60px; }

/*paging*/
.navigation { clear:both; font:bold 1em; text-transform:uppercase; letter-spacing:0.1em; padding-right:44px; }
.alignleft { text-align:left; }
.alignright { text-align:right; }
.floatright { float:right; }
.navigation .alignleft { width:40%; float:left; }
.navigation .alignright { width:40%; float:right; }
.single .navigation { width:500px; padding:0 10px; }

/* CSS:(StyleSheet) */

#imgPreviewWithStyles { background:#a2845e; /*background:#666;*/ padding:5px; z-index:999; border:none; }

/* Text below image */
#imgPreviewWithStyles span { color:white; text-align:center; display:block; padding:10px 0 3px 0; }

/* Comments */
div.comments { padding-top:30px; }
#respond { width:280px; float:right; padding:10px; background:#efefef; -moz-border-radius:4px; }
.commentlist { width:500px; float:left; }
.comments .navigation { width:450px; padding:10px; }
textarea#comment { width:250px; padding:10px; border:none; font-family:Arial, Helvetica, Sans-Serif; font-size:11px; }
.navigation-comment { width:400px; float:left; }
.comment-box { width:500px; float:left; }
h3#comments, div#respond h3 { font-size:11px; font-family:Arial, Helvetica, Sans-Serif; text-transform:uppercase; }
ol.commentlist { list-style:none; line-height:18px; }
ol.commentlist li { padding:15px; font-size:1.3em; }
ol.commentlist li .avatar { margin:5px 8px 5px 0; }
cite.fn { font-weight:bold; }
.comment-meta { font:italic 11px Arial, Helvetica, Sans-Serif; }
.comment p { width:420px; float:right; }
form#commentform p { font:italic 11px Arial, Helvetica, Sans-Serif; padding:5px 0; }
form input { border:none; padding:5px; }
form input#submit { background:#ccc; font-weight:bold; }