/* CSS Document */

/* INDEX:
 1. WRAPPER
 2. HEADER
 3. MENU
 4. SIDEBAR
 5. CONTENT
 6. FOOTER
*/
body { 
	background-color: #11457a;
	background-image:url(blue.jpg);
	background-position:center;
	background-position:top;
	background-repeat:no-repeat;
	background-size:auto;
 margin:0;

 font-family: "calibri"; font-size: 12px;
}
/* 1. WRAPPER
---------------------------------- */
#wrapper {
 width: 200px;
 margin: 15px auto;
 height: auto;
 padding: 20px;
 background-color: #FFF ;
 box-shadow: 0px 0px 20px #999;
 -moz-box-shadow:0px 0px 20px #999;
 -webkit-box-shadow: 0px 0px 20px #999;
 border-radius: 17px;
 -moz-border-radius: 17px;
 -webkit-border-radius: 17px;
 
}
#petunjuk {
 width: 700px;
 margin: 15px auto;
 height: auto;
 padding: 20px;
 background-color: #FFF ;
 box-shadow: 0px 0px 20px #999;
 -moz-box-shadow:0px 0px 20px #999;
 -webkit-box-shadow: 0px 0px 20px #999;
 border-radius: 17px;
 -moz-border-radius: 17px;
 -webkit-border-radius: 17px;
 font-size:14px;
}
/* 2. HEADER
---------------------------------- */
#header {
 width: auto;
 height: 70px;
 margin:0px auto;
 background-color: #FFF ;
 vertical-align:baseline;
 text-align: center;

  
}
/* 3. MENU
---------------------------------- */
#menu {
 width: 700px;
 height: 42px;
 margin-bottom: 7px;
 border: 1px solid #999;
 background-image:url(menu.jpg);
 background-repeat:repeat-x;
 font-size:17px;
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 box-shadow: 0px 0px 10px #ccc;
 -moz-box-shadow:0px 0px 10px #ccc;
 -webkit-box-shadow: 0px 0px 10px #ccc;
}
#menu ul{
 margin:  8px 4px 4px 7px;
 padding: 0px;
 list-style: none;
}
#menu li{
 
 padding: 0px;
 display: inline;
}
#menu a{ 
 color: #000000;
 padding: 6px 6px 12px 6px;
 text-decoration: none;
}
#menu a:hover{
 background-image:url(red.jpg);
 background-repeat:repeat-x;
 padding: 4px 6px 8px 6px;
 text-decoration: none;
 color: #FFF;

}
/* 4. SIDEBAR
---------------------------------- */
#sidebar {
 float: left;
 width: 200px;
 height: 290px;
 border: 1px solid #CCC;
 margin-bottom: 7px;
 text-align: center;
  border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
}

#cento {
 float: left;
 
 height: 290px;
 border: 1px solid #CCC;
 margin-bottom: 7px;
 margin-left:7px;
 
 text-align: center;
  border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
}

#wrapcent {
 float: left;
 width: 485px;
  
 background-color: #ffffff;
 color:#000000;
 margin-bottom: 2px;
 border: 1px solid #ececec;
 margin-bottom: 7px;
 margin-left:7px;
 padding: 2px;
  border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
}

#box {
 float: left; 
 text-align:center;
 width: 150px;
 height: 160px;  
 background-color: #ffffff;
 color:#000000;
 margin: 2px 2px 2px 2px;
 border: 1px solid #ececec;
 
 
 padding: 2px;
  border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
}
#box ul{
 margin: 2px 2px 2px 2px;
 padding: 0px;
 list-style: none;
}
#box li{
 
 padding: 0px;
 display: inline;
}
#box a{ 
 color: #000000;
 text-decoration: none;
}
#box a:hover{ 
background-color:#FFFFCC;
}

/* 5. CONTENT
---------------------------------- */
#content {
 float: left;
 width: 470px;
 height: 120px; 
 background-color: #ececec;
 color:#000000;
 
 border: 1px solid #ececec;
 margin: 3px 3px 3px 3px;
 
 padding: 4px;
  border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
}
#content img{
 background-color:#FFFFFF;
 border-radius: 17px; 
 -moz-border-radius: 17px;
 -webkit-border-radius: 17px;
 box-shadow: 0px 0px 10px #999;
 -moz-box-shadow:0px 0px 10px #999;
 -webkit-box-shadow: 0px 0px 10px #999;
 padding: 2px; 
 margin-right: 10px;
 margin-top: 10px;
 margin-bottom: 5px;
 float:left;
}
#cofoot {   
   
 width: 50px;
 height: 50px; 
 background-color: #cc0000;
 color:#000000;
 margin: 2px 2px 2px 2px;
 border: 1px solid #cc0000;
 margin: 7px;
 
 padding: 2px;
  border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
}
/* 6. FOOTER
---------------------------------- */
#footer { 
  
 width: 700px; 
 height:225; 
 color:#FFFFFF;
 
 padding-top: 0px;
 border: 1px solid #CCCCCC;
 text-align: center;
 background-image:url(bg_btm.jpg);
 background-repeat:repeat-x;
 clear: both;
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
}


.style3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; }

.tom {
        
        margin-top:10px;
        text-align: center;
        font-size: 11px;
        font-weight: bold;
        
        padding: 0 4px;
        
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-transition: all 0.218s;
        -moz-transition: all 0.218s;
        -ms-transition: all 0.218s;
        -o-transition: all 0.218s;
        transition: all 0.218s;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        cursor: default;
        border: 1px solid transparent;
        color: white;
        text-shadow: 0 1px rgba(0, 0, 0, 0.1);
        
        background-color: #4d90fe;
        
      }
      .tom:hover {
        text-decoration: none;
        -webkit-transition: all 0.0s;
        -moz-transition: all 0.0s;
        -ms-transition: all 0.0s;
        -o-transition: all 0.0s;
        transition: all 0.0s;
        border: 1px solid #4787ed;
        color: white;
        text-shadow: 0 1px rgba(0, 0, 0, 0.3);
        
        
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        -ms-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        -o-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        box-shadow: 0 1px 1px rgba(0,0,0,0.2);
      }   
	  .tom:visited {
        
        margin-top:10px;
        text-align: center;
        font-size: 11px;
        font-weight: bold;
        
        padding: 0 4px;
        
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-transition: all 0.218s;
        -moz-transition: all 0.218s;
        -ms-transition: all 0.218s;
        -o-transition: all 0.218s;
        transition: all 0.218s;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        cursor: default;
        border: 1px solid transparent;
        color: white;
        text-shadow: 0 1px rgba(0, 0, 0, 0.1);
        
        background-color: #D14836;
        
      }
	  
	  #wrapper-login {
 width: 300px;
 margin: 15px auto;
 height: auto;
 padding: 20px;
 background-color: #FFF ;
 box-shadow: 0px 0px 20px #999;
 -moz-box-shadow:0px 0px 20px #999;
 -webkit-box-shadow: 0px 0px 20px #999;
 border-radius: 17px;
 -moz-border-radius: 17px;
 -webkit-border-radius: 17px;
}

a:link {
	color: #F00;
	text-decoration:none;
	}
a:visited {
	color:#999;
	}
a:hover {
	color: #339;
	}
.log {
        
        margin-top:10px;
        text-align: center;
        
        font-weight: bold; text-decoration:none;
        
        padding: 3px;
        
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-transition: all 0.218s;
        -moz-transition: all 0.218s;
        -ms-transition: all 0.218s;
        -o-transition: all 0.218s;
        transition: all 0.218s;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        cursor: default;
        border: 1px solid red;
        color: #FFF;
        text-shadow: 0 1px rgba(0, 0, 0, 0.1);
		
        
        background-color: #ffffff;
        
      }