/*
Theme Name: Personal
Theme URI: http://www.ferryardian.net/themes/
Description: An personal theme.  Template designed by <a href="http://www.ferryardian.net">ferryardian</a>
Version: 2.7.3
Author: ferryardian
Author URI: http://www.ferryardian.net/
Tags: blog, photograph, news		 

*/ 


/* ------------ RESET */

*						{ margin: 0; padding: 0; }
html 						{ overflow-y: scroll; background: black url(images/body-bg.png); }
body 						{ background: url(images/header-bg.png) repeat-x; color: #ccc; font: 14px/1.6 Georgia, Serif; } 
ul						{ list-style: square inside; }
ol						{ list-style: decimal inside; }
a						{ outline: none; text-decoration: none; }
a img						{ border: none; background: none; }
img						{ vertical-align: middle; }
table						{ border-collapse: collapse; }


/* ------------ UTILITY */
.Left 						{ float: left; background:yellow; overflow:hidden;}
.Right						{ float: right; background:red; overflow:hidden;}
.clear						{ clear: both; }
.button					{ border: 1px solid #272727; background: white; padding: 3px 8px; 
						  -moz-border-radius: 5px; -webkit-border-radius: 5px; color: 272727; }
.button:hover					{ background: #990000; color: white; }


/* ------------ STRUCTURE */
#page-wrap					{ width: 860px; margin: 0px auto -250px; background:url(images/bg.jpg);
						  min-height: 100%; height: auto !important; height: 100%;}
#container					{ width:500px; overflow:hidden; float:left;}
#side-bar					{ width:310px; overflow:hidden; float:right;}
#footer					{ width: 860px; background:url(images/footer.png) repeat-x; overflow:hidden;
						  height:400px; padding:50px 0 0 0;}
#footer p					{ padding:0px 0px 0px 0px;}
.blok-1					{ width:250px; margin-left:20px;overflow:hidden; float:left}
.blok-2					{ width:250px; margin-left:55px;overflow:hidden; float:left}
.blok-3					{ width:250px; overflow:hidden; float:right}


/* ------------ SIDEBAR */
.icon						{ overflow:hidden;}
.icon h2 					{ width: 330px; height: 275px; margin-bottom: 10px; float: left;
						  text-indent: -9999px; background: url(images/icon-abi.png) no-repeat; }

/* ------------ HEADER */
h1#logo a					{ width: 288px; height: 49px; margin: 10px 10px 0px 15px; float: left;
						  opacity: 0.7; display: block; letter-spacing:1.2px;}
h1#logo a:hover 				{ opacity: 1; }
#slogan 					{ background: rgb(0,0,0); background: rgba(0,0,0, 0.2); float:right; width:288px; 
						  padding: 6px 12px; margin-top: 15px; margin-bottom: 10px; color: #ccc; font: italic 15px Georgia, Serif; }
#main-pic					{ float: left; margin-right: 10px; }
#top-bar					{ padding: 20px 0 0 0; }
#top-bar p					{ width: 300px; float: left; }
form#searchform				{ margin: 0 0 10px 0; float: left; }


/* ------------ MENU */
#menu-bar					{ padding-top: 7px; padding-bottom: 8px;background:url(images/bg-nav.jpg) repeat-x;margin-bottom:0px;} 
ul#main-nav					{ margin: 2px 10px 0 8px; }
ul#main-nav	li, ul#extra-nav li		{ display: inline; }
ul#main-nav li a, ul#extra-nav li a	{ text-transform: normal; color: #999; font-size: 1.2em; padding: 3px 10px;}
ul#main-nav li a:hover,
ul#extra-nav li a:hover			{ color:#fff; border-bottom:2px solid #000; padding-bottom:8px;}
body#portfolio ul#extra-nav li.portfolio a,
body#default ul#main-nav li.home a,
body#about ul#main-nav li.about a,
body#contact ul#main-nav li.contact a,
body#resume ul#extra-nav li.resume a	{ background: white; color: #272727; }


/* ------------ CONTENT */
#comments, #container h3, .terkait h3 	{ width:600px;background: rgb(0,0,0); background: rgba(0,0,0,0.2); position: relative; 
						  padding: 5px 0px 8px 20px; 
						  color: #c44600; font-size: 14px; text-transform: uppercase; letter-spacing: 3px; 
						  margin: 30px 0 15px 0; }

article h2 					{ margin: 0 0 10px 0; font-size: 20px; line-height: 28px; width:450px;}
article h2 a 					{ color: #b7b7b7; padding: 0; font-style: italic; background: none; border:none;}
article h2 a:hover 				{ color: white; background: none; padding: 0; border:none;}
article h2 a 					{ white-space: normal; }
article a 					{ -moz-transition: background 0.1s ease-in-out; -webkit-transition: 
						  background 0.1s ease-in-out; background: rgb(255,91,0); background: rgba(255,91,0,0.4); 
						  color: #ccc; margin: 0 2px; white-space: nowrap; -moz-border-radius: 5px; 
						  -webkit-border-radius: 5px; padding: 0 6px; }
article a:hover 				{ padding: 0px 6px; background: rgba(255,91,0,0.7); 
						  color: white;  }
.arc						{ padding-left:20px;margin-top:15px;}
.arc li					{ list-style:none;}
ul.arc,li.arc a				{ padding-left:10px;}
ul.arc,li.arc a:hover			{ padding-left:10px;}
side ul					{ list-style:none;}
side li 					{ list-style:none;}

.hit						{ margin-top:30px;color:#C44600;}

/* ------------ ISI */
#isi						{ overflow:hidden;margin-top:20px;}

.post-isi, .idx-arsip			{ padding:25px 25px 25px 105px;}
.post-isi h2, .idx-arsip h2			{ font-size:42px;line-height:40px;padding-bottom:20px;}
.post-isi p					{ margin-bottom:15px;}
.date-isi					{ width: 50px; float: left; padding: 0 5px 5px 5px; 
						  background: rgb(0,0,0); background: rgba(0,0,0,0.2); 
						  color: white; text-align: center;
						  margin: 30px 10px 0 20px; }

.isi-comment,#respond			{ padding:25px 0px 25px 105px;overflow:hidden;}
#comment					{ margin-bottom:10px;}
#comment-area					{ width:400px;margin-bottom:10px;}
#commentform					{ width:450px;}
#commentform	p				{ margin-bottom:10px;}
blockquote 					{ margin: 5px 20px 0px 0px; padding: 0px 20px 10px 130px; 
						  font-size: 0.92em; color:#C44600; background:url(images/myavatar.jpg) no-repeat; }


/* ------------ BLOG ENTRIES */
.post						{ margin: 0 0 45px 0; }
.post p					{ padding-left:20px;}
.datebox					{ width: 50px; float: left; padding: 0 5px 5px 5px; 
						  background: rgb(0,0,0); background: rgba(0,0,0,0.2); 
						  color: white; text-align: center;
						  margin: 0 10px 0 22px; }
.day						{ font-size: 2.4em; font-weight: bold; margin: 0; font-family: Georgia, serif; }
.month						{ font-size: 1.0em; font-weight: bold; text-transform: uppercase; margin: 0; }
.year						{ font-size: 1.0em; font-weight: bold; margin: 0; }
ol.commentlist				{ list-style: none;}
.comment-bubble				{ background: #990000; color: white; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
ol.commentlist li 				{ padding:10px 0 10px 10px;margin-bottom:30px; background: rgb(0,0,0); background: rgba(0,0,0,0.2);}
.avatar					{ margin:-30px 10px 10px 0;width:45px; height:45px;} 
div.comment-meta				{ font-size:11px;float:right; opacity:0.4; margin-right:10px;}
div.comment-author				{ float:left;}
.commentlist p				{ clear:both; padding:10px 0;}
.says						{ opacity:0;}
.fn						{ font-size:20px;}

/* ------------ IMAGE FOTO */
.isi-img					{ float:right; margin:10px 0px 20px 20px;padding:4px; border:1px solid #999;}

/* ------------ TYPGROGRAPHY */
a						{ color: #eee;}
a:hover					{ color: #fff;}
h1,h2,h3,h4					{ font-weight: normal; }
h2						{ font-size:18px; margin-bottom:10px;}
p#intro-paragraph				{ font-family: Georgia, serif; font-size: 1.0em; font-style: italic; line-height: 1.4em; 
						  margin-top: 20px; padding-left:20px; width:450px; }
p#intro-paragraph span			{ font-size: 1.6em; font-weight: normal; }
p#intro-paragraph em				{ color: #990000; }


/* ----------- TWITTER */
#twitter-list	 li				{ background: rgb(0,0,0); background: rgba(0,0,0, 0.2);margin-bottom:10px;
						  padding:5px 15px;}
#twitter-list a				{ color:#666;}


/* ----------- KOMUNITAS */
.jejaring					{ list-style:none;}
ul.jejaring 					{ margin:0; padding:0;}
.jejaring li a img				{ opacity: 0.6; display: block}
.jejaring li a:hover img			{ opacity: 1;}
a img						{ border:0 none;float:left;margin-right:5px;margin-bottom:20px;}


/* ----------- LINK */
.links li					{ list-style:none;}
.links li a					{ background: rgb(0,0,0); background: rgba(0,0,0, 0.2); display:block; color:#777;
						  list-style:none; margin-bottom:7px; padding:3px 0px 5px 10px;}
.links li a:hover				{ background: rgb(0,0,0); background: rgba(0,0,0, 0.4); display:block; color:#fff;
						  list-style:none; margin-bottom:7px; padding:3px 0px 5px 10px;} 
a.more-link					{ -moz-transition: background 0.1s ease-in-out; -webkit-transition: 
						  background 0.1s ease-in-out; background: rgb(255,91,0); background: rgba(255,91,0,0.4); 
						  color: #ccc; margin: 0 2px; white-space: nowrap; -moz-border-radius: 5px; 
						  -webkit-border-radius: 5px; padding: 0 6px; }
a:hover.more-link 				{ padding: 0px 6px; background: rgba(255,91,0,0.7); 
						  color: white;  }

#randomVerse	a				{ -moz-transition: background 0.1s ease-in-out; -webkit-transition: 
						  background 0.1s ease-in-out; background: rgb(255,91,0); background: rgba(255,91,0,0.4); 
						  color: #ccc; margin: 0 2px; white-space: nowrap; -moz-border-radius: 5px; 
						  -webkit-border-radius: 5px; padding: 0 6px; }
#randomVerse	a:hover			{ padding: 0px 6px; background: rgba(255,91,0,0.7); 
						  color: white;  }


/* ------------ PROJECT */
.box-project					{ overflow:hidden;height:80px;}
ul,li.box-project				{ list-style:none;}
.box-project	img				{ display:block;width:140px; height:72px;} 
li.first img					{ margin-right:10px;}
.box-project li a img			{ display:block; opacity:0.6;}
.box-project li a:hover img			{ opacity:1;}

/* ----------- ARSIP TAHUNAN */
.arsip-1					{ padding:20px 0px; width:160px; margin-left:20px;overflow:hidden; float:left;} 
.arsip-2					{ padding:20px 0px 40px 0px; width:355px; margin-left:20px;overflow:hidden; float:left;}
.arsip-3					{ padding:20px 0px; width:115px; margin-left:20px;overflow:hidden; float:left;}
.arsip-4					{ padding:20px 0px; width:130px; margin-left:20px;overflow:hidden; float:left;}
.arsip-2 li a, .arsip-3 li a, .arsip-4 li a, .terkait li a
						{ font-size:11px; -moz-transition: background 0.1s ease-in-out; -webkit-transition: 
						  background 0.1s ease-in-out; background: rgb(255,91,0); background: rgba(255,91,0,0.4); 
						  color: #ccc; margin: 0 2px; white-space: nowrap; -moz-border-radius: 5px; 
						  -webkit-border-radius: 5px; padding: 0 6px; }
.arsip-2 li a:hover, .arsip-3 li a:hover, .arsip-4 li a:hover, .terkait li a:hover
		 				{ padding: 0px 6px; background: rgba(255,91,0,0.7); 
						  color: white;  }
.terkait li					{margin-left:100px;}


/* ----------- LAIN-LAIN */

#quran-container 				{ padding-right:20px;} 
#quran-container a				{ opacity:0;} 
#post-144 h2					{ margin-left:20px;}