/* ------------------------------------------------------------
** ESTILOS GENERALES
** ------------------------------------------------------------ */

@import 'https://fonts.googleapis.com/css?family=Righteous|Roboto:400,700';

*
{
    box-sizing: border-box;
}

body
{
    padding    : 0px 0px 0px 0px;
    margin     : 0px 0px 0px 0px;
    color      : #222222;
    font-family: Roboto, arial;
    font-size  : medium;
    font-weight: normal;
    overflow-x : hidden;
    background-color: #e0e0e0;
}

h3
{
    margin     : 20px 0px 10px 0px;
    font-family: Righteous, roboto, arial;
    font-size  : inherit;
    font-weight: normal;
}

table
{
    width: 100%;
    border-collapse: collapse;
}

td
{
    padding    : 5px;
    color      : #444444;
    font-family: Righteous, arial;
    font-size  : large;
    font-weight: normal;
    text-align : center;
    text-shadow: 1px 1px 1px #ffffff;
    text-transform: uppercase;
}

textarea
{
    margin   : 0px 0px 0px 0px;
    padding  : 5px;
    width    : 300px;
    height   : 520px;
    outline  : 0px;
    resize   : none;
    color    : #000000;
    border   : 0px solid #999999;
    font-size: medium;
    background-color: #FFFFFF;
}

select
{
    padding    : 5px;
    outline    : 0px;
    width      : 120px;
    border     : 1px solid #999999;
    color      : #000000;
    font-family: inherit;
    font-size  : inherit;
    background-color: #ffffff;
}

canvas
{
    margin: 5px;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
}

.container
{
    padding: 0px 60px 0px 60px;
}

.enlace
{
    cursor: pointer;
}

.hidden, [hidden]
{
    display: none !important;
}

/* ------------------------------------------------------------
** BARAJAS
** ------------------------------------------------------------ */

.baraja
{
   border : #aaaaaa 2px solid;
   width  : 60px;
   cursor : pointer;
   border-radius: 10px;
}

.baraja:hover
{
   filter: brightness(80%);
}

/* ------------------------------------------------------------
** BARRA DE NAVEGACION
** ------------------------------------------------------------ */

.appbar
{
    padding    : 2px 0px 2px 60px;
    color      : #ffffff;
    font-family: Righteous, arial;
    font-size  : x-large;
    font-weight: normal;
    text-shadow: 1px 1px 1px #000000;
    text-decoration : none;
    background-color: #888888;
}

.navbar
{
    padding    : 0px 0px 0px 60px;
    margin     : 0px;
    color      : #ffffff;
    font-family: inherit;
    font-size  : inherit;
    font-weight: normal;
    white-space: nowrap;
    text-decoration : none;
    background-color: #666666;
}

.navbar li
{
    padding   : 8px 10px;
    border    : none;
    cursor    : pointer;
    display   : inline-block;
    text-align: center;
}

.navbar li:hover
{
    background-color: #444444;
}

.navbar li[disabled=disabled]
{
    color: #999999;
    pointer-events: none;
}

/* ------------------------------------------------------------
** FOOTER
** ------------------------------------------------------------ */

footer
{
    margin     : 40px 0px 0px 0px;
    padding    : 20px 60px 40px 60px;
    border-top : 5px solid #666666;
    color      : #ffffff;
    font-family: inherit;
    font-size  : inherit;
    font-weight: normal;
    text-decoration : none;
    background-color: #333333;
}

footer a
{
    color: #aaaaaa;
    text-decoration: none;
}

footer a:hover
{
    color: #cccccc;
    text-decoration: none;
}

footer img
{
    padding: 2px;
    margin : 0px 20px 0px 0px;
    height : 112px;
    width  : auto;
    border : 2px solid #cccccc;
}

/* ------------------------------------------------------------
** AJUSTA LAS FORMATOS PARA MOVILES
** ------------------------------------------------------------ */

@media (max-width: 900px)
{
    body   {font-size: small;}
    .container {padding: 0px 15px 0px 15px;}
    .appbar{font-size: x-large; padding-left: 10px;}
    .navbar{font-size: small;   padding-left: 0px;}
    h3     {font-size: small;}
    td     {font-size: large;}
    select {font-size: small;}
    footer {font-size: small; padding: 20px 15px 40px 15px;}
    footer img {display: none;}
}

/* ------------------------------------------------------------
** SCROLL BAR
** ------------------------------------------------------------
** $darkGray  : #222;
** $mediumGray: #999;
** $gray      : #d9d9d9;
** $lightGray : #f5f5f5
** ------------------------------------------------------------ */

::-webkit-scrollbar
{
    width : 5px;
    height: 5px;
}

::-webkit-scrollbar-track
{
    background: #d9d9d9;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb
{
    background: #999;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb:hover
{
    background: #888;
}

/* --------------- */
/* -- BOTON TOP -- */
/* --------------- */

#myTopBtn
{
    display  : none;        /* Hidden by default */
    position : fixed;       /* Fixed/sticky position */
    bottom   : 20px;        /* Place the button at the bottom of the page */
    right    : 30px;        /* Place the button 30px from the right */
    z-index  : 99;          /* Make sure it does not overlap */
    border   : none;        /* Remove borders */
    outline  : none;        /* Remove outline */
    font-size: 18px;        /* Increase font size */
    color    : white;       /* Text color */
    cursor   : pointer;     /* Add a mouse pointer on hover */
    padding  : 15px;        /* Some padding */
    background-color: #555; /* Set a background color */
    border-radius: 10px;    /* Rounded corners */
    opacity  : 0.8;
    filter   : alpha(opacity=80); /* For IE8 and earlier */
}

#myTopBtn:hover
{
    background-color: #222; /* Add a dark-grey background on hover */
}