@font-face {
	 font-family: Gotham;
	 src: url('../font/Gotham.eot');
	 src: url('../font/Gotham.eot?#iefix') format('embedded-opentype'),
		  url('../font/Gotham.woff') format('woff'),
	      url("../font/Gotham.ttf") format('truetype'),
		  url('../font/Gotham.svg#Droid Sans') format('svg');
	font-style: normal;
	font-weight: normal;
	}

	html 
	{
		min-height: 100%;
	}
	
	body
	{
		margin: 0px;
		background: url(../../images/bottom.png) bottom repeat-x;
		font-family:  Helvetica;
		background-color: #FFFFFF;
		min-height: 100%;
	}

	#module_title 
	{ 
		background-color: #313541;
		height: 70px;
		width: 100%;
		position: fixed;
		z-index: 1;
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
		border-bottom: 3px solid #00A547;
	}

	#module_user
	{
		font-size: 15px;
		color: #CCCCCC;
		font-weight: normal;
		text-decoration: none;
	}

	#title
	{
		font-size: 22px; 
		font-family:  Gotham;
		color: #CCCCCC;
	}

	a
	{
		font-size: 15px;
		color: #555555;
		font-weight: normal;
		text-decoration: none;
	}

	a:hover
	{
		text-decoration: underline;
	}

	.a_title
	{
		font-size: 15px;
		color: #555555;
		font-weight: bold;
		text-decoration: none;
	}

	.a_title:hover
	{
		text-decoration: underline;
	}

	#module_garis 
	{ 
		background-color: #00A547;
		height: 3px;
		top: 300px;
	}

	#module_garis2
	{ 
		background-color: #313541;
		height: 5px;
	}

	#module 
	{ 
		text-align: left;
		background-color: #FFFFFF;
		border-left: 1px solid #a0a0a0;
		border-right: 1px solid #a0a0a0;
		border-bottom: 1px solid #a0a0a0;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
		padding: 10px;
		-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	}

	#navigasi
	{
		font-size: 18px; 
		font-family:  Helvetica;
		color: #666666;
		font-weight:bold;
	}

	td 
	{
		color: #666666;
		font-size: 15px; 
		font-weight: normal;
		font-family:  Helvetica;
		line-height:1.3;
	}

	#garis 
	{
		font-size: 1px; 
		border-bottom: 1px solid #C4C4C4;
		margin: 10px 0px 10px 0px;
	}

	.td_utama 
	{
		background-color: #F2F2E6;
		color: #666666;
		font-size: 15px; 
		font-weight: bold;
		text-align: center;
		border-top: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
	}

	.td_isi 
	{
		color: #666666;
		font-size: 15px; 
		font-weight: normal;
		border-bottom: 1px solid #CCCCCC;
		background-color: #FFFFFF;
	}

	.td_isi2 {
	background-color: #ffcccc;
	color: #555555;
	font-size: 15px; 
	font-weight: normal;
	font-family: Helvetica;}

	.td_isi3 {
	background-color: #dcedb8;
	color: #555555;
	font-size: 15px; 
	font-weight: normal;
	font-family: Helvetica;}

	.td_isi4 {
	background-color: #fdff9b;
	color: #555555;
	font-size: 15px; 
	font-weight: normal;
	font-family: Helvetica;}

	.tr 
	{
		background-color: #FFFFFF;
	}

	.tr:hover
	{
		background-color:  #fff8d9;
	}

	#notifikasi
	{
		background-color: #FFF7CC;
		border: 1px solid #CCCCCC;
		color: #666666;
		padding: 10px;
		text-align: center;
		font-weight: normal;
		-moz-border-radius : 5px;
		-webkit-border-radius : 5px;
		border-radius: 5px;
	}

	#notifikasi_kecil
	{
		background-color: #FFF7CC;
		border: 1px solid #CCCCCC;
		color: #666666;
		padding: 10px;
		text-align: center;
		font-weight: normal;
		-moz-border-radius : 10px;
		-webkit-border-radius : 10px;
		border-radius: 10px;
	}

	#informasi
	{
		background-color: #e7ffce;
		border: 1px solid #CCCCCC;
		color: #666666;
		padding: 10px;
		font-weight: normal;
		-moz-border-radius : 5px;
		-webkit-border-radius : 5px;
		border-radius: 5px;
	}

	.form_input 
	{
		color: #666666;
		border: 1px solid #C4C4C4;
		padding: 10px;
		border-radius: 8px;
		box-shadow: 0 0 5px rgba(0,0,0,0.1);
		font-family:  Helvetica;
		width: 90%;
		font-size: 15px;
	}

	.form_input_login 
	{
		color: #666666;
		border: 1px solid #C4C4C4;
		height: 25px;
		padding: 5px;
		border-radius: 8px;
		box-shadow: 0 0 5px rgba(0,0,0,0.1);
		font-family:  Helvetica;
		font-size: 15px;
	}

	.form_text
	{
		color: #666666;
		border: 1px solid #C4C4C4;
		padding: 5px;
		border-radius: 8px;
		box-shadow: 0 0 5px rgba(0,0,0,0.1);
		font-family:  Helvetica;
		font-size: 15px;
	}

	.form_select
	{
		color: #666666;
		border: 1px solid #C4C4C4;
		padding: 5px;
		border-radius: 5px;
		box-shadow: 0 0 5px rgba(0,0,0,0.1);
		font-family:  Helvetica;
		font-size: 15px;
	}

	.form_button
	{
		color: #FFFFFF;
		background-color: #313541;
		border: 1px solid #C4C4C4;
		padding: 10px;
		font-weight: bold;
		border-radius: 5px;
		box-shadow: 0 0 5px rgba(0,0,0,0.1);
		font-family:  Helvetica;
		font-size: 15px;
	}


	.form_button:hover
	{
		color: #FFFFFF;
		background-color: #F14D76;
	}

	.form_button2
	{
		color: #FFFFFF;
		background-color: #00b000;
		border: 1px solid #C4C4C4;
		padding: 10px;
		font-weight: bold;
		border-radius: 5px;
		box-shadow: 0 0 5px rgba(0,0,0,0.1);
		font-family:  Helvetica;
		font-size: 15px;
	}


	.form_button2:hover
	{
		color: #FFFFFF;
		background-color: #313541;
	}

	.button_menu
	{
		color: #FFFFFF;
		background-color: #313541;
		border: 1px solid #C4C4C4;
		padding: 10px;
		font-weight: bold;
		border-radius: 5px;
		box-shadow: 0 0 5px rgba(0,0,0,0.1);
	}


	.button_menu:hover
	{
		background-color: #CD0F17;
	}

	.sub_menu
	{
		border-left: 1px solid #CCCCCC;
		border-top: 1px solid #CCCCCC;
		border-right: 1px solid #CCCCCC;
		padding: 5px;
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;
		background-color: #f5f5f5;
	}

	.sub_menu_active
	{
		color: #FFFFFF;
		border-left: 1px solid #CCCCCC;
		border-top: 1px solid #CCCCCC;
		border-right: 1px solid #CCCCCC;
		padding: 5px;
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;
		background-color: #F14D76;
	}

	.sub_menu_active2
	{
		color: #FFFFFF;
		border-left: 1px solid #CCCCCC;
		border-top: 1px solid #CCCCCC;
		border-right: 1px solid #CCCCCC;
		padding: 5px;
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;
		background-color: #313541;
	}

	.sub_menu:hover
	{
		background-color: #F14D76;
		color: #FFFFFF;
	}


	.sub_menu2
	{
		width: 2px;
	}

	.popup {
    background-color: #FFFF73;
    border-radius: 5px;
    display: none;
    opacity: 0.9;
    padding: 10px;
    z-index: 100;
	position: absolute;
	border: 1px solid #CCCCCC;
	text-align: left;
}

.popup_link:hover + span {
    display: inline;
}

	.box
	{
		width: 500px;
        margin: auto;
        margin-top: 50px;
    }
    .ui-autocomplete 
	{
		position: absolute;
        z-index: 1000;
        cursor: default;
        padding: 0;
        margin-top: 2px;
        list-style: none;
        background-color: #ffffff;
        border: 1px solid #ccc;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
		font-size:  13px;
		color: #666666;
	}
    .ui-autocomplete > li 
	{
		padding: 3px 10px;
	}
    .ui-autocomplete > li.ui-state-focus 
	{
		background-color: #3399FF;
        color:#ffffff;
    }
    .ui-helper-hidden-accessible 
	{
		display: none;
	}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #555;
  color: #fff;
  text-align: left;
  border-radius: 5px;
  padding: 0px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: 0px;
  opacity: 0;
  transition: opacity 0.3s;
  border: 10px solid #555;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}