.body
	{
	/*background:#660000;*/
	background: #50a3a2;
background: -moz-linear-gradient(left, #50a3a2 0%, #53e3a6 100%);
background: -webkit-linear-gradient(left, #50a3a2 0%,#53e3a6 100%);
background: linear-gradient(to right, #50a3a2 0%,#53e3a6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#50a3a2', endColorstr='#53e3a6',GradientType=1 );

	}

	.hideable { display:none } /*hide div*/

#kotakpenuh
{
	height:100%;
	width:100%;
	position: absolute;
  overflow: hidden;
}
	
#wrapper
	{
	background: rgba(252,234,187,1);
background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 31%, rgba(248,181,0,1) 32%, rgba(251,223,147,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(252,234,187,1)), color-stop(31%, rgba(252,205,77,1)), color-stop(32%, rgba(248,181,0,1)), color-stop(100%, rgba(251,223,147,1)));
background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 31%, rgba(248,181,0,1) 32%, rgba(251,223,147,1) 100%);
background: -o-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 31%, rgba(248,181,0,1) 32%, rgba(251,223,147,1) 100%);
background: -ms-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 31%, rgba(248,181,0,1) 32%, rgba(251,223,147,1) 100%);
background: linear-gradient(to bottom, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 31%, rgba(248,181,0,1) 32%, rgba(251,223,147,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93', GradientType=0 );
	
	
	width: 500px;
    height: 180px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	text-align:center;
	
	border-radius: 24px 24px 24px 24px;
-moz-border-radius: 24px 24px 24px 24px;
-webkit-border-radius: 24px 24px 24px 24px;
border: 0px solid #000000;

-webkit-box-shadow: 4px 7px 5px -1px rgba(0,0,0,1);
-moz-box-shadow: 4px 7px 5px -1px rgba(0,0,0,1);
box-shadow: 4px 7px 5px -1px rgba(0,0,0,1);
	}

/* untuk halaman utama */

#lifoto {
	background: black; 
	width: 128px; 
	height: 128px; 
	border-radius: 64px; 
	border: 2px solid orange; 
	overflow:hidden;
	margin:20px 0px 60px 40px;
}



/* Navigation Menu - Background */
.navigation {
  /* critical sizing and position styles */
  width: 215px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow-x: hidden;
  /* non-critical appearance styles */
  list-style: none;
  background: #007777;
  /*padding-top:35px;
  background: -moz-linear-gradient(left, #50a3a2 0%, #53e3a6 100%);
background: -webkit-linear-gradient(left, #50a3a2 0%,#53e3a6 100%);
background: linear-gradient(to right, #50a3a2 0%,#53e3a6 100%);*/
}



/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
  /* Critical position and size styles */

  min-height: 100%;
  min-width: 100%;
  /*background-color: white;  Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  left: 215px;
  z-index: 1;
  background: #f4f7f6;
  padding-left: 2em;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
  /* non-critical apperance styles 
  padding: 4em; 
  background: #50a3a2;
  
background: -moz-linear-gradient(left, #50a3a2 0%, #53e3a6 100%);
background: -webkit-linear-gradient(left, #50a3a2 0%,#53e3a6 100%);
background: linear-gradient(to right, #50a3a2 0%,#53e3a6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#50a3a2', endColorstr='#53e3a6',GradientType=1 );
/*  background-size: 200%;*/
}

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
  
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 0px; top: 0px;
  z-index: 2;
  
  /* non-critical apperance styles */
  height: 50px;
  width: 215px;
  cursor: pointer;

  /*background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");*/
  /*background-size: contain;*/
	background-image: url("../img/menu.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
   /* background-position: left;
	background-size: 91px 20px;*/



}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: left 0.1s;
  
}

.nav-trigger:checked + label {
  left: 0px;
  width: 30px;
  height: 100%;
  background-color:#007777;
  background-image: url("../img/cursor.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
   background-position: top left;
   
}

.nav-trigger:checked ~ .site-wrap {
  left: 30px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
  
}

body {
	/* Without this, the body has excess horizontal scroll when the menu is open */
  overflow-x: hidden; 
}

/* Additional non-critical styles 

h1, h3, p {
  max-width: 600px;
  margin: 0 auto 1em;
}

code {
	padding: 2px;
	background: #ddd;
} */

/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }

/* dropdown halaman utama */

.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
  display: block;
  background-color: 	#007777;
  text-decoration: none;
  padding: 10px;
  color: #fff;
  border-bottom: 1px solid #838b99;
}

/* add hover behaviour */
.mainmenu a:hover {
   /* background-color: #C5C5C5; */
	background-color: #63a8a5;
}


/* when hovering over a .mainmenu item,
  display the submenu inside it.
  we're changing the submenu's max-height from 0 to 200px;
*/

.mainmenu li:hover .submenu {
  display: block;
  max-height: 200px;
}

/*
  we now overwrite the background-color for .submenu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.submenu a {
  background-color: #999;
}

/* hover behaviour for links inside .submenu */
.submenu a:hover {
  background-color: #666;
}

/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

#kotakIconUtama
{
	
}

#kotakInfo1
{
	width: 30%;
    height: 200px;
	margin: 10px 20px 10px 0px;
	padding: 10px 0px 20px 0px;
	background:#cee2dd;
	display:block;
	float:left;
	
/*border-left: 6px solid #007777;*/
}

#kepalaKotakInfo1
{
	width: 100%;
	height: 20px;
	padding: 0px 10px 0px 10px;
	font-size: 14px;
	font-family: 'Allerta';
	color:#007777;
	
}
#isiKotakInfo1

{
/*	border-top: 1px solid #007777; */
	width: 100%;
    height: 90%;
	margin: 10px 2px 5px 0px;
	padding: 10px 0px 0px 10px;
	overflow-y: scroll;
	font-family: 'Allerta';
	font-size: 12px;
	background:#fff;
}





/*akhir dropdown halaman utama */
/*akhir halaman utama */
	
	
#kotakCapt
{
	width: 303px;
    height: 110px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	text-align:center;
}

#kotakTanggal
{
	width:450px;
	height:auto;
	text-align:left;
	margin-left:auto;
	margin-top:20px;
	margin-right:auto;
	margin-bottom:20px;
}

#tombolBawah
{
	width:auto;
	height:auto;
	margin:auto;
	padding:10px;
	display:inline-block;
}

#kotakLogin
{
	width:300px;
	height:90px;
	display:block;
	text-align:center;
	margin-left:auto;
	margin-top:50px;
	margin-right:auto;
	margin-bottom:auto;
}


.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  bottom: -160px;
  -webkit-animation: square 25s infinite;
  animation: square 25s infinite;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
  left: 10%;
}
.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
  background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
  left: 70%;
}
.bg-bubbles li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  -webkit-animation-delay: 15s;
          animation-delay: 15s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
  background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 11s;
          animation-delay: 11s;
}
@-webkit-keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-1000px) rotate(600deg);
            transform: translateY(-1000px) rotate(600deg);
  }
}
@keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-1000px) rotate(600deg);
            transform: translateY(-1000px) rotate(600deg);
  }
}

/*-------------------------------untuk m--------------------*/

#wrapper-m
{
	height: auto;
	width: 90%;
	display: block;
	
	margin-left:auto;
	margin-right:auto;
	margin-bottom:auto;
}	

#textJudul-m
{
	margin-top:50px;
	color:#b7d6dd;
	text-align:center;
	font-size:35px;
	height:80px;
	
	display:block;
	float:left;
	width:100%;
}	

#kotakIsi-m
{
	margin-top:50px;
	margin-left:10%;
	margin-right:10%;
	height:auto;
	display:block;
	float:left;
	width:80%;
	text-align:center;
	
}	
	
#menu-m
	{
	background: rgba(252,234,187,1);
background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 31%, rgba(248,181,0,1) 32%, rgba(251,223,147,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(252,234,187,1)), color-stop(31%, rgba(252,205,77,1)), color-stop(32%, rgba(248,181,0,1)), color-stop(100%, rgba(251,223,147,1)));
background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 31%, rgba(248,181,0,1) 32%, rgba(251,223,147,1) 100%);
background: -o-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 31%, rgba(248,181,0,1) 32%, rgba(251,223,147,1) 100%);
background: -ms-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 31%, rgba(248,181,0,1) 32%, rgba(251,223,147,1) 100%);
background: linear-gradient(to bottom, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 31%, rgba(248,181,0,1) 32%, rgba(251,223,147,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93', GradientType=0 );
	
	
	width: 250px;
    height:250px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left:10px;
	margin-right:10px;
	margin-top:20px;
	text-align:center;
	display:inline-block;
	text-decoration:none;
	color:#000;
	font-size:24px;
	
	border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border: 0px solid #000000;

-webkit-box-shadow: 4px 7px 5px -1px rgba(0,0,0,1);
-moz-box-shadow: 4px 7px 5px -1px rgba(0,0,0,1);
box-shadow: 4px 7px 5px -1px rgba(0,0,0,1);
	}

#menu-m:hover
	{
	background: rgba(252,234,187,1);
background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 31%, rgba(248,181,0,1) 32%, rgba(251,223,147,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(252,234,187,1)), color-stop(31%, rgba(252,205,77,1)), color-stop(32%, rgba(248,181,0,1)), color-stop(100%, rgba(251,223,147,1)));
background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 31%, rgba(248,181,0,1) 32%, rgba(251,223,147,1) 100%);
background: -o-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 31%, rgba(248,181,0,1) 32%, rgba(251,223,147,1) 100%);
background: -ms-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 31%, rgba(248,181,0,1) 32%, rgba(251,223,147,1) 100%);
background: linear-gradient(to bottom, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 31%, rgba(248,181,0,1) 32%, rgba(251,223,147,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93', GradientType=0 );
	
	
	width: 250px;
    height:250px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left:10px;
	margin-right:10px;
	margin-top:20px;
	text-align:center;
	display:inline-block;
	text-decoration:none;
	color:#000;
	font-size:24px;
	
	border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border: 0px solid #000000;

-webkit-box-shadow: 7px 10px 10px -1px rgb(153, 204, 255);
-moz-box-shadow: 7px 10px 10px -1px rgb(153, 204, 255);
box-shadow: 7px 10px 10px -1px rgb(153, 204, 255);
	}


#kotakCapt-m
{
	width: 303px;
    height: 110px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	text-align:center;
}

#kotakIsi-u
{
	margin-top:50px;
	margin-left:10%;
	margin-right:10%;
	height:auto;
	display:block;
	float:left;
	width:600px;
	text-align:center;
	background-color:white;
}	

#imageMenu-m
{
	margin:10px 10px 10px 10px;
	width: 230px;
    height:190px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

}

/* untuk ijin */

#kotakkertas
{
	position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	display:block;
	width:650px;
	height:700px;
	background-color:#ECEAD9;
	padding:50px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 10px 10px 14px -5px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 14px -5px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 14px -5px rgba(0,0,0,0.75);
}

#kotakkertasdinas
{
	margin: auto;
	display:block;
	width:650px;
	height:auto;
	background-color:#ECEAD9;
	padding:50px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 10px 10px 14px -5px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 14px -5px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 14px -5px rgba(0,0,0,0.75);
}

#formjudulijin
{
	width:100%;
	height:50px;
	text-align:center;
	font-size:20px;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	text-decoration:underline;
}



/*-------------------------------untuk popUp kalender--------------------*/

.calendar {
				font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, sans-serif;
				font-size: 0.9em;
				background-color: #EEE;
				color: #333;
				border: 1px solid #DDD;
				-moz-border-radius: 4px;
				-webkit-border-radius: 4px;
				border-radius: 4px;
				padding: 0.2em;
				width: 14em;
			}
			
			.calendar a {
				outline: none;
			}
			
			.calendar .months {
				background-color: #F6AF3A;
				border: 1px solid #E78F08;
				-moz-border-radius: 4px;
				-webkit-border-radius: 4px;
				border-radius: 4px;
				color: #FFF;
				padding: 0.2em;
				text-align: center;
			}
			
			.calendar .prev-month,
			.calendar .next-month {
				padding: 0;
			}
			
			.calendar .prev-month {
				float: left;
			}
			
			.calendar .next-month {
				float: right;
			}
			
			.calendar .current-month {
				margin: 0 auto;
			}
			
			.calendar .months a {
				color: #FFF;
				text-decoration: none;
				padding: 0 0.4em;
				-moz-border-radius: 4px;
				-webkit-border-radius: 4px;
				border-radius: 4px;
			}
			
			.calendar .months a:hover {
				background-color: #FDF5CE;
				color: #C77405;
			}
			
			.calendar table {
				border-collapse: collapse;
				padding: 0;
				font-size: 0.8em;
				width: 100%;
			}
			
			.calendar th {
				text-align: center;
			}
			
			.calendar td {
				text-align: right;
				padding: 1px;
				width: 14.3%;
			}
			
			.calendar td a {
				display: block;
				color: #1C94C4;
				background-color: #F6F6F6;
				border: 1px solid #CCC;
				text-decoration: none;
				padding: 0.2em;
			}
			
			.calendar td a:hover {
				color: #C77405;
				background-color: #FDF5CE;
				border: 1px solid #FBCB09;
			}
			
			.calendar td.today a {
				background-color: #FFF0A5;
				border: 1px solid #FED22F;
				color: #363636;
			}

/*---------------------------------selesai---------------------*/

.more {
      display: none;
      border-top: 1px solid #666;
      border-bottom: 1px solid #666; }
   a.showLink, a.hideLink {
      text-decoration: none;
      color: #36f;
      padding-left: 8px;
      background: transparent url(down.gif) no-repeat left; }
   a.hideLink {
      background: transparent url(up.gif) no-repeat left; }
   a.showLink:hover, a.hideLink:hover {
      border-bottom: 1px dotted #36f; }