@import url(http://fonts.googleapis.com/css?family=Lobster&v1);

/*
Theme Name: Pheobox
Theme URI: http://litetheme.com
Description: Pheobox, a fixed box of post and thumbnails wordpress theme suitable for photo blogger, fashion archive or anything type of artistic journalism. Integrated with WordPress menu function, you can customize how you want to show your site pages hierachy. More feature from Theme Options.
Version: 1.11.26
Author: Abdussalaam Syaahid Mohd Fauzi
Author URI: http://abdusfauzi.com
Tags: fixed width, multiple columns
*/


/* RESET */html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,input,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}.cl{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.c1{width:960px;clear:both}.c2{width:475px}.c3{width:313px}.c4{width:232px}.c2,.c3,.c4{margin:0 5px}.alpha{margin:0 5px 0 0}.omega{margin:0 0 0 5px}

/*Typography*/
h1,h2,h3,h4,h5,h6 {font-family:"Myriad Pro",Arial;}
h1 {font-size:3em}
h2 {font-size:2em}
h3 {font-size:1.5em}
h4 {font-size:1.2em}
h5 {font-size:1em}
h6 {font-size:0.8em}

@media all {	
	/* Custom */
	html{
	    height: 100%;
	}
	
	body{
	    font:11px Verdana;
	    background:#aaa;
	    height: 95%;
	    width: 100%;
	}
	
	img{
	    border:none;
	    outline: none;
	}
	
	a,a:visited,a:hover,a:active,a:link{
	    text-decoration:none;
	    color: #0099cc;
	    outline: none;
	}
	
	p{
	    line-height: 16px;
	}
	
	.loader{
	    background: url(images/ajax-loader.gif) center center no-repeat #aaa;
	}
		
	.fl,.alignleft{
	    float:left;
	}
	
	.fr,.alignright{
	    float:right;
	}
	
	.aligncenter{
	    margin: 5px auto;
	}
			
	#logo h2{
	    text-align: center;
	    padding-bottom: 20px;
	}
	
	#logo h2 a{
		font-family: Lobster;
		color: #fff;
		font-size: 2em;
		font-weight: normal;
		text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.80);
	}
	
	#logo > a#phe{
	    background: url(images/logo.png) center center no-repeat;
	    height: 100px;
	    width: 200px;
	    line-height: 100px;
	    display: block;
	    text-indent: -9999px;
	    margin:0;
	    margin-bottom: 20px;
	}
	
	#srh{
	    -moz-border-radius: 4px;
	    -webkit-border-radius:4px;
	    border-radius: 4px;
	    background:#555;
	    margin-bottom: 10px;
	}
	
	
	#s{
	    margin: 5px;
	    width: 140px;
	    color: #999;
	}
	
	#go{
	    display:inline;
	    font-size:11px;
	    border:none;
	    padding:5px 10px;
	    -moz-border-radius: 5px;
	    -webkit-border-radius:5px;
	    border-radius: 5px;
	    background:#999;
	}
	
	#rss{
	    position: absolute;
	    display: block;
	    height: 39px;
	    width: 50px;
	    background: url(images/rssfeed.png) no-repeat;
	    text-indent: -999px;
	    margin: 0 0 0 180px;
	    z-index: 21;
	}
	
	#rss:hover{
	    background: url(images/rssfeed.png) -50px no-repeat;
	}
	
	#menu{
	    padding:0 10px 10px;
	    margin-bottom: 10px;
	}
	
	#menu li{
	    padding-bottom:5px;
	}
	
	#menu a,#menu a:visited{
	    display: block;
	    background: #333;
	    line-height: 28px;
	    text-indent: 10px;
	    -moz-border-radius: 3px;
	    -webkit-border-radius: 3px;
	    border-radius: 3px;
	    color: #6cf;
	    font-weight: 400;
	    font-size:14px;
	    font-family: Helvetica,Arial;
	}
	
	#menu a:hover{
	    background: #6cf;
	    color: #333;
	}
	
	#menu li ul{
	    height: auto;
	    position: absolute;
	    left: -999em;
	    -moz-border-radius: 5px;
	    -webkit-border-radius: 5px;
	    border-radius: 5px;
	    background: #444;
	    -moz-box-shadow:0 0 10px #333;
	    -webkit-box-shadow: 0 0 10px #333;
	    box-shadow: 0 0 10px #333;
	}
	
	#menu li:hover ul{
	    left: 200px;
	    margin: -40px 0 0 0;
	    z-index: 307;
	    padding: 10px;
	}
	
	#menu li ul li ul{
	    height: auto;
	    position: absolute;
	    left: -999em;
	    padding: 10px;
	}
	
	#menu li ul li:hover>ul{
	    left: 200px;
	    margin: -40px 0 0 0;
	}
	
	#menu li ul li{
	    display: block;
	    float: none;
	    width: 200px;
	}
	
	#menu li ul li a:visited,#menu li ul li a{
	    width: 100%-20px;
	    height: 30px;
	    line-height: 30px;
	    float: none;
	    display: block;
	}
	
	#menu li:hover ul ul{
	    left: -999em;
	}
	
	#sidebar{
	    padding:0 10px 10px;
	    margin-bottom: 10px;
	}
	
	#sidebar .widgettitle{
		font-weight: normal;
		font-size: 1.5em;
	}
	
	.widget {
	    padding-bottom:25px;
	}
	
	.widget ul li{
		border-bottom: dotted #999 1px;
		padding: 8px 0;
		
	}
	
	.tabs{
		border-bottom: 5px solid #F4F4F4;
		height: 21px;
	}
	
	ul.tabs li{
		border: none;
		font-size: 1.1em;
		padding: 0;
	}
		
	.tabs a.active{
		color: #fff;
	}
	
	.tabs .mb a{
		border-right: 1px solid #F4F4F4;
		margin-right: 6px;
		padding-right: 6px;
	}
	
	.panes{
		overflow: hidden;		
	}
	
	.pane{
		display: none;
	}
	
	#mp-rct-cmt img.avatar{
		margin: 4px 0 0;
		padding: 0;
		border: solid 1px;
		float: left;
	}
	
	#mp-rct-cmt p{
		margin-left: 40px;
	}
		
	/* Mid Contents and Comments */
	#date{
	    background: url(images/dateribbon.png) center center no-repeat;
	    float: right;
	    margin-bottom: 15px;
	    height: 80px;
	    position: relative;
	    right: -62px;
	    /*top:20px;*/
	    width: 138px;
	}
	
	#date div{
	    position:absolute;
	    float: left;
	    display:inline;
	    font-family: Arial;
	    color: #fff;
	}
	
	#date-day{
	    font-size: 45px;
	    margin: 10px auto auto 20px;
	    line-height: 50px;
	}
	
	#date-month{
	    font-size: 16px;
	    margin: 15px auto auto 75px;
	}
	
	#date-year{
	    font-size: 12px;
	    margin: 35px auto auto 75px;
	}
	
	.post-ul{
	    display:none; /* enable here and in pheobox.js to enable fade-in after page loaded */
	    margin-left:15px;
	    margin-top: 15px;
	}
	
	.post-li{
	    background:#eee;
	    color: #555;
	    -moz-border-radius: 4px;
	    -webkit-border-radius:4px;
	    border-radius: 4px;
	    -moz-box-shadow: 0 0 10px #aaa;
	    -webkit-box-shadow: 0 0 10px #aaa;
	    box-shadow: 0 0 10px #aaa;
	    cursor: pointer;
	    width: 220px;
	}
	
	.post-li:hover{
	    background: #fff;
	    opacity:1;
	}
	
	.post-content p{
	    padding-bottom:15px;
	    line-height: 20px;
	    overflow-x: hidden;
	}
	
	.post-content p img{
	    display: inline;
	}
	
	.post-content ol{
	    list-style: decimal-leading-zero;
	    margin: 0 40px 15px;
	}
	
	.post-content ul{
	    list-style: outside;
	    margin:0 30px 15px;
	}
	
	.post-content ol li,.post-content ul li{
	    line-height: 18px;
	    padding: 0 0 8px 0;
	}
	
	.post-content{
	    padding:10px;
	}
	
	.post-content img{
	    margin: 0 0 10px;
	}
	
	.post-content .cnt-wrap a:visited,.post-content .cnt-wrap a{
	    border-style: solid;
	    border-color: #3993ff;
	    border-bottom-width: 1px;
	    color: #3993ff;
	}
	
	.post-title{
	    text-transform: uppercase;
	    text-shadow: 0 2px 3px #fff;
	}
	
	.post-title a:visited,.post-title a:link{
	    color: #666;
	    line-height:1.3em;
	}
	
	.eachpost{
		min-height: 310px;
		float: left;
		margin: 0 10px 10px 0;
	}
	
	.hdr{
	    background:#444;
	    color: #eee;
	    -moz-border-radius: 4px;
	    -webkit-border-radius:4px;
	    border-radius: 4px;
	    -moz-box-shadow: 0 0 5px #333;
	    -webkit-box-shadow: 0 0 5px #333;
	    box-shadow: 0 0 5px #333;
	    width: 220px;
	}
	
	.contentframe{
		position:relative;
		margin-left: 230px;
		margin-bottom: 50px;
	}
		
	.twocols{
	    background:#eee;
	    color: #555;
	    -moz-border-radius: 4px;
	    -webkit-border-radius:4px;
	    border-radius: 4px;
	    -moz-box-shadow: 0 0 5px #888;
	    -webkit-box-shadow: 0 0 5px #888;
	    box-shadow: 0 0 5px #888;
	    cursor: pointer;
	    opacity:1;
	    width: 450px;
	}
	
	.twocols:hover{
	    background: #fff;
	}
	
	.threecols{
	    background:#eee;
	    -moz-border-radius: 4px;
	    -webkit-border-radius:4px;
	    border-radius: 4px;
	    -moz-box-shadow: 0 0 5px #888;
	    -webkit-box-shadow: 0 0 5px #888;
	    box-shadow: 0 0 5px #888;
	    width: 680px;
	    margin-bottom: 50px;
	}
	
	.threecols .post-content{
	    padding: 20px 50px;
	}
	
	.threecols .post-title a{
	    font-size: 50px;
	    line-height: 1em;
	    font-weight: bold;
	}
	
	.threecols h1,.threecols h2,.threecols h3,.threecols h4,.threecols h5,.threecols h6{
	    margin: 20px auto 25px auto;
	}
	
	.post-content blockquote{
	    border-left: 2px solid #ccc;
	    margin:0 10px 10px;
	    padding:5px 10px;
	}
	
	.post-content blockquote p{
	    color: #888;
	    padding: 0;
	}
	
	p img.wp-smiley{
	    border:0;
	    margin-bottom: -5px;
	}
	
	.wp-caption{
	    border: 5px solid #fff;
	    text-align: center;
	    margin-bottom:10px;
	    max-width: 570px;
	    overflow: hidden;
	    background: #fff;
	    -moz-border-radius: 5px;
	    -webkit-border-radius: 5px;
	    border-radius: 5px;
	}
	
	.wp-caption a{
	    display:block;
	    max-width: 570px;
	    overflow: hidden;
	}
	
	.wp-caption img{
	    padding: 0;
	    display: block;
	    margin: 0;
	}
	
	p.wp-caption-text{
	    margin: 0;
	    padding: 2px 5px;
	    font-family:'Helvetica Neue',Arial,Verdana,sans-serif;
	    font-size: 10px;
	    text-transform: uppercase;
	}
	
	.post-content .aligncenter p.wp-caption-text{
	    text-align: center;
	}
	
	.post-content .alignleft p.wp-caption-text{
	    text-align: left;
	}
	
	.post-content .alignright p.wp-caption-text{
	    text-align: right;
	}
	
	.post-content .alignleft{
	    margin-right: 10px;
	}
	
	.post-content .alignright{
	    margin-left: 10px;
	}
		
	p.attachment{
	    text-align: center !important;
	}
	
	.small{
	    color: #AEA69F;
	    font-family: 'Helvetica Neue', Arial, Verdana, sans-serif;
	    font-size: 9px;
	    line-height: 10px;
	    text-transform: uppercase;
	}
	
	.nav{
	    cursor: default !important;
	    background: #6cf;
	    color: #fff;
	    position: absolute;
	    -moz-border-radius: 4px;
	    -webkit-border-radius:4px;
	    border-radius: 4px;
	    -moz-box-shadow: 0 0 10px #aaa;
	    -webkit-box-shadow: 0 0 10px #aaa;
	    box-shadow: 0 0 10px #aaa;
	    cursor: pointer;
	    opacity:0.5;
	}
	
	.nav:hover{
	    opacity:1;
	    -webkit-animation-name: fadeIn;
	    -webkit-animation-duration: 0.3s;
	}
	
	.nav a,.nav a:visited{
	    font-weight: bold;
	    color: #fff;
	}
	
	.nav a:hover{
	    text-decoration: underline;
	    color: #fff;
	}
	
	/* COMMENTS */
	#blackbox{
	    background: #d6d6d6;
	    padding: 30px;
	    border-top: 1px solid #ccc;
	    border-bottom: 1px solid #fff;
	}
	
	#blackbox > h3{
		float: left;
		margin-right: 20px;
	}
	
	#fb-button{
		border:none; 
		overflow:hidden; 
		width:200px; 
		height:21px;
		float: left;
		margin-top: 20px;
	}
	
	.twitter-share-button{
		margin-top: 20px;
		margin-right: 20px;
		float: left;
	}
	
	.commentas{
		width: 0 !important;
	}
	
	#com-box{
	    margin: 50px 20px 0 20px;
	    padding-bottom: 50px;
	}
	
	.ping-ul{
	    list-style: decimal outside;
	    margin: 0 0 30px 20px;
	}
	
	.ping-ul li{
	    padding: 0 0 10px 10px;
	}
	
	.com-ul{
	    list-style:none;
	    padding-bottom: 30px;
	}
	
	.com-ul li{
	    padding-top: 10px;
	}
	
	.com-ul p{
	    line-height: 18px;
	    padding-top: 15px;
	}
	
	.avatar{
	    background: #fff;
	    border:2px solid #fff;
	    padding:2px;
	    -moz-border-radius:3px;
	    -webkit-border-radius:3px;
	    border-radius: 3px;
	    margin: 0 15px -43px -75px;
	    position:relative;
	}
	
	.fn{
	    font-style: normal;
	    font-family: Helvetica, Arial;
	    text-transform: uppercase;
	    padding-bottom: 15px;
	    display: block;
	    margin-top: -13px;
	}
	
	.says{
	    display: none;
	}
	
	.comment-meta{
	    display: none;
	}
	
	
	.comment-body{
	    padding:0 50px 30px 75px;
	    margin-bottom:10px;
	    border-bottom: 1px dashed #aaa;
	}
	
	.comment-body p{
	    color: #333;
	    padding: 0;
	}
	
	.children{
	    padding-left:30px;
	}
	
	.children li{
	    padding-left:20px;
	    border-left: 1px dashed #aaa;
	}
	
	.reply{
	    float: right;
	    margin: -10px -48px auto auto;
	}
	
	.reply a:visited,.reply a{
	    font-family:"Lucida Grande";
	    text-decoration:none;
	    line-height: 15px;
	    height:15px;
	    display: inline;
	    color:#aaa;
	    background: #fff;
	    padding: 3px 8px;
	    font-size: 10px;
	    -moz-border-radius:3px;
	    -webkit-border-radius:3px;
	    border-radius: 3px;
	}
	
	.reply a:hover{
	    color:#3993ff;
	    background: #aee3ff;
	}
	
	.cancel-comment-reply p{
	    padding: 0;
	}
	
	#commentform{
	    padding-top: 15px;
	}
	
	#commentform p{
	    padding: 0;
	}
	
	.comment #respond{
	    padding-bottom: 20px;
	    margin-bottom: 20px;
	    border-bottom: 1px dashed #aaa;
	}
	
	.com-form label{
	    font-size:10px;
	    color:#bbb;
	}
	
	.formr{
	    text-align: right;
	}
	
	#author, #email,#url, #comment{
	    background:#fff;
	    border: solid 1px #ccc;
	    font-family:"Verdana";
	    font-size: 11px;
	}
	
	#author, #email, #url{
	    width:148px;
	    height:18px;
	    padding:6px;
	    font-size:11px;
	    line-height:18px;
	}
	
	#comment{
	    width:430px;
	    height:58px;
	    padding:10px;
	    margin:0;
	}
	
	.loggedin #comment{
	    width: 620px;
	}
	
	#submit{
	    margin-top:14px;
	    font-family:"Lucida Grande";
	    text-decoration:none;
	    line-height: 25px;
	    display: inline;
	    background: #3993ff;
		color: #fff;
		text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.80);
	    padding: 5px 8px;
	    font-size: 12px;
	    -moz-border-radius:3px;
	    -webkit-border-radius:3px;
	    border-radius: 3px;
	}
	
	#submit:hover{
	    color: #fff;
	    background: #3A90AD;
	    cursor: pointer;
	}
	
	.button{
	    display: inline-block;
	    zoom: 1;
	    /* zoom and *display = ie7 hack for display:inline-block */
	 	*display: inline;
	    vertical-align: baseline;
	    margin: 0 2px;
	    outline: none;
	    cursor: pointer;
	    text-align: center;
	    text-decoration: none;
	    font: 14px/100% Arial, Helvetica, sans-serif;
	    padding: .5em 2em .55em;
	    text-shadow: 0 1px 1px rgba(0,0,0,.3);
	    -webkit-border-radius: .5em;
	    -moz-border-radius: .5em;
	    border-radius: .5em;
	    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	    box-shadow: 0 1px 2px rgba(0,0,0,.2);
	}
	
	.button:hover{
	    text-decoration: none;
	}
	
	.button:active{
	    position: relative;
	    top: 1px;
	}
	
	.depth-2 #comment{
	    width: 360px;
	}
	
	.depth-3 #comment{
	    width: 310px;
	}
	
	.depth-4 #comment{
	    width: 260px;
	}
	
	.depth-5 #comment{
	    width: 210px;
	}
	
	.depth-6 #comment{
	    width: 160px;
	}
	
	.depth-2 .loggedin #comment{
	    width: 565px;
	}
	
	.depth-3 .loggedin #comment{
	    width: 515px;
	}
	
	.depth-4 .loggedin #comment{
	    width: 465px;
	}
	
	.depth-5 .loggedin #comment{
	    width: 415px;
	}
	
	.depth-6 .loggedin #comment{
	    width: 365px;
	}
	
	.children .comment-body{
	    padding-left: 60px;
	}
	
	.children .avatar{
	    width: 24px;
	    height: 24px;
	    background: #fff;
	    border:1px solid #fff;
	    padding:1px;
	    -moz-border-radius:2px;
	    -webkit-border-radius:2px;
	    border-radius: 2px;
	    margin: 0 12px -18px -45px;
	    position:relative;
	}
	
	.comment-author-admin > .comment-body .avatar{
	    border:2px solid #6cf;
	    background: #6cf;
	}
	
	#version{
	    background: url(images/alpha.png) no-repeat;
	    height: 100px;
	    width: 100px;
	    position: absolute;
	    top:0;
	    left:0;
	}
	
	#pagination{
	    background: #444;
	    color: #fff;
	    position: fixed;
	    bottom: 0;
	    width:100%;
		height:40px;
		z-index: 2;
	}
	
	#pagination span a:visited,
	#pagination span a:link{
		display: block;
		margin: 7px 15px;
		height: 26px;
		width: 130px;
		background: #3A90AD url(images/overlay.png) repeat-x;
		color: #fff;
		text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.80);
		text-align: center;
		text-transform: uppercase;
		line-height: 26px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}
	
	#spacer{
		width: 97% !important;
		min-width: 700px !important;
		height: 60px;
		display: none;
	}
		
	#credit{
		color: #999;
		margin: 15px auto auto;
		padding: 0 7px;
		font-size: 0.85em;
		text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.80);
	}
}


/* iPad */
@media screen and (max-device-width:768px) {
	.threecols{
		width: 500px !important;
	}
	
	.threecols .post-title a{
		font-size: 26px;
	}
	
	.threecols div.post-content{
		padding: 20px;
	}
	
	.threecols div.post-content img{
		width: 100%;
		height: auto;	
	}
	
	.wp-caption{
		width: 95% !important;
	}
	
	#pagination{
		position:inherit;
		height: 60px;
		width: 100%;
	}
	
	#pagination span a:link,
	#pagination span a:visited{
		margin: 8px 10px;
		height: 44px;
		line-height: 44px;
	}
	
	button#go{
		font-size: 18px;
	}
	
	#s{
		width: 65%;
		font-size: 18px;
	}
	
	#comment{
		width: 390px;
	}
	
	#date{
		right:-32px;
	}
}


/* iPhone */
@media screen and (min-width:320px) and (max-device-width:480px) {
	#menu a, #menu a:visited {
		line-height: 36px;
		font-size: 20px;
	}
	
	.contentframe{
		position: inherit;
		margin-left: 0;
	}
	
	.eachpost{
		width: 290px;
	}
	
	
	.threecols{
		width: 290px !important;
	}
		
	.threecols .post-title a{
		font-size: 16px;
	}
	
	.threecols div.post-content{
		padding: 10px;
		font-size:112.5%;
	}
	
	.threecols div.post-content img{
		width: 100%;
		height: auto;	
	}
	
	.wp-caption{
		width: 95% !important;
	}
	
	#date{
		right:-12px;
		height: 60px;
		background-position: top left;
	}
	
	#spacer{
		display: none;
	}
	
	#pagination{
		position: static;
		height: 100px;
		width: 320px;
	}
	
	#pagination span a:link,
	#pagination span a:visited{
		margin: 8px 10px;
		height: 44px;
		line-height: 44px;
	}
	
	button#go{
		font-size: 18px;
	}
	
	#s{
		width: 70%;
		font-size: 18px;
	}
	
	#comment{
		width: 230px;
	}
	
	
	#submit{
		font-size: 14px;
		line-height: 25px;
		color: #333;
		text-transform: uppercase;
	}
	
	#sidebar{
		display: none;
	}
	
	.avatar{
		display: none;
	}
	
	.comment-body{
		padding-left: 0;
	}
	
	.children{
		padding-left:15px;
	}
	
	.children li {
		padding-left: 0;
	}
	
	.children .comment-body{
		padding-left: 10px;
	}
	
	.post-thumb{
		width: 100% !important;
		height: auto !important;
	}
}