html { font-size: 16px; }
body {  padding: 0px; margin: 0px; font-family: "Roboto"; }
.hide { display: none !important; }
.hide_fake.hide { display: block !important; opacity: .01; }
.clear_fix::after { content: ""; clear: both; display: table; }

.preload, .loading_big { position: fixed; top: 0px; width: 100%; height: 100%; left: 0px; right: 0px; bottom: 0px; background: #1e1c19; z-index: 25000; }
.preload img , .loading_big img { position:absolute; top: 50%; left: 50%; margin-top: -135px; margin-left: -135px; width: 270px; height: 270px; }
.loading_big { opacity: .5; }

.door { position:fixed; z-index: 10001; height: 100%; width: 100%; top: 0px; bottom: 0px; background: #333; background-image: url('/assets/images/bgp.jpg'); background-size: 150px 150px; }
.door .image_over { height: 456px; width: 228px; position:absolute; top: 50%; margin-top: -228px; overflow: hidden; }
.door .image_over img { height: 456px; width: 456px; position:absolute; }
.door_left { right: 50%; background-position: right center; }
.door_right { left: 50%; background-position: left center; }
.door_left img { left: 0px; right: 0px; }
.door_left .image_over { right: 0px; }
.door_right img { right: 0px; right: 0px; }
.door_right .image_over { left: 0px; }

#head { position:fixed; z-index: 1000; height: 100px; width: 100%; left: 0px; right: 0px; top: 0px; opacity: .95; 
box-shadow: 0px 2px 10px #111;
}

#head .score { position:absolute; right: 50px; top: 5px; padding: 10px; width: 130px; height: 40px; box-shadow: 0px 0px 5px #222;  border-radius: 4px; }
#head .score .bg {
	position:absolute; height: 100%; width: 100%; top: 0px; left: 0px; z-index: 1; opacity: .3; border: #999 1px solid;
	border-radius: 4px; 
	box-shadow:  inset 0 0 8px #000000;
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}
#head .score .score_points { text-shadow: 0px 0px 8px #fff; z-index: 3; font-size: 20px; position:absolute; height: 100%; width: 100%; top: 0px; left: 0px; padding: 10px; line-height: 20px; text-align: right; font-weight: bold; color: #333; }

#head .score .new_points { position: absolute; top: 40px; right: 12px; font-size: 20px; color: #a4f442; text-shadow: 1px 1px 1px #111; opacity: .7 }

#head .bottom { position:absolute; width: 100%; height: 50px; bottom: 0px; left: 0px; right: 0px; }

#head .logo { float: left; overflow: hidden; }
#head .logo img { max-height: 50px; width: 188px; }

#head .leaderboard_toggle { float: right; margin-right: 3px; }
#head .map_toggle { float: left; margin-left: 3px; }

.user_info { padding: 5px; border-radius: 4px; background-color: rgba(0,0,0, .2);  }
.user_info .image img { max-width: 430px; height: 30px; border-radius: 2px; }
.user_info .image { float: right; margin-left: 5px; border-radius: 2px; }
.user_info .name { font-size: 26px; text-transform: uppercase; font-family: 'Staatliches'; color: #eee; text-shadow: 0px 0px 5px #222; float: right; height: 26px; line-height: 26px; margin-top: 3px; }
#head .user_info { position: absolute; right: 190px; top: 6px; box-shadow: 0px 0px 3px #222; }
#menu .user_info { float: left; margin: 4px; }
#zoom { display: none; }

.wood_grain { background-image: url('/assets/images/wood_grain.png'); background-size: 550px 100px;  }
.theme_space .wood_grain { background-image: url('/assets/images/wood_grain_silver.png'); }
.theme_sky .wood_grain { background-image: url('/assets/images/wood_grain_silver.png'); }
.theme_fire .wood_grain { background-image: url('/assets/images/wood_grain_red.png'); }
.theme_river .wood_grain { background-image: url('/assets/images/wood_grain_blue.png'); }

#score { float: right; padding: 10px; color: #fff; font-size: 25px; height: 30px; }


#nav { display: block; float: right; height: 40px; width: 40px; font-size: 30px; color: #c78f5b; cursor: pointer; text-align: center; padding-top: 10px; line-height: 30px; margin-right: 5px; text-shadow: 1px 1px 1px #111; opacity: .95; }
#nav:hover { opacity: .9; }
#nav:active { text-shadow: none; margin-top: 1px; }

.theme_space #nav { color: #fff; }
.theme_sky #nav { color: #fff; }
.theme_fire #nav { color: #fff; }
.theme_river #nav { color: #fff; }

#user_logout { display: none; }
.logged_in_user #user_logout { display: block; }
.logged_in_user #user_login { display: none; }

#board_wrapper, #head, .loading_big {
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}

#board_wrapper {  width: 100%; height: 100%; overflow: hidden; margin-top: 0px; position: absolute; background: rgb(180,144,58); background: linear-gradient(0deg, rgba(180,144,58,1) 0%, rgba(250,255,135,1) 50%, rgba(252,176,69,1) 100%);  
}

.theme_space #board_wrapper { 
background: #474747; /* Old browsers */
background: -moz-linear-gradient(top, #474747 0%, #0e0e0e 51%, #3d3d3d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #474747 0%,#0e0e0e 51%,#3d3d3d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #474747 0%,#0e0e0e 51%,#3d3d3d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#3d3d3d',GradientType=0 ); /* IE6-9 */
}

.theme_river #board_wrapper { 
background: #a9e4f7; /* Old browsers */
background: -moz-linear-gradient(top, #a9e4f7 0%, #0fb4e7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #a9e4f7 0%,#0fb4e7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #a9e4f7 0%,#0fb4e7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* IE6-9 */
}

.theme_sky #board_wrapper { 
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 53%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 53%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 53%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.theme_fire #board_wrapper { 
background: rgb(255,168,76); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,168,76,1) 0%, rgba(255,123,13,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-9 */
}

#board { position: relative; cursor: pointer; width: 100%; height: 100%;   }

.zoom2 #board #board_bg { background: url('/assets/images/tilebg.png'); background-repeat: repeat; background-size: 30px 30px; height: 200%; width: 200%; position: absolute; }
.zoom3 #board #board_bg { background: url('/assets/images/tilebg.png'); background-repeat: repeat; background-size: 45px 45px; height: 200%; width: 200%; position: absolute; }
.zoom4 #board #board_bg { background: url('/assets/images/tilebg.png'); background-repeat: repeat; background-size: 60px 60px; height: 200%; width: 200%; position: absolute; }
.zoom5 #board #board_bg { background: url('/assets/images/tilebg.png'); background-repeat: repeat; background-size: 75px 75px; height: 200%; width: 200%; position: absolute; }
.zoom6 #board #board_bg { background: url('/assets/images/tilebg.png'); background-repeat: repeat; background-size: 90px 90px; height: 200%; width: 200%; position: absolute; }
.zoom7 #board #board_bg { background: url('/assets/images/tilebg.png'); background-repeat: repeat; background-size: 105px 105px; height: 200%; width: 200%; position: absolute; }


#rack {  background-size: 550px 150px; }

.rack_space_wrap span { display: block; position: absolute;  background: #111; opacity: .25; top: 2px; left: 2px; height: calc(100% - 4px); width: calc(100% - 4px); }


#right { position: fixed; width: 300px; z-index: 1100; top: 100px; right: 0px; max-height: calc(100% - 50px); }

#map {  opacity: .9;  overflow: hidden; position:absolute; top: 55px; left: 5px; z-index: 1001; width: 200px; padding: 5px; background-size: 500px 500px; box-shadow: 0px 0px 5px #000; cursor:crosshair;  }
#map .map_image { position:relative; overflow: hidden; }
#map .map_image .square { height: 16px; width: 16px; position:absolute; left: 50px; top: 50px; border: 2px yellow solid; z-index: 20; }
#map .map_image img { width: 100%; margin: auto; z-index: 1 }
#map .expand_map { position:absolute; bottom: 0px; left: 2px; color: #FFF; cursor: pointer; font-size: 25px; line-height: 25px; z-index: 80; }
#map .expand_map:hover { opacity: .8; }
#map .close_map { position:absolute; top: 0px; right: 2px; color: #FFF; cursor: pointer; font-size: 25px; line-height: 25px;z-index: 110; }
#map .close_map:hover { opacity: .8; }


.full_map #map { position:fixed; width: 100%; top: 0px !important; left: 0px !important; right: 0px !important; bottom: 0px !important; height: 100%; border: 0px; background: #264d7c; border-radius:0px; opacity: .95;  z-index: 1200; border: #294770 12px solid; padding: 0px; }
.full_map #map .map_image { max-height: 100%; max-width: 100%; height: inherit; width: inherit; }
.full_map #map .map_image img { max-height: 100%; max-width: 100%; position:absolute; margin:auto; width:auto; }
.full_map #map .expand_map { bottom: 10px; left: 10px; }
.full_map #map .close_map { top: 10px; right: 10px; }
.full_map #map .map_image .square { display: none; }

.loading_small { text-align: center; }

#menu { position:fixed; width: 300px; height: calc(100% - 50px); top: 100px; right: -300px; bottom: 0px; background: #261307; z-index: 1300; opacity: .95; }
.theme_space #menu { background: #111; }
.theme_sky #menu { background: #111; }
.theme_fire #menu { background: #111; }
.theme_river #menu { background: #111; }

#menu .inner { overflow: auto; padding: 0px 5px; }
#menu .link_item a { display: block; padding: 15px 20px; font-size: 26px; text-decoration: none; line-height: 26px; margin: 0px; color: #ebb582; text-shadow: 1px 1px 1px #111; }
.theme_space #menu .link_item a { color: #fff; }
.theme_sky #menu .link_item a { color: #fff; }
.theme_fire #menu .link_item a { color: #fff; }
.theme_river #menu .link_item a { color: #fff; }

#menu .link_item a:hover, #menu .link_item a:active { opacity: .8; }
#menu .link_item { border-bottom: #401d07 1px solid; }
.theme_space #menu .link_item { border-bottom: #222 1px solid; } 
.theme_sky #menu .link_item { border-bottom: #222 1px solid; } 
.theme_fire #menu .link_item { border-bottom: #222 1px solid; } 
.theme_river #menu .link_item { border-bottom: #222 1px solid; } 

#menu .link_item:last-of-type { border: 0px }

.theme_dropdown_wrapper span { display: block; padding: 15px 20px; color: #eee;  }
.theme_dropdown_wrapper span select { color: #111; margin-left: 5px; }




.head_button { position:relative; display: block; float: left; height: 50px; width: 44px; font-size: 26px; color: #ebb582; cursor: pointer; text-align: center; padding-top: 8px; line-height: 30px; text-shadow: 1px 1px 1px #111;
 }
.head_button:hover { opacity: .5; font-size: 36px;   }	
.head_button:hover .h_label { display: none; }

.head_button:active { font-size: 26px; opacity: 1; }
.head_button:active .h_label { display: inherit; }
.head_button .h_label { position:absolute; display: block; font-size: 8px; line-height: 8px; text-align: center; width: 100%; bottom: 3px; left: 0px; height: 10px; padding: 0px; margin: 0px; }
.zoom_wrapper { width: 135px; margin: auto; }

.theme_space .head_button { color: #fff; }
.theme_sky .head_button { color: #fff; }
.theme_fire .head_button { color: #fff; }
.theme_river .head_button { color: #fff; }

@media (max-width: 1000px)  and  (min-width: 501px)
{
	
	#right { width: 300px; }	
}

	#rack_header { height: 26px;  }
	#rack .rack_points  { float: left; height: 24px; font-size: 17px; margin-top: 0px; padding: 0px; background: #eee; color: #111; opacity: .9;
	border-radius: 5px; width: 118px; margin-left: 1px; box-shadow: -0px -1px 2px #333; text-align: center; line-height: 19px; overflow:hidden; }
	#rack .rack_level  { position: relative; float: right; height: 24px; font-size: 17px; margin-top: 0px; padding: 0px; background: #eee; color: #111; opacity: .9;
	border-radius: 0px 5px 5px 0px; width: calc(75% - 3px); margin-right: 3px; text-align: center; line-height: 19px; overflow:hidden; 
	background: #e2e2e2; /* Old browsers */
	background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
	}
	#rack .rack_level2  { float: left; height: 24px; font-size: 20px; margin-top: 0px; padding: 3px; 
	border-radius: 5px 0px 0px 5px; width: calc(25% - 3px); margin-left: 3px; box-shadow: inset 0px 0px 22px #222; text-align: center; line-height: 20px; overflow:hidden; 
	background:  rgba(0,0,0,0.3);  text-transform: uppercase; font-family: 'Staatliches'; color: #eee; text-shadow: 1px 1px 1px #222;
	 }
	.rack_progress { display: block; float: left; height: 100%;
	background: #bfd255; /* Old browsers */
	background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
	 }
	.rack_progress_label { display: block; height: 100%; width: 100%; position: absolute; left: 0px; top: 6px; height: 24px; font-size: 12px; text-align:center; opacity: .8; line-height: 12px;  }
	
	#rack_buttons { position:absolute; top: -45px; left: 0px; width: 100%; height: 45px; box-shadow: inset 0px 0px 1px #111; background-size: 500px 100%; border-radius: 6px 6px 0px 0px; }

	 .rkbt:nth-of-type(1) { width: calc(25% - 12px); margin: 8px 4px 0px 8px;  }
	 .rkbt:nth-of-type(2) { width: calc(25% - 8px); margin: 8px 4px;  }
	 .rkbt:nth-of-type(3) { width: calc(25% - 8px); margin: 8px 4px;   }
	 .rkbt:nth-of-type(4) { width: calc(25% - 12px); margin: 8px 8px 0px 4px;  }
	
	 .rkbt { font-size: 16px; float: left; color: #ebb582; text-shadow: 1px 1px 3px #111;  box-shadow: 0px 0px 1px #222; border-radius: 4px; background-size: 500px 100%; cursor: pointer;  }
	 .rkbt > span { display: block; width: 100%; height: 100%; box-shadow: inset 0 0 10px #111; padding: 5px;  border-radius: 4px; height: 32px; padding-left: 10px; line-height: 21px; border: rgba(0,0,0,0) 1px solid; }	
	
	 .rkbt:hover {  box-shadow: 0px 0px 2px #111; top: 1px; }
	 .rkbt:hover > span {  box-shadow: inset 0 0 20px #111; }
	
	 .rkbt:active  { text-shadow: none; margin-top: 9px; }
	 .rkbt:active > span { box-shadow: inset 0 0 30px #111;  }	
	
	.theme_space  .rkbt { color: #fff; }
	.theme_sky  .rkbt { color: #fff; }
	.theme_river  .rkbt { color: #fff; }
	.theme_fire  .rkbt { color: #fff; }
	
	
@media (max-width: 500px) 
{
	#head .user_info { display: none; }
	#rack_wrapper { position:absolute; bottom: 0px; z-index: 100; width: 100%; left: 0px; right: 0px; }
	#rack_buttons .rkbt { font-size: 12px; }
	
	.facebook_browser #rack_wrapper { bottom: 50px; }
	.facebook_browser .fbgap { position:absolute; bottom: -50px; height: 50px; width: 100%; left: 0px; right: 0px; background: #703d1b; }
	#rack {  margin: auto; width: 100%; padding: 3px 0px 3px 0px; border-radius: 0px; min-height: 65px; }
	#rack .tile { position:relative; margin: auto; float: left; cursor: pointer; height: 45px; width: 12.5%; z-index: 10; }
	
	#rack .tile.letter .pts { font-size: 8px !important;  bottom: 4px  !important;  right: 6px  !important;  }
	#rack .tile.letter span[data-letter]::before { font-size: 8.3mm !important; }
	#rack .tile.letter span[data-letter]::after  { font-size: 2.275mm !important; }
	#rack .tile.bonus span { font-size: 16px !important; margin-top: -8px  !important;  }
	
	.rack_space_wrap { position:absolute; top: 29px; width: 12.5%; height: 45px; z-index: 2; }
	.rack_space_wrap.rsw1 { left: 0; }
	.rack_space_wrap.rsw2 { left: 12.5%; }
	.rack_space_wrap.rsw3 { left: 25%; }
	.rack_space_wrap.rsw4 { left: 37.5%; }
	.rack_space_wrap.rsw5 { left: 50%; }
	.rack_space_wrap.rsw6 { left: 62.5%; }
	.rack_space_wrap.rsw7 { left: 75%; }
	.rack_space_wrap.rsw8 { left: 87.5%; }
	
	.message { opacity: .15; z-index: 1; position:absolute; top: 26px; left: 0px; font-family: "caveat"; color: #fff; width: 100%; text-align:center; padding-top: 10px; font-size: 21px; text-shadow: 1px 1px 3px #111;}	
	
	.add_to_rack { z-index:3;cursor: pointer; position: absolute; font-size: 20px; cursor: pointer; height: 41px; text-align: center; width: 12.5%; right: 0px; top: 31px;color: #fff; opacity: .75; }
	.add_to_rack:hover { opacity: 1 !important; }
	.add_to_rack .far { margin-top: 10px; }
	
	.play_word { z-index:5;cursor: pointer;  color: #fff; font-size: 24px; position:absolute; top: -55px; right: 0px; font-family: 'Staatliches'; 
	padding: 5px;  border-radius: 5px 0px 0px 0px; width: 50%; }
	
	#head .logo { /* width: 46px;*/ }
	
	.door .image_over { height: 228px; width: 114px; position:absolute; top: 50%; margin-top: -114px; overflow: hidden; }
	.door .image_over img { height: 228px; width: 228px; position:absolute; }
	.door_left { right: calc(50% - 1px); background-position: right center; }
	.door_right { left: 50%; background-position: left center; }

	#map  { width: 100px; }
	#map .expand_map { font-size: 14px; line-height: 14px; }
	#map .close_map { font-size: 14px; line-height: 14px; }
	
	.full_map #map .expand_map { font-size: 22px; line-height: 22px; }
	.full_map #map .close_map { font-size: 22px; line-height: 22px; }
	
	#right { width: 100%; }	
}

@media (min-width: 501px) 
{
	#rack_wrapper { position:absolute; bottom: 36px; z-index: 100; height: 60px; width: 0px; left: 50%; }
	#rack {  position: relative; margin: auto; width: 490px; padding: 5px 5px 5px 5px; height: 130px; margin-left: -245px; }
	#rack .tile { position:relative; margin: auto; float: left; cursor: pointer; height: 60px; width: 60px; z-index: 10; } 
	
	#rack .tile.letter .pts { font-size: 10px !important;  bottom: 5px  !important;  right: 8px  !important;  }
	#rack .tile.letter span[data-letter]::before { font-size: 11.3mm !important; }
	#rack .tile.letter span[data-letter]::after  { font-size: 3.275mm !important; }
	#rack .tile.bonus span { font-size: 20px !important; margin-top: -10px  !important;  }
	
	.rack_space_wrap { position:absolute; top: 31px; width: 60px; height: 60px; margin-left: 5px; z-index: 2; }
	.rack_space_wrap.rsw1 { left: 0px; }
	.rack_space_wrap.rsw2 { left: 60px; }
	.rack_space_wrap.rsw3 { left: 120px; }
	.rack_space_wrap.rsw4 { left: 180px; }
	.rack_space_wrap.rsw5 { left: 240px; }
	.rack_space_wrap.rsw6 { left: 300px; }
	.rack_space_wrap.rsw7 { left: 360px; }
	.rack_space_wrap.rsw8 { left: 420px; }
	
	.message { opacity: .15; z-index: 1; position:absolute; top: 26px; left: 0px; font-family: "caveat"; color: #fff; width: 100%; text-align:center; padding-top: 16px; font-size: 27px; text-shadow: 1px 1px 3px #111;}
	
	.add_to_rack {z-index:3;cursor: pointer; position: absolute; font-size: 36px; cursor: pointer; height: 56px; text-align: center; width: 56px; right: 7px; top: 33px; color: #fff; opacity: .75; }
	.add_to_rack:hover { opacity: 1 !important;}
	.add_to_rack .far { margin-top: 10px; }
	
	.play_word { width: 50%; z-index:3;cursor: pointer;  color: #fff; font-size: 24px; position:absolute; right: 0px; top: -51px; font-family: 'Staatliches';
	padding: 5px;  border-radius: 5px 5px 0px 0px; }

	
}

.play_word { background-size: 500px 100%; }
.play_word  span { display: block; background: red; padding: 5px 3px; width: 100%; text-align: center; text-shadow: 1px 1px 1px rgba(0,0,0, .4); }
.play_word  span{
border:1px solid #8bcf54; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px; text-decoration:none; display:inline-block;  color: #FFFFFF;
 background-color: #a9db80; background-image: -webkit-gradient(linear, left top, left bottom, from(#a9db80), to(#96c56f));
 background-image: -webkit-linear-gradient(top, #a9db80, #96c56f);
 background-image: -moz-linear-gradient(top, #a9db80, #96c56f);
 background-image: -ms-linear-gradient(top, #a9db80, #96c56f);
 background-image: -o-linear-gradient(top, #a9db80, #96c56f);
 background-image: linear-gradient(to bottom, #a9db80, #96c56f);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a9db80, endColorstr=#96c56f);
}

.play_word  span:hover{
 border:1px solid #74bf36;
 background-color: #8ed058; background-image: -webkit-gradient(linear, left top, left bottom, from(#8ed058), to(#7bb64b));
 background-image: -webkit-linear-gradient(top, #8ed058, #7bb64b);
 background-image: -moz-linear-gradient(top, #8ed058, #7bb64b);
 background-image: -ms-linear-gradient(top, #8ed058, #7bb64b);
 background-image: -o-linear-gradient(top, #8ed058, #7bb64b);
 background-image: linear-gradient(to bottom, #8ed058, #7bb64b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#8ed058, endColorstr=#7bb64b);
} 

.play_word  span:active{
 text-shadow: none; padding-top: 6px; padding-bottom: 4px;
 background-color: #a9db80; background-image: -webkit-gradient(linear, left top, left bottom, from(#a9db80), to(#96c56f));
 background-image: -webkit-linear-gradient(top, #a9db80, #96c56f);
 background-image: -moz-linear-gradient(top, #a9db80, #96c56f);
 background-image: -ms-linear-gradient(top, #a9db80, #96c56f);
 background-image: -o-linear-gradient(top, #a9db80, #96c56f);
 background-image: linear-gradient(to bottom, #a9db80, #96c56f);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a9db80, endColorstr=#96c56f);
}

#rack .star { position:absolute; right: 35px; opacity: .25; top: 10px; font-size: 60px; color: yellow; }
#rack .coin { position:absolute; right: 40%; opacity: .25; top: 10px; font-size: 60px; color: yellow; }

.tile .turn_info { position:absolute; top: calc(50%); left: calc(50%); padding: 5px; border-radius: 3px; opacity: .8; z-index: 100; text-align: left; text-shadow: 1px 1px 1px #111; }
.tile .turn_info .inner_info { background: rgba(0,0,0, .4); padding: 4px; width: auto; color: #fff; white-space: nowrap;  }
.tile .turn_info  .close_info { position: absolute; top: 10px; right: 10px; color: #fff; font-size: 16px; height: 16px; line-height: 16px; }
.turn_info .load { height: 30px; width: 30px; }
.turn_info .name { font-family: 'Staatliches'; font-size: 20px; padding-right: 20px; height: 20px; line-height: 20px; }
.turn_info .name img { height: 20px; display:inline; margin-left: 4px; margin-top: -3px; }
.turn_info .play { font-size: 10px; }
.turn_info .time { font-size: 10px; opacity: .6; text-align: right; padding-left: 15px; }
.turn_info .play > div { font-weight: bold; }
.turn_info .points { font-size: 10px; }
.tile.popup_tile { z-index: 15 !important; }
.tile.popup_tile_turn .inner { opacity: .3 !important; }
.turn_info .share { padding-top: 1px; min-width: 100px; text-align: right; }
.turn_info .share em { font-size: 10px; margin-right: 10px; }
.turn_info .share a { color: #fff; }

.tile, .tile * {  box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.tile { position: absolute;  text-align:  center; z-index: 1; display: table-cell; vertical-align: middle; }

.tile.letter { z-index: 50; }
.tile_blank .inner{ border: #333 2px solid;  background: #555; border-radius: 6px; width: calc(100% - 2px); height: calc(100% - 2px); margin-top: 1px; margin-left: 1px; opacity: .1; position: absolute; top: 0px; left: 0px; z-index: 0; }

.tile.letter .inner{  border-radius: 6px; width: calc(100% - 4px); height: calc(100% - 4px); margin-top: 2px; margin-left: 2px; opacity: .95; position: absolute; top: 0px; left: 0px; z-index: 1;
background-color: #f5cf90;
    background-image: url('/assets/images/wood.png');
	
	box-sizing: border-box;
  box-shadow: 0 0.5625mm 0.375mm -0.25mm rgba(0, 0, 0, 0.4);
  border-style: solid;
  border-top-width: 0.375mm;
  border-left-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 0.5625mm;
  border-top-color: rgba(255, 255, 255, 0.45);
  border-left-color: rgba(255, 255, 255, 0.25);
  border-right-color: rgba(0, 0, 0, 0.15);
  border-bottom-color: rgba(0, 0, 0, 0.3);
  border-radius: 0.375mm;
	 }

.zoom2 .tile.letter .inner { box-shadow: none; } 
.zoom3 .tile.letter .inner { box-shadow: none; } 
	 

.theme_space .tile.letter .inner{  background-image: url('/assets/images/wood_white.png'); }
.theme_river .tile.letter .inner{  background-image: url('/assets/images/wood_blue.png'); }
.theme_sky .tile.letter .inner{  background-image: url('/assets/images/wood_dark.png'); }
.theme_fire .tile.letter .inner{  background-image: url('/assets/images/wood_red2.png'); }
	 
.tile.letter .inner.letter-A { background-position: 25px 568px; background-color: rgb(232, 188, 116); }
.tile.letter .inner.letter-B { background-position: 250px 568px; background-color: rgb(232, 188, 116); }
.tile.letter .inner.letter-C { background-position: 130px 468px; background-color: rgb(212, 188, 116); }
.tile.letter .inner.letter-D { background-position: 0px 368px; background-color: rgb(214, 188, 108); }
.tile.letter .inner.letter-E { background-position: 123px 347px; background-color: rgb(207, 162, 108); }

.tile.letter .inner.letter-F { background-position: 103px 497px; background-color: rgb(227, 182, 87); }
.tile.letter .inner.letter-G { background-position: 23px 307px; background-color: rgb(207, 162, 87); }
.tile.letter .inner.letter-H { background-position: 276px 451px; background-color: rgb(221, 176, 101); }
.tile.letter .inner.letter-I { background-position: 123px 347px; background-color: rgb(207, 162, 87); }
.tile.letter .inner.letter-J { background-position: 98px 294px; background-color: rgb(227, 182, 108); }

.tile.letter .inner.letter-K { background-position: 98px 294px; background-color: rgb(227, 182, 108); }
.tile.letter .inner.letter-L { background-position: 98px 294px; background-color: rgb(227, 182, 108); }
.tile.letter .inner.letter-M { background-position: 98px 294px; background-color: rgb(227, 182, 108); }
.tile.letter .inner.letter-N { background-position: 98px 294px; background-color: rgb(227, 182, 108); }
.tile.letter .inner.letter-O { background-position: 237px 298px; background-color: rgb(204, 159, 84); }

.tile.letter .inner.letter-P { background-position: 176px 151px; background-color: rgb(221, 176, 101); }
.tile.letter .inner.letter-Q { background-position: 376px 151px; background-color: rgb(221, 176, 101); }
.tile.letter .inner.letter-R { background-position: 10px 341px; background-color: rgb(232, 188, 116); }
.tile.letter .inner.letter-S { background-position: 89px 324px; background-color: rgb(206, 161, 86); }
.tile.letter .inner.letter-T { background-position: 276px 51px; background-color: rgb(221, 176, 101); }

.tile.letter .inner.letter-U { background-position: 376px 51px; background-color: rgb(221, 176, 101); }
.tile.letter .inner.letter-V { background-position: 476px 93px; background-color: rgb(221, 176, 101); }
.tile.letter .inner.letter-W { background-position: 371px 88px; background-color: rgb(223, 179, 104); }
.tile.letter .inner.letter-X { background-position: 576px 77px; background-color: rgb(221, 176, 101); }
.tile.letter .inner.letter-Y { background-position: 406px 66px; background-color: rgb(221, 176, 101); }
.tile.letter .inner.letter-Z { background-position: 209px 11px; background-color: rgb(221, 176, 101); }




.tile.letter { z-index: 2; }
.tile.letter span {  font-weight: bold; font-family: 'Staatliches'; z-index: 2; position:absolute; left: 0px; width: 100%; height: 100%; top: 0px;  }
.tile.letter .pts { position:absolute;  z-index: 3; font-family: 'Staatliches'; opacity: .6 }
.cord_0_0 {  }

.zoom2 .tile.letter .pts { font-size: 6px;  bottom: 3px; right: 4px; }
.zoom3 .tile.letter .pts { font-size: 8px;  bottom: 4px; right: 6px; }
.zoom4 .tile.letter .pts { font-size: 10px;  bottom: 5px; right: 8px; }
.zoom5 .tile.letter .pts { font-size: 12px;  bottom: 5px; right: 8px; }
.zoom6 .tile.letter .pts { font-size: 14px;  bottom: 5px; right: 8px; }
.zoom7 .tile.letter .pts { font-size: 16px;  bottom: 5px; right: 8px; }


.tile.letter span[data-letter]::before {
  content: attr(data-letter);
  text-transform: uppercase;
  font-family: Oswald, sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: rgba(0, 0, 0, 0.6);
  text-shadow: 4px 4px 6px #f5cf90, 0 0 0 rgba(0, 0, 0, 0.7), 1px 2px 1px rgba(255, 255, 255, 0.5);
}

.theme_space .tile.letter span[data-letter]::before {
  text-shadow: 4px 4px 6px #fff, 0 0 0 rgba(0, 0, 0, 0.7), 1px 2px 1px rgba(255, 255, 255, 0.5);
}

.theme_river .tile.letter span[data-letter]::before {
  text-shadow: 4px 4px 6px #7ee0fc, 0 0 0 rgba(0, 0, 0, 0.7), 1px 2px 1px rgba(255, 255, 255, 0.5);
}

.theme_sky .tile.letter span[data-letter]::before {
  color: #ddd; text-shadow: 2px 2px 6px #333, 0 0 0 rgba(0, 0, 0, 0.7), 1px 2px 1px rgba(255, 255, 255, 0.5);
}
.theme_sky  .tile.letter .pts { color: #ddd; }

.theme_fire .tile.letter span[data-letter]::before {
  color: #333; text-shadow: 2px 2px 6px #ff9430, 0 0 0 rgba(0, 0, 0, 0.7), 1px 2px 1px rgba(255, 255, 255, 0.5);
}

.zoom2 .tile.letter span[data-letter]::before { font-size: 5.3mm; }
.zoom3 .tile.letter span[data-letter]::before { font-size: 8.3mm; }
.zoom4 .tile.letter span[data-letter]::before { font-size: 11.3mm; }
.zoom5 .tile.letter span[data-letter]::before { font-size: 13.3mm; }
.zoom6 .tile.letter span[data-letter]::before { font-size: 15.3mm; }
.zoom7 .tile.letter span[data-letter]::before { font-size: 17.3mm; }



.tile.letter span[data-letter]::after {
  color: rgba(0, 0, 0, 0.7);
  font-family: sans-serif;  
  position: absolute;
  right: 12.5%;
  bottom: 12.5%;
  -webkit-transform: translate(50%, 50%);
          transform: translate(50%, 50%);
}

.zoom2 .tile.letter span[data-letter]::after  { font-size: 1.275mm; }
.zoom3 .tile.letter span[data-letter]::after  { font-size: 2.275mm; }
.zoom4 .tile.letter span[data-letter]::after  { font-size: 3.275mm; }
.zoom5 .tile.letter span[data-letter]::after  { font-size: 4.275mm; }
.zoom6 .tile.letter span[data-letter]::after  { font-size: 5.275mm; }
.zoom7 .tile.letter span[data-letter]::after  { font-size: 6.275mm; }

.tile.bonus { opacity: .2; border-radius: 6px; font-family: 'Staatliches'; z-index: 1; }
.tile.bonus.bonus_2w { background: red; }
.tile.bonus.bonus_2l { background: blue; }
.tile.bonus.bonus_3w { background: purple; }
.tile.bonus.bonus_3l { background: green; }

.tile.bonus.bonus_4l { background: #41dcf4; }
.tile.bonus.bonus_4w { background: #f441d3; }
.tile.bonus.bonus_5l { background: #7cb220; }
.tile.bonus.bonus_5w { background: #f44152; }

.tile.bonus.bonus_6l { background: #003300; }
.tile.bonus.bonus_7l { background: #000066; }

.tile.bonus.bonus_c { }
.tile.bonus.bonus_c  i { color: #111 !important; }
.tile.bonus.bonus_b  i { color: red !important; }
.tile.bonus.bonus_q  i { color: #111 !important; }
.tile.bonus.bonus_s  { background: #555; }
.tile.bonus.bonus_s  i { color: yellow !important; }
.tile.bonus span { text-transform: uppercase; color: #fff; display: block; width: 100%; position: absolute; text-align: center; top: 50%; left: 0px;  }

.theme_space .tile.bonus.bonus_c  i { color: #fff !important; }
.theme_space .tile.bonus.bonus_q  i{ color: #fff !important; }
.theme_space .tile.bonus.bonus_s  { background: #bbb; }



.zoom2 .tile.bonus span { font-size: 18px; margin-top: -8px; line-height: 18px; }
.zoom3 .tile.bonus span { font-size: 24px; margin-top: -10px; line-height: 24px; }
.zoom4 .tile.bonus span { font-size: 30px; margin-top: -12px; line-height: 30px; }
.zoom5 .tile.bonus span { font-size: 36px; margin-top: -16px; line-height: 36px; }
.zoom6 .tile.bonus span { font-size: 42px; margin-top: -18px; line-height: 42px; }
.zoom7 .tile.bonus span { font-size: 48px; margin-top: -20px; line-height: 48px; }

.tile.live_tile { opacity: .95; -webkit-box-shadow: 0px -0px 3px 1px rgba(83,171,0,1);
-moz-box-shadow:0px -0px 3px 1px rgba(83,171,0,1);
box-shadow: 0px -0px 3px 1px rgba(83,171,0,1); }

.tile.live_active { -webkit-box-shadow: 0px -0px 3px 1px rgba(171,37,0,1);
-moz-box-shadow:0px -0px 3px 1px rgba(171,37,0,1);
box-shadow: 0px -0px 3px 1px rgba(171,37,0,1); }

.tile_dragging { opacity: .5 !important; z-index: 99 !important; }

.tile.remote_tile { -webkit-box-shadow: 0px -0px 3px 1px rgba(215, 145, 44, 0.9);
-moz-box-shadow:0px -0px 3px 1px rgba(215, 145, 44, 0.9);
box-shadow: 0px -0px 3px 1px rgba(215, 145, 44, 0.9);}

.tile.remote_tile  .inner { background-image: url('/assets/images/wood_red.png') !important; }

.tile.remote_tile_temp { opacity: .5; -webkit-box-shadow: 0px -0px 3px 1px rgba(0,153,255,0.9);
-moz-box-shadow:0px -0px 3px 1px rgba(0,153,255, 0.9);
box-shadow: 0px -0px 3px 1px rgba(0,153,255, 0.9);}





/****** LOGIN MODAL ******/
.fbc_button { cursor:pointer; width: 100%; margin-top: 25px; margin-bottom: 4px; }
.option_fb { text-align: center; padding: 5px; font-size: 14px; text-transform: uppercase; }
.gs_wrapper { margin-top: 5px; }

.loginmodal-container {
  padding: 30px;
  max-width: 350px;
  width: 100% !important;
  background-color: #F7F7F7;
  margin: 0 auto;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  font-family: roboto;
}

.loginmodal-container h1 {
  text-align: center;
  font-size: 1.8em;
  font-family: roboto;
}

.loginmodal-container input[type=button] {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  position: relative;
}

.loginmodal-container input[type=text], input[type=password] {
  height: 44px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 10px;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #c0c0c0;
  /* border-radius: 2px; */
  padding: 0 8px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.loginmodal-container input[type=text]:hover, input[type=password]:hover {
  border: 1px solid #b9b9b9;
  border-top: 1px solid #a0a0a0;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.loginmodal {
  text-align: center;
  font-size: 14px;
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  height: 36px;
  padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
  user-select: none; */
}

.loginmodal-submit {
  /* border: 1px solid #3079ed; */
  border: 0px;
  color: #fff;
  text-shadow: 0 1px rgba(0,0,0,0.1); 
  background-color: #4d90fe;
  padding: 17px 0px;
  font-family: roboto;
  font-size: 14px;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed)); */
}

.loginmodal-submit:hover {
  /* border: 1px solid #2f5bb7; */
  border: 0px;
  text-shadow: 0 1px rgba(0,0,0,0.3);
  background-color: #357ae8;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#357ae8)); */
}

.loginmodal-container a {
  text-decoration: none;
  color: #666;
  font-weight: 400;
  text-align: center;
  display: inline-block;
  opacity: 0.6;
  transition: opacity ease 0.5s;
} 

.login-help{
  font-size: 12px;
}

.login-btn {
  text-align:center;
  margin-top: 50px;
}

.button {
  line-height: 55px;
  padding: 0 30px;
  background: #004a80;
  color: #fff;
  display: inline-block;
  font-family: roboto;
  text-decoration: none;
  font-size: 18px;
}

.button:hover,
.button:visited {
  background: #006cba;
  color: #fff;
}