* {
  margin: 0;
  padding: 0;
}
img {
  border: 0;
}


html body {
    background: url(images/bg.jpg) repeat;
    text-align: center;
    font-family: Trebuchet;

  }
  #mainwrap {
    width: 960px;
    background: #fff;
    text-align: left;
    margin: 0 auto;
    font-size: 14px;
  }
  #header {
    width: 960px;
    height: 200px;
  }
  .logo {
    width: 292px;
    height: 96px;
    border: 1px solid #fff;
    background: url(images/logo.png) no-repeat;
  }
  ul#nav {
    margin: 0 auto;
    padding: 0;
    width: 940px;
    height: 42px;
    background: url(images/nav1.jpg) repeat-x;

  }
  ul#nav li {
    display: inline;
  }
  ul#nav li a {
    float: left;
    display: block;
    padding: 12px 10px 10px 10px;
    text-decoration: none;
    font-family:Arial;
    color: #fff;
    font-weight: ;
    margin-top: 1px;
  }
  ul#nav li a:hover, ul#nav li.current_page_item a {
    background: url(images/menuhover.jpg) repeat-x;
  }


  ul#nav2 {
    margin: 0 auto;
    padding: 0;
    width: 940px;
    height: 56px;
    background: url(images/nav2.jpg) repeat-x;
  }
  ul#nav2 li {
    display: inline;
  }
  ul#nav2 li a {
    display: block;
    float: left;
    padding: 15px  10px;
    text-decoration: none;
    color: #000;
    font-family:Arial;
    font-weight: ;
    font-size: 14px;
  }
  

 ul#nav2 li a:hover, ul#nav2 li.current_category_item a {
    background: url(images/menuhover2.jpg) repeat-x;
    color: #fff;
  }


    display: block;
    float: left;
    padding: 15px  10px;
    text-decoration: none;
    color: #fff;
    font-weight: ;
    font-size: 14px;

  }


  #contentwrap {
  }
  #featuredc {
    position: relative;
    left: 10px;
  }


  #featured-posts-wrapper {
    margin-bottom: 30px;
    border: 1px solid #ccc;
    padding: 1px;
    width: 600px;
  }
   h2 a {
    margin-left: 80px;
  }

  #content {
    width: 628px;
    float: left;
  }
  #sidebar {
    width: 310px;
    float: left;
    margin-left: 10px;
font-family:Arial;
  }
  #footer {
    width: 960px;
    clear: both;
    color: white;
    font-family:Arial;
    font-size:14px;
  }
  .authorsig {
    float: left;
    font-weight: ;
    margin-left: 10px;
  }
    #des {
    color: #fff;
    font-weight: bold;
  }
  .spo a{
    float: right;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    margin-right: 5px;
  }

  #menu {
    float: right;
  }

  /* WORDPRESS STYLES */
  .pot1 {
    padding: 2px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    width: 600px;
    margin-left: 10px;
  }


  .poststyle {
    background: url(images/postbg.jpg) repeat-x;
    padding: 15px;
  }



  .entry {
    background: #ffffff;
    color: #404040;
    padding-top: 10px;
    padding-bottom: 20px;
  }


  .post h2 a{
    color: #404040;
    text-decoration: none;
    font-size: 20px;
    margin-left: 80px;
     font-family:Arial;
  }
  a.more-link {
    background: #026560;
    color: #fff;
    font-style: italic;
    padding: 1px;
    text-decoration: none;
    position: relative;
    top: 15px;
  }
  .postmetadata {
    background: #026560 url(images/leftcat.jpg) no-repeat scroll 0 100%;
    color: #fff;
    font-style: italic;
    float: right;
    margin-top: 17px;
    margin-right: -18px;
  }
  * html .postmetadata {
    margin-top: 0;
    position: relative;
    top: 18px;
    left: -17px;
  }

  .postmetadata a {
    color: #fff;
    text-decoration: none;
  }
  .postmetadata span {
    margin-left: 10px;
    background: url(images/rightcat.jpg) no-repeat scroll 110% 0;
    padding-right: 5px;
  }




  p.post-date {
    background: url(images/date.png) no-repeat;
    color: #fff;
    text-align: center;
    width: 50px;
    height: 80px;
    float: left;
    margin-top: -20px;
    margin-right: 30px;
    padding-top: 7px;
  }
  .date-day {
    font-size: 20px;
  }
  .date-month {
    font-size: 18px;
  }
  .date-year {
    font-size: 11px;
  }


  /* SIDEBAR */

  .side-widget h3 {
    background: url(images/h3.png) no-repeat;
    color: #fff;
    height: 34px;
    padding: 15px;
    font-size: 16px;
    margin-top: 0;
  }
  .side-widget ul {
    padding-bottom: 20px;
    padding-top: 20px;
    margin-top: -20px;
    background: #026560 url(images/bottom.jpg) no-repeat scroll 0 100%;

  }
  .side-widget ul li {
    list-style:none;
    margin: 0px 0 -3px 0;
    background: url(images/sidebar.jpg) repeat-x;
    padding: 10px;
  }
  .side-widget ul li:hover {
    background: url(images/sidebarhover.jpg) repeat-x;
    padding: 10px;
  }


  .side-widget ul li a {
    color: #fff;
    text-decoration: none;
  }


  #bottomtop {
    clear: both;
    width: 880px;
    margin: 20px 10px;
    background: #fff url(images/bottombg.png) no-repeat;
    float: left;
    padding: 8px 30px;
  }
  .bwrap {
    clear: both;
    float: left;
    background: url(images/bbwrap.jpg) repeat-y;
    width: 899px;
    margin-left: -25px;
    margin-top: 40px;
    padding-right: 5px;
  }
  * html .bwrap {
    margin-left: -12px;
  }
  .bwrap .widget a {
    color: #026560;
  }


  .bbwrap {
    clear: both;
    margin-left: -24px;
    background: url(images/bbwrap.png) no-repeat;
    height: 20px;
  }
  * html .bbwrap {
    margin-left: -23px;
  }


   .widget {
    float: left;
    margin-right: 80px;
    position: relative;
    top: -40px;
    left: 30px;

  }
  .widget h3 {
    font-size: 16px;
    color: #fff;
    margin-bottom: 30px;

  }


  .widget ul li {
    list-style: none;
  }
  .widget ul li a {
    color: #2a4310;
    text-decoration: none;
    font-weight: bold;
  }




   /* END LAYOUT */

.glidecontentwrapper{
	position:relative; /* Do not change this value */
	width:600px;
	height:295px; /* Set height to be able to contain height of largest content shown*/
	overflow:hidden;
	margin:0 auto;
	}

.glidecontentwrapper .post { /*style for each glide content DIV within wrapper.*/
	background-color:#448ab4;
	position:absolute; /* Do not change this value */
	width:100%;
	padding:0;
	margin:0;
	/* height:220px; */
	overflow:hidden;
	float:left;
}

.glidecontent .meta { margin-bottom:5px; }

.glidemeta{
	height: 55px;
	width:630px; /* jg lupa lebar image dikurangi padding dari glidemeta */
	padding:10px;
	position:absolute;
	background-color: #448ab4;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
	opacity:0.7;
	top:225px; /* jg pake bottom g support di IE6 */
	line-height:14px;
	color: #fff;
	font: 10px/15px Arial, Helvetica, sans-serif;
	overflow: hidden;
	display:none;
}

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
	float:right;
	width:55px;
}

.glidecontenttoggler a { /*style for every navigational link within toggler */
	display:block;
	/*height:15px;*/
	float:left;
	font-size:11px;
	text-transform:uppercase;
	color:#948F73;
	width:20px;
}

.glidecontenttoggler a.selected, .glidecontenttoggler a:hover { /*style for selected page's toggler link. ".selected" class auto generated! */
	color:#CFA03A;
}

.glidecontenttoggler a span {
	display:block;
	height:15px;
	float:left;
	cursor:pointer;
}

.glidecontenttoggler a.toc { /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}

.glidecontenttoggler a.prev { /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
	margin-left: -45px;
	margin-right: 35px;
}
* html .glidecontenttoggler a.prev {
  position: relative;
  left: -15px;
}


.glidecontenttoggler a.next {

}
* html .glidecontenttoggler a.next {
  position: relative;
  top: -14px;
}


.glidecontenttoggler a.prev:hover {
}

.glidecontenttoggler a.next:hover{
}

#togglebox {
	/*margin-bottom:10px;*/
	display:none;
}

/* TABBED */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
	.tabs-hide {
		display:none;
	}
}

/* Hide useless elements in print layouts... */
@media print {
	.tabs-nav {
		display:none;
	}
}

/* Skin */
.tabs-nav {
	text-align:center;
}
.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
	display:block;
	clear:both;
	content:" ";
}
.tabs-nav li {
	float:left;
	margin-right:4px;
	border:none !important;
    list-style:none;
}

.tabs-nav li.last { margin:0; }

.tabs-nav a, .tabs-nav a span {
	display:block;
}
.tabs-nav a {
	position:relative;
	top:1px;
	z-index:2;
	font-size:14px;
    font-weight: bold;
    text-decoration: none;
	color:#FFFFFF;
	text-align:center;
	white-space:nowrap; /* required in IE 6 */
}
.tabs-nav .tabs-selected a {
	color:#fff;
}
.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
	background-position:100% -150px;
	outline:0; /* prevent dotted border in Firefox */
}
.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
	background-position:100% -100px;
}
.tabs-nav a span {
	float:left;
	height:19px; /* IE 6 treats height as min-height */
	min-height:18px;
	line-height:19px;
	padding:18px;
}
*>.tabs-nav a span { /* hide from IE 6 */
	width:auto;
	height:auto;
}
.tabs-nav .tabs-selected a span {
    color: #026560;        background: #eeeeee; padding: 17px;
}
.tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {
  border: 0;
}
.tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {
}
.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
	cursor:text;
}
.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
	cursor:pointer;
	color:#71A8A3;
}
.tabs-nav .tabs-disabled {
	opacity:.4;
}
.tabs-container {
	clear:left;
	background-color:transparent; /* declare background color for container to avoid distorted fonts in IE while fading */
	overflow:hidden;
}
.tabs-loading em {
	padding:0 0 0 20px;
}
.tabs-container a:link {
  color: #fff;
}
.subnav {
  background: #026560;
  text-align: center;
  color: #fff;

}
.tabs-container {
  background:  #026560;    font-size: 14px;
}


.tabs-container ul li {
	background:transparent url(../images/bullet.gif) no-repeat scroll 8px 14px;
	line-height:33px;
	border-bottom:1px solid #CCCCCC;
	padding-left:20px;
}

.tabs-container ul li a {}

.tabs-container ul li a:hover {}

#tab-content { margin-bottom:10px; background: url(images/h3.png) no-repeat; }

#mygallery {
	background-color: transparent;
    margin-top: 20px;
    margin-bottom: -25px;
}
#slide-next-nav {
  margin-left: -5px;
}


.stepcarousel{
position:relative; /*leave this value alone*/
overflow:scroll; /*leave this value alone*/
width:530px; /*Width of Carousel Viewer itself*/
height:204px; /*Height should enough to fit largest content's height*/
margin:0 auto;
left: -10px;
}

.stepcarousel .belt{
position:absolute; /*leave this value alone*/
left:0;
top:0;
}

.stepcarousel .panel{
float:left; /*leave this value alone*/
overflow:hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin-right:9px ; /*margin around each panel*/
width:150px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
height:140px;
background-color:#FFFFFF;
padding:9px;
border:1px solid #000000;
}

.stepcarousel .panel img{
float:left; /*leave this value alone*/
margin:0; /*margin around each panel*/
padding:0;
}

.stepcarousel .panel span {
	font-size:15px;
	line-height:38px;
}

.stepcarousel .panel a { color:#000000; }

.stepcarousel .panel a:hover { color:#7C7C7C; }