/* ----- CSS RESET ----- */
* {
	margin: 0;
	padding: 0;
}
@media print 
{
   @page
   {
    size: 8.5in 5.5in;
    size: landscape;
  }
}

/* ----- HTML ----- */
body {
	background-color: #E1E5E8;
	font: 11px/16px tahoma;
}
a {
	color: #ffff05C;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
h1 {
	color: #333;
	font: bold 21px "trebuchet ms";
}
input, select, textarea {
	font: 11px tahoma;
	padding: 3px;
}
input[type=text], input[type=password] {
	border: 1px solid #BBB;
}
input[type=submit], .button {
	border: 1px solid #5A0;
	color: #FFF;
	font: bold 11px tahoma;
	padding: 4px 20px 5px;
	
	/* color gradient */
	background: linear-gradient(to bottom, #f10, #fA0);
	background: -moz-linear-gradient(top,  #fc0, #f30);
	background: -webkit-gradient(linear, left top, left bottom, from(#8C0), to(#5A0));
	
	/* border radius */
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
input[type=submit]:hover, .button:hover {
	cursor: pointer;
	text-decoration: none;
	
	/* color gradient */
	background: linear-gradient(to bottom, #fd0, #fA0);
	background: -moz-linear-gradient(top, #fd0, #fA0);
	background: -webkit-gradient(linear, left top, left bottom, from(#5A0), to(#8C0));
}

textarea {
	border: 1px solid #BBB;
	line-height: 15px;
}
option {
	padding: 0 5px;
}


/* ----- LAYOUT ----- */
.clear {
	clear: both;
}


/* ----- LOGO ----- */
.logo {
	background-image: url(../img/logo.png);
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-color:#f6f5fb; /* #ffffee;*/
}
.main-logo {
	background-image: url(../img/school.png);
	background-position: 0 51%;
	background-repeat: no-repeat;
	background-color: #e3e0f5; /*#ff77dd;*/
}



/* ----- CONTAINER ----- */
.paper {
	background: #FFF;
	/* box shadow */
	box-shadow: 0 0 5px #888;
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px #888;
}
#breadcrumb {
	border-bottom: 1px solid #EEE;
	margin-top: -10px;
	padding: 0 15px;
	padding-bottom: 7px;
}
#main {
	margin: 15px;
	margin-bottom: 0;
	padding-bottom: 15px;
}
.box {
	border: 1px solid #BBB;

	/* border radius */
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.box h1 {
	background-color: #EEE;
	background-image: url(../ico/details.png);
	background-position: 10px 50%;
	background-repeat: no-repeat;
	border-bottom: 1px solid #CCC;
	border-top: 1px solid #FFF;
	color: #5F5F5F;
	font: bold 11px tahoma;
	padding: 5px 10px 6px;
	padding-left: 33px;
	
	
	/* border radius */
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-moz-border-top-left-radius: 5px;
	-moz-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}
.box h2 {
	background-color: #EEE;
	background-image: url(../ico/timesr.png);
	background-position: 10px 50%;
	background-repeat: no-repeat;
	border-bottom: 1px solid #CCC;
	border-top: 1px solid #FFF;
	color: #994411;
	font: bold 14px tahoma;
	padding: 5px 10px 6px;
	padding-left: 40px;
	
	
	/* border radius */
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-moz-border-top-left-radius: 5px;
	-moz-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}
.box h22 {
	background-color: #974;
	background-image: url(../ico/timesr.png);
	background-position: 10px 50%;
	background-repeat: no-repeat;
	border-bottom: 1px solid #CCC;
	border-top: 1px solid #FFF;
	color: #994411;
	font: bold 14px tahoma;
	padding: 5px 10px 6px;
	padding-left: 40px;
	
	
	/* border radius */
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-moz-border-top-left-radius: 5px;
	-moz-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}

.box h1 ul {
	float: right;
	text-align: right;
	width: 200px;
}
.box h1 ul li {
	float: right;
	list-style: none;
}
.box h1 ul li a {
	color: #ffffff;
	display: block;
	margin-left: 10px;
}
#form-container {
	padding: 10px;
//	width: 710px;
	
}

#form-nilai {
	width: 680px;
}


/* ----- LEFT ----- */
#left {
	background: #FFF;
	border-right: 1px solid #444; //m1s#05C;
	bottom: 0;
	left: 0;
	position: fixed;
	top: 0;
	width: 200px;
	
	/* box shadow */
	box-shadow: 3px 0 3px #CCC;
	-moz-box-shadow: 3px 0 3px #CCC;
	-webkit-box-shadow: 3px 0 3px #CCC;
}


#left h1 {
	background-color: #e3e0f5; /*#ffffee;*/
	background-position: 10px 50%;
	color: #40166c; /*994411;*/
	padding: 10px 15px;
	padding-left: 45px;
	
	/* box shadow */
	box-shadow: 0 3px 3px #CCC;
	-moz-box-shadow: 0 3px 3px #CCC;
	-webkit-box-shadow: 0 3px 3px #CCC;
}

/* ----- TOP LEFT ----- */
#topleft {
//	background: #ffffee;
	//border-right: 1px solid #444; //m1s#05C;
	//right:30px;
	position: fixed;
	top: -5px;
	height:35px;
	left:0px;
	right:0px;
	padding-left:0px;
	//width: 99%;
	z-index:100;
	
	/* box shadow */
	//box-shadow: 3px 0 3px #CCC;
	//-moz-box-shadow: 3px 0 3px #CCC;
	//-webkit-box-shadow: 3px 0 3px #CCC;
}


/*#topright h1 {
	background-color: #ffffee;
	background-position: 10px 50%;
	color: #994411;
	padding: 10px 15px;
	padding-left: 45px;
	
	/* box shadow */
	box-shadow: 0 3px 3px #CCC;
	-moz-box-shadow: 0 3px 3px #CCC;
	-webkit-box-shadow: 0 3px 3px #CCC;
}
*/


/* ----- TOP RIGHT ----- */
#topright {
	background: #ffffee;
	//border-right: 1px solid #444; //m1s#05C;
	right:30px;
	position: relative;
	text-align: right;
	top: 5px;
	height:35px;
	width: 300px;
	
	/* box shadow */
//	box-shadow: 3px 0 3px #CCC;
//	-moz-box-shadow: 3px 0 3px #CCC;
//	-webkit-box-shadow: 3px 0 3px #CCC;
}


/*#topright h1 {
	background-color: #ffffee;
	background-position: 10px 50%;
	color: #994411;
	padding: 10px 15px;
	padding-left: 45px;
	
	/* box shadow */
	box-shadow: 0 3px 3px #CCC;
	-moz-box-shadow: 0 3px 3px #CCC;
	-webkit-box-shadow: 0 3px 3px #CCC;
}
*/

/* ----- right ----- */
#right {
	background: #FFF;
	border-right: 1px solid #444;//m1s#05C;
	bottom: 0;
	left: 0;
	position: fixed;
	top: 0;
	width: 200px;
	
	/* box shadow */
	box-shadow: 3px 0 3px #CCC;
	-moz-box-shadow: 3px 0 3px #CCC;
	-webkit-box-shadow: 3px 0 3px #CCC;
}


#right h1 {
	background-color: #994411;
	background-position: 10px 50%;
	color: #FFF;
	padding: 10px 15px;
	padding-left: 45px;
	
	/* box shadow */
	box-shadow: 0 3px 3px #CCC;
	-moz-box-shadow: 0 3px 3px #CCC;
	-webkit-box-shadow: 0 3px 3px #CCC;
}


#user-info {
	border-bottom: 1px solid #DDD;
	padding: 10px;
}
.user-thumb {
	float: left;
	height: 40px;
	margin-right: 10px;
	overflow: hidden;
	width: 40px;
}
#user-info dt {
	height: 16px;
	overflow: hidden;
}
#client-info {
	border-top: 1px solid #DDD;
	color: #888;
	padding: 5px 10px;
}
.date {
	color: #C30;
	margin-bottom: 10px;
}
#footer {
	background: #e3e0f5; /*#ffeebb;*/
	bottom: 0;
	color: #40166c; /*#994411;*/
	padding: 7px 10px;
	position: fixed;
	width: 180px;
	
	/* box shadow */
	box-shadow: 0 -3px 3px #CCC;
	-moz-box-shadow: 0 -3px 3px #CCC;
	-webkit-box-shadow: 0 -3px 3px #CCC;
}


/* ----- LEFT MENU ----- */
#left ul {
	margin: 10px 0;
}
#left ul li {
	border-bottom: 1px solid #FFF;
	list-style: none;
}
#left ul li a {
	background: url(../ico/grey.png) no-repeat;
	background-color: #FFF;
	background-position: 5px 60%;
	color: #505050;
	display: block;
	padding: 1px 10px 3px;
	padding-left: 25px;
}
#left ul li a:hover {
	background-color: #EEE;
	background-image: url(../ico/blue.png);
	background-repeat: no-repeat;
	color: #05A;
	text-decoration: none;
}


/* ----- MENU ----- */
#menu {
	background:  #e3e0f5; /*#ffffee;*/
	height: 50px;
	margin: 1px 10px 3px 205px;
	padding: 0 10px;
	
	z-index: 10000;
	
	/* border radius */
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	
	/* box shadow */
	box-shadow: 0 0 3px #888;
	-moz-box-shadow: 0 0 3px #888;
	-webkit-box-shadow: 0 0 3px #888;
}
#menu li {
	float: left;
	list-style: none;
	padding-top: 10px;
	/*width:200px;*/
}

#menu likanan {
	float: right;
	list-style: none;
	padding-top: 10px;
	/*width:200px;*/
}
#menu likanan a {
	color: #994411;
	display: block;
	padding: 5px 10px 7px;
	
}
#menu likanan a:hover {
	background: #fd0;
	text-decoration: none;
}

#menu li a {
	color: #40166c; /*#994411;*/
	display: block;
	padding: 5px 10px 7px;
}
#menu li a:hover {
	background: #fd0;
	text-decoration: none;
	
}
#menu li ul {
	background:#f6f5fb;// #fffecc;//#c19d15;
	border: 1px solid #ffeebb; //m1s#05C;
	border-top: 0;
	visibility: hidden;
	padding: 2px;
	position: absolute;
	width: 200px;
	z-index: 10000;
	
	/* box shadow */
	box-shadow: 2px 2px 2px #999999;
	-moz-box-shadow: 2px 2px 2px #999999;
	-webkit-box-shadow: 2px 2px 2px #999999;
}
#menu li:hover > ul {
	visibility: visible;
}
#menu li ul li {
	clear: both;
	display: block;
	padding-top: 0;
	width: 100%;
}
#menu li ul li a {
	color: #994400;
	padding: 1px 20px 3px 20px;
}
#menu li ul li a:hover {
	background: #fd0;
	color: #000;
}
#menu li ul li.parent > a {
	background-image: url(../ico/r-arr.png);
	background-position: right 1px top 50%;
	background-repeat: no-repeat;
}
#menu li ul li ul {
	border: 1px solid #444; //m1s#05C;
	left: 198px;
	margin-top: -23px;
	visibility: hidden;
}
#menu li ul li.parent:hover > ul {
	visibility: visible;
}




/* ----- WRAP ----- */
#wrap {
	margin: 0 10px 3px 205px;
}
#wrap > h1 {
	background-position: 15px 48%;
	border-bottom: 1px solid #EEE;
	margin-bottom: 15px;
	padding: 10px 15px;
	padding-left: 0px;
	text-align:center;
}


/* ----- WRAP ICON ----- */
#dashboard {
	background: url(../ico/dashboard.png) no-repeat;
}
#data {
	//background: url(../ico/data.png) no-repeat;
}
#form {
	background: url(../ico/form.png) no-repeat;
}
#profile {
	background: url(../ico/profile.png) no-repeat;
}


/* ----- ACTION ----- */
.action {
	height: 24px;
	margin: 8px;
}
.action li {
	float: left;
	list-style: none;
	margin-right: 5px;
}
.action li a {
	display: block;
}
.action li a.filter {
	padding: 4px 10px 3px;
}
.action li#search {
	float: right;
	margin: 0;
}
.action li#filter {
	float: midle;
	padding-top:3px;
	margin: 0;
}
.action li#search input[type=text] {
	background: url(../ico/search.png) no-repeat;
	background-position: right 2px center;
	border: 1px solid #A5AABF;
	margin-top: 2px;
	padding: 4px 20px 4px 4px;
	width: 210px;
}
.action li li#kriteria input[type=text] {
	background:none;
}
.action li#search input[type=text].small {
	background: none;
	width: 75px;
}
.searchsubmit {
	margin-left: 5px;
}


/* ----- PROFILE ----- */
#emp-profile {
	float: left;
	position: relative;
	width: 160px;
}
#emp-profile img {
	
}
#right-profile {
	margin-left: 175px;
}
#right-profile .box {
	margin-bottom: 15px;
}


/* ----- PROFILE ICON ----- */
#cert {
	background-image: url(../ico/cert.png);
}
#edu {
	background-image: url(../ico/edu.png);
}
#fam {
	background-image: url(../ico/fam.png);
}
#lang {
	background-image: url(../ico/lang.png);
}
#work {
	background-image: url(../ico/work.png);
}


/* ----- FORM & PRF----- */
.prf {
	margin-bottom: 10px;
	padding: 5px 10px;
}
.prf h1 {
	margin: -5px -10px 5px;
}
.form fieldset {
	border: 0;
	border-bottom: 1px solid #DDD;
	margin: -10px;
	margin-bottom: 10px;
	padding: 10px;
}
.form dl {
	margin: 5px 0;
}
.prf dl {
	margin: 3px 0;
}
.form dt, .prf dt {
	display: inline-block;
	margin-right: 5px;
	vertical-align: top;
	width: 115px;
}
.form dd, .prf dd {
	display: inline-block;
	margin-right: 15px;
	padding: 0;
	vertical-align: top;
	width: 210px;
}
.prf dt {
	color: #AAA;
	font-weight: bold;
	text-align: right;
}
.form input[type=text] {
	border: 1px solid #A5AABF;
	width: 200px;
}
.form textarea {
	border: 1px solid #A5AABF;
	height: 91px;
	width: 200px;
}
.form input[type=submit] {
	background: #8C0;
	margin-right: 5px;
	padding: 4px 15px;
}
.form input[type=submit]:hover {
	background: #5A0;
}
.tradio td {
	padding-right: 5px;
}


/* ----- MESSAGES ----- */
.info, .err, .success {
	background-position: 7px center;
	background-repeat: no-repeat;
	font-weight: bold;
	margin-bottom: 10px;
	padding: 5px 5px 7px 30px;
}
.info {
	background-color: #D8F8FC;
	background-image: url(../ico/info.png);
	border: 1px solid #5AB;
	color: #16A;
}
.err {
	background-color: #FCE0E0;
	background-image: url(../ico/error.png);
	border: 1px solid #A8303C;
	color: #A8303C;
}
.success {
	background-color: #CFF3AF;
	background-image: url(../ico/success.png);
	border: 1px solid #3F8A00;
	color: #3F8A00;
}


/* ----- COLOR ----- */
.blue {
	color: #05C;
}
.darker-green {
	color: #8C0;
}
.lighter-green {
	color: #AE0;
}


.modal-content {
	margin: 0 10px;
}
.t-nilai {
	margin: 0 10px 10px 15px;
}
.numeric {
	text-align: center;
}


.x {
	text-align: center;
	float: left;
	width: 332px;
	margin: 10px 10px;
}
.x form {
	margin-top: -7px;
}
#webcam, #canvas, #def-canvas {
	border: 1px solid #EAA;
	height: 240px;
	padding: 5px;
	margin-bottom: 20px;
}

/* ----- CONTAINER ----- */
.container{
	max-width: 1080px;
	margin: 20px auto;
	background: #fff;
	overflow: hidden;
	padding: 10px;
}

.header{
	border: 1px solid #dedede;
	padding: 10px;
	margin: 10px;
}

/* Main */
	#left{
		float: left;
		position: none;
		background: #FFF;
		border-right: 1px solid #444; //m1s#05C;
		bottom: 0;
		left: 0;
		top: 0;
		width: 200px;
	top: 0;
	width: 200px;
	
	/* box shadow */
	box-shadow: 3px 0 3px #CCC;

		}
#wrap {
	margin: 0 10px 3px 205px;
}
#wrap > h1 {
	background-position: 15px 48%;
	border-bottom: 1px solid #EEE;
	margin-bottom: 15px;
	padding: 10px 15px;
	padding-left: 0px;
	padding-top:10px; /*50px;*/
}

	.middle{
		width: 500px;
		border: 1px solid #dedede;
		padding: 10px;
		margin: 10px;
		float: left;
	}
		.middle img{
			max-width: 100%;
			height: auto;
		}

	.right{
		width: 250px;
		border: 1px solid #dedede;
		padding: 10px;
		margin: 10px;
		float: left;
	}
@media screen and (max-width: 1080px) {
	
	.container {
		width: 100%;
	}
	#left {
	}
	.middle {
		width: 68%;
		float: right;
	}
#wrap {
	//margin: 0 20px 30px 225px;
}
#wrap > h1 {
	background-position: 15px 48%;
	border-bottom: 1px solid #EEE;
	margin-bottom: 15px;
	padding: 10px 15px;
	padding-left: 53px;
}

	
	.right {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}
}

#mobile-header {
    display: none;
}
#mobile-header-r {
    display: none;
}
@media  screen and (max-width: 767px){
    #mobile-header {
        display: block;
    }
   #mobile-header-r{
        display: block;
    }
}

@media screen and (max-width: 780px) {
	
	.header, 
	.footer{
		text-align: center;
	}
	#left {
		display: none;
		float: none;
		position: none;	
		
		}
		
	#mobile-header {
        display: block;
    }	
	#mobile-header-r{
        display: block;
		padding-left:200px;
    }	

	#pc-header {
        display: none;
    }	
		
	#wrap {
		margin: 0 10px 10px 10px;
		
	}
	#wrap > h1 {
		background-position: 15px 48%;
		border-bottom: 1px solid #EEE;
		margin-bottom: 15px;
		padding: 10px 15px;
		padding-left: 53px;
		//padding-top:90px;
	}

	#menu {
		margin: -10px 10px 3px 10px;
		padding-top:10px;
		
	}
		
	.middle {
		width: auto;
		float: none;
	}
		
	.right {
		width: auto;
		float: none;
	}

}

@media screen and (max-width: 480px) {
	
	.header, 
	.footer{
		text-align: center;
	}
	#left {
		display: none;
		float: none;
		position: none;	
		
		}
		
	#mobile-header {
        display: block;
    }	
	#mobile-header-r{
        display: block;
		padding-left:200px;
    }	

	#pc-header {
        display: none;
    }	
		
	#wrap {
		margin: 0 10px 10px 10px;
		
	}
	#wrap > h1 {
		background-position: 15px 48%;
		border-bottom: 1px solid #EEE;
		margin-bottom: 15px;
		padding: 10px 15px;
		padding-left: 53px;
		//padding-top:90px;
	}

	#menu {
		margin: -10px 10px 3px 10px;
		padding-top:10px;
		
	}
		
	.middle {
		width: auto;
		float: none;
	}
		
	.right {
		width: auto;
		float: none;
	}

}
.con { width:143px; position:relative; border:1px solid #ccc; }
.con input { margin:0 0 0 0px; border:0; }
.con img { display:block; position:absolute; top:1px; left:123px;width:17px; cursor:pointer; }

/*
body {  
    background-color: #ece8e5;  
}  
nav {  
    height: 40px;  
    width: 100%;  
    background: #455868;  
    font-size: 11pt;  
    font-family: 'PT Sans', Arial, sans-serif;  
    font-weight: bold;  
    position: relative;  
    border-bottom: 2px solid #283744;  
}  
nav ul {  
    padding: 0;  
    margin: 0 auto;  
    width: 600px;  
    height: 40px;  
} 
nav li {  
    display: block;  
    float: left;  
} 
.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}  
nav a {  
    color: #fff;  
    display: inline-block;  
    width: 100px;  
    text-align: center;  
    text-decoration: none;  
    line-height: 40px;  
    text-shadow: 1px 1px 0px #283744;  
}  
nav li a {  
    border-right: 1px solid #576979;  
    box-sizing:border-box;  
    -moz-box-sizing:border-box;  
    -webkit-box-sizing:border-box;  
}  
nav li:last-child a {  
    border-right: 0;  
}  
nav a:hover, nav a:active {  
    background-color: #8c99a4;  
}  
 
 
@media screen and (max-width: 600px) {  
    nav {   
        height: auto;  
    }  
    nav ul {  
        width: 100%;  
        display: block;  
        height: auto;  
    }  
    nav li {  
        width: 50%;  
        float: left;  
        position: relative;  
    }  
    nav li a {  
        border-bottom: 1px solid #576979;  
        border-right: 1px solid #576979;  
    }  
    nav a {  
        text-align: left;  
        width: 100%;  
        text-indent: 25px;  
    }  
}  
nav a#pull {
	display: none;
}

}  */

@media only screen and (max-width : 480px) {  
    nav {  
        border-bottom: 0;  
    }  
    nav ul {  
        display: none;  
        height: auto;  
    }  
    nav a#pull {  
        display: block;  
        background-color: #0000ff;//#283744;  
        width: 100%;  
        position: relative;  
    }  
    nav a#pull:after {  
        content:"";  
        background: url('nav-icon.png') no-repeat;  
        width: 30px;  
        height: 30px;  
        display: inline-block;  
        position: absolute;  
        right: 15px;  
        top: 10px;  
    }