/* 
  Theme Name: Djarot Studio 2009 - Tribalized
  Theme URL: http://www.djarot.com
  Description: Djarot Studio "2009 - Tribalized" theme is a custom Widget-ready theme written for Djarot Studio.
  Author: Jarot Syahputro
  Author URI: http://www.www.djarot.com
  Version: 2.0
  The CSS, XHTML and design is released under GPL:
  http://www.opensource.org/licenses/gpl-license.php

  Changelog:
  v2.0 - 04.12.08 : 2nd Release of Djarot Studio "2009 - Tribalized" theme
  v1.0 - 23.09.08 : First Release of Djarot Studio theme
*/

body {
  background: #979797 url(images/hdr.jpg) center 0 no-repeat;
  color: #000;
  font-size: 12px;
  font-family: Arial;
  margin: 0 auto 0;
  padding: 0;
}
#wrap, #wrap-h, #hdr {
  width:1008px;
  margin: 0 auto 0;
  padding: 0;
}
#wrap { background: #FFF url(images/body.gif) -1018px 0 repeat-y;}
#wrap-h { background: #FFF url(images/body.gif) 0 0 repeat-y;}

/************************************************
*   Hyperlinks                                  *
************************************************/
a, a:visited, #bcrumb a:hover { color: #D05D01; text-decoration: none; }
a:hover      { color: #000; text-decoration: underline; }

/************************************************
*   Global                                      *
************************************************/
a img, #ftr a img, #ftr-h a img, #main img.wp-smiley, #main img.wp-wink, #main p img, #main .mask img.flash, #hdr #hdr-srch input { border:none;}
.fth, .ft, #ftr a img, #ftr-h a img, #hdr h1, #hdr h1 a, #nav, #main img.wp-smiley, #main img.wp-wink, #mainspot,
#main .mask img.flash, #main .mask h1, #main .mask h1 a, #main .mask p, .sideft, #about-box div, form,
#sidebar ul.ab-btn, #sidebar ul.bl0gbtn, #sidebar h4, #sidebar ul.twitter, #commentblock ol.commentlist, .comm-list
{ margin:0; padding:0;}
.clear, .comm-list, #main, .sideft {clear:both;}

#main img.wp-smiley, #main img.wp-wink {float:none;}

#hdr h1, #nav a {overflow: hidden;}
/************************************************
*   Header                                      *
************************************************/
#hdr {
  height: 96px;
  color: #FFF;
  font-weight: normal;
}
#hdr h1, #hdr h1 a{
  width:353px;
  height:80px;
  float:left;
  text-indent:-9000px;
}
.hdr1 {width:485px; height:80px; float:right; text-align:left; }
#hdr #hdr-srch { float:left; width:345px; padding:9px 0 27px 135px; height:27px; margin:0;}
#hdr #hdr-srch input { background:none; width:129px; margin-right:5px; font-family:Arial; font-size:11px; color:#5B5B5B;}
#hdr #hdr-srch input.sbmt {width:25px;height:22px; background:#transparent;} 

/************************************************
*   Nav                                         *
************************************************/
#nav {
  background:#transparent;
  width:306px;
  height:17px;
  float:left;
}
#nav li, #nav a { height:21px; display:block; }
#nav li { float:left; list-style:none; display:inline;}
#nav-home a, #nav-blog a, #nav-pfo a, #nav-about a, #nav-cont a, #nav-home a:hover, #nav-home.current a,
#nav-blog a:hover, #nav-blog.current a, #nav-pfo a:hover, #nav-pfo.current a, #nav-about a:hover, 
#nav-about.current a, #nav-cont a:hover, #nav-cont.current a { text-indent:-9000px; margin:0; }
#nav-home a  {width:46px; background:url(images/nav.gif) 0 0 no-repeat;}
#nav-blog a  {width:50px; }
#nav-pfo a   {width:84px; }
#nav-about a {width:57px; }
#nav-cont a  {width:69px; }
#nav-home a:hover, #nav-home.current a   {width:46px; background:url(images/nav.gif) 0 -27px no-repeat;}
#nav-blog a:hover, #nav-blog.current a   {width:50px; background:url(images/nav.gif) -46px -27px no-repeat;}
#nav-pfo a:hover, #nav-pfo.current a     {width:84px; background:url(images/nav.gif) -96px -27px no-repeat;}
#nav-about a:hover, #nav-about.current a {width:57px; background:url(images/nav.gif) -180px -27px no-repeat;}
#nav-cont a:hover, #nav-cont.current a   {width:69px; background:url(images/nav.gif) -237px -27px no-repeat;}

/************************************************
*	Content 					     		    * 
************************************************/
#main-wrap {
  width: 1008px;
  background:url(images/main-wrap.gif) 0 0 no-repeat;
  margin:0 auto 0;
  padding:10px 0 0 0;
}
#main {
  width: 944px; 
  margin: 0 0 0 32px;
  padding: 0;
}
#main p {
  padding: 0 0 10px 0;
  margin: 0;
  line-height: 17px;
  text-align:justify;
}
#main h1 {
  color: #202020;
  font-size: 14px;
  font-family: Arial;
  font-weight: bold;
  margin: 0;
  padding: 15px 0 5px 0;
}
#main h1 a  {
  color: #000;
  text-decoration: none;
  background: url(images/dot.gif) -11px -168px no-repeat;
  border-top: 4px solid #E7E6E6;
  padding:5px 0 0 20px;
  height:19px;
  display:block;
}
#main h1 a:hover {
  color: #505050;
  text-decoration: none;
}
#main h3 {
  color: #202020;
  font-size: 12px;
  font-family: Arial;
  margin: 5px 0 0 0;
  padding: 5px 0 5px 0;
}
#main p img {
  float: none;
  margin: 0 10px 10px 0;
}
#main #recent p img, #main #main-l p img { margin: 0; }
#bcrumb {
  float: left;
  width: 601px;
  height:23px;
  margin: 0;
  padding: 1px 0 0 50px;
  font-size:10px;
  font-family:Tahoma;
}
#main-l { border:0 solid #999000; 
  float: left;
  width: 651px;
  margin: 0;
  padding: 0 0 20px 0;
}
#main-l ol, #main-l ul.main {
  margin: 0 0 0 20px;
  padding: 0 0 10px 0;
}
#main-l ol li, #main-l ul.main li {
  margin: 0 0 0 20px;
  padding: 0 0 5px 0;
}
#main-l ul.main, #main-l ul.main li { list-style-type: square; }
.date {
  font-family: Arial; font-size:11px;
  padding: 3px 5px 5px 5px;
  margin: 4px 0 15px 0;
  background:#FFF url(images/date.gif) top left no-repeat;
  line-height:16px;
}
.cats, .cals, .coms {padding:0 10px 0 20px;}
.cats { background:url(images/dot.gif) -12px -81px no-repeat;}
.cals { background:url(images/dot.gif) -13px -55px no-repeat;}
.coms { background:url(images/dot.gif) -12px -108px no-repeat;}
blockquote{
  margin: 0 10px 15px 10px;
  padding: 0 25px 0 10px;
  border-left: 4px solid #FEE057;
  color:#666;
}
em, code, .talk, #bcrumb, #bcrumb a {color:#555;}
#main blockquote p{
  margin: 0;
  padding: 0;
}
#mainspot {
  width:654px;
  height:200px;
  float:left;
  background:#E7E6E6;
}
.entry   { margin:0 15px 0 15px; }
.archive { margin:0 30px 0 20px; }
.im {width:390px; height:80px; float:right; background:url(images/im.gif) 0 5px no-repeat;}

/* PORTFOLIO */
.mask{
  position:relative;
  width:654px;
  height:195px;
  overflow:hidden;
}
#box1, #main .mask img.flash {
  position:absolute;
  top:0;
  left:0;
}
#main .mask h1, #main .mask h1 a, #main .mask p { text-indent:-9000px; background:none;}

/*FEATURED*/
.feat {
  position:relative;
  width:625px;
  height:240px;
  overflow:hidden;
  margin:0 0 0 15px;
  float:left;
}
#feat-box {
  position:absolute;
  width:640px;
  margin:30px 0 0 0;
  height:210px;
  font-size:11px;
  line-height:15px;
}
#feat-box div {
  float:left;
  height:210px;
}
#feat-box p, #feat-box ul { padding:0; line-height:15px;}

#hfolio ul {
  position:relative; 
  height:30px;
  margin:8px 0 5px 0;
  padding:0;
  float:left;
}
#hfolio ul li, #hfolio ul a { cursor:pointer; height:22px; display:block; padding:8px 10px 0 13px; font-weight:bold;}
#hfolio ul li { float:left; list-style:none; display:inline; }
#hfolio ul.f-btn li { background:url(images/feat.gif) 0 0 no-repeat; color:#787878;}
#hfolio ul.f-btn li.active{ background:url(images/feat.gif) 0 -50px no-repeat; color:#000;}
#hfolio ul.f-btn li:hover{ background:url(images/feat.gif) 0 -100px no-repeat; color:#353535;}
#hfolio h2 {font-size:11px; padding:0; margin:0;}

/************************************************
*   Home Portfolio                              *
************************************************/
#hfolio {
  background:url(images/hfolio.gif);
  width:654px;
  float:left;
  margin:0; padding:0;
}
#hfolio h1, #main h1.cont {
  background:url(images/dot.gif) -6px -139px no-repeat;
  font-size:12px;
  font-weight:bold;
  padding:5px 0 5px 30px;
  float:left;
  margin:0;
}
#hfolio span {
  float:right;
  margin:0; padding:5px 5px 0 0;
  color:#D05D01;
  font-size:11px;
}
#hfolio a img, #sidebar a img {border:none;}
.hfolio-ttl {
  background:url(images/ttl.gif) left repeat-x;
  width:652px;
  height:24px;
  margin:0 0 0 1px;
  padding:0;
}
.main-ttl {
  background:url(images/ttl.gif) left repeat-x;
  width:652px;
  height:24px;
  margin:24px 0 0 1px;
  padding:0;
}
.hfolio-box {
  width:305px;
  float:left;
  margin:10px 0 0 0; padding:0 15px 0 0;
}
.hfolio-box h2 {
  font-size:11px;
  font-weight:bold;
  padding:2px 0 0 0;
  margin:2px 0 0 0;
}
.hfolio-box h2 a { 
  padding:0;
  margin:2px 1px 1px 0;
  padding: 2px 0 3px 2px;
  display:block;
  color:#3D3B33;
}
.hfolio-box h2 a:hover { color:#000; text-decoration:none;}
#recent {
  background:url(images/recent.gif) top no-repeat;
  width:654px;
  float:left;
  margin:0;
  padding:59px 0 0 0;
}
#recent, #recent p {text-align:justify;}
.rc-body {
  background:url(images/rc-body.gif);
  width:654px;
  float:left;
}
.rc-body-l {float:left;width:355px;padding:0 15px 0 15px;}
.rc-body-l p {overflow:hidden;}
.rc-body-r {float:right;width:232px;padding:0 15px 0 15px;}
#recent h1 {
  font-size:12px;
  font-weight:bold;
  padding:0 0 4px 15px;
}
#recent h2 {
  font-size:11px;
  font-weight:bold;
  padding:2px 0 0 0;
  margin:15px 0 10px 0;
  border-top:2px solid #FEE057;
}
#recent h2 a { 
  padding:0;
  margin:0 1px 1px 0;
  padding: 0 0 3px 2px;
  display:block;
  color:#3D3B33;
}
#recent h2 a:hover { color:#000; text-decoration:none;}

#main h1#bl0g-title {float:left; width:621px; height:271px; background:url(images/read-my-mind.jpg) 0 0 no-repeat; margin:0; padding:0; font-size:11px; text-indent:-9000px;}
/************************************************
*   Right Sidebar                               * 
************************************************/
#sidebar {
  background:#transparent;
  float: right;
  width: 284px;
  margin: 0;
  padding: 0 0 20px 0;
  line-height: 15px;
  text-align:justify;
  font-size:11px;
}
#sidebar h2 {
  background: url(images/h2.png) 0 0 no-repeat;
  color: #000;
  height:21px;
  font-size: 10px;
  font-family: Verdana;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 0 5px 0; letter-spacing:-0.5px;
  padding: 4px 0 2px 73px;
}
#sidebar h2.abstuff {
  background: url(images/h2.png) -294px 0 no-repeat;
}

#sidebar p, #about-box p {
  padding: 0 15px 10px 15px;
  margin: 0;
  line-height: 15px;
}
.sideft {
  background:#E7E6E6 url(images/sideft.gif) top left no-repeat; 
  margin:0 0 0 0; padding:0 0 0 0;
  width: 284px;
}

/*ABOUT*/

.about {
position:relative;
width:256px;
height:285px;
overflow:hidden;
margin:0 0 0 13px;
float:left;
padding:0;
}
#about-box{
position:absolute;
width:267px;
margin:35px 0 0 0;
height:245px;
padding:0;
}
#about-box div{
height:245px;
float:left;
}
#about-box div.about-boxes {width:254px; padding:0 13px 0 0; margin:0;}
#about-box p { padding:0 0 10px 0; }
#sidebar h3 {text-indent:-9000px; margin:0; padding:0; font-size:6px;}
#sidebar h3.twitt {text-indent:0; padding:5px 0 10px 0; border-bottom:2px solid #C8E6F2; margin:0 0 10px 0; font-size:11px;}
#sidebar ul.ab-btn {
  width:254px;
  position:relative; 
  height:34px;
  float:left;
  background:url(images/about.gif) 0 0 no-repeat;
}
#sidebar ul.ab-btn li, #sidebar ul.ab-btn a { cursor:pointer; height:34px; display:block; padding:0 0 0 0; }
#sidebar ul.ab-btn li { float:left; list-style:none; display:inline; margin:0; text-indent:-9000px;}
#sidebar ul.ab-btn li#abme { width:77px; }
#sidebar ul.ab-btn li#avai { width:85px; }
#sidebar ul.ab-btn li#wsup { width:92px; }
#sidebar ul.ab-btn li#abme:hover, #sidebar ul.ab-btn li#abme.active { width:77px; background:url(images/about.gif) 0 -54px no-repeat}
#sidebar ul.ab-btn li#avai:hover, #sidebar ul.ab-btn li#avai.active { width:85px; background:url(images/about.gif) -77px -54px no-repeat}
#sidebar ul.ab-btn li#wsup:hover, #sidebar ul.ab-btn li#wsup.active { width:92px; background:url(images/about.gif) -162px -54px no-repeat}

/*BL0G*/
.bl0g,.bl0g2 {
position:relative;
width:256px;
overflow:hidden;
margin:0 0 0 15px;
float:left;
}
#bl0g-box,#bl0g-box2{
position:absolute;
width:267px;
margin:30px 0 0 0;
}
.bl0g, #bl0g-box,#bl0g-box div {height:405px;}
.bl0g2, #bl0g-box2,#bl0g-box2 div {height:285px;}

#bl0g-box div, #bl0g-box2 div{
float:left;
}
#sidebar ul.side, #sidebar ul {
list-style-type: none;
width:254px;
margin: 0 13px 10px 0;
padding: 0 0 0 0;
}
#sidebar ul ul {margin:0;}
#sidebar ul.side li {text-align:left;}	
#sidebar ul.side li a { 
  color:#000000;
  background:url(images/dot.gif) -19px 3px no-repeat ;
  height:9px;
  padding:0 0 0 14px;
}
#sidebar ul.side li a:hover {
  color:#D05D01;
  background:url(images/dot.gif) -19px -24px no-repeat ;
}


#sidebar ul.side li ul li a { 
  color:#000000;
  background:url(images/dot.gif) -10px -202px no-repeat ;
  height:9px;
  padding:0 0 0 24px;
}
#sidebar ul.side li ul li a:hover {
  color:#D05D01;
  background:url(images/dot.gif) -11px -229px no-repeat ;
}

.current-cat a {font-weight:bold; color:#CC0000; }
.current-cat ul li a {font-weight:normal; color:#202020;}

#bl0g-box p, #bl0g-box ul{ padding:0;}
#sidebar ul.bl0gbtn {
  position:relative; 
  height:30px;
  float:left; 
}
#sidebar ul.bl0gbtn li, #sidebar ul.bl0gbtn a { cursor:pointer; height:22px; display:block; padding:8px 10px 0 10px; font-weight:bold;}
#sidebar ul.bl0gbtn li { float:left; list-style:none; display:inline;}
#sidebar ul.bl0gbtn li { background:url(images/feat.gif) 0 0 no-repeat; color:#787878;}
#sidebar ul.bl0gbtn li.active{ background:url(images/feat.gif) 0 -50px no-repeat; color:#000;}
#sidebar ul.bl0gbtn li:hover{ background:url(images/feat.gif) 0 -100px no-repeat; color:#353535;}
#sidebar h4 {font-size:11px; }
#sidebar ul.twitter li.twitter-item {border-bottom:1px solid #d2d2d2; margin:0 0 10px 0; padding:0 0 10px 0;}

.clear, .comm-list, #main, .sideft {clear:both;}
/************************
*  Footer               *
*************************/
#ftr {
background:#FFF url(images/ftr.gif) 0 5px no-repeat;
width: 1008px;
height: 76px;
margin: 0 auto 0;
padding: 0;
}
#ftr, #ftr p, #ftr a, #ftr-h a, #ftr a:hover, #ftr-h a:hover {color:#FFF;}

.fth, .ft { width: 1008px; height: 5px; }
.fth { background:#FFF url(images/ft.gif) 0 0 no-repeat;}
.ft { background:#FFF url(images/ft.gif) -1018px 0 no-repeat;}
.ft-l {float:left; width:269px; margin:0; padding:0 0 0 110px;}
.ft-r {float:right; text-align:right;width:500px; margin:0; padding:0 100px 0 0; }
#ftr p { font-size: 11px; font-weight: normal; margin: 0; padding: 27px 0 0 0; }
#ftr a, #ftr-h a { text-decoration: none;	}
#ftr a:hover, #ftr-h a:hover { text-decoration: underline; }

/************************
*  Search Form          *
*************************/
input, textarea {border:1px solid #B6B6BB; font-family:Arial; font-size:11px; color:#5B5B5B;}
.sbmt1 {background:#FFF; }
label {width:150px; color:#787878; float:left;}

/************************
*  Comments             *
*************************/
#commentblock {
  background:url(images/commentlist.gif) 10px 0 repeat-y;
  width: 585px;
  float: left;
  padding: 0 0 0 10px;
  margin: 0;
  font-family:Tahoma;
  font-size:11px;
}
#commentblock ol.commentlist, #commentblock ol.commentlist li {  list-style-type: none; }
#commentblock ol.commentlist li {  
  background:url(images/ol-li.gif) top no-repeat;
  margin: 0;
  padding: 5px 0 0 0;
}
.comm-list { width:570px; }
.comm-left { width:130px; float:left; margin:0; padding:15px 5px 0 0; margin:0 0 20px 10px; }
.comm-right { width:390px; float:right; margin:0; padding:15px 10px 15px 5px; }
.comm-left, .comm-left p {text-align:right;}
.comments { 
  background:#FFF url(images/dot.gif) -12px -98px no-repeat;
  border-top:20px solid #FFF; 
  padding:10px 0 10px 25px; 
  margin:0;
}
.commentdate {
  color:#D05D01;
  padding: 2px 5px 2px 5px;
  margin-bottom:0;
  background:#FFF;
  display:block;
}
.comm-list p {
  margin: 0;
  padding: 0 0 10px 0;
  line-height: 15px;
}
#commentform {padding:20px 0 20px 0;margin:0; background:#FFF;}

/************************
*  Page Navi            *
*************************/
.wp-pagenavi {
  margin:2px 15px 10px 15px; 
  padding:5px; 
  text-align:center; 
  font-family:Tahoma;
  font-weight:bold;
  background:#F5F5F5;
  border-top:4px solid #E7E6E6;
}
.wp-pagenavi a, .wp-pagenavi a:link,.wp-pagenavi a:visited,.wp-pagenavi a:active,
.wp-pagenavi span.pages, .wp-pagenavi a:hover,.wp-pagenavi span.current,.wp-pagenavi span.extend {
  padding: 2px 6px;
  margin: 1px;
  text-decoration: none;
  background-color: #FFF;	
}
.wp-pagenavi a:hover,.wp-pagenavi span.pages,.wp-pagenavi span.current,.wp-pagenavi span.extend { color: #000;}
.wp-pagenavi a:active { color: #06C;}
.wp-pagenavi span.current { font-weight: bold;}

/************************
*  Fame Contest         *
*************************/
.akpc_pop, #feat-box div.akpc_pop {
  background:url(images/dot.gif) 0 -10px no-repeat;
  float:right; 
  text-align:right;
  width:75px;
  height:15px;
  overflow:hidden;
  color:#787878;
}
/************************
*  Slimbox              *
*************************/
#lbOverlay {
  background-color: #000;
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
#lbOverlay, #lbImage, #lbPrevLink { top: 0; left: 0; }
#lbCenter, #lbBottomContainer, #lbImage, #lbPrevLink, #lbNextLink { position: absolute; }
#lbCenter, #lbBottomContainer {
  background-color: #fff;
  z-index: 9999;
  overflow: hidden;
}
.lbLoading { background: #fff url(images/loading.gif) no-repeat center; }
#lbImage {
  border: 10px solid #fff;
  background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
  width: 50%;
  outline: none;
  display: block;
}
#lbPrevLink:hover { background: transparent url(images/prevlabel.gif) no-repeat 0 15%; }
#lbNextLink:hover { background: transparent url(images/nextlabel.gif) no-repeat 100% 15%; }
#lbNextLink { top: 0; left: 50%; }
#lbBottom {
  font-size: 10px;
  color: #666;
  line-height: 1.4em;
  text-align: left;
  border: 10px solid #fff;
  border-top-style: none;
}
#lbCloseLink {
  background: transparent url(images/closelabel.gif) right 0 no-repeat;
  display: block;
  float: right;
  width: 66px;
  height: 30px;
  margin: 2px 0;
  outline: none;
}
#lbCaption, #lbNumber { margin-right: 71px; }
#lbCaption { font-family:Arial; font-size:11px; font-weight: bold; }