@charset "utf-8";
/* CSS Document */

body {
background:url(../images/bg.png) #f8941c repeat-x;
font-family:Arial, Helvetica, sans-serif;
}

img {
border:none;
}

div#wrapper {
margin: -10px auto 0 auto;
background:#FFFFFF;
width:935px;
display:block
}

div.main-menu {
display:block;
background:url(../images/bgmenu.gif) repeat-x;
height:100px;
overflow:hidden;

}

div.main-menu-logo {
background:url(../images/logo-komik-m.gif) no-repeat;
width:250px;
height:70px;
float:left;
margin:10px 0 0 10px;
}

div.menu-list {
font-size:12px;
list-style:none;
}

ul.menu-list2 {
margin-top:40px;
margin-left:280px;
}

ul.menu-list2>li  {
list-style:none;
float:left;
border-left:#000 solid 1px;
padding:0 10px 0 10px ;

}

ul.menu-list2 li a {
text-decoration:none;
color:#000;
text-transform: uppercase;
font-size:10px;
font-weight:bold;
font:myriad;
}


ul.menu-list2 li.first   {
border:0;
}

div.box-header {
display:block;
overflow:hidden;
}

div.banner {
display:block;
width:580px;
height:285px;
float:left;
margin:0 0 0 0;
text-align:center;
}
/*---------------------------------Buku ----------------------------------------------------------------*/
div.main-box-books {
display:block;
width:340px;
overflow:hidden;
margin:0;
}

div#books {
overflow:hidden;

}
div.img-books{
float:left;
}


div.box-books-header {
display:block;
margin-left:-52px;
}
div.box-books-header li {
list-style:none;
float:left;
padding-left:25px;

}

div.box-books-header li a{

}



/*------------- tab ---------------------------------------*/

div#box-tab {
border:1px #999999 solid;
overflow:hidden;
background:#D8F0FB;
padding-bottom:0;
}




/* root element for tabs  */
ul.css-tabs {  
	margin:0 !important; 
	padding:0;
	height:30px;

}

ul.tabs {
overflow:hidden;
}

/* single tab */



ul.css-tabs li {  
	float:left;	 
	padding:0; 
	margin:0;  
	list-style-type:none;	
}

ul.tabs li a:hover {
background:#D8F0FB;

}


ul.tabs li a.current {
background:#BEE7F9;

}

/*---------------------panes -------*/


div.panes>div{
background:#BEE7F9;
padding-bottom:20px;
overflow:hidden;
}


/* link inside the tab. uses a background image */
/* root element for tabs  */
ul.tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0;
	height:30px;



}

/* single tab */
ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 

}

/* link inside the tab. uses a background image */
ul.tabs a { 
	font-size:11px;
	display:block;
	height: 30px;  
	line-height:30px;
	width: 111px;
	text-align:center;	
	text-decoration:none;
	color:#000;
	padding:0px;
	margin:0px;	
	position:relative;
	top:1px;

}

ul.tabs a:active {
	outline:none;		

}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
	background-position: -652px -31px;	
	color:#fff;	

}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	background-position: -652px -62px;		
	cursor:default !important; 

	color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
ul.tabs a.w1 			{ background-position: -519px 0; width:134px; }
ul.tabs a.w1:hover 	{ background-position: -519px -31px; }
ul.tabs a.w1.current { background-position: -519px -62px; }

/* width 2 */
ul.tabs a.w2 			{ background-position: -366px -0px; width:154px; }
ul.tabs a.w2:hover 	{ background-position: -366px -31px; }
ul.tabs a.w2.current { background-position: -366px -62px; }


/* width 3 */
ul.tabs a.w3 			{ background-position: -193px -0px; width:174px; }
ul.tabs a.w3:hover 	{ background-position: -193px -31px; }
ul.tabs a.w3.current { background-position: -193px -62px; }

/* width 4 */
ul.tabs a.w4 			{ background-position: -0px -0px; width:194px; }
ul.tabs a.w4:hover 	{ background-position: -0px -31px; }
ul.tabs a.w4.current { background-position: -0px -62px; }



/* initially all panes are hidden */ 
div.panes div.pane {
	display:none;		
}


/*--------------------------------Main-content ---------------------------------*/

div.main-content {
overflow:hidden;
display:block;
padding:10px;
margin:0 auto;
}

div.first {
width:280px;
float:left;
text-align:center;
overflow:hidden;
}

div.second {
width:350px;
float:left;
overflow:hidden;
margin-left:5px;
}

div.third{
width:275px;
float:left;
overflow:hidden;
}


div.third350{
width:338px;
float:left;
overflow:hidden;
}

/*-------------------- Komik-M Tv ---------------------*/

div.box-tv {
width:280px;
display:block;
border-bottom:1px #000 dotted;
padding: 0 0 50px 0;
overflow:hidden;

}

div.title-box-tv {
display:block;
text-align:left;
overflow:hidden;
}

div.content-box-tv {
display:block;
}

/*------------- box -- Penulis ----------*/

div.geng-komik-m{
width:280px;
display:block;
border-bottom:1px #000 dotted;
padding: 0 0 50px 0;
overflow:hidden;
margin:10px 0 0 0;
text-align:left;
}

div.title-geng-komik-m {
text-align:left;
display:block;
}


div.box-side-geng-komik-m {
overflow:hidden;
margin:10px 0;
border:1px #CCCCCC dotted;
}

div.box-side-geng-komik-m>a{
display:block;
overflow:hidden;
text-decoration:none;
padding:10px 0;
}

div.box-side-geng-komik-m> a:hover{
background: #fcf7e8;
display:block;
overflow:hidden;
padding:10px 0;
}

div.img-geng-komik-m {
float:left;
display:block;
width:70px;
padding-left:5px;
}

div.content-geng-komik-m {
display:block;
font-size:14px;
font-weight:bold;
margin:0;
color:#666666;
}

div.content-geng-komik-m>h1{
margin:0;
}

div.content-geng-komik-m>h1 a{
font-size:14px;
font-weight:bold;
margin:0;
color:#666666;
}




/*-------------------------- Box-berita--------------------------*/

div.box-berita {
display:block;
padding:0 10px;
width:320px;
}

div.title-box-berita {
display:block;
margin:0 0 10px 0;

}

div.box-berita p{
display:block;
margin:0;
}

div.content-box-berita {
display:block;
margin-bottom:40px;
}

div.content-box-berita h1 {
font-size:16px;
font-weight:bold;
margin:5px 0 0 0;

}


div.content-box-berita h1 a {
text-decoration:none;
color:#999999;
}

div.content-box-berita>h2{
font-size:12px;
color:#666666;
margin:10px 0 0 0;
font-weight:normal;
}

div.content-box-berita>h3{
font-size:10px;
color:#555555;
margin:0 0 0 5px;
font-weight:normal;
}




div.box-galeri {
display:block;
margin:10px 0 0 0;
}

div.title-box-galeri {
display:block;
text-align:left;
}

div.content-box-galeri {
display:block;
}




/*----------------Footer--------------*/

div.main-footer{
overflow:hidden;
margin:20px 0 10px 10px;

}

div#footer {
padding:10px;
border-top:3px #CCCCCC solid;
color:#999999;
overflow:hidden;
}

div.img-footer {
background: url(../images/logo.gif) no-repeat;
width:50px;
height:70px;
float:left;
}

div.adr-footer {
float:left;
font-size:9px;
width:300px;
}

div.adr-footer>h1{
display:block;
font-weight:bold;
font-size:11px;
margin:0;
}

div.adr-footer>h2{
display:block;
margin:0;
font-size:10px;
}

div.tel-footer {
float:left;
font-size:9px;
width:250px;
margin:0;
}


div.tel-footer>h1{
background:url(../images/pda.png) no-repeat;
font-size:9px;
margin:0;
height:20px;
padding-left:25px;
}

div.tel-footer>h2{
font-size:9px;
margin:0;
background:url(../images/telephone-fax.png) no-repeat;
height:20px;
padding-left:25px;
}

div.tel-footer>h3{
background:url(../images/envelope.png) no-repeat;
width:20px;
height:20px;
padding-left:25px;
font-size:9px;
margin:0;
}

div.sosial-footer {
float:left;
font-size:9px;
width:250px;
margin:0;
}


div.sosial-footer>h1{
background:url(../images/balloon-facebook-left.png) no-repeat;
width:10px;

height:15px;
font-size:10px;
margin:0;
padding-left:25px;
}

div.sosial-footer>h2 {
background:url(../images/balloon-twitter.png) no-repeat;
font-size:10px;
margin:0;
width:10px;
height:15px;
padding-left:25px;
}

div.sosial-footer>h3 {
background:url(../images/television--plus.png) no-repeat;
font-size:10px;
margin:0;
width:10px;
height:15px;
padding-left:25px;
}


/*------------------------------ tool-tips--------------------------------------*/

.tooltip { 
    display:none;
	background:url(../images/tool-tips.png) no-repeat;
    height:100px; 
    padding:10px; 
    width:145px; 
    font-size:11px; 
    color:#fff;
		}


.tooltip>h1 {
font-size:12px;
color:#000;
opacity:100;
margin:0;
font-weight:bold;

} 


.tooltip>h2,h3,h4,h5 {
font-size:10px;
color:#000;
opacity:100;
margin:0;
font-weight:normal;

} 


/* a .label element inside tooltip */ 
.tooltip .label { 
    color:yellow; 
    width:35px; 
} 
 
.tooltip a { 
    color:#ad4; 
    font-size:11px; 
    font-weight:bold; 
}

li.download_now {
margin:10px 0 0 0;
height:100px;
}

/*------------- wide Content ----------*/
div.width2 {
display:block;
width:570px;
float:left;
}

div.content-blog-2 {
display:block;
}

div.content-box-berita-2 {
display:block;
padding:0 10px;
}

div.content-box-berita-2 h1{
font-size:16px;
font-weight:bold;
margin:0;
}

div.content-box-berita-2 h2{
font-size:12px;
font-weight:normal;
margin:0;
}

div.content-box-berita-2 h3 {
font-size:11px;
margin:0;
}

/*------------------ Komen--------------*/

div.comment {
display:block;
font-size:12px;
padding:0 10px;
}

table.tb-comment td {
display:block;
width:500px;
}

table.tb-comment label {
display:block;
width:200px;
margin:10px 0 0 0;

}

input.txt.w95 {
width:400px;
}

textarea.w95{
width:400px;
}

button.btn-comment {
font-size:14px;
margin:20px 0 20px 0;
}

table.tb-comment td img {
margin: 10px 0 10px 0;
}



div.comment-list h2 {
font-size:14px;
margin:0 0 0 10px;
}

/*-------------- buku -----------------*/

div.b-b-i {
display:block;
width:520px;
padding:0 0 0 20px;
}

div.title-b-b-i {
font-size:22px;
font-weight:bold;
color:#330033;
}

div.content-b-b-i {
margin:10px 0 0 0;
display:block;
overflow:hidden;
}

div.img-b-b-i{
width:270px;
float:left;
}

div.img-b-b-i img {
border:1px solid #000;
outline:3px solid #E8E8E8;
}

div.info-b-b-i {
display:block;
font-size:12px;
margin:10px 0 0 0;
}


div.info-b-b-i a {
font-size:18px;
text-decoration:none;
font-weight:bold;
color:#660000;
}


/*------ TOC---*/

div#box-tab2 {
border:1px #999999 solid;
overflow:hidden;
background:#D8F0FB;
padding-bottom:0;
margin:20px 0 0 0;
width:520px;
}


div.toc {
padding:0 10px;
font-size:12px;
}

div.content-toc p {
margin: 5px 0;
}

/*-------------------- Box-Banner-Slider ----------*/


div.scrollable { 
 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 550px; 
	height:210px;
	margin:20px 0 0 10px;
    } 
 
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 
 
/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div { 
    float:left; 
} 
 
/* you may want to setup some decorations to active the item */ 
div.items div.active { 
    border:1px inset #ccc; 
    background-color:#fff; 
}


div.penulis {
display:block;
overflow:hidden;
}

div.img-penulis {
display:block;
width:230px;
float:left;
margin:0;
}

div.nama-penulis {
width:300px;
display:block;
float:left;
margin:0;
padding:0;
}

div.nama-penulis h1 {
display:block;
margin:0;
padding:0;
font-size:16px;
color:#444;
}

div.nama-penulis h2 {
display:block;
margin:0;
padding:0;
font-size:12px;
color:#888;
font-weight:normal;
}



div.content-related-books {
display:block;
margin:10px 0 0 0;
}

div.title-related-books {
display:block;
font-size:16px;
font-weight:bold;
}

div.img-buku {
display:block;
overflow:hidden;
border:1px solid #999;
outline:2px solid #F5FEFF;
margin:10px 0 0 0;
padding:0;
background:#F0F9FF;
}

div.img-buku ul {
display:block;
float:left;
padding:0 5px;
}

div.img-buku li{
float:left;
list-style:none;
padding:0;
width:80px;
height:100px;
margin:0 0 0 7px;

}


div.img-buku li a{
display:block;
padding:5px;
overflow:hidden;
}

div.img-buku li a:hover {
display:block;
padding:5px;
background:#BDE3FF;
overflow:hidden;
}

div.biodata {
display:block;
width:530px;
margin:10px 0 0 0;
}

div.biodata h1 {
font-size:16px;
color:#67A5EF;
}

div.biodata h2 {
font-size:12px;
font-weight:normal;
}

div.biodata p {
magin:10px 0 0 0;
}