* {
	margin: 0;
	padding: 0;
}

body {
	width: 960px;
	margin: 0 auto;
	background-image: url(../img/gradient.jpg);
	background-repeat: repeat-x;
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
}

#toppart {
	width: 960px;
	height: 25px;
	color: #333333;
}

#topmenu {
	width: 150px;
	height: 25px;
	float: left;
}

#topmenu ul { list-style: none; margin-top: 4px; padding-left: 5px;}
#topmenu ul li { float: left; padding-right: 5px;}
#topmenu ul li a img { border: 1px solid #FFFFFF; }

#date {
	width: 230px;
	padding-top: 3px;
	color: #FFFFFF;
	font-size: 0.8em;
	float: left;
}

#toplinks {
	width: 570px;
	float: left;
	text-align: right;
	color: #FFFFFF;
	clear: right;
	padding: 0 5px;
}

#toplinks a { font-size: 0.8em; text-decoration: none; color: #FFFFFF;}
#toplinks a:visited { font-size: 0.8em;text-decoration: none; color: #FFFFFF;}
#toplinks a:hover { font-size: 0.8em;text-decoration: underline; color: #FFFFFF;}

#header {
	width: 960px;
	height: 100px;
	background-color: #08204C;
	margin-bottom: 2px;
}

#name {
	width: 630px;
	float: left;
	margin-left: 0px;
	padding-top: 10px;
}
#name h1 { font-size: 1.6em; font-family: arial; color: #FFFFFF; padding: 3px 5px;}
#name h2 { font-size: 1em; font-family: arial; color:#FFFFFF; font-style: italic; padding: 2px 5px;}

#logo {
	width: 320px;
	text-align: left;
	padding-top: 12px;
	float: left;
	padding-left: 10px;
}

#feat-img { width: 960px; height: 200px; clear: left; overflow: hidden;}

/*LEFT_LIST & RIGHT_LIST ------------------------------------------------------------------------------*/

#left_list { margin-left: 35px;	float: left; width: 180px; height: 177px; padding: 10px 10px 10px 15px; position:absolute;}
#right_list {	margin-left: 270px; float: left; width: 180px; height: 177px; padding: 10px 10px 10px 15px; position:absolute;}
#left_list div.menu_background { background-color: white; height: 100%; filter:alpha(opacity=75); /* IE's opacity*/ left: 0px; opacity: 0.75; position: absolute; top: 0px; width: 100%; z-index: 99;}
#right_list div.menu_background {
	background-color: #333333;
	height: 100%;
	filter:alpha(opacity=75); /* IE's opacity*/
	left: 0px;
	opacity: 0.50;
	position: absolute;
	top: 0px;
	width: 100%;
	z-index: 99;
}
#menu_L { margin-left:0; height: 200px; margin-top: -198px;}
#menu_R { margin-left: 440px; height: 200px; margin-top: -198px;}
.menu_contents { background-color:transparent; height: 100%; position: relative; width: 100%; z-index: 99;}

#left_list,#right_list {	font-family: Tahoma;	font-weight: bold;	font-size: 0.7em;	line-height: 1.4;}
#left_list ul, #right_list ul {	list-style: none;  font-weight: bold; font-size: 1.1em;}
#left_list ul ul, #right_list ul ul{ padding-left: 6px; font-weight: bold; font-size: 0.9em; margin-top: 3px;}

#left_list { color: #333333;}
#left_list a { color: #333333;	text-decoration: none;}
#left_list a:visited { color: #333333; text-decoration: none;}
#left_list a:hover { color: #333333; text-decoration: underline;}

#right_list {	color: #FFFFFF;}
#right_list a {	color: #FFFFFF;	text-decoration: none;}
#right_list a:visited {	color: #FFFFFF;	text-decoration: none;}
#right_list a:hover {	color: #FFFFFF;	text-decoration: underline;}

/*mainmenu ------------------------------------------------------------------------------*/

#mainmenu { width: 940px; padding: 5px 10px; background-color: #08204C; float: left;}
.top_menu { float:left; margin-left: 15px; padding-top: 5px; padding-right: 10px; color: #333333; font-weight: bold; font-size: 0.8em;}
.top_menu a { color: #FFFFFF;text-decoration: none;}
.top_menu a:visited {color: #FFFFFF; text-decoration: none;}
.top_menu a:hover {color: #FFFFFF;}
.anylinkcss{ width: 190px; position: absolute; visibility: hidden; border:1px solid black; line-height: 18px; z-index: 200; background-color: #E5E5E5; font-size: 0.8em; padding: 0;}
.anylinkcss a{width: 180px; display: block; border-bottom: 1px solid black; padding: 1px 5px; text-decoration: none; font-weight: bold; color: #333333;}
.anylinkcss a:hover { width: 180px; background-color:#E5E5E5; color: #333333; padding: 1px 5px;}
#box{text-align: left;}

#search { float: right; margin-left: 750px; width: 190px; height: 24px;	position: absolute; z-index: 2; background-image: url(../img/searcharea.png); background-position: center; background-repeat: no-repeat;}
#search input { background: none; width: 144px; color: #333333; margin-left: 13px; margin-top: 0; padding-top: 0;border: 0; outline: none; padding-right: 0; margin-right: 0; height: 21px; float: left; margin-top: 2px; }
#search .search_button { border: 0; background: url('../img/searchbutton.png') no-repeat center left; height: 20px; width: 20px; text-indent: -9999px; margin-left: 8px; margin-right: 5px;}

#container { width: 960px;	min-height: 380px;	background-color: #FFFFFF;}

#left {	width: 240px;	float: left; text-align: center; padding: 10px 5px;}
#left #counter { font-size: 0.8em; color: #999999; padding: 5px 0;}
#left #video { z-index: 1; margin-bottom: 10px;}
#left .perintah { text-align: center; margin-bottom: 10px;}
#left .perintah a img { border: none; }
#left .title { background-image: url(../img/bar.gif); height: 22px; padding-top: 3px; margin-bottom: 5px; font-size: 0.8em; font-weight: bold;}
#main {	width: 680px;	float: left;	padding: 10px 15px;}
#news, #event, #updates, #announce { width: 320px; float: left; padding: 0 10px; }
#main .title {	width: 250px; background-image: url(../img/bar.gif); background-repeat: no-repeat; height: 22px; padding-top: 3px; margin-bottom: 5px; font-size: 0.8em; font-weight: bold; text-align: center;}
#main .datenews { color: #F84C34; font-weight: bold; font-size: 0.7em; padding-top: 2px; float: right;}
#main .content { clear: left;}
#main .content .news_title { font-weight: bold; font-size: 0.8em; padding-top: 10px;}
#main .content .news_title a, #main .content .news_title a:visited {font-weight: bold; font-size: 1em; padding-top: 10px; color: #333333; text-decoration: none;}
#main .content .news_title a:hover {font-weight: bold; font-size: 1em; padding-top: 10px; color: #333333; text-decoration: underline;}
#main .content .news_imgicon {float: left; padding: 0 5px;}
#main .content .news_imgicon img {border: solid 1px black;}
#main .content .news_introtext { font-weight: normal; font-size: 0.7em; padding: 3px 0; text-align: justify; }
#main .content ul { list-style-image:url(../img/arrow.png); list-style-type:circle; list-style-position: inside; padding-left: 10px;}
#main .more { text-align: right; font-size: 0.7em; float: right; clear: left;}
#main .more a, #main .more a:visited{ color: #F84C34; text-decoration: none;}
#main .more a:hover {text-decoration: underline;}
#main .title a#rss img {border: none;}
#main #updates a, #main #updates a:visited{ color: #333333; text-decoration: none; font-size: 0.7em;}
#main #updates a:hover { text-decoration: underline;}
#main #event a, #main #quick a:visited{ color: #333333; text-decoration: none; font-size: 0.7em;}
#main #event a:hover { text-decoration: underline;}
#main #event li.end a, #main #quick li.end a:visited { color: #999999; text-decoration:none;}
#main #event a:hover li.end a:hover{ color: #999999; text-decoration:underline;}
#main #event .more a, #main #event .more a:visited, #main #event .more a:hover { font-size: 1em; color: #F84C34; }
#main #announce .content .ann_title {font-weight: bold; font-size: 0.8em; padding-top: 10px;}
#main #announce .content .ann_title a,#main #announce .content .ann_title a:visited { font-weight: bold; font-size: 1em; padding-top: 10px; color: #333333; text-decoration: none; }
#main #announce .content .ann_title a:hover {font-weight: bold; font-size: 1em; padding-top: 10px; color: #333333; text-decoration: underline;}
#main #announce .content .ann_introtext { font-weight: normal; font-size: 0.7em; padding: 3px 0; text-align: justify; }


/*SIDEBAR -----------------------------------------------------------------------------------------------------*/

#sidebar { width: 230px;	font-size: 0.6em;	font-family: Verdana;	font-weight: 900;	color:#333333; float:left;}

#sidebar 

#sidebar_mid { padding: 15px 5px 5px 5px; width: 220px;}
#sidebar_mid a{	color: #333333;	text-decoration: none;}
#sidebar_mid a:visited{	color: #333333;	text-decoration: none;}
#sidebar_mid a:hover{	color: #333333;	text-decoration: underline;}

/*horizontal line*/
#divider { width: 190px; height: 1px; margin: 10px auto; background-image:url(../img/line.jpg); background-repeat:repeat-x;  background-position:center;}

/*Style for LI elements in general (excludes an LI that contains sub lists)*/
#sidebar_mid .treeview li{ 	list-style-type: none;	padding-left: 25px;	margin-bottom: 3px;}
#sidebar_mid ul.treeview {	margin-bottom: 20px;}
#sidebar_mid ul.treeview li h2 { background-color: #08204C; color: #FFFFFF; font-size: 1.0em; text-align:center; font-size: 1em; padding-top: 5px; padding-bottom: 5px;}

/* Style for LI that contains sub lists (other ULs). */
#sidebar_mid ul.treeview li{ 	cursor: pointer; }

/*Style for ULs that are children of LIs (submenu) */
/*Hide them by default. Don't delete. */
#sidebar_mid .treeview li.submenu ul{ display: none;}

 /*Style for LIs of ULs that are children of LIs (submenu) */
#sidebar_mid .treeview .submenu ul li{	cursor: pointer;}
#sidebar_mid ul ul {	margin-top: 5px;}
#sidebar_mid li#select {	font-weight: normal;}
#sidebar_mid li {	font-weight:900;}
#sidebar_mid h1 {	font-size: 1.2em; margin: 0 10px 0 5px; text-align:center;}

#sidebar_mid h2 { background-color: #08204C; color: #FFFFFF; font-size: 1.0em; text-align:center; font-size: 1.1em; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px;}

/*CONTENT --------------------------------------------------------------------------------------------*/

#content {
	width: 680px; /* Actual width 760 = 720 + 20 (padding-left) + 20 (padding-right)*/
	margin-bottom: 10px;
	padding: 5px 20px 5px 20px;
	float: left;
	font-size: 0.7em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.5;
	text-align: justify;
	min-height: 430px;
}

#content h1 {	text-indent: 3px;	clear: left;	font-size: 1em;	margin-bottom: 5px; color: #08204C;}
#content h2 {	text-indent: 3px;	clear: left;	font-size: 1em;	margin: 10px 0 10px 0;}
#content h3 {	text-indent: 3px;	clear: left;	font-size: 1em;	margin-bottom: 5px;	background-color:#08204C;	color: #F3F3F5;}

/* GENERAL FORMAT FOR ORDERED AND UNORDERED LIST */

#content ul {	list-style-image: url(../img/arrow.png);	margin: 0 0 5px 35px;}
#content ol {	padding-left: 35px;}
#content ol ol{	list-style-type: lower-alpha;	padding-left: 20px;}
#content ul img {	border: none;}

/* GENERAL FORMAT FOR PARAGRAPHS*/

#content p{	padding: 5px 15px 10px 15px;}

/* GENERAL FORMAT FOR LINKS / ANCHORS */
#content a { text-decoration:underline;	color:#333333;}
#content a:visited { text-decoration:underline;	color:#333333;}
#content a:hover { text-decoration:underline;	color:#333333;}
#content a[href^="http:"] { display:inline-block;padding-right:14px;background:transparent url(../img/external.png) center right no-repeat;}

/* For division custom module */
#compulsory {	color: #FF0000;	font-weight: bold;}
#content h2 a {	text-decoration:none;}
#content h2 a:visited {	text-decoration:none;}
#content h2 a:hover {	text-decoration:underline;}

#content li a {	color: #333333;	text-decoration: underline;}
#content li a:visited {	color: #333333;	text-decoration: underline;}
#content li a:hover {	color: #333333;	text-decoration: underline;}

#content img {	margin: 5px 10px 5px 10px;	border: 1px solid #333333;}

/* EXTERNAL LINK INDICATOR */

#content img#external {	border: none;	margin: 0;}
#content #img img {	margin: 5px 10px 5px 10px;	border: 1px solid #333333;	padding: 5px;	float: right;}

/* GENERAL FORMAT FOR TABLE */

#content table {	width: 98%;	border-collapse:collapse;}
#content thead { background-color: #08204C; }
#content thead  tr td { color: #F3F3F5; font-weight: bold; }
#content tbody {}
#content tbody tr td { color: #333333; font-weight: normal;  padding: 1px 2px;}

/* FOR Contact Module and Address box */
#contact label, #contact input, #contact textarea {	display: block;	width: 170px;	float: left; margin: 0; padding: 0;	margin-bottom: 10px;}
#contact label {	text-align: right;	width: 80px;	padding-right: 20px;	font-weight: bold;}
#contact textarea {	width: auto;}
#contact br {	clear: left;}

#content #contact_text { margin: 0 auto; width: 60%; border: 1px solid #333333;}
#content #contact_text #contact_title{ background-color: #08204C; color: #FFFFFF; padding: 2px 10px;}
#content #contact_text #contact_content { padding: 2px 10px;}


/*BREADCRUMB ------------------------------------------------------------------------------------------*/

#breadcrumb {	width: 670px;	padding-left: 5px;	margin-bottom: 10px;	margin-top: 10px;	color: #5AADDC; font-size: 1em;}
#breadcrumb a{ color: #5AADDC;	text-decoration: none;}
#breadcrumb a:visited{ color: #5AADDC;	text-decoration: none;}
#breadcrumb a:hover{ color: #5AADDC;	text-decoration: underline;}

/*EVENTS AND ARTICLES ---------------------------------------------------------------------------------*/

div#break { clear: both;}
span.author { float: left;}
span.date { float:right;}
p.intro { clear: left;}
span.more { float: right;}
#content span.more a, span.more a:visited { color: #F84C34; text-decoration: none;}
#content span.more a:hover { color: #F84C34; text-decoration: underline;}
span.edit { color: #666666; font-size: 0.8em; font-style:italic; float: left;}

div.date {padding: 2px 5px; clear: both;}
div.startdate { float: left; padding: 2px 5px;}
div.enddate { float: left; clear: right; padding: 2px 5px;}

#content .event { border: 1px solid #333333; margin-bottom: 5px; text-align: left; padding: 10px 5px; background-color: #D9E8FD;}
#content .event .title {}
#content .event .date { float: left; font-size: 0.8em; margin-right: 10px;}


/*HIPERRANGKAI ----------------------------------------------------------------------------------------*/
.hiperrangkai { width: 700px; margin-left: 260px;}
.hiperrangkai .title { color: #5AADDC; font-style: italic; font-size: 0.8em; margin-bottom: 5px; padding: 0 5px;}
.hiperrangkai .logos { text-align: center;}
.hiperrangkai .logos a img { border: none; margin-bottom: 5px; padding: 0 5px;}

#container .hiperrangkai { width: 700px; margin-left: 260px;}
#container .hiperrangkai .title { color: #5AADDC; font-style: italic; font-size: 0.8em; margin-bottom: 5px; padding: 0 5px;}
#container .hiperrangkai .logos { text-align: center;}
#container .hiperrangkai .logos a img { border: none; margin-bottom: 5px; padding: 0 5px;}

/*FOOTER ----------------------------------------------------------------------------------------------*/

#footer {	width: 960px;	clear: both;	background-color: #08204C;	color: #FFFFFF;	text-align: center;	padding: 10px 0;	font-size: 0.8em; height: 70px;}
#footer a, #footer a:visited { color: #FFFFFF; text-decoration: none;}
#footer a:hover { color: #FFFFFF; text-decoration: underline;}
#footer #copyright { color: #FFFFFF; font-size: 0.8em; padding: 5px 0;}