/*

indexAdv.php

*/

/******** normalize *******/
*{padding:0;margin:0;}
body{background:#fafafa;color:#000;position:relative;font: 12px 'garamond', 'Tahoma', 'Verdana', 'Lucida Sans Unicode', sans-serif;line-height: normal;}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;overflow-y:scroll;height:100%;}
html,button,input,select,textarea{font-family:sans-serif;}
a:hover,a:active,a:focus{outline:0;}
img{border:0;-ms-interpolation-mode:bicubic;}
button,input,select,textarea{font-size:100%;vertical-align:middle;margin:0;outline:none;}
button::-ms-clear,input::-ms-clear,select::-ms-clear,textarea::-ms-clear{display:none;}
textarea{resize:none;}
input,textarea{overflow:auto;}
button,input{line-height:normal;}
button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;overflow:visible;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;height:13px;width:13px;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}
body,figure,form{margin:0;}
body a:hover {text-decoration: none;}
input[type=text]:-ms-clear { display: none; }

/******** general *******/

.wrap
{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
}

header
{
	background: #434344;
	overflow: hidden;
	margin: 0 0 13px 0;
	box-shadow: 1px 2px 3px #ccc;
	position: relative;
	z-index: 3;
}

.darkpage
{
	background: black;
}

html.cxt, html.cxt body
{
	height: 100%;
	text-align: center;
	background: #fafafa;
}

html.cxt body:after
{
	height: 100%;
	display: inline-block;
	vertical-align: middle;
	width: 0;
	content: '';
}

.logo
{
	height: 55px;
	width: 108px;
	float: left;
	background: url(i/logo.png) 0 0 no-repeat;
	-webkit-background-size: 100%;
	background-size: 100%;
}

.header__text
{
	overflow: hidden;
	height: 55px;
	text-align: center;
}

.header__text:after
{
	width: 0;
	height: 100%;
	content: '';
	display: inline-block;
	vertical-align: middle;
}

.sitename
{
	display: inline-block;
	letter-spacing: 3px;
	vertical-align: middle;
	font-size: 21px;
	color: white;
}

.list
{
	padding: 0 13px 0 13px;
}

.item
{
	position: relative;
	border-bottom: 1px solid #ddd;
	padding: 8px 0;
	display: block;
	text-decoration: none;
	overflow: hidden;
}

.list__item:last-child .item
{
	border: 0;
}

.list__item
{
	position: relative;
	list-style: none;
}

.item__img
{
	width: 55px;
	height: 55px;
	border-radius: 7px;
	box-shadow: 1px 1px 3px #ccc;
}

.item__img-wrap
{
	text-decoration: none;
	float: left;
}

.item__info
{
	overflow: hidden;
	display: block;
	padding: 5px 0px 0px 8px;
}

.item__tags
{
	display: block;
	font-size: 12px;
	/*10px*/
	color: #afaeae;
	padding: 5px 0 0 0;
}

.item__name
{
	display: block;
	text-decoration: none;
	font-size: 13px;
	color: #333;
	font-weight: bold;
	letter-spacing: 1px;
	text-shadow: 1px 1px 1px #ccc;
}

.tags
{
	padding: 0 5px 5px 5px;
	margin-left: -4px;
}

.tag
{
	display: inline-block;
	vertical-align: middle;
	padding: 5px 10px;
	background: white;
	border: 1px solid #ccc;
	color: #333;
	text-decoration: none;
	font-size: 13px;
	border-radius: 3px;
	margin-left: 4px;
	margin-bottom: 8px;
}

.list__count
{
	float: left;
	font-size: 13px;
	padding: 30px 8px 0 0;
	color: #333;
}

.item__content
{
	float: left;
	display: block;
	text-decoration: none;
	color: black;
}

.item__buttons
{
	overflow: hidden;
	display: block;
}

.item__buttons .btn:first-child
{
	margin-left: 10px;
}

.btn
{
	float: right;
	background: white;
	text-decoration: none;
	border: 1px solid #ccc;
	color: #333;
	font-size: 13px;
	width: 55px;
	height: 21px;
	text-align: center;
	line-height: 21px;
	border-radius: 3px;
	margin-top: 11px;
}

.btn.editbtn
{
	right: 65px;
}

.btn.play
{
	background: #72a830;
	background: -moz-linear-gradient(top,  #72a830 0%, #6a9d2c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#72a830), color-stop(100%,#6a9d2c));
	background: -webkit-linear-gradient(top,  #72a830 0%,#6a9d2c 100%);
	background: -o-linear-gradient(top,  #72a830 0%,#6a9d2c 100%);
	background: -ms-linear-gradient(top,  #72a830 0%,#6a9d2c 100%);
	background: linear-gradient(to bottom,  #72a830 0%,#6a9d2c 100%);
	border: 1px solid #72a830;
	color: white;
	font-size: 13px;
}

.sort
{
	height: 42px;
	margin: -13px 0 21px 0;
	position: relative;
	z-index: 1;
	background: #eeeeee;
	background: -moz-linear-gradient(top,  #eeeeee 0%, #eeeeee 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee));
	background: -webkit-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%);
	background: -o-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%);
	background: -ms-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%);
	background: linear-gradient(to bottom,  #eeeeee 0%,#eeeeee 100%);
}

.sort__name
{
	float: left;
	width: 50%;
	height: 42px;
	font-size: 13px;
	color: black;
	text-decoration: none;
	position: relative;
	text-align: center;
	background: #fafafa;
}

.sort__name.active
{
	background: none;
}

.sort__name.active .arr
{
	display: block;
}

.sort__name span:first-child
{
	display: block;
	padding-top: 13px;
}

.sort__name:before
{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: #ccc;
	content: '';
	z-index: 1;
}

.sort__name:first-child:after
{
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	background: #ccc;
	width: 1px;
	content: '';
}

.arr
{
	width: 30px;
	height: 30px;
	position: absolute;
	z-index: 2;
	overflow: hidden;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -15px;
	display: none;
}

.arr:after
{
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	background: #fafafa;
	border: 1px solid #ccc;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	left: 10px;
	bottom: -6px;
}

.item__game-info
{
	display: block;
	padding: 8px 0 0 1px;
}

.item__game-info-title
{
	font-size: 12px;	/*10px*/
	text-shadow: none;
	position: relative;
	padding: 0 0 0 10px;
}

.item__game-info-title:after
{
	position: absolute;
	top: 4px;
	left: 0;
	width: 7px;
	height: 8px;
	background: url(i/arr.png);
	content: '';
	-webkit-background-size: 100%;
	background-size: 100%;
}

.item__game-des
{
	display: block;
	text-shadow: none;
	font-size: 9px;
	padding: 3px 0 0 0;
}

footer
{
	margin-top: 16px;
	display: block;
	height: 55px;
	background: #434344;
	color: white;
	font-size: 12px;
	padding: 0 13px;
}

footer:before
{
	display: inline-block;
	vertical-align: middle;
	width: 0;
	height: 100%;
	content: '';
}

.copy
{
	display: inline-block;
	vertical-align: middle;
}

.fver
{
	float: right;
	height: 100%;
	color: white;
}

.fver:before
{
	display: inline-block;
	vertical-align: middle;
	width: 0;
	height: 100%;
	content: '';
}

.fver a
{
	color: white;
	display: inline-block;
	vertical-align: middle;
	margin-top: -2px;
}

.info
{
	border-top: 1px solid #ddd;
	margin: 16px 13px;
	padding: 5px 0;
	font-size: 13px;
	line-height: 1.7;
}

.game__wrap
{
	position: relative;
}

.game__context
{
	position: absolute;
	width: 50%;
	height: 10%;
	background: white;
	left: 0;
	bottom: 0;
}

.cxt__block
{
	display: inline-block;
	vertical-align: middle;
}

.context__sample
{
	width: 300px;
	height: 250px;
	background: black;
}

.cxt__block
{
	position: relative;
	color: #fafafa;
	text-align: left;
}

.cxt__x
{
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	z-index: 900;
	height: 30px;
	text-align: center;
	background: #fff;
	cursor: pointer;
	font-size: 18px;
	color: #333;
	border: 1px solid #ccc;
	line-height: 30px;
	font-family: monospace;
}

.cxt__x:after
{
	content: 'X';
}

html.game__page,
html.game__page body
{
	background: black;
}

.ajaxButton
{
	text-align: center;
	margin: 21px 0;
}

.ajaxBtn.btnpreloader
{
	overflow: hidden;
	text-indent: 999px;
	line-height: 180px;
}

.ajaxBtn.btnpreloader:after
{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -16px 0 0 -16px;
	width: 32px;
	height: 32px;
	background: url(i/loader.gif) 0 0 no-repeat;
	-webkit-background-size: 100%;
	background-size: 100%;
	content: '';
}

.ajaxBtn
{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 143px;
	height: 35px;
	line-height: 35px;
	background: white;
	border: 1px solid #ccc;
	color: #333;
	text-decoration: none;
	cursor: pointer;
	font-size: 16px;
	border-radius: 3px;
}