/* Admin Layout */
.width {
	margin:0 auto!important;
	text-align:left;
}
.layout100 .width {
	width:auto;
}
.layout90 .width {
	width:90%;
}
.layout75 .width {
	width:75%;
}
.layout980 .width {
	width:980px;
}
.layout1280 .width {
	width:1280px;
}
.layout1400 .width {
	width:1400px;
}
.layout1600 .width {
	width:1600px;
}
/*

*/

/* Deklarasi Global */

div.selector, div.selector span, div.checker span, div.radio span, div.uploader, div.uploader span.action {
	background-image: url(../img/forms.png);
	background-repeat: no-repeat;
}
.selector, .radio, .checker, .uploader, .selector *, .radio *, .checker *, .uploader * {
	margin: 0;
	padding: 0;
}
/* SPRITES */

/* Select */

div.selector {
	background-position: -483px -130px;
	line-height: 26px;
	height: 26px;
}
div.selector span {
	background-position: right 0px;
	height: 26px;
	line-height: 26px;
}
div.selector select {
	/* change these to adjust positioning of select element */
  top: 0px;
	left: 0px;
}
div.selector:active, div.selector.active {
	background-position: -483px -156px;
}
div.selector:active span, div.selector.active span {
	background-position: right -26px;
}
div.selector.focus, div.selector.hover, div.selector:hover {
	background-position: -483px -182px;
}
div.selector.focus span, div.selector.hover span, div.selector:hover span {
	background-position: right -52px;
}
div.selector.focus:active, div.selector.focus.active, div.selector:hover:active, div.selector.active:hover {
	background-position: -483px -208px;
}
div.selector.focus:active span, div.selector:hover:active span, div.selector.active:hover span, div.selector.focus.active span {
	background-position: right -78px;
}
div.selector.disabled {
	background-position: -483px -234px;
}
div.selector.disabled span {
	background-position: right -104px;
}
/* Checkbox */

div.checker {
	width: 19px;
	height: 19px;
}
div.checker input {
	width: 19px;
	height: 19px;
}
div.checker span {
	background-position: 0px -260px;
	height: 19px;
	width: 19px;
}
div.checker:active span, div.checker.active span {
	background-position: -19px -260px;
}
div.checker.focus span, div.checker:hover span {
	background-position: -38px -260px;
}
div.checker.focus:active span, div.checker:active:hover span, div.checker.active:hover span, div.checker.focus.active span {
	background-position: -57px -260px;
}
div.checker span.checked {
	background-position: -76px -260px;
}
div.checker:active span.checked, div.checker.active span.checked {
	background-position: -95px -260px;
}
div.checker.focus span.checked, div.checker:hover span.checked {
	background-position: -114px -260px;
}
div.checker.focus:active span.checked, div.checker:hover:active span.checked, div.checker.active:hover span.checked, div.checker.active.focus span.checked {
	background-position: -133px -260px;
}
div.checker.disabled span, div.checker.disabled:active span, div.checker.disabled.active span {
	background-position: -152px -260px;
}
div.checker.disabled span.checked, div.checker.disabled:active span.checked, div.checker.disabled.active span.checked {
	background-position: -171px -260px;
}
/* Radio */

div.radio {
	width: 18px;
	height: 18px;
}
div.radio input {
	width: 18px;
	height: 18px;
}
div.radio span {
	height: 18px;
	width: 18px;
	background-position: 0px -279px;
}
div.radio:active span, div.radio.active span {
	background-position: -18px -279px;
}
div.radio.focus span, div.radio:hover span {
	background-position: -36px -279px;
}
div.radio.focus:active span, div.radio:active:hover span, div.radio.active:hover span, div.radio.active.focus span {
	background-position: -54px -279px;
}
div.radio span.checked {
	background-position: -72px -279px;
}
div.radio:active span.checked, div.radio.active span.checked {
	background-position: -90px -279px;
}
div.radio.focus span.checked, div.radio:hover span.checked {
	background-position: -108px -279px;
}
div.radio.focus:active span.checked, div.radio:hover:active span.checked, div.radio.focus.active span.checked, div.radio.active:hover span.checked {
	background-position: -126px -279px;
}
div.radio.disabled span, div.radio.disabled:active span, div.radio.disabled.active span {
	background-position: -144px -279px;
}
div.radio.disabled span.checked, div.radio.disabled:active span.checked, div.radio.disabled.active span.checked {
	background-position: -162px -279px;
}
/* Uploader */

div.uploader {
	background-position: 0px -297px;
	height: 28px;
}
div.uploader span.action {
	background-position: right -409px;
	height: 24px;
	line-height: 24px;
}
div.uploader span.filename {
	height: 24px;
	/* change this line to adjust positioning of filename area */
  margin: 2px 0px 2px 2px;
	line-height: 24px;
}
div.uploader.focus, div.uploader.hover, div.uploader:hover {
	background-position: 0px -353px;
}
div.uploader.focus span.action, div.uploader.hover span.action, div.uploader:hover span.action {
	background-position: right -437px;
}
div.uploader.active span.action, div.uploader:active span.action {
	background-position: right -465px;
}
div.uploader.focus.active span.action, div.uploader:focus.active span.action, div.uploader.focus:active span.action, div.uploader:focus:active span.action {
	background-position: right -493px;
}
div.uploader.disabled {
	background-position: 0px -325px;
}
div.uploader.disabled span.action {
	background-position: right -381px;
}
/* PRESENTATION */

/* Select */
div.selector {
	margin-bottom: 20px;
	width: 190px;
	font-size: 12px;
}
div.selector select {
	width: 190px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size: 12px  border: solid 1px #fff;
}
div.selector span {
	padding: 0px 25px 0px 2px;
	cursor: pointer;
}
div.selector span {
	color: #666;
	width: 158px;
	text-shadow: 0 1px 0 #fff;
}
div.selector.disabled span {
	color: #bbb;
}
/* Checker */
div.checker {
	margin-top:4px;
}
/* Radio */
div.radio {
	margin-right: 10px;
}
/* Uploader */
div.uploader {
	width: 190px;
	margin-bottom: 20px;
	cursor: pointer;
}
div.uploader span.action {
	width: 85px;
	text-align: center;
	text-shadow: #fff 0px 1px 0px;
	background-color: #fff;
	font-size: 11px;
	font-weight: bold;
}
div.uploader span.filename {
	color: #777;
	width: 82px;
	border-right: solid 1px #bbb;
	font-size: 11px;
}
div.uploader input {
	width: 190px;
}
div.uploader.disabled span.action {
	color: #aaa;
}
div.uploader.disabled span.filename {
	border-color: #ddd;
	color: #aaa;
}
/*

CORE FUNCTIONALITY 

Not advised to edit stuff below this line
-----------------------------------------------------
*/

.selector select:focus, .radio input:focus, .checker input:focus, .uploader input:focus {
	outline: 0;
}
/* Select */

div.selector {
	position: relative;
	padding-left: 10px;
	overflow: hidden;
}
div.selector span {
	display: block;
	float: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
div.selector select {
	position: absolute;
	opacity: 0;
	height: 25px;
	border: none;
	background: none;
}
/* Checker */

div.checker {
	position: relative;
	float: left;
}
div.checker span {
	display: block;
	float: left;
	text-align: center;
}
div.checker input {
	opacity: 0;
	display: inline-block;
	background: none;
}
/* Radio */

div.radio {
	position: relative;
	float: left;
}
div.radio span {
	display: block;
	float: left;
	text-align: center;
}
div.radio input {
	opacity: 0;
	text-align: center;
	display: inline-block;
	background: none;
}
/* Uploader */

div.uploader {
	position: relative;
	float: left;
	overflow: hidden;
	cursor: default;
}
div.uploader span.action {
	float: left;
	display: inline;
	padding: 2px 0px;
	overflow: hidden;
	cursor: pointer;
}
div.uploader span.filename {
	padding: 0px 10px;
	float: left;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: default;
}
div.uploader input {
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	float: right;
	height: 25px;
	border: none;
	cursor: default;
}
/* Tispy Tooltips */

.tipsy {
	padding: 5px;
	font-size: 10px;
	opacity: 0.8;
	filter: alpha(opacity=80);
	background-repeat: no-repeat;
	background-image: url('../img/tipsy.gif');
}
.tipsy-inner {
	padding: 5px 8px 4px 8px;
	background-color: black;
	color: white;
	max-width: 200px;
	text-align: center;
}
.tipsy-inner {
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
.tipsy-north {
	background-position: top center;
}
.tipsy-south {
	background-position: bottom center;
}
.tipsy-east {
	background-position: right center;
}
.tipsy-west {
	background-position: left center;
}
/* Facebox */

#facebox .b {
	background:url('../img/facebox/b.png');
}
#facebox .tl {
	background:url('../img/facebox/tl.png');
}
#facebox .tr {
	background:url('../img/facebox/tr.png');
}
#facebox .bl {
	background:url('../img/facebox/bl.png');
}
#facebox .br {
	background:url('../img/facebox/br.png');
}
#facebox {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	text-align: left;
}
#facebox .popup {
	position: relative;
}
#facebox table {
	border-collapse: collapse;
}
#facebox td {
	border-bottom: 0;
	padding: 0;
}
#facebox .body {
	padding: 10px;
	background: #fff;
	width: 370px;
}
#facebox .loading {
	text-align: center;
}
#facebox .image {
	text-align: center;
}
#facebox img {
	border: 0;
	margin: 0;
}
#facebox .footer {
	border-top: 1px solid #DDDDDD;
	padding-top: 5px;
	margin-top: 10px;
	text-align: right;
}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .b, #facebox .br, #facebook .td {
	height: 10px;
	width: 10px;
	overflow: hidden;
	padding: 0;
	border:none;
}
#facebox .tl, #facebox .b, #facebox .bl {
	width:9px;
}
#facebox_overlay {
	position: fixed;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%;
}
.facebox_hide {
	z-index:-100;
}
.facebox_overlayBG {
	background-color: #000;
	z-index: 99;
}
* html #facebox_overlay { /* ie6 hack */
	position: absolute;
 height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
/* Visualise Graphs */

/*plugin styles*/
.visualize {
	border: 1px solid #888;
	position: relative;
	background: #fafafa;
	margin:25px auto;
}
.visualize canvas {
	position: absolute;
}
.visualize ul, .visualize li {
	margin: 0;
	padding: 0;
}
/*table title, key elements*/
.visualize .visualize-info {
	padding: 3px 5px;
	background: #fafafa;
	border: 1px solid #888;
	position: absolute;
	top: -20px;
	right: 10px;
	opacity: .8;
}
.visualize .visualize-title {
	display: block;
	color: #333;
	margin-bottom: 3px;
	font-size: 1.1em;
}
.visualize ul.visualize-key {
	list-style: none;
}
.visualize ul.visualize-key li {
	list-style: none;
	float: left;
	margin-right: 10px;
	padding-left: 10px;
	position: relative;
}
.visualize ul.visualize-key .visualize-key-color {
	width: 6px;
	height: 6px;
	left: 0;
	position: absolute;
	top: 50%;
	margin-top: -3px;
}
.visualize ul.visualize-key .visualize-key-label {
	color: #000;
}
/*pie labels*/
.visualize-pie .visualize-labels {
	list-style: none;
}
.visualize-pie .visualize-label-pos, .visualize-pie .visualize-label {
	position: absolute;
	margin: 0;
	padding:0;
}
.visualize-pie .visualize-label {
	display: block;
	color: #fff;
	font-weight: bold;
	font-size: 1em;
}
.visualize-pie-outside .visualize-label {
	color: #000;
	font-weight: normal;
}
/*line,bar, area labels*/
.visualize-labels-x, .visualize-labels-y {
	position: absolute;
	left: 0;
	top: 0;
	list-style: none;
}
.visualize-labels-x li, .visualize-labels-y li {
	position: absolute;
	bottom: 0;
}
.visualize-labels-x li span.label, .visualize-labels-y li span.label {
	position: absolute;
	color: #555;
}
.visualize-labels-x li span.line, .visualize-labels-y li span.line {
	position: absolute;
	border: 0 solid #ccc;
}
.visualize-labels-x li {
	height: 100%;
}
.visualize-labels-x li span.label {
	top: 100%;
	margin-top: 5px;
}
.visualize-labels-x li span.line {
	border-left-width: 1px;
	height: 100%;
	display: block;
}
.visualize-labels-x li span.line {
	border: 0;
} /*hide vertical lines on area, line, bar*/
.visualize-labels-y li {
	width: 100%;
}
.visualize-labels-y li span.label {
	right: 100%;
	margin-right: 5px;
	display: block;
	width: 100px;
	text-align: right;
}
.visualize-labels-y li span.line {
	border-top-width: 1px;
	width: 100%;
}
.visualize-bar .visualize-labels-x li span.label {
	width: 100%;
	text-align: center;
}