@font-face {
	font-family: "snacks";
	font-style: normal;
	font-weight: normal;
	src: url(snacksfont.ttf);
}


body {
margin: 0 auto;
padding: 10px;
background: url(images/fondo.jpg) no-repeat fixed;
background-size: 100%;
    font-family: 'snacks', sans-serif;
}


	nav {
background-color: rgba(0, 0, 0, 0.75);
margin-top: 5px;
position: fixed;
float: left;
width: 100%;
bottom: 0px;
z-index: 9999;
    height: 40px;
    margin-left: -10px;
}
	nav ul {
		list-style: none;
		padding: 0; margin: 0;
	}

button {
background-color: rgba(0, 0, 0, 0.75);
}
	nav li {
float: left;
width: 50%;
overflow: hidden;
    height: 40px;
}
nav button.nav_button {
    color: rgb(255, 255, 255);
    padding: 4px 51%;
    border: medium none;
    cursor: pointer;
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: -16%;
}

nav a {
color: #fff;
text-decoration: none;
padding: 39%;
}

p {
text-align: center;
margin: 0;
}

h3{
  font-size: 2rem; 
  margin: -0.1rem 0 0 -2.5rem;
  color: white;
  padding: 0.4rem 0.4rem 0.4rem 3rem;}

button {
width: 50%;
height: 2.8rem;
background-color: #000000;
float: left;
}

.botones {
width: 100%;
position: fixed;
float: left;
background: #fff;
bottom: 0px;
margin-left: -10px;
padding-bottom: 6px;
}


div#game {

font-size: 1rem;
overflow: visible;
}

canvas#main {
width: 100%;
background-size: 100%;
background: rgba(0, 0, 0, 0.37);
border-radius: 7px;
box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.7);
}

/*Note: There are patterns related to local, global, and function calls in code.*/

p.textDisplay {
color: #FFFFFF;
border-radius: 10px;
margin: 0px;
padding-top: 4px;
height: 37px;
width: 45%;
font-size: 17px;
}

p#score {
	float: left;
	width:  51%;
	width: -moz-calc(50% - 4px);
	width: -webkit-calc(50% - 4px);
	width: calc(50% - 4px);
}

p#cash {
	margin-left:  51%;
	margin-left: -moz-calc(50% + 4px);
	margin-left: -webkit-calc(50% + 4px);
	margin-left: calc(50% + 4px);
}

div.textDisplayBorder {
margin-bottom: 1em;
padding: 10px;
overflow: visible;
margin: -10px -10px 20px -10px;
}

div#popover {
	background:  white;
	background: rgba(255,255,255,0.8);
	font-size: 20px;
	margin-left: 40px;
	margin-right: auto;
	outline: 3px solid black;
	position: absolute;
	text-align: center;
	top: 250px;
	width: 400px;
}

div#music {
	background: #3ba1c2; /*A pretty blue.*/
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 1px solid black;
	bottom: 0%;
	margin-bottom: -6px;
	padding-bottom: 0px;
	padding: 6px;
	position: fixed;
	right: 5%;
}

#facebook-div { display: none;}

.gameTextOverlay {
	pointer-events: none; /*Sometimes, CSS is amazingly wonderful.*/
}

