@import url("font-awesome.min.css");

*{margin:0 auto; padding:0 overflow:hidden;}

body{ background:#6A85A2;
    font-family:"calibri", Times, serif; color:#FFF;
}
#container{width:820px; height:auto; position:relative;
    background:url(bg01.png);
}
#header {
	width:820px; height:100px; background:#101113;
}

/*untuk menciptakan efek animasi ketika dihover*/
@-webkit-keyframes mantul-vertikal {
0%{top: 0px;opacity: 0;}
50%{top: 100%;opacity: 1;}
75%{top: 100%;opacity: 1;}
100%{top:100%;opacity: 1;}
}
@keyframes mantul-vertikal {
0%{top: 0px;opacity: 0;}
50%{top: 100%;opacity: 1; }
75%{top: 100%;opacity: 1;}
100%{top:100%;opacity: 1;}
}
@-webkit-keyframes mantul-horizontal {
0%{left:70%;opacity: 0}
50%{left: 95%;opacity: 1;}
75%{left: 90%;opacity: 1;}
100%{left:100%;opacity: 1}
}
@keyframes mantul-horizontal {
0%{left:70%;opacity: 0}
50%{left: 95%;opacity: 1;}
75%{left: 90%;opacity: 1;}
100%{left:100%;opacity: 1}
}

#menu_end {
	float:left; width:820px; height:100%; background:#101113;
}

#menu {
	float:left;
	text-align: center;
	font-size:11px;

}

#menu ul ul {
	text-align:left;
	display: none;
}

	#menu ul li:hover > ul {
		display: block;
		-webkit-animation:mantul-vertikal 1.1s;
		animation:mantul-vertikal 1.1s;
		z-index:99;
		/*left:0; right:0;*/
	}
	#menu ul li:hover  {
		display: block;
		/*left:0; right:0;*/
	}	


#menu ul {
	background: #00C; 
	padding: 0 0;	
	list-style: none;
	position: relative;
	display: inline-table;
	/*border-top:5px solid #06F;*/
}

	#menu ul:after {
		content: ""; clear: both; display: block;
	}

	#menu ul li {
		float: left;
		border-right:1px solid #009;
		border-bottom:1px solid #009;
	}
		#menu ul li:hover {
			background:#006;
		}
		
		#menu ul li a {
			display: block; padding: 3px 17px;
			 text-decoration: none; color:#FFF;
		}		
		#menu ul li a:hover {
			color:#F00;
		}
		
	#menu ul ul {	
		background: #00C;
		position: absolute; top: 100%;
	}
		#menu ul ul li {
			float: none; 
			position: relative;
			border-left:none;			
		}
			#menu ul ul li a {
				padding: 10px 50px 10px 20px;
			}	
				#menu ul ul li a:hover {
					background: #006;
				}
		
	#menu ul ul ul {				
		position: absolute; left: 100%; top:0;
	}
	#menu ul ul li:hover > ul {
		-webkit-animation:mantul-horizontal 0.7s;
		animation:mantul-horizontal 0.7s;
		border-top:none;
		z-index:99;
	}

#sidebar_kiri {
	float:left; width:121px; height:auto; margin:5px 0 5px 0; font-size:12px;
}

#menu_tgl {
	width:100%; height:12px; background:#EEE; padding:5px 0; text-align:center;
}
	#menu_tgl a {
		color:#000; text-align:center; text-decoration:none; border:1px solid #CCC; font-size:11px; padding:0 31.5px; cursor:pointer;
	}
	#menu_tgl a:hover {
		color:#900; background:#CCC;
	}

#center {
	float:left; 
	width:500px; height:auto; text-align:left; margin:5px;
}
	#center > .judul_sidebar {
		width:95%; height:auto; background:url(bg01.png); box-shadow: 0px 0px 3px #000; font-size:12px; padding:6px 2.55%; margin-bottom:1px;
	}
	table{ border-collapse: collapse; }
	.tim1 {
		float:left; width:35%; border-right:1px solid; height:auto; margin-top:5px; background:#333; padding:10px 2.5%;
	}
	.ket {
		float:left; width:17%; height:auto; margin:5px 5px; background:#333; text-align:center; padding:10px 0;
	}
	.tim2 {
		float:right; width:35%; border-left:1px solid; height:auto; margin-top:5px; background:#333; padding:10px 2.5%;
	}		
	.judul {
		width:100%; height:15px; background:#333; font-size:10px; padding:5px 0;
		margin-top:5px;
	}
	.judul a {
		padding-left:5px; color:#FFF;
	}
	.judul a:hover {
		color:#CCC; text-decoration:none;
	}
	.isi {
		width:100%; height:10px; color:#000; background:#FFF; font-size:11px; padding:5px 0; margin-bottom:1px;
	}
		.time_ket {
			width:9%; float:left; text-align:left; padding-left:5px;
		}
		.home {
			width:35%; float:left; text-align:right;
		}
			.home a {
				color:#000; text-decoration:none;
			}
			.home a:hover {
				color:#900;
			}			
		.skor {
			width:10%; float:left; text-align:center;
		}
			.skor a {
				color:#00F; text-decoration:none;
			}
			.skor a:hover {
				text-decoration:underline;
			}
		.away {
			width:35%; float:left; text-align:left;
		}
			.away a {
				color:#000; text-decoration:none;
			}
			.away a:hover {
				color:#900;
			}					
		.fav {
			width:9%; float:right; text-align:right; padding-right:5px;
		}
			.fav a {
				color:#06F; text-decoration:none;
			}
			.fav a:hover {
				text-decoration:underline;
			}
		
#sidebar_kanan {
	float:right; width:189px; height:auto; margin:5px 0 5px 0; font-size:12px;
}

	.judul_sidebar {
		width:95%; height:auto; background:url(bg01.png); font-size:12px; padding:6px 2.55%; margin-bottom:1px;
	}
	.judul_sidebar a {
		color:#FFF; text-decoration:none;
	}
	.judul_sidebar a:hover {
		color:#F00;
	}
		.tim {
			width:70%; float:left; text-align:left; padding-left:5px;
		}
			.tim a {
				color:#000; text-decoration:none;
			}
			.tim a:hover {
				color:#900;
			}
		.poin {
			width:5%; float:left; text-align:center; padding-right:6px;
		}
		
#footer{
	height:35px; width:100%; text-align:center;
	background:#000; color:#FFF; font-size:15px;
    clear: both; padding:25px 0;
}