body {
  background: #0055af url("../images/pingsiki/bg_body2.gif") repeat-y 50% 0px fixed;
  color: #333;
  font: 0.7em/180% "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
  margin: 0;
  margin-left: 1px;
  padding: 0;
  text-align: center; /* be nice to IE */
}

a {
  color: #4b5ba2;
  text-decoration: none;
}

a:hover {
  color: #454B95;
}

a:active {
  color: #91b622;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

cite {
  font-style: italic;
}

dt {
  float: left;
  font-weight: bold;
}

img {
  border: none;
}

ins {
  color: #91b622;
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

label {
  display: block;
}

pre, code, kbd, sampl {
  background: #F2F4F9;
  color: #4b5ba2;
  cursor: text;
  font-family: "Monaco", "Courier New", Courier, monospace;
  padding: 0.2em;
}

pre code {
  display: block;
  padding: 0.5em 0.7em;
  white-space: normal;
}

/******* Basic Layout Components *******/

#wrapper {
  padding: 0 8px;
  margin: 0 auto;
  overflow: hidden;
  text-align: left;
  width: 653px;
}

#header {
  background: transparent url("../images/pingsiki/bg_header.jpg") no-repeat 0px 0px;
  height: 137px;
  position: relative;
  top: 0em;
  width: 653px;
}

#pagebody {
  border-bottom: 1px solid #fff;
  float: left;
  left: 0;
  margin-top: -11px;
  position: relative;
}

#maincontent {
  background: #fff;
  float: left;
  overflow: hidden;
  padding-bottom: 2em;
  position: relative;
  top: 0px;
  width: 408px;
  border-right: 1px solid #fff;
}
/* paragraf */

#maincontent .paragrafutama{
	padding: 15px 35px 15px 25px;
	float: left; 
	width: 370px;
  font-family: georgia, verdana, sans-serif;
	font-size: 13px; 
  
}

#maincontent .paragrafutama ul {
	list-style: none; 
	margin: 5px 30px 0px 15px;
	padding: 0 0 10px 0;
	}
	
#maincontent .paragrafutama li {
	background: url(../images/pingsiki/bullet2.gif) no-repeat 0px 2px;
	font-family: georgia, arial, sans-serif;
	font-size: 13px;
	color: #004A94;
	margin: 0px 20px 4px 10px;
	padding: 0 0 0 20px;
	line-height: 15px;
	}
	
#maincontent .paragrafutama .quote {
	color: #4081C3; 
	float: right; 
	width: 200px; 
	font-family: "Trebuchet MS", arial, georgia, verdana, sans-serif;
	font-size: 16px; 
	line-height: 24px; 
	text-align: left; 
	margin: 0 10px 10px 0; 
	position: relative; 
	left: 10px;
	}

#maincontent .paragrafutama em.cquote {font-size: 11px; font-weight: normal; color: #1E4B2E;}

	
#sidebar {
  clear: none;
  left: 409px;
  width: 244px;
  position: absolute;
  top: -28px;
}


/******* Header Components *******/

#skip { /* hide link from visual browsers */
  position: absolute;
  left: -9999px;
}

#header p {
  display: none;
}

#header #logo {
  display: block;
  top: 26px;
  left: 20px;
  position: absolute;
}

#logo img {
  display: none;
}

#logo a {
  display: block;
  width: 230px;
  height: 46px;
}

#mainnavi {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 17px;
  position: absolute;
  top: 101px;
  width: 450px;
  float: left;
}

#mainnavi li {
  display: block;
  float: left;
  padding: 5px 0.7em;
}

#mainnavi li a {
  background: transparent url("../images/pingsiki/bg_navi2.gif") no-repeat 50% 40px;
  color: #8095D1;
  font: 100% normal "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, sans-serif;
  padding: 0;
  padding-bottom: 7px;
  float: left;
  display: block;
}

#mainnavi li a:hover {
  background-position: 50% -35px;
}

#mainnavi li a:active {
  color: #fff;
}

#index #mainnavi #thome a,
#about #mainnavi #tabout a,
#services #mainnavi #tservices a,
#portfolio #mainnavi #tportfolio a,
#webdesign #mainnavi #twebdesign a,
#contact #mainnavi #tcontact a,
#resume #mainnavi #tresume a{
  background-position: 50% 16px;
  color: #fff;
}

/******* Search Components *******/

#search {
  float: right;
  position: relative;
  top: -92px;
  padding-right: 30px;
}

#search label {
  position: absolute;
  left: -9999px;
}

#search #suchbegriff {
  background: #fff;
  color: #999;
  padding: 2px;
  width: 180px;
}

#search input {
  background: #c9e972;
  border: 1px solid #8FB309;
  color: #6d990f;
}

#search .searchButton {
  position: absolute;
  left: -9999px;
}


/******* Main Content Components *******/

#maincontent h1 {
  font-size: 140%;
  font-weight: normal;
  margin-bottom: -0.6em;
}

#maincontent h1 span {
  font-size: 65%;
  font-weight: normal;
  color: #91b622;
  display: block;
}

.post-title {
  margin:.25em 0 0;
  padding:0 0 1px;
  font-size:140%;
  font-weight:normal;
  line-height:1.2em;
  color:#336699;
  }

h3 {
  margin:1.5em 0 .75em;
	/*font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;*/
  font: 88%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; 
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#004f9d;
  }


#maincontent .section {
  background: transparent url("../images/pingsiki/bg_section.gif") no-repeat 25px 90%;
  padding: 15px 25px;
  padding-left: 180px;
}

#maincontent .section {
  padding-left: 25px;
}

#wrapper #maincontent .section h1,
#wrapper #maincontent .section h1 a,
#wrapper #maincontent .section a {
  color: #9AA9D4;
  font-weight: bold;
}

#wrapper #maincontent .section p a {
  font-weight: normal;
}

#wrapper #maincontent .section h1 {
  font-size: 140%;
  font-weight: bold;
  margin-bottom: 0.1em;
  padding-top: 0.2em;
}

#wrapper #maincontent .section h1 {
  font-size: 150%;
}

#wrapper #maincontent .section a:hover {
  text-decoration: underline;
}

#wrapper #maincontent .section h1 span {
  border-left: 1px solid #91b622;
  display: inline;
  font-size: 100%;
  margin-left: 5px;
  padding-left: 10px;
}

#maincontent .section p {
  float: right;
  margin-top: -1.7em;
  padding-right: 10px;
}


    
/******* Ganti2 Gambar  *******/

#maincontent #gbrganti {
  border-bottom: 1px solid #dce0e5;
  height: 225px;
  position: relative;
}

#maincontent #gbrganti p,
#maincontent #gbrganti h1 a {
  color: #F1F4FA;
}

#gbrganti p a {
  background: transparent no-repeat 100% 100%;
  border: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 409px;
  height: 225px;
  text-indent: -9999px;
  color: #F1F4FA;
}

#gbrganti #gbrganti00 {
  background-image: url("../images/pingsiki/welcome_banner2.jpg");
}

#gbrganti #gbrganti01 {
  background-image: url("../images/pingsiki/welcome_banner.jpg");
}

#gbrganti #gbrganti02 {
  background-image: url("../images/pingsiki/teaser_02.png");
}

#maincontent #gbrganti img {
  display: none;
}

/******* Entry Components *******/

#maincontent .journalentry,
#maincontent .searchentry {
  padding: 15px 35px 15px 25px;
}

#wrapper #maincontent .last {
  border: none;
  padding-bottom: 0;
}

#maincontent .content {
  border: none;
  padding: 25px;
}

#wrapper #maincontent h1 {
  color: #4b5ba2;
}

#maincontent .content h2,
#maincontent .content h3 {
  border-bottom: 1px solid #EAF0CA;
  font-size: 120%;
  color: #91b622;
  margin-top: 1.3em;
  margin-bottom: -0.4em;
  padding-bottom: 0.4em;
}

#maincontent h5 {
  font-size: 120%;
	font-style: italic;
  color: #91b622;
  margin-top: 1.5em;
  margin-bottom: -0.4em;
  padding-bottom: 1.4em;
}

#maincontent .content a {
  text-decoration: underline;
}

#maincontent .para {
  margin: 0;
  padding: 25px;
  padding-top: 0;
}

html body #maincontent p.comment {
  clear: both;
}

#maincontent .comment a,
#maincontent p.comment {
  color: #4b5ba2;
  margin: 0;
  margin-top: -0.8em;
}

#maincontent .comment a:hover {
  color: #454B95;
}

#maincontent .comment a:active {
  color: #91b622;
}

.more {
  background: transparent url("../images/pingsiki/bg_more.gif") no-repeat 0px 50%;
  border-bottom: 1px dotted #4b5ba2;
  padding-left: 10px;
  white-space: nowrap;
  overflow: hidden;
}

.fresh {
 background: transparent url("../images/pingsiki/bg_new.gif") no-repeat 97% 0px;
}

#user, #email, #url, #website {
  width: 70%;
}

label {
  display: block;
  margin-bottom: 0.2em;
  margin-top: 1em;
}

#comments p a {
  text-decoration: underline;
}

.comment {
  color: #867964;
  margin-top: -0.8em;
}

.comment img {
  margin-bottom: -2px;
}

.comment a, #comments h4 a {
  font-weight: normal;
}

#maincontent #comments h4 a {
  border-bottom: 1px dotted inherit;
}


/******* Sidebar Components *******/

#sidebar h2 {
  background: #96c5a7 url("../images/pingsiki/bg_sidebar2.gif") repeat-x 0px 0px;
  color: #fff;
  letter-spacing: 0.1em;
  font-size: 120%;
  font-weight: bold;
  line-height: 29px;
  margin: 0;
  padding: 0em 15px;
  position: relative;
  height: 28px;
}

#sidebar p,
#sidebar ul,
#sidebar dl {
  color: #003737;
  list-style: none;
  margin: 0;
  padding: 0;
}

#sidebar p {
  padding: 10px 15px;
}

#sidebar .more {
  border-bottom-color: #4b5ba2;
}

ul.recent li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #96c5a7;
  font-family: "Tahoma CE", Tahoma, "Verdana CE", Verdana, "Arial CE", Arial, sans-serif; 
	font-size: 0.8em;
	line-height: 150%;
}

ul.recent li a {
  color: #003737; 
  display: block;
  padding: 12px 17px; /*  12px 10px 10px 17px; 17 renggang jarak antar li */
}

ul.recent li a:hover {
  color: #004f9d;
  background: #aad3b9;
}


ul.recent img {
  float: left;
  background: white;
  border: 1px solid #a4a4a4;
  padding: 2px;
  margin-right: 5px;
}

#sidebar .sidearchives ul.syndication li { background: transparent url(../images/pingsiki/newspaper.gif) 3px 2px no-repeat; }
#sidebar .sidearchives ul.calendar li { background: transparent url(../images/pingsiki/calendar.gif) 3px 2px no-repeat; }
#sidebar .sidearchives ul.forum li { background: transparent url(../images/pingsiki/forum_icon.gif) 3px 2px no-repeat; }

#sidebar .sidearchives ul {
        display: block;
        margin: 11px;
        padding: 0 0 5px 0;
        list-style: none; 
}

#sidebar .sidearchives ul li {
				font: normal 12px/1.3em "Lucida Grande", "Verdana", sans-serif;
				font-size: 1em;
}

#sidebar .sidearchives ul li a {
        text-decoration: none;
        /*border-bottom: 1px dotted #555; #6d990f*/
				color: #003737;
  			display: block;
				padding: 2px 25px;
				min-height: 10px;
  			/*_height: 10px;*/ 
}
        
#sidebar .sidearchives ul.forum li a:hover {
        border-bottom: 1px solid #000;
				color: #004f9d;
}

#sidebar .sidearchives ul.syndication li a:hover {
        border-bottom: 1px solid #000;
				color: #004f9d;
}
/******* Sidenotes Components *******/

#sidebar dl.sidenotes {
  margin: 0;
  margin-top: 1em;
  padding: 0;
	font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", verdana, arial, helvetica, sans-serif;
  
}
#sidebar dl.sidenotes dt {
  font-weight: bold;
	margin: 0;
  padding: 0 0 0 15px;
}

#sidebar dl.sidenotes dt a {
  /*background: transparent url("../images/pingsiki/bg_sidenotes.gif") no-repeat 100% 2px;*/
  color: #003737; /*#6d990f*/
  margin-right: 4px;
  padding-right: 13px;
}

#sidebar dl.sidenotes dt a:hover {
  color: #6A881E;
  border-bottom: 1px dotted inherit;
}

#sidebar dl.sidenotes dt a:active {
  background-position: 100% -28px;
  color: #fff;
}

#sidebar dl.sidenotes dd {
  margin: 0;
  padding: 0 15px;
  padding-bottom: 0.7em;
  margin-bottom: 0.7em;
	/*font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", verdana, arial, helvetica, sans-serif; */
}

#sidebar dl.sidenotes dd.lastchild {
  border-bottom: none;
}

#sidebar dl.menukiri ul li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #96c5a7;
	font-family: "Tahoma CE", Tahoma, "Verdana CE", Verdana, "Arial CE", Arial, sans-serif;
	font-size: 1em;
}
/*------------------------------------*/
#sidebar dl.menukiri ul li a {
  color: #003737;
  display: block;
  padding: 4px 15px;
	min-height: 10px;
  /*_height: 10px; */
  text-decoration: none;
}

#sidebar dl.menukiri ul > li.lastchild {
  border-bottom: none;
}

#sidebar dl.menukiri ul li a:hover {
  background: #aad3b9;
}

#sidebar dl.menukiri ul li a:active {
  background: #b7e254;
  color: #fff;
}

/******* Footer Components *******/

#footer {
  background: #d5f0ec;
  clear: both;
  float: left;
  width: 100%;
  overflow: visible;
  padding: 10px 0;
  padding-bottom: 20px;
  position: relative;
  width: 409px;
}

#footer h4 {
  color: #8281A7;
  margin-top: 1em;
  padding: 0.2em 20px;
  text-transform: uppercase;
	font:100%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
  letter-spacing:.1em;
}

 #footer h4 a {
  color: #8281A7;
}

#footer p {
  color: #8281A7;
  margin: 0;
  padding: 0 20px;
  float: left;
}

#footer p a {
  border-bottom: 1px dotted #7A81BE;
}

#footer ul {
  clear: both;
  list-style: none;
  margin: 0 20px;
  padding: 0.5em 0;
  padding-bottom: 2em;
}

#wrapper #footer ul li {
  float: left;
  line-height: 1em;
  padding: 0;
  margin: 0;
  margin-right: 0.5em;
  padding-right: 0.5em;
}

#wrapper #footer ul li.lastchild {
  border-right: none;
}

#footer li a {
  background: transparent url("../images/pingsiki/button_xhtml.png") no-repeat 0px 0px;
  height: 17px;
  display: block;
  float: left;
}

#footer li a:hover {
  background-position: 0px -117px;
}

#footer li a span {
  text-indent: -9999px;
  display: block;
}

#footer .xhtml {
  width: 58px;
}

#footer .css {
  background-image: url("../images/pingsiki/button_css.png");
  width: 46px;
}

#footer .accessibility {
  background-image: url("../images/pingsiki/button_508.png");
  width: 46px;
}

/******* Paging Components *******/

ul#paging {
  padding: 20px 5px 20px 20px;
  margin: 0;
}

ul#paging li {
  background: transparent;
  display: inline;
  margin: 0;
  padding: 0;
}

#maincontent ul#paging li a {
  background: transparent;
  margin: 0;
  padding: 5px;
}

#maincontent ul#paging li a:hover {
  background: transparent;
}

ul#paging li.selected {
  background: #A6C73C;
  color: #fff;
  font-weight: bold;
  margin: 0;
  padding: 4px;
}

/******* Search Results *******/

.searchcat {
  color: #91b622;
  font-size: 140%;
  padding: 15px 25px;
}
.searchcat span {
  border-bottom: 1px solid #E5E9F4;
  font-size: 65%;
  padding-bottom: 1.5em;
  margin-bottom: -1.5em;
}


/******* Archive Components *******/
.archive,
.archive ul {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 25px;
}
.archive ul {
  margin: -1.45em 25px 0.8em 0;
  padding: 0 0 0.7em 4em;
  border-bottom: 1px solid #E5E9F4;
}
.archive > li.lastchild ul {
  border: none;
}
.archive li {
  display: inline;
  color: #91b622;
  font-size: 120%;
  margin-right: 0.2em;
}
.archive li li {
  font-size: 0.8em;
}

/*************** Resources CSS ***************/

.latestblock {
	padding: 11px 11px 0px 1px;
  margin: 0 0px 11px 10px; 
}
						
.post h5 {
  padding: 0;
  height: 25px;
  text-indent: 7px;
  margin: 0;
  font: bold 11px/25px "Trebuchet MS", "Verdana", sans-serif;
  background: #cee0da url(../images/pingsiki/post_head.gif) top left no-repeat;
  color: #451900; 
}
					
/* Each section in the .latestblock: the latest entry and the previous ones */
.post {
  margin: 0 5px 5px 5px;
	border-bottom: 1px dotted #96c5a7;
  padding-bottom: 10px; 
  font: normal 12px "Trebuchet MS", "Lucida Grande", "Verdana", sans-serif;
}
        
/* Favicon div floated left */
.post .favicon {
  float: left;
	margin: 0px 4px 0 0;
	
	/*
  width: 20px;
  height: 20px;
  
	padding: 1px;
  background: #fff;
  
  border: 1px solid #ccc; 
	*/
}

.post .favicon a, .post .favicon a img {
	overflow: hidden; border: 0 !important; padding: 0;
}
                
/* Text div floated as well to account for longer line-endings not wrapping
               around and underneath the favicon */
.post .text {
  padding: 0px 0px 0px 0px;
  margin: 6px 0px 0px 0px; 
}

.post .text a {
  text-decoration: none;
  color: #276161; 
}
		
.post .text a:hover { 
	color: #008080;  
}

/* The hidden-until-triggered colapse section */
.post .colapse {
  display: none;
  clear: both;
  padding: 0;
  margin: 5px 10px 3px 26px;
	width: 188px;
}
  
/* Show/hide button section*/
.post .showhide {
  float: right;
  height: 12px;
  width: 8px;
  margin: 0 0 0 10px; 
}
 
.post .showhide a {
  height: 13px;
  width: 8px;
  display: block;
  background: transparent url(../images/pingsiki/show_post.png) top left no-repeat;
  padding: 0;
  margin: 0; 
}

.post .showhide a:hover {
  background-position: bottom left; 
}
			
.post .showhide a img {
  display: none; 
}
            				
.post .colapse ul {
  display: block;
	padding: 11px 0 1px 0;
  margin: 0;
  list-style: none; 
	background: #e6eaf0 url(../images/pingsiki/post_footer.gif) bottom left no-repeat;
}
  
.post .colapse ul li {
  padding: 0 0 3px 17px;
  margin: 0px 5px .4em 10px; 
  font: normal 10px/1.5em "Lucida Grande", "Verdana", sans-serif; 
	background: transparent url(../images/pingsiki/red_arrow.gif) 2px 2px no-repeat;
}
  
.post .colapse ul li a {
  text-decoration: none;
  color: #008080; 
}
            
.post .colapse ul li a:hover { 
	color: #000; 
}

/*------image ----*/
img.postpic {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
	border: 1px solid #ddd;
	background: #fff;
	padding: 3px;
}

/* Form Properties -----------------------------------------------------------------------------------------------*/

fieldset {border: none; margin: 0; padding: 0;}
input {border: 1px solid #80ABD7; background: #E6EFF7; font-family: arial, verdana, sans-serif; font-size: 11px; color: #002C57; padding: 3px;}
input.submit {width: 97px; height: 33px; border: 0; padding: 0.25em; background: #E4E9EE url(../images/pingsiki/submitoff.gif) no-repeat;
			  color: #0B4E92; font-size: 11px; font-weight: bold; font-family: arial, Verdana, Helvetica, Arial, sans-serif; cursor: pointer;}
input.submit:active, input.submit:hover	{background: #E4E9EE url(../images/pingsiki/submiton.gif) no-repeat;}
textarea {border: 1px solid #80ABD7; background: #E6EFF7; font-family: arial, verdana, sans-serif; font-size: 11px; color: #002C57; padding: 4px;}
label {font-size: 12px; color: #002C57;}
textarea:focus, select:focus, input:focus {background:#F7F7F7;}