.clerafix:after, .clearfix:after {
	clear: both;
	content: '.';
	display: block;
	visibility: hidden;
	height: 0;
}

html, body.batalla_naval_body{
	height: 100%;
}

body.batalla_naval_body{
	margin: 0;
	font-family: Verdana;
	font-size: 12px;
	color: #404040;
}

#container {
	padding: 10px 12px;
}

#sidebar {
	width: 180px;
	float: left;
}

.hidden {
	display: none;
}

.relative {
	position: relative;
}

.text-align_center {
	text-align: center;
}

input, button {
	height: 40px;
	box-sizing: border-box;
    vertical-align: middle;
}

input[type="checkbox"], label {
	cursor: pointer;
}

.text-uppercase {
	text-transform: uppercase;
}

.slides-container {
	width: 100%;
    position: relative;
    overflow: hidden;
    min-height: 650px;
}

.slide {
    position: absolute;
    left: 100%;
	transition: left 1s ease-in-out;
	width: 100%;
}

.slide.state-1 {
	left: 0%;
}

.slide.state-2 {
	left: -100%;
}

#overlay{
	display: none;
	height: 100%;
	width: 100%;
	position: fixed;
	left: 0px;
	top: 0px;
}
#overlay-shadow{
	height: 100%;
	width: 100%;
	position: fixed;
	left: 0px;
	top: 0px;
	background-color: #000000;
	opacity: 0.9;
}
#overlay-container{
	background-color: #CCC;
	/*margin-left: calc(100% / 2 - 200px);
	width: 400px;
	margin-top: 100px;*/
	padding: 30px;

	position: fixed;
	box-shadow: 0 0 5px 5px #000;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
#overlay-close-btn{
	background-image: url('../images/close-btn.png');
	background-repeat: no-repeat;
	width: 38px;
	height: 38px;
	position: absolute;
	top: -18px;
	right: -18px;
	cursor: pointer;
}

#overlayBg{
	display: none;
	height: 100%;
	width: 100%;
	background-color: #000000;
	opacity: 0.6;
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 9000;
}

#overlayContent {
	background-color: #cccccc;
	left: 50%;
	top: 150px;
	padding: 80px 0;
	font-size: 40px;
	position: fixed;
	text-align: center;
	width: 400px;
	display: none;
	border-radius: 16px;
	z-index: 9001;
	transform: translate(-50%, 0);
}

#winnerMsg {
    margin-bottom: 40px;
}

#top-bar {
	position: relative;
	padding: 30px 10px 10px 10px;
	background: #f6f8f9; /* Old browsers */
	/*background-image: linear-gradient(to bottom, #436fa8 0%, #bbd6f0 10%, #b3d7e9 40%, #99afbf 60%, #bbd6f0 90%, #436fa8 100%);*/
	background-image: linear-gradient(to bottom, #e6f7ff 0%,#b3d7e9 40%,#99afbf 60%,#bbd6f0 94%,#436fa8 100%);
	animation-duration: .75s;
	animation-name: topbar-animation;
    animation-timing-function: ease;
	animation-fill-mode: forwards;
}

#top-bar.fade-out {
	animation-name: topbar-animation-out;
}

@keyframes topbar-animation {
  0% {top: -80px}
  70% {top: 0px}
  100% {top: -20px}
}

@keyframes topbar-animation-out {
  0% {top: -20px}
  70% {top: 0px}
  100% {top: -80px}
}

.justClear{
	clear: both;
	height: 0;
	width: 0;
}

.clearAfter:after{
	clear: both;
	content: '.';
	display: block;
	visibility: hidden;
	height: 0;
}

#versionNumber {
    font-size: 1rem;
}

.crearPartida{
	color: #ffffff;
	text-decoration: none;
	display: none;
}

#newGame-container {
	display: none;
    position: absolute;
    background-color: #eeeeee;
    padding: 20px;
    border-radius: 6px;
    left: calc(50% - 250px);
    width: 500px;
}

#gameTitle {
    color: #51849E;
    font-size: 30px;
    padding: 40px 0 0;
    text-align: center;
}

#loginContent{
	width: 300px;
	margin: 0 auto;
	float: left;
}

#loginImgContainer {
	float: left;
	width: 345px;
	height: 215px;
	margin-left: 20px;
	background-image: url("../images/ship.jpg");
	background-size: 100% auto;
	border: 1px solid #AAAAAA;
	border-radius: 4px;
	-moz-border-radius: 4px;
}
/*#loginImgContainer {
    float: left;
    width: 345px;
    height: 215px;
    margin-left: 20px;
    background-image: url("../images/ship.jpg");
    background-size: 100% auto;
    box-shadow: 0px 0px 6px 8px #eee inset;
    overflow: hidden;
}*/

#game-container {
	position: relative;
	margin: 20px;
	box-sizing: border-box;
}

#inviteContainer{
	width: 300px;
	margin: 0 auto;
	border: 1px solid #B4B4B4;
	padding: 10px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: #FBFBFB;
}

#listaAmigos{
	width: 180px;
	float: right;
	border: 1px solid #B4B4B4;
	padding: 10px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: #FBFBFB;
}

#listaAmigos h3 {
    text-align: center;
    margin: 0 0 10px 0;
}

#placeShipsContainer {
	display: inline-block;
	margin: 0 auto;
	border: 1px solid #B4B4B4;
	padding: 10px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: #FBFBFB;
}

.pic_nickname_container:after{
	content: '.';
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
}

.pic_nickname_container {
	display: inline-block;
	margin: 0 auto;
}

.pic_container {
	float: left;
	margin-right: 10px;
}

.nickname_Container{
	float: left;
	font-size: 20px;
}

#inviteContainer h3 {
	text-align: center;
	margin: 0;
}

#inviteContainer table {
	border: 0 none;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
}

.player_line .pic_col{
	width: 52px;
	float: left;
}
.player_line .check_col{
	float: left;
	padding: 17px 10px;
}

.player_line .nickname_col{
	float: left;
	padding: 18px 10px;
	color: #3294BA;
	font-weight: bold;
}

.checkbox_hidden{
	display: none;
}

.myCheckbox{
	width: 30px;
	height: 30px;
	background-image: url("../images/checkbox_unchecked.png");
	background-size: 100%;
}

.player_line.checked .myCheckbox{
	background-image: url("../images/checkbox_checked.png");
}

.player_line.checked {
	background-color: #E4F8E4;
}

.player_line.checked:hover {
	background-color: #D6EAD6;
}

#invitarBtnContainer {
	text-align: right;
}

.loginContainer {
	border: 1px solid #AAAAAA;
	background-color: #EEEEEE;
	margin: 40px auto 0 auto;
	padding: 20px;
	display: inline-block;
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}

.loginContainer:after{
	content: '.';
	height: 0;
	visibility: hidden;
	display: block;
	clear: both;
}

input[type='text'], input[type='password']{
	width: 208px;
	padding: 0 10px;
	font-size: 14px;
	color: #9c9c9c;
	border: 1px solid #cccccc;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background-image: none !important;
}

input[type='text']:focus, input[type='password']:focus {
    border: 1px solid #66afe9 !important;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

.loginForm_line{
	margin-bottom: 10px;
}

.loginForm_label {
	float: left;
	height: 30px;
	line-height: 30px;
	width: 85px;
	margin-top: 20px;
	font-size: 16px;
	color: #484848;
}

.loginForm_label:first-child{
	margin-top: 0px;
}

.loginContainer input {
	width: 100%;
	height: 50px;
	text-align: center;
	font-size: 16px;
	color: #4276a5;
}

.form-line button {
    line-height: 50px;
    height: auto;
	font-size: 18px;
    width: 100%;
}

.form-line {
    padding: 16px 0;
}

button {
	min-width: 100px;
}

.btnGreen, .btnGrey, .btnRed, .btnWarning {
	line-height: 40px;
	padding: 0 20px;
}

.btnGreen {
	font-size: 12px;
	border: 1px solid #777777;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	display: inline-block;
	background: #5ee212; /* Old browsers */
	background: -moz-linear-gradient(top, #5ee212 0%, #68b200 50%, #4b9b00 51%, #5cc600 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ee212), color-stop(50%,#68b200), color-stop(51%,#4b9b00), color-stop(100%,#5cc600)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #5ee212 0%,#68b200 50%,#4b9b00 51%,#5cc600 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #5ee212 0%,#68b200 50%,#4b9b00 51%,#5cc600 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #5ee212 0%,#68b200 50%,#4b9b00 51%,#5cc600 100%); /* IE10+ */
	background: linear-gradient(to bottom, #5ee212 0%,#68b200 50%,#4b9b00 51%,#5cc600 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ee212', endColorstr='#5cc600',GradientType=0 ); /* IE6-9 */
	
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	text-shadow: 2px 2px 3px #000000;
}

.btnGrey {
	font-size: 12px;
	border: 1px solid #777777;
	color: #ffffff;
	font-weight: bold;
	display: inline-block;
	background: #e0e0e0; /* Old browsers */
	background: -moz-linear-gradient(top, #e0e0e0 0%, #afafaf 50%, #999999 51%, #c4c4c4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(50%,#afafaf), color-stop(51%,#999999), color-stop(100%,#c4c4c4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #e0e0e0 0%,#afafaf 50%,#999999 51%,#c4c4c4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e0e0e0 0%,#afafaf 50%,#999999 51%,#c4c4c4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #e0e0e0 0%,#afafaf 50%,#999999 51%,#c4c4c4 100%); /* IE10+ */
	background: linear-gradient(to bottom, #e0e0e0 0%,#afafaf 50%,#999999 51%,#c4c4c4 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */
	
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	text-shadow: 2px 2px 3px #000000;
}

.btnRed {
	font-size: 12px;
	border: 1px solid #777777;
	color: #ffffff;
	font-weight: bold;
	display: inline-block;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	text-shadow: 2px 2px 3px #000000;
	
	background: #f70c0c; /* Old browsers */
	background: -moz-linear-gradient(top, #f70c0c 0%, #9b0000 50%, #930000 51%, #bf0000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f70c0c), color-stop(50%,#9b0000), color-stop(51%,#930000), color-stop(100%,#bf0000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f70c0c 0%,#9b0000 50%,#930000 51%,#bf0000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f70c0c 0%,#9b0000 50%,#930000 51%,#bf0000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #f70c0c 0%,#9b0000 50%,#930000 51%,#bf0000 100%); /* IE10+ */
	background: linear-gradient(to bottom, #f70c0c 0%,#9b0000 50%,#930000 51%,#bf0000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f70c0c', endColorstr='#bf0000',GradientType=0 ); /* IE6-9 */

}

.btnWarning {
	font-size: 12px;
	border: 1px solid #777777;
	color: #ffffff;
	font-weight: bold;
	display: inline-block;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	text-shadow: 2px 2px 3px #000000;
	
	background-image: linear-gradient(to bottom, #fceabb 0%, #FCCD4D 50%, #F8B500 51%, #fbdf93 100%);

}

button[disabled], button:disabled {
    background: #d4d4d4;
    color: #444444;
    text-shadow: 0 0 grey;
	cursor: not-allowed;
}

button.loading {
	position: relative;
    color: transparent;
    text-shadow: inherit;
	background: white;
}

/* LOADER */

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
  background-color: #8a8a8a;
  width: 10px;
  height: 10px;
}
.loader {
  color: #8a8a8a;
  font-size: 10px;
  position: absolute;
  animation-delay: -0.16s;
  	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.loader:before {
  left: -30px;
  animation-delay: -0.32s;
}
.loader:after {
  left: 40px;
}

@keyframes load7 {
  0%,
  80%,
  100% {
	box-shadow: 0 0 0 0;
  }
  40% {
	box-shadow: 0 0 0 10px;
  }
}

/**/

input#login_inputBtn {
	float: right;
	margin-top: 30px;
}

div#boatSelection{
	float: left;
	width: 230px;
}

#direction_container{
	float: left;
	width: 100px;
	height: 100px;
	margin-left: 30px;
}

#div_grilla {
	float: left;
	margin-left: 30px;
}

#div_my_grilla, .div_grilla_player {
	margin: 0 15px;
}

.grilla {
	float: left;
	margin-left: 20px;
}

.grilla, .my_grilla, .player_grilla{
	border: 1px solid #8b8b8b;
	cursor: default;
	background-color: #ffffff;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	overflow: hidden;
	display: block;
}

.grilla tr td, .my_grilla tr td, .player_grilla tr td{
	border-right: 1px solid #8b8b8b;
	border-bottom: 1px solid #8b8b8b;
	text-align: center;
	vertical-align: middle;
	/*background-color: #C7ECFF;*/
}

.div_grilla_player tr td {
	width: 30px;
	height: 30px;
}

.grilla td {
	width:30px;
	height: 30px;
}

.grilla td div, .my_grilla td div, .player_grilla td div {
	width: 100%;
	height: 100%;
}

.grilla tr:first-child td, .grilla tr td:first-child{
	background-color: inherit;
}

.my_grilla tr:first-child td, .my_grilla tr td:first-child{
	background-color: inherit;
}

.player_grilla tr:first-child td, .player_grilla tr td:first-child{
	background-color: inherit;
}

.grilla tr td:last-child, .my_grilla tr td:last-child, .player_grilla tr td:last-child{
	border-right: 0 none;
}

.grilla tr:last-child td, .my_grilla tr:last-child td, .player_grilla tr:last-child td{
	border-bottom: 0 none;
}

.div_nave{
	height: 20px;
	float: left;
	margin: 4px;
}

.div_nave:hover {
    filter: invert(45%) sepia(45%) saturate(1112%) hue-rotate(157deg) brightness(91%) contrast(79%);
}

.div_nave.selected {
    /*background-color: rgba(255,0,0,0.5);*/
	/*
		Convert hex to filter values: https://codepen.io/sosuke/pen/Pjoqqp
	*/
	filter: invert(62%) sepia(30%) saturate(3630%) hue-rotate(81deg) brightness(91%) contrast(85%);
}
.div_used_nave{
	/*background-color: #cccccc !important;
	background-blend-mode: overlay;*/
	filter: invert(74%) sepia(6%) saturate(52%) hue-rotate(314deg) brightness(112%) contrast(87%);
	height: 20px;
	float: left;
	margin: 4px;
	cursor: pointer;
}

.loser{
	opacity: 0.1;
}

/*.loser .player_grilla {
	border: 1px solid #FAFAFA;
}

.loser .player_grilla td {
	border-right: 1px solid #fafafa;
	border-bottom: 1px solid #fafafa;
	color: #fafafa;
}

.loser .player_grilla_title{
	color: #fafafa !important;
}*/

.ship_title{
	clear: both;
}

.Canoa, .Bote, .Barco, .Fragata, .Crucero{
	background-repeat: no-repeat;
	background-position: center;
	height: 30px;
	float: left;
	margin-right: 10px;
	position: relative;
}

.Canoa.div_used_nave:after, .Bote.div_used_nave:after, .Barco.div_used_nave:after, .Fragata.div_used_nave:after, .Crucero.div_used_nave:after {
	content: "X";
    font-weight: bold;
	font-size: 10px;
    line-height: 12px;
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
	background-color: #cccccc;
    border-radius: 50%;
    overflow: hidden;
}

.Canoa{
	width: 30px;
	/*background-color: #ff0000;*/
	text-align: center;
	background-image: url('/resources/images/barco5.svg');
	background-size: 100% 30%;
}

.Bote{
	width: 60px;
	/*background-color: #ff0000;*/
	text-align: center;
	background-image: url('/resources/images/barco4.svg');
	background-size: 100% 70%;
}

.Barco{
	width: 90px;
	/*background-color: #ff0000;*/
	text-align: center;
	background-image: url('/resources/images/barco3.svg');
	background-size: 100% 94%;
}

.Fragata{
	width: 120px;
	/*background-color: #ff0000;*/
	text-align: center;
	background-image: url('/resources/images/barco1.svg');
	background-size: 100% 94%;
}

.Crucero{
	width: 150px;
	/*background-color: #ff0000;*/
	text-align: center;
	background-image: url('/resources/images/barco2.svg');
	background-size: 100% 94%;
}


#boatSelection .div_nave{
	cursor: pointer;
}

#select_direccion{
	display: none;
}

.empty_cell{
	cursor: pointer;
}

.used_cell {
	cursor: default;
	/*background-color: #00C100;*/
	position: relative;
}

.start_h_cell {
	border-radius: 10px 0 0 10px;
	-moz-border-radius: 10px 0 0 10px;
	-webkit-border-radius: 10px 0 0 10px;
}

.start_h_cell.end_h_cell{
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.end_h_cell {
	border-radius: 0 10px 10px 0;
	-moz-border-radius: 0 10px 10px 0;
	-webkit-border-radius: 0 10px 10px 0;
}

.start_v_cell {
	border-radius: 10px 10px 0 0px;
	-moz-border-radius: 10px 10px 0 0px;
	-webkit-border-radius: 10px 10px 0 0px;
}

.end_v_cell {
	border-radius: 0 0 10px 10px;
	-moz-border-radius: 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px;
}


/* SHIPS */
[class*="ship_size_"]:before {
	content: '';
    display: block;
    height: 100%;
    position: absolute;
    background-position: center;
	background-repeat: no-repeat;
    top: 0;
    left: 0;
    z-index: 1;
}

[class*="ship_dir_v"]:before {
	transform: rotate(90deg);
    transform-origin: 15px;
}

.ship_size_1:before {
    background-image: url('/resources/images/barco5.svg');
    background-size: 100%;
    width: 100%;
}

.ship_size_2:before {
    background-image: url('/resources/images/barco4.svg');
    background-size: 100% 70%;
    width: 204%;
}

.ship_size_3:before {
    background-image: url('/resources/images/barco3.svg');
    background-size: 100% 100%;
    width: 306%;
}

.ship_size_4:before {
    background-image: url('/resources/images/barco1.svg');
    background-size: 100% 100%;
    width: 410%;
}

.ship_size_5:before {
    background-image: url('/resources/images/barco2.svg');
    background-size: 100% 100%;
    width: 515%;
}
/**/

.selectedToRemove{
	/*background-color: rgba(255,0,0,.5);*/
	filter: invert(45%) sepia(45%) saturate(1112%) hue-rotate(157deg) brightness(91%) contrast(79%);
}

.shooted_cell {
	position: relative;
}
.shooted_cell:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	cursor: default;
	background-color: inherit;
	/*background-color: rgba(255,0,0,.5);*/
	background-image: url("../images/cross.png");
	background-size: 100% 100%;
	z-index: 2;
}

.hundido {
	position: relative;
}

.hundido:before {
    filter: invert(9%) sepia(94%) saturate(7491%) hue-rotate(12deg) brightness(90%) contrast(115%);
}

/* .middle_cell {
	background-color: #000000;
	cursor: default;
} */

.water_cell{
	cursor: default;
	background-color: inherit;
	background-image: url("../images/water.jpg");
	background-size: 100%;
}

.my_grilla .water_cell {
	cursor: default;
	position: relative;
	background-image: none;
}

.my_grilla .water_cell:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: rgba(0,0,0,1);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.my_grilla .water_cell:after {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: rgba(0,0,0,1);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

#playBtn_cointainer{
	float: right;
	margin-top: 10px;
}

#playBtn{
	display: none;
}

.myGrilla_title, .player_grilla_title {
	font-weight: bold;
	margin-bottom: 10px;
	margin-left: 20px;
	text-align: center;
}


#turnoActualContainer {
	display: none;
	border: 1px solid #CCCCCC;
	float: left;
	margin-bottom: 10px;
	padding: 4px;
}

#turnoActual_playerNickname {
	color: #1EC81E;
	font-weight: bold;
}

.div_grilla_player_active .nickname_Container {
	color: #ffffff;
	font-weight: bold;
}

.div_grilla_player {
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	padding: 10px;
	display: inline-block;
	background-color: #eeeeee;
}

.div_grilla_player_active {
	background-color: #000000 !important;
}

#dispararContainer{
	margin-top: 10px;
}

#dispararContainer:after{
	content: '.';
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
}

#coord_to_shoot{
	float: left;
	padding: 6px 0 0;
	margin-left: 10px;
}

#dispararBtn{
	border: 1px solid #CCCCCC;
	text-align: center;
}

#dispararBtn.inactive{
	background-color: #CCCCCC;
	cursor: default;
}

#dispararBtn.active{
	background-color: #00FF00;
	cursor: pointer;
}

.otherPlayer_grilla .selected {
	box-sizing: border-box;
	position: relative;
	border: 1px solid #ff0000;
	box-shadow: 0 0 2px #ff0000, 0 0 2px #ff0000 inset;
	border-radius: 50%;
}

.otherPlayer_grilla .selected:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: rgba(255,0,0,.5);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.otherPlayer_grilla .selected:after {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: rgba(255,0,0,.5);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.otherPlayer_grilla .empty_cell {
	cursor: pointer;
}

#invitacionContainer {
	background-color: #EEEEEE;
	border: 1px solid #ffffff;
	cursor: pointer;
	display: none;
	float: left;
	left: calc(50% - 170px);
	margin-top: 20px;
	padding: 20px;
	position: absolute;
	top: 100px;
	width: 300px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 7px 7px 7px #3A3A3A;
	-moz-box-shadow: 7px 7px 7px #3A3A3A;
	-webkit-box-shadow: 7px 7px 7px #3A3A3A;
}

#invitadorName {
	color: #FF0000;
	font-size: 17px;
	font-weight: bold;
}


#invitacionAceptar {
	border: 1px solid #000000;
	color: #FFFFFF;
	padding: 10px;
	width: auto;
	float: left;
	background-color: #23ff23;
	text-decoration: none;
	background-image: -moz-linear-gradient(top, #23FF23 0%, #00A000 100%); /* FF3.6+ */
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#23FF23), color-stop(100%,#00A000)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top, #23FF23 0%,#00A000 100%); /* Chrome10+,Safari5.1+ */
	background-image: -o-linear-gradient(top, #23FF23 0%,#00A000 100%); /* Opera 11.10+ */
	background-image: -ms-linear-gradient(top, #23FF23 0%,#00A000 100%); /* IE10+ */
	background-image: linear-gradient(to bottom, #23FF23 0%,#00A000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23FF23', endColorstr='#00A000',GradientType=0 ); /* IE6-9 */
	font-weight: bold;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	margin: 20px auto 0;
}

#invitacionCancel {
	border: 1px solid #000000;
	color: #FFFFFF;
	padding: 10px;
	width: auto;
	float: right;
	background-color: #c2c2c2;
	text-decoration: none;
	background-image: -moz-linear-gradient(top, #c2c2c2 0%, #525252 100%); /* FF3.6+ */
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c2c2c2), color-stop(100%,#525252)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top, #c2c2c2 0%,#525252 100%); /* Chrome10+,Safari5.1+ */
	background-image: -o-linear-gradient(top, #c2c2c2 0%,#525252 100%); /* Opera 11.10+ */
	background-image: -ms-linear-gradient(top, #c2c2c2 0%,#525252 100%); /* IE10+ */
	background-image: linear-gradient(to bottom, #c2c2c2 0%,#525252 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2c2c2', endColorstr='#525252',GradientType=0 ); /* IE6-9 */
	font-weight: bold;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	margin: 20px auto 0;
}

#log_div{
	margin-top: 50px;
	border: 1px solid #cccccc;
	width: 500px;
	height: 300px;
}


.pageTitle {
	font-size: 20px;
	text-align: center;
	color: #048EC6;
	margin-bottom: 20px;
}

/* CREATE NEW GAME */
	.fieldContainer{
		text-align: center;
	}
	.opcionesContainer {
		margin: 0 auto;
		width: 900px;
	}
	.opcionesContainer:after{
		content: '.';
		height: 0;
		visibility: hidden;
		display: block;
		clear: both;
	}
	.opcion_nueva_partida{
		float: left;
		background-color: #f4f4f4;
		border: 1px solid #aaaaaa;
		border-radius: 10px;
		cursor: pointer;
		float: left;
		margin-right: 2%;
		padding: 0 10px;
		box-sizing: border-box;
		width: 32%;
	}
	
	.opcion_nueva_partida.selected .option_title {
		color: #585858;
	}
	
	.opcion_nueva_partida:hover {
		background-color: #B6D2EE;
	}

	.opcion_nueva_partida.selected {
		background-color: #B0E2BA;
	}
	
	.opcion_nueva_partida:last-child{
		margin-right: 0px;
	}
	
	.option_title {
		color: #959595;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		padding: 10px 0;
	}
	
	#createBtnContainer {
		margin: 20px auto 0px auto;
		width: auto;
		display: table;
	}
	
	
	.option_line{
		margin-bottom: 20px;
		height: 30px;
	}
	
	.ship_title{
		float: left;
		width: 60px;
		padding: 0 10px 0 0;
		text-align: right;
		color: #00983d;
		font-weight: bold;
		line-height: 30px;
		font-size: 20px;
	}
	
	.canoa, .bote, .barco, .fragata, .crucero {
		background-repeat: no-repeat;
		background-position: center;
		height: 30px;
		/*background-color: #4CAC90;
		border: 1px solid #3C3C3C;*/
		border-radius: 20px;
		display: inline-block;
		margin-right: 10px;
	}
	
	.canoa{
		width: 30px;
		background-image: url('/resources/images/barco5.svg');
		background-size: 100% 30%;
	}
	
	.bote{
		width: 60px;
		background-image: url('/resources/images/barco4.svg');
		background-size: 100% 70%;
	}
	
	.barco{
		width: 90px;
		background-image: url('/resources/images/barco3.svg');
		background-size: 100% 94%;
	}
	
	.fragata{
		width: 120px;
		background-image: url('/resources/images/barco1.svg');
		background-size: 100% 94%;
	}
	
	.crucero{
		width: 150px;
		background-image: url('/resources/images/barco2.svg');
		background-size: 100% 94%;
	}
/* */


#waiting {
	background-color: #EEEEEE;
	border: 1px solid #FFFFFF;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	display: none;
	font-weight: bold;
	left: calc(50% - 180px);
	padding: 10px;
	position: absolute;
	top: 200px;
	width: 340px;
	box-shadow: 7px 7px 7px #3A3A3A;
	-moz-box-shadow: 7px 7px 7px #3A3A3A;
	-webkit-box-shadow: 7px 7px 7px #3A3A3A;
}

.waiting_title{
	text-align: center;
	font-size: 18px;
}

.player_status_line{
	margin-top: 10px;
}

.player_status_line:after{
	content: '.';
	height: 0;
	visibility: hidden;
	display: block;
	clear: both;
}

.player_pic{
	background-size: 100% auto;
	height: 60px;
	width: 60px;
	float: left;
	margin-right: 10px;
	border: 1px solid #888888;
}

.player_pic_img{
	height: 50px;
	width: auto;
	border: 1px solid #434343;
	border-radius: 100px;
	-moz-border-raduis: 100px;
	-webkit-border-raduis: 100px;
}

.player_line{
	cursor: pointer;
	margin-bottom: 10px;
	padding: 4px;
}

.player_line:after{
	content: '.';
	height: 0;
	visibility: hidden;
	display: block;
	clear: both;
}

.player_line:hover{
	background-color: #F2F2FB;
}

.player_nickname{
	font-size: 16px;
}

.player_description{
	font-size: 12px;
}

.player_invited{
	color: #999999;
}

.player_acepted{
	color: #00CE00;
}

.player_canceled{
	color: #dd0000;
}

.finalizarBtn {
	border: 1px solid #000000;
	float: right;
	font-size: 12px;
	padding: 5px 10px;
	width: auto;
	font-weight: bold;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	color: #FFFFFF;
	margin-left: 20px;
	cursor: pointer;
	
	background-color: #c2c2c2;
	background-image: -moz-linear-gradient(top, #c2c2c2 0%, #525252 100%); /* FF3.6+ */
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c2c2c2), color-stop(100%,#525252)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top, #c2c2c2 0%,#525252 100%); /* Chrome10+,Safari5.1+ */
	background-image: -o-linear-gradient(top, #c2c2c2 0%,#525252 100%); /* Opera 11.10+ */
	background-image: -ms-linear-gradient(top, #c2c2c2 0%,#525252 100%); /* IE10+ */
	background-image: linear-gradient(to bottom, #c2c2c2 0%,#525252 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2c2c2', endColorstr='#525252',GradientType=0 ); /* IE6-9 */
	
}

.aceptarBtn{
	border: 1px solid #000000;
	float: right;
	font-size: 12px;
	padding: 5px 10px;
	width: auto;
	font-weight: bold;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	cursor: pointer;
	
	background-color: #23ff23;
	background-image: -moz-linear-gradient(top, #23FF23 0%, #00A000 100%); /* FF3.6+ */
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#23FF23), color-stop(100%,#00A000)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top, #23FF23 0%,#00A000 100%); /* Chrome10+,Safari5.1+ */
	background-image: -o-linear-gradient(top, #23FF23 0%,#00A000 100%); /* Opera 11.10+ */
	background-image: -ms-linear-gradient(top, #23FF23 0%,#00A000 100%); /* IE10+ */
	background-image: linear-gradient(to bottom, #23FF23 0%,#00A000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23FF23', endColorstr='#00A000',GradientType=0 ); /* IE6-9 */
}


#topBackBtnBar {
    float: left;
}

.titleBar {
    line-height: 36px;
    text-align: center;
	font-size: 26px;
}

#logoutBar{
	 width: 33%;
    text-align: right;
    position: absolute;
    right: 6px;
	bottom: 10px;
}

.logout_bar_pic_container{
	height: 36px;
	float: left;
	padding: 0 12px;
	display: none;
}

.logout_bar_pic_container img{
	width: auto;
	height: 34px;
	border: 1px solid #868686;
}

.logout_bar_nickname_container{
	display: inline-block;
	color: #000000;
	font-size: 16px;
	font-weight: bold;
	line-height: 26px;
	padding-top: 3px;
	padding-right: 6px;
	text-shadow: 0 0 4px #FFFFFF;
}

.logout_bar_btnSalir_container{
	display: inline-block;
}



/* VIDEOS */
video {
	max-width: 100%;
	border-radius: 10px;
}
.video-container {
	max-width: 342px;
	min-height: 192px;
	width: 100%;
    margin-bottom: 10px;
    display: inline-block;
    position: relative;

}
button#audio_pause {
	position: absolute;
	bottom: 0;
	right: 0;
	min-width: 40px;
	width: 40px;
	height: 40px;
	background-color: #75e56d;
	font-size: 11px;
	text-align: center;
	padding: 0;
	border: 1px solid #000000;
	border-radius: 10px;
	cursor: pointer;
	font-size: 20px;
}
button#audio_pause[data-status="playing"]:before {
	content: "\e901";
}

button#audio_pause[data-status="paused"] {
	background-color: #c95050;
}

button#audio_pause[data-status="paused"]:before {
	content: "\e900";
}


/*--------*/