/* General reset Settings */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
q:before, q:after { content:''}
strong { font-weight: bold }
em { font-style: italic }
a img { border:none } 
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }

body {	background: #1D84A3 url("/images/background.jpg");	color: #fff;	font-family: 'Nunito', Arial, Helvetica, Sans-serif;}

#CateMascotDiv {	bottom: 100px;	right: 150px;	position: fixed;	z-index: 9;}
#CateMascotDiv img {	height: 200px;}

#floatmain {background:#000000; z-index: 8;}
#floatlayer {background:#000000; box-shadow: 0 0 15px #000000; position: absolute; z-index: 8;}
#close_float {background: url(/images/close.png) no-repeat scroll 0 0 transparent; cursor: pointer; display: inline; height: 34px; position: absolute; right: -17px; top: -17px; width: 34px; z-index: 9; }

.games img{width: 100%;padding: 5px;border-radius: 10px;border: 5px solid #13445E;background-color: #ffffff;margin: 5px 0 5px 0;}
.box {width: 100%;padding: 5px;border-radius: 10px;background-color: #ffffff;border: 5px solid #13445E;    margin: 0 0 5px 0;}
.footer { width:100%;}
.footer h4 a, a:hover, a:visited, a:active {color: #ffffff;}
.pregameimg {width: 280px;height: 280px;margin: 5px;}
.freegameimg { width:100%;}

@media screen and (min-width: 1201px) {
.logo-xl-lg {height: 100px;width: 204px;padding: 5px 0 5px 0;display: inline-block;vertical-align: middle;}
.logo-xl-lg img {width: 100%;}
.ads-xl-lg {height: 100px;width: 728px;padding: 5px 0 5px 0;display: inline-block;vertical-align: middle;}

.box h1 {font-size: 3rem;font-weight:bold;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
.box h4 {font-size: 2rem;padding: 5px 20px 5px 20px;}
#floatlayer h4 {font-size: 2rem;}
.footer h4 {color: #ffffff;font-size: 1.2rem;}
.sidead4by3 {height: 587px;width: 100%;}
.sidead1by1 {height: 783px;width: 100%;}
.sidead16by9 {height: 552px;width: 100%;}
.preleftpadding {padding-right: 20px;}
.prerightpadding {padding-left: 60px;}
}
@media screen and (max-width: 1200px) {
.logo-xl-lg {height: 100px;width: 204px;padding: 5px 0 5px 0;display: inline-block;vertical-align: middle;}
.logo-xl-lg img {width: 100%;}
.ads-xl-lg {height: 100px;width: 728px;padding: 5px 0 5px 0;display: inline-block;vertical-align: middle;}

.box h1 {font-size: 3rem;font-weight:bold;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
.box h4 {font-size: 1.5rem;padding: 5px 15px 5px 15px;}
#floatlayer h4 {font-size: 1.5rem;}
.footer h4 {color: #ffffff;font-size: 1.2rem;}
.sidead4by3 {height: 545px;width: 100%;}
.sidead1by1 {height: 726px;width: 100%;}
.sidead16by9 {height: 408px;width: 100%;}
.preleftpadding {padding-right: 20px;}
.prerightpadding {padding-left: 60px;}
}
@media screen and (max-width: 992px) {
.logo-xl-lg {height: 80px;width: 164px;padding: 5px 0 5px 0;display: inline-block;vertical-align: middle;}
.logo-xl-lg img {width: 100%;}
.ads-xl-lg {height: 100px;width: 728px;padding: 5px 0 5px 0;display: inline-block;vertical-align: middle;}

.box h1 {font-size: 2rem;font-weight:bold;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
.box h4 {font-size: 1.2rem;padding: 5px 10px 5px 10px;}
#floatlayer h4 {font-size: 1.2rem;}
.footer h4 {color: #ffffff;font-size: 1rem;}
.preleftpadding {padding-right: 5px;}
.prerightpadding {padding-left: 60px;}
}
@media screen and (max-width: 768px) {
.logo-xl-lg {height: 50px;width: 102px;padding: 5px 0 5px 0;display: inline-block;vertical-align: middle;}
.logo-xl-lg img {width: 100%;}
.ads-xl-lg {width: 100%;padding: 5px 0 5px 0;display: inline-block;vertical-align: middle;}

.box h1 {font-size: 1.5rem;font-weight:bold;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
.box h4 {font-size: 1rem;padding: 5px;}
#floatlayer h4 {font-size: 1rem;}
.footer h4 {color: #ffffff;font-size: 0.8rem;}
}
@media screen and (max-width: 576px) {
.logo-xl-lg {height: 50px;width: 102px;padding: 5px 0 5px 0;display: inline-block;vertical-align: middle;}
.logo-xl-lg img {width: 100%;}
.ads-xl-lg {width: 100%;padding: 5px 0 5px 0;display: inline-block;vertical-align: middle;}

.box h1 {font-size: 1rem;font-weight:bold;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
.box h4 {font-size: 0.8rem;padding: 3px;}
#floatlayer h4 {font-size: 0.6rem;}
.footer h4 {color: #ffffff;font-size: 0.5rem;}
}

        #game_file {
            background-color: #000;
            width: 100%;
            height: 100%;
            position: relative;
            margin: auto;
        }

        #videoElement {
            display: none;
        }
		
		#sticky_topright {
		position: fixed;
		top: 0;
		width: 100%;
		text-align: right;
		display:none;
		z-index: 1;
		}
		#sticky_topright button{
		border-radius: 10%;
		background-color: red;
		margin: 5px;
		color: #fff;
		font-size: 10px;
		padding: 5px;
		}