/*********************	Body				*********************/
body
{
	background-color:#DEDBDE;
 	font-family: Tahoma,"Trebuchet MS",Verdana,Georgia,Arial,Sans-serif; 
}

/*********************	Header presentation 		*********************/

#header 
{
	width:auto;
	background-color:#fff;
	color:#18457B;
 	padding: 20px 10px 60px 10px;
	margin: 0 0 15px 0;
}

/*********************	Footer presentation	 		*********************/
#footer 
{
	clear:both;
	width=auto;
	color:#000;
	margin: 30px 0 0 0;
	padding: 10px;
	border-style:solid;
	border-width:1px 0 0 0;
	border-color:#000;
	font-size:85%;
	text-align:center;
}

#footer a
{
	color: #000;
	text-decoration: none;
}

#footer a:visited
{
	color: #000;
	text-decoration:none;

}

#footer a:hover
{
	color:#FF5518;
	text-decoration: underline;
}

/*********************	Content presentation 		*********************/
.content
{
	width:auto;
	background-color:#fff;
	color:#000;
	margin: 0 0 0px 0; 
	padding: 5px 20px;
	font-size: 100%;
	border-style:solid;
	border-width: 1px;
 	border-color:#9D9D9D;

}


.content-title	/*************	Use in content title	**********/
{
	color:#18457B;
	margin:0 0 10px 0;
	padding:0;
	border-style:dotted;
	border-width:0 0 1px 0;
	font-size: 120%;
	font-weight:600;
	text-transform: capitalize;
	
}

.content-subtitle	/*************	Use in content subtitle	**********/
{
	color:#000;
	margin:1px 0 1px 0;
	padding:0;
	border-width:0;
	font-size: 100%;
	font-weight:700;
	text-transform: capitalize;
	
}

.content-author
{
	color:#636563;
	font-size: 80%;
	text-transform: capitalize;
}

/*********************	Horizotal logo presentation 	*********************/

.header_logo
{
	width:23%;
	float:left;

}


/*********************	Horizotal navigation presentation 	*********************/


.hnav
{
	padding: 7px 0 0 0;
	width:75%;
	float:right;
}

.hnav ul
{
	padding: 0 30px 0 0;
	float:right;
	list-style: none;
	color:#fff;	
		
}

.hnav ul > li
{
	width: 90px;
	text-align:center;
	position:relative;	
	float:left; 
	padding: 0 5px;
	
}


.hnav ul li a
{
	display: block;
	padding: 5px 5px 5px 5px;
 
}


.hnav ul ul
{
	display : none;
	white-space: nowrap;
	
}

.hnav li:hover a 
{
    background: #94A6BD;
    color: #fff;
}


.hnav li:hover > ul 
{
	display: block;
	position:absolute;
	min-width:100%;
	left:0;
}


.hnav ul li ul li:hover a
{
	background: #fff;
    color: #94A6BD;
}


.hnav ul li a:link, .hnav ul li a:visited, .hnav ul li a:active, .hnav ul li a:hover
{
	text-decoration: none;
}


/*********************	inner navigation presentation 	*********************/


.inav
{
	padding: 10px;
	margin: 20px 0 ; 
	color:#fff;	
	
	
}

.inav ul li
{
	display: inline;
	float:left;
	color:#fff;	
		
}

.inav ul li a
{
	
	padding: 5px 5px 5px 5px;
 
}

/*
.inav li:hover a 
{
    background: #94A6BD;
    color: #fff;
}


.inav li:hover > ul 
{
	display: block;
	position:absolute;
	min-width:100%;
	left:0;
}


.inav ul li ul li:hover a
{
	background: #fff;
    color: #94A6BD;
}


.inav ul li a:link, .hnav ul li a:visited, .hnav ul li a:active, .hnav ul li a:hover
{
	text-decoration: none;
}
*/

#triggerbutton
{
	display: none;
}

 
#xbutton
{
	display: none;
}


#hamburgerbutton
{
	
	display:none;
}


.leftlivegames
{
	width:50%;
	float:left;
	margin: 20px 0;
	
}


.rightlivegames
{
	width:50%;
	float:right;
	margin: 20px 0;
}


/***************************** Media Query Setting ************************************/

@media screen and (max-width: 768px) 
{
	
	
.inav
{
	padding: 10px;
	margin: 20px 0 ; 
	color:#fff;	
			
}

.inav ul li
{
	
	display:block;
}

.inav ul li a
{
	
	padding: 5px 5px 5px 5px;
 
}

	
.hnav
{
		display:none;
	
}


#xbutton
{
	display:block;
	color:#fff;
	margin: 0 0px 20px 90px;
}

#hamburgerbutton
{
	margin: 12px 12px 0 0;	
	display: block;
	float: right;
    transition: margin-left .5s;
}

#triggerbutton:checked ~ .hnav
{
    display:block;
	height: 100%;
	width:120px;
	z-index: 1;
    top: 0;
    left: 0;
	position: fixed;
    transition: 0.5s;
    padding: 60px 0 0 0;
	background-color:#818181;
}

.hnav ul,
.hnav ul li,
.hnav ul ul 
{
  list-style: none;
  margin: 0 0 0 2px;
  padding:0;
  white-space: nowrap
}



.hnav a {
	  
  display: block;
  color: #ffffff;
  text-decoration: none;
  padding:10px 15px;
   transition:0.2s; 
}


/* ALL A HOVER */
.hnav li:hover > a{
  background:#778;
}

.hnav ul ul {
	transition: max-height 0.2s ease-out;
  max-height:0;
  overflow:hidden;
}


.hnav li:hover > ul 
{ 
	position:relative;
	max-height:500px;
	transition: max-height 0.25s ease-in;
}


.hnav li
{
  
  border-style:solid;
  border-width:0 0 1px 0;
  border-color:#fff;
  
}


.hnav ul > li
{
	text-align:left;

}

.leftlivegames
{
	width:50%;
	float:left;
	padding: 0 1px;
	margin: 20px 0;
	
}


.rightlivegames
{
	width:50%;
	float:right;
	padding: 0 1px;
	margin: 20px 0;
}






}
/*********  Define moves style  **********/ 

#leftcolumn
{
	width:50%; 
	margin:0 0 20px 0;
	float:left;
	/*padding: 5px 0 5px 10px; */
  	background-color:#fff;
	font-size: 100%;
	
}

#rightcolumn
{
	width:50%;
	margin:0 0 20px 0;
	float:right;
	/*padding: 5px 0 5px 10px; */
 	background-color:#fff;
	font-size: 100%;

}


.thetitle
{
	margin: 10px;
	font-size:120%;
	text-decoration:underline;
}

.the_comment
{
	background-color:#fff;
	margin: 10px 0;
	padding: 5px 5px;
	border-style:solid;
	border-width: 1px;
 	border-color:#9D9D9D;
	text-align:left;
}



/*********************	Default font size		 	*********************/
h1
{
	font-size: 185%;
}
h2
{
	font-size: 165%;
}
h3
{	
	font-size: 145%;
}

h4	
{
	font-size: 125%;
}

h5	
{
	font-size: 105%;
}

h6
{
	font-size: 70%;
}

p
{
	line-height: 1.3em;
} 

.h2_center
{
font-size: 165%;
text-align: center;
}

.h3_center
{
font-size: 145%;
text-align: center;
}

.h4_center
{
font-size: 125%;
text-align: center;
}

.h4_left
{
font-size: 125%;
text-align: left;
}
  

/******************************image style**************************************/

.texttop
{
	vertical-align:middle;
}