* {padding: 0;margin: 0;}
body {
font-family: Verdana, Tahoma, Arial, sans-serif;font-size: 12px;padding: 0;margin: 0;color: #555; background-color: #ccc}
img { border: none; }
a { text-decoration: none; color: #3090F0; }
a:hover { color: #333; }
h3 { border-bottom: 1px dotted #ccc; color: #000; padding: 10px 0 2px 0; }
h3 a { color: #3090F0; }
h3 a:hover { color: #F0A848; }
nl {margin-left: 20px}
ol {margin-left: 20px}
.clear {clear: both;padding: 2px;}
#wrap {margin: 0 auto;width: 1055px; background-color: #fff;
box-shadow:0px 6px 10px #06070A;
}
#header {background: #C0D8F0 url(images/header.gif) no-repeat;height: 100px;}
#header h1 { text-transform: uppercase; padding: 25px 0 0 30px; font-size: 30px; font-weight: 100; letter-spacing: -2px; }
#header h1 a { color: #3090F0; }#header h1 a:hover { color: #333; }
#header h2 { padding: 0 0 0 30px; font-size: 19px; color: #333; font-weight: 100; }
	.logo {
		padding: 5px;
		height: 76px;
		float: left;
		margin: 0 15px 0 0;
	}
	.logo img {
		width: 76px;
	}
	.sekolah {
		padding: 15px 5px 0 5px;
		float: left;
	}
		.sekolah h3 a {
			font-size: 20px;
			color: #000;
			margin: 0;
			padding-bottom: 0;
			line-height: 0px;
			text-shadow: 0px -1px #fff;
			letter-spacing: -1px;
			position: absolute;
		}
		.sekolah h3 a:hover {
			color: red;
			text-shadow: 0px -1px #0b85ff;
		}
		.sekolah p{
			color: navy;
			margin: 0;
			padding: 0;
		}
		.cariform {
			float: right;
			margin-top: 55px;
			margin-right: 15px;
		}

#menu { 
	width: 1040px;
	float: left;
	height: 32px;
	background: url(img/batas_menu.png)no-repeat left center;
}
#menu ul{
  padding:0;
  margin:0 0 0 2px;
  list-style: none;
} 
#menu ul li{
  float:left; 
  position: relative;
}
#menu ul li a{
  float: left;
  color: #5b5b5b;
  padding: 8px 18px 8px 18px;
  text-decoration: none;
  display: block;
  font-size: 13px;
  text-shadow: 0px 1px #fff;
  background: #C0D8F0 url(img/batas_menu.png)no-repeat right center;
}
#menu ul li a:hover{
  background:#a7d3ff url(img/batas_menu.png)no-repeat right center;
  color: #000;
  text-shadow: none;
}

/* Menu Drop Down */
#menu ul li ul {
  display: none;
  border: 1px solid #dcdcdc;
}
#menu ul li:hover ul { 
  display:block; 
  position:absolute; 
  top:32px;
  padding: 5px 0 5px 0;
  background:#fefefe;
  left:0;
  z-index: 1000;
  margin-left: -1px;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
}
#menu ul li:hover ul li a {
  display:block; 
  background:#fefefe;
  color:#5b5b5b; 
  width:150px;
}
#menu ul li:hover ul li a:hover { 
  color:#000;
  background: #a7d3ff;
}

#headlineFrame {
	width: 1000px;
	padding: 15px;
	background: url(img/bag.png);
	margin: 10px 0 30px 0;
	float: left;
	border: 1px solid #fff;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0px 0px 15px #5b5b5b;
	-webkit-box-shadow: 0px 0px 15px #5b5b5b;
}
	#headline {
		width: 1000px;
		height: 275px;
		background: #fff;
		float: left;
		position:relative;
		border: 1px solid #efefef;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;
	}

			#ribbon {
				position:absolute;
				top:-16px;
				left:-15px;
				z-index:500;
			}


			#slides {
				position:absolute;
				z-index:100;
			}

				.slides_container {
					width:1000px;
					overflow:hidden;
					position:relative;
					display:none;
				}

				.slides_container a {
					width:1000px;
					height:275px;
					display:block;
				}

				.slides_container a img {
					display:block;
				}
				.slides_container div.slide {
					width:628px;
					height:275px;
					display:block;
				}

			#slides .next,#slides .prev {
				position:absolute;
				top:120px;
				left:-24px;
				width:24px;
				height:43px;
				display:block;
				z-index:101;
			}

			#slides .next {
				left:1000px;
			}

			.pagination {
				margin:26px auto 0;
				width:100px;
			}

			.pagination li {
				float:left;
				margin:0 1px;
				list-style:none;
			}

			.pagination li a {
				display:block;
				width:12px;
				height:0;
				padding-top:12px;
				background-image:url(../img/pagination.png);
				background-position:0 0;
				float:left;
				overflow:hidden;
			}

			.pagination li.current a {
				background-position:0 -12px;
			}
			.caption {
				z-index:500;
				position:absolute;
				left: 630px;
				height:270px;
				padding:5px 20px 0 20px;
				background:#fff;
				width:328px;
				color:#2e2e2e;
				text-shadow:none;
				  -moz-border-radius-topright: 5px;
				  -moz-border-radius-bottomright: 5px;
				  -webkit-border-top-right-radius: 5px;
				  -webkit-border-bottom-right-radius: 5px;
			}
			.caption p {
                            text-align: justify;
				margin: 20px 0 0 0;
				line-height: 20px;
			}
			
#content { padding: 10px; }
#left {float: left;width: 260px;}
#left li { list-style-type: none; padding-left: 10px; }
#left h2 {margin-left: 10px;padding: 5px 0 5px 10px; font: bold 13px Verdana, 'Trebuchet MS', Sans-serif;color: #fff;background: #EEF0F1 url(images/hbg.gif) repeat-x;	border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
#left .box {border-right: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 0 0 10px 10px;	padding: 5px 0 10px 0;}
#right { float: right;width: 770px; }
#rightno { float: left;width: auto; }
.contentleft {float: left;width : 510px; }

.contentleftno {float: left;width : 770px; margin-right: 10px;}
.contentleft h2 {padding: 5px 0 5px 10px; font: bold 13px Verdana, 'Trebuchet MS', Sans-serif;color: #fff;background: #EEF0F1 url(images/hbg.gif) repeat-x;	border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
.contentleftbox {border-right: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 0 0 10px 0;	padding: 0 10px 10px 10px;text-align: justify;}
.contentright {float: right;width: 250px;}
.contentright h2 {padding: 5px 0 5px 10px; font: bold 13px Verdana, 'Trebuchet MS', Sans-serif;color: #fff;background: #EEF0F1 url(images/hbg.gif) repeat-x;	border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
.contentrightbox {border-right: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 0 0 10px 0;	padding: 10px;text-align: justify;}

#konten{
    background: #fff;
    -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px;
text-align: justify;
    }

 	#lebaran {
            width: 750px;
            margin-bottom: 10px;
	}
	#lebaran h3 {
		font-size: 14px;
		margin: 0 0 10px 0;
		padding: 3px 7px 6px 7px;
		width: 98%;
		border-bottom: 1px solid #dcdcdc;
	}
	#lebaran h4 {
		font-size: 14px;
		margin: 0 0 10px 0;
		padding: 3px 7px 6px 7px;
		float: left;
		width: 98%;
		border-bottom: 1px solid #dcdcdc;
		text-transform: uppercase;
	}	
	
	#lebarTab {
            width: 710px;
		padding: 15px;
		margin-right: 20px;
		float: left;
		background: #fff;
		border: 1px solid #dcdcdc;
		margin-bottom: 20px;
	}
	#lebarTab h3 {
		font-size: 14px;
		margin: 0;
		padding: 0;
		position: absolute;
	}
	
			#lebarTab ul {list-style: none; padding-left: 5px;line-height: 15px;}
			#lebarTab ul li {margin-left: 0px; padding: 10px; margin-bottom: 0px; border-bottom: 1px dashed #dcdcdc;}
			#lebarTab ul li a { color: #0069ba;}
			#lebarTab ul li a:hover { text-decoration: underline }
			#lebarTab ul li:hover {background: #feffc5 }
	

ul.tabs {
    margin-top: -20px;
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px; /*--Set height of tabs--*/
	border-left: 1px solid #dcdcdc;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #dcdcdc;
	border-left: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 12px;
	padding: 0 20px;
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
}
ul.tabs li a:hover {
	background: #1e92ff;
	color: #fff;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
	color: #5b5b5b;
}
table {width: 100%;border: none;}
th {padding: 5px;}
td {padding: 4px;}

tr.garis:hover {background: #feffc5 }
table.garis {
	border: 1px solid #dcdcdc;
	margin: 20px 0 20px 0;
	border-collapse: collapse;
}
th.garis {
	border: 1px solid #dcdcdc;
	background: url(img/white.jpg) repeat left center;
	text-shadow: 0px 1px #fff;
	padding: 7px 4px 7px 4px;
}

td.garis {
	border: 1px solid #dcdcdc;
	padding: 4px;
}

input {padding: 3px;}
input.cari {margin-top: 0px;width: 125px; background: #fff; border: 1px solid #dcdcdc; color #5b5b5b; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-right: 3px;}
input.pendek {width: 108px; background: #fff; border: 1px solid #dcdcdc; color #5b5b5b; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
input.sedang {width: 200px; background: #fff; border: 1px solid #dcdcdc; color #5b5b5b; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
input.panjang {width: 100%; background: #fff; border: 1px solid #dcdcdc; color #5b5b5b; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
textarea {
width: 100%; background: #fff; border: 1px solid #dcdcdc; color #5b5b5b; -moz-border-radius: 3px; -webkit-border-radius: 3px;
padding: 4px;
}
input.tombol {
	padding: 2px 8px 2px 8px;
	background:url(img/white.jpg)repeat left center;
	border: 1px solid #dcdcdc;
	color:#5b5b5b;
	cursor: pointer;
	-moz-border-radius: 3px; -webkit-border-radius: 3px;
}
input.tombol:hover {color: #000;}
input.tombol:active {background: #fff;}
select {margin-top: 0px;padding: 4px;background: #fff; border: 1px solid #dcdcdc; color #5b5b5b; -moz-border-radius: 3px; -webkit-border-radius: 3px;}

.hal a{
	float: left;
	padding: 4px 5px 4px 5px;
	border: 1px solid #dcdcdc;
	background: url(white.jpg)repeat left center;
	text-shadow: 0px 1px #fff;
	margin-right: 5px;
}
.halaktif a{
	background: #fff;
	color: #000;
	float: left;
	padding: 4px 5px 4px 5px;
	border: 1px solid #dcdcdc;
	text-shadow: 0px 1px #fff;
	margin-right: 5px;
}

.pg-normal {
	padding: 3px 5px 3px 5px;
	margin: 5px 1.5px 0 1.5px;
	border: 1px solid #dcdcdc;
	background: url(img/white.jpg) repeat left center;
	text-shadow: 0px 1px #fff;
	color: #006cff;
	cursor: pointer;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.pg-selected {
	padding: 3px 5px 3px 5px;
	margin: 5px 1.5px 0 1.5px;
	border: 1px solid #5b5b5b; color: #5b5b5b;
	background: url(img/white.jpg) repeat left center;
	text-shadow: 0px 1px #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;	
}


	#kecil {
		width: 298px;
		padding: 15px;
		margin-right: 20px;
		float: left;
		background: #fff;
		border: 1px solid #dcdcdc;
		margin-bottom: 20px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	#kecil h3 {
		font-size: 14px;
		margin: 0 0 10px 0;
		padding: 3px 7px 6px 7px;
		float: left;
		width: 95%;
		border-bottom: 1px solid #dcdcdc;
	}
	#kecil img {padding: 0px; background: #fff;-moz-box-shadow: 0px 0px 5px #bfbfbf;-webkit-box-shadow: 0px 0px 5px #bfbfbf;}
	
			.pengumuman {
			width: 318px;
			float: left;
			background: #ffecec;
			padding: 15px;
			color: #5b5b5b;
			border: 1px dashed #5b5b5b;}
			.pengumuman h4 {background: url(img/pengumuman.png) no-repeat left center; min-height: 35px;padding: 5px 0 5px 55px; margin: 0; font-size: 16px; border-bottom: 1px solid #5b5b5b;text-shadow: 0px 1px #fff;}
   
#sidebar {
	width: 260px;
	float: left;
	margin: 30px 0 0 0;
}

	.elearning {
		width: 236px;
		padding: 10px;
		height: 200px;
		float: left;
		background: #fff;
		border: 1px solid #dcdcdc;
		margin-bottom: 20px;
	}

	.kotakSidebar {
		width: 230px;
		padding: 10px;
		float: left;
		background: #fff;
		margin-bottom: 20px;
		border: 1px solid #dcdcdc;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}

		.albumgaleri  {
			padding: 2px;
			width: 135px;
			height: 220px;
			background: #f4f4f4;
			border: 1px solid #dcdcdc;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			float: left;
			margin: 20px 20px 0 0;
			text-align: center;
		}
		/*.albumgaleri a:hover {
			-moz-box-shadow: 0px 0px 5px #5b5b5b;
			-webkit-box-shadow: 0px 0px 5px #5b5b5b;
			
		} */
		p.thumb{
		float:left;
		margin:.5em 0;
		margin-right:10px;
		background: #fff;
		border: 1px solid #dcdcdc;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding:2px;
		}
		p.thumb a{
		display:block;
		float:left;
		width:128px;
		height:90px;
		overflow:hidden;
		position:relative;
		z-index:1;	
		}	
		p.thumb a img{
		float:left;
		top: -0px;
		left:-0px;
		width: 128px;
		position:absolute;
		}
#footer a:hover { color: #333; }
#footer {no-repeat;color: #000;text-align: left;}
#footer a { color: #000; }
	.f_kiri {
		float: left;
	}
	.f_kanan {
		float: right;
		text-align: right;
	}