/*  
Theme Name: Arthemia
Theme URI: http://michaelhutagalung.com/2008/05/arthemia-magazine-blog-wordpress-theme-released/
Description: <a href="http://michaelhutagalung.com/2008/05/arthemia-magazine-blog-wordpress-theme-released/">Arthemia</a> theme is combining a magazine and a weblog into one; it is not too magazine-ish nor too blog-ish. Designed for Wordpress. Gravatar support included along with automatic thumbnail resizer.
Version: 1.0
Author: Michael Jubel Hutagalung
Author URI: http://michaelhutagalung.com/2008/05/arthemia-magazine-blog-wordpress-theme-released/

The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php
*/


/*  
	Colors:

	Yellow: #F3E56F
	Gray1: #A09FA0
	Gray2: #929090
	Gray3: #716F70
	Gray background: #ECECEC

*/



/* HTML Elements */




* { margin: 0; padding: 0; }

body { font: 100% Georgia; background-color: #FFF; color: #333; }
p { margin: 15px 0; }

a:link, a:visited { color: #716F70; text-decoration: none; }
a:hover, a:active { color: #2C2C2C; text-decoration: underline; xbackground-color: none; }

a img { border: 0; }
code { font: 1.0em 'Courier New', Courier, Fixed; background-color: #ececec; }	
acronym, abbr, span.caps { font-size: 0.9em; letter-spacing: .07em; cursor: help; }			
acronym, abbr { border-bottom: 1px dashed #999; }
blockquote { padding: 10px 10px 0 10px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #eee; font: 1.0em Arial; line-height: 1.5em; margin: 10px 0px; }
select { width: 130px; }	
.clearfloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfloat { display: inline-block; }
.latest { border: none; xborder: 1px solid red; outline: none; }
#buffer { margin: 50px 0 0 0; }

/* Hides from IE-mac \*/
* html .clearfloat { height: 1%; }
*+html .clearfloat { height: 1%; }
.clearfloat { display: block; }
	
.hide { display: none; }
#hide { display: none; }	
	







/* Structure */


#head { width: 960px; margin: 0px auto; margin-top: 15px; padding: 0px; font-size: 0.7em; }
#page { width: 940px; margin: 0px auto; padding: 0 10px 10px 10px; background-color: #ececec; font-size: 0.7em; }

.left, .alignleft { float: left; }
.right, .alignright { float: right; }


#adright{
	float: right;
	width: 468px;
	height: 60px;
	margin: 4px 0 0 0;
	xborder: 1px solid blue;
}
	
	
	











/* Text*/

h1 { font: 3.5em Arial; font-weight: bold; letter-spacing: -0.08em; }
h2 { font: 2.3em Georgia, "Times New Roman"; }
h3 { font: 1.3em Arial; margin-bottom: 3px; color: #3c78a7; font-weight: bold; }
h4 { font: 1.0em Arial; }

h3#respond { margin-top: 0px; padding-top: 20px; }
h3#comments { margin-top: 32px; padding-left: 0px; }
h3.authors { margin-top: 15px; }






/* Index Page*/

#logo { padding: 0 0 0 16px; width: 350px; xborder: 1px solid blue; }
#tagline { margin-top: 5px; font-size: 1em; color: #333; }











/* --------------------------------  Navigation Bar ----------------------------------- */	

#navbar {
	margin: 0 auto;
	margin-top: 15px;
	padding: 0px 10px;
	text-transform: uppercase;
	background: #2c2c2c url(images/navbar.png);
	xborder: 1px solid blue;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#page-bar { width: 722px; }
#page-bar ul { list-style: none; }
#page-bar li { float: left; list-style: none; cursor: pointer; display: block; border-right: 1px solid White; }
#page-bar li:hover { background-color: #F3E56F; display: block; !important: ; }
#page-bar a, #page-bar a:visited { margin: 0px; padding: 10px 16px; font-weight: bold; color: #716F70; display: block; }
#page-bar a:hover { text-decoration: none; display: block; background-color: #F3E56F; }




/* Dropdown Menus */		
#page-bar li { float: left; margin: 0px; padding: 0px; }
#page-bar li li { float: left; margin: 0px; padding: 0px; width: 122px; text-transform: none; }
#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited { background-color: #2B2B2B; width: 122px; float: none; margin: 0px; padding: 5px 10px 5px 18px; border-top: 1px solid #C0C0C0; }
#page-bar li li a:hover, #page-bar li li a:active { background-color: #666666; padding: 5px 10px 5px 18px; }
#page-bar li ul { position: absolute; width: 10em; left: -999em; }
#page-bar li:hover ul { left: auto; display: block; }
#page-bar li:hover ul, #page-bar li.sfhover ul { left: auto; }













	
	
	
	
/* --------------------------------  Headline ----------------------------------- */		
	
	
#headline { width: 570px; float: left; background-color: #F0F0F0; padding: 10px; font-size: 1.05em; line-height: 1.5em; margin: 0 0 10px 0; xborder: 1px solid green; }
#headline a img, #featured a img { xborder: 1px solid #ccc; margin-top: 5px; margin-right: 10px; padding: 2px; }
#headline  div.title { font-weight: bold; font: 2.4em Georgia; letter-spacing: -0.05em; display: block; padding-bottom: 5px; }
#headline div.meta { display: block; margin-top: -5px; padding-bottom: 2px; }
#headline p { padding-bottom: 15px; }
#headline p, #featured p { margin: 0; }



#latest { width: 75px; height: 21px; background: url(images/headline.gif) no-repeat; }








	
	
	
	
	
	
/* --------------------------------  TOP ----------------------------------- */	
	
#top { padding: 0; margin: 0; xborder: 1px solid red; }
	
	
	
	
	
	
	
	
/* --------------------------------  Middle ----------------------------------- */	

#cat1{ text-transform: uppercase; xcolor: #929090; }


#middle {
	text-transform: uppercase;
	width: 920px;
	background-color: #fff;
	float: right;
	padding: 8px 10px 5px 10px;
	margin: 0  0 10px 0;
	xborder: 1px solid green;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}








/* --------------------------------  CATEGORY ----------------------------------- */	


/* -------  This first one here controls just about everything in the category submenu: size, and position -------- */	
.category span.cat_title {
	text-transform: uppercase;
	margin: 0;
	font-weight: bold;
	font-size: 1.15em;
	letter-spacing: -0.05em;
	text-align: center;
}

.category { width: 164px; float: left; border-top: 8px solid #333; margin: 0px; padding: 2px 10px 2px 10px; xbackground-color: #fff; text-transform: uppercase; }
.category p { margin: 0; }
.category a { color: #A09FA0; display: block; xbackground-color: none; }
.category a:hover { xbackground-color: none; xcolor: #fff; text-decoration: none; }

/* -------  This controls the yellow sub headings above the Article Titles -------- */	
h3.cat_title, h3.cat_title a {
	color: #CFBC0C;
	letter-spacing: -0.05em;
	font-size: 0.65em;
	text-transform: uppercase;
}


/* -------  BORDERS ON TOP -------- */	
#cat-1, #cat-3, #cat-5  { border-top: 8px solid #929090; }
#cat-2, #cat-4 { border-top: 8px solid #F3E56F; }

/* -------  YELLOW-------- */	
#cat-1:hover, #cat-3:hover, #cat-5:hover { background-color: #F3E56F; color: #929090; xdisplay: block; xborder: 1px solid red; }

/* -------  GREY ------- */	
#cat-2:hover, #cat-4:hover { background-color: #929090; color: #F3E56F; xdisplay: block; xborder: 1px solid red; }

#cat-1:hover a, #cat-3:hover a, #cat-5:hover a { background-color: #F3E56F; color: #929090; xdisplay: block; xborder: 1px solid red; }
#cat-2:hover a, #cat-4:hover a { background-color: #929090; color: #F3E56F; xdisplay: block; xborder: 1px solid red; }


/*  
	Colors:

	Yellow: #F3E56F
	Gray1: #A09FA0
	Gray2: #929090
	Gray3: #716F70
	Gray background: #ECECEC

*/




















/* --------------------------------  Bottom ----------------------------------- */	

#bottom { width: 940px; xborder: 1px solid red; }

#front-list { width: 590px; background-color: #fff; padding: 10px 10px 10px 10px; font-size: 1.05em; line-height: 1.75em; float: left; }
#archive { padding-top: 15px; font-size: 1.05em; line-height: 1.75em; }
#front-list blockquote { padding: 0px 10px 0 10px; }
#front-list .title, #archive .title { font-weight: bold; font: 2.0em Georgia; letter-spacing: -0.05em; }
#front-list .clearfloat, #archive .clearfloat { padding-bottom: 10px; border-bottom: 1px dotted #ccc; margin-bottom: 10px; }
#front-list .spoiler, #archive .spoiler { display: block; margin-top: 3px; }
#front-list p, #archive p { margin: 0px; padding: 0px; }
.author { font-size: 0.8em; font-weight: bold; }
.meta { font-size: 0.8em; color: #333; }
.meta a { color: #333;}



/* Content Page*/

#content { width: 590px; background-color: #fff; padding: 10px; font-size: 1.05em; line-height: 1.75em; float: left; min-height: 400px; }
#content .breadcrumbs, #content .breadcrumbs a { font-weight: bold; color: #CFBC0C; }
#content h2.title {
	font: 2em Georgia;
	font-weight: bold;
	letter-spacing: -0.05em;
	border-bottom: 1px solid #ddd;
	border-top: 3px solid #ddd;
	padding: 5px 0px;
	color: #716F70
}

.post { font-size: 1.1em; line-height: 1.5em; }
.spoiler { font-size: 1.1em; line-height: 1.5em; }
.post p { margin: 0 0 12px 0; }
.post .clearfloat { border-bottom: 1px dotted #ccc; margin: 10px 0px; }
.post ul, .post ol, #front-list ul, #front-list ol { margin-bottom: 15px; }
.post ul li, #front-list ul li { list-style: square; margin-left: 30px; }
.post ol li, #front-list ol li { list-style: decimal; margin-left: 30px; }
.post ol li ul li, #front-list ol li ul li { list-style: square; margin-left: 20px; }
.post img, .post a img, #front-list img, #archive img { border: 1px solid #ccc; margin: 0 10px 5px 0; padding: 2px; }
.post .ads { margin-top: 10px; }

.entry { margin-top: 20px; }

#stats { margin-top: 0px; padding: 4px 0px; text-transform: uppercase; font: 0.8em Arial; display: block; }
#stats span { padding: 0px 20px 0px 0px; }
#stats span a:hover { background-color: none; }
#stats span a { color: #333; }
#stats img, #nav img { border: 0px; margin: 0px; padding: 0px; }
#tools { width: 590px; height: 25px; font-size: 0.95em; }
#tools a:hover { background-color: none; }
.navigation { padding: 5px 0px; text-align: Center; }





/* --------------------------------  SideBar ----------------------------------- */	

#sidebar {
	width: 320px;
	float: right;
	margin: 0px 0px 0px 0px;
	xpadding: 10px 0 0 0;
}
#sidebar h3 {
	font: 1.1em Arial;
	font-weight: bold;
	background-color: #716F70;
	color: #fff;
	margin: 10px 0px 5px 0px;
	padding: 3px 10px;
}



#sidebar-top {
	xmargin: 10px 0 0 0;
	width: 300px;
	background-color: #fff;
	xborder: 1px solid red;
	!important: ;
	padding: 10px 10px 10px 10px;
}



#sidebar-bottom {
	width: 300px;
	xfloat: right;
	padding: 10px 10px 10px 10px;
	background-color: #fff; !important:; 
}


#sidebar-middle {
	width: 300px;
	xfloat: right;margin: 0 auto;
}



#sidebar-bottom, #sidebar-middle { margin-top: 10px; }

#sidebar-left { width: 135px; padding: 0px 10px 10px 10px; float: left; background-color: #fff; }
#sidebar-right { width: 135px; padding: 0px 10px 10px 10px; float: right; background-color: #fff; }

#sidebar li { list-style: none; border-bottom: 1px dotted #ccc; display: block; padding: 2px 0px 2px 13px; background: url(images/sub.png) no-repeat 0 0px; }
#sidebar li ul li:last-child{ list-style: none; border-bottom: 0px dotted #ccc; display: block; padding: 2px 0px 0px 13px; background: url(images/sub.png) no-repeat 0 0px; }
#sidebar-ads {
	width: 300px;
	xfloat: right;
	margin: 10px 0 10px 0; 
	padding: 0 0 0px 0; 
	background-color: #E2E2E2;
	xborder: 1px solid blue;
}










/* Form Elements */

select { border: 1px solid #333; width: 100%; color: #A09FA0;  }
.field { padding: 2px; border: 1px solid #333; background-color: #fff; font-size: 1.0em;  color: #A09FA0; }

#s { padding: 1px; font-size: 1.0em; width: 150px; color: #A09FA0; }

#searchsubmit { padding-left: 5px; color: #A09FA0; }
#searchform { width: 194px; float: right; text-align: right; padding-top: 8px; margin-right: 10px;  }
#searchform textarea{ color: #A09FA0; }
.formfield{ color: #A09FA0; }


#commentform input { width: 140px; margin: 5px 5px 1px 0; }
#commentform textarea { width: 99%; margin-top: 5px; }



/* Comments*/

.commentlist cite { font-style: normal; margin-bottom: 4px; display: block; }	
.commentlist blockquote { background-color: #ededed; }
.commentlist li { padding: 10px 0px 10px 0px; list-style: none; margin-bottom: 3px; }
.commentlist li li { background: none; border: none; list-style: square; margin: 3px 0 3px 20px; padding: 3px 0; }
.commenttext { padding: 10px 10px 0px 10px; background-color: #f2f2f2; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; width: 495px; float: right; }
.commentlist cite strong { font-size: 1.1em; }
li.my_comment { background: #FFF; border: none; }
li.my_comment cite strong { font-size: 1.3em; color: #313228; }
#commentform small { background: #FFF; font-weight: bold; padding: 0; }
.commentmetadata { color: #4d4d4d; display: block; margin-top: 3px; text-align: right; font-size: 0.9em; }
.commentmetadata a, .commentmetadata a:visited { color: #959382; }
.commentlist small { background: #e9e9e9; }
.avatar { border: 1px solid #bbb; margin: 0px 10px 0px 0px; float: left; padding: 2px; width: 55px; height: 55px; }	
#comment { width: 590px; background-color: #fff; }





/* --------------------------------  Featured ----------------------------------- */		

#featured { width: 300px; background-color: #fff; float: right; padding: 10px 10px 9px 10px; }
#featured .clearfloat { margin-top: 7px; margin-bottom: 8px; }
#featured .info { margin-top: 5px; padding-top: 5px; float: right; width: 180px; }
#featured .title { font-weight: bold; }




/* Footer*/
#footer {
	margin: 0 auto 80px auto;
	width: 930px;
	font-size: 0.8em;
	padding-top: 10px;
	padding-bottom: 10px;
}

#front-popular {
	font-size: 0.7em;
	color: #fff;
	width: 940px;
	background: #2c2c2c url(images/bottombar.png) bottom no-repeat;
	margin: 0 auto 10px auto;
	padding: 10px;
}
#front-popular h3, #front-list .cat_title, #archive .cat_title { text-transform: lowercase; margin: 0; font-weight: bold; font-size: 1.5em; letter-spacing: -0.05em; }
#front-popular h3 { color: #fff; }


#recentpost, #mostcommented { width: 280px; float: left; padding: 10px; border: 1px solid #fff; }
#mostcommented { margin-left: 17px; }
#recent_comments { width: 280px; float: right; padding: 10px; border: 1px solid #fff; }
#recentpost a, #mostcommented a, #recent_comments a { color: #fff; }
#recentpost ul, #mostcommented ul, #recent_comments ul { margin-top: 5px; }
#recentpost ul li, #mostcommented ul li, #recent_comments ul li { list-style: none; border-top: 1px dotted #fff; padding: 5px; display: block; }
#recentpost ul li:hover, #mostcommented ul li:hover, #recent_comments ul li:hover { background-color: #716F70; color: #fff; }
#recentpost ul li:first-child, #mostcommented ul li:first-child, #recent_comments ul li:first-child { border-top: 0px dotted #fff; }