body{
color: #000;
text-align:center;
margin:0px 0 4px 0; 
padding:0; 

}

#wrapper{
clear:both;
margin:auto;
width:752px;
padding:0;
text-align:center;
}

#wrap{
clear:both;
float:left;
margin:0;
width:750px;
height:500px;
padding:0;
border:0px solid #9f9e80;
}

#top{
clear:both;
float:left;
width:750px;
height:186px;
margin:-33px;
padding:0;
font: 11px/1.6em verdana, 'Lucida Sans Unicode', 'Lucida Grande', arial, sans-serif;
}
#top p{
font: 11px/1.5em verdana, 'Lucida Sans Unicode', 'Lucida Grande', arial, sans-serif;
color:#f4f4f4;
margin:0;
padding:0;
}
#top img{
border:0;
}
#topl{
float:left;
width:229px;
margin:0;
padding:0px 0 0 10px;
text-align:left;
}

#topr{
float:left;
width:501px;
margin:0;
padding:0 10px 0 0;
text-align:right;
}

#topcenter{
	width:750px;
}

#toprtop{
clear:both;
float:left;
width:501px;
margin:0;
padding:4px 0px 0 0;
height:15px;
}
#toprtop a, #toprtop a:active, #toprtop a:link, #toprtop a:visited {
font: 11px/1.3em verdana, 'Lucida Sans Unicode', 'Lucida Grande', arial, sans-serif; 
color:#e1e7cd;
font-weight:normal;
text-decoration:none;
margin:0 2px 0 2px;
}
#toprtop a:hover{
color:#f3f2e7;
text-decoration:none;
}

#toprbottom{
clear:both;
float:left;
width:501px;
margin:0;
padding:56px 0px 0 0;
}

#toprbottom a, #toprbottom a:active, #toprbottom a:link, #toprbottom a:visited {
font: 12px/1.3em verdana, 'Lucida Sans Unicode', 'Lucida Grande', arial, sans-serif; 
color:#fff;
font-weight:normal;
text-decoration:none;
margin:0 4px 0 4px;
border-bottom:2px solid none;
}
#toprbottom a:hover{
color:#f3f2e7;
text-decoration:none;
border-bottom:2px solid #afdbff;
}


#content{
clear:both;
float:left;
width:710px;
margin:0;
padding:15px 20px 120px 20px;
font: 12px/1.6em verdana, 'Lucida Sans Unicode', 'Lucida Grande', arial, sans-serif;
text-align:left;
background:#fff;
}

#content p{
margin:7px;
padding:0;
}
h1 {
	margin:32px;
	padding:0;
	font: 16px/1.6em verdana, 'Lucida Sans Unicode', 'Lucida Grande', arial, sans-serif;
	font-weight:bold;
	color: #122c46;
	text-align:left;
}
.box{
clear:both;
float:left;
width:710px;
margin:0 0 4px 0;
padding:0;
border:1px solid #CCCCCC;
}
.box:hover{
background:#F3F3E9;
}
h2 {
	margin:0px;
	border-bottom: #a6bbc7 1px solid;
	padding:0 0 0 4px;
	font: 14px/1.6em verdana, 'Lucida Sans Unicode', 'Lucida Grande', arial, sans-serif;
	font-weight:bold;
	color: #122c46;
	text-align:left;
	background:#e6ebf0;
}
.output{
	font: 11px/1.6em verdana, 'Lucida Sans Unicode', 'Lucida Grande', arial, sans-serif;
	margin:0;
	padding:4px;
	COLOR: #000000;
	width:702px;
}
#kelime {
	border: #a6bbc7 1px solid;
	font: 16px/1.6em verdana, 'Lucida Sans Unicode', 'Lucida Grande', arial, sans-serif;
	background: url(../images/input.jpg) #ffffff repeat-x left top;
	margin:0;
	padding:0;
	color: #000000;
	height: 24px
}
.form{
margin:4px 0 10px 0;
padding:0;
}
.input {
	border: #a6bbc7 1px solid;
	background:#fff;
	margin:0;
	padding:0;
}

.button{
	border: #a6bbc7 1px solid;
	background:#f4f4f4;
	margin:0;
	padding:2px 2px 2px 2px;
	font: 12px/1.6em verdana, 'Lucida Sans Unicode', 'Lucida Grande', arial, sans-serif;
	color:#000000;
}
.spacer{
margin:8px 0 18px 0;
padding:0 0 0 80px;
}



#footer{
clear:both;
float:left;
width:740px;
margin:0;
padding:4px 0 10px 10px;
background:url(../images/bgfooter.jpg) repeat-x #565656;
font: 11px/1.5em verdana, 'Lucida Sans Unicode', 'Lucida Grande', arial, sans-serif;
font-weight:normal;
color: #fff;
text-align:left;
}
#footer a, #footer a:active, #footer a:link, #footer a:visited {
font: 12px/1.3em verdana, 'Lucida Sans Unicode', 'Lucida Grande', arial, sans-serif; 
color:#afdbff;
font-weight:normal;
text-decoration:none;
margin:0 4px 0 0px;
}
#footer a:hover{
color:#f3f2e7;
text-decoration:none;
}


.kotak-angka{
	width:20px; border:0px solid #ccc; text-align:center; float:left; margin: 5px 0 0 0;
}
.kotak-detail{
	float:left; width:95%; border:0px solid #ccc; margin:5px 0 0 6px;
}

.tc a:active,a:link,a:visited{
	text-decoration:none;
	font-weight:bold;
}