.buy{
	width:100%;
font-size:14px;
padding:5px;
z-index:5;
	background-color:red;
	color:white;
	text-align:left;
	font-shadow:none;
	font-weight:400;
	margin-bottom:20px;
}

#final_image{
	max-width:40%;
}

h2,h3{
	color:white;
	font-size:1.1em;
}

h1{
	color:white;
	font-size:1.5em;
}
.modal-body h1, .modal-body h2{
	color:black;
}

.buy a{
	color:white;
}

.buy a:hover{
	color:white;
}

.buy a:visited{
	color:white;
}


.noborder{
  border:0px solid black;
  padding:0px 0px;
  margin:0px auto;
  background-color:transparent;
  color:white;
}

.noborder:hover{
  background-color:transparent;
  color:lightgrey;
}

.mypadding{
  padding:5px 0px;
  margin:0px auto;
}

.mysettings{
  margin-top:2em;
}

body{
  background-image:url('../img/water.jpg');
  color:white;
}

.btnshadow{
  box-shadow:2px 2px 2px black;
  text-shadow:1px 1px 1px black;
}






#marinaio{
  margin:10px auto;
}

#weapons{
  background-color:#421a00;
}

#enemies{
  background-color:#421a00;
}


#result{
  padding:20px 0px;
}

.mybg{
  background-color:rgba(0,0,0,0.6);
  padding:50px;
  border-radius:100%;
  border:5px solid green;
}



.cella{
  background-image:url('../img/water.jpg');
  border:1px solid black;
  float:left;
    font-size:20px;
    background-size:cover;
    cursor:pointer;
	width:9%;
}

.cella_head{
  background-color:#5F7B7E;
  border:1px solid black;
  color:white;
    float:left;
  font-size:20px;
  width:9%;
}

.myhover{
  background-image:url('../img/water2.png');
  background-size:cover;
}

.puntato{
  background-image:url('../img/pointer.png');
  background-size:cover;
}

.puntato_radar{
  background-image:url('../img/pointer_radar.png');
  background-size:cover;
}

.colpita{
  background-image:url('../img/colpita.png');
  background-size:cover;
}

#operazione{
  color:black;
  text-shadow:0px 0px 0px black;
}

#risultato{
  color:green;
}

.pulsante{
  cursor:pointer;
  display:inline-block;
background: #FFFFFF;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 10px;
width:60px;
height:60px;
line-height:60px;
font-size:28px;
  margin-top:4px;
}

.erase{
  cursor:pointer;
  display:inline-block;
background: darkgrey;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 10px;
width:60px;
height:60px;
line-height:60px;
font-size:28px;
  margin-top:4px;
}

.fire{
  cursor:pointer;
  display:inline-block;
background: darkgreen;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 10px;
width:60px;
height:60px;
line-height:60px;
font-size:28px;
  margin-top:4px;
}

.pulsante:hover{
  background-color:royal;
}

.erase:hover{
  background-color:lightgrey;
}

.fire:hover{
  background-color:lightgreen;
}

.mylh{
  line-height:40px;
  font-size:20px;
}

.affondato{
  background-image:url('../img/affondata.png');
  background-size:cover;
}

.affondatohover{
  background-image:url('../img/affondatahover.png');
  background-size:cover;
}

.acqua{
  background-image:url('../img/niente.png');
  background-size:cover;
}

.acquahover{
  background-image:url('../img/nientehover.png');
  background-size:cover;
}

.acquaradar{
  background-image:url('../img/water3.png');
  background-size:cover;
}

.affondatoradar{
  background-image:url('../img/affondataradar.png');
  background-size:cover;
}

.nienteradar{
  background-image:url('../img/nienteradar.png');
  background-size:cover;
}

.naveradar{
  background-image:url('../img/naveradar.png');
  background-size:cover;
}

.affondatoradaractive{
  background-image:url('../img/affondataradar_active.png');
  background-size:cover;
}

.nienteradaractive{
  background-image:url('../img/nienteradar_active.png');
  background-size:cover;
}

.acquaradaractive{
  background-image:url('../img/water4.png');
  background-size:cover;
}

.mymargin{
  margin:2em auto;
  border:2px solid grey;
  width:100%;
  padding:5px;
  cursor:pointer;
}

#board{
  border-top:10px solid #fff7e;
  border-bottom:10px solid #fff7e;
  background-color:#421a00;
}

.rrow {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
  padding-bottom:20px;
  border-bottom-left-radius:20px;
  border-bottom-right-radius:20px;
  background-color:421a00
}
.rrow > [class*='col-xs-2'] {
  display: flex;
  flex-direction: column;
}




.nemico{
  margin:40px auto;
}

.myset{
  cursor:pointer;
}

.margright{
  margin-right:10px;
}

.myglyphicon{
  width:40px;
  height:40px;
}

.lessmargin{
  margin-top:10px;
  margin-bottom:10px;
}

.noselect {
  -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; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#infomodal{
  color:black;
  text-shadow:0px 0px 0px black;
}

#errore{
  color:black;
  text-shadow:0px 0px 0px black;
}

#msg-error{
  color:red;
}

#result{
  background-color:white;
  text-shadow:0px 0px 0px black;
}

#come{
  cursor:pointer;
}

#settings{
	margin-top:10px;
	width:440px;
	height:440px;
		margin:0px auto;
}

.nemico{
	width:80%;

}

@media only screen and (max-width: 400px) {
#settings{
	margin-top:10px;
	width:220px;
	height:300px;
}

.mysettings{
	margin-top:0px;
}

#start{
	height:50px;
	font-size:18px;
	padding:0px;
	width:70%;
	font-weight:bold;
}

.mybg{
	border-radius:0%;
	padding:5px;
}


#marinaio{
	width:20px;
	height:20px;
	margin:0px auto;
}



.container{
	padding-left:0px;
	padding-right:0px;
	margin:0px auto;

}

.myglyphicon{
	font-size:10px;
	height:15px;
}

.cella{
    font-size:8px;

}


.cella_head{

  font-size:8px;
}

.mymargin{
	width:45%;
	float:left;
	margin:0px;
	padding:0px;
}

h2 img{
	width:20px;
	height:20px;
}

.nemico{
	width:40px;
	margin:10px;
	float:left;
}

#result{
	padding:15px;
}


#final_image{
	max-width:70%;
}

}

.container{
		max-width:800px !important;
}