/*  
Theme Name: Wayang
Theme URI: 
Description: My first Wordpress Themes. I also converted this theme into Expression Engine
Version: 1.2 Beta
Author: Arman Adhitama
Author URI: 

*/

body {
	background:url(images/bg.gif) repeat left top;
	margin:0;font:13px georgia;
	letter-spacing:1px;
	text-align:center}
	
form {
	margin:0px;
	padding:0px}
	
img,
img a {
	border:0}
	
li {
	list-style:none;
	margin:0;
	padding:0}
	
h2 {
	font-size:125%}
	
h3 a {
	font-size:40px}

/* main container */
#paperindex {
	width:780px;
	background:url(images/bgindex.jpg) no-repeat 0 50px;
	margin:0 auto}

/* menu */
#header {
	background:url(images/topline.gif) no-repeat top center;
	width:780px;
	height:50px;
	margin:0px auto}

#nav {
	margin:15px 0 0 50px;
	padding:0 0 20px 0;
	float:left}
	
#nav li {
        list-style:none;
	display:inline;
	margin-left:45px;
	font:13px georgia;
	font-weight:bold;
	letter-spacing:2px;
	padding-bottom:20px;
	text-transform:uppercase}

.page_item a,
.current_page_item a {
	text-decoration:none;
	color:#4b4b4b}
	
.current_page_item a:visited {
	color:#990000;
	background:url(images/underline.gif) no-repeat 0 15px;
	padding-bottom:20px}
	
.page_item a:active {
	color:#990000;
	background:url(images/underline.gif) no-repeat 0 15px;
	padding-bottom:20px}
	
.page_item a:hover {
	color:#990000;
	background:url(images/underline.gif) no-repeat 0 15px;
	padding-bottom:20px}




#content {
	margin-top:230px !important;
	margin-top:250px;
	width:780px}

#leftcontent {
	float:left;
	width:250px;
	margin:450px 0 50px 20px;
	text-align:left}

#leftcontent #title,
#leftcontent #title a {
	width:250px;
	border-bottom:2px solid #666600;
	margin:50px 0 10px 0;
	padding-bottom:5px;
	font:14px georgia;
	font-weight:bold;
	letter-spacing:2px;
	color:#666600}
	
#leftcontent li {
	margin-left:-30px}
	
#leftcontent ul {
	margin-top:-5px}

#maincontent {
	width:350px;
	padding-bottom:50px;
	float:left;
	display:inline;
	margin-left:81px !important;
	margin-left:63px}
	
#maincontent .header {
	margin-bottom:20px;
	text-align:right;
	font:14px georgia;
	font-weight:bold;
	letter-spacing:2px;
	color:#666600;
	text-transform:uppercase}
	
#maincontent a,
#leftcontent a,
.link a,
#blogmain .tags a {
	text-decoration:none;
	font-size:11px;
	color:#559600;
	text-transform:uppercase}
	
#maincontent a:hover,
#leftcontent a:hover,
.link a:hover,
#blogmain .tags a:hover {
	color:#000}
	
#maincontent .input {
	border:#999 1px solid;
	padding-left:2px;
	font-family:trebuchet ms, verdana, times new roman;
	width:250px !important;
	margin-top:10px}
	
#maincontent .button,
#leftcontent .button,
#admin .button {
	margin-top:27px}
	
#maincontent .button:hover,
#leftcontent .button:hover {
	margin:29px 0 -2px 0}

#works, #indexworks {
	width:350px;
	height:115px}
	
#works {
	padding-top:14px;
	margin-bottom:15px}
	
#works:hover,
#indexworks {
	background:url(images/works.gif) no-repeat}
	
#works:hover,
#indexworks:hover {
	background:url(images/works2.png) no-repeat}
	
#images,
#indeximages {
	width:325px;
	height:102px;
	margin:0px auto;
	background-position:0 -150px;
	background-repeat:no-repeat;
	margin-bottom:14px}
	
#indexworks {
	padding-top:14px}
	
#workimages {
	width:325px;
	height:325px;
	margin:0px auto;
	background-repeat:no-repeat;
	background-position:0 0;
	margin-bottom:25px}
	
#workbrief {
	font-size:11px;
	width:325px;
	text-align:left;
	margin:0 auto}
	
#workbrief strong {
	font-size:12px;
	color:#990000}
	
#workbrief a {
	font-size:11px}

#formtitle {margin-bottom:-10px;font:11px arial;margin-top:25px}

.red {
	color:#FF0000}

.link,
.link a {
	margin-top:50px}

.date {
	font-size:11px;
	margin:-20px 0 25px 0;
	text-align:right}

.post-meta {
	font-variant:small-caps;
	color:maroon;
	text-align:left;
	margin:0;
	padding:0}
	
.post-meta-key {
	color:#559600;
	font-weight:bold;
	font-size:110%}

/* footer */
#footer {
	clear:both;
	padding:0;
	width:780px;
	background:url(images/footer.gif) 0 10px no-repeat}

#copyright {
	font-size:12px;
	font-family:trebuchet ms, verdana, times new roman;
	color:#999;
	width:780px;
	text-align:center}
	
#copyright a {
	text-decoration:none;
	font-size:10px;
	color:#559600}
	
#copyright a:hover {
	color:#666}

#links {
	margin:32px 0 0 60px !important;
	margin:32px 0 0 30px;
	float:left;
	width:325px;
	text-align:left;
	font-size:11px}
	
#links .title,
#advert .title {
	font-family:times new roman;
	color:#4b4b4b;
	font-size:18px;
	font-weight:900;
	letter-spacing:3px;
	padding-bottom:10px}
	
#linktitle,
#linktitle a {
	letter-spacing:2px;
	font-weight:600;
	color:#CC0000;
	text-decoration:none}
	
#linktitle a:hover {
	color:#660000}
	
#linkurl,
#linkurl a {
	font-size:10px;
	margin-top:-5px;
	letter-spacing:2px;
	text-transform:lowercase;
	color:#666666;
	text-decoration:none}
	
#linkurl a:hover {
	color:#000}
	
#advert li {
	margin:0;
	float:left;
	display:inline;
	padding-bottom:10px !important;
	padding-bottom:7px}
	
#smalllinks {
	margin-bottom:10px}
	
#smalllinks a {
	text-decoration:none;
	color:#559600}
	
#smalllinks a:hover {
	color:#666}

#advert {
	float:left;
	margin:32px 0 0 0;
	width:365px;
	text-align:justify;
	font-size:11px}
	
#clear {
	clear:both;
	width:780px}
	
#admin {
	width:368px;
	margin:auto;
	margin-top:100px;
	background:url(images/bgadmin.gif) no-repeat;
	height:200px;
	padding-top:175px;
	padding-left:10px}
	
#admin .header {
	margin-bottom:10px;
	text-align:center;
	font-weight:bold;
	font-family:times new roman;
	font-size:14px;
	letter-spacing:2px;
	color:#990000;
	text-transform:uppercase}
	
#admin #formtitle {
	margin-bottom:-10px;
	font:11px arial;
	margin-top:10px}
	
#admin .input {
	border:#999 1px solid;
	padding-left:2px;
	font-family:trebuchet ms, verdana, times new roman;
	width:150px!important;
	margin-top:10px}
	
#admin .button {
	margin-top:10px}
	
#admin a {
	text-transform:uppercase;
	text-decoration:none;
	color:#990000}
	
#admin a:hover {
	color:#000;
	border-bottom:1px dashed #990000}
	
#admin p {
	margin-top:0}

.linkcat ul {
	padding:0;
	margin:0}
.linkcat h2 {
	display:none}

/* BLOG */


body #blog {
	margin:0;
	padding:0;
	background:url(images/bg.gif)}
	
#blog code {
	color:#333}

#blog #top {
	margin:0;
	height:180px;
	width:100%;
	min-width:975px;
	background:url(images/bgblog.gif)}

#blog #topcontent {
	margin:0 auto;
	width:975px}

#blog #poet {
	margin:35px 0 0 650px !important;
	margin:25px 0 0 0;
	width:300px;
	font:12px georgia;
	font-style:italic;
	text-align:right;
	z-index:1;
	position:absolute}
	
#poet #title a {
	font-variant:small-caps;
	color:#990000;
	font-style:normal;
	font-weight:bold;
	font-size:15px;
	margin:0;
	padding:0;
	text-decoration:none}

#blog #twitter_update_list li a {
	display:none}
	
#blog #twitter_update_list li {
	padding:0;
	margin:0}


#blog #menu {
	margin-top:0;
	padding-bottom:20px;
	padding-top:15px}
	
#blog #menu li {
	list-style:none;
	display:inline;
	margin-left:50px;
	font:13px "times new roman";
	font-weight:900;
	letter-spacing:2px;
	padding-bottom:20px}

#blog #menu li a {
	text-decoration:none;
	color:#4b4b4b}
	
#blog #menu li a:hover,
#blog #menu .active {
	color:#990000;
	background:url(images/underline2.gif) no-repeat 0 15px;
	padding-bottom:20px}

#blog #maincontainer {
	margin:0 auto;
	clear:both;
	width:975px}
	
#blog #left {
	width:325px;
	float:left}
	
#blog #center {
	width:325px;
	float:left}
	
#blog #right {
	width:325px;
	float:left}
	
#blog #limiter {
	width:300px;
	margin:0 auto;
	height:13px;
	background:url(images/limiterblog.gif) no-repeat}
	
#blog .category {font:17px georgia;text-align:center;font-weight:bold;letter-spacing:1px}
#blog .catdesc {font:12px georgia;width:290px;margin:25px auto 5px auto;text-align:left;font-style:italic}

#blog #left #body,
#blog #center #body,
#blog #right #body,
#blog #right #bodycomment {
	width:285px;
	margin:0 auto;
	font:14px georgia;
	text-align:justify;
	letter-spacing:1px}
	
#singlecomment {
	border:1px dashed #fff;
	margin:10px 0 0 0;
	padding:0}
	
#singcmt {
	margin:5px 5px -8px 5px;
	background:url(images/comment_guess.png) left top no-repeat}
	
#blog #body .title {
text-align:center;
font-weight:bold;
margin:25px 0 0 0;
font-variant:small-caps;
color:#660000;
text-transform:capitalize}

#blog #body .title1 a {
	text-align:center;
	font-weight:bold;
	margin:25px 0 0 0;
	font-variant:small-caps;
	color:#660000;
	text-transform:capitalize}
	
#blog #body .date {
	text-align:center;
	padding:0}

#blog #clear {
	clear:both;
	width:950px;
	margin:0 auto 25px auto;
	padding-top:100px}


#blog #copyright {
	width:950px;
	margin:150px auto 0 auto !important;
	margin:0 auto;
	text-align:center;
	background:url(images/copyblog.gif);
	clear:both;
	font:12px georgia;
	padding:25px 0 8px 0}
	
#blog #body a,
#blog #copyright a {
	color:#559600;
	text-decoration:none;
	border-bottom:1px dashed}
	
#blog #body a:hover,
#blog #copyright a:hover,
#blog #bodycomment #name a:hover {
	border-bottom:0}

#blog #detailblog {
	width:650px;
	float:left}
	
#blog #detailblog #body {
	width:620px;
	margin:0 auto;
	font:14px georgia;
	text-align:left;
	letter-spacing:1px}
	
#blog #detailblog ol,
#blog #body ol {
	margin:0px}
	
#blog #body ol {
	margin-left:-20px;
	padding-top:20px}
	
#blog #body li {
	list-style:decimal;
	padding:25px 0 0 0}

#commentform {width:300px;margin:0 auto 50px auto;text-align:center}
#formtitle {font:11px arial;text-align:left;width:285px;margin:25px auto -10px auto}
#right .input {border:#999 1px solid;padding-left:2px;font-family:trebuchet ms, verdana, times new roman;width:285px!important;margin-top:10px}
#right .button {margin-top:27px}
#right .button:hover {margin:29px 0 -2px 0}
.red {color:#FF0000}
#bodycomment #name a {color:#990000;text-decoration:none;border-bottom:1px dashed;font-weight:bold}
#bodycomment a {color:#cc0000;text-decoration:none}
#bodycomment ol {margin-top:50px}
#bodycomment li {padding-bottom:25px}

#link, #link a {list-style:none;margin:0;padding:0;letter-spacing:2px;font-weight:600;color:#CC0000;text-decoration:none;font:12px georgia;font-weight:bold}
#link a:hover {color:#660000}
#smalllinks a {text-decoration:none;color:#559600}
#smalllinks a:hover {color:#666}

#bookmarks {background:url(images/bookmarks.png);height:66px;width:650px;margin:25px 0 50px 0}
#bookmarks ul {margin:0 auto;padding:23px;list-style:none;width:360px;text-align:center}
#bookmarks li, bookmarks li a {float:left;margin:0 10px}

.readnextbg {width:300px;margin:0 auto;background:url(images/limiterblog.gif) no-repeat;background-position:bottom}
.readnextbg a {background:url(images/bg.gif);padding:0 5px;margin:0;text-decoration:none;text-transform:uppercase;color:#990000}
.readnextbg a:hover {color:#666;border-bottom:1px dashed}
.commenttitle {text-align:right;font-variant:small-caps;font-weight:bold;color:#990000;width:285px;margin:0 auto}

#footer-sidebar {

  display:block;

  height: 260px;

}

#footer-sidebar1 {

  float: left;

  width: 300px;

  margin-right:20px;

  }

#footer-sidebar2 {

  float: left;

  width: 300px;

  margin-right:20px;

 }

#footer-sidebar3 {

  float: left;

  width: 300px;

 }
