/*-----------------*/
/* WEB SITE LAYOUT */
/*-----------------*/

body {
	width: 970px;	
	margin: 15px auto 0px auto;
	padding: 0px;	
	background: #C8D9CB url(../image/bg_970.jpg);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#000000;	
	font-size: 75%; /* default 100%(16px), 75%=12px */
	text-align: left;		
}
#container {
	width: 100%;
	position: relative;
}
.clear {
	clear:both;
}
* {
	margin: 0px;
	padding: 0px;
}
a {
	font-size:1em;
}
p {
	margin: 0px;
}
img {
	border-width:0px;
}
h1 {
	color:#000000;
	font-size:1.33em;
	margin: 0;
}

/********************** Header ***************************/
#header {
	background: #C8D9CB url(../image/header_970.jpg); 
	width: 100%;
	height:150px;
	position:absolute;
	font-size: 1em;	/* default 12px */
}
#header_text {
	left: 130px;
	top: 45px;
	width: 600px;
	position: absolute;
}
#header_text p {
	font-size: 20px;
	font-weight: bold;		
	color:#003366;
}
#header_text a {color:#28556b;}
#header_text a:hover {color:#c77e0c;}
#header ul {
	display:block;
	width:970px;
	height:24px;	
	margin-top: 120px;
	padding-top: 7px;
	text-align:left;
	position:absolute;
}
#header ul a {
	text-decoration:none;
	color:#FFFFFF;
}
#header ul a:hover {
	text-decoration:underline;
	color:#28556b;
}
#header_menu_left {
	float: left;
	padding-left: 25px;
	vertical-align: middle;	
}
#header_menu_right {
	float: right;
	padding-right: 27px;
	vertical-align: middle;	
}
#header li {
	display:inline;
	color:#FFFFFF;
	font-weight: bold;		
}

/********************** Content ***************************/
#content {
	width: 100%;
	background: #ececec url(../image/content_bg_970.jpg); /* #868A4C, #EBEBE2 and ECECEC */
}

#left {
	float: left;
	width: 180px;
	margin: 165px 8px 30px 25px; /* 25<->180<->8 => for aligning text */ 
	display: inline;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;	/* default 12px */	
}
#left a {
	color: #4AA02C;	
	font-weight: bold;	
	text-decoration: none;
}
#left a:hover {
	color:#C77E0C;
}
#left ul {
	padding: 10px 1px 0px 0px;
	margin: 0px;
	list-style-type: none;
}	

#left li {
	margin-bottom: 9px;
	list-style-type: none;
	line-height: 1.4em;
}
#left h2 {
	color: #C77E0C; 
	font-size:1.3em;	
	text-align:left;
	margin: 0px;
	padding-top: 3px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;		
}
#left hr {
	left: -3px;
	position: relative;
	margin-right: 0px;
	color:#FFFFFF;
}

#right {
	float:left;
	width:707px;
	min-height: 320px;
	margin: 165px 10px 30px 20px; /* 20<->707<->[RM,0-30] => for aligning text, [RM<=10] for IE <=6.0 workaround */
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	font-size: 1em;	/* default 12px */	
}
#right select, option {
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 1em;	
}
#right a {
	color: #53B031;	
	font-weight: bold;	
	text-decoration: none;
}
#right a:hover {
	color:#C77E0C;
}
#right h2 {
	font-size:1.17em;	
	color:#151B54;
	margin: 0;
}
#right h3 {
	margin: 0;	
	font-size:1.1em;	
	color:#151B54;
}
#right h4 {
	margin: 0;	
	font-size:1.03em;
	color:#151B54;	
}
#right h5 {
	margin: 0;	
	font-size:1em;
	color:#151B54;
}
#breadcrumbs {
	padding-top: 5px;
	color:#040F43;
	font-weight: bold;
	font-size:0.95em;
	vertical-align: middle;
}
#breadcrumbs a {
	color:#53B031;		
}
.menu-icon {
	width: inherit;
	padding: 0px;
}
.menu-icon a {
	display: block;
	float: left;
	width: 135px;
	height: 162px;
	margin: 5px 23px 23px 0px ;
	border: #ffffff 1px solid;
	text-align: center;
	font-size:0.94em;
	color: #1A5405 !important;		
}
.menu-icon a:hover {
	margin: 6px 23px 22px 0px ;
	border: #dedede 1px solid;
	background-color: #ececec;
	color:#869317 !important;
}
.menu-icon a:active {
	margin: 5px 23px 17px 0px ;
}
.menu-icon img {
	border: none;
	display: block;
	margin: 13px 5px 7px 15px;
}
#pageliner {
	width: 100%;
	clear:both;
	background: url(../image/content_bottom_970.jpg) no-repeat;  /* #EBEBE2 and #ECECEC */
	height: 20px;
	position: relative;
}
/********************** Footer ***************************/
#footer_bg {
	background: #A2B8A4 url(../image/footer_bg_970.jpg); /* #A2B8A4 and #ECECEC */	
	font-size:1em;	
	text-align:center;
	color: #660000;
	font-weight: bold;
	padding: 35px 0px 15px 0px;
}
#footer_bg a.anchor {
	position: absolute;
	right: 9px;
	bottom: 58px;
	width: 20px;
	height: 20px;
	background: url(../image/footer_anchor.png) 0 0 no-repeat;
	display: block;
	text-decoration: none;
}
#footer_bg a.anchor:hover { background-position: 0 -25px; }
#footer_bottom {
	background: #A2B8A4 url(../image/footer_bottom_970.jpg) no-repeat; /* #A2B8A4 and #ECECEC */	
	height: 20px;
	margin-bottom: 15px;	
}

/*--------------*/
/* TABLE LAYOUT */
/*--------------*/
table {
	width: 100%;
}

.div_table {
	width: 707px;
}

.centered-title {
	text-transform: none;
	text-align: center !important;
	background-color:#E6A9EC !important;
	padding:11px !important;
}
.leftsided-title {
	text-transform: none;
	text-align: left !important;
	background-color:#E6A9EC !important;
	padding:11px !important;
}
.centered-button {
	text-transform: none;
	text-align: center !important;
	background-color:#ECECEC !important;
	padding:20px !important;	
	border-left: 1px solid #ECECEC !important;
	border-right: 1px solid #ECECEC !important;
	border-bottom: 1px solid #ECECEC !important;
}

.table-portrait
{
	margin: 10px 0px 25px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;	
	border-collapse: collapse;
}
.table-portrait th
{
	padding: 10px 3px;
	font-weight: bold;
	color: #461B7E;
	background: #F0C33E;
	border: 1px solid #FCDFFF;	
	text-transform: capitalize;
	text-align: center;
	vertical-align: middle;	
}
.table-portrait td
{
	padding: 3px 3px;
	color: #151B54;	
	background: #FAF4C8;
	border: 1px solid #FCDFFF;
	text-transform: none;
	text-align: center;
	vertical-align: top;		
}
.table-portrait tbody tr:hover td
{
	background: #F0E184;
}


.table-landscape
{
	margin: 10px 0px 25px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;	
	text-align: left;
	vertical-align: middle;
	border-collapse: collapse;
}
.table-landscape th
{
	padding: 7px 10px;
	font-weight: bold;
	color: #461B7E;
	background: #D7DFF7;
	text-transform: capitalize;
	border: 1px solid #FCDFFF;
	border-right: 0px;
	text-align: left;	
}
.table-landscape td
{
	padding: 4px 10px;
	background: #E3E4FA; 
	border-top: 1px solid #FCDFFF;
	border-bottom: 1px solid #FCDFFF;		
	color: #151B54;
	vertical-align: middle;
	text-transform: none;
	text-align: left;	
}
.table-landscape tbody tr:hover td
{
	background: #D7DFF7;
}


.table-portrait-1
{
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;	
	border-collapse: collapse;
}
.table-portrait-1 tr
{
	background: #FAF4C8;
}	
.table-portrait-1 th
{
	padding: 10px 3px;
	font-weight: bold;
	color: #461B7E;
	background: #F0C33E;
	border: 1px solid #FCDFFF;	
	text-transform: capitalize;
	text-align: center;
	vertical-align: middle;
	white-space:nowrap;
}
.table-portrait-1 td
{
	padding: 3px 4px;
	color: #151B54;	
	border: 1px solid #FCDFFF;
	text-transform: none;
	text-align: center;
	vertical-align: top;
	white-space:nowrap;	
}
.table-portrait-1 tbody tr:hover td
{
	background: #F0E184;
}


.table-ltransaksi
{
	margin: 10px 0px 25px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;	
	vertical-align: middle;
	border-collapse: collapse;
}
.table-ltransaksi th
{
	padding: 5px 10px;
	font-weight: bold;
	color: #461B7E;
	background: #D7DFF7;
	text-transform: capitalize;
	border: 1px solid #FCDFFF;
	border-right: 0px;
	text-align: left;
}
.table-ltransaksi td
{
	padding: 5px 10px;
	background: #E3E4FA; 
	border-top: 1px solid #FCDFFF;
	border-bottom: 1px solid #FCDFFF;		
	color: #151B54;
	vertical-align: middle;
	text-transform: none;
	text-align: left;	
}


.table-ctransaksi
{
	margin: 10px 0px 25px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;	
	vertical-align: middle;
	border-collapse: collapse;
}
.table-ctransaksi th
{
	padding: 6px 10px;
	font-weight: bold;
	color: #461B7E;
	background: #D7DFF7;
	text-transform: capitalize;
	border: 1px solid #FCDFFF;
	border-right: 0px;
	text-align: center;
}
.table-ctransaksi td
{
	padding: 5px 10px;
	background: #E3E4FA;
	border: 1px solid #FCDFFF;
	color: #151B54;
	vertical-align: middle;
	text-transform: none;
	text-align: center;	
}


.table-input
{
	margin: 10px 0px 25px 0px;
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 1em;		
	vertical-align: middle;
	border-collapse: collapse;
}
.table-input th
{
	padding: 7px 10px;
	font-weight: bold;
	color: #461B7E;
	background: #d0dafd;
	text-transform: capitalize;
	border: 1px solid #FCDFFF;
	border-right: 0px;
	text-align: left;	
}
.table-input td 
{
	padding: 7px 10px;
	background: #E3E4FA;
	border-top: 1px solid #FCDFFF;
	border-bottom: 1px solid #FCDFFF;		
	color: #151B54;
	text-transform: none;
	text-align: left;		
}
.table-input td input
{
	text-transform: none;
	padding-left:2px;
}
.table-input tbody tr:hover td
{
	background: #d0dafd;
}


.table-riwayat
{
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;	
	text-align: left;
	vertical-align: middle;
	border-collapse: collapse;
}
.table-riwayat tr
{
	background: #E3E4FA;
}	
.table-riwayat th
{
	padding: 10px 5px;
	border: 1px solid #FCDFFF;
	background: #b9c9fe;
	font-weight: bold;
	color: #461B7E;
	text-align: center;	
	white-space: nowrap;	
	text-transform: capitalize;
}
.table-riwayat td
{
	padding: 5px 5px;
	border: 1px solid #FCDFFF;	
	color: #151B54;
	vertical-align: middle;
	text-align: left;
	white-space: nowrap;	
	text-transform: none;	
}
.table-riwayat tbody tr:hover td
{
	background: #d0dafd;
}


.table-duk
{
	margin: 0;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 0.92em;	
	text-align: center;
	vertical-align: top;
	border-collapse: collapse;
}
.table-duk tr
{
	background: #F0FAF1;
}	
.table-duk th
{
	font-size: 1em;	
	padding: 2px;
	font-weight: bold;
	color: #ffffff;
	background: #6FA373;
	text-transform: uppercase;
	border: 1px solid #FCDFFF;
}
.table-duk td
{
	padding: 3px 8px;
	border: 1px solid #FCDFFF;
	color: #151B54;
	white-space: nowrap;
	text-align: center;
	text-transform: none;	
}
.table-duk tbody tr:hover td
{
	background: #BFF2C4;
}


.table-rekap
{
	margin: 10px 0px 25px 0px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	text-align: center;
	vertical-align: middle;
	border-collapse: collapse;
	border: 1px solid #000;	
}
.table-rekap th
{
	padding: 5px 2px;
	font-weight: bold;
	font-size: 0.95em;
	color: #151B54;
	/*color: #0000A0;*/
	text-align: center;		
	text-transform: capitalize;
	border: 1px solid #000;		
}
.table-rekap td
{
	padding: 3px 1px;
	font-weight: bold;
	font-size: 0.92em;	
	color: #151B54;
	vertical-align: middle;
	text-align: center;
	border: 1px solid #000;		
}


.table-button
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	margin: 0px;
	padding: 0px;
	text-align: center;
	border-collapse: collapse;
	height: 20px;
}
.table-button td
{
	padding: 0px;
	background: #ECECEC;
	border-top: 0;
	border-bottom: 0;
	border-right: 0;
	border-left: 10px solid #ECECEC;
}


.table-link a {
	font-weight: normal !important;
	font-size: 1em !important;
}
.table-link a:hover {
	color: #151B54 !important;	
}


.button-1 {
  background: #ffffff url(../image/table-green.png);	
  color: #151B54;
  font-size: 0.93em;
  font-weight: bold;
  padding: 3px 5px;
  width: 70px;
  text-align: center;
}

.button-1b {
  background: #ffffff url(../image/table-green.png);	
  color: #151B54;
  font-size: 0.93em;
  font-weight: bold;
  padding: 3px 5px;
  width: 100px;
  text-align: center;
}

.button-1c {
  background: #ffffff url(../image/table-green.png);	
  color: #151B54;
  font-size: 0.93em;
  font-weight: bold;
  padding: 3px 5px;
  width: 115px;
  text-align: center;
}

.link-text-0 a {
	color: #53B031 !important;	
	font-size: 1em !important;		
}
.link-text-0 a:hover {
	color:#040F43 !important;
}
.link-text-1 a {
	color:#c77e0c !important; 
	font-size: 1em !important;		
}
.link-text-1 a:hover {
	color: #040F43 !important;	
}

.article {	
	font-size: 1.03em;
	line-height: 1.5em;
}
.article ul {
	padding-left:18px;
}
.article ol {
	padding-left:23px;
}
.article li {
	padding:0.2em;
}


ul.green {
	padding-right: 0px;
	margin: 0;
	list-style: none;
	background-color: #E3E4FA;
	/*border-bottom: 1px solid #e7e7e7;*/
	float: left;
	clear: left;
}
ul.green li {
	float: left;
	border-left: 10px solid #ececec;		
}
ul.green li a {
	float: left;
	text-decoration: none;
	color: #ccc;
	padding: 4px 15px 0 0;
	margin-right: 0px;
	font-size: 1em;
	/*font: 900 14px "Arial", Helvetica, sans-serif;*/
}
ul.green li a span {
	float: left;
	padding-right: 15px;
	display: block;
	margin-top: -4px;
	height: 24px;
}
ul.green li a:hover {
	background: url(../image/green.png) no-repeat top right;
}
ul.green li a:hover span {
	background: url(../image/green.png) no-repeat top left;
}
ul.green li a.current {
	background: url(../image/green.png) no-repeat top right;
}
ul.green li a.current span {
	background: url(../image/green.png) no-repeat top left;
}


#box_kalender {
	padding: 20px;
	border: 1px solid #FFFFFF ;
}

.bg_pink_1 {
	background-color: #FCDFFF;
}
.bg_pink_2 {
	background-color: #F8EBFA;	
}
.bg_hijau_1 {
	background-color: #E4FCE7;
}
.bg_hijau_2 {
	background-color: #D7F7DB;
}
.bg_biru_1 {
	background-color: #D5D5F7;
}
.bg_biru_2 {
	background-color: #E9E9F5;
}

.kotakinput {
	vertical-align: middle;
	margin: 0;
	padding: 0;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.92em;
}

.style13 {
	color: #342480;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.08em;
	font-weight: bold;
}
.style11 {
	color: #342480;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.92em;
	font-weight: bold;
}


/* ALERT LAYOUT */
/*--------------*/
#dialogoverlay{
	display: none;
	opacity: .8;
	position: fixed;
	top: 0px;
	left: 0px;
	background: #FFF;
	width: 100%;
	z-index: 10;
}
#dialogbox{
	display: none;
	position: fixed;
	background: #000;
	border-radius:7px; 
	width:550px;
	z-index: 10;
}
#dialogbox > div{ background:#FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; }
#dialogbox > div > #dialogboxbody{ background:#333; padding:20px; color:#FFF; }
#dialogbox > div > #dialogboxfoot{ background: #666; padding:10px; text-align:right; }