a { color: white; text-decoration: none; }
a:hover { text-decoration: none; }
a:visited { text-decoration: none; }
body { font-size: 16px; font-weight: normal; height: 100%; margin: 0 auto; max-width: 1800px; min-height: 200px; width: 100%; }
html { height: 100%; margin: 0; }
input { line-height: 24px; padding: 5px; }
/* main { padding: 0; max-width: 768px; } */
table { margin: 0 auto; text-align: center; }
td { padding: 5px; }

div.message:before { line-height: 0px; font-size: 20px; height: 12px; width: 12px; border-radius: 15px; text-align: center; vertical-align: middle; display: inline-block; position: relative; left: -11px; background-color: #FFF; padding: 12px 14px 12px 10px; content: "i"; color: #a0d3e8; }
div.message.error { background-color: #C3232D; color: #FFF; }
div.message.error:before { padding: 11px 16px 14px 7px; color: #C3232D; content: "x"; }
div.message.hidden { height: 0; }
div.message { text-align: center; cursor: pointer; display: block; font-weight: normal; padding: 0 1.5rem 0 1.5rem; transition: height 300ms ease-out 0s; background-color: #a0d3e8; color: #626262; top: 15px; right: 15px; z-index: 999; overflow: hidden; height: 50px; line-height: 2.5em; border-radius: 5px; }

#clock1 { position: relative; width: 600px; height: 600px; margin: 20px auto 0 auto; background: url(/img/clockface.jpg); list-style: none; }
#eliminated { background: black; border: 5px solid black; color: red; font-size: 48px; padding: 5px; border-radius: 10px; margin: 100px auto 0 auto; width: 300px; }
#first { background: #37ae1f; background: linear-gradient(to bottom, #21a455 0%,#119f45 51%,#018f35 100%); color: #FFF; padding: 2px; border: 1px solid white; border-radius: 0; }
/* #gamewrapper { background: #9AB; border-radius: 30px; position: relative; margin: 20px auto; padding-top: 10px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px; } */
#homepage { text-align: center; }
#Iguessright { color: green; background: #FFF; padding: 2px; border-radius: 10px; }
#Iguesswrong { color: red; background: #FFF; padding: 2px; border-radius: 10px; }
#info { background: linear-gradient(to bottom, #21a455 0%,#119f45 51%,#018f35 100%); border: 1px solid white; border-radius: 0px; color: white; line-height: 36px; margin: 2px 0 0 0; min-height: 40px; padding: 10px; width: 100%; }
#info2 { background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); border: 1px solid white; border-radius: 0px; color: white; line-height: 36px; margin: 2px 0 0 0; min-height: 40px; padding: 10px; width: 100%; }
#Iwin { position: fixed; top: 100px; left: 0%; height:100%; width:100%; display: none; }
#navlist2 { border-bottom: 0px; list-style: none; list-style-type: none; margin-top: 10px; margin-left: 0px; margin-bottom: 10px; padding-top: 5px; padding-left: 0px; }
#navlist2 li { background-color: #eceff5; background-position: 0em; border-left: 1px solid #0e0e0e; border-top: 1px solid #0e0e0e; border-right: 2px solid #0e0e0e; border-bottom: 2px  solid #0e0e0e; display: inline-block; float: left; list-style: none; margin: 5px; padding: 20px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#number { background: linear-gradient(to bottom, #3d75db 0%,#2862cd 51%,#154db4 100%); border: 1px solid white; border-radius: 0; color: white; line-height: 28px; margin: 2px 0 0 0; padding: 10px; width: 100%; }
#outer1 { color: white; font-size: 40px; padding: 35px; width: 200px; height: 200px; background: #f06d06; background: linear-gradient(to bottom, #29a903 0%,#228f02 44%,#196d00 100%); border-radius: 50%; position: relative; margin: 0px auto; box-shadow: 0 0 0 01px hsl(200, 100%, 0%), 0 0 0 06px hsl(220, 100%, 50%); }
#overcategory, #spieler, #einsatz { color: black; padding: 5px; }
#overview { background: linear-gradient(to bottom, #1e5799 0%, #207cca 100%); border: 1px solid #154db4; color: white; font-size: 16px; padding: 0px; border-radius: 0px; margin: 0; text-align: left; width: 100%; }
#playagain { text-align: center; }
#ready { background: url(/img/GetReady-small.png) no-repeat top left; border-radius: 50%; margin: 0px auto; position: relative; width: 240px; height: 240px; }
#reload { color: red; border-radius: 0; font-size: 24px; }
#rematch { text-align: center; }
#Remis { position: fixed; top: 100px; left: 0%; height:100%; width:100%; display: none; }
#rules { border: 1px solid white; border-radius: 0px; color: white; margin: 0; padding: 5px; text-align: left; }
#score { color: blue; background: #FFF; padding: 2px; border-radius: 10px; }
#second { background: #FFF; background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); color: white; padding: 2px; border: 1px solid white; border-radius: 0; }
#tables { background: white; color: green; border-radius: 10px; }
#text { border-radius: 0; background: white; color: red; padding: 5px; text-align: center; }
#update { color: green; background: #FFF; padding: 2px; border-radius: 0px; }
#Verlassen { color: red; background: #FFF; padding: 2px; border-radius: 0px; }
#wait { background: #FFF; border-radius: 0; color: green; font-size: 20px; margin: 0; padding: 10px; text-align: center; }
#Weloose { color: red; background: #FFF; margin-bottom: 20px; padding: 2px; }
#wrapper { text-align: center; margin: 0 auto; max-width: 1800px; }
#youguessright { color: red; background: #FFF; padding: 2px; border-radius: 10px; }
#youguesswrong { color: green; background: #FFF; padding: 2px; border-radius: 10px; }
#youwin { background: linear-gradient(to bottom, #2903a9 0%,#22028f 44%,#19006d 100%); border: 3px solid black; color: white; font-size: 96px; padding: 15px; border-radius: 10px; margin: 100px auto 0 auto; width: 300px; }

.ani2 { background: linear-gradient(to bottom, #1e5799 0%, #207cca 100%); border-radius: 0; border: 1px solid white; color: white; float: left; padding: 10px; text-align: left; width: 100%; }
.ani_rules { padding: 5px; text-align: left; }
.ani_title { border: 1px solid black; margin: 0 auto; }
.announce_tourney { background: linear-gradient(to bottom, #29a903 0%,#228f02 44%,#196d00 100%); border: 1px solid #FFF; border-radius: 0; color: white; margin-bottom: 20px; padding: 10px; }
.bg_01 { background: #FFF url(/img/bg_01.png) no-repeat top left; background-size: cover; }
.bg_02 { background: #FFF url(/img/bg_02.png) no-repeat top left; background-size: cover; }
.bg_03 { background: #FFF url(/img/bg_03.png) no-repeat top left; background-size: cover; }
.bg_04 { background: #FFF url(/img/bg_04.png) no-repeat top left; background-size: cover; }
.bg_05 { background: #FFF url(/img/bg_05.png) no-repeat top left; background-size: cover; }
.bg_06 { background: #FFF url(/img/bg_06.png) no-repeat top left; background-size: cover; }
.bg_07 { background: #FFF url(/img/bg_07.png) no-repeat top left; background-size: cover; }
.bg_08 { background: #FFF url(/img/bg_08.png) no-repeat top left; background-size: cover; }
.bg_09 { background: #FFF url(/img/bg_09.png) no-repeat top left; background-size: cover; }
.bg_10 { background: #FFF url(/img/bg_10.png) no-repeat top left; background-size: cover; }
.bg_3 { background: #FFF url(/img/bg3.jpg) repeat top left; background-size: cover; }
.bg_369 { background: #369; }
.bg_3d_plain { background: #FFF url(/img/3D-Plain-Backgrounds1.jpg) no-repeat top left; background-size: cover; }
.bg_3d_water{ background: #FFF url(/img/Water-3D-Plan-Background1.jpg) no-repeat top left; background-size: cover; }
.bg_4 { background: #FFF url(/img/bg4.jpg) repeat top left; background-size: cover; }
.bg_black { background: black; }
.bg_black_ball	{ background: url(/img/black_ball-small.png) no-repeat top left; background-size: cover; }
.bg_blue_01 { background: #FFF url(/img/bg_blue_01.jpg) no-repeat top left; background-size: cover; }
.bg_blue_ball		{ background: url(/img/blue_ball-small.png); background-size: cover; }
.bg_blue { background: #FFF url(/img/bg_blue.jpg) no-repeat top left; background-size: cover; }
.bg_blue  { background: blue; }
.bg_blueish { background: linear-gradient(to bottom, #3d75db 0%,#2862cd 51%,#154db4 100%); }
.bg_brown_ball		{ background: url(/img/brown_ball-small.png) no-repeat top left; background-size: cover; }
.bg_brown { background: saddlebrown; }
.bg_cover { background-size: cover; }
.bg_dark { background-color: #222; }
.bg_dark_blue { background: #FFF url(/img/bg_dark_blue.png) no-repeat top left; background-size: cover; }
.bg_dark_brown { background: #FFF url(/img/Dark-Brown-Background1.jpg) no-repeat top left; background-size: cover; }
.bg_fabric { background: #FFF url(/img/Plan-Fabric-Texture-Idea1.jpg) no-repeat top left; background-size: cover; }
.bg_green_ball	{ background: url(/img/green_ball-small.png) no-repeat top left; background-size: cover; }
.bg_green { background: green; }
.bg_greenish { background: linear-gradient(to bottom, #21a455 0%,#119f45 51%,#018f35 100%); } /* greenish */
.bg_grey_ball		{ background: #CCC; }
.bg_grey  { background: #CCC; }
.bg_light { background-color: #DDD; }
.bg_light_black { background: #FFF url(/img/Light-Black-Background.jpg) no-repeat top left; background-size: cover; }
.bg_lightgreen_ball	{ background: url(/img/green_ball-small.png) no-repeat top left; background-size: cover; }
.bg_lightgreen { background: lightgreen; }
.bg_lined { background: #FFF url(/img/Small-Lined-Blue-Background.jpg) no-repeat top left; background-size: cover; }
.bg_orange_ball	{ background: url(/img/orange_ball-small.png) no-repeat top left; background-size: cover; }
.bg_orange { background: orange; }
.bg_plain { background: #FFF url(/img/Plain-Images.jpg) no-repeat top left; background-size: cover; }
.bg_plain_blue { background: #FFF url(/img/Plain-Blue-Background4.jpg) no-repeat top left; background-size: cover; }
.bg_plain_brown { background: #FFF url(/img/Plain-Brown-Background2.jpg) no-repeat top left; background-size: cover; }
.bg_plain_green { background: #FFF url(/img/Plain-Green-Wallpaper.jpg) no-repeat top left; background-size: cover; }
.bg_plain_plaster { background: #FFF url(/img/Plain-Plaster-Texture1.jpg) no-repeat top left; background-size: cover; }
.bg_plain_red { background: #FFF url(/img/Plain-Red-Textures2.jpg) no-repeat top left; background-size: cover; }
.bg_plain_sky { background: #FFF url(/img/Plain-Sky-Blue-Background2.jpg) no-repeat top left; background-size: cover; }
.bg_red_ball		{ background: url(/img/red_ball-small.png) no-repeat top left; background-size: cover; }
.bg_red { background: red; }
.bg_red { background: red; } .bg_start0 { background: #FFF url(/img/bg_start0-2.jpg) repeat top left; background-size: cover; }
.bg_transparent { background: transparent; }
.bg_watercolor { background: #FFF url(/img/Plain-Watercolor-Photo-Background.jpg) no-repeat top left; background-size: cover; }
.bg_white { background: white; }
.bg_white_grey { background: #FFF url(/img/White-and-Grey-Plain-Background.jpg) no-repeat top left; background-size: cover; }
.bg_yeah2 { background: #FFF url(/img/yeah2.png) repeat top left; background-size: cover; }
.bg_yeah3 { background: #FFF url(/img/yeah3.png) repeat top left; background-size: cover; }
.bg_yellow { background: yellow; }
.bg_yellow_ball		{ background: url(/img/yellow_ball-small.png) no-repeat top left; background-size: cover; }
.bg_yellow_orange { background: #FFF url(/img/bg_yellow_orange.jpg) no-repeat top left; background-size: cover; }
.big20 { font-size: 32px; padding: 20px; }
.big_block { border: 1px solid #369; float: left; font-weight: normal; list-style-type: none; padding: 15px; width: 40px; }
.bilderliste { }
.bilderliste li a { color: #000; text-decoration: none; }
.bilderliste li { display: inline-block; float: left; font-size: 16px; height: 40px; list-style: none; margin: 5px; padding-top: 2px; text-align: center; width: 100px; }
.bilderliste { list-style-type: none; margin: 0; padding: 0; }
.black, .black h3, a.black { color: black; }
.blackbox { color: white; background: black; width: 180px; padding: 5px; }
.block320 { margin: 0 auto; width: 320px; }
.blocks { min-height: 350px; border: 0px dotted; margin: 5px 5px 20px 5px; padding: 0 10px 0 10px; width: 100%; }
.blocks_tourney { float: left; min-height: 100px; margin: 5px; padding: 0 10px 0 10px; width: 100%; }
.blue, .blue h3 { color: blue; }
.blueish, .bluish h3 { color: #337ab7; }
.bo { border: 1px solid; }
.bold { font-weight: bold; }
.border { border: 1px solid black; }
.border_white { border: 1px solid white; }
.border_black { border: 1px solid black; }
.border_left_right { border-left: 1px solid yellow; border-right: 1px solid yellow; }
.border_yellow_bottom { border-bottom: 2px solid yellow; }
.padding_bottom { padding-bottom: 2px; }
.bold { font-weight: bold; }
.box { display: flex; flex-flow: row; height: 100%; justify-content: center; }
.box .boxrow { flex: 0 1 auto; }
.box .boxrow.boxmiddle { flex: 50%; }
.box .boxrow.boxleft   { flex: 50%; }
.box .boxrow.boxright  { flex: 50%; }
.btn { border-radius: 0; }
.btn-link, .btn-link:hover, .btn-link:visited { text-decoration: none; }
.c777 { color: #777; }
.carousel-caption p { background: #FFF; border-radius: 5px; color: black; font-size: 16px; padding: 5px; }
.cb { clear: both; }
.center { margin: 0 auto; text-align: center; }
.choose_block { margin: 8px 0; border: 1px dotted; }
.cl { clear: left; }
.clock { background: #ffff00; border: 2px solid #000; color: black; padding: 2px 3px 3px 3px; width: 100px; border-radius: 30px; font-size: 24px; text-align: center; margin: 5px auto; }
.col-md-12 { padding: 0; }
.console_off { color: red; }
.console_on { color: green; }
.container-fluid { padding: 0; }
.coolblue { color: #3692e7; }
.cr { clear: right; }
.distance { background: green; border: 1px solid white; color: white; margin: 2px; }
.distance2 { background: #235CC3; border: 1px solid white; color: white; margin: 2px; }
.dn { display: none; }
.drittel { background: #EEE; width: 100%; }
.eloup { color: white; font-size: 32px; }
.elodown { color: red; font-size: 32px; }
.f14 { font-size: 14px; }
.f16 { font-size: 16px; }
.f18 { font-size: 18px; }
.f20 { font-size: 20px; }
.f22 { font-size: 22px; }
.f24 { font-size: 24px; }
.f32 { font-size: 32px; }
.facebox_link { background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); background: linear-gradient(to bottom, #1e5799 0%, #207cca 100%); border: 1px solid white; color: white; font-size: 2vw; line-height: 36px; margin-bottom: 10px; padding: 10px 20px; width: 100%; }
.fixed_height { height: 105px; }
.fl { float: left; }
.flex-container { display: flex; flex-direction: row; flex-wrap: wrap; max-width: 1400px; margin: 0 auto; }
.flex-item-left { flex: 20%; flex-justify: right; order: 1; }
.flex-item-middle { flex: 60%; flex-justify: center; order: 0; }
.flex-item-right { flex: 20%; justify-content: left; order: 2; }
.form .error-message { display: block; padding: 0.375rem 0.5625rem 0.5625rem; margin-top: -1px; margin-bottom: 1rem; font-size: 0.75rem; font-weight: normal; font-style: italic; color: rgba(0, 0, 0, 0.54); }
.fr { float: right; }
.friendslist li { background-color: #eceff5; background-image: none; opacity: 1; border: 1px solid; float: left; font-size: 14px; list-style: none; margin: 10px; height: 96px; padding: 10px; width: 200px; }
.friendslist { list-style-type: none; margin: 0; padding: 0; text-align: center; }
.friendslist ul li a { color: black; padding: 10px; text-decoration: none; }
.friendslist ul { margin: 0 auto; text-align: center; }
.fs10 { font-size: 10px; }
.fs12 { font-size: 12px; }
.fs14 { font-size: 14px; }
.fs16 { font-size: 16px; }
.fs18 { font-size: 18px; }
.fs20 { font-size: 20px; }
.fs24 { font-size: 24px; }
.fs32 { font-size: 32px; }
.get_block { border: 0; float: left; font-weight: bold; list-style-type: none; padding: 5px; width: 20px; color: black; background: white; }
.get_ready { width: 300px; height: 50px; background: #f06d06; border-radius: 10px; position: relative; margin: 20px auto; box-shadow: 0 0 0 05px hsl(200, 100%, 50%), 0 0 0 10px hsl(220, 100%, 50%), 0 0 0 15px hsl(240, 100%, 50%); }
.green2, .green2 h3  { color: #5cb85c; }
.green, .green h3 { color: green; }
.guess_right { background: green; color: white; font-size: 20px; }
.guess_wrong { background: red; color: white; font-size: 20px; }
.h20 { height: 20px; }
.h30 { height: 30px; }
.h40 { height: 40px; }
.h50 { height: 50px; }
.h80 { height: 80px; }
.h100 { height: 100px; }
.h200 { height: 200px; }
.h300 { height: 300px; }
.hide { visibility: hidden; }
.ib { display: inline-block; }
.item { color: black; }
.left { text-align: left; }
.lh10 { line-height: 10px; }
.lh24 { line-height: 24px; }
.lh30 { line-height: 30px; }
.lh40 { line-height: 40px; }
.lh50 { line-height: 50px; }
.like { color: #FFF; }
.liketext a { background: url('/img/smile.png') no-repeat transparent; color: #0000ff; font-size: 16px; padding-top: 10px; padding-left: 35px; text-decoration: none; }
.liketext { color: #000; font-size: 16px; margin: 0 0 5px 0; padding: 20px 0 12px 0px; }
.link_block { padding: 5px; }
.logindiv a { color: black; }
.loginimage { margin: 0 auto; text-align: center; }
.loginlink { font-size: 16px; }
.loginpicture img { width: 75px; height: 75px; }
.logintext { font-size: 16px; }
.m5 { margin: 5px;}
.m10 { margin: 10px;}
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mh80 { min-height: 80px; }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.mt5 { margin-top: 5px; }
.mt-5 { margin-top: -5px; }
.mt10 { margin-top: 10px; }
.mt14 { margin-top: 14px; }
.mt15 { margin-top: 15px; }
.mt-15 { margin-top: -15px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.music_off { color: red; }
.music_on { color: green; }
.mw400 { max-width: 400px; }
.mw450 { max-width: 450px; }
.mw500 { max-width: 500px; }
.mw600 { max-width: 600px; }
.mw750 { max-width: 750px; }
.mw720 { max-width: 720px; border: 0px solid #369; margin: 0 auto; }
.mydropdowncss:hover .dropdown-menu { display: block; margin-top: 0; }
.nav_console { border: 1px solid #af2222; }
.not_yet_tourney { background: blue; border: 1px solid #FFF; border-radius: 0; color: white; font-size: 16px; margin-top: 20px; padding: 10px; }
.orange, .orange h3 { color: orange; }
.overflow { overflow: auto; }
.p0 { padding: 0; }
.p2 { padding: 2px; }
.p3 { padding: 3px; }
.p5 { padding: 5px; }
.p10 { padding: 10px; }
.p10301030 { padding: 10px 30px 10px 30px; }
.p15 { padding: 15px; }
.p20 { padding: 20px; }
.p30 { padding: 30px; }
.pictures_img_block { line-height: 24px; padding-bottom: 5px; width: auto; }
.pictures_text_block { color: white; float: left; font-size: 20px; line-height: 24px; margin-top: 10px; padding-left: 10px; }
.pl10 { padding-left: 10px; }
.pl30 { padding-left: 30px; }
.player_img { float: left; border-radius: 5px; }
.redish { background: #FFF; color: #af2222; padding: 5px; }
.red, .red h3 { color: red; }
.right { text-align: right; }
.rounded5  { border-radius:  5px; }
.rounded10 { border-radius: 10px; }
.rounded15 { border-radius: 15px; }
.rounded20 { border-radius: 20px; }
.rounded50 { border-radius: 50px; }
.row { margin-left: 0; margin-right: 0; }
.show { visibility: show; }
.show_facebox { font-size: 3vw; margin: 0 0 15px 0; padding: 5px; color: #FFF; text-align: center; font-weight: normal; }
.show_facebox{ font-size: calc(16px + 1.5vw); }
.sidebar_weg { padding-left: 240px; }
.site-title { background:transparent; }
.sm4box { width: auto; height: 45px; }
.sounds_off { color: red; }
.sounds_on { color: green; }
/* .spieler1, .spieler2, .spieler3, .spieler4, .spieler5, .spieler6 { border-radius: 0; -webkit-border-radius: 0; } */
.subtitle { font-size: 3vw; }
.title { text-align: center; }
.update_elements { background: rgba(255,255,255,0.8) url(/img/LoadingArrows.gif) 90% 50% no-repeat; z-index: 1000; }
.userlist { background: transparent; list-style-type: none; margin: 0; padding: 0; text-align: center; }
.userlist li { background-color: white; background-image: none; border: 1px solid #ff9900; float: left; font-size: 16px; list-style: none; margin: 3px; height: 150px; padding: 10px; width: 100px; }
.userlist ul li a { padding: 10px; text-decoration: none; }
.userlist ul { margin: 0 auto; text-align: center; }
.w100p { width: 100%; }
.w100 { width: 100px; }
.w10p { width: 10%; }
.w11p { width: 11%; }
.w12p { width: 12%; }
.w130 { width: 130px; }
.w14p { width: 14%; }
.w150 { width: 150px; }
.w15p { width: 15%; }
.w16p { width: 16%; }
.w18p { width: 18%; }
.w19p { width: 19%; }
.w20p { width: 20%; }
.w24p { width: 24%; }
.w25p { width: 25%; }
.w28p { width: 28%; }
.w30p { width: 30%; }
.w33p { width: 33%; }
.w35p { width: 35%; }
.w40p { width: 40%; }
.w42p { width: 42%; }
.w200 { width: 200px; }
.w250 { width: 250px; border: 0px solid; }
.w300 { width: 300px; border: 0px solid; }
.w30 { width: 30px; }
.w30p { width: 30%; }
.w320 { width: 320px; border: 0px solid; }
.w3 { float: left; width: 100%; }
.w400 { width: 400px; }
.w40 { width: 40px; }
.w40p { width: 40%; }
.w48p { width: 48%; }
.w49p { width: 49%; }
.w500 { width: 500px; }
.w50p { width: 50%; }
.w56p { width: 56%; }
.w60 { width: 60px; }
.w600 { width: 600px; }
.w60p { width: 60%; }
.w70 { width: 70px; }
.w70p { width: 70%; }
.w75p { width: 75%; }
.w77p { width: 77%; }
.w720 { width: 720px; border: 0px solid; margin: 0 auto; }
.w80 { width: 80px; }
.w80p { width: 80%; }
.w84p { width: 84%; }
.w90p { width: 90%; }
.w90 { width: 90px; }
.w98 { width: 98px; }
.w960 { width: 960px; border: 0px solid; margin: 0 auto; }
/* .watch { flex: 50%; } */
/* .watching { display: flex; } */
.white, .white h3, a.white { color: #FFF; }
.yeah { background: linear-gradient(to bottom, #3d75db 0%,#2862cd 51%,#154db4 100%); background-color: primary; border: 1px solid white; color: white; line-height: 36px; padding: 5px; }
.yeah_greenish { background: linear-gradient(to bottom, #21a455 0%,#119f45 51%,#018f35 100%); background-color: primary; border: 1px solid white; color: white; line-height: 36px; padding: 5px; }
.yellow, .yellow h3 { color: yellow; }

@font-face { font-family: 'Balloon'; src: url('../fonts/Comic_Balloon.ttf'); }
/*  20 em =  320 px */
@media (min-width: 20em) { body { max-width:  384px; } h1.title { color: #FFF; font-size: 10px; margin: 20px auto; } h2.subtitle { font-size: 10px; padding: 20px; } .blocks { min-height: 320px; } .blocks_tourney { min-height: 100px; } .p30 { padding: 5px; } .w100 { width: 20%; } }

/*  24 em =  384 px */
@media (min-width: 24em) { body { max-width:  576px; } h1.title { color: #00F; font-size: 20px; margin: 20px auto; } h2.subtitle { font-size: 20px; padding: 20px; } .blocks { min-height: 320px; } .blocks_tourney { min-height: 100px; } .p30 { padding: 10px; } .w100 { width: 25%; } }

/*  36 em =  576 px */
@media (min-width: 36em) { body { max-width:  768px; } h1.title { color: #00F; font-size: 20px; margin: 20px auto; } h2.subtitle { font-size: 20px; padding: 20px; } .blocks { min-height: 320px; } .blocks_tourney { min-height: 100px; } .drittel { width: 48%; } .p30 { padding: 10px; } .w100 { width: 25%; } }

/*  48 em =  768 px */
@media (min-width: 48em) { body { max-width:  880px; } h1.title { color: #0F0; font-size: 30px; margin: 20px auto; } h2.subtitle { font-size: 30px; padding: 20px; } .blocks { min-height: 330px; } .blocks_tourney { min-height: 100px; width: 50%; } .blocks_tourney { min-height: 450px; } .p30 { padding: 15px; } .w100 { width: 25%; } 	.logintext { font-size: 20px; } .loginlink { font-size: 20px; } }

/*  55 em =  880 px */
@media (min-width: 55em) { body { max-width:  960px; } h1.title { color: #0FF; font-size: 40px; margin: 20px auto; } h2.subtitle { font-size: 40px; padding: 20px; } .blocks { min-height: 320px; } .blocks_tourney { min-height: 100px; width: 50%; } .p30 { padding: 20px; } .w100 { width: 30%; } }

/*  60 em =  960 px */
@media (min-width: 60em) { body { max-width: 1280px; } h1.title { color: #F00; font-size: 50px; margin: 20px auto; } h2.subtitle { font-size: 50px; padding: 20px; } .blocks { min-height: 320px; } .blocks_tourney { min-height: 100px; width: 50%; } .p30 { padding: 25px; } .w100 { width: 40%; } }

/*  80 em = 1280 px */
@media (min-width: 80em) { body { max-width: 1800px; } h1.title { color: #F0F; font-size: 60px; margin: 20px auto; } h2.subtitle { font-size: 60px; padding: 20px; } .blocks { min-height: 320px; } .blocks_tourney { min-height: 100px; width: 33%; } .p30 { padding: 30px; } .w100 { width: 50%; } }

/* 120 em = 1920 px */

/*  20 em =  320 px */
@media (max-width: 20em) { body { max-width:  320px; } }
/*  24 em =  384 px */
@media (max-width: 24em) { body { max-width:  384px; } }
/*  36 em =  576 px */
@media (max-width: 36em) { body { max-width:  576px; } }
/*  48 em =  768 px */
@media (max-width: 48em) { body { max-width:  768px; } }
/*  55 em =  880 px */
@media (max-width: 55em) { body { max-width:  880px; } }
/*  60 em =  960 px */
@media (max-width: 60em) { body { max-width:  960px; } }
/*  80 em = 1280 px */
@media (max-width: 80em) { body { max-width: 1280px; } }

@media (min-width: 601px) {.w3{ width: 33.33%; }}

@media screen and (max-width: 960px) {
	.flex-container { flex-direction: column; }
	.flex-item-left { flex: 100%; }
	.flex-item-middle { flex: 100%; }
	.flex-item-right { flex: 100%; }
}
@media screen and (max-width: 480px) {
	.flex-container { flex-direction: column; }
	.flex-item-left { display: none; }
	.flex-item-middle { flex: 100%; }
	.flex-item-right { display: none; }
}

.grid-container {
  display: grid;
	grid-template-columns: auto auto auto;
  grid-gap: 10px;
}

.grid-container > div {
  text-align: center;
	max-width: 1280px;
}

.grid-item1 {
	grid-column-start: 1;
  grid-column-end: 2;
}
.grid-item2 {
	grid-column-start: 2;
  grid-column-end: 4;
}
.grid-item3 {
	grid-column-start: 4;
  grid-column-end: 5;
}
/* @media screen and (max-width: 992px) { .grid-item1 { display: none; } .grid-item3 { display: none; } } */
/* .grid-item1 { width: 256px; } */
/* .grid-item2 { min-width: 768px; } */
/* .grid-item3 { width: 256px; } */


.flex-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: center; }
.flex-item1 { flex-basis: 768px; flex-grow: 4; }
.flex-item2 { flex-grow: 1; }
.flex-item3 { flex-basis: 256px; flex-grow: 1; }

.start-flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; align-content: flex-start; max-width: 1400px; margin: 0 auto; }
.start-flex-item1 { }
.start-flex-item2 { }
.start-flex-item3 { }
@media screen and (max-width: 992px) { .start-flex-item3 { display: none; } }
@media screen and (max-width: 992px) { .start-flex-container { flex-direction: column; } }

.games-flex-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; margin: 0 auto; padding: 10px; }

.message2 {
    padding: 1rem;

    background: #eff8ff;
    color: #2779bd;

    border-color: #6cb2eb;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    margin-bottom: 2rem;
}
.message2.hidden {
    display: none;
}
.message2.success {
    background: #e3fcec;
    color: #1f9d55;
    border-color: #51d88a;
}
.message2.warning {
    background: #fffabc;
    color: #8d7b00;
    border-color: #d3b800;
}
.message2.error {
    background: #fcebea;
    color: #cc1f1a;
    border-color: #ef5753;
}

div.center.circle.bg_black { background: url(/img/black_ball-small.png) no-repeat top left; background-size: cover; }
div.center.circle.bg_blue { background: url(/img/blue_ball-small.png) no-repeat top left; background-size: cover; }
div.center.circle.bg_green { background: url(/img/green_ball-small.png) no-repeat top left; background-size: cover; }
div.center.circle.bg_red { background: url(/img/red_ball-small.png) no-repeat top left; background-size: cover; }
div.center.circle.bg_yellow { background: url(/img/yellow_ball-small.png) no-repeat top left; background-size: cover; }
div.center.circle.bg_orange { background: url(/img/orange_ball-small.png) no-repeat top left; background-size: cover; }
div.center.circle.bg_brown { background: url(/img/brown_ball-small.png) no-repeat top left; background-size: cover; }

#b0, #b1, #b2, #b3, #b4, #b5 { font-size: 12px; }
#buttons, #proverbswrapper, #areawrapper, #fourwrapper, #fivewrapper, #gamewrapper, #movewrapper, #otherwrapper { margin: 0 auto; text-align: center; margin-top: 0px; }
#challenges { font-size: 16px; width: auto; height: 336px; margin-bottom: 0; text-align: left; padding-left: 0px; overflow: auto; }
#challenges a { color: white; }
#message_box { height: 341px; text-align: left; width: auto; overflow: auto; }
#system_message { background: white; height: 341px; overflow: auto; }
#system_message a { color: black; }
#tables { padding: 10px; margin: 0 auto; }
#rem1 { margin: 0px; padding: 15px; color: white; background: linear-gradient(to bottom, #009344 0%,#008e34 51%,#018f35 100%); }
#rem2 { margin: 0px; padding: 15px; color: white; background: linear-gradient(to bottom, #009344 0%,#008e34 51%,#018f35 100%); }
#replay { margin: 0px; padding: 15px; color: white; background: linear-gradient(to bottom, #3d75db 0%,#2862cd 51%,#154db4 100%); }
#homepage { margin: 0px; padding: 15px; color: white; background: linear-gradient(to bottom, #3d75db 0%,#2862cd 51%,#154db4 100%); }


.bar  { width: 20px; height: 100%; }
.button { font-weight: 400; }
.choose { float: left; padding: 10px; }
.circle { width: 50%; height:0; padding-bottom: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
.dotted { border-style: dotted; }
.fw14 { width: 30px; }
.fh14 { height: 30px; }
.line { width: 100%; height: 20px; }
.rectangle { padding-bottom: 10px; }
.ten { font-size: 24px; padding: 30px; }
.w5 { width: 16%; }
.w10 { width: 10%; }
.w12 { width: 12%; }
.w14 { width: 14%; }
.w16 { width: 16%; }
.w_circle { width: 20px; height: 20px; }
.w_line   { width: 12%; height: 20px; }
.w_bar    { width: 20px;  height: 60px; }