html, body {height: 100%; width:100%}

body {	width:100%;	font-family: Arial, Helvetica, sans-serif; font-size:10pt; margin:0px 0px 0px 0px; background-color:black; color:white; }
#wrap { width:100%; margin:0 auto; min-height: 100%; clear:both; }
#header { width:100%; margin:0 auto; height:367px; }
#header-top { width:960px; margin:0 auto; height:367px; }
#menu { background-image:url('images/lembaran_pbs/menu-bg.png'); background-repeat:repeat-x; background-position:top; height:137px; clear:both;}
#menu-top { width:960px;
	margin:0 auto;
	line-height:30px;
	font-size:16px; font-weight:bold; 
	clear:both; }
#main { /*width:960px;*/ margin:0 auto;  clear:both;}  /* must be same height as the footer */

#main-top {	padding:40px 0px 0px 0px; width:960px; margin:0 auto; background-image:url('images/lembaran_pbs/title-bar.png'); background-repeat:no-repeat; min-height:50px; clear:both;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
}
#main-top h3{ margin:0px; padding-left:20px; padding-right:20px; font-size:16px; color:#55555; font-weight:normal }
#main-top div.main-top-inner { width:900px; height:80px; margin:0 auto; text-align:left; }
#main-top div.main-top-inner img { position:relative; margin:10px; top:-15px; }
.main-top {	padding:40px 0px 0px 0px; width:960px; margin:0 auto; background-image:url(images/info.png); background-repeat:no-repeat; text-align:center; min-height:50px; clear:both;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
}

.main-top div.main-top-inner {
	width:560px;
	height:80px;
	margin:0 auto;
	text-align:left;
}

.main-top div.main-top-inner img {
	position:relative;
	top:-15px;
}

.main-center {
	width:960px;
	margin:0 auto;
	text-align:center;
	clear:both;
}


#main-bottom { width:100%; background-image:url('images/lembaran_pbs/bottom-bg.jpg'); background-repeat:repeat-x; height:273px; padding-bottom:135px; margin-top:50px;}
#main-bottom-top { width:960px; height:273px; margin:0 auto; }

#footer { position: relative; width:100%; background-color:black; color:white; background-repeat:repeat-x; margin-top: -35px; /* negative value of footer height */ height: 35px; clear:both; } 
#footer-top { width:960px; margin:0 auto; line-height:25px;  }
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/ content:""; height:100%; float:left; width:0; margin-top:-32767px;/* thank you Erik J - negate effect of float*/}

.fl {float:left}
.fr {float:right}
.clr {clear:both}


.school-logo { float:left; width:140px; height:140px; background-image:url(''); background-repeat:no-repeat;margin-top:26px; position:relative;	}
.school-logo img { margin:2px; width:138px; height:138px; -webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;}

.school-name { float:left; font-size:26px; color:white; text-shadow:2px 2px 2px #333; height:193px; line-height:193px; width:500px; vertical-align:middle; padding-left:25px; }

.menu-button { display:inline-block; width:97px; height:105px; background-repeat:no-repeat; }
.menu-button.back { background-image:url('images/lembaran_pbs/menu-back-button.png'); }
.menu-button.logoff { background-image:url('images/lembaran_pbs/menu-logoff-button.png'); }
.menu-button.back:hover { background-image:url('images/lembaran_pbs/menu-back-button-hover.png'); }
.menu-button.logoff:hover { background-image:url('images/lembaran_pbs/menu-logoff-button-hover.png'); }

a.buttons { display:inline-block; min-height:64px; width:320px; color:#333; background-color:white; text-decoration:none; line-height:64px; padding:10px 10px 10px 10px; margin:5px; font-size:25px; border:3px solid #CCC; cursor:pointer; clear:both; text-align:left; -webkit-border-radius: 5px 5px 5px 5px; 
	-moz-border-radius: 5px 5px 5px 5px; 
	border-radius: 5px 5px 5px 5px; 
}

a.buttons:hover { background-color:#EEEEEE}

a.buttons img { border:0px; }

.breadcrumb { float:left; width:100%; min-height:30px; line-height:30px; font-size:18px; padding:10px; border:3px solid #ddd; background-color:white; margin-bottom:30px;   }

.breadcrumb a { display:inline-block; height:30px; line-height:30px; text-decoration:none; color: #333 }


.dropShadow {
	-webkit-box-shadow: 3px 3px 3px #666; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
     -moz-box-shadow: 3px 3px 3px #666; /* FF3.5 - 3.6 */
          box-shadow: 3px 3px 3px #666; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}

.roundCorner {
	-webkit-border-radius: 5px 5px 5px 5px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
     -moz-border-radius: 5px 5px 5px 5px; /* FF1-3.6 */
          border-radius: 5px 5px 5px 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

}

.gradient {
	background-color: #444547;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444547), to(#151515)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #444547, #151515); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #444547, #151515); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #444547, #151515); /* IE10 */
	background-image:      -o-linear-gradient(top, #444547, #151515); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #444547, #151515);
}

/*Drop Menu*/

#menu-top a { font-weight:bold; text-decoration:none}
#menu-top a:link {color:#FFF;}      /* unvisited link */
#menu-top a:visited {color:#FFF;}  /* visited link */
#menu-top a:hover {color:#FFF;}  /* mouse over link */
#menu-top a:active {color:#FFF;}  /* selected link */

#home-button {
	background-image:url('images/icon-arrow-left.png');
	background-repeat:no-repeat;
	background-position:left;
	display:block;
	position:relative;
	padding-left:28px;
	width:100px;
	height:30px;
}
 
#dropDownButton {
	background-image:url('images/icon-arrow-down.png');
	background-repeat:no-repeat;
	background-position:right;
	padding-right:25px;
	display:block;
	position:relative;
	height:30px;
}

#dropDownMenu {
	width:190px;
	height:230px;
	background-color:#2C3C4D;
	background-position:right;
}

#dropDownMenu a.menu-link {
	font-size:14px; font-weight:normal; text-decoration:none;
	margin-left:3px;
	background-image:url('images/icon-arrow-small-right.png')!important;
	background-repeat:no-repeat!important;
	background-position:left!important;
	height:25px;
	display:block;
	position:relative;
	padding-left:25px;
	color:#FFF;
}

#dropDownMenu a.menu-link:link {color:#FFF;}
#dropDownMenu a.menu-link:visited {color:#FFF;}
#dropDownMenu a.menu-link:hover {color:#FFF;}
#dropDownMenu a.menu-link:active {color:#FFF;}

#dropDownMenu .system-icon {
	float:left;
	font-size:12px;
	line-height:15px;
	font-weight:normal;
	padding-top:5px; /*65px;*/
	width:180px;
	white-space:normal !important;
	height:65px;/*30*/
	color:white;
	clear:both;
}

.OptionDropdown { position:absolute;	background-color:#ffffff; border:1px solid #cccccc;	padding:10px; text-align:left; -webkit-box-shadow: 3px 3px 5px #333; 
	-moz-box-shadow: 3px 3px 5px #333; box-shadow: 3px 3px 5px #333; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#333')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#333'); display:none; }
.OptionDropdown hr{	height:1px; border-top:1px solid #CCCCCC; border-left:0px; border-right:0px; border-bottom:0px; margin:0px; padding:0px }

.OptionDropdown a:hover{ font-size:8pt; color:#000000; text-decoration:none; }
.OptionDropdown a{ font-size:8pt; color:#999999; text-decoration:none; display:inline-block; height:20px; line-height:20px; }
/* End Drop Menu*/

/* Main Menu*/
/* New Menu Use*/
	

	#navigator {
		width:100%;
		height:35px;
		text-align:center;
		z-index:8000;
		
	}
	
	#navigator .left-corner {
		width:53px !important;
		height:108px !important;
		background-image:url('images/menu/bg-left.png');
		background-repeat:no-repeat;
		background-position:left;
		background-color:;
	}
	
	#navigator .right-corner {
		width:53px !important;
		height:108px !important;
		background-image:url('images/menu/bg-right.png');
		background-repeat:no-repeat;
		background-position:right;
		background-color:;
	}
	
	.nav-button {
		width:80px;
		height:108px;
		margin:0px 0px 0px 0px;
		background-image:url('images/menu/bar.png');
		background-repeat:repeat-x;
		vertical-align:middle;
		display:inline-block;
	}
	
	#navigator .nav-button a div.menu-icon {
		-webkit-transition: background 0.5s linear;
		-moz-transition: background 0.5s linear;
		transition: background 0.5s linear;
	}
	
	#navigator .nav-button a span {
		font-weight:bold;
		font-size:10px;
		line-height:20px;
	}
	
	.nav-link {
		position:absolute;
		background-color:#CCC;
		border-top:1px solid #C7C7C7;
		text-aligh:left;
		z-index:1000;
		display:none;
	}
	
	#navigator .nav-link a {
		height:29px;
		line-height:29px;
		text-align:left;
		background-image:url('images/menu/nav-link.png');
		background-position:left;
		background-color:transparent;
		padding-left:28px;
		padding-right:28px;
		border-left:1px solid #C7C7C7;
		border-right:1px solid #C7C7C7;
		border-bottom:1px solid #C7C7C7;
		color:#484848;
		font-size:10px;
		font-family:Verdana, Geneva, sans-serif;
		text-decoration: none;
		display:block;
	}
	
	#navigator .nav-link a:hover {
		background-image:url('images/menu/nav-link-hover.png');
		text-decoration:underline;
	}

	.nav-button img {
		border:none;
		margin-top:30px;
		cursor:pointer;
	}
	
	#menu-top-left {
		float:left;
		width:200px;
		height:35px;
	}
	
	#menu-top-center {
		float:left;
		width:560px;
		height:108px;
	}
	
	#menu-top-right {
		float:left;
		width:200px;
		height:35px;
	}

.small-logo-left {
	float:left; width:300px; color:black; font-weight:normal; line-height:22px; background-image:url('images/menu/user.png'); background-repeat:no-repeat; background-position: left 25px; padding-left:45px;
}

.small-logo-right {
	float:right; width:450px; color:black; font-weight:normal; line-height:22px; text-align:right; background-image:url('/css/images/menu/subject.png'); background-repeat:no-repeat; background-position: right 25px; padding-right:45px;
}

.small-logo-left strong, .small-logo-right strong { text-transform:uppercase; }

.small-logo-title { font-size:14px; color:#555555;}
/*End Main Menu*/

div.buttons { margin-left:64px !important; }

div.back-button { background-image:url('/css/images/icons/Extras/Up.png') !important }
div.back-button:hover, div.back-button.hover, div.buttons:hover, div.buttons.hover { background-color:#DDD; }

.icon-search {
	background-image:url('images/magnifier.png') !important;
	background-repeat:no-repeat !important;
	background-position:5px 5px !important; 
	padding-left:25px !important;
}

.form-input, .form-select, .form-checkbox, .form-radio {
	border: 1px solid #CCCED0;
	color:#525252;
	padding:5px 5px 5px 5px;
	display:inline-block;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

.file { height:40px; padding-left:10px; line-height:40px; }
.file:hover { background-color:#CCC }
.file a { color:#333;}

#slider {
    position:relative;
    width:940px; /* Change this to your images width */
    height:359px; /* Change this to your images height */
}

#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}