@charset "utf-8";
/* CSS Document */
* { margin:0 0; padding:0 0}
body {font: 13px Verdana, Arial, Helvetica, sans-serif; color:#444; background:white;}

.clear{clear:both;}
#num {padding-left: 6px;}
 .img-bot {margin-bottom: 6px; display: block; }

#container {padding: 15px 30px 0 0;}
#sidebar {width: 80px;	float: left; padding: 0 0 0 10px; height: 100%; margin-top:15px;}
#titik {border-top: 2px dotted; color:#444; margin:5px 0 }
#linex {border-top: 2px solid; color:#444; margin:5px 0 }

#title {
/*	background:url(images/title2.jpg) right;
*/	width:80px;
	height:40px;
}
#title a img {
	border:none;
}
#bar1 {width:80px; float:left; font-style:italic; color:#444; }


#barcontainer{}
.nothumb { float: left; padding: 0 1px 1px 0; }
.nothumb img { display: block; margin: 0; }
.new { color:#FF0000;}

#pad{padding:3px 0;}

#bar1 ul {list-style:none; padding-top:2px; font-size:12px;text-align:right;}
#bar1 ul li {margin-top:2px;}
#bar1 ul li:hover {
	background-color:#222;
	color:white;
}
#bar1 ul li a{text-decoration:none; color:#444;}
#bar1 ul li a:hover {color:white;}

#copyright {
	text-align:right;
	font-size:9px;
	width:80px;
	background-color:#111;
	color:white;
	position: fixed;
	left: 5px;
	bottom: 0px;
	height:12px;
	padding-top:0px;
	padding-right:3px;
}
#right_col{margin-left:790px; width:50px; top:60px; position:absolute; font-size:9px; font-style:oblique}
#maincontent{margin-left: 170px; width: 600px; top:0px; position:absolute;}
#pemisah-top{height:60px;}
#maincontent a{
	font-style:italic;
	text-decoration:underline;
	padding:0 3px;
	color: #444;
}
#maincontent a:hover{
	background-color:#FFFF00;
	color:#444;
	text-decoration: none;
}

.menu_head {
	cursor: pointer;
	position: relative;
    font-weight:bold;
	text-align:right;
	
}

.menu_head a {
    text-decoration:none;
	color:#444;	
}

.menu_body {
	display:none;
}
.menu_body a{
  display:block;
text-decoration:none; color:#444;  	text-align:right;

}
.menu_body a:hover{
	background-color:#FFFF00;
	color:#444;
  }



/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	width: 40px;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(../images/cursors/cursor_arrow_left.png), url(images/cursors/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
/*	background-image: url(../images/arrow_left.gif);				
*/	background-color: #333;
	background-repeat: no-repeat;
	opacity: 0; /* Standard CSS3 opacity setting */
	-moz-opacity: 0; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 0); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	width: 40px;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../images/cursors/cursor_arrow_right.png), url(images/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
/*	background-image: url(../images/arrow_right.gif);
*/	background-color: #333;
	background-repeat: no-repeat;
	opacity: 0;
	filter: alpha(opacity = 0);
	-moz-opacity: 0;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 335px;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}

	#makeMeScrollable
	{
		width:600px;
		height: 330px;
		position: relative;
	}
	
	#makeMeScrollable div.scrollableArea *
	{
		position: relative;
		float: left;
		margin: 0;
		padding: 0;
	}
	
div.scrollableArea a{
	text-decoration:none;
}



	#gallery {
	}
	#gallery ul { list-style: none; }
	#gallery ul li { display:inline; }
	#gallery ul img {
		border: 5px solid #FFFFFF;
		border-width: 0px 0px 10px;
	}
	#gallery ul a:hover img {
		border: 5px solid #FFFF00;
		border-width: 0px 0px 5px;
		color:#FFFF00;
		
	}
	#gallery ul a:hover { color: #fff; }


	
ul.columns {
	width: 600px;
	list-style: none;
	margin: 0 auto; padding: 0;
	margin-left:-3px;
	height:50px;
}
ul.columns li {
	width: 100px;
	float: left; display: inline;
	padding: 0;
	position: relative;
}
ul.columns li:hover {z-index: 99;}

/*--Thumbnail Styles--*/
ul.columns li img {
	position: absolute;
	filter: alpha(opacity=30);
	border: 0px;
	opacity: 0.3;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*--IE8 Specific--*/
	top: 3px;
}
ul.columns li:hover img{
	z-index: 999;
	border:0px;
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	}
/*--Details Style--*/
ul.columns li .info {
	position: absolute;
	top: -5px;left:-2px;
	padding-top:60px;
	width: 110px;
	display: none;
	background:#FFFF00;
}
ul.columns li:hover .info {display: block;}

ul.columns li p {margin-left:5px; margin-right:3px; font-size:9px; margin-bottom:3px;}
.bintang {
	color: #444444;
	background-color: #FFFF00;
	filter: alpha(opacity=30);
	opacity: 0.3;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*--IE8 Specific--*/
}