:root {
	--mainbg: #39a0ca;
	--maincolor: #333;
	--contentbg: #fff;
	--linkshadcol: #337ab7;
	--mainborder:#cdcdcd;
	--codebg:#f9f9f9;
	--codecolor:#002166;
  }
  /* CSS Document */
  @font-face {
  font-family: pixelart;
  src: url('Ranyth_upperlower.ttf') format('truetype');
}
  body{
  font-family:"Ubuntu", "Lucida Grande", Arial, Helvetica, sans-serif;
  color: var(--maincolor);
  background:var(--mainbg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }
  pre code,code,pre{
  font-family: Consolas, Monaco, Courier New, Courier, monospace;
  font-size: 12px;
  background-color: var(--codebg);
  border: 1px solid var(--mainborder);
  color: var(--codecolor);
  display: block;
  margin: 14px 0 14px 0;
  padding: 12px 10px 12px 10px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  white-space: pre-wrap; /* CSS 2.1 */
  word-wrap: break-word; /* IE7 */
  }
  blockquote
  {
	  font-style: italic;
	  font-family: Georgia, Times, "Times New Roman", serif;
	  border:1px solid var(--mainborder);
	  -moz-border-radius: 7px;
	  border-radius: 7px;
	  -webkit-border-radius: 7px;
	  padding:10px;
	  background-color: #0D0D0D;
  }
  
  a,.linkshad{
  text-decoration:none;
  font-size: 1em;
  color: var(--linkshadcol)
  
  }
  
  a:hover{
  text-decoration:underline;
  }
  
  .linkshad{
  padding:2px;
  color:var(--linkshadcol)
  }
  
  .linkshad:hover{
  color:var(--linkshadcol)
  background-color:var(--maincolor);
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  padding:2px;
  
  text-decoration:none;
  }
  
  .wrapper {
  width: 900px;
  margin: 30px auto;
  border: 1px solid var(--mainborder);
  padding: 0px 20px 0px 20px;
  -webkit-box-shadow:0 0 3em hsla(0, 0%, 0%, 1.0);
  -moz-box-shadow:0 0 3em hsla(0, 0%, 0%, 1.0);
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  }
  
  .panel{
	  margin: 30px auto;
	  -webkit-box-shadow:0 0 3em hsla(0, 0%, 0%, 1.0);
	  -moz-box-shadow:0 0 3em hsla(0, 0%, 0%, 1.0);
	  -moz-border-radius: 7px;
	  border-radius: 7px;
	  -webkit-border-radius: 7px;
	  background:#fff;
  }
  
  .body_container{
  overflow:auto;
  }
  
  .right_panel{
  float:left;
  width:252px;
  }
  
  .left_panel{
  float:left;
  width:638px;
  }
  
  .left_panel img{
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  }
  
  /*#navigation{
  width:900px;
  background-image:url(../images/navigation.jpg);
  background-repeat:no-repeat;
  height:40px;
  }*/
  
  .special_panel{
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  background-color:rgba(0,0,0,0.5);
  padding:4px;
  border:1px solid #2e2e2e;
  }
  
  .panel2{
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  background-color:var(--contentbg);
  margin-top:20px;
  padding:20px;
  overflow:hidden;
  }
  
  .img_box{
  padding:5px;
  border:1px solid #2e2e2e;
  margin:5px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  width:104px;
  height:80px;
  float:left;
  }
  
  /* img{
  border:none;
  } */
  
  .spacer{
  height:10px;
  }
  
  .mini_spacer{
  height:3px;
  }
  
  .vspacer{
  width:10px;
  float:left;
  overflow:auto;
  }
  
  /* input,textarea{
  margin: 5px 0px 5px 0px;
  padding: 3px 8px 3px 8px;
  border: 1px solid #ddd;
  background-color: white;
  -moz-border-radius: 7px;
  border-radius: 7px;
  color:#666;
  height:25px;
  -webkit-border-radius: 7px;
  background:url(../images/bgbtn.jpg) repeat-x bottom #fff;
  position:relative;
  z-index:2;
  
  }
  
  textarea{
	  height:100px;
	  resize:none;
	  font-size: 14px;
  } */
  
  .text{
  width:250px;
  }
  
  .button{
  cursor:pointer;
  min-width:70px;
  border: 1px solid #CDCDCD;
  }
  
  .panel_title{
  background:url(../images/bgbtn.jpg) repeat-x;
  padding:5px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  height:25px;
  line-height:19px;
  font-weight:bold;
  font-size:14px;
  
  opacity:0.5;
  }
  
  .kat_link,.kat_link2{
  padding-left:20px;
  background:url(../images/bullet.png) left 2px no-repeat;
  display:block;
  }
  
  .lavalamp{
  position: relative;
  height: 29px;
  padding: 15px;
  margin: 0px;
  overflow: hidden;
  }
  .lavalamp li {
  float: left;
  list-style: none;
  }
  .lavalamp li.back {
  background: url("../images/lava.png") no-repeat right -30px;
  width: 9px; height: 30px;
  z-index: 8;
  position: absolute;
  }
  .lavalamp li.back .left {
  background: url("../images/lava.png") no-repeat top left;
  height: 30px;
  margin-right: 9px; /* 7px is the width of the rounded shape */
  }
  .lavalamp li a {
  text-decoration: none;
  color: #686868;
  outline: none;
  text-align: center;
  top: 7px;
  letter-spacing: 0;
  z-index: 10;
  position: relative;
  overflow: hidden;
  margin: auto 25px;
  
  }
  .lavalamp li a:hover, .lavalamp li a:active, .lavalamp li a:visited {
  border: none;
  background:none;
  }
  .mykat{
  padding:0;
  margin:0;
  }
  .mykat li{
	  list-style:none;
  }
  .kat:hover,.katup:hover{
	  text-decoration:none;
  }
  .tooltip {
  display: none;
  position: absolute;
  border: 1px solid #2e2e2e;
  background-color: #0D0D0D;
  color:#686868;
  padding: 2px 6px;
  -moz-border-radius :7px;
  -webkit-border-radiu:7px;
  border-radius:7px
  }
  .k_isi{
  display:none;
  padding-left:18px;
  }
  .label_contact{
	  display:inline-block;
	  width:70px;
  }
  .image_contact{
	  display:inline-block;
	  margin-right:10px;
  }
  .clear{
	  clear:both;
  }
  .paginationz ul li.inactive,
  .paginationz ul li.inactive:hover{
	  background-color:transparent;
	  color:#444;
	  border-bottom:transparent;
	  cursor: default;
  }
  
  .paginationz{
	  margin:20px 0;
	  height: 25px;
	  text-align:center;
  }
  .paginationz ul{
	  padding-left:0;
  }
  .paginationz ul li{
	  list-style: none;
	  display:inline-block;
	  border-bottom: transparent;
	  padding: 2px 6px 2px 6px;
	  margin: 0 3px 0 3px;
	  color: #999;
	  background-color: transparent;
	  font-weight:bolder;
  }
  .paginationz ul li:hover{
	  color: #999;
	  border-bottom:2px solid #999;
	  cursor: pointer;
  }
  .unl{
	  color:#999 !important;border-bottom:2px solid #999 !important;
  }
  .err{
	  font-size:11px;
	  color:#ff0000;
  }
  #contact_form td,#comment_form td{
	  vertical-align:top;
  }
  .pt6{
	  padding-top:12px;
  }
  .pop_err{
	  color:#000;
  }
  .pop_err a{
	  color:#000;
	  text-shadow:none;
  }
  #scode_img,#refimg{
	  vertical-align:middle;
  }
  #refimg{
	  cursor:pointer;
  }
  .succ{
	  color:green;
  }
  .fs12{
	  font-size:12px;
  }
  .pop_succ{
	  display:none;
  }
  
  .comment{
	  border-bottom: 1px dashed #2E2E2E;
	  margin-bottom: 10px;
	  margin-left: 20px;
	  margin-right: 20px;
	  padding-bottom: 10px;
	  padding-top: 20px;
  }
  .pl40{
	  padding-left:40px;
  }
  .w440{
	  width:458px;
  }
  .w480{
	  width:498px;
  }
  .box_text{
	  margin-left:10px; float:left;
  }
  .img_comment{
	  float:left;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;overflow:hidden
  }
  .ta_right{
	  text-align:right;
  }
  .title_comment{
	  font-weight:bold;
	  font-size:14px;
  }
  
  .fbs,.tws{
	  vertical-align:middle;
	  display:inline-block;
  }
  
.nav-pills > li > a{
	font-size:1.5em;
}