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

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

@font-face {
	font-family: GothamLight;
	src: url(fonts/calibri.ttf);
}

body{ background: #199; position:static;
    background: url(img/back-futsal.png);
    color:#000; font-family:"calibri";
}
#container{width:820px; height:auto; position:relative;
    background: url(img/bg01.png); box-shadow: 0px 0px 3px #333;
}

#head { width:100%; height:20px; font-size:12px; float:left;top:0;
	background:#000; color:#FFF; position:fixed; z-index: 99;
	}
#text {
	float:left; width:100%;
}	
#header {
	width:820px; height:105px; margin-top:25px; 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:100%; height:100%; background:#101113;
}

#menu {
	float:left;
	text-align: center;
	font-size:11px;
	box-shadow: 0 0 2px #000;
    position: absolute; 
    bottom: -5px;
}

#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: #0099FF; 
	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 #0066FF;
	}
		#menu ul li:hover {
			background:#0033FF;
		}
		
		#menu ul li a {
			display: block; padding: 3px 20px;
			 text-decoration: none; color:#000;
		}		
		#menu ul li a:hover {
			color:#FFF;
		}
		
	#menu ul ul {
		margin-top: 1px;		
		background: #00C;
		position: absolute; top: 100%;
	}
		#menu ul ul li {
			float: none; 
			position: relative;
			border-left:none;			
		}
			#menu ul ul li a {
				padding: 3px 50px 3px 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:auto; background:#EEE; padding:3px 0; color:#000; box-shadow: 0 0 3px #333;
}
	#menu_tgl table {
		padding:0 0;
	}
	#menu_tgl td {
		width:91px; height:auto; color:#000; text-align:center; border:1px solid #CCC; font-size:11px; box-shadow: -1px 1px 1px #333;
	}
	#menu_tgl td a {
		text-decoration:none; color:#000;
	}
	#menu_tgl td a:hover {
		color:#900; background:#CCC;
	}
	#menu_tgl td:hover {
		color:#900; background:#CCC;
	}
/*Style Tanda panah pada menu yang mempunyai sub menu
ul >li >a >span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-top:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
}

/*Style tanda panah pada sub menu level 1 dan level 2
ul li ul li span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-left:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
}	*/
	
#center {
	float:left;
	width:500px; height:auto; text-align:left; margin:5px;
}
.button {
    position:relative;
    padding:7px 7px;
    /*left:-5px;*/
    border:0px solid #999;
    background-color:#0099FF;
    color:#000;
	cursor:pointer;
    box-shadow: -2px 2px 1px #333;
	/*width:50px; height:29px;*/
}
.button:hover  {
    background-color:#0033FF;
    color:#CCC;
}
	table{ border-collapse: collapse; }
	.judul {
		width:100%; height:15px; background: url(img/overlay.png); font-size:11px; padding:3px 0;
		margin-top:5px; box-shadow: -1px 1px 2px #333; border-top-right-radius:3px; border-top-left-radius:3px;
	}
	.judul a {
		padding-left:5px; color:#FFF;
	}
	.judul a:hover {
		color:#CCC; text-decoration:none;
	}
	.isi {
		width:100%; height:13px; position:relative; color:#000; background:#FFF; font-size:12px; padding:5px 0; margin-bottom:1px; box-shadow: -1px 1px 1px #333;
	}
		.time_ket {
			width:5%; float:left; text-align:left; padding-left:5px;
		}
		.home {
			width:38%; float:left; text-align:right;
		}
			.home a {
				color:#000; text-decoration:none; padding:4px 0;
			}
			.home a:hover {
				color:#900;
			}			
		.skor {
			width:10%; float:left; text-align:center;
		}
			.skor a {
				color:#00F; text-decoration:none; padding:4px 0;
			}
			.skor a:hover {
				text-decoration:underline;
			}
		.away {
			width:38%; float:left; text-align:left;
		}
			.away a {
				color:#000; text-decoration:none; padding:4px 0;
			}
			.away a:hover {
				color:#900;
			}					
		.fav {
			width:5%; float:right; text-align:right; padding-right:5px;
		}
			.fav a {
				color:#06F; text-decoration:none; padding:4px 0;
			}
			.fav a:hover {
				text-decoration:underline;
			}
						
		
#sidebar_kanan {
	float:right; width:189px; height:auto; margin:5px 0 5px 0; font-size:12px; position:relative;
}
	.judul_sidebar_kanan {
		width:95%; height:auto; background: url(img/overlay.png); font-size:12px; padding:5px 2.55%; margin-bottom:1px; box-shadow: -1px 1px 1px #333; position:relative; color: #FFF;
	}
	.judul_sidebar_kanan a {
		color:#FFF; text-decoration:none;
	}
	.judul_sidebar_kanan a:hover {
		color:#900;
	}
        
[data-title]:hover:after {
  content: attr(data-title);
  padding: 2px 100%;
  color: #333;
  position: absolute;
  height: auto;
  left: 20px;
  top: -3px;
  white-space: nowrap; 
  z-index: 99px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;  
  border-radius: 5px;  
  -moz-box-shadow: 0px 0px 4px #222;  
  -webkit-box-shadow: 0px 0px 4px #222;  
  box-shadow: 0px 0px 4px #222;  
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);  
}
.bulat { width:5px; height:5px; background:green; border-top-right-radius:50%; border-top-left-radius:50%; border-bottom-right-radius:50%; border-bottom-left-radius:50%; }

	.judul_sidebar {
		width:95%; height:auto; background: #FFFF99; font-size:12px; padding:5px 2.55%; margin-bottom:2px; box-shadow: -1px 1px 1px #FFFF99; position:relative; color: #000;
	}
	.judul_sidebar a {
		color:#000; text-decoration:none;
	}
	.judul_sidebar a:hover {
		color:#900;
	}
	.menu_overlay{ display: none; }
		.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:0px 3px 0px 3px; position:relative;
		}
	.banner {
		width:95%; background: #333; height:auto; font-size:12px; padding:5px 2.55%; margin-bottom:2px; box-shadow: -1px 1px 1px #333; 
        position:relative; color: #000; border-top-right-radius:3px; border-top-left-radius:3px;
	}  
		
#footer{
	height:auto; width:92%; text-align:right;
	background:#000; color:#FFF; font-size:11px; opacity: 1;
    clear: both; padding:4px 4%; box-shadow: 0 0 3px #333;
}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:978px){
	/*.hoc{max-width:978px;}*/
}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:900px){
	/*.hoc{max-width:90%;}*/ 
}


@media screen and (max-width:750px){
    body { width: 100%; }
    #sidebar_kiri { width: 100%; }
    .menu_overlay { display: block; }
    #sidebar_kanan { width: 100%; }
    #container { width: 100%; }
    #head { width: 100%; display: block; }
    #header { width: 100%; height: auto; display: block; }
    #menu { width: 100%; display: block; height: auto; position: fixed; bottom: 0; z-index: 999; background: #0066FF; font-size: 0.7em; }
    #center { width: 100%; margin: 0 0; }
    #footer { width: 92%; } 
    .isi { height:17px; font-size: 0.6em; }
    .judul { height:17px; font-size: 11px; }
    #menu_tgl { width: 100%; height: auto; } 
    #tabel-tgl { width: 20%; }
	#menu_tgl td {
		width:20%; height:auto; color:#000; text-align:center; border:1px solid #CCC; font-size:13px;
	}
		#menu ul li a {            
			display: block; padding: 0 0; padding-top: 15px;
		}
        #menu ul { width: 100%; }
        #menu ul li { width: 24.8%; height: 50px; }

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.1s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block;
    transition: 0s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}
}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:500px){
    body { width: 100%; }
    #sidebar_kiri { width: 100%; }
    .menu_overlay { display: block; }
    #sidebar_kanan { width: 100%; }
    #container { width: 100%; }
    #head { width: 100%; display: block; }
    #header { width: 100%; height: auto; display: block; }
    #menu { width: 100%; display: block; height: auto; position: fixed; bottom: 0; z-index: 999; background: #0066FF; font-size: 0.7em; }
    #center { width: 100%; margin: 0 0; }
    #footer { width: 92%; }
    .isi-klas { width: 180%; }
    .isi { height:19px; font-size: 0.7em; }
    .judul { height:17px; font-size: 11px; }
    #menu_tgl { width: 100%; height: auto; font-size: 12px; } 
    #tabel-tgl { width: 20%; }
	#menu_tgl td {
		width:20%; height:auto; color:#000; text-align:center; border:1px solid #CCC; font-size:20px;
		margin: 0 20px;
	}
		#menu ul li a {            
			display: block; padding: 0 0; padding-top: 15px;
		}
        #menu ul { width: 100%; }
        #menu ul li { width: 24.7%; height: 50px; }

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.1s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block;
    transition: 0s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}
}

@media screen and (max-width:330px){
    body { width: 100%; }
    #sidebar_kiri { width: 100%; }
    .menu_overlay { display: block; }
    #sidebar_kanan { width: 100%; }
    #container { width: 100%; }
    #head { width: 100%; display: block; }
    #header { width: 100%; height: auto; display: block; }
    #menu { width: 100%; display: block; height: auto; position: fixed; bottom: 0; z-index: 999; background: #0066FF; font-size: 0.7em; }
    #center { width: 100%; margin: 0 0; }
    #footer { width: 92%; } 
    .isi { height:17px; font-size: 15px; }
    .judul { height:17px; font-size: 11px; }
    #menu_tgl { width: 100%; height: auto; font-size: 100%; } 
    #tabel-tgl { width: 20%; }
	#menu_tgl td {
		width:20%; height:auto; color:#000; text-align:center; border:1px solid #CCC; font-size:9px;
	}
		#menu ul li a {            
			display: block; padding: 0 0; padding-top: 15px;
		}
        #menu ul { width: 100%; }
        #menu ul li { width: 24.6%; height: 50px; }

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.1s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block;
    transition: 0s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}
}