@font-face {
    font-family: 'FontAwesome';
    src: url('/lay/fontawesome-webfont.eot?v=4.3.0');
    src: url('/lay/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('/lay/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('/lay/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('/lay/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('/lay/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
}


/* @font-face {
	font-family: 'TeXGyreHeros';
	src: url('/fonts/texgyreheros-regular-webfont.eot');
	src: url('/fonts/texgyreheros-regular-webfont.eot?#iefix') format('embedded-opentype'),
	url('/fonts/texgyreheros-regular-webfont.woff') format('woff'),
	url('/fonts/texgyreheros-regular-webfont.ttf') format('truetype'),
	url('/fonts/texgyreheros-regular-webfont.svg#TeXGyreHerosRegular') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: auto;
}
@font-face {
	font-family: 'TeXGyreHeros';
	src: url('/fonts/texgyreheros-bold-webfont.eot');
	src: url('/fonts/texgyreheros-bold-webfont.eot?#iefix') format('embedded-opentype'),
	url('/fonts/texgyreheros-bold-webfont.woff') format('woff'),
	url('/fonts/texgyreheros-bold-webfont.ttf') format('truetype'),
	url('/fonts/texgyreheros-bold-webfont.svg#TeXGyreHerosBold') format('svg');
	font-weight: bold;
	font-style: normal;
	font-display: auto;
}

@font-face {
	font-family: 'Sarabun';
	src: url('/fonts/sarabun/Sarabun-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: auto;
} */


/* @font-face {
	font-family: 'Sarabun';
	src: url('/fonts/sarabun/Sarabun-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: auto;
}
 */


/* @font-face {
	font-family: 'Heebo';
	src: url('/fonts/heebo/Heebo-Medium.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: auto;
}
@font-face {
	font-family: 'Heebo';
	src: url('/fonts/heebo/Heebo-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: auto;
} */

#imageBig {
    position: fixed;
    background: white;
    width: 100%;
    top: 1px;
    left: 0%;
    display: none;
    margin: 0 auto;
    cursor: zoom-out;
    background-color: #000000db;
    height: 100%;
}

#cookielawwarning {
    background-color: rgba(0, 0, 0, 0.9);
    color: rgb(255, 255, 255);
    padding: 2%;
    width: 92%;
}

#cookielawwarning span {
    font-size: 1.5em;
    font-weight: bold;
    width: 100%;
}

#cookielawwarning p {
    font-size: 1em;
}

#cookielawwarning button {
    color: #fff;
    padding: 0.5em 1.5em;
    background: none;
    border: 1px solid #fff;
    cursor: pointer;
}

.cookielawwarning_inner {
    max-width: 1000px;
    margin: 0 auto;
}


/*

Grayscale colors used:
#000
#111
#333
#444
#555
#666
#777
#888
#999
#aaa
#bbb
#ccc
#ddd
#fff

Other colors used:
#009ee3
#0ae (blue)
#54c9f4 (#0ae mixed with white)
#08b (almost same hue and saturation as #0ae, but darker)

Please re-use these colors, and don't invent too many new ones! Consistency is nice.


[10:01:54] Morten Reichel (DK): here the banner specs from IGN
Blade
Dimensions: 970x66 pixels
Medium Rectangle
Dimensions: 300x250 pixels
Option B
User-Initiated Blade Pushdown
Collapsed State: 970x66 pixels
Expanded State: 970x418 pixels
Medium Rectangle
Dimensions: 300x250 pixels
Option C (Excluded on GameStop)
Leaderboard
Dimensions: 728x90 pixels
Medium Rectangle
Dimensions: 300x250 pixels


http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/
http://www.typophile.com/node/63992
http://desktoppub.about.com/od/classicfonts/f/How-Many-Helvetica-Names-and-Versions.htm
Well, I tried and tried with many different names, but most people don't see them, even if they are installed. So let's just use the name "Helvetica".

Which fonts to use? We need to test in each case!

Findings:

OS X: TeXGyreHerosBold with font-weight:bold becomes VERY bold. On Windows, it looks just like font-weight:normal.
OS X: TeXGyreHerosRegular and TeXGyreHerosBold with font-weight:bold looks bad in Firefox. Looks good in webkit though. TeXGyreHerosBold with font-weight:normal looks good in both. Overall, I guess ff is bad at "faux" bolding, when the font doesn't contain bold glyphs.
Windows: TeXGyreHerosRegular < 19px with faux font-weight:bold has ugly uneven stroke width, so in that case it's better to use Arial or TeXGyreHerosBold.

Overall, this means we shouldn't use "fake" bolding (unless we browser sniff)

On Windows, fonts look very different in different sizes. Some sizes look great, others ugly. Mac is more uniform.
Use TeXGyreHeros if possible, but if it looks bad at your target size, use Helvetica instead.

Windows: TeXGyreHerosBold <= 10px, not very readable in general, 'i' 'j' 't' are messed up. Don't use!
Windows: TeXGyreHerosBold = 11px, looking good :)
Windows: TeXGyreHerosBold = 12px, 'i' 'j' 's' 'e' are messed up. Don't use!
Windows: TeXGyreHerosBold = 13px, 'e' 't' are messed up. Don't use!
Windows: TeXGyreHerosBold = 14px, 'i' 'j' 'e' are messed up. Don't use!
Windows: TeXGyreHerosBold = 15px, 'e' 't' are messed up. Don't use!
Windows: TeXGyreHerosBold = 16px, looking good :)
Windows: TeXGyreHerosBold = 17px, looking good :)
Windows: TeXGyreHerosBold = 18px, looking good :)
Windows: TeXGyreHerosBold = 19px, 'f' 't' are messed up. Don't use!
Windows: TeXGyreHerosBold >= 20px, looking good :)

Windows: TeXGyreHerosRegular <= 11px, not very readable in general
Windows: TeXGyreHerosRegular = 12px, 'i' 'j' are messed up. Don't use!
Windows: TeXGyreHerosRegular = 13px, looking good :)
Windows: TeXGyreHerosRegular = 14px, 'i' 'j' are messed up. Don't use!
Windows: TeXGyreHerosRegular >= 15px, looking good :)

Windows seems to translate the name "Helvetica" to "Arial". One trick is to write "Helvetica Neue" instead, it seems to work on most macs, but not on windows, so it's possible to make a font stack like this: font-family: "Helvetica Neue", 'TeXGyreHeros', Helvetica;

OS X: At 10px, Arial is more readable than Helvetica.


http://www.lighterra.com/articles/macosxtextaabug/
Bright text on dark background looks "glowing" in mac os x. It's clearly a weakness of their subpixel rendering algorithm, but in webkit browsers (safari, chrome) it can be improved like this:
-webkit-font-smoothing: antialiased;
Remember to use this line whereever we have bright text on dark bg!


* {
	margin: 0px;
	padding: 0px;
}
no, the above reset messes too much with old code in main.css and the other stuff from the 2006 design. let's do this instead:
*/

body,
ol,
ul,
li,
h1,
h2,
h3,
h4,
input {
    margin: 0px;
    padding: 0px;
}

body {
    font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #444;
    font-size: 13px;
    background-color: #ccc;
    overflow-y: scroll;
    /* prevent "centering jumps" while the page is loading */
    /* margin-top: 60px; */
}

a img {
    border: 0px none;
}


/* most common link styles
.a1 a {
	color: #000;
}
.a2 a {
	color: #fff;
}
.a3 a {
	color: #0ae;
}
.a1 a:hover, .a1 a:hover h3, .a2 a:hover, .a2 a:hover h3, .a3 a:hover {
	text-decoration: underline;
}
.ajaxlinks a:hover {
	text-decoration: none;
	Underline would be a bad idea here! It might confuse some users, leading them to believe that this is a link to another page, while in fact, clicking this will only affect a small part of the current page.
	So let's use a different style for all "ajax links" on the site! Actually, we shouldn't even use <a href> tags for these...
}
*/

.ajaxlink,
.ajaxlinks span {
    color: #0ae;
    cursor: pointer;
}

.ajaxlink:hover,
.ajaxlinks span:hover {
    color: #08b;
    text-decoration: none !important;
}


/* for IE8 */

article {
    display: block;
}

section {
    display: block;
}

.inlineblock {
    display: inline-block;
}


/* MAIN LAYOUT "FRAME" */

#re_loggedinbox .menumorerwd {
    display: none;
}

#navmain .l .ws .menumorerwd {
    display: none;
}

.rwd_top_bar {
    display: none;
}

#topsearch .rwd {
    display: none;
}


/* for compatibility with old site layout */


/* using class .mainheader because id #mainheader would be too strong and override stuff that we actually want */

.mainheader,
.mainfooter {
    /* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
    color: #444;
    font-size: 13px;
}

.mainheader a,
.mainfooter a {
    color: #000;
    text-decoration: none;
}

.mainheader a:hover,
.mainfooter a:hover {
    text-decoration: underline;
}


/* end for compatibility with old site layout */

#countrybar {
    background-color: #0ae;
    color: #fff;
    font-size: 11px;
    line-height: 4px;
}

#countrybar-admin {
    background-color: #0ae;
    color: #fff;
    font-size: 11px;
    line-height: 19px;
}

#countrybar .tgn {
    color: #444;
    font-weight: bold;
}

.countries {
    color: #fff;
    margin-right: 20px;
}

.countries a {
    color: #fff;
    margin: 0px 3px 0px 3px;
}

#countrybar .followbtns a,
#countrybar .followbtns img {
    margin-top: -3px;
    vertical-align: middle;
    margin-right: 4px;
}

#countrybar .followbtns a {
    width: 15px;
    height: 15px;
    display: inline-block;
    background-image: url('/lay/redesign/15fb_rss_twitter_youtube.png');
}

#countrybar .fb {
    background-position: 0 0;
}

#countrybar .rs {
    background-position: -15px 0;
}

#countrybar a.tw {
    background-position: -30px 0;
    width: 19px;
}

#countrybar .yt {
    background-position: -49px 0;
}

#countrybar .instagram {
    background-position: -65px 0;
}

.hide {
    display: none !important;
}

#hwrap {
    background-color: #fff;
    margin: 0px;
    padding-top: 40px;
}

#hwrap2 {
    margin: 0 auto;
    padding: 0;
    width: 1000px;
    position: relative;
}

#grlogo {
    width: 439px;
    height: 87px;
    position: relative;
    float: left;
}

#grlogo a,
#grlogo a img {
    display: block;
    /* height: 35px; */
}

#grlogo .fakeh1 {
    color: #fff;
    font-size: 8px;
    /* not actually meant to be read. will be replaced by FLIR */
    display: none;
    /*delete with normal logo*/
}

#topsearch {
    display: inline;
    margin-left: 5px;
}


/* #topsearch input[type=text] {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 16px;
	min-height: 16px;
	width: 170px;
	border-radius: 4px;
	border-width: 2px;
	font-size: 12px;
	text-indent: 0.5em;
	margin: 3px 0;
	} */

#topsearch input[type=text] {
    width: 90%;
    font-size: 1.3em;
    text-indent: 0.5em;
    margin: 10px 0 10px 0;
    height: 70%;
    border: none;
    /* text-transform: uppercase; */
    /* font-family: "Sarabun", "Helvetica Neue", Helvetica, Arial, sans-serif; */
}

#topsearch input[type=text]:focus {
    outline: none;
}

#topsearch input[type=image] {
    vertical-align: bottom;
    height: 20px;
    margin: 3px 0;
}


/* styles when you're not logged in: */

#re_loginbox {
    position: absolute;
    right: 0px;
    bottom: 8px;
}

#loginDefaultHidden {
    display: none;
}

.loginWrapper {
    width: 510px;
    display: none;
    position: absolute;
    right: 0px;
    top: 0px;
    background: #fff;
    border: 1px solid;
    border-color: #eee #555 #111 #666;
    -moz-box-shadow: 0 10px 10px 0 #000;
    -webkit-box-shadow: 0 10px 10px 0 #000;
    box-shadow: 0 10px 10px 0 #000;
    z-index: 12;
    font-size: 12px;
}

.loginWrapper a {
    font-weight: bold;
    color: #0ae;
}

.loginWrapper label {
    display: block;
    margin-bottom: 3px;
    text-shadow: 0px 0px 1px #ffffff;
}

.loginWrapper input[type=text],
.loginWrapper input[type=password],
.loginWrapper input[type=email] {
    line-height: 22px;
    min-height: 22px;
    border-radius: 4px;
    border-width: 2px;
    text-indent: 5px;
    display: block;
}

.loginWrapper .hide {
    display: none !important;
}

.loginWrapper #loginok {
    display: block;
    margin-top: 10px;
}

.loginWrapper #loginform {
    padding: 15px;
    background-image: url('/lay/amigo2.png');
    background-position: 275px -1px;
    background-repeat: no-repeat;
}

.loginWrapper .fb {
    color: #fff;
    padding-top: 5px;
    display: inline-block;
    cursor: pointer;
}

.loginWrapper .fb img {
    display: inline-block;
    vertical-align: top;
}

.loginWrapper .fb span {
    display: inline-block;
    padding: 7px 11px 0 11px;
    height: 21px;
    background-color: #009ee3;
    border-radius: 0px 6px 6px 0px;
    border-width: 2px 2px 2px 1px;
    border-style: solid;
    border-color: #34b2e9 #0094d4 #0094d4 #34b2e9;
}

.loginWrapper .fb:hover span {
    text-decoration: underline;
}

.loginWrapper .steam {
    margin-left: 5%;
}

.steam img {
    vertical-align: bottom;
}

.steamStanding {
    display: inline-block;
    margin-bottom: 3%;
}

.steamStanding img {
    margin: 0 auto;
    display: block;
}

#external-login {
    padding: 10px;
}

.amigo {
    position: absolute;
    top: -2px;
    right: 15px;
}


/* styles when you ARE logged in: */

#re_loggedinbox {
    float: right;
    font-size: 10px;
    /* font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; */
}

#re_loggedinbox .avatar {
    float: left;
    margin-right: 5px;
    width: 70px;
    height: 68px;
}

#re_loggedinbox .profile_actions_wrapper {
    position: relative;
    /*white-space: nowrap;*/
    float: right;
    height: 68px;
}

.profile_actions_wrapper p {
    margin: 0px;
}


/* end of login */

#navmain {
    background-color: #555;
    background-image: url('/lay/redesign/nav_bg.gif');
    background-position: 50% 0%;
    background-repeat: repeat-y;
    font-size: 0;
    /* a trick to avoid the extra space created below an inline-block for letters like pqgjy */
    display: block;
}

#navmain2,
.center1000 {
    margin: 0 auto;
    /* horizontally centers the div */
    display: table;
    /* makes the menu able to be centered without a fixed width */
    min-width: 1000px;
    /* but we only want it centered if it's wider than 1000px */
}

#navmain ul {
    list-style: none;
    display: table;
    white-space: nowrap;
    margin-bottom: 0;
}

#navmain li {
    display: table-cell;
    background-color: #555;
    color: #fff;
    font-weight: bold;
    padding-top: 1px;
    transition: background-color 700ms ease-in-out;
}

#navmain li:hover {
    background-color: #333;
}

#navmain .l a {
    text-decoration: none;
}

#navmain .r {
    background-color: #333;
}

#navmain .ws {
    /* With Submenu */
    line-height: 45px;
    display: block;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    font-size: 11px;
    /* reset the 0 from #navmain */
    /* TODO: maybe font size should vary per country? because of different word lengths... */
    white-space: nowrap;
}

#navmain .l .ws {
    font-size: 16px;
    /* font-family: "Helvetica Neue", 'TeXGyreHeros', Helvetica, Arial; */
}

#navmain .l span {
    padding: 0px 12px;
    border-left: 2px solid #777;
}

#navmain .r span {
    padding: 0px 9px;
    border-left: 2px solid #666;
}

#navmain .nb span {
    border-left: 2px solid #333;
    /* same as background */
}

#navmain .hmo span {
    color: #0ae;
}

#navmain li:first-child span {
    border-left: none;
}

#navmain li:last-child span {
    padding-right: 0;
}

.navmainNoJS a:hover+div,
#navmain2 div:hover {
    display: block !important;
}

#navmain .dropdown {
    display: none;
    position: absolute;
    z-index: 99;
    margin-left: 2px;
    min-width: 100px;
    background-color: #555;
    font-size: 12px;
}

#others_system {
    display: block;
}

#navmain li:first-child .dropdown {
    margin-left: -10px;
}

#navmain .dropdown .content {
    line-height: 170%;
}

#navmain .dropdown .content a {
    color: #fff;
    display: block;
    border-top: 2px solid #777;
    padding: 7px 14px;
    min-width: 150px;
    transition: background-color 700ms ease;
}

#navmain .dropdown .content a:hover {
    background-color: #333;
}

#navmain .dropdown .content a:first-child {
    border-top: 0 none;
}

#ads_top {
    text-align: center;
    /* for IE <6 */
}

#ads_top2 {
    /*margin: 16px auto 0px auto; for some reason this becomes like #pagebackground margin-top! no good :( */
    margin: 0 auto 16px auto;
    position: relative;
    text-align: center;
    width: 1000px;
    z-index: 5;
    overflow: hidden;
    -webkit-transition: height 1s ease-in-out;
    -moz-transition: height 1s ease-in-out;
    -o-transition: height 1s ease-in-out;
    -ms-transition: height 1s ease-in-out;
    transition: height 1s ease-in-out;
    top: 0px;
}

#ads_top2.leaderfixed {
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    top:127px; /* Disable this if smooth animation with movement from top is enabled */
    /*
    animation-name: ads_top2_animation;
    animation-duration: 4s;
    animation-fill-mode: forwards; */
}

@keyframes ads_top2_animation {
    0% {
        top: -127px;
        opacity: 0;
    }
    25% {
        top: 127px;
        opacity: 1;
    }
    75% {
        top: 127px;
        opacity: 1;
    }
    100% {
        top: -127px;
        opacity: 0;
    }
}

#ads_top2.expanded {
    height: 360px;
}

#ads_top2.megaexpanded {
    height: 800px;
}

#ads_top2 object,
#ads_top2 embed,
#ads_top2 iframe {
    margin-left: auto;
    margin-right: auto;
    z-index: 10;
}

#pagebackground {
    background-color: #ccc;
    /*position: absolute; outcommented by Emil 2013-02-25 because it was only needed as a hack for ads_top2 top margin. relative seems better! */
    position: relative;
    /*padding-top:16px;*/
    min-width: 100%;
}

#skyRight {
    position: absolute;
    right: -3%;
}

.yks300Right {
    position: fixed;
    /*-webkit-transform:translateX(125%);
	-moz-transform:translateX(125%);
	-ms-transform:translateX(125%);
	transform:translateX(125%);*/
    top: 120px;
}

.yks300Left {
    position: fixed;
    /*-webkit-transform:translateX(-343%);
	-moz-transform:translateX(-449%);
	-ms-transform:translateX(-449%);*/
    top: 120px;
}

.yks300LeftSafari {
    position: fixed;
    -webkit-transform: translateX(-450%);
    top: 10px;
}

.yks300LeftEdge {
    position: fixed;
    -webkit-transform: translateX(-452%);
    top: 10px;
}

.ad330bRight {
    top: 10px;
    position: fixed;
    /*-webkit-transform:translateX(120%);
	-moz-transform:translateX(120%);
	-ms-transform:translateX(120%);
	transform:translateX(120%);
	left:1370px;*/
}

.ad330bLeft {
    position: fixed;
    top: 10px;
    /*-webkit-transform:translate(-438%);
	-moz-transform:translate(-438%);
	-ms-transform:translate(-438%);
	transform:translate(-438%);*/
}

.main {
    background-color: #fff;
    margin: 0 auto;
    padding: 15px 0px 0px 0px;
    position: relative;
    width: 1000px;
    z-index: 10;
    -moz-box-shadow: 0 0 10px 0 #000;
    -webkit-box-shadow: 0 0 10px 0 #000;
    box-shadow: 0 0 10px 0 #000;
    margin-bottom: 30px;
}

ul {
    list-style: none;
}

.main_widemrgn {
    padding-top: 20px;
}

.with_portraitad {
    float: left;
}

#mainfooter {
    /* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
    display: block;
    clear: both;
    background-color: #333;
    color: #bbb;
    margin-top: 30px;
}

#mainfooter a {
    color: #fff;
}

.footercol {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 25%;
    padding: 27px 0px 30px 30px;
    float: left;
    font-size: 15px;
    line-height: 1.5em;
    /* font-family: 'TeXGyreHeros', arial; */
}

.footercol h2 {
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 10px;
}

.footercol h2 img {
    vertical-align: top;
}

#mainfooter hr {
    clear: both;
    margin: 0px 30px;
    color: #666;
    background-color: #666;
    border: 0 none;
    height: 1px;
}

.otherproduct {
    float: left;
}


/*
.otherproduct:hover {
	background-image: url('/lay/othr/bg.png');
	background-position: center bottom;
	background-repeat: no-repeat;
}
*/

.otherproduct .flir-image {
    padding-bottom: 2px;
    border-bottom: 1px solid #333 !important;
}

.otherproduct:hover .flir-image {
    border-bottom: 1px solid #fff !important;
}

.otherproduct .name {
    margin-top: -20px;
    text-align: center;
    font-size: 16px;
    color: #BBBBBB;
}

#re_bottomaddress {
    clear: both;
    padding: 30px 30px 30px 30px;
    font-size: 11px;
}

#portraitad {
    background-color: #fff;
    min-height: 600px;
    width: 300px;
    position: relative;
    z-index: 10;
    display: block;
    float: right;
}


/* END OF MAIN LAYOUT "FRAME" */


/* WIDELY RE-USED CLASSES */

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
}

a.username,
a .username,
.username a,
span.username {
    color: #0ae;
}

.avatar {
    /* just during development, while some pics are missing. TODO: remove before release! */
    background-color: #ccc;
    overflow: hidden;
}

.btn1ajax,
.btn1link {
    cursor: pointer;
    display: inline-block;
    padding: 5px 6px;
    text-transform: uppercase;
    /* font-family: "Helvetica Neue", 'TeXGyreHeros', arial; */
    font-weight: bold;
    font-size: 11px;
    color: #fff;
    border-radius: 6px;
    background-color: #009ee3;
    /*	Multiple background images don't work in IE8. When I try it, no background image is used, not even the first one :(
	background-image: url('/lay/redesign/btnbg1.png'), url('/lay/redesign/btnbg2.png');
	background-position: top left, bottom right;*/
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAIAAAAmdTLBAAAAxklEQVR4XqXOYUrEQBQE4QrMkTy5t/IALiHzXpesOyCIopvU/4/u8fL6xopAhdnOWBINIIAbLUc5ZWpCiTpYUbK3e+UIpRVaIqrQbmUqfGv5GW7l7Qvb0qFRN1EV4Cdf3vH7A2ed7xgJgPzeCOy9lucDxxJF/m5U2NeyD98h/Lcx2zt2LS/8hI/l+lwSnmuUVGjpqDzbiH5iInLCQ6QxnGkgqm7gKQ+CyKmGG+2mZ31LGTnZOMoKpxtT4JL3kk+45MtrXuVCH0SnAbdr73/HAAAAAElFTkSuQmCC");
    background-position: top left;
    background-repeat: no-repeat;
    border-width: 2px;
    border-style: solid;
    border-color: #34b2e9 #0094d4 #0094d4 #34b2e9;
}

.btn1ajax:hover,
.btn1link:hover,
.btn1ajax:focus,
.btn1link:focus {
    border-color: #54c9f4 #0094d4 #0094d4 #54c9f4;
    background-color: #34b2e9;
    background-image: none;
}

.btn1link:hover {
    text-decoration: underline;
}

a.btn1ajax:hover {
    text-decoration: none;
}

a.btn1ajax,
a.btn1link {
    color: #fff;
    /* just to override */
}


/* Note that color:#fff also affects the outline-color, which makes it invisible on white background :(
That is NOT nice for keyboard users! To fix it, I've set black outline color below.
But of course that makes it invisible on black backgrounds instead.
So remember to set a better outline-color each time you use these buttons on a dark background */

a.btn1ajax:focus,
a.btn1link:focus {
    outline-color: #000;
}


/* GAMEREACTOR NATION BOX */

#grnation {
    background: #fff;
    border: 7px solid #444;
    /* width: 286px; colthin - margin - border = 335 - 15-20 - 7*2 */
    width: 90%;
}

#grnation header {
    text-align: center;
}

#grnation header img {
    width: 286px;
    height: 48px;
}

#grnation article {
    width: 264px;
    float: left;
    border-bottom: 1px dotted #ccc;
    margin: 10px;
    padding-bottom: 10px;
    color: #666;
    font-size: 11px;
}

#grnation article:last-of-type {
    border-bottom: 0 none;
    padding-bottom: 0;
}

#grnation .avatar {
    width: 57px;
    height: 57px;
    float: left;
    margin-right: 10px;
}

#grnation h3 {
    font-size: 13px;
    display: inline;
}

#grnation .activityP {
    font-size: 13px;
    font-weight: bold;
    color: #0ae;
}

#grnation .country {
    padding: 2px 4px;
    float: right;
    color: #fff;
    background: #444;
}

.fbubble {
    padding: 4px;
    /*-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;*/
    -moz-box-shadow: 2px 6px 10px -2px #000;
    -webkit-box-shadow: 2px 6px 10px -2px #000;
    box-shadow: 2px 6px 10px -2px #000;
    background-color: #0ae;
    /*border: 1px dotted #000;*/
    color: #fff;
    /* font-family: "Helvetica Neue", Helvetica,Arial,sans-serif; */
    font-weight: bold;
    position: absolute;
    z-index: 2;
}

#grnation .fbubble {
    margin: 10px 0 0 67px;
    display: none;
}

#grnation .fbubble img {
    position: absolute;
    left: 10px;
    top: -10px;
}

#grnation form {
    float: right;
    color: #999;
    font-size: 11px;
    padding-top: 5px;
}

.grnationButton {
    font-size: 11px;
    /* font-family: "Helvetica Neue", Helvetica,Arial,sans-serif; */
    background: none;
    border: none;
    cursor: pointer;
    color: #0ae;
    font-weight: bold;
}

.grnationButton:hover {
    text-decoration: underline;
}

#grnation .sortbar {
    clear: both;
}

#grnation .sortbar a {
    float: right;
    text-align: right;
    color: #444;
    font-weight: bold;
}


/* END OF GAMEREACTOR NATION BOX */


/* END WIDELY RE-USED CLASSES */


/* TEMPORARY BETA BUTTON */

#beta {
    position: fixed;
    z-index: 20;
    left: 20px;
    bottom: 0px;
    background-color: #444444;
    color: #fff;
    font-weight: bold;
    padding: 10px 30px;
    padding-right: 50px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top: solid 2px white;
    border-left: solid 2px white;
    border-right: solid 2px white;
}

#beta a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

#beta a:hover {
    text-decoration: underline;
}

#beta span {
    font-size: 30px;
    position: absolute;
    top: 0px;
    right: 20px;
}


/* END TEMPORARY BETA BUTTON */


/* NOTIFICATION BAR */

#notificationbar {
    background-color: #FFEAA8;
    border-bottom: 1px solid #FFC237;
    color: #826200;
    font-size: 11px;
    line-height: 27px;
    text-align: center;
}

#notificationbar img {
    margin-top: -2px;
    vertical-align: middle;
}


/* LIVE STREAM NOTIFICATION BAR */

#livestreamWrapper {
    width: 100%;
    height: 110px;
    background: #444;
    padding-top: 10px;
    background: url('/lay/redesign/stream_notification_bg.png');
    background-position: 42% 95%;
}

#livestreamWrapperInner {
    display: table;
    margin: 0 auto;
    width: auto;
}

#livestreamBarLogo {
    float: left;
    margin-right: 40px;
    margin-top: 12px;
}

#livestreamText {
    float: left;
    color: #FFF;
    padding-top: 20px;
    margin-right: 40px;
}

#livestreamWrapper h2 {
    font-size: 19px;
    /* font-family: Helvetica Neue,Helvetica,Arial,sans-serif; */
}

#livestreamWrapper h1 {
    color: #00AAEE;
    font-size: 30px;
    /* font-family: Helvetica Neue,Helvetica,Arial,sans-serif; */
}

#livestreamWatchNowButton {
    float: left;
    margin-top: 30px;
}

.livestreamCloseBar {
    float: right;
    width: 15px;
    height: 15px;
    margin-top: -87px;
    margin-right: 10px;
    background: url(/lay/redesign/close_button.png);
    cursor: pointer;
}

#liveStreamBWrapper {
    width: 100%;
    height: 160px;
    background: #444;
    background: url('/lay/redesign/streams_bg.jpg');
    text-align: center;
    color: #fff;
}


/* .liveStreamBwide {
	height: 150px;
	width: 100%;
	background: url('/lay/redesign/streams_wide_bg.png');
	} */

.liveStreamBleft {
    float: left;
    height: 160px;
    background: url('/lay/redesign/streams_bg_green.png');
    width: 49.8%;
    margin-left: 0.2%;
}

.liveStreamBleftTitle {
    float: left;
    margin-top: 6em;
    /* margin-left: 4em; */
}

.liveStreamBrightTitle {
    float: right;
    margin-top: 6em;
    margin-right: 4em;
}

.liveLogo {
    float: left;
    margin-left: -5em;
    margin-top: 0.5em;
}

.liveStreamBright {
    float: left;
    height: 160px;
    background: url('/lay/redesign/streams_bg_blue.png');
    width: 49.8%;
    margin-right: 0.2%;
}

.livestreamBText {
    float: left;
    color: #FFF;
    padding-top: 20px;
    margin-right: 40px;
}

#livestreamBWrapper h2 {
    font-size: 1em;
    /* font-family: Helvetica Neue,Helvetica,Arial,sans-serif; */
}

#livestreamBWrapper h1 {
    color: #00AAEE;
    font-size: 30px;
    /* font-family: Helvetica Neue,Helvetica,Arial,sans-serif; */
}

#livestreamBBarLogo {
    float: right;
    margin-right: 6em;
    margin-top: 1.7em;
}

#livestreamBText {
    word-wrap: break-word;
    max-width: 22em;
}

#livestreamBText h1 {
    font-size: 1.5em;
    margin-top: 0.4em;
}

.liveStreamBleft ul {
    text-align: left;
    list-style: none;
    margin-left: 23em;
    margin-top: 1.2em;
}

.liveStreamBleft ul li {
    padding: 0.6em 0;
    font-size: 0.9em;
}

.liveStreamBleft ul li span {
    font-size: 1.15em;
    font-weight: bold;
}

.liveStreamBleft ul li .fa {
    margin-left: -1.4em;
    /* margin-right: 0.5em; */
    position: absolute;
}

.liveStreamBleft ul li a {
    color: #fff;
    text-decoration: none;
}

.liveStreamBright ul {
    text-align: right;
    list-style: none;
    margin-right: 20em;
    margin-top: 1.2em;
}

.liveStreamBright ul li {
    padding: 0.6em 0;
    font-size: 0.9em;
}

.liveStreamBright ul li span {
    font-size: 1.15em;
    font-weight: bold;
    margin-right: 0.7em;
}

.liveStreamBright ul li .fa {
    /* margin-left: -1.4em; */
    /* margin-right: 0.5em; */
    /* position: absolute; */
    vertical-align: middle;
}

.liveStreamBright ul li a {
    color: #fff;
    text-decoration: none;
}

.livestreamBCloseBar {
    position: absolute;
    right: 1em;
    margin-top: 1em;
    cursor: pointer;
}

.livestreamBCloseBar .fa {
    color: #fff;
}


/* END LIVE STREAM NOTIFICATION BAR */


/** keep compatibility with smartphone site */


/* 	.mobileheader {
	display:none;
} */

#slide-menu {
    display: none;
}

.flex-slider-page-container {
    display: none;
}

.selectedTabTitle {
    display: none;
}


/** go to classic and phone buttons */

.viewFullSite {
    display: none;
}

.viewFullSite,
.viewPhoneSite {
    background-color: #ddd;
    color: #444;
    border: none;
    margin: 0;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    font-weight: bold;
}


/* .viewFullSite a, .viewPhoneSite a{
	color:#444;
	font-weight: bold;
	} */

#ad_iphone,
#ad_iphone2,
#ad_mobiletop,
#ad_mobiletopinsidetext,
#ad_smartphbig,
#ad_smartphbig2,
.ad_smartphbig,
#ad_smartphlead2 {
    display: none;
}


/*** video ad plyer *****/

div.ad_video {
    position: relative;
}

div.ad_video .videoButton {
    cursor: pointer;
    z-index: 2;
}

div.ad_video .controlPannel {
    font-family: FontAwesome;
    font-size: 2em;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: 4%;
    padding: 1%;
    width: 90%;
    z-index: 1;
    background: rgba(51, 51, 51, 0.7);
    color: white;
    border-radius: 0.3em;
    /*text-align: center;*/
}

div.ad_video .videoButton:hover,
div.ad_video .videoButton.close:hover {
    color: #0ae;
}

div.ad_video .videoButton.close {
    font-family: FontAwesome;
    font-size: 2em;
    position: absolute;
    top: -1%;
    right: 1%;
    margin-top: 1%;
    color: white;
}

div.ad_video .videoButton.close::after {
    display: inline-block;
    content: "\f05c";
}

div.ad_video .videoButton.play {
    font-size: 0.8em;
    margin-top: 0.15em;
    margin-left: 0.3em;
    float: left;
}

div.ad_video .videoButton.play::after {
    display: inline-block;
    content: "\f04b";
}

div.ad_video .videoButton.play.active::after {
    display: inline-block;
    content: "\f04c";
}

div.ad_video .videoButton.mute {
    float: right;
    margin-right: 0.3em;
}

div.ad_video .videoButton.mute::after {
    display: inline-block;
    content: "\f026";
}

div.ad_video .videoButton.mute.active::after {
    display: inline-block;
    content: "\f028";
}

div.ad_video .counterback {
    /* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
    float: left;
    font-size: 0.45em;
    margin-left: 1em;
    margin-top: 0.6em;
}

div.ad_video.bigVideoAd {
    /* margin-left: 15px; */
    float: left;
}

.external_div_bigVideoAd {
    margin-top: 15px;
    /* margin-bottom: 15px; */
    /* width: 650px; */
    margin-left: 15px;
    /* float: left; */
}


/***** end of video ad player *****/

.footercol ul {
    list-style: none;
    padding-left: 0;
}

.footercol img.footerarrow {
    display: none;
}

.image_norwd {
    display: inline-block;
}

.image_rwd {
    display: none;
}


/** END keep compatibility with smartphone site */

fieldset {
    border: none;
}


/* Cookie warning */

#cookielawwarning {
    position: fixed;
    bottom: 0;
    z-index: 99;
    width: 100%;
}


/* Facebook like box */

#fbnotification {
    border: 2px solid red;
    background-color: #fff;
    color: #000;
    position: fixed;
    bottom: 12px;
    z-index: 99;
    right: 12px;
    padding: 20px;
}

#fbnotification h3 {
    margin-bottom: 12px;
}

#fbnotification_close {
    background-color: transparent;
    font-weight: bold;
    font-size: 12px;
    color: #ddd;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 0px;
}

#facebooknotification {
    border: 2px solid red;
    background-color: #fff;
    color: #000;
    position: fixed;
    bottom: 12px;
    z-index: 99;
    right: 12px;
    padding: 20px;
}

#facebooknotification h3 {
    margin-bottom: 12px;
}

#facebooknotification_close {
    background-color: transparent;
    font-weight: bold;
    font-size: 12px;
    color: #ddd;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 0px;
}


/* Expandable footer */

#ad_exp_footer {
    position: fixed;
    bottom: -3px;
    left: 50%;
    margin-left: -26.25%;
    height: auto;
    width: 1000px;
    overflow: hidden;
}

#ad_exp_footer embed {
    position: absolute;
    bottom: 0px;
}


/* Staff bar */

#staffbar {
    width: 100%;
    /*padding: 1em 0; */
    background: #444;
    color: #FFF;
    font-size: 13px;
    /* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
    /* margin-top: -60px; */
}

#staffbar .center1000 {
    display: table;
}

#staffbar .center1000 a {
    color: #FFF;
    text-decoration: none;
}

#staffbar .center1000 a:hover {
    text-decoration: underline;
}

#staffbar .center1000 div {
    display: inline-block;
}

#staffbar .center1000 div:first-child {
    margin-right: 1em;
    font-size: 1.2em;
}

#staffbar .center1000 div:last-child {
    float: right;
}

#staffbar .center1000 div.stafficons span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1em;
    padding: 1em 0;
}

#staffbar .center1000 div img {
    vertical-align: middle;
    margin-top: -0.5em;
}

#staffbar .center1000 div.stafficons span:last-child {
    margin-right: 0;
}

#staffbar .center1000 div nav ul {
    list-style: none;
    cursor: pointer;
    list-style: none;
}

#staffbar .center1000 div nav ul.nav li {
    padding: 1em;
}

#staffbar .center1000 div nav ul.nav li:hover {
    background: #555;
}

#staffbar .center1000 div nav ul.nav li ul li {
    padding: 0.7em 1em;
    border-bottom: 2px solid #777;
    position: relative;
}

#staffbar .center1000 div nav ul.nav li ul li:hover {
    background: #666;
}

#staffbar .center1000 div nav ul.nav li ul {
    display: none;
    position: absolute;
    z-index: 99;
    margin-left: -1em;
    margin-top: 0.5em;
    background: #555;
    min-width: 150px;
}

#staffbar .center1000 div nav ul.nav li:hover>ul {
    display: block;
}

#staffbar .center1000 div nav ul.nav li ul li:hover>ul.submenu {
    display: table-cell;
}

#staffbar .center1000 div nav ul.nav li ul li a {
    display: table-cell;
    position: relative;
    text-decoration: none;
    color: #FFF;
}

#staffbar .center1000 div nav ul.nav li ul li a:hover {
    text-decoration: underline;
}

#staffbar .center1000 div nav ul.nav li ul li ul.submenu {
    display: none;
    position: absolute;
    right: -150px;
    top: -7px;
    background: #333;
}

#staffbar .center1000 div nav ul.nav li ul li ul.submenu li {
    border-bottom: 2px solid #404040;
}

#staffbar .center1000 div nav ul.nav li ul li ul.submenu li:hover {
    background: #444;
}

#re_loggedinbox .profile_actions_wrapper p:first-child {
    font-size: 12px;
}

#re_loggedinbox ul li.logindisplayname {
    font-size: 14px;
    font-weight: bold;
}


/*#re_loggedinbox ul li ul {
	float: inherit;
	}*/

#eventad {
    /* position: absolute;
		top: -40px;
		left: 450px;
		height: 127px;
		padding-top:0px;
		overflow:hidden; */
    position: absolute;
    top: 0;
    right: -230px;
    transition: .1s;
}

#eventad img {
    /* margin-left:30px; */
    max-height: 110px;
    border-left: 1px solid #caca;
    border-right: 1px solid #cacaca;
    transition: 0.1s;
}

.eventAdShadow {
    border-bottom: 1px solid #caca;
}

@media only screen and (max-width: 1100px) {
    #eventad {
        display: none;
    }
}


/************ NOTIFICATIONS ****************/

.profile_actions {
    margin-top: 2.5em;
}

.notificationIconsWrapper {
    display: inline-block;
    /* position: absolute; */
    bottom: 0px;
}

.baskeLoggedOut {
    display: inline-block;
    position: absolute;
    left: 54px;
    top: 45px;
    font-size: 1.3em;
    font-weight: bold;
}

.logoutWrapper {
    display: inline-block;
    position: absolute;
    bottom: -2px;
    left: 53px;
}

.steam-message {
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 10px;
    z-index: 99;
}

.steam-fail {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
    font-weight: bold;
    position: absolute;
    left: 60%;
    display: inline;
    font-size: 1em;
}

.steam-success {
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: white;
    font-weight: bold;
    position: absolute;
    left: 60%;
    display: inline;
    font-size: 1em;
}

.logoutWrapper.left {
    left: 25px;
}

a.seePMsButton,
span.seeNotificationsButton {
    cursor: pointer;
    position: relative;
}

a.seePMsButton,
a.seePMsButton:hover,
a.seePMsButton:active {
    text-decoration: none;
}

a.seePMsButton::before {
    display: inline-block;
    content: "\0020";
    background-image: url("mailbox_dark.jpg");
    bottom: 0px;
    vertical-align: bottom;
    width: 25px;
    height: 16px;
}

span.seeNotificationsButton::before {
    display: inline-block;
    content: "\0020";
    background-image: url("bell.jpg");
    left: 0px;
    margin-left: 5px;
    bottom: -3px;
    vertical-align: bottom;
    width: 16px;
    height: 18px;
}

span.notifNumber {
    padding: 0.3em 0.55em;
    background: #FF0000;
    font-size: 11px;
    font-weight: bold;
    color: #FFF;
    right: 4px;
    margin-left: 13px;
    top: 3px;
    position: absolute;
    border-radius: 1em;
}

span.notifNumber.empty {
    display: none;
}

span.logoutlabel {
    display: inline-block;
    vertical-align: bottom;
}

span.logoutlabel::before {
    display: inline-block;
    content: "\0020";
    background-image: url("logout.jpg");
    vertical-align: bottom;
    width: 22px;
    height: 20px;
    margin-left: 5px;
}

.notificationIconsWrapper.rwd {
    /* display:none; */
}

.notification-basket.rwd {
    display: none;
}

.notification-basket-logout.rwd {
    display: none
}

.notification-basket-logout {
    position: absolute;
    right: 14em;
    bottom: 8px;
    font-weight: bold;
}

.basketIcon {
    display: inline-block;
    position: absolute;
    left: 59%;
    top: 45px;
    font-size: 1.3em;
    font-weight: bold;
}

#notiPopupWrapper {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 6.2em;
    padding: 1em;
    background: #DDD;
    z-index: 99;
}

.notiheader {
    margin-bottom: 0.5em;
}

.notifooter {
    margin-top: 0.5em;
    text-align: center;
}

.notiheader a,
.notifooter a {
    color: #0ae;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

#notiPopupWrapper .separator {
    color: #0ae;
}


/* Incoming notification box */

#incomingNotificationBox {
    display: block;
    background-color: #fff;
    color: #000;
    position: fixed;
    bottom: 12px;
    z-index: 99;
    left: 12px;
    /*border: 2px solid red;
	padding: 20px;*/
}

#incomingNotificationBox li:last-child {
    border-bottom: 0;
}

#incomingNotificationBox_close {
    background-color: transparent;
    font-weight: bold;
    font-size: 12px;
    color: #ddd;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 0px;
}

.othersmenu {
    display: block;
}

#notiPopupWrapper ul.notifpopup {
    /*height: calc(79px*6);*/
    max-height: 474px;
    overflow: hidden;
}

#notiPopupWrapper ul.notifpopup.grVerticalScroll:hover {
    overflow-y: scroll;
}

ul.notifpopup a,
ul.notifpopup a:hover {
    text-decoration: none;
}

ul.notifpopup>li {
    display: inline;
}

ul.notifpopup>li:first-child {
    margin-right: 1em;
}

.notificationIconsWrapper.open::after {
    display: block;
    content: "\0020";
    background-image: url("notif_arrow_top.png");
    background-position-y: -15px;
    position: absolute;
    height: 15px;
    width: 30px;
    left: 0;
    margin-left: 25px;
    z-index: 100;
}

.notifpopup .notifwrapper {
    background: #aaa;
    padding: 0.5em 1em;
    width: 380px;
    max-width: 96%;
    display: block;
    border-bottom: 2px solid #ddd;
    position: relative;
}

.notifpopup .notifwrapper.viewed {
    background: #ccc;
}

.notifpopup .notifwrapper:hover {
    background: #bbb;
}

.notifpopup .closeNotification {
    position: absolute;
    top: 0.3em;
    right: 0.3em;
    padding: 0.3em;
    cursor: pointer;
    font-family: FontAwesome;
    line-height: 1em;
}

.notifpopup .closeNotification::after {
    content: "\f00d";
    color: #ddd;
    font-size: large;
}


/*.notifpopup ul::after {
	display: inline-block;
	background-image: url("notifications_arrow_right.png");
    width: 20px;
    height: 50px;
    content: "\0020";
    vertical-align: middle;
    position:absolute;
    right: 0.3em;
    bottom: 0.3em;
    }*/

.notifwrapper ul::before {
    display: inline-block;
    width: 50px;
    height: 50px;
    content: "\0020";
    background-color: #444;
    margin: -3px;
    vertical-align: middle;
    box-sizing: border-box;
}

.notifwrapper ul.friendreq::before {
    background-image: url("notif_friendreq.png");
}

.notifwrapper ul.groupreq::before {
    background-image: url("notif_groupreq.png");
}

.notifwrapper ul.lfgnoti::before {
    background-image: url("controller_50x50_v2.png");
}

.notifwrapper ul.pm::before {
    background-image: url("notif_pm.png");
}

.notifwrapper ul.tvwatched::before {
    background-image: url("GRTV_Grey_50x50_v03.jpg");
}

.notifwrapper ul.wall::before {
    background-image: url("notif_wall.png");
}

.notifwrapper ul.watched::before {
    background-image: url("notif_watched.png");
}

.notifwrapper ul.liked {
    font-family: FontAwesome;
    border: none;
    outline: none;
    color: #ccc;
}

.notifwrapper ul.liked::before {
    content: "\f087";
    font-size: 40px;
    text-align: center;
    padding-top: 7px;
}

.notiIcon {
    width: 50px;
    height: 50px;
    display: inline-block;
    background: #444;
    margin: -3px;
    vertical-align: middle;
}

.notiAvatar {
    width: 50px;
    height: 50px;
    display: inline-block;
    background: #FFF;
    vertical-align: middle;
}

.notiBody {
    display: inline-block;
    margin: -2px;
    vertical-align: middle;
    line-height: 1.5em;
}

.notiArrow {
    width: 20px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    float: right;
}

.notiBody .displayName {
    font-weight: bold;
    width: 100%;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notiBody .statement {
    max-width: 240px;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notiBody .date {
    font-size: 11px;
    width: 100%;
    color: #000;
    font-style: normal;
    margin: 0;
}

.rfloat {
    float: right;
}

.grScrollDiv {
    cursor: pointer;
}

.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.margintop1em {
    margin-top: 1em !important;
}

.menu-active .rwdsubmenu {
    background-color: #555 !important;
}

.mleft_1em {
    margin-left: 1em
}

.tournamentForm {
    position: fixed;
}

.highlight {
    transition: background-color 0.5s;
    width: 22%;
}

.highlight:hover {
    background-color: #333333;
    border-radius: 5px;
}

@media screen and (max-height: 810px) {
    .tournamentForm {
        position: inherit;
    }
}

.captcha {
    width: fit-content;
    margin: 0 0 20px auto;
}

.reCaptchaLeft {
    width: fit-content;
    margin-top: 20px;
}

.main.text_view article {
    /* display: table; */
    display: block;
}

.main.text_view .related-product article {
    display: block;
}


/* Animations */

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.fast {
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}