﻿#main{
    max-width: 1024px;
    max-height: 600px;
    margin:0 auto 0 auto;
    text-align: center;
    position:relative;
}
#menuScreen{
    background-image: url('assets/portadaBolaOpaca.png');
    height: 600px;
    max-width: 1024px;
}
#menuTable{
    position:absolute;
    left:175px;
    bottom:200px;
    font-family: "Comic Sans MS";
}
#results,#Instructions,#About,#Tips{
    font-family: "Comic Sans MS";
    text-align: center;
    margin: 0 auto 0 auto;
    max-width: 1024px;
}
p{
    background-color: #575454;
    color:white;
    border-radius: 10px;
}
a{
    text-decoration: none;
    color:#3395cd;
}
#levelRandom{
    font-size: 15pt;
}
.refresh{
    background-color: yellow;
}
#ExtraButons{
    position: relative;
    bottom:-400px;
    text-align: center; 
    margin: 0 auto 0 auto;
    max-width: 800px;
}
.imgMenu {
    transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition:all 0.5s ease-in;
    margin: 20px;
    border-radius: 10px;
    border-style: solid;
    opacity: 0.6;
}
.imgMenu:hover{
    animation-name: resize;
    animation-duration: 1.5s;
    animation-iteration-count: 100;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    opacity: 1;
}  
#imgBocina:hover,#imgBocinaMenu:hover,#imgBocinaGame:hover{
    cursor: pointer;
}
#imgBocinaMenu{
    position: relative;
    bottom:-360px;
    left:-480px;
}
#imgBocinaGame{
    position: absolute;
    bottom:25px;
    left:0px;
}
/*/////////////////////////////////botones de modal//////////////////////////*
/* green */
.button {
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.green {
    color: #e8f0de;
    border: solid 1px #538312;
    background: #64991e;
    background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
    background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
    background: #538018;
    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
    background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
    color: #a9c08c;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
    background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}