body {
    margin: 0;
    padding: 0;
    background-color: #eeefef;
    line-height: 0;
    font-family: Arial, "Helvetica Neue", "Helvetica", sans-serif;
}
a img {
    border: 0;
}
ul li {
    list-style-type: none;
}
#main .terms{
    line-height: 24px;
}
#main .terms p{
    font-size: 14px;
}
#game-information {
    line-height: 18px;
}
#top {
    width: 100%;
    background: linear-gradient(to bottom, #0086cb 0%, #0282c5 100%);
    display: block;
    height: 48px;
    z-index: 6;
    position: fixed;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
    background: #0086cb;
    background: -moz-linear-gradient(top, #0086cb 0%, #0282c5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0086cb), color-stop(100%, #0282c5));
    background: -webkit-linear-gradient(top, #0086cb 0%, #0282c5 100%);
    background: -o-linear-gradient(top, #0086cb 0%, #0282c5 100%);
    background: -ms-linear-gradient(top, #0086cb 0%, #0282c5 100%);
    background: linear-gradient(to bottom, #0086cb 0%, #0282c5 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0086cb', endColorstr='#0282c5', GradientType=0);
    border: solid #00659f;
    border-width: 0 0 1px 0;
}
#top #close {
    position: fixed;
    right: 17px;
    top: 12px;
    padding-top: 5px;
    display: none;
}
#top #close img {
    opacity: 0.4;
}
#topMid {
    margin-left: auto;
    width: 860px;
    margin-right: auto;
    padding-left: 85px;
}
#top #topMid #topShare {
    float: left;
    width: 190px;
    height: 20px;
    padding: 15px 5px 0 60px;
    text-align: left;
}
#top #headerTop {
    color: #fff;
    font-size: 25px;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 46px;
    vertical-align: middle;
    text-shadow: 1px 1px 1px #00476c;
    float: left;
    margin: 0;
}
#top #headerTop b {
    font-size: 18px;
    font-weight: normal;
    color: #cdedff;
    line-height: 46px;
}
#top a:hover #headerTop b {
    color: #fff;
}
#top #headerTop .yellow{
    color: #ffe53a;
}
.yellow{
    color: #ffe53a;
}
.red{
    color: #ff6c6c;
}
#top #headerTop .green{
    color: #4dff3a;
}
.green{
    color: #4dff3a;
}
#top #headerTop .orange{
    color: #ffa044;
    font-size: 25px;
}
.orange {
    color: #ffa044;
}
.purple{
    color: #ef68ff;
}
#top a:hover #headerTop {
    color: #cdedff;
}
#top a:hover #headerTop .yellow {
    color: #4dff3a;
}
#top a:hover #headerTop .red {
    color: #ffa044;
}
#top a:hover #headerTop .green {
    color: #ef68ff;
}
#top a:hover #headerTop .orange {
    color: #ffe53a;
}
#top a:hover #headerTop .purple {
    color: #ff6c6c;
}
/*Search box*/

.list_item_container {
    min-width: 245px;
    height: 32px;
    padding: 4px 0;
}
.image {
    height: 32px;
    margin-right: 10px;
    float: left;
}
.image img {
    border: 1px solid #5d6062;
}
.label {
    line-height: 16px;
    font-size: 13px;
}
/* form:http://speckyboy.com/2012/02/15/how-to-build-a-stylish-css3-search-box/ */

.searchForm {
    float: right;
    width: 262px;
    background: #444;
    padding: 5px;
    line-height: 38px;
    vertical-align: middle;
    margin-top: 2px;
    background: rgba(0, 0, 0, .05);
    border-radius: 5px;
}
.searchForm #search_form {
    background-color: #1a91cf;
    height: 20px;
    border-style: solid;
    border-color: #5aa6cc;
    border-width: 1px 0 1px 1px;
    padding: 5px;
    float: left;
    color: #8dc8e7;
    width: 220px;
    border-radius: 3px 0 0 3px;
}
.searchForm #search_form:focus {
    outline: 0;
    background: #2598d4;
    text-transform: none;
}
.searchForm input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.25);
    text-transform: none;
}
.searchForm input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.25);
    text-transform: none;
}
.searchForm input:-moz-placeholder {
    color: rgba(255, 255, 255, 0.25);
    text-transform: none;
}

.searchForm input:focus::-webkit-input-placeholder { color:transparent; }
.searchForm input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
.searchForm input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
.searchForm input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

.searchForm #search_form_submit {
    width: 20px;
    height: 20px;
    background-color: #1a91cf;
    border: solid #5aa6cc;
    border-width: 1px 1px 1px 0;
    padding: 5px;
    float: left;
    color: #8dc8e7;
    border-radius: 0 3px 3px 0;
}
.searchForm #search_form_submit:hover {
    background-color: #147dba;

}

#language-select {
    border-radius: 3px;
    border: 1px solid #5aa6cc;
    background-color: #148cca;
    height: 30px;
    line-height: 30px;
    float: right;
    vertical-align: middle;
    margin-top: 7px;
    margin-left: 10px;
    padding: 0 10px;
    cursor: pointer;
}

#language-select img {
    vertical-align: middle;
    opacity: 0.75;
}
#language-select #languages {
    display: none;
}
#language-select:hover #languages {
    width: 90px;
    height: 152px;
    text-align: left;
    z-index: 501;
    position: absolute;
    top: 0;
    background-color: #148cca;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    margin-left: -11px;
    margin-top: 7px;
    padding-left: 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.50);
    cursor: default;
}

#language-select #languages a {
    color: rgba(255, 255, 255, 0.75);
}
#language-select #languages a:hover {
    color: #fff;
}
#language-select #languages a:hover img{
    opacity: 1;
}
#language-select #languages img {
    margin-right: 5px;
    opacity: 0.75;
}

/* Menu */
#menu {
    border: solid #004f7b;
    background-color: #414446;
    border-width: 1px 0 0 0;
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    z-index: 5;
    padding: 0;
    display: block;
}
#menu li {
    float: left;
}
#menu ul {
    text-align: center;
    width: 1095px;
    margin: 0 auto;
}
#menu li a {
    color: #E5EAED;
    font-weight: normal;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
    float: left;
    display: inline;
    padding: 0 10px;
    height: 35px;
    margin: 0px 1px 0 1px;
    line-height: 35px;
    position: relative;
    z-index: 5;
}
#menu li a#active {
    color: #000;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
    margin-top: 0;
    background-color: rgb(238, 239, 239);
}
#menu li a:hover {
    color: #fff;
}
.adventureB:hover,
.adventure {
    background-color: #ddc41d;
}
.arcadeB:hover,
.arcade {
    background-color: #c97201;
}
.sportsB:hover,
.sports {
    background-color: #066a1b;
}
.actionB:hover,
.action {
    background-color: #00c939;
}
.shootingB:hover,
.shooting {
    background-color: #010fc9;
}
.drivingB:hover,
.driving {
    background-color: #c90114;
}
.girlsB:hover,
.girls {
    background-color: #c900c7;
}
.skillB:hover,
.skill {
    background-color: #01c7c9;
}
.puzzleB:hover,
.puzzle {
    background-color: #7100c9;
}
.puzzleText {
    color: #7100c9;
}
.skillText {
    color: #01c7c9;
}
.drivingText {
    color: #c90114;
}
.arcadeText {
    color: #c97201;
}
.actionText {
    color: #00c939;
}
.adventureText {
    color: #ddc41d;
}
.sportsText {
    color: #066a1b;
}
.shootingText {
    color: #010fc9;
}
.girlsText {
    color: #c900c7;
}
#menu li a.regularB:hover, #menu li a.ioB:hover, #menu li a.clickerB:hover {
    color: #000;
    background-color: #f4f4f4;
}
#menu li a.regularB, #menu li a.ioB, #menu li a.clickerB  {
    font-weight: bold;
    color: #fff;
}
#menu li#tags {
    float: left;
    width: 175px;
}
#menu li#tags div span {
    display: none;
}
#menu li#tags div {
    background-color: #5d6062;
    border-radius: 5px;
    margin-left: 5px;
    margin-top: 5px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
}
#menu li#tags div a {
    margin-top: 0;
    color: #e4e4e4;
    line-height: 26px;
    height: 20px;
    margin-bottom: 0;
}
#menu li#tags:hover div {
    width: 170px;
    height: 308px;
    text-align: left;
    z-index: 500;
    position: absolute;
}
#menu li#tags:hover div span {
    display: block;
    padding: 25px 10px 10px 10px;
}
#menu li#tags:hover div span a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-transform: none;
    line-height: 16px;
    background-color: rgba(0, 0, 0, 0.03);
    height: 16px;
    margin: 5px 2px;
    padding: 2px;
    color: rgba(255, 255, 255, 0.9);
}
#menu li#tags:hover div span a:hover {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 0.1);
}
#menu li#tags:hover a {
    color: #fff;
}
/* Positioning */
#rest {
    padding-top: 48px;
    position: relative;
}
.game-center {
    position: absolute;
}
#leftCol {
    float: left;
    height: 100%;
    display: block;
    padding-left: 5px;
}
#rightCol {
    float: right;
    height: 100%;
    display: block;
    padding-right: 5px;
}
.sideCol {
    padding: 5px 0 0 0;
    width: 195px;
    box-shadow: none;
    background-color: #eeefef;
    z-index: 2;
}
.centerGame {
    float: left;
    margin: 10px 18px;
}
#rightSky, #leftSky {
    height: 600px;
    overflow: hidden;
}
#halfPage {
    height: auto;
    min-height:250px;
    overflow: hidden;
}
#halfPage {
    margin-top: 1px;
}
.sidePanel {
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
    width: 160px;
    line-height: 0;
    margin-bottom: 10px;
}
.relatedBar {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
}
#topRelatedWrapper {
    margin: 0 auto;
    position: relative;
}
#topRelated {
    height: 112px;
    margin: 3px auto 0 auto;
    overflow: hidden;
    padding: 0 5px 4px 0;
}
#nextArrow, #prevArrow {
    position: absolute;
    top: 36px;
    box-shadow: 0 1px 1px 1px rgba(0,0,0,0.2);
    background-color: #fff;
    width: 15px;
    height: 15px;
    padding: 15px;
    border-radius:27px;
}
#nextArrow {
    right: -20px;
}
#prevArrow {
    left: -20px;
    visibility: hidden;
}
#prevArrow:hover, #nextArrow:hover {
    cursor: pointer;
    background-color: #eeefef;
}
/* https://codepen.io/jonneal/pen/kptBs */
.chevron::before {
    border-style: solid;
    border-width: 0.25em 0.25em 0 0;
    content: '';
    display: inline-block;
    height: 0.45em;
    left: 0.15em;
    position: relative;
    top: 0.15em;
    transform: rotate(-45deg);
    vertical-align: top;
    width: 0.45em;
    color: #5d6062;
}
.chevron.right:before {
    left: 0;
    transform: rotate(45deg);
}
.chevron.left:before {
    left: 0.25em;
    transform: rotate(-135deg);
}
#main p, #main ol, #main ul{
    color: #414446;
    font-size: 14px;
    margin-top: 15px;
}
#main .games-description-panel {
    border-top: 1px solid #e2e2e2;
    padding: 15px 0;
    display: block;
    text-align: left;
}

#main .games-description-panel p, #main .games-description-panel ul li {
    font-size: 12px;
}
#main .games-description-panel.first {
    border-top-width: 0;
}

#main .terms ul, #main .terms ul li {
    display: block;
    list-style-type: disc;
}

#main .games-description-panel ul {
    display: block;
}

#main .games-description-panel ul li {
    list-style-type: disc;
    list-style-position: inside;
}

#main h3 {
    margin-bottom: 0;
    font-size: 14px;
}
a {
    color: #0282c5;
    text-decoration: none;
}
a:hover {
    color: rgba(2, 130, 197, 0.75);
    text-decoration: none;
}
#rightCol .sidePanel {
    float: right;
}
/* MIDDLE PART */

.midPanel {
    line-height: 18px;
    background-color: #fff;
    margin: 0 auto;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}
#walkthrough {
    margin-top: 30px;
}
#gameContainer {
    margin: 2px auto 0 auto;
    text-align: center;
    padding: 0;
}
#game {
    margin: 0 auto;
}
.tag-h1 {
    padding: 6px 0 10px 0;
}
h1,
#main h3.likeH1,
#main h2.likeH1,
h3.likeH1,
h2.likeH1 {
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    text-transform: uppercase;
    margin: 0;
    color: #000;
}
.clear {
    clear: both;
    height: 0px;
    line-height: 0px;
    margin: 0;
}
#buttonList {
    display: flex;
    justify-content:left;
    padding-top: 32px;
    padding-right: 10px;
    font-size: 14px;
    color: #5b5c5f;
    position: relative;
}

a.subGameButton {
    height:18px;
    color: #5b5c5f;
    font-size: 14px;
    padding: 10px;
    text-transform: uppercase;
}
a:hover.subGameButton {
    color: #434448;
    background-color:#eeefef;
    border-radius: 5px;
}

a.subGameButton.liked, a.subGameButton.disliked {
    color: #000;
}

a.subGameButton i {
    margin-right: 5px;
    font-size: 18px;
    position: absolute;
}

a.subGameButton span {
    margin-left: 30px;
}

.helpBox {
    position: absolute;
    background-color: #fff;
    border: 1px;
    z-index: 5;
    text-align: left;
    display: block;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.1);
}

#embedBox {
    width: 320px;
    top: 75px;
    right: 10px;
    padding: 10px;
}

#shareBox {
    width: 340px;
    top: 75px;
    right: 99px;
}

#shareBoxTop {
    padding: 20px;
}

.helpBoxTop {
    padding: 10px;
}

.helpBox h3 {
    color: black;
    margin: 0;
}

.helpBoxTop a.helpbox-close-link {
    line-height: 14px;
    font-size: 16px;
    color: #afafaf;
}

.helpBoxTop a:hover.helpbox-close-link {
    line-height: 14px;
    font-size: 16px;
    color: #5b5c5f;
}

.helpBox input {
    padding: 10px 0;
    border-color: #414446;
    border-width: 0 0 2px 0;
    font-size: 14px;
    width: 300px;
    margin-top: 10px;
}

.helpBox input:focus {
    outline: none;
    border-color: black;
}

.helpBox .copyButton {
    float:right;
    margin: 10px 0;
}

.invisible {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

#shareList {
    display: flex;
    justify-content: space-around;
    background-color: rgba(0,0,0,0.03);
    padding: 10px;
}

#shareList a {
    font-size: 25px;
    color: #414446;
}

#shareList a:hover {
    color: black;
}

#gameDescription {
    position: relative;
    z-index: 0;
    min-height: 750px;
    text-align: left;
}
#gameDescription:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    opacity : 0.1;
    z-index: -1;
}

#tagsList {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    padding: 0 5px 0 5px;
}

.tagBox {
    height: 47px;
    vertical-align: middle;
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    margin: 10px 5px 0 5px;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 14px;
    color: #5b5c5f;
    font-weight: bold;
}

.tagBox:hover {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
    background-color: #f5f5f5;
    color: #414446;
}

.tagBox img {
    border-radius: 5px 0 0 5px;
}

.tagBox span {
    padding: 0 10px;
}

.description {
    text-align: left;
    padding: 15px;
    font-size: 14px;
    line-height: 28px;
}

.subGamePart {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
}
.subGamePanel {
    padding: 15px 0 15px 0px;
    margin-left: 15px;
    line-height: 24px;
    text-align: left;
    font-size: 12px;
    color: #414446;
}
.subGamePanel.right {
    padding: 15px 15px 0px 0;
    line-height: 24px;
    text-align: left;
    border-bottom: 1px solid #e2e2e2;
    font-size: 12px;
    color: #414446;
    margin-left: 0;
}
.subGamePanel.description.right {
    line-height: 28px;
    border-bottom: 0;
}

.lastPanel {
    border-bottom: 0;
}
#rating {
    float:left;
    padding:0;
    text-align:left;
    font-size:14px;
    line-height:14px;
    color: #5b5c5f;
}
#msg a {
    color: #0282c5;
}
.subGamePanel a,
.tags a {
    color: #0282c5;
    text-transform: uppercase;
    text-decoration: none;
}
.subGamePanel a:hover,
.tags a:hover {
    text-decoration: underline;
    color: #026Ea7;
}
#tagsMore {
    color: #7f7f7f;
    padding-left: 30px;
}
#tagsMore a {
    color: #7f7f7f;
    padding-left: 30px;
}
#main .description p {
    margin-top: 0;
}
.subGamePanel.description a {
    text-transform: none;
}
.mpu {
    margin: 10px;
    float:right;
    text-align: right;
}

.subGameRest {
    width: 100%;
}

.mpu-300 {
    width: 300px;
    height: 250px;
}
.half-page-sub-game {
    width: 300px;
    height: 600px;
}
.mpuLeft {
    margin-right: 0;
}
.nextToThumb {
    padding: 0 0 0 15px;
    height: 47px;
    line-height: 47px;
    display: flex;
    align-items: center;
}
.nextToThumb a {
    text-decoration: none;
    color: #414446;
}
#game-addthis-box {
    margin: 10px;
    padding: 10px;
    border: 1px solid #414446;
    display: none;
}
#share {
    padding-left: 0px;
    line-height: 14px;
    vertical-align: middle;
    display: block;
    min-height: 29px;
    margin-top: 0px;
    padding-right: 10px;
}
#main h2 {
    color: #414446;
    font-size: 16px;
}
#main ul#friends li {
    padding: 5px;
    color: #414446;
    font-weight: bold;
    display: inline;
    font-size: 13px;
    line-height: 40px;
}
#main ul#friends li a {
    color: #000;
    font-weight: normal;
    text-decoration: none;
}
#main ul#friends li a:hover {
    color: #000;
}
#main p.pagination {
    padding: 20px 0 30px 0;
    line-height: 0;
}
#main .pagination a,
#main .pagination strong {
    margin-left: 3px;
    font-size: 40px;
    margin-right: 3px;
    color: #0086cb;
    padding: 15px 20px;
    text-decoration: none;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    background-color: #fff;
    font-weight: normal;
}
#main .pagination a:hover {
    color: #333;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
    background-color: #fefefe;
}
#main .pagination strong {
    color: #aaa;
    font-weight: normal;
}
.catTagList {
    padding: 0;
    margin: 0;
}
.catTagList li {
    padding: 0;
    margin: 0 5px 0 0;
}
.catTagList li a {
    background-color: #e4e4e4;
    color: #474747;
    text-transform: uppercase;
    padding: 0 2px;
    line-height: 11px;
    font-weight: bold;
    text-decoration: none;
    font-size: 11px;
}
.catTagList a:hover {
    background-color: #e1e1e1;
    color: #323232;
}
#f {
    line-height: 40px;
    font-size: 16px;
    padding: 25px 10px 0 10px;
    color: #000;
    margin: 0 auto;
    text-align: center;
}
#f p {
    margin: 0;
    padding: 10px 0px;
    line-height: 15px;
    font-size: 12px;
}
#f p a {
    font-size: 12px;
}
#f a {
    color: #000;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
}
#f a:hover {
    color: #414446;
}
#main {
    padding-bottom: 50px;
    margin-bottom: 15px;
    z-index: 3;
    display: block;
}
#main ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#main .description ul {
    display: block;
    list-style-position: inside;
}

#main .description ul li{
    list-style-type: disc;
}

.tile a {
    display: block;
    clear: both;
    font-size: 0;
    margin: 5px;
    text-decoration: none;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
    border: 0;
    line-height: 0;
    position: relative;
    border-radius: 5px;
}

.tile.inactive a {
    cursor: default;
}

.sideCol .tile a {
    margin: 0 0 10px 0;
    width: 160px;
}
#rightCol .tile {
    float: right;
}
#rightCol.halfPage .tile a {
    width: 145px;
    margin-left: 10px;
}

#rightCol.halfPage .tile a img {
    width: 145px;
}

#rightCol.halfPage .tile a .tileUnity img {
    width: 61px;
}

#rightCol.halfPage .tile .tileTitle {
    width: 135px;
}

#rightCol.halfPage .tile .tileTitleOverflow {
    width: 113px;
}
#rightCol.halfPage .tile .tileNoVideo {
    width: 145px;
}
#rightCol.halfPage .tile .video-div {
    width: 145px;
    overflow: hidden;
}


#main .relatedBar .tile a {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    margin: 3px 7px 15px 0;
}

#main #topRelated .tile a {
    margin: 3px 2px 15px 5px;
}

#main .relatedBar .tile {
    float: left;
    height: 100%;
    min-height: 1px;
}

.tile .tileUnity {
    position: absolute;
    margin-left: 124px;
    opacity: 1.0;
    filter: alpha(opacity=100);
    /* For IE8 and earlier */
    z-index: 3;
    left: 0;
}

.tile .tileUnity .img {
    left: 0;
}

/* style video icon */
.tile .tileNoVideo, #exit-container ul li a .tileNoVideo {
    background-color: black;
    display: none;
    position: absolute;
    margin-left: 0px;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 3;
}

#main div.tile span.tileNoVideo p, .sideCol div.tile span.tileNoVideo p {
    font-size: 12px;
    line-height: 18px;
    display: block;
    color: white !important;
    margin: 0px;
    text-align: center;
}

#main .relatedBar .tile .tileUnity {
    margin-left: 82px;
}
.sideCol .tile .tileUnity {
    margin-left: 99px;
}
.sideCol.halfPage .tile .tileUnity {
    margin-left: 84px;
}

.tile:hover .tileUnity img {
    opacity: 0.8;
    filter: alpha(opacity=100);
    /* For IE8 and earlier */
}
.tileTitleOverflow {
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    float: left;
}

.relatedBar .tileTitleOverflow {
    width: 125px;
}

.sideCol .tileTitleOverflow {
    width: 130px;
}

.tileTitle {
    bottom: 0;
    left: 0;
    width: 170px;
    padding: 5px;
    font-size: 12px;
    text-transform: uppercase;
    text-align: left;
    z-index: 5;
    height: 16px;
    line-height: 17px;
    display: block;
    background-color: rgb(59, 75, 87);
    color: #fff;
    position: relative;
    border: 0;
    border-radius: 0 0 5px 5px;
}

.tile a .image-container{
    position: relative;
}

.tile a .video-div  {
    position: absolute;
    top: 0;
    left: 0;
  }



.tile a .image-container img, .tile a .video-div video {
    border-radius: 5px 5px 0 0;
}

.relatedBar .tileTitle {
    width: 125px;
    height: 11px;
    line-height: 11px;
    font-size: 11px;
    text-align: center;
}
.sideCol .tileTitle {
    width: 150px;
    height: 14px;
    line-height: 14px;
    font-size: 11px;
}
.gameInSeries .tileTitle{
    background-color: #0282c5;
}
/* added 12 november 2014 */

.tile:hover a .tileTitle {
    background-color: rgb(36, 59, 75);
}
.tile:hover a.gameInSeries .tileTitle {
    background-color: #0075B8;
}
.tile a .tileTitle span {
    border: 0;
    font-size: 12px;
    line-height: 16px;
    padding: 0;
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
}
.tile a .tileRating {
    display: none;
}

#socialMediaIcons {
    display: flex;
    float: right;
    padding-top: 14px;
    padding-left: 16px;
    width: 44px;
    justify-content: space-around;
}

#socialMediaIcons a img {
    opacity: 0.75;
}
#socialMediaIcons a:hover img {
    opacity: 1;
}

/*contact*/

#newForm {
    margin: 0;
    width: 600px;
    text-align: left;
}

#newForm input, #newForm label, #newForm textarea, #newForm select {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

#newForm input, #newForm textarea, #newForm select {
    padding: 5px;
    margin-bottom: 10px;
}

#newForm select {
    font-size: 14px;
}

#newForm .g-recaptcha {
    margin-bottom: 10px;
}

#extra-desc-wrapper {
    margin-right: 15px;
}
#main #extra-desc {
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
}
#codeigniter_profiler {
    line-height: 16px;
}

/* Jquery UI Autocomplete */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.ui-front {
    z-index: 100;
}
.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
}
.ui-menu {
    list-style: none;
    padding: 2px;
    margin: 0;
    display: block;
    outline: none;
}
.ui-menu .ui-menu-item {
    margin: 0;
    padding: 0;
    width: 100%;
    /* support: IE10, see #8844 */
    list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    padding: 2px .4em;
    line-height: 1.5;
    min-height: 0; /* support: IE7 */
    font-weight: normal;
}

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: 'Arial', "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 12px;
}
.ui-widget-content {
    border: 1px solid #aaaaaa;
    background: #ffffff url(jquery-ui-images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
    color: #222222;
}
.ui-widget-content a {
    color: #222222;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: 1px solid #d3d3d3;
    background: #e6e6e6 url(jquery-ui-images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #555555;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
    color: #555555;
    text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border: 1px solid #999999;
    background: #eeeeee url(jquery-ui-images/ui-bg_glass_75_eeeeee_1x400.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #212121;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
    color: #212121;
    text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    border: 1px solid #aaaaaa;
    background: #ffffff url(jquery-ui-images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #212121;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #212121;
    text-decoration: none;
}

.beta-notice {
    min-width: 750px;
    min-height: 25px;
    padding: 25px 0 0 0;
    border-bottom: 1px solid #e3e3e3;
    text-align: center;
}
/* from http://tobiasahlin.com/spinkit/ */
.spinner {
    margin: 0px auto;
    padding-top: 40px;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

.spinner > div {
    background-color: #0282c5;
    height: 100%;
    width: 6px;
    display: inline-block;

    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  20% {
           transform: scaleY(1.0);
           -webkit-transform: scaleY(1.0);
       }
}

/* to decide which one is on top */
#adContainer > div {
    z-index: 10;
}
.spinner {
    z-index: 1;
}

#games-container {
    display: flex;
}

#games-main-column {
    flex-basis: 960px;
    flex-grow: 1;
    padding-bottom: 10px;
}

#main .games-description-block {
    line-height: 16px;
    margin: 0 5px 10px 5px;
    padding: 0 15px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.5);
    display: block;
    color: #414446;
    font-size: 12px;
    border-radius: 5px;
}

.games-description-block.bottom {
    line-height: 24px;
}

#games-left-column {
    padding: 0 5px 10px 10px;
    line-height: 18px;
    text-align: left;
    flex-basis: 175px;
    flex-shrink: 1;
}

#main #games-left-column ol, #main #games-left-column ul {
    display: block;
    font-size: 13px;
}
#main #games-left-column ol {
    padding-left: 15px;
    margin-top:0;
}

#games-left-column h2 {
    font-size: 13px;
    color: black;
}
#games-left-column p {
    font-size: 13px;
    margin-top: 5px;
}
#main #games-left-column ul li{
    list-style-type: disc;
    list-style-position: outside;
    margin-left: 15px;
}

.series-game img {
    float:left;
    padding: 7px 15px 15px 0;
}

#main .series h2 {
    clear: both;
    line-height: 45px;
    padding-top: 15px;
}

#main .series p {
    line-height: 24px;
    font-size: 14px;
}

#main .series h1 {
    font-size: 24px;
    line-height: 36px;
}

#main .series {
    max-width: 940px;
    margin: 0 auto;
}

#subWalkthrough {
    text-align:center;
    border-bottom:1px solid #e2e2e2;
    border-top:1px solid #e2e2e2;
}

/* own veedi walktrough stuff */

#veediContainer {
}

#veediContainer.withWalkthrough {
    padding: 0;
}

#veediInnerContainer {
    background-size: 180px 111px;
    width: 180px;
    height: 111px;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}

#veediButton {
    cursor:pointer;
    width: 180px;
    height: 111px;
    background-color: rgba(255, 255, 255, 0.4);
}

/* https://codepen.io/stevenfabre/pen/DvBei */
.play {
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 18px solid #414446;
    margin: 0 auto 15px auto;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    left: 3px;
    top: 39px;
}
.play:before {
    content: '';
    position: absolute;
    top: -22px;
    left: -34px;
    bottom: -23px;
    right: -11px;
    border-radius: 50%;
    border: 5px solid #414446;
    z-index: 2;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}
.play:after {
    content: '';
    opacity: 0;
    transition: opacity 0.6s;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
}
.play:hover:before, .play:focus:before {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
}
.play.active {
    border-color: transparent;
}
.play.active:after {
    content: '';
    opacity: 1;
    width: 18px;
    height: 24px;
    background: #414446;
    position: absolute;
    right: 2px;
    top: -12px;
    border-left: 10px solid #414446;
    box-shadow: inset 15px 0 0 0 #f9f9f9;
}

#close_flash_overlay {
    float: right;
    color: #afafaf;
}

#missing_flash_container {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    background-color: #004f7b;
}
#missing_flash_container.visible {
    display:block;
}
#missing_flash_container.hidden {
    display:none;
}

#flash_activation_paragraph.visible {
    display: block;
}
#flash_activation_paragraph.hidden {
    display: none;
}

#missing_flash {
    border: 1px solid #000;
    padding: 20px;
    background-color: #fff;
    position: absolute;
    top: 55px;
    bottom: 40px;
    left: 40px;
    right: 40px;
}

#missing_flash_title {
    height: 60px;
    line-height: 60px;
    color: #eeefef;
    text-transform: uppercase;
}

#missing_flash_title strong {
    font-weight: bold;
}

#missing_flash_title #site_title {
    color: #fff;
    font-weight: bold;
}

#missing_flash_btn {
    background: #3498db;
    background: linear-gradient(to bottom, #0086cb 0%, #0282c5 100%);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    text-shadow: 1px 1px 3px #666666;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    padding: 20px 10px 20px 10px;
    text-decoration: none;
    border: solid #1f628d 3px;
    text-transform: uppercase;
    display: block;
    max-width: 370px;
    margin: 0 auto;
}

#missing_flash_btn:hover {
    background: #00a6e7;
    background-image: linear-gradient(to bottom, #00a6e7, #1a91cf);
    text-decoration: none;
}

#missing_flash_overlay {
    display: none;
    position: fixed; /* Stay in place */
    z-index: 15; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

#allow-modal {
    background-color: #fefefe;
    padding: 30px 20px 20px 20px;
    border: solid #414446;
    border-width: 1px 1px 0 1px;
    width: 500px;
    line-height: 30px;
}

#allow-modal.chrome {
    margin-top: 160px;
    margin-left: 109px;
}

#allow-modal.edge {
    margin-top: 160px;
    margin-right: 29px;
    float:right;
}

#missing_flash_site_title_bottom {
    background: linear-gradient(to bottom, #0086cb 0%, #0282c5 100%);
    width: 500px;
    line-height: 30px;
    color: #fff;
    padding: 10px 20px;
    text-align: right;
    font-weight: bold;
    border: solid #414446;
    border-width: 0 1px 1px 1px;
    margin-left: -20px;
    margin-bottom: -20px;
}

#chrome-flash-message {
    display:none;
}
#edge-flash-message {
    display:none;
}

#missing_flash_arrow.chrome {
    float: left;
    position: relative;
    top: 119px;
    left: 332px;
}
#missing_flash_arrow.chrome.chrome58 {
    float: left;
    position: relative;
    top: 119px;
    left: 280px;
}
/*#missing_flash_arrow.chrome.chrome62 {*/
    /*float: left;*/
    /*position: relative;*/
    /*top: 113px;*/
    /*left: 262px;*/
/*}*/
#missing_flash_arrow.edge {
    float: right;
    position: relative;
    top: 129px;
    right: 155px;
}

#allow-modal strong {
    font-size: 24px;
    font-weight: bold;
}

#allow-modal .small {
    font-size: 11px;
    color: rgba(0,0,0,0.5);
    line-height: 12px;
}

#exit-modal {
    display: none;
    position: fixed; /* Stay in place */
    z-index: 15; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

#exit-modal .tile a .image-container img, #exit-modal .tile a .video-div video {
    border-radius: 5px;
}

#exit-container {
    width: 750px;
    padding: 30px 30px 30px 30px;
    background-color: #eeefef;
    margin: 100px auto 0 auto;
    -webkit-box-shadow: 2px 2px 7px -3px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 7px -3px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 7px -3px rgba(0,0,0,0.75);
    line-height: 20px;
    text-align: center;
    border-radius: 5px;
}

#exit-container .tile a {
    box-shadow: none;
}

#exit-container h4 {
    font-size: 24px;
}

#exit-container .image-container {
    margin-right: 15px;
    height: 111px;
    width: 180px;
}

#close-exit-modal {
    float: right;
    cursor: pointer;
}

#exit-container ul {
    padding: 0;
}

#exit-container ul li {
    display: flex;
    text-align: left;
    justify-content: flex-start;
    width: 575px;
    margin: 10px auto;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}
#exit-container ul li:hover{
    background-color: rgba(255, 255, 255, 0.5);

}

#exit-container ul li a {
    display: flex;
    text-align: left;
    justify-content: flex-start;
    align-items: center;
    width: 520px;
    padding: 10px;
    font-size: inherit;
}


#exit-container ul li .exit-modal-raquo{
    display: none;
    font-size: 80px;
    /*color: #414446;*/
    /*color: #0282c5;*/
    color: rgba(0, 0, 0, 0.3);
}
#exit-container ul li:hover .exit-modal-raquo{
    display: block;
}

.exit-modal-info {
    line-height: 24px;
    width: 280px;
}

.exit-modal-info span {
    color: #414446;
    font-size: 14px;
}


#exit-container p {
    font-size: 20px;
}

#exit-container .tileNoVideo p {
    font-size: 12px;
    text-align:center;
    color: #fff;
}

#exit-container p a {
    font-weight: bold;
    color: #0282c5;
}


#main a.button, #scholarship .button, #mc_embed_signup #mc-embedded-subscribe.button {
    padding: 15px;
    background-color: #00a6e7;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    height:auto;
}

#main a.button:hover, #scholarship .button:hover, #mc_embed_signup #mc-embedded-subscribe.button:hover {
    background-color: #0086cb;
}
/* temp add survey css */
.sv_window {
    position: fixed;
    bottom: 3px;
    right: 10px;
    padding: 1px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    line-break: auto;
    /* added by Raf */
    z-index: 15;

}

.sv_window_title {
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0; }

.sv_window_content {
    padding: 8px;
    margin: 0; }

.sv_window_title a, .sv_window_title a:link, .sv_window_title a:visited {
    text-decoration: none;
    font-size: 14px;
    font-style: normal;
    color: black; }

.sv_main {
    width: 100%; }

.sv_body {
    margin-bottom: 10px; }

.sv_page_empty {
    height: 100px;
    width: 100%;
    display: table; }

.sv_page_empty_content {
    display: table-cell;
    vertical-align: middle;
    text-align: center; }

.sv_row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2); }

.sv_q {
    padding: 10px 3px;
    margin: 0;
    clear: none;
    box-sizing: border-box; }

.sv_q_title {
    width: 100%;
    /* added by Raf */
    font-size: 16px;
}
/* added by Raf */
h5.sv_q_title {
    margin: 0 0 10px 0;
}

.sv_q_radiogroup {
    display: inline-block; }

/* end survey css */


#topPlaceholder {
    /* dont display the top leaderboard by default */
    display: none;
    margin: 5px auto 4px auto;
}

/* Cookie Consent */
.cc-window{opacity:1;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{transition:transform 1s ease}.cc-animate.cc-revoke.cc-top{transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-bottom,.cc-animate.cc-revoke.cc-active.cc-top,.cc-revoke:hover{transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;transition:max-height 1s}
.cc-link,.cc-revoke:hover{text-decoration:underline}.cc-revoke,.cc-window{position:fixed;overflow:hidden;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1em;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:2em;max-width:24em;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner{padding:0.25em 1.8em;width:100%;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-header{font-size:18px;font-weight:700}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-banner .cc-btn:last-child{min-width:140px}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1}
.cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{-ms-flex:1;flex:1}.cc-window.cc-banner{-ms-flex-align:center;align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{-ms-flex:1;flex:1}.cc-compliance{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-compliance>.cc-btn{-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em}
@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-ms-flex:1;flex:1}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-ms-flex-align:unset;align-items:unset}}
.cc-floating.cc-theme-classic{padding:1.2em;border-radius:5px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-ms-flex:none;flex:none}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}
.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em 2em 1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}

.cc-banner .cc-message {
    padding: 10px 0;
}

/* Slick carousel css */
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}

/* Mailchimp signup */
#mc_embed_signup{background:#fff; clear:left;padding-bottom:75px;}
#mc_embed_signup .mc-field-group {
    padding-bottom: 10px;
}
#mc_embed_signup .mc-field-group label {
    font-size: 12px;
}

/* Fontawesome */
@font-face {
    font-family: 'icomoon';
    src:  url('/assets/fonts/icomoon.eot?bzxo1s');
    src:  url('/assets/fonts/icomoon.eot?bzxo1s#iefix') format('embedded-opentype'),
    url('/assets/fonts/icomoon.ttf?bzxo1s') format('truetype'),
    url('/assets/fonts/icomoon.woff?bzxo1s') format('woff'),
    url('/assets/fonts/icomoon.svg?bzxo1s#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-close:before {
    content: "\f00d";
}
.icon-remove:before {
    content: "\f00d";
}
.icon-times:before {
    content: "\f00d";
}
.icon-arrow-up:before {
    content: "\f062";
}
.icon-mail-forward:before {
    content: "\f064";
}
.icon-share:before {
    content: "\f064";
}
.icon-twitter-square:before {
    content: "\f081";
}
.icon-facebook-square:before {
    content: "\f082";
}
.icon-code:before {
    content: "\f121";
}
.icon-thumbs-up:before {
    content: "\f164";
}
.icon-thumbs-down:before {
    content: "\f165";
}
.icon-reddit-square:before {
    content: "\f1a2";
}

/* recent games */
#recent-games-bar {
    background-color: #535557;
    padding: 5px 10px;
    display: none;
    position: relative;
}
#recent-games-bar .games-ul {
    display: flex;
    flex-wrap: wrap;
    height: 155px;
    overflow: hidden;
}
#recent-games-bar .games-ul  .tile {
    position: relative;
}
#recent-games-bar .games-ul  .tile a {
    margin-bottom: 15px;
}
.recent-ellipsis {
    width: 170px;
    padding: 35px 5px 0 5px;
    height: 102px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.1);
    /* copied from .tile a */
    clear: both;
    margin: 5px;
    text-decoration: none;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
    border: 0;
    position: relative;
    border-radius: 5px;
}
.recent-ellipsis span.ellips {
    line-height: 24px;
    font-size: 80px;
    color: #414446;
}
.recent-ellipsis div.ellips-notice {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 18px;
    padding-top: 14px;
}
#recent-title-tile {
    color: white;
    width: 180px;
    height: 137px;
    text-align: center;
    line-height: 24px;
    justify-content: center;
    align-items: center;
    display: flex;
    /* copied from .tile a */
    clear: both;
    margin: 5px;
    text-decoration: none;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
    border: 0;
    position: relative;
    border-radius: 5px;
}
#recent-title-tile span {
    color: rgba(255, 255, 255, 0.5);
}
.boxclose{
    float: right;
    position: absolute;
    z-index: 5;
    right: 0;
    top: -4px;
    cursor: pointer;
    color: #fff;
    border: 1px solid #AEAEAE;
    border-radius: 15px;
    background: #605F61;
    font-size: 15px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 7px 3px;
}

.boxclose:before {
    content: "×";
}

#recent-games-buttons{
    font-size: 13px;
    padding: 0 5px;
    position: absolute;
    right: 5px;
    bottom: 8px;
    width: 200px;
    display: flex;
    justify-content: space-around;
}
#recent-games-buttons a{
    color: white;
    cursor: pointer;
 }
#recent-games-see-all {
    display: none;
}

.extra-desc {
    font-style: italic;
}

#read-more {
    display: none;
}

/* Tooltip container */
.controls-tooltip {
    position: relative;
    display: inline-block;
    margin-top: -15px;
}

/* Tooltip text */
.controls-tooltip .controls-tooltiptext {
    visibility: hidden;
    width: 290px;
    background-color: #414446;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.controls-tooltip:hover .controls-tooltiptext {
    visibility: visible;
}

.controls-tooltip .controls-tooltiptext {
    top: 7px;
    left: 120%;
}


/* notification */
#ui_notifIt{
    position: fixed;
    top: 10px;
    right: 10px;
    overflow: hidden;
    -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    -wekbit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    z-index: 2000;
}
#ui_notifIt:hover{
    opacity: 1 !important;
}
#ui_notifIt p{
    text-align: center;
    font-family: sans-serif;
    font-size: 14px;
    padding: 0;
    margin: 0;
}
#notifIt_close{
    position: absolute;
    cursor: pointer;
    color: #FFF;
    top: 0;
    padding: 15px 10px;
    right: 0;
    font-size: 20px;
    font-weight: bold;
}
#notifIt_close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Color setup */
/* You are free to change all of this */
#ui_notifIt.success{
    background-color: yellowgreen;
    color: white;
}
#ui_notifIt.error{
    background-color: orangered;
    color: white;
}
#ui_notifIt.warning{
    background-color: orange;
    color: white;
}
#ui_notifIt.info{
    background-color: deepskyblue;
    color: white;
}
#ui_notifIt.default{
    background-color: #EEE;
    color: #444;
}

#ui_notifIt input {
    padding: 10px 0;
    border-color: #eeefef;
    background-color: #0086cb;
    font-weight: bold;
    border-width: 0 0 2px;
    font-size: 14px;
    color: #fff;
    width: 210px;
    text-align: center;
    margin-top: 10px;
    outline: none;
}

#ui_notifIt_copied {
    visibility:hidden;
}