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

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

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

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

	td {
	color: #555555;
	font-size: 13px; 
	font-weight: normal;
	font-family:  Helvetica;}

	.m_tengah {
	background-color: #FFFFFF;
	padding: 10px;
	border: 1px solid #C4C4C4;
	text-align: left;
	-moz-border-radius : 5px;
	-webkit-border-radius : 5px;
	border-radius: 10px;
	}

	#login {
	background-color: #f5ffd9;
	padding: 10px;
	border: 1px solid #cccccc;
	text-align: left;
	-moz-border-radius : 5px;
	-webkit-border-radius : 5px;
	border-radius: 5px;
	
	}

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

	#garis_top1 {
	font-size: 1px; 
	background-color: #892F1F;
	height: 10px;
	border-bottom: 1px solid #CCCCCC;
	margin-top: 10px;
	}

	#garis_top2 {
	font-size: 1px; 
	background-color: #13438C;
	height: 5px;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 10px;
	}

	.table_utama {
	background-color: #FFFFFF;}
	
	.td_utama 
	{
		background-color: #F2F2E6;
		color: #555555;
		font-size: 13px; 
		font-weight: bold;
		font-family: Helvetica;
		text-align: center;
		border-top: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
	}

	.td_isi 
	{
		background-color: #FFFFFF;
		color: #555555;
		font-size: 13px; 
		font-weight: normal;
		font-family: Helvetica;
		border-bottom: 1px solid #CCCCCC;
	}

	.td_utama_title {
	background-color: #F2F2E6;
	color: #555555;
	font-size: 15px; 
	font-weight: bold;
	font-family:  Helvetica;
	text-align: center;}

	.table_body
	{
		background-color: #FFFFFF;
	padding: 10px;
	border: 1px solid #C4C4C4;
	text-align: left;
	-moz-border-radius : 5px;
	-webkit-border-radius : 5px;
	border-radius: 0px;
	}

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

	a:hover
	{
		font-weight: normal; 
		text-decoration: underline;
	}

	.a_nomor
	{
		font-family:  Helvetica;
		font-size: 15px;
		font-weight: normal; 
		text-decoration: none;
		color: #555555;
	}

	.a_nomor:hover
	{
		font-weight: normal; 
		text-decoration: underline;
	}

	.a_menu
	{
		font-family:  Helvetica;
		font-size: 13px;
		font-weight: normal; 
		text-decoration: none;
		color: #555555;
	}

	.a_menu:hover
	{
		font-weight: normal; 
		text-decoration: underline;
	}

	.form_input { 
		padding: 6px;
		background: #FFFFFF;
		font-size: 13px; 
		color: #555; 
		font-weight: normal;
		font-family: Helvetica;
		border: 1px solid #CCCCCC;
		-moz-border-radius : 5px;
		-webkit-border-radius : 5px;
		border-radius: 5px;
		box-shadow: 0 0 5px rgba(0,0,0,0.1);}

	.form_input2 { 
		padding: 10px;
		background: #FFFFFF;
		font-size: 13px; 
		color: #555; 
		font-weight: normal;
		font-family: Helvetica;
		border: 1px solid #CCCCCC;
		-moz-border-radius : 5px;
		-webkit-border-radius : 5px;
		border-radius: 5px;
		box-shadow: 0 0 5px rgba(0,0,0,0.1);}

	.form_select { 
		padding: 5px;
		background: #FFFFFF;
		font-size: 13px; 
		color: #555; 
		font-weight: normal;
		font-family: Helvetica;
		border: 1px solid #CCCCCC;
		-moz-border-radius : 5px;
		-webkit-border-radius : 5px;
		border-radius: 5px;
		box-shadow: 0 0 5px rgba(0,0,0,0.1);}

	.form_button { 
		height: 30px;
		padding: 5px 10px 5px 10px;
		font-family:  Helvetica;
		font-size: 13px; 
		color: #FFFFFF; 
		font-weight: bold; 
		border: 1px solid #CCCCCC;
		-moz-border-radius : 5px;
		-webkit-border-radius : 5px;
		border-radius: 5px;
		box-shadow: 0 0 5px rgba(0,0,0,0.1); 
		background-color: #555555;}

	html
	{
		height: 100%;
	}

	body { 
	color: #FFFFFF;
	font-size: 13px; 
	font-weight: normal;
	font-family:  Helvetica;
	background: url(../images/tribal.png);
	background-color: #FFFFFF;
	 height: 100%;
            margin: 0px 0px 0px 0px;
            padding: 0;
            width: 100%;}

	#title {
	color: #892F1F;
	font-size: 18px; 
	font-weight: bold;
	font-family:  Helvetica;}

	#title2 {
	color: #13438C;
	font-size: 18px; 
	font-weight: bold;
	font-family:  Helvetica;}

	#navigasi {
	color: #892F1F;
	font-size: 16px; 
	font-weight: normal;
	font-family:  Gotham,Helvetica;}

	#navigasi2 {
	color: #13438C;
	font-size: 16px; 
	font-weight: bold;
	font-family:  Helvetica;}

	.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;
}

#soal
	{
		background-color: #ffffff;
		border: 1px solid #CCCCCC;
		color: #555555;
		padding: 10px;
		text-align: left;
		font-weight: normal;
		-moz-border-radius : 5px;
		-webkit-border-radius : 5px;
		border-radius: 5px;
		padding: 20px;
		font-size: 18px;
		margin: 20px;
		box-shadow: 0 0 5px rgba(0,0,0,0.1); 
	}

#pilihan
	{
		font-size: 20px;
	}

.nomor
	{
		background-color: #ffffff;
		border: 1px solid #CCCCCC;
		color: #555555;
		padding: 10px;
		text-align: center;
		font-weight: normal;
		-moz-border-radius : 5px;
		-webkit-border-radius : 5px;
		border-radius: 5px;
		padding: 5px;
		font-size: 13px;
		box-shadow: 0 0 5px rgba(0,0,0,0.1); 
	}

.foto
	{
		border: 1px solid #CCCCCC;
		-moz-border-radius : 5px;
		-webkit-border-radius : 5px;
		border-radius: 5px;
		box-shadow: 0 0 5px rgba(0,0,0,0.1); 
	}

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

	#informasi
	{
		background-color: #f4ffdd;
		border: 1px solid #CCCCCC;
		color: #555555;
		padding: 5px;
		-moz-border-radius : 5px;
		-webkit-border-radius : 5px;
		border-radius: 5px;
	}

.tombol
	{
		border: 1px solid #ecbd00;
		padding: 5px 10px 5px 10px;
		font-weight: bold;
		background-color: #ffcc00;
		-moz-border-radius : 5px;
		-webkit-border-radius : 5px;
		border-radius: 5px;
		height: 20px;
		box-shadow: 0 0 5px rgba(0,0,0,0.1);
	}


	.tombol:hover
	{
		background-color: #ecbd00;
		font-weight: bold;
		box-shadow: 0 0 5px rgba(0,0,0,0.1);
	}

.tombol2
	{
		border: 1px solid #aad500;
		padding: 5px 10px 5px 10px;
		font-weight: bold;
		background-color: #ccff00;
		-moz-border-radius : 5px;
		-webkit-border-radius : 5px;
		border-radius: 5px;
		height: 20px;
		box-shadow: 0 0 5px rgba(0,0,0,0.1);
	}


	.tombol2:hover
	{
		background-color: #ccff00;
		font-weight: bold;
		box-shadow: 0 0 5px rgba(0,0,0,0.1);
	}

	.time-to 
{
  text-align: center;
  color: white;
  letter-spacing: 2px;
}
.time-to span {
  display: block;
}