/*
Theme Name: sewu-kuto 3-Column
	Theme URL: http://juffan.com
	Description: sewu-kuto is 3 columns wordpress theme by <a href="http://www.juffan.com">muh juffan</a> of <a href="http://belajarlagi.blogspot.com">lagi belajar design</a>.
	Author: juffan
	Author URI: http://www.juffan.com
	Version: 3.0
	
	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php
	
	Changelog:
		v6.0 - 20 - Februari - 2009
		First Release of sewu-kuto 3-Column
*/



/* General */

body {
	padding-top: 0px;
	padding-bottom: 20px;
	background-repeat: repeat-y;
	background-color: grey;
}

h1, h2, h3, h4 {
	margin: 0;
}

img {
	border: 0;
}

.clear {
	clear: both;
	height: 0;
	overflow: hidden;
}


/* Page */

#page {
	margin: 0px auto 0 auto;
	width: 895px;
	background: url("images/page.gif") repeat-y;
}

#page-top {
	width: 895px;
	background: url("images/page_top.jpg") no-repeat; margin-top:20px;
}

/* Header */

#header { width:895px; height: 300px; position: relative; } 

/* Header - Info */
	
	#header #header-info {
		position: absolute;
		top: 20px;
		left: 25px;
		width: 525px;
		height: 81px;
		padding-left: 92px;
		background: url("images/logo.png") no-repeat;
	}
	
	#header #header-info h1 a:visited{
		color: #FF0000;
		font: normal 29px "arial black", Century Gothic;
		padding: 1px 0 5px 0;
		text-decoration: none;
	}
	
	#header #header-info h1 a:hover {
		color: #FFCC00;
		text-decoration: none;
	}
	
	#header #header-info .description {
		color: #ffffff;
		font: normal 12px "Century Gothic", Century Gothic;
		width: 525px;
	}
	
	/* Header - Menu */
	
	#header #header-menu {
		position: absolute;
		top: 269px;
		left: 15px;
		width: 670px;
		height: 30px;
	}
	
	#header #header-menu ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		width: 640px;
		height: 30px;
	}
	
	#header #header-menu ul li {
	float: left;
	height: 30px;
	font: normal 14px/46px "arial", Times, serif; line-height:27px;
	color: #FF9900; padding:3px 0 3px 0;
	}
	
	#header #header-menu ul li a {
	color: #FFFFFF;
	text-decoration: none;
	padding:0 15px;
	display: block;
	margin-bottom:5px;
	background-color: #CC0000;
	}
	
	#header #header-menu ul li a:hover { background-color:#990000;
	line-height: 27px;
	color: #FFFFFF;
	background-color: #990000;
	font-family: Arial, Helvetica, sans-serif;
	}
	
	#header #header-menu ul li ul { 
		display: none;
	}
	
	#header #header-menu ul li.current_page_item a {background-color:#339900; text-align: center;
	}
	
	/* Header - Search */
	
	#header #header-search {
		position: absolute; background-color:#FFFFFF;
		top: 25px;
		left: 657px;
		width: 217px;
		height: 22px;
	}
	
	#header #header-adsense {
		position: absolute; 
		top: 170px;
		left: 657px;
		
	}
	
	#header #header-search #s {
		width: 200px;
		height: 18px;
		padding: 2px 5px;
		border: 0;
		font: normal 13px "Century Gothic", Century Gothic;
		color: #000000;
		background: transparent;
		float: left;
	}
	
	#header #header-search #searchsubmit {
		background: transparent;
		border: none;
		width: 85px;
		height: 22px;
		padding: 0;
		float: right;
	}
	
/* Header - Feed */
	
	#header #header-feed {
		position: absolute;
		top: 15px;
		left: 600px;
		width: 40px;
		height: 40px;
	}
#bannerhorizontal { display:block; background-color:#00FFFF; width:858px; height:90px; overflow:hidden; margin: 10px 0px 0px 18px; }

 .banner_horizontal { background-color:#CCCC00; margin:0px; width:700px; height:100px;
		float: inherit; 
		padding:0px;
		}
	.bannerhorizontal img { padding:: 0px;}


/* horizontal-ad */
	
#content .horizontal_ads { display:block; background-image:url(images/backgroundads.jpg); width: 540px; height:90px; overflow: hidden;
	padding:0px 0 0px 0; margin: 0 0 20px 0;
		}
		
		.horizontal_ads .horizontal { margin:0px; width:inherit; height:90px;
		float: left;
		padding:0px;
		}
	.horizontalads img {
	padding:0px;}


/* Main */

#main {
	margin: 0 auto;
	width: 869px;
}

	/* Main - Content */
	
	#content {
	float: left;
	width: 540px;
	padding: 10px 10px 10px 5px;
	color: #000000;
	}
	
	/* Main - Content - Post */
	
	#content .post {
		float: left;
		margin-bottom: 10px;
		width: 533px;
		padding: 0 0 10px 0;
	}
	
		/* Post - Title */
		
		#content .post .post-title {
			width: 540px;
			height: auto;
			font: bold 12px "Century Gothic", Century Gothic;
			color: #666666;
		}
		
		#content .post .post-title a {
			color: #339900;
			text-decoration: none;
		}
		
		#content .post .post-title a:hover {
			text-decoration: underline;
		}
		
		#content .post .post-title h2 {
			color: #FF6600;
			font: bold 24px "Century Gothic", Century Gothic;
			padding: 2px 0;
		}
		
		#content .post .post-title h2 a {
			color: #990000;
			text-decoration: none;
		}
		
		#content .post .post-title h2 a:hover {
			text-decoration: underline;
		}
		
		#content .post .post-title .post-date {
			float: left;
			background: url("images/post_date.gif") no-repeat;
			width: 59px;
			height: 59px;
			margin-right: 18px;
			color: #CC0000;
			text-align: center;
			text-transform: lowercase;
			font: bold 13px "Century Gothic", Century Gothic; padding-top:3px;
			letter-spacing: 3px;
			line-height: 10px;
			
		}
		
		#content .post .post-title .post-date span {
	padding: 8px 0px 11px 0;
	display: block; height: 3px;
	margin-top: 0px;
	
		}
		
		/* Post - Entry */
		
		#content .post .post-entry {
			font: normal 14px/18px "arial", Century Gothic;
			color: #000000;
			width: 540px;
			padding: 0 0px;
		}
		
		#content .post .post-entry a {
			color: blue;
			text-decoration: none;
		}
		
		#content .post .post-entry a:hover {
                        color: red;
			text-decoration: underline;
		}
		
		#content .post .post-entry a.more-link {
			font: bold 12px/18px "Century Gothic", Century Gothic;
			color: #FF0000;
			text-decoration: none;
		}
		
		#content .post .post-entry a.more-link:hover {
			text-decoration: underline;
		}
		
		#content .post .post-entry blockquote {
			border-left: 10px solid #e6e6e6;
			margin: 0px 30px;
			padding-left: 15px;
		}
		
		/* Post - Info */
		
		#content .post .post-info {
			padding: 0 5px; margin-top:15px;
			width: 525px;
			height: 26px; background-image: url(images/post_info.gif);
			clear: both;
			font: bold 12px/26px "Century Gothic", Century Gothic;
			color: #ffffff;
		}
		
		#content .post .post-info a {
			color: #000000;
			text-decoration: none;
		}
		
		#content .post .post-info a:hover {
			color: red;
                        text-decoration: underline;
		}
		
		/* Post - Comments */
		
		#content .post h3 {
			margin: 30px 0 5px 0;
			color: #CCCCCC;
			font: bold 18px "Century Gothic", Century Gothic;
		}
		
		#content .post .comments {
			font: normal 12px/18px "Century Gothic", Century Gothic;
			color: #999999;
			width: 521px;
		}
		
		#content .post .comments ol {
			margin: 10px 0;
			padding-left: 25px;
		}
		
		#content .post .comments ol li {
			padding: 5px;
		}
		
		#content .post .comments ol li a {
			color: #000000;
			text-decoration: none;
		}
		
		#content .post .comments ol li a:hover {
			text-decoration: underline;
		}
		
		#content .post .comments ol li.alt {
	background: #e6e6e6;
	color: #990000;
	background-color: #E1E1C4;
		}
		
		#content .post .comments ol li cite {
			color: #CC0000;
			font-style: normal;
			font-weight: bold;
		}
		
		#content .post .comments ol li cite a {
			color: #00FFFF;
			text-decoration: none;
		}
		
		#content .post .comments ol li cite a:hover {
			text-decoration: underline;
		}
		
		#content .post .comments ol li .commentmetadata a {
			color: #666666;
			text-decoration: none;
		}
		
		#content .post .comments ol li .commentmetadata a:hover {
			text-decoration: underline;
		}
		
		#content .post #commentform {
			margin: 0;
			padding-left: 25px;
			font: normal 12px/18px "Century Gothic", Century Gothic;
			color: #ffffff;
			width: 496px;
		}
		
		#content .post #commentform a {
			color: #ffffff;
			text-decoration: none;
		}
		
		#content .post #commentform a:hover {
			text-decoration: underline;
		}
	
	/* Main - Content - Navigation */
	
	#content .navigation {
		margin-bottom: 30px;
		font: bold 12px "Century Gothic", Century Gothic;
		color: #ffffff;
		width: 541px;
	}
	
	#content .navigation a {
		color: #ffffff;
		text-decoration: none;
	}
	
	#content .navigation a:hover {
		text-decoration: underline;
	}
	
		#content .navigation .navigation-previous {
			float: left;
		}
		
		#content .navigation .navigation-next {
			float: right;
		}
	
	/* Main - Sidebar */
	#sidebar { background-color:#FFFFFF; margin-top:10px;
	float: right; padding-right: 5px;
	width: 305px;
	font: normal 14px/18px  Times New Roman, Helvetica, Sans-Serif;
	color: #FFFFFF;
	}
		#sidebar h2 { font-family: "sans-serif", Courier, monospace;
	font-size:14px; 
	text-align:center; 
	color: #FFFFFF;
	width: 305px;
	height: 18px;
	padding: 3px 0px 3px 0;
	margin-bottom: 10px; background-image:url(images/sidebar_title.gif);
		}
	
	#sidebar a {
		color: #FFFFFF;
		text-decoration: none;
	}
	
	#sidebar a:hover {
		text-decoration: underline;
	}
	
	#sidebar .sidebar-box {
	width: 305px;
	padding-bottom: 0px;
	}
	
	/* Sidebar - Forms */
		
		#sidebar #searchform {
			margin: 0;
			padding: 10px 0;
			width: 130px;
			text-align: center;
		}
		
		#sidebar #searchform #s {
			width: 30px;
		}
		#sidebar .subscribeform .p { color: #000000;}
		
	
		
	/* sidebar- adsense */
	
	#sidebar .sidebar-adsense{display:block; background-color:#EAEAEA; width: inherit; height:250px; overflow: hidden;
	padding: 0px 0 0px 0px; margin: 0 0 10px 0;
		} 
	
#sidebar .adsense { display: block; background-image:url(images/adsense.gif); float:right; width:305px; height:250px;padding-bottom: 3px;}


	/* Sidebar - Ads */
		
		#sidebar .sidebar-ads { display:block; background-image:url(images/partners.jpg); width: 295px; height:287px; overflow: hidden;
	padding: 0px 0 0px 8px; margin: 0 0 10px 0;
		}
		
		.sidebar-ads .partners { margin:3px 0 0px 0; width:inherit; height:300px;
		float: left;
		padding: 10px 0px 0px 15px;
		}
	.partners img {
	padding: 0px 5px 5px 0px;}
			
/************************************************
*	Left Sidebar 		    			   	    * 
************************************************/
#l_sidebar {
	float: left;
	width: 146px;
	margin: 0px;
	padding: 10px 0 0 0;
	display: inline;
	}

#l_sidebar h2 {
	background-color: blue;
	width:146px; 
	color: #FFFFFF;
	font-size: 14px;
	font-family: Times New Roman, Helvetica, Sans-Serif;
	text-align: center;
	font-weight: normal;
	padding:3px 0 3px 0;
	margin: 0px 0 0px 0;
	text-transform: uppercase;
	line-height: normal;
	}
	
#l_sidebar ul { background-color:#FFFFCC;
	list-style: none;
	margin: 0px 0 0px 0 ;
	padding: 0px 0 0px 0 ;
	}

#l_sidebar ul li { background-color:#FFFFCC;
	padding:0px 0 2px 0;
	margin: 3px 0 2px 0;
	}
#l_sidebar ul li ul li {padding: 0px 0 0px 10px;}
#l_sidebar ul li ul li a:visited {padding:0;}
#l_sidebar ul li ul li a:visited:hover {color: red;}
	
#l_sidebar ul li a, #l_sidebar ul li a:visited {
	color: #333333;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	}

#l_sidebar ul li a:hover {
	color: red;
	text-decoration: none;
	}
/************************************************
*	Right Sidebar 		    	    	        * 
************************************************/
#r_sidebar {
	float: right;
	width: 146px;
	margin: 0px;
	padding: 10px 0 5px 0;
	display: inline;
	}

#r_sidebar h2 {
	background-color: blue;
	width:146px; 
	color: #FFFFFF;
	font-size: 14px;
	font-family: Times New Roman, Helvetica, Sans-Serif;
	text-align: center;
	font-weight: normal;
	margin:0px;
	padding: 3px 0px 3px 0px;
	text-transform: uppercase;
	line-height: normal;
	}
	
#r_sidebar ul { background-color:#FFFFCC;
	list-style: none; margin:0px;
	padding:0 0 0 0;
	}

#r_sidebar ul li { background-color:#FFFFCC;
	padding:0px 0 2px 0;
	margin: 3px 0 2px 0;
	}
	
#r_sidebar ul li a, #l_sidebar ul li a:visited {
	color: #333333;
	text-decoration: none;
	margin: 0px;
	padding: 0px 0 0 10px;
	}

#r_sidebar ul li a:hover {
	color: red;
	text-decoration: none;
	}
	
/* sidebar video */
#sidebar .sidebar-video  { display:block; background-image:url(images/2009-01-20_063314.png); width:300px; height: 240px; }
#sidebar .video { background-color:#666666;}

/* Footer */

#footer {
	margin:0px auto;
	padding-top: 10px;
	width: 895px;
	height: 40px;
	color: #FFFFFF;
	font: bold 12px "Century Gothic", Century Gothic;
	display: block;
}

#footer a {
	color: #ffffff;
	text-decoration: none;
}

#footer a:hover {
	text-decoration: none; color:#FF0000;
}

	/* Footer - Copyright */
	
#footer { 
	width: 895px; height:42px;
	}
	
	#footer #copyright { background-image:url(images/footer.png); background-repeat:no-repeat; 
	width: 895px;
	height: 45px;
	padding-top:7px;
	text-align: center;
	line-height: 15px;
	padding-bottom: 10px;
	}