html,body { min-height:100%; font-family: Verdana, Sans-serif; font-size:12px; background:#f5fafb url(../images/bg.png) left top repeat-x; }
.clear { clear:both; }
.clearfix:after { content: " "; /* Older browser do not support empty content */ visibility: hidden; display: block; height: 0; clear: both; }
.nopadd { padding:0 !important; }
.marked td{ background-color:#FFCC99 !important; }
.row-number { text-align:right; }

/* roundies */
.roundies { -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; }
.roundies2 { -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.roundies3 { -webkit-border-bottom-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; }
.roundies4 { -webkit-border-top-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.shadow { -moz-box-shadow: 0 0 8px #666; -webkit-box-shadow: 0 0 8px #666; box-shadow: 0 0 8px #666; }
.inp  { width:100%; border:0; background:0; }

/* login */
#wrap-login { width:778px; height:193px; position:absolute; top:50%; left:50%; margin-left:-389px; margin-top:-150px; background:url(../images/bg-logo.png) left top repeat-x; }
#wrap-login table { position:absolute; top:87px; left:241px; }
#ox { position:absolute; bottom:-20px; right:213px; }
#ox span { float:left; color:#999; font:11px Arial; }
#ox img { float:left; padding-left:5px; }
#ox2 { position:absolute; top:12px; right:10px; }
#ox2 span { float:left; color:#fff; font:11px Arial; }
#ox2 img { float:left; padding-left:5px; }
#msg-login { position:absolute; bottom:-104px; left:220px; width:339px; }
#fm { position:absolute; bottom:-22px; left:214px; }
#fm span { float:left; color:#999; font:11px Arial; display:block; margin:3px 0 0 5px; }
#fm img { float:left; padding-left:5px; display:block; }
#fm2 { position:absolute; top:8px; left:10px; }
#fm2 span { float:left; color:#fff; font:11px Arial; display:block; margin:3px 0 0 5px; }
#fm2 img { float:left; padding-left:5px; display:block; }

#wrapper { min-width:1000px; width:96%; margin:0 auto; }
#top-time { position:absolute; top:10px; right:100px; font:18px Verdana,Arial; color:#fff; }
#top { position:relative; height:68px; background:url(../images/bg-top.png) repeat-x; border-left:2px solid #fff; border-right:2px solid #fff; border-bottom:2px solid #fff; }
#top h1 { font-size:18px; position:absolute; top:12px; left:10px; color:#fff; }
#top .alpha { font-size:14px; position:absolute; top:-3px; left:360px; color:yellow; }
#top-link { position:absolute; top:46px; right:100px; color:#006699; font-size:11px; }
#top-link a { font-size:11px; color:#006699; text-decoration:none; }
#top-link a:hover { text-decoration:underline; }
#top-logout { position:absolute; top:10px; right:30px; color:#006699; font-size:11px; }
#nav { height:28px; background:url(../images/bg-menu.png) repeat-x; border-left:2px solid #fff; border-right:2px solid #fff; border-bottom:2px solid #fff; }

#container { background:#ffffff; border:2px solid #fff; margin-top:15px; }
#content { padding:10px 20px 10px; min-height:350px; }

#content h1 { text-align:left; margin:0 0 10px; font-size:18px; font-weight:bold; color: #006699; }
#content h2 { color: #006699; }
#footer { height:38px; background:url(../images/bg-footer.png) repeat-x; position:relative; border-top:2px solid #fff; }

#crumbs { margin-bottom:30px; }
#crumbs li { float:left; margin-right:4px; font:12px Verdana,Arial; }
#crumbs li a { text-decoration:none; font:12px Verdana, Arial; }
#crumbs li a:hover { text-decoration:underline; }

.input-login { width:200px; height:30px; background:url(../images/input.png) no-repeat; position:relative; }
.input-login input { width:182px; position:absolute; top:8px; left:8px; font:11px Verdana,arial; color:#fff; background:0; border:0; }
.btn-login { width:94px; height:70px; background:url(../images/btn-login.png) no-repeat; cursor:pointer; border:0; margin:4px 0 0 6px; }

.table { width:100%; }
.table tr th { background:#fff; color:#000; font:bold 12px Arial; border:1px solid #ccc; vertical-align:middle !important; padding:2px 2px; }
.table tr td { background:#fff; color:#000; font:12px Arial, Arial; padding:2px 2px; border:1px solid #ccc; }
.table tr td a { color:#017d9c; font:11px Arial; text-decoration:none; }
.table tr td input,
 .table tr td textarea { border:none; background:none; }
.table tr.odd { background-color:#fff; }
.table tr.even { background-color:#F7F7F7; }
.table tr:hover td { background-color:#ddf4ff; }

/*.table-print { width:100%; }
.table-print tr th { height:28px; background:#eee; color:#025A8D; padding:2px 2px; font:bold 10px Verdana,Arial; border:1px solid #ccc; vertical-align:middle !important; }
.table-print tr td { color:#000; font:10px Verdana, Arial; padding:2px 2px; border:1px solid #ccc; }*/

.table-print { width:100%; border-spacing: 0; border-collapse:separate !important; }
.table-print tr th { background:#fff; color:#000; padding:2px 2px; font:bold 10px Verdana,Arial; border:1px solid #000; vertical-align:middle !important; }
.table-print tr td { color:#000; font:10px Verdana, Arial; padding:2px 2px; border:1px solid #000; }

.table-print2 { width:100%; border-spacing: 0; border-collapse:separate !important; }
.table-print2 tr th { background:#fff; color:#aaaaaa; padding:2px 2px; font:bold 10px Verdana,Arial; border:1px solid #aaaaaa; vertical-align:middle !important; }
.table-print2 tr td { color:#aaaaaa; font:10px Verdana, Arial; padding:2px 2px; border:1px solid #aaaaaa; }

.head-print {}
.head-print h1 { color:#000; font-size:14px; text-align:center; font-family:Georgia,'Times New Roman'; font-weight:bold; margin:20px 0 20px; position:relative; }
.head-print img { position:absolute; top:10px; left:30px; width:100px; }

.table-input { width:100%; }
.table-input tr td { padding:6px 0 6px; background-color:#f6fbff; padding:4px 10px; border:1px solid #849fc2; }
.table-input tr td.label { width:200px; }
.table-input tr td.top { vertical-align:top; }
.table-input tr td .note { /*display:block; margin-top:3px;*/ margin-left:10px; color:#000080; font:10px Verdana, Lucida Grande, Sans-serif; font-style:italic; }
.table-input tr td .inputbox { width:300px; background:none; padding:4px; border:1px solid #ccc; background-color:#fff; 
	-moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; 
	-moz-box-shadow: 0 0 8px #ccc; -webkit-box-shadow: 0 0 8px #ccc; box-shadow: 0 0 8px #ccc; }
.table-input tr td .textarea { width:400px; height:80px; background:none; border:1px solid #ccc; padding:4px; background-color:#fff; font:12px Verdana,Arial;
	-moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;
	-moz-box-shadow: 0 0 8px #ccc; -webkit-box-shadow: 0 0 8px #ccc; box-shadow: 0 0 8px #ccc; }
.table-input tr td .button, .fb-btn {
	color:#000;
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    background-color: #EEEEEE;
    background-image: url("../icon/fb.png");
    background-position: 0 -49px;
    background-repeat: no-repeat;
    border-color: #999999 #999999 #888888;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    line-height: normal !important;
    padding: 4px 8px;
    text-align: center;
    text-decoration: none;
    vertical-align: top;
    white-space: nowrap; 
}

.table-input tr td .button span {
	background: none repeat scroll 0 0 transparent;
    border: 0 none;
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-family: Verdana, 'Lucida Grande', Arial,sans-serif;
    font-size: 11px;
    font-weight: bold;
    margin: 0;
    outline: medium none;
    padding: 1px 0 2px;
    white-space: nowrap;
}

/* shortcut */
.wrap-shortcut {}
.shortcut-icon { width:108px; height:97px; margin:0 10px 10px 0; float:left; display:block; border:0px solid #ccc; color:#000; font:10px Arial; text-decoration:none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.shortcut-icon img { display:block; margin:0 auto; padding:10px; }
.shortcut-icon span { display:block; text-align:center; }

/* profile board */
.profile-board {}
.profile-board .header { padding:6px 10px; border:1px solid #c8e6ff; font:bold 12px Verdana,Arial; color:#222;
background:url(../images/bg-head-profile.png) repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dcdbda',GradientType=0 );
}
.profile-board .content { padding:6px 10px; border:1px solid #c8e6ff;
background:url(../images/bg-profile.png) repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 );

}

/* button */
.wrap-btn { background-color:#e7e6e6; border:1px solid #63bdff; padding:8px 8px 4px; margin-bottom:10px; }
.btn-tambah { width:114px; height:35px; background:url(../images/btn-tambah.png) no-repeat; display:block; outline:0; }
.btn-edit { width:114px; height:35px; background:url(../images/btn-edit.png) no-repeat; display:block; outline:0; }
.btn-hapus { width:114px; height:35px; background:url(../images/btn-hapus.png) no-repeat; display:block; outline:0; }
.btn-detail { width:114px; height:35px; background:url(../images/btn-detail.png) no-repeat; display:block; outline:0; }
.btn-cetak { width:114px; height:35px; background:url(../images/btn-cetak.png) no-repeat; display:block; outline:0; }
.btn-kembali { width:114px; height:35px; background:url(../images/btn-kembali.png) no-repeat; display:block; outline:0; }
.btn-label { width:114px; height:35px; background:url(../images/btn-label.png) no-repeat; display:block; outline:0; }
.submitAdd { margin-left:5px; }

.table-info { }
.table-info tr td { padding-bottom:4px; font:11px Verdana; }

.fb-icon-image { background-image: url(../icon/fb2.png); background-repeat: no-repeat; display: inline-block; }
.fb-icon-1 { margin-top: 2px; vertical-align: top; margin-right:5px; }
.fb-icon-2 { margin-top: 4px; vertical-align: top; margin-right:5px; }
.fb-icon-plus { background-position: -8px -440px; height: 14px; width: 8px;}
.fb-icon-save { background-position: -9px -326px; height: 8px; width: 10px;}
a:hover i.fb-icon-save { background-position: -14px -285px; height: 8px; width: 10px;}
.fb-icon-imagec { background-image: url(../icon/close.png); background-repeat: no-repeat; display: inline-block; }
.fb-iconc { margin-top: 2px; vertical-align: top; margin-right:5px; }
.fb-icon-close { background-position: 0px 0px; height: 11px; width: 11px;}
a:hover i.fb-icon-close { background-position: 0px -36px; height: 11px; width: 11px;}

.custom-view { margin-bottom:10px; border:1px solid #63bdff; background-color:#e7e6e6; padding:8px; }
.custom-view select { font-family:Verdana, Sans-serif; font-size:12px;}
.custom-view .inputbox { font-family:Verdana, Sans-serif; font-size:12px; border:1px solid #63BDFF; padding:4px; }
.custom-view .button { font-family:Verdana, Sans-serif; font-size:12px; cursor:pointer; padding:2px 8px;
	background:#999; color:#fff; border:1px solid #4d4d4d;
}
.custom-view .button:hover{ background-color:#4d4d4d; }
.search-box { float:left; }
.order-box { float:right; }

.info, .success, .warning, .error, .validation { font-family:verdana; border: 1px solid; margin: 10px 0px; padding:15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.info { color: #00529B; background-color: #BDE5F8; background-image: url('../icon/info.png'); }
.success { color: #4F8A10; background-color: #DFF2BF; background-image:url('../icon/success.png'); }
.warning { color: #9F6000; background-color: #FEEFB3; background-image: url('../icon/warning.png'); }
.error { color: #D8000C; background-color: #FFBABA; background-image: url('../icon/error.png'); }
.info p, .success p, .warning p, .error p { line-height:18px; }

.pagination { margin-top:10px; padding-bottom:10px; }
.pagination a { display:block; float:left; padding:2px 5px; border:1px solid #8C8C8C; color:#8C8C8C; text-decoration:none; margin-right:3px; }
.pagination a:hover { background-color:#8C8C8C; color:#ffffff; }
.pagination strong { display:block; float:left; padding:2px 5px; border:1px solid #8C8C8C; background-color:#8C8C8C; color:#ffffff; margin-right:3px; }

fieldset { border:1px solid #ccc; padding:10px; margin-bottom:20px; font:11px verdana; }
fieldset legend { padding:0 10px; color:#0000ff; }
fieldset select { font:12px Verdana; }

.ul { clear:both; }
.ul,.ul li { margin:0 15px 10px 0; }
.ul li { float:left; }

.thetext p { margin-bottom:15px; }
.link-browse { color:#ff0000; text-decoration:none; padding-left:10px; }
.link-browse:hover { font-weight:bold; color:#ff0000; text-decoration:none; }
.font-total { font:11px Verdana; padding:8px 10px 0 0; color:#006699; }

.ui-widget-header { border:1px solid #63BDFF !important; }
.headtable, .headtable th {
	/* appearance */
	background-color: #8ca9cf !important;
	background-image: -moz-linear-gradient(
		top,
		rgba(255,255,255,0.4) 0%,
		rgba(255,255,255,0.2) 50%,
		rgba(255,255,255,0.1) 51%,
		rgba(255,255,255,0.0) 100%) !important;
	
	background-image: -webkit-gradient(
		linear, left top, left bottom,
		color-stop(0%,rgba(255,255,255,0.4)),
		color-stop(50%,rgba(255,255,255,0.2)),
		color-stop(51%,rgba(255,255,255,0.1)),
		color-stop(100%,rgba(255,255,255,0.0))) !important;
		
	/* text */
	color: #121517 !important;
	font-size: 12px !important;
	font-weight: bold !important;
	text-shadow: 0 1px 1px #e8ebee !important;
}

.body tr.odd { 
/* appearance */
	background-color: #d6e0ef !important;
	background-image: -moz-linear-gradient(
		top,
		rgba(255,255,255,0.4) 0%,
		rgba(255,255,255,0.2) 50%,
		rgba(255,255,255,0.1) 51%,
		rgba(255,255,255,0.0) 100%) !important;
	
	background-image: -webkit-gradient(
		linear, left top, left bottom,
		color-stop(0%,rgba(255,255,255,0.4)),
		color-stop(50%,rgba(255,255,255,0.2)),
		color-stop(51%,rgba(255,255,255,0.1)),
		color-stop(100%,rgba(255,255,255,0.0))) !important;
}

.body tr td { font-size: 12px !important; padding-top:3px !important; padding-bottom:3px !important; }

.bulk li { float:left; margin-left:20px; margin-top:2px; position:relative; z-index:1000; }
.bulk-sub { width:420px; border:1px solid #000080; padding:5px; background:#ccc; position:absolute; top:24px; left:2px; }
.btn-grey {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:14px;
	font-weight:bold;
	padding:4px 12px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
	cursor:pointer;
}.btn-grey:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}.btn-grey:active {
	position:relative;
	top:1px;
}

.tr-red td { color:#ff0000 !important; }
.tr-grey td { color:#555555 !important; }