/* 
Admina Template
Author: Chris Mooney (http://themeforest.net/user/ChrisMooney)

forms.css - CSS for form components
*/
.styled_form
{
	font-size:12px;
	font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
	margin-top:-13px;
}
.styled_form div
{
	padding:4px;
	margin-bottom:1px;
	display:block;
}
.styled_form div p
{
    clear: left;
	float: left;
	width: 150px;
	padding-right: 1%;
	height: 1em;
	margin-bottom: 6px;
	text-align: right;
	font-weight:none;
}

.styled_form .pad_left
{
	padding-left:170px;
}

.form p {
	margin-bottom:15px;
}
.form fieldset, .fieldset {
	background:#f5f5f5;
	border:1px solid #d9d9d9;
	margin:0 0 20px;
	padding:10px 20px 15px;
	clear:both;
	position:relative;
	min-height:20px;

}
body.ie7 fieldset, body.ie8 fieldset, body.ie7 .fieldset, body.ie8 .fieldset {
	padding:25px 20px 05px;
	margin-top:10px;
}
.form fieldset.collapsed > *, .fieldset.collapsed > * {
	display:none;
}
.form fieldset.collapsed legend, .fieldset.collapsed .legend {
	display:block;
	margin-left:0;
}
.form fieldset.collapsed, .fieldset.collapsed {
	background:none !important;
	border:none;
	padding:0;
}
.form fieldset.grey {
	background:#f7f7f7;
	box-shadow:0px 1px 0px #fff inset;
	-moz-box-shadow:0px 1px 0px #fff inset;
	-webkit-box-shadow:0px 1px 0px #fff inset;
}
.form legend, .legend {
	/*background:url("../img/boxheader.gif") repeat-x scroll center top #E2E2E2;*/
	border:1px solid #ccc;
	font-size:93%;
	padding:5px 8px;
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
}
body.ie7 legend, body.ie8 legend, body.ie7 .legend, body.ie8 .legend {
	position:absolute;
	left:0;
	top:-10px;
}
.form legend a {
	background:url("../img/icons/16/bullet_toggle_plus.png") no-repeat right center;
	text-decoration:none;
	display:block;
	color:#181818;
	padding-right:20px;
}
.form legend a.collapse {
	background:url("../img/icons/16/bullet_toggle_minus.png") no-repeat right center;
}
.form label {
	display:block;
	text-align:left;
	cursor:hand;
	margin-bottom:10px;s
}
.inline label {
	display:inline-block !important;
	margin-right:15px;
}
.inline select {
	margin-right:15px;
}
.form input, .form textarea, .form select {
	/*background:#fefefe url(../img/bg-input.gif) repeat-x top;*/
	border:1px solid #ccc;
	padding:6px;
	color:#4d4d4d;
	/*width:150px;*/
	-moz-border-radius:3px;
	-webkit-border:3px;
	border-radius:3px;
	-webkit-box-shadow: inset 1px 1px 1px #CCC; 
	-moz-box-shadow: inset 1px 1px 1px #CCC; 
	box-shadow: inset 1px 1px 1px #CCC;
}
.form textarea {
	width:98%;
	resize: none;
}
.form input.small {
	width:50px;
}
.form input.large {
	width:200px;
}
.form input.larger {
	width:260px;
}
.form input[type=checkbox], .form input[type=radio] {
	width:auto;
	border:0;
	background:none;
	margin:0 10px 0 0;
}
/* Input Validation */
.form span.required {
	color:#F45D43;
	font-weight:700;
	font-size:131%;
}
.success {
	background:#F1FFBF url("../img/icons/16/success.png") no-repeat 1%;
	border-color:#A6D50F;
}
.error {
	background:#FECDC6 url("../img/icons/16/error.png") no-repeat 1% ;
	border-color:#F45D43;
}
.warning {
	background:#FFECB0 url("../img/icons/16/warning.png") no-repeat 1%;
	border-color:#FFBC2A;
}
.info {
	background:#D4E7F5 url("../img/icons/16/information.png") no-repeat 1%;
	border-color:#589AD7;
}
.tip {
	background:#FFECCD url("../img/icons/16/tip.png") no-repeat 1%;
	border-color:#DD9854;
}
.success, .error, .warning, .info, .tip {
	padding:7px 0px 7px 29px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}
.form p img {
	vertical-align:middle;
	margin-left:5px;
}
.form label.strong {
	font-weight:700;
}
.form.col label {
	float:left;
	width:140px;
	margin-top:5px;
	clear:left;
}
.ui-datepicker-trigger {
	padding:8px;
	cursor:pointer;
	float:left;
}
/* Stylish Switches */
.switch-enable, .switch-disable {
	display: block;
	float: left;
	line-height: 30px;
	border:1px solid #ccc;
	padding: 0 10px;
	background: url("../img/bg-input.gif") repeat-x top #FEFEFE;
	font-weight: 700;
	color:#333333;
}
.switch-enable {
	border-right:0;
	border-radius:5px 0 0 5px;
	-moz-border-radius:5px 0 0 5px;
	-webkit-border-radius:5px 0 0 5px;
}
.switch-disable {
	border-radius:0 5px 5px 0;
	-moz-border-radius:0 5px 5px 0;
	-webkit-border-radius:0 5px 5px 0;
}
.switch-disable.selected, .switch-enable.selected {
	color: #fff;
	padding: 0 10px;
}
.switch-disable.selected {
	background: #b04d44 url(../img/grad.png) repeat-x bottom;
	border:1px solid #96413b;
	border-radius:0 5px 5px 0;
	-moz-border-radius:0 5px 5px 0;
	-webkit-border-radius:0 5px 5px 0;
}
.switch-enable.selected {
	background: #88bc1f url(../img/grad.png) repeat-x bottom;
	border:1px solid #4f810f;
	border-right:0;
	border-radius:5px 0 0 5px;
	-moz-border-radius:5px 0 0 5px;
	-webkit-border-radius:5px 0 0 5px;
}
.switch-wrapper span {
	cursor: pointer;
}
.switch-wrapper input {
	display: none;
}
.switch-wrapper {
	clear:both;
	padding-bottom:25px;
}
/* Stylish Switches (Small) */
.switch-wrapper.small .switch-disable, .switch-wrapper.small .switch-enable {
	padding: 0 5px;
}
.switch-wrapper.small .switch-disable.selected {
	background: #b04d44 url(../img/grad.png) repeat-x bottom;
	border:1px solid #96413b;
	border-radius:0 5px 5px 0;
	-moz-border-radius:0 5px 5px 0;
	-webkit-border-radius:0 5px 5px 0;
}
.switch-wrapper.small .switch-enable.selected {
	background: #88bc1f url(../img/grad.png) repeat-x bottom;
	border:1px solid #4f810f;
	border-right:0;
	border-radius:5px 0 0 5px;
	-moz-border-radius:5px 0 0 5px;
	-webkit-border-radius:5px 0 0 5px;
}
.switch-wrapper.small .switch-enable, .switch-wrapper.small .switch-disable {
	font-size:85%;
	line-height:25px;
}
/* Progress Bars */
.progress-bar {
	background:url("../img/grad.png") repeat-x center bottom #ccc;
	border:1px solid #808080;
	display:inline-block;
	padding:10px;
	position:relative;
	text-align:center;
	width:100px;
	vertical-align:middle;
	box-shadow:0 2px 4px #808080 inset;
	-moz-box-shadow:0 2px 4px #808080 inset;
	-webkit-box-shadow:0 2px 4px #808080 inset;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
body.ie7 .progress-bar, body.ie8 .progress-bar {
	zoom:1;
	display:inline;
}
.progress-bar span {
	background-image:url("../img/grad.png");
	background-repeat:repeat-x;
	background-position:bottom center;
	border:1px solid rgba(0, 0, 0, 0.3);
	color:#fff;
	font-size:93%;
	position:absolute;
	left:0;
	bottom:0;
	top:0;
	text-shadow:0 -1px 0px rgba(0, 0, 0, 0.5);
	box-shadow:0 0 2px rgba(255, 255, 255, 0.4) inset;
	-moz-box-shadow:0 0 2px rgba(255, 255, 255, 0.4) inset;
	-webkit-box-shadow:0 0 2px rgba(255, 255, 255, 0.4) inset;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
.progress-bar.blue > span {
	background-color:#00A1CD;
}
.progress-bar.red > span {
	background-color:#F00;
}
.progress-bar.green > span {
	background-color:#0F0;
}
/* Buttons */

button, .button {
	cursor:pointer;
	display:inline-block;
	font-size:108%;
	font-weight:700;
	outline:none;
	padding:10px 15px;
	width:auto;
	text-align:center;
	text-decoration:none !important;
	vertical-align:middle;
	background:#404040 url('../img/grad.png') repeat-x bottom;
	color:#fff !important;
	border-width:2px;
	border-style:groove;
	border:1px solid rgba(0, 0, 0, 0.2);
	box-shadow:0px 1px 0px rgba(225, 225, 225, 0.5) inset;
	-moz-box-shadow:0px 1px 0px rgba(225, 225, 225, 0.5) inset;
	-webkit-box-shadow:0px 1px 0px rgba(225, 225, 225, 0.5) inset;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
body.ie7 button, body.ie8 button, body.ie7 .button, body.ie8 .button {
	zoom:1;
	display:inline;
	border-width:1px;
	border-style:solid;
}
button:hover, .button:hover {
	background-color:#595959;
	background-image: url('../img/grad.png');
	text-decoration:none;
	outline:none;
}
button:active, .button:active {
	position:relative;
	top:1px;
	outline:none;
	background-image: url('../img/grad-rev.png');
	background-position:top;
}
button.blue, .button.blue {
	background-color:#00A1CD;
}
body.ie7 button.blue, body.ie8 button.blue {
	border-color:#0080a4;	
}
button.blue:hover, .button.blue:hover {
	background-color:#00b4e5;
}
button.green, .button.green {
	background-color:#20c00f;
}
body.ie7 button.green, body.ie8 button.green {
	border-color:#19990c;	
}
button.green:hover, .button.green:hover {
	background-color:#25d911;
}
button.red, .button.red {
	background-color:#c00f0f;
}
body.ie7 button.red, body.ie8 button.red {
	border-color:#990c0c;	
}
button.red:hover, .button.red:hover {
	background-color:#d91111;
}
button.grey, .button.grey {
	background:url("../img/boxheader.gif") repeat-x center center #E2E2E2;
	color:#4d4d4d !important;
	border:1px solid rgba(0, 0, 0, 0.1);
}
button.grey:hover, .button.grey:hover {
	background-color:#fff;
}
body.ie7 button.grey, body.ie8 button.grey {
	border-color:#d3d3d3;	
}
button.large, .button.large {
	font-size:138.5%;
	padding:10px 30px;
}
button.small, .button.small {
	font-size:93%;
	padding:4px 10px 5px;
}
button.disabled, button.disabled:hover, .button.disabled, .button.disabled:hover {
	background-color:#ccc !important;
	color:#666 !important;
	text-shadow:0 1px 0 #CCCCCC;
	cursor:default;
}
body.ie7 button.disabled, body.ie8 button.disabled {
	border-color:#a3a3a3;	
}
button.disabled:active, .button.disabled:active {
	position:relative;
	top:0;
	background-image: url('../img/grad.png');
}
fieldset button, .button {
	margin:0 5px 10px 0;
}
button img, .button img {
	display:inline;
	height:16px;
	margin-right:10px;
	vertical-align:-3px;
	width:16px;
}



/* notifications */
.notification.success {
	background:#f1ffbf url('../img/icons/16/success.png') no-repeat 10px 10px;
	border-color:#a6d50f;
}
.notification.success span.strong {
	color:#283304;
}
.notification.error {
	background:#fecdc6 url('../img/icons/16/error.png') no-repeat 10px 10px;
	border-color:#f45d43;
}
.notification.error span.strong {
	color:#33130e;
}
.notification.warning {
	background:#ffecb0 url('../img/icons/16/warning.png') no-repeat 10px 10px;
	border-color:#ffbc2a;
}
.notification.warning span.strong {
	color:#332508;
}
.notification.info {
	background:#d4e7f5 url('../img/icons/16/information.png') no-repeat 10px 10px;
	border-color:#589ad7;
}
.notification.info span.strong {
	color:#152433;
}
.notification.tip {
	background:#ffeccd url('../img/icons/16/tip.png') no-repeat 10px 10px;
	border-color:#dd9854;
}
.notification.tip span.strong {
	color:#332313;
}
.notification {
	padding:10px 10px 10px 35px;
	border:1px solid #fff;
	margin-bottom:20px;
	position:relative;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
.notification.no-margin {
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
	margin:0;
}
.notification .close {
	background:url("../img/icons/16/close.png") no-repeat scroll 0 0 transparent;
	cursor:pointer;
	display:block;
	height:16px;
	position:absolute;
	right:10px;
	top:10px;
	width:16px;
}
.notification .close:hover {
	opacity:1;
}
.notification.nopic {
	background-image:none;
	padding:10px;
}
.notification span.strong {
	margin-right:10px;
}



/* my button */

.tombols {
    float: left;
	margin-left: 185px;
    padding-bottom: 20px;
    clear: both;
}
a.tombol {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 10px;
}
a.tombol:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
a.tombol:active {
    color: #000;
    border-color: #444;
}
a.left {
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
    border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-right-radius: 0;
    margin: 0;
}
a.middle {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-left: solid 1px #f3f3f3;
    margin: 0;
    border-left: solid 1px rgba(255, 255, 255, 0);
}
a.middle:hover,
a.right:hover { border-left: solid 1px #999 }
a.right {
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
    border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
    border-left: solid 1px #f3f3f3;
    border-left: solid 1px rgba(255, 255, 255, 0);
}


a.big {
    font-size: 16px;
    padding: 10px 15px;
}
a.supersize {
    font-size: 20px;
    padding: 15px 20px;
}
a.save {
    background: url(../img/sprite.png) 10px 7px no-repeat #f3f3f3;
    padding-left: 30px;
}
a.add {
    background: url(../img/sprite.png)  10px -27px no-repeat #f3f3f3;
    padding-left: 30px;
}
a.delete {
    background: url(../img/sprite.png)  10px -61px no-repeat #f3f3f3;
    padding-left: 30px;
}
a.login {
    background: url(../img/sprite.png)  10px -96px no-repeat #f3f3f3;
    padding-left: 30px;
}
a.up {
    background: url(../img/sprite.png)  13px -133px no-repeat #f3f3f3;
    padding-left: 34px;
}
a.print {
    background: url(../img/sprite.png)  13px -168px no-repeat #f3f3f3;
    padding-left: 34px;
}
a.download {
    background: url(../img/icons/16/download.png)  13px no-repeat #f3f3f3;
    padding-left: 34px;
}



.tombols input.tombol {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 10px;
}
.tombols input.tombol:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.tombols input.tombol:active {
    color: #000;
    border-color: #444;
}
.tombols input.left {
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
    border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-right-radius: 0;
    margin: 0;
}
.tombols input.middle {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-left: solid 1px #f3f3f3;
    margin: 0;
    border-left: solid 1px rgba(255, 255, 255, 0);
}
.tombols input.middle:hover,
.tombols input.right:hover { border-left: solid 1px #999 }
.tombols input.right {
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
    border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
    border-left: solid 1px #f3f3f3;
    border-left: solid 1px rgba(255, 255, 255, 0);
}
.tombols input.big {
    font-size: 16px;
    padding: 10px 15px;
}
.tombols input.supersize {
    font-size: 20px;
    padding: 15px 20px;
}
.tombols input.save {
    background: url(../img/sprite.png) 10px 7px no-repeat #f3f3f3;
    padding-left: 30px;
}
.tombols input.add {
    background: url(../img/sprite.png)  10px -27px no-repeat #f3f3f3;
    padding-left: 30px;
}
.tombols input.delete {
    background: url(../img/sprite.png)  10px -61px no-repeat #f3f3f3;
    padding-left: 30px;
}
.tombols input.login {
    background: url(../img/sprite.png)  10px -96px no-repeat #f3f3f3;
    padding-left: 30px;
}
.tombols input.up {
    background: url(../img/sprite.png)  13px -133px no-repeat #f3f3f3;
    width: 18px;
}
.tombols input.print {
    background: url(../img/sprite.png)  13px -168px no-repeat #f3f3f3;
    padding-left: 30px;
}