/*******************************************/


/********************************************

   HTML ELEMENTS

********************************************/


/* top elements */

* {
    padding: 0;
    margin: 0;
}


body {

    text-align: center;
    margin: 0;

    padding: 0;

    font: .70em/1.4em Trebuchet MS, Verdana, Tahoma, Helvetica, sans-serif;

    color: #666666;

    background: #A9BAC3 url(../images/bg.gif) repeat-y top center;
}


/* links */

a {

    color: #4284B0;

    background-color: inherit;

    text-decoration: none;

}

a:hover {

    color: #9EC068;

    background-color: inherit;

}


/* headers */

h1, h2, h3 {

    font: bold 1em 'Trebuchet MS', Arial, Sans-serif;

    color: #666;

}

h1 {
    font-size: 1.2em;

    color: #000000;

    /*font warna kotak box kiri dan kanan */

}

h2 {

    font-size: 1.2em;

    text-transform: uppercase;

}


h3 {
    font-size: 1.2em;
}

h4 {

    text-decoration: none;

    font-family: Trebuchet MS;

    font-size: 16px;

    font-weight: bold;

    color: #000000;

    /*font warna kotak judul tiap halaman web */

}


ul, ol {

    margin: 10px 30px;

    padding: 0 15px;

    color: #4284B0;

}

ul span, ol span {

    color: #666666;

}


/* images */

img {

    border: 0px solid #CCC;

}

img.no-border {

    border: none;

}

img.float-right {

    margin: 5px 0px 5px 5px; /*top right bottom left*/

}

img.float-left {

    margin: 5px 5px 5px 0px; /*top right bottom left*/

}


code {

    margin: 5px 0;

    padding: 10px;

    text-align: left;

    display: block;

    overflow: auto;

    font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;

    /* white-space: pre; */

    background: #FAFAFA;

    border: 1px solid #f2f2f2;

    /*border-left: 4px solid #4284B0; */

}

acronym {

    cursor: help;

    border-bottom: 1px solid #777;

}


blockquote {

    margin: 5px 0 5px 0;

    padding: 0 0 0 40px; /*top right bottom left*/

    border: 1px solid #f2f2f2;

    background: #FAFAFA url(../images/quote.gif) no-repeat 5px 5px;

}


/* form elements */

form1 {

    margin: 10px;
    padding: 5px;

    border: 1px solid #f2f2f2;

    background-color: #FAFAFA;

}

/*

label {

	display:block;

	font-weight:bold;

	margin:5px 0;

}

*/


input {

    padding: 2px;

    border: 1px solid #eee;

    font: normal 1em Verdana, sans-serif;

    color: #777;

}

textarea {

    /*width:300px;*/

    padding: 2px;

    font: normal 1em Verdana, sans-serif;

    border: 1px solid #eee;

    height: 100px;

    display: block;

    color: #777;

}

input.button {

    margin: 0;

    font: bold 1em Arial, Sans-serif;

    border: 1px solid #CCC;

    background: #FFF;

    padding: 2px 3px;

    color: #4284B0;

}


/* search form */

form.searchform {

    background: transparent;

    border: none;

    margin: 0;
    padding: 10px;

}

form.searchform input.textbox {

    margin: 0;

    width: 120px;

    border: 1px solid #9EC630;

    background: #FFF;

    color: #333;

    height: 14px;

    vertical-align: top;

}

form.searchform input.button {

    margin: 0;

    padding: 2px 3px;

    font: bold 12px Arial, Sans-serif;

    background: #f2f2f2;

    border: 1px solid #f2f2f2;

    color: #777;

    width: 60px;

    vertical-align: top;

}


/***********************

	  LAYOUT

************************/

#wrap {

    background: #FFF;

    /*width: 850px;*/
    width: 90em;
    height: 100%;

    margin: 0 auto;

    text-align: left;

}

#content-wrap {

    clear: both;

    margin: 0;
    padding: 0;

    background: #FFF;

}


/* header */

#header {

    position: relative;

    height: 5px;

    background: #000 url(../images/headerbg.jpg) repeat-x bottom center;


}

#header h1#logo {

    position: absolute;

    margin: 0;
    padding: 0;

    font: bolder 4.1em 'Trebuchet MS', Arial, Sans-serif;

    letter-spacing: -2px;

    /*text-transform: lowercase;*/

    top: 0;
    left: 5px;

}

#header h2#slogan {

    position: absolute;

    top: 37px;
    left: 0px;

    color: #666666;

    text-indent: 0px;

    font: bold 11px Tahoma, 'trebuchet MS', Sans-serif;

    text-transform: none;

}

#header form.searchform {

    position: absolute;

    top: 161px;
    right: 0px;

}


/* main */

#main {

    float: left;

    margin-left: 4px;

    /*	margin-right: 5px;*/

    padding: 0;

    width: 53%;

}


#main2 {

    float: left;

    width: 76%;

}


#main p, h1, h2, h3, h4 {


    margin: 5px 0 5px 0; /*top right bottom left*/

}


.post-footer {

    background-color: #FAFAFA;

    padding: 5px;

    margin: 20px 0 0 0; /*top right bottom left*/

    border: 1px solid #f2f2f2;

    font-size: 95%;

}

.post-footer .date {

    background: url(../images/clock.gif) no-repeat left center;

    padding-left: 20px;
    margin: 0 10px 0 5px;

}

.post-footer .comments {

    background: url(../images/comment.gif) no-repeat left center;

    padding-left: 20px;
    margin: 0 10px 0 5px;

}

.post-footer .readmore {

    background: url(../images/page.gif) no-repeat left center;

    padding-left: 20px;
    margin: 0 10px 0 5px;

}


.post-footer .sendfriend {

    background: url(../images/friend.gif) no-repeat left center;

    padding-left: 20px;
    margin: 0 10px 0 5px;

}

.post-footer .print {

    background: url(../images/print.gif) no-repeat left center;

    padding-left: 20px;
    margin: 0 10px 0 5px;

}

.post-footer .pdf {

    background: url(../images/pdf.gif) no-repeat left center;

    padding-left: 20px;
    margin: 0 10px 0 5px;

}


.post-footer .xml {

    background: url(../images/xml.gif) no-repeat left center;

    padding-left: 20px;
    margin: 0 10px 0 5px;

}

.post-footer .html {

    background: url(../images/html.gif) no-repeat left center;

    padding-left: 20px;
    margin: 0 10px 0 5px;

}


/* sidebar */

#sidebar {

    float: left;

    width: 23%;

    margin: 0;
    padding: 0;

    display: inline;

}


#sidebar p, h1, h2, h3 {

    margin: 5px 10px;

}


#sidebar ul.sidemenu {

    list-style: none;

    margin: 10px 0 10px 15px;

    padding: 0;

}

#sidebar ul.sidemenu li {

    margin-bottom: 1px;

    border: 1px solid #f2f2f2;

}

#sidebar ul.sidemenu a {

    display: block;

    font-weight: bold;

    color: #333;

    text-decoration: none;

    padding: 2px 5px 2px 10px;

    background: #f2f2f2;

    border-left: 4px solid #CCC;


    min-height: 18px;

}


* html body #sidebar ul.sidemenu a {
    height: 18px;
}


#sidebar ul.sidemenu a:hover {

    padding: 2px 5px 2px 10px;

    background: #f2f2f2;

    color: #339900;

    border-left: 4px solid #9EC630;

}


/* rightbar */

#rightbar {

    float: right;

    width: 23%;

    padding: 0;
    margin: 0;

    display: inline;

}


#rightbar p, h1, h2, h3 {

    margin: 5px 10px;

}


.bg {

    /*background: url(../images/banner4.gif) repeat-x bottom center;*/
    background: #43cea2; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #185a9d, #43cea2); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #185a9d, #43cea2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: white;
    padding: 5px;

    border: 1px solid #f2f2f2;

}


.box {

    background-color: #FFFFFF;

    border: 1px solid #f2f2f2;

    font-size: 100%;

    padding: 5px;

    margin-right: 10px;

    margin-left: 10px;


}


.box ul {

    margin: 0px;

    padding: 0px 0px 0px 0px;

    list-style-type: none;

}

.box a {

    color: #4284B0;

    background-color: inherit;

    text-decoration: none;


}

.box a:hover {

    background: #F7F7F4;


}

.box li {

    padding: 4px 0px 4px 20px; /*top right bottom left*/

    background-image: url(../images/1.gif);

    background-position: left;

    background-repeat: no-repeat;

}


.border {

    background-color: #FFFFFF;

    border: 1px solid #f2f2f2;

    padding: 5px;

    margin: 5px 0 5px 0;

}


.news {

    background-color: #FFFFFF;

    border: 1px solid #f2f2f2;

    font-size: 95%;

    padding: 5px;

}


/* Footer */

#footer {

    clear: both;

    color: #FFF;

    background: #A9BAC3 url(../images/headerbg.jpg) repeat-x bottom center;

    border-top: 5px solid #568EB6;

    margin: 0;
    padding: 0;

    height: 50px;

    font-size: 95%;

}

#footer a {

    text-decoration: none;

    font-weight: bold;

    color: #FFF;

}

#footer .footer-left {

    float: left;

    width: 65%;

}

#footer .footer-right {

    float: right;

    width: 30%;

}


/* alignment classes */

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.align-justify {
    text-align: justify;
}

.align-center {
    text-align: center;
}


/* additional classes */

.clear {
    clear: both;
}

.green {
    color: #9EC630;
}

.gray {
    color: #BFBFBF;
}


.error {

    font-size: 1em;

    color: red;

    text-align: center;

    width: 100%;

    /*  margin: 5px 25px 5px 25px; */ /*top right bottom left*/

}


.sukses {

    font-size: 1em;

    color: #6297BC;

    text-align: center;

    width: 100%;

    /*   margin: 5px 25px 5px 25px;*/ /*top right bottom left*/

}


#form {

    margin: 0 auto;

    padding: 0;

    width: 100%;

    text-align: left;

}


#form .textbox {

    width: 160px;

    border-left: 1px solid #acc6db;

    border-right: 1px solid #acc6db;

    border-top: 1px solid #acc6db;

    border-bottom: 1px solid #acc6db;

    background-color: #fff;

    font-size: 12px;

    font-family: Verdana, Arial, Helvetica, sans-serif;

    color: #000;

}


#form .textcode {

    width: 70px;

    border-left: 1px solid #acc6db;

    border-right: 1px solid #acc6db;

    border-top: 1px solid #acc6db;

    border-bottom: 1px solid #acc6db;

    background-color: #fff;

    font-size: 12px;

    font-family: Verdana, Arial, Helvetica, sans-serif;

    color: #000;

}


#form .textcom {

    border-left: 1px solid #acc6db;

    border-right: 1px solid #acc6db;

    border-top: 1px solid #acc6db;

    border-bottom: 1px solid #acc6db;

    background-color: #fff;

    font-size: 12px;

    font-family: Verdana, Arial, Helvetica, sans-serif;

    color: #000;

}


#form .cselect {


    background-color: #fff;

    font-size: 11px;

    font-weight: normal;

    color: #000;

    font-family: Verdana, arial, helvetica, sans-serif;

    text-decoration: none;

}


#form label {

    float: left;

    padding: 0 1em;

    text-align: right;

}


#form .submit {

    padding: 10px 0 0 0; /*top right bottom left*/

}


#form .button {

    color: #fff;

    font-family: verdana, arial, helvetica, sans-serif;

    font-size: 8pt;

    font-weight: bold;

    background-color: #6898D0;

    border: 1px solid #dadada;

    cursor: pointer;

}


#abovepostads {

    margin: 10px 0px;
    width: 438px;

    background-image: url('../images/ads/rotate.php');

    background-repeat: no-repeat;

    background-position: right center;

    border: 1px solid #dddddd;

    padding: 0px;


}

#abovepostads p {

    margin: 0px;

    width: 300px;

    padding-top: 0px;

    padding-right: 0px;

    padding-bottom: 0px;

    padding-left: 4px;

}

#belowpostads {

    width: 438px;

    background-image: url('../images/ads1/rotate.php');

    background-repeat: no-repeat;

    background-position: right center;

    border: 1px solid #f1f1f1;

    margin-top: 10px;

    margin-right: 0px;

    margin-bottom: 20px;

    margin-left: 0px;

    padding: 0px

}

#belowpostads p {

    margin: 0px;

    width: 300px;

    padding-top: 0px;

    padding-right: 0px;

    padding-bottom: 0px;

    padding-left: 4px;

}


#abovepostads {

    margin: 10px 0px;
    width: 430px;

    background-image: url('../images/ads/rotate.php');

    background-repeat: no-repeat;

    background-position: right center;

    border: 1px solid #dddddd;

    padding: 0px;


}

#abovepostads p {

    margin: 0px;

    width: 300px;

    padding-top: 0px;

    padding-right: 0px;

    padding-bottom: 0px;

    padding-left: 4px;

}

#belowpostads {

    width: 430px;

    background-image: url('../images/ads1/rotate.php');

    background-repeat: no-repeat;

    background-position: right center;

    border: 1px solid #f1f1f1;

    margin-top: 10px;

    margin-right: 0px;

    margin-bottom: 20px;

    margin-left: 0px;

    padding: 0px

}

#belowpostads p {

    margin: 0px;

    width: 300px;

    padding-top: 0px;

    padding-right: 0px;

    padding-bottom: 0px;

    padding-left: 4px;

}


#download a {

    color: #0000FF;

    background-color: inherit;

    text-decoration: underline;

}

#download a:hover {

    color: #0000FF;

    background-color: inherit;

    text-decoration: underline;

}


.gambar {

    clear: both;

    padding-right: 0px;

    padding-left: 0px;

    padding-top: 0px;

    padding-bottom: 0px;

    float: left;

    width: 20px;

    text-align: left

}


.submenu {

    background-color: #FFFFFF;

    font-size: 100%;

}


.submenu ul {

    margin: 0px;

    padding: 5px 0px 0px 23px;

    list-style-type: none;

}

.submenu a {

    color: #4284B0;

    background-color: inherit;

    text-decoration: none;

}

.submenu a:hover {

    color: #9EC068;

    background-color: inherit;

}

.submenu li {

    padding: 0px 0px 2px 0px; /*top right bottom left*/

    background-image: url(../images/1.gif);

    background-position: left;

    background-repeat: no-repeat;

}


.menu-utama {

    background-color: #FFFFFF;

    border: 0px solid #f2f2f2;

    font-size: 100%;

    padding: 0px;

    margin-right: 10px;

    margin-left: 10px;

}


.menu-utama ul {

    margin: 0px;

    padding: 0px 0px 0px 0px;

    list-style-type: none;

}

.menu-utama a {

    color: #666666;

    display: block;

    width: 90%;

    padding: 4px 2%;

    padding-left: 10px;

    border-bottom: 1px dashed #CCC;

    border-left: 4px solid #FFF;

    background: inherit;
    color: #553;

    text-decoration: none;


}

.menu-utama a:hover {

    background-color: #eeede8;

    border-left: 4px solid #85b308;

    font-weight: bold;

    color: #85b308;

    text-decoration: none;


}

.menu-utama li {

    padding: 0px 0px 0px 0px; /*top right bottom left*/

    background-position: left;

    background-repeat: no-repeat;

}


ul#navlist {

    margin: 0;

    padding: 0;

    list-style-type: none;

    white-space: nowrap;

}


ul#navlist li {

    float: left;

    font-family: Trebuchet MS, verdana, arial, sans-serif;

    font-size: 14px;

    font-weight: bold;

    color: #FFF;

    margin: 0;

    padding: 10px 0 10px 0;

    background-color: transparent;

    border-top: 0px solid #e0ede9;

    border-bottom: 0px solid #e0ede9;

}


#navlist a, #navlist a:link {

    margin: 0;

    padding: 5px 9px 4px 9px;

    color: #FFF;

    border-right: 1px dashed #d1e3db;

    text-decoration: none;

}


ul#navlist li#active {

    color: #FFF;

    background-color: #deebe5;

}


#navlist a:hover {

    color: #FF9350;

    background-color: transparent;

}

#header ul {

    z-index: 999999;

    position: absolute;

    margin: 0;
    padding: 0;

    list-style: none;

    right: 0;

    top: 196px;

    left: 5px;

    font: bold 13px Arial, 'Trebuchet MS', Tahoma, verdana, sans-serif;

}

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
  #wrap {
      width: 95em !important;
  }
  
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  #wrap {
      width: 87em !important;
  }
  
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
  #wrap {
      width: 80em !important;
  }
  
  .logo {
      width: 28em !important;
  }
  
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  #wrap {
      width: 81em !important;
  }
  
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
  #wrap {
      width: 70em !important;
  }
  
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  
  #wrap {
      width: 70em !important;
  }
  
}