body {
 background-color: #FFF;
 color: #1786b0;
 padding: 0; margin: 0; font: 0.7em Arial, sans-serif; line-height: 1.5em;
}

/*buat notifikasi =========================*/
#kepala{
    background-color:#3B5998;
    padding-top:10;
    padding-bottom:2;
}

#pesan{
    background-color:#4B59a9;
    padding:2;
    position:relative;
    left:110;
    cursor:pointer;
}

#notifikasi{
    background-color:red;
    font-size:10pt;
    position:relative;
    top:-4
}

#info{
    width:200px;
    padding:3;
    position:absolute;
    left:50%;
    top:auto;
    background-color:#efefef;
    z-index:1000;
    display:none}

.info2{
    font-family:arial;
    font-size:10pt}
/*buat notifikasi =========================*/

a { color: #46574D; background: inherit; }
a:hover { color: #647B6D; background: inherit;}

h1 { color: #FFF; font: bold 2em Arial, Sans-Serif; letter-spacing: -1px; padding: 0 0 100px 0x; margin: 0; }
h2 { margin: 0; padding: 0; font: normal 1.6em Arial, Sans-Serif; letter-spacing: -1px; }
h1 a { color: red; background: inherit; }
h1 a, h2 a { text-decoration: none; }
h1 a:hover, h2 a:hover { color: #BFE1ED; background: inherit; }
h3 { font: 90% Arial, Sans-Serif; margin: 0 0 10px 0; padding: 0; color: #46574D; background: #FFF; }
p { color:#FFF; margin: 10px 10px 10px 10px; line-height: 1.5em; }
form { margin: 0; }
th {
  color: white;
}

input.search {  height: 15px; border: 1px dashed #46574D; background: #FFF url(input.jpg) no-repeat; padding: 3px; color: #616161; }
textarea {   border: 1px dashed #46574D; background: #FFF url(input.jpg) no-repeat; padding: 3px; color: #616161; }
select {   border: 1px dashed #46574D; background: #FFF url(input.jpg) no-repeat; padding: 3px; color: #616161; }

radio.search {  height: 15px; border: 1px dashed #46574D; background: #FFF url(input.jpg) no-repeat; padding: 3px; color: #616161; }

input.submit { 
background: #5277ff;
color: white;
border-style: outset;
border-color: #0066A2;
height: 25px;
width: 100px;
font: bold 15px arial, sans-serif;
text-shadow:none;
}

.cboxB {
  font-size: 12px;
  color:white;
}
.cboxB label { cursor: pointer; }

.radio-toolbar {
  margin: 5px;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.radio-toolbar label {
    display: inline-block;
    background-color: #00aeff;
    padding: 8px 15px;
    font-family: sans-serif, Arial;
    font-size: 16px;
    border: 2px solid #444;
    border-radius: 2px;
}

.radio-toolbar label:hover {
  background-color: #f7941d;
}

.radio-toolbar input[type="radio"]:focus + label {
    border: 2px dashed #444;
}

.radio-toolbar input[type="radio"]:checked + label {
    background-color: #f7941d;
    border-color: #4c4;
}

.responsive {
  max-width: 100%; 
  display:block; 
  height: auto;
}

/*buat Menu tampilan angka 1,2,3 setiap menu =========================*/
.list-type5{
width:310px;
margin:0 auto;
}

.list-type5 ol {
list-style-type: none;
list-style-type: decimal !ie; /*IE 7- hack*/
margin: 0;
margin-left: 0em;
padding: 0;
counter-reset: li-counter;
}
.list-type5 ol li{
background: #FFF;
position: relative;
margin-bottom: 1.5em;
padding: 0.5em;
padding-left: 58px;
}

.list-type5 a{
text-decoration:none;
color:black;
font-size:15px;
font-family: 'Raleway', sans-serif;
}

.list-type5 li:hover{
box-shadow:inset -1em 0 #F0D756;
-webkit-transition: box-shadow 0.5s; /* For Safari 3.1 to 6.0 */
transition: box-shadow 0.5s;
}

.list-type5 ol li:before {
position: absolute;
top: -0.3em;
left: -0.5em;
width: 1.8em;
height: 1.2em;
font-size: 2em;
line-height: 1.2;
font-weight: bold;
text-align: center;
color: white;
background-color: #f7941d;
transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
z-index: 99;
overflow: hidden;
content: counter(li-counter);
counter-increment: li-counter;
}
/*buat Menu tampilan angka 1,2,3 setiap menu =========================*/

.content { 
    background: #FFF; 
	margin: 0 auto;
	padding: 0px;
	width: 100%;
	color: #1786b0;
}

.preheader {
	background: #f7941d;
	color: #1786b0;
	width: 100%;
	height: 71px;
	margin: 0;
	padding: 0;
}

.preheader a { color: #1786b0; background: inherit; text-decoration:none; }
.preheader a:hover { color: #1786b0; background: inherit;}

.preheader .padding {
	
	float: right;
	padding: 52px 70px 0 0;
	color: #1786b0;
}

.header {
	background: #f7941d;
	color: #FFF;
	width: 100%;
	height: 78px;
	margin: 0;
	padding: 0;
}

.header .title {
	float: left;
	padding: 12px 0 0 84px;
	color: #FFF;
	font: bold 2em Arial, sans-serif;
}

.header .slogan {
	float: left;
	clear: both;
	padding: 2px 0 0 84px;
	color: #FFF;
	font: bold 1.2em Arial, sans-serif;
}

#nav {
	background-color: #1786b0;
	width: 100%;
	height: 28px;
	margin: 0;
	padding: 0;
}

#nav ul { margin:0; list-style:none; padding: 0px 0 0 76px; }
#nav a, #nav strong, #nav span { float:left; display:block; color:#fff; padding: 5px 10px 5px 10px; background: #9e9e9e; text-decoration:none; font-weight: bold; }
#nav a { float:none; }
#nav li { float:left; color: #FFF; background:#9e9e9e; margin:0; padding:0 0 0 0px; }
#nav #current { float:left; background: #aeaeae; color: #FFF; }
#nav #current a { float:left; background: #aeaeae; padding:5px 10px 5px 10px; color:#FFF; }
#nav a:hover { float:left; color:#FFF; background:#aeaeae; }  
#nav .padding { padding: 5px 0 0 10px; font-weight: bold; }

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Buat navigation bar ========================*/
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 7px 8px;
  text-decoration: none;
  font-size: 14px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Buat navigation bar ========================*/

.main_content {
	background-color: #73ad46;
	margin: 0 auto;
	padding: 0px;
	width: 100%;
}


.sd_left {
    background-color: #002365;
	color: #000;
	margin: 0 0 5% 5%;
	padding: 0px 20px 0px 5px;
	width: 90%;
}	

.sd_right {
    clear:both;
    background-color: #87b5fa;
	float: right;
	color: #000;
	margin: 0 90px 0 0;
	padding: 0px 0px 0 15px;
	width: 220px;
	border-left: 5px dashed #FFF;
	border-right: 5px dashed #FFF;
}	

/* For IE... */
* html .sd_right {
    clear:both;
    background-color: #1786b0;
	float: right;
	color: #1786b0;
	margin: 0 40px 0 0;
	padding: 0px 0px 0 15px;
	width: 170px;
	border-left: 1px dashed #ccc;
}	


.text_padding {
	padding: 15px 0px 0 0;
	text-align: center;
	font-size: 2vmin;
}

.main_content h2 {
	background-color: #00aeff;
	padding: 5px 0 5px 0;
	color: #FFF;
	font: bold 1.6em Arial, sans-serif;
}


.date { 
	color: #46574D; 
	background: #FFFFFF;
	text-align: right; 
	margin: 10px 0 5px 0; 
	padding: 0.4em 0 0 0; 
	border-top: 1px solid #eee;
}

.button { 
	background-color: #73ad46;
	border: none;
	color: white;
	padding: 8px 15px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 14px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

.comments { 
	padding: 10px 10px 8px 10px; 
	margin: 0 0 7px 0; 
	background: #f8f8f8; 
	color: #000;
}

.commentsbox { 
	padding: 8px 0 10px 10px; 
	margin: 0 0 10px 0; 
	background: #f4f4f4; 
	color: #000;
}

.error {
	color: #990000;
	background-color: #FFF0F0;
	padding: 7px;
	margin-top: 5px;
	margin-bottom: 10px;
	border: 1px dashed #990000;
}
.error h2 {
	color: #990000;
	background: inherit;
}

.success {
	color: #000000;
	background: #F5FBE1;
	padding: 7px;
	margin-top: 5px;
	margin-bottom: 5px;
	border: 1px dashed #7BA813;
}
.success h2 {
	color: #7BA813;
	background: inherit;
}

.footer { 
	background: #f7941d;
	width: 100%;
	height: 78px;
	color:#FFF;  
	font-size:100%;
	text-align:center; 
	clear:both;
}

.footer .padding {
	padding: 20px 0 0 0;
		
}

.hscroll {
  overflow-x: auto; /* Horizontal */
  height: 100%;
  overflow-y: auto; /* Vertical */
}

.table2 {border: 1px solid black;border-collapse:collapse;width:100%}
.table2 td {color: #fff;
  font-size: 2.7vmin;
  padding: 3px;}
.table2 th {border-bottom: 0px solid #364043;
  color: #E2B842;
  font-size: 0.85em;
  font-weight: 600;
  padding: 0.5em 1em;
  text-align: left;}
.table2 thead th {color:black;font-size:13px;text-align:center;background: #dedede 0 -1300px;padding: 10px 6px}
.table2 thead th2 {color:#fff;font-size:13px;text-align:left;background: #71c637 0 -1300px;padding: 10px 6px}

/*Dalam nya tabel*/
.table2 tbody th {color:#E2B842;font-size:13px;text-align:center;background: #1c5682;padding: 6px}