/* 
	Theme Name: Theme.web.id
	Theme URL: http://www.fame.co.id/portfolio/wordpress_surabaya.html
	Description: Based on Wordpress Surabaya Theme
	Author: Ken Reidy
	Author URI: http://www.kenreidy.com
	Version: 1.6 
	
*/
@import url('reset.css');
@font-face{
 font-family:"Fontin Sans";
 src:url(fonts/Fontin_Sans_R_45b.otf) format("opentype");
}
body{
	width: 960px;
	margin: 10px auto;
	font-family: Arial, Helvetica, sans-serif;
	background: #111111 url(images/body.png) top center repeat-x;
	position: relative;
	top: 0px;
}
a{
	outline: none;
	text-decoration: none;
}
img{
	border: 0px solid #000000;
}
.clear{
	clear: both;
}
.center{
	text-align: center;
}

#header{
	background: url(images/header_top.png) left bottom no-repeat;
	width: 960px;
	height: 80px;
	position: relative;
}
	#logo a{
		width: 259px;
		height: 72px;
		background: url(images/logo-wp-surabaya.png) left top no-repeat;
		position: absolute;
		left: 10px;
		top: 3px;
		text-indent: -9999px;
		display: block;
	}
#navmenucontainer{
	width: 960px;
	height: 60px;
	display: block;
	position: relative;
	top: 0px;
	background: url(images/navmenu.png) left top no-repeat;
}
	#navmenu{
		height: 50px;
		font-size: 14px;
		display: block;
		list-style: none;
	}
		#navmenu *{
			color: #ffffff;
			text-shadow: 1px 1px 0px #000000;
		}
		#navmenu li{
			float: left;
			text-transform: uppercase;
		}
		#navmenu li a{
			margin: 0 5px;
			padding: 0 10px;
			z-index: 1000;
			line-height: 50px;
		}
		#navmenu li ul{
			display: none;
		}
		#navmenu li:hover ul {
			clear: both;
			position: absolute;
			top: 50px;
			z-index: 100000;
			display: block;
			list-style: none;
			background: url(images/navmenuchild.png) left top repeat;
			margin: 0 10px;
			min-width: 100px;
		}
		#navmenu li ul li {
			display: block;
			float: none;
		}
		#navmenu li ul li a{
			line-height: 40px;
			padding: 0;
			margin: 0 10px;
			display: block;
		}
		#navmenu li.rss a{
			width: 43px;
			height: 42px;
			display: block;
			text-indent: -9999px;
			margin: 8px 5px 0px 15px;
			padding: 0 10px;
			z-index: 1000;
			background: url(images/rss.png) left top no-repeat;
		}
		#navmenu li a:hover{
			text-decoration: underline;
		}
	
#wrapper{
	background-color: #ffffff;
	position: relative;
	overflow: auto;
}
#searchform{
	font-size: 12px;
	line-height: 18px;
}
#maincolumn{
	width: 960px;
	left: 0px;
	margin: 10px 0px;
	background: #ffffff url(images/dotted.png) 659px top repeat-y;
	overflow: auto;
}
	#content{
		float: left;
		width: 621px;
/*		background: url(images/dotted.png) right top repeat-y;*/
		margin: 0px 0px 10px;
		padding: 0px 19px 0px 20px;
		position: relative;
	}
		#content small, #content small a{
			font-size: 10px;
			color: #313131;
		}
		
		.titleleft{
			float: left;
			width: 480px;
		}
		.titleright{
			float: right;
			width: 120px;
		}
		.title{
			background: url(images/dotted.png) left bottom repeat-x;
			padding: 0px 0px 4px 0px;
			overflow: auto;
		}
		h1.title, h2.title{
		    font-family:"Fontin Sans", Arial, serif;
			font-size: 30px;
			line-height: 32px;
			font-weight:500;
			font-stretch: normal;
			color:#21759b;
		}
		h3.title{
			font-size: 14px;
			line-height: 20px;
		}
		h4.title{
			font-size: 14px;
			line-height: 22px;
		}
		.title a{
			color: #4a4a4a;
			text-decoration: none;
		}
		.title a:hover{
			color: #21759b;
		}
		.commentcounts a{
			color: #21759b;
			text-align: right;
		}
		.uppercase{
			text-transform: uppercase;
		}
		.postthumbnail{
			height: 150px;
		}
		.postthumbnail2{
			height: 125px;
		}
		.postthumbnail3{
			height: 80px;
		}
		.postthumbnail, .postthumbnail2, .postthumbnail3{
			width: 150px;
			float: left;
			margin-right: 6px;
			margin-top: 10px;
			border: 2px solid #cccccc;
			font-size: 10px;
			color: #666666;
			overflow: hidden;
		}

		.postthumbnail a, .postthumbnail2 a, .postthumbnail3 a{
			color: #666666;
		}
		.entry{
			float: left;
		}
		.archiv{
			width: 450px;
		}
		.entry p{
			font-size: 13px;
			line-height: 22px;
			color: #767676;
			padding: 5px 0px 10px;
			text-align: justify;
		}
		.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6{
			color: #21759b;
			margin-top: 20px;
		}
		.entry h1{
			font-size: 20px;
			line-height: 22px;
		}
		.entry h2{
			font-size: 18px;
			line-height: 20px;
		}
		.entry h3{
			font-size: 16px;
			line-height: 20px;
		}
		.entry h4, .entry h5{
			font-size: 14px;
			line-height: 16px;
		}
		.entry h6{
			font-size: 12px;
			line-height: 14px;
		}
		.entry img{
			margin: 5px;
		}
		.entry a{
			color: #21759b;
		}
		.entry a:visited{
			color: #30a4d8;
		}
		.entry p.alignleft{
			text-align: left;
		}
		.entry p.alignright{
			text-align: right;
		}
		.entry p.alignjustify{
			text-align: justify;
		}
		.entry p.aligncenter{
			text-align: center;
		}
		.entry ul, .entry ol{
			margin: 0 20px;
			color: #767676;
			font-size: 12px;
			line-height: 22px;
			color: #767676;
			padding: 2px 0px 3px 0px;
			list-style: inside;
		}
		.entry ul li{
			list-style: square;
		}
		.entry ol li{
			list-style: decimal;
		}
		.entry ul li, .entry ol li{
		}
		.pagetitle{
			font-size: 14px;
			line-height: 16px;
			text-transform: uppercase;
			background: url(images/dotted.png) left bottom repeat-x;
			padding: 0px 0px 4px 0px;
			text-align: right;
		}
		.meta{
			height: 32px;
			width: 620px;
			background: url(images/meta_bg.png) left center repeat-x;
			float: left;
			margin: 10px 10px 10px 0px;
			text-transform: uppercase;
			font-size: 10px;
		}
			.socialmedia{
				list-style: none;
				line-height: 32px;
				height: 32px;
				float: left;
			}
			.socialmedia li{
				float: left;
				list-style: none;
			}
			.socialmedia li a{
				margin: 0 10px;
				color: #21759b;
			}
			.socialmedia li a:hover{
				color: #d54e21;
			}
			.readmore{
				float: right;
				background-color: #efefef;
				line-height: 32px;
				height: 32px;
			}
            .shortlink{ 
				float: right;
				line-height: 32px;
				height: 32px;
            	padding: 0 10px; 
	            text-transform: lowercase;
             }
			.readmore a{
				color: #767676;
				padding: 0 20px;
				text-shadow: 1px 1px 0px #ffffff;
			}
			.readmore a:hover{
				color: #d54e21;
				text-shadow: 1px 1px 0px #ffffff;
			}
			.banner, .banner-1, .banner-2{
				clear: left;
				display: block;
				width: 468px;
				display: block;
				height: 60px;
				position: relative;
				background-color: #21759b;
				margin: 10px auto;
				-moz-box-shadow: 2px 2px 0px #cccccc;
			}
	#sidebar{
		float: left;
		width: 279px;
		margin: 0px 10px 10px 10px;
		position: relative;
		display: block;
	}
		.ads150px1{
			width: 125px;
			height: 125px;
			float: left;
			margin: 0px 0px 10px;
			padding: 0px;
			background: url(images/ads_150_1.png) left top no-repeat;
		}
		.ads150px2{
			width: 125px;
			height: 125px;
			float: left;
			margin: 0px 0px 10px;
			padding: 0px;
			background: url(images/ads_150_2.png) left top no-repeat;
		}
		.adsmargin{
			margin-right: 9px;
			margin-left: 10px;
		}
		.divider{
			float: inherit;
			width: 279px;
			height: 3px;
			background: url(images/dotted.png) left top repeat-x;
			margin: 10px 0px;
		}
		.wplove{
			width: 60px;
			height: 85px;
			margin: 5px 10px;
			float: left;
			background: url(images/wordpress.gif) left center no-repeat;
		}
		.wplovedetail{
			width: 189px;
			float: left;
		}
		.wplovedetail p{
			font-size: 10px;
			font-family: Arial, Helvetica, sans-serif;
			line-height: 11px;
			color: #838282;
			text-align: justify;
			word-wrap: break-word;
			text-transform: uppercase;
		}
		.titleside, .widget-title{
			font-size: 14px;
			line-height: 14px;
			font-weight: 600;
			color: #4f4f4f;
			text-transform: uppercase;
		}
			.titleside span, .widget-title span{
				font-size: 12px;
				color: #838282;
				text-transform: lowercase;
			}

		.postlist{
			list-style: none;
			margin: 0 0 0 20px;
		}
		.postlist li, .postlist li a{
			color: #838282;
			line-height: 22px;
			font-size: 12px;
			list-style: square;
			text-transform: uppercase;
		}
		.postlist li a:hover, .postlist li a:visited:hover{
			color: #21759b;
		}
		.postlist li a:visited{
			color: #4f4f4f;
		}
		.textwidget{
			width: 279px;
			overflow: hidden;
		}

#footerbox{
	width: 960px;
	height: 359px;
	background: url(images/footer.jpg) left top no-repeat;
	display: block;
	position: relative;
}
	.footer1{
		width: 230px;
		height: 340px;
		margin-top: 19px;
		padding: 0px 10px;
		background: url(images/footer_divider.png) right center no-repeat;
		float: left;
	}
	.footer2{
		width: 190px;
		height: 340px;
		margin-top: 19px;
		padding: 0px 10px;
		float: left;
	}

	h4.titlefooter{
		font-size: 18px;
		line-height: 18px;
		color: #ffffff;
		text-transform: uppercase;
		text-shadow: 1px 1px 0px #444444;
		margin-bottom: 10px;
	}
	h4.titlefooter span{
		font-size: 12px;
		color: #000000;
		text-shadow: 1px 1px 0px #666666;
	}
	.footerposts{
		list-style: none;
	}
	.footerposts li{
		margin-top: 10px;
		float: left;
	}
	.footerthumbnail{
		float: left;
		width: 60px;
		height: 60px;
		background: url(images/thumbnail.png) left top no-repeat;
		font-size: 10px;
		position: relative;
		left: 0px;
	}
    	.footerthumbnail img{
      		width: 60px;
        	height: 60px;
	     }
		.footeroverlay{
			float: left;
			width: 60px;
			height: 60px;
			background: url(images/thumbnail_alpha.png) left top no-repeat;
			font-size: 10px;
			position: absolute;
			left: 0px;
			top: 0px;
		}


	.footerlisttitle{
		float: left;
		width: 150px;
		margin-left: 10px;
	}
	.footerlisttitle a{
		font-size: 12px;
		line-height: normal;
		color: #ffffff;
	}
	.footermeta{
		width: 150px;
		font-size: 10px;
		color: #000000;
		line-height: normal;
		float: left;
		margin-left: 10px;
	}
	.footermeta a{
		color: #000000;
	}
	.footermeta a:hover{
		color: #d54e21;
	}

#footer{
	margin: 5px 2px;
}
	#footer h6, #footer p{
		font-size: 11px;
		line-height: 14px;
		text-transform: uppercase;
		color: #838282;
	}
	#footer h6 a, #footer p a{
		color: #21759b;
	}
	#footer h6 a:hover, #footer p a:hover{
		color: #d54e21;
	}

#author, #email, #url{
	width: 150px;
	height: 20px;
	border: 1px solid #cccccc;
}
#respond *{
	margin: 2px 0px;
}
#respond p{
	font-size: 12px;
	line-height: 14px;
	color: #767676;
}
#respond h3{
	font-size: 16px;
	line-height: 20px;
}
#comment{
	position: relative;
	left: 0px;
	width: 100%;
	border: 1px solid #cccccc;
}
#submit{}

/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}
/* End Images */
/* Captions */
.aligncenter,
div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}
/* End captions */
	

/* Style untuk author box*/
#authorbox{
	border: 1px solid #cccccc;
	overflow: auto;
	padding: 5px;
	margin: 0;
}
.author_img{
	width: 60px;
	float: left;
	margin: 0 10px 0 0px;
}
.author_img img.avatar{
	margin: 0;
	padding: 0;
}
.author_text{
	float: left;
	width: 525px;
}
.author_text p{
	margin: 0;
	padding: 0;
	line-height: 14px;
	font-size: 12px;
}
.author_text p.author{
	color: #21759b;
}

#breadcrumb{
	font-size: 10px;
	color: #21759b;
}
#breadcrumb a{
	color: #414141;
}
#breadcrumb a:active{
	color: #21759b;
}
#breadcrumb a:hover{
	color: #000000;
}

h4.comments, .commentlist li div#respond h4{
	font-family: "Fontin Sans", Arial, Serif;
	font-size: 24px;
	line-height: 30px;
	color: #21759b;
}
h4.comments {margin-top: 30px;}
.commentlist{
 	width: 100%;
	margin: 10px 0 0 0px;
	font-size: 13px;
	line-height: 20px;
	list-style: decimal;
	float: right;
}
.commentlist ul.children, .commentlist ul.children ul.children{
	width: 95%;
	float: right;
}
.commentlist ul.children .comment{
 	margin-top: -15px;
}
.commentlist ul.children .comment-text{
 	width: 75%;
	float: right
}
.commentlist ul.children ul.children .comment-text{
	width: 73%;
	float: right
}
.commentlist ul.children ul.children ul.children .comment-text{
	width: 72%;
	float: right
}
.commentlist ul.children ul.children ul.children ul.children .comment-text{
	width: 71%;
	float: right
}
.commentlist li.comment-main{
	clear: both;
	min-height: 80px;
	margin: 5px 0px 10px;
	padding: 10px;
	overflow: auto;
	color: #838282;
	position: relative;
}
.commentlist li.bypostauthor .comment-text{
	background-color: #d3e7f8;
	border: 1px solid #d3e7f8;
	color: #464646;
}
.commentlist p{
	margin: 0px;
 	font-size: 13px;
	line-height: 20px;
	text-align: justify;
}
.comment-author{
    width: 96px;
    float: left;
    font-size: 10px;
    line-height: 12px;
    color: #141414;
    text-transform: uppercase;
    text-align: center;
    padding: 5px;
	-moz-border-radius: 10px;
 	-webkit-border-radius: 10px;
	border: 1px solid #cdcdcd;
}
.commentlist li.bypostauthor .comment-author{
 width: 96px;
 float: left;
 background-color: #fefefe;
}
.comment-text{
	float: right;
	margin-left: 10px;
	width: 76%;
	border: 1px solid #cccccc;
	-moz-border-radius: 10px;
 	-webkit-border-radius: 10px;
	padding: 10px;
}
.commentlist li .comment-text div.a a{
	color: #141414;
 	text-decoration: underline;
}
.comment-author a{
	color: #141414;
}
.commentlist li .comment-text div.a a:hover, .comment-author a:hover{
	color: #21759b;
	text-decoration: none;
}
.comment-meta{
 clear: left;
 padding: 5px 10px;
 font-size: 10px;
 line-height: 12px;
 color: #141414;
 text-transform: uppercase;
}

.avatar, .avatar img{
	float: left;
	margin: 0 10px 0 10px 0px;
}
.comment-reply-link{
	float: right;
	display: block;
}
.cancel-comment-reply small a{
	color: #ff0000;
}
.reply a{
 	width: 30px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	-moz-border-radius: 5px;
 	-webkit-border-radius: 5px;
	padding: 2px 10px;
    background-image: -moz-linear-gradient(top, #21759b, #145b7b); /* FF3.6 */
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #21759b),color-stop(1, #145b7b)); /* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#21759b', endColorstr='#145b7b'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#21759b', endColorstr='#145b7b')"; /* IE8 */
    float: right;
 	color: #ffffff;
}
.commentlist li div#respond{
	clear: left;
}
#commentform a{
	color: #21759b;
}
#commentform a:hover{
	color: #464646;
}
.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 60px;
	}
.navigation a{
	font-size: 12px;
	line-height: 14px;
	color: #21759b;
	text-decoration: none;
}
.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}
	
/*Poll Daddy*/