body {
	margin: 0px;
	padding: 0px;
    font-family: "trebuchet MS", Arial;
	font-size: 11px;
	background:#B0BDDC;
}
	
#content-holder{ margin-top:10px;}

/*tombol2*/
.edit, .delete , .view,.deactivate,
.activate,.psw,.assign,
.inp-kids,.inp-couple,.inp-educ,
.inp-pos,.inp-reward,.inp-train,
.inp-matpel,.inp-kelas{width:25px;height:25px;font-size:0.8em;
						color:#FFFFFF;float:left;text-transform:uppercase;
						text-decoration:none;border:1px solid;border-color:transparent;}

.edit {background:url(../images/edit-icon.png) no-repeat;}
.edit:hover {background:url(../images/edit-icon.png) no-repeat #F9F9F9;border:1px solid #CCC;}
.delete {background:url(../images/delete-icon.png) no-repeat;}
.delete:hover{background:url(../images/delete-icon.png) no-repeat #F9F9F9;border:1px solid #CCC;}
.view { background:url(../images/view_details-icon.png) no-repeat;}
.view:hover {background:url(../images/view_details-icon.png) no-repeat #F9F9F9;border:1px solid #CCC;}
.activate {background:url(../images/approve-icon.png) no-repeat;}
.activate:hover {background:url(../images/approve-icon.png) no-repeat #F9F9F9;border:1px solid #CCC;}
.deactivate {background:url(../images/cancel-icon.png) no-repeat;}
.deactivate:hover {background:url(../images/cancel-icon.png) no-repeat #F9F9F9;border:1px solid #CCC;}
.psw { background:url(../images/password-icon.png) no-repeat;}
.psw:hover {background:url(../images/password-icon.png) no-repeat #F9F9F9;border:1px solid #CCC;}
.assign { background:url(../images/assign-icon.png) no-repeat;}
.assign:hover {background:url(../images/assign-icon.png) no-repeat #F9F9F9;border:1px solid #CCC;}
.inp-kids {background:url(../images/anak-icon.png) no-repeat;}
.inp-kids:hover {background:url(../images/anak-icon.png) no-repeat #F9F9F9;border:1px solid #CCC;}
.inp-couple { background:url(../images/pasangan-icon.png) no-repeat;}
.inp-couple:hover {background:url(../images/pasangan-icon.png) no-repeat #F9F9F9;border:1px solid #CCC;}
.inp-educ { background:url(../images/pendidikan-icon.png) no-repeat;}
.inp-educ:hover {background:url(../images/pendidikan-icon.png) no-repeat #F9F9F9;border:1px solid #CCC;}
.inp-pos { background:url(../images/jabatan-icon.png) no-repeat;}
.inp-pos:hover {background:url(../images/jabatan-icon.png) no-repeat #F9F9F9;border:1px solid #CCC;}
.inp-reward{ background:url(../images/reward-icon.png) no-repeat;}
.inp-reward:hover {background:url(../images/reward-icon.png) no-repeat #F9F9F9;border:1px solid #CCC;}
.inp-train{ background:url(../images/penataran-icon.png) no-repeat;}
.inp-train:hover {background:url(../images/penataran-icon.png) no-repeat #F9F9F9;border:1px solid #CCC;}
.inp-matpel{ background:url(../images/matpel-icon.png) no-repeat;}
.inp-matpel:hover {background:url(../images/matpel-icon.png) no-repeat #F9F9F9;border:1px solid #CCC;}
.inp-kelas{ background:url(../images/kelas-icon.png) no-repeat;}
.inp-kelas:hover {background:url(../images/kelas-icon.png) no-repeat #F9F9F9;border:1px solid #CCC;}


.delete_sel,.edit_sel,.saveorder,.download_sel{cursor:pointer;width:65px;height:25px;border:1px solid #EEE;margin-right:2px;text-indent: -1999px;text-decoration:none;float:left;}
.delete_sel:hover {border:1px solid #333;background:url(../images/delete_sel-icon.png) no-repeat #D9ECF3;}
.edit_sel:hover{border:1px solid #333;background:url(../images/edit_sel-icon.png) no-repeat #D9ECF3;}
.saveorder:hover{border:1px solid #333;background:url(../images/saveorder.png) no-repeat #D9ECF3;}
.download_sel:hover{border:1px solid #333;background:url(../images/download_sel-icon.png) no-repeat #D9ECF3;}
.delete_sel{background:url(../images/delete_sel-icon.png) no-repeat;}
.edit_sel{background:url(../images/edit_sel-icon.png) no-repeat;}
.saveorder{background:url(../images/saveorder.png) no-repeat;}
.download_sel{background:url(../images/download_sel-icon.png) no-repeat;}



input.searchbutton {background-color:transparent;background-image:url(/static/img/button-gothere-white.gif);background-repeat:no-repeat;border:0 none;
cursor:pointer;
font-size:16px;
font-weight:bold;
height:34px;
margin-top:5px;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
width:95px;
}
input.searchbutton.small {color:#333333;background-image:url(../img/button-search-small.gif);font-size:12px;height:26px;width:58px;}

.topmenu {font-family:arial; font-size:8pt;}
.topmenu a{color:#999;text-decoration:none;}
.topmenu a:hover{color:#333;text-decoration:underline;}
/*menu-utama*/
.component-links{margin:0px 0px 0px 0px; }
.component-links  li{list-style-image:none;list-style-position:outside;list-style-type:none;background:#F0F3F8; border:1px solid #DDD; margin-bottom:5px;-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;}
.component-links li:hover{ background:#E9ECF3; }

/*Kolom Menu index*/
.module-icon-list{}
.row {clear:both;}
.col {width:31.3%;float:left;margin-right:2%;margin-bottom:18px;position:relative;}
.col h3{font-size:13px;font-weight:bold;margin-bottom:5px;margin-left:63px;}
.col h3 a{color :#000;}
.col p{margin-left:63px;}
.module-icon-list img {left:0;position:absolute;top:0;}

/*editor**/
div.wysiwyg { border: 1px solid #ccc; padding: 5px; background-color: #FFF; }
div.wysiwyg * { margin: 0; padding: 0; }
div.wysiwyg ul.panel { border-bottom: 1px solid #ccc; float: left; width: 100%; padding: 0 0 4px 0; }
div.wysiwyg ul.panel li { list-style-type: none; float: left; margin: 0 2px; }
div.wysiwyg ul.panel li.separator { height: 16px; margin: 0 4px; border-left: 1px solid #ccc; }
div.wysiwyg ul.panel li a { opacity: 0.6; display: block; width: 16px; height: 16px; background: url('../images/jquery.wysiwyg.gif') no-repeat -64px -80px; border: 0; cursor: pointer; padding: 1px; }
div.wysiwyg ul.panel li a:hover, div.wysiwyg ul.panel li a.active { opacity: 0.99; }
div.wysiwyg ul.panel li a.active { background-color: #f9f9f9; border: 1px solid #ccc; border-left-color: #AAA; border-top-color: #AAA; padding: 0; }
div.wysiwyg ul.panel li a.bold { background-position: 0 -16px; }
div.wysiwyg ul.panel li a.italic { background-position: -16px -16px; }
div.wysiwyg ul.panel li a.strikeThrough { background-position: -32px -16px; }
div.wysiwyg ul.panel li a.underline { background-position: -48px -16px; }
div.wysiwyg ul.panel li a.justifyLeft { background-position: 0 0; }
div.wysiwyg ul.panel li a.justifyCenter { background-position: -16px 0; }
div.wysiwyg ul.panel li a.justifyRight { background-position: -32px 0; }
div.wysiwyg ul.panel li a.justifyFull { background-position: -48px 0; }
div.wysiwyg ul.panel li a.indent { background-position: -64px 0; }
div.wysiwyg ul.panel li a.outdent { background-position: -80px 0; }
div.wysiwyg ul.panel li a.subscript { background-position: -64px -16px; }
div.wysiwyg ul.panel li a.superscript { background-position: -80px -16px; }
div.wysiwyg ul.panel li a.undo { background-position: 0 -64px; }
div.wysiwyg ul.panel li a.redo { background-position: -16px -64px; }
div.wysiwyg ul.panel li a.insertOrderedList { background-position: -32px -48px; }
div.wysiwyg ul.panel li a.insertUnorderedList { background-position: -16px -48px; }
div.wysiwyg ul.panel li a.insertHorizontalRule { background-position: 0 -48px; }
div.wysiwyg ul.panel li a.h1 { background-position: 0 -32px; }
div.wysiwyg ul.panel li a.h2 { background-position: -16px -32px; }
div.wysiwyg ul.panel li a.h3 { background-position: -32px -32px; }
div.wysiwyg ul.panel li a.h4 { background-position: -48px -32px; }
div.wysiwyg ul.panel li a.h5 { background-position: -64px -32px; }
div.wysiwyg ul.panel li a.h6 { background-position: -80px -32px; }
div.wysiwyg ul.panel li a.cut { background-position: -32px -64px; }
div.wysiwyg ul.panel li a.copy { background-position: -48px -64px; }
div.wysiwyg ul.panel li a.paste { background-position: -64px -64px; }
div.wysiwyg ul.panel li a.increaseFontSize { background-position: -16px -80px; }
div.wysiwyg ul.panel li a.decreaseFontSize { background-position: -32px -80px; }
div.wysiwyg ul.panel li a.createLink { background-position: -80px -48px; }
div.wysiwyg ul.panel li a.insertImage { background-position: -80px -80px; }
div.wysiwyg ul.panel li a.html { background-position: -48px -48px; }
div.wysiwyg ul.panel li a.removeFormat { background-position: -80px -64px; }
div.wysiwyg ul.panel li a.empty { background-position: -64px -80px; }
div.wysiwyg iframe { border: 0; margin: 5px 0 0 0; clear: left; }

/* Dialog
----------------------------------*/
.ui-dialog { position: relative; padding: .2em; width: 300px; }
.ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative;  }
.ui-dialog-title { float: left; margin: .1em 0 .2em; }
.ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog-titlebar-close:hover, .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; }
.ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }


/* HEADER & BORDER 
-------------------------------------*/
.headerdiv {
	height:80px;
	background:#FFFFFF url(../images/simslogo.png) no-repeat;
}
.topdiv { background:#FFFFFF url(../images/top.png); height:25px;}
.bottomdiv { background:#FFFFFF url(../images/bottom.png); height:25px;}



/* MAIN CONTENT
-------------------------------------*/
.mid-container {background: #FFFFFF url(../images/middle.png) repeat-y;}

#header {text-align:center; height:40; margin-bottom:30px;}
#content-header{background:#F0F3F8; border:1px solid #DDD; margin-bottom:35px;margin-top:15px;-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;}
#module-title{float:left;font-size:14pt;text-transform:uppercase;font-weight:bold;margin-top:20px;margin-left:15px;}
#content-title {font-size:11pt;font-weight:bold;text-align:center;text-transform:uppercase;margin-top:20px;margin-bottom:20px}
#module-menu{float:right;margin:5px 5px 2px 5px;}
#module-menu a :hover{border:1px solid #CCC;}
#module-menu img:hover{-moz-border-radius-bottomleft:2px;-moz-border-radius-bottomright:2px;-moz-border-radius-topleft:2px;-moz-border-radius-topright:2px;background:#F9F9F9;}
#main-content {min-height:700px;}

/* MAIN CONTENT BEHAVIOR
-------------------------------------*/

/* menu samping*/
.side-menu {margin:0; min-height:550px;font-size:1.2em;font-weight:bold;}
.side-menu ul{width: 100%;margin:0;height:auto;}
.side-menu li:hover{ background:#E9ECF3;}
.side-menu li{position: relative;list-style-image:none;
			list-style-type:none;list-style-position:outside;}
.side-menu .li {  background:#F0F3F8; 
				border:1px solid #DDD;margin-bottom:3px;} 
.side-menu ul li.iehover { z-index: 1000; /* IE z-index bugfix */ } 
.side-menu ul ul { display: none; position: absolute;
				left: 90%; z-index: 9999; background:#F0F3F8;
				} 
.side-menu ul ul.top{top: 0px;}			
.side-menu ul ul.bottom{bottom: 0px;}
/* Root Menu */ 
.side-menu ul a {padding:5px;display:block;position:relative;color:#000;vertical-align:bottom;cursor:pointer;text-decoration: none;margin:0;padding-left:15px} 
/* 2nd Menu */
.side-menu ul li ul {border:1px solid #DDD;}
.side-menu ul li ul li {border:0px;border-bottom:1px solid #DDD;}
.side-menu ul li ul li a{
	padding:5px;font-weight:bold;vertical-align:middle;
	text-decoration:none;color:#000;padding-left:15px
}
.side-menu ul li ul li span{width:80%;}
.side-menu ul li:hover ul li,.side-menu ul li.iehover ul li { float: none; background: #F0F3F8; } 
/* 2nd Menu Hover Persistence */ 
.side-menu ul li:hover li:hover,.side-menu ul li:hover li:hover a:hover,
.side-menu ul li.iehover li,.side-menu ul li.iehover li.iehover{ background: #B0BDDC;color:#fff; } 
 /* next dropdown*/
 .gonext {background:transparent url(../images/blue-arrow.png) no-repeat scroll 92% center;}
 
/* table */
.general    {text-align:left;margin:0 auto;}
.general tbody tr {vertical-align:top;}
.general tbody td {border-spacing:0px;padding:2px;}
.general tr {vertical-align:top;}
.general td {border-spacing:0px;padding:2px;}


.table-list {border-spacing:0px;border:0px;margin:0 auto;}
.table-list .trFooter,.table-list .trfooter{border:0px;background:#C1C1C1;}
.table-list tr {vertical-align:middle;}
.table-list thead tr {vertical-align:middle;}
.table-list thead tr .thcolspan, .table-list thead tr .thcolspan,.table-list .trhead .thcolspan {background:#333;color:#F6F6F6}
.table-list thead tr th, .table-list thead tr td, .table-list tr th,.table-list .trhead td {background:#222;color:#F6F6F6}
.table-list .trheadEvn th,.table-list .trheadEvn td {background:#333;color:#F6F6F6}
.table-list thead tr .colEvn, .table-list thead tr .colEvn,.table-list .trhead .colEvn {background:#000;color:#F6F6F6}
.table-list thead tr .thcolspanEvn, .table-list thead tr .thcolspanEvn,.table-list .trhead .thcolspanEvn {background:#111;color:#F6F6F6}
.table-list .trheadEvn .colEvn {background:#111;color:#F6F6F6}
.table-list th a{color:#FFF;text-decoration:none;}
.table-list th a:hover{color:#55D;text-decoration:underline;}
.table-list tbody tr td, .table-list thead tr th {border-bottom:1px solid #FFF;}
.table-list .trOdd {background:#F6F6F6}
.table-list .trOdd .colEvn {background:#E9E9E9}
.table-list .trCurr {background:#F6F6A6}
.table-list .trCurr .colEvn {background:#E9E999}
.table-list .trEvn{background:#E5E5E5}
.table-list .trEvn .colEvn {background:#D5D5D5}
.table-list .trOdd:hover,.table-list .trEvn:hover {background:#D9ECF3;}
.table-list .trOdd:hover .colEvn,.table-list .trEvn:hover .colEvn {background:#B9CCD3;}
.table-list .trCurr:hover {background:#D9ECA3;}
.table-list .trCurr:hover .colEvn {background:#B9CC73;}

.schedule {margin:0 auto;border-spacing:0px;border:1px;border-left:1px solid #CCC;border-bottom:1px solid #CCC;}
.schedule th{background:#000;color:#F6F6F6;}
.schedule tr{background:#F6F6F6;}
.schedule td{background:#F6F6F6;border-top:1px solid #CCC;border-right:1px solid #CCC;}

.schedule-top {width:100%;height:25px;vertical-align:middle;font-weight:bold;font-size:10pt;color:#000;}
.schedule-top  a{color:#000;}
.schedule-nav {height:15px;border:1px solid #CCC;}

.submit {margin-top:20px;text-align:center;}

/* home menu */
.homemenudiv {height:140px;width:310px;float:left;margin-left:10px;margin-bottom:10px;text-align:center;border:1px solid #DDD;-moz-border-radius-bottomleft:6px;-moz-border-radius-bottomright:6px;-moz-border-radius-topleft:6px;-moz-border-radius-topright:6px;}
.homemenuimg {margin-top:28px;margin-left:23px;float:left;height: 64px;width: 64px;border:0px solid #ADC6F9;}
.homemenutitle {margin-top:30px;font-family: "Trebuchet MS", Arial;font-size  : 14pt;	font-weight: bold;	color : #333333;margin-left:110px;text-align:left;}
.homemenudesc {margin-top:5px;font-family: "Trebuchet MS", Arial;font-size  : 9pt;color : #666;margin-left:110px;text-align:left;}

.homeflashbox {padding:5px; border:1px solid #CCC; -moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;}

.ferror, .fsuccess {padding-top:10px;border:1px solid #CCC;width:300px;height:20px;background:#F0F3F8; text-align:center; position:absolute; left:35%;top:40%; z-index:100; opacity:.75;-moz-border-radius-bottomleft:6px;-moz-border-radius-bottomright:6px;-moz-border-radius-topleft:6px;-moz-border-radius-topright:6px;}
.ferror   {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.fsuccess {background:#E6EFC2;color:#264409;border-color:#C6D880;}

.datedaydiv {text-align:center;color:#FFF;font-size:16pt;width:40; background:#CCC;margin-left:3px; margin-top:3px;margin-bottom:1px;padding-top:5px; padding-bottom:5px;-moz-border-radius-topleft:8px;}
.datemonthdiv {text-align:center;color:#FFF;width:40; background:#000;margin-left:3px; margin-bottom:2px;-moz-border-radius-bottomright:8px;}

.logout {font-size:9pt;color:#ccc;}
.logout a {text-decoration:none;}
.logout a:hover {text-decoration:underline;}

.confirm {text-align:center;z-index:10;width:500px;position:absolute;top:30px;left:50%;margin-left:-250px;}

//pop-up ajax
div#nyroModalFull {
	font-size: 12px;
	color: red;
	font-family: Verdana;
	background:green;
}
div#nyroModalLoading {
	border: 4px solid #777;
	width: 150px;
	height: 150px;
	text-indent: -9999em;
	background: #fff url(../images/ajax-loader.gif) no-repeat;
	background-position: center;
}
div#nyroModalLoading.error {
	border: 4px solid #f66;
	line-height: 20px;
	padding: 20px;
	width: 300px;
	height: 100px;
	text-indent: 0;
	background: #fff;
}
div#nyroModalWrapper {
	background: #fff;
	border: 4px solid #777;
}
a#closeBut {
	position: absolute;
	display: block;
	top: -13px;
	right: -13px;
	width: 12px;
	height: 12px;
	text-indent: -9999em;
	background: url(../images/close.gif) no-repeat;
	outline: 0;
}
h1#nyroModalTitle {
	margin: 0;
	padding: 0;
	position: absolute;
	top: -22px;
	left: 5px;
	font-size: 12px;
	color: #ddd;
}
div.wrapper div#nyroModalContent {
	padding: 5px;
}
div.wrapperImg div#nyroModalContent {
	position: relative;
	overflow: hidden;
	text-align: center;
}
div.wrapperImg img {
	vertical-align: baseline;
}
div.wrapperImg div#nyroModalContent div {
	position: absolute;
	bottom: 0;
	left: 0;
	background: black;
	padding: 10px;
	margin: 10px;
	border: 1px white dotted;
	overflow: hidden;
	opacity: 0.2;
	filter: alpha(opacity=20);
}
div.wrapperImg div#nyroModalContent div:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
	cursor: help;
}
a.nyroModalPrev, a.nyroModalNext {
	z-index: 105;
	outline: none;
	position: absolute;
	top: 0;
	height: 100%;
	width: 40%;
	cursor: pointer;
	text-indent: -9999em;
	background-image: url(data:image/gif;base64,AAAA); /* Trick IE6 */
}
div .wrapperSwf a.nyroModalPrev, div.wrapperSwf a.nyroModalNext, div.wrapper a.nyroModalPrev, div.wrapper a.nyroModalNext {
	height: 60%;
	width: 20%;
}
a.nyroModalPrev {
	left: 0;
}
a.nyroModalPrev:hover {
	background: url(../img/prev.gif) left 20% no-repeat;
}
a.nyroModalNext {
	right: 0;
}
a.nyroModalNext:hover {
	background: url(../img/next.gif) right 20% no-repeat;
}

.pagingmenu {margin-top:10px;margin-bottom:10px;float:left;padding:4px;text-align:center;border:1px solid #F1F1F1;color:#999;width:12px;background:#F6F6F6;margin-left:5px;}	
.pagingmenu  a {text-decoration:none;color:#999;margin-bottom:10px;}	


/*LOGIN LAYOUT*/
#topdiv {
	margin: 0 auto;
	margin-top:120px;
	width:400px;
	height:25px;
	background:#FFFFFF url(../images/ltop.png);
}
#bottomdiv {
	margin: 0 auto;
	margin-top:0px;
	width:400px;
	height:25px;
	background:#FFFFFF url(../images/lbottom.png);
}
#middlediv {
	margin: 0 auto;
	width:400px;
	text-align: center;
	color: #999;
	background:#FFFFFF url(../images/lmiddle.png);
}

/*MYPOPUP layout*/
.popup-cont {top:0;left:0;position:fixed;width:100%;height:100%;background:transparent url(../images/transpbg.png) top left repeat;margin:0px;padding:0px;z-index:100;}
.popup {position:relative;height:300px;width:500px;background:#FFF;margin:0 auto;top:100px;margin-top:0;border:4px solid #CCC;}
.top-popup {background:#5970B2;} 
.popup-title {font-weight:bold;float:left;color:#FFF;margin-left:2px;}
.popup-content{margin:20px;}
.popup-label{color:#999;margin-top:30px;}
.popup-close{float:right;}
.popup-close a img {border:0px; text-decoration:none;margin:2px;}

/* USER GUIDE*/
#userguide {background:#326597;width:100%;margin-bottom:5px;padding-top:20px;display:none;text-align:center;}
#userguide-container{width:980px;text-align:left;margin:0 auto;}
#userguide-text {width:650px;margin-left:50px;color:#fff;float:left;border-right:1px solid #666;}
#userguide-submenu {width:150px;color:#fff;float:left; }
	#userguide-submenu div ul {list-style:none;margin:0px;background:#1D4E7E;}
	#userguide-submenu div ul li a{color:#FFF;text-decoration:none;}
#userguide-menu {width:120px;color:#fff;float:left;border-left:1px solid #CCC;margin:0px; }
	#userguide-menu  ul {list-style:none;margin:0px;}
	#userguide-menu  li:hover {cursor:pointer}
#userguide-close {margin-top:20px;height:20px;text-align:right;margin-right:50px;color:#fff;}
#userguide-close:hover {cursor:pointer}
#userguide-border{height:16px;background:#fff url(../images/userguide-border.gif)}

.btn_yes{
	background: transparent url(../images/yes.jpg) no-repeat;
	border:medium none;
	cursor:pointer;
	height : 20px;
	width : 37px;
}