
    .logo { position: absolute;
            top:5px;
            margin-left: 30px;
            left: 0;
            right: 0;}

nav {
  /*max-width: 960px;*/
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #ffffff 25%, #ffffff 55%, rgba(0, 0, 0, 0) 100%);
  /*padding: 75px 0;*/
}

nav ul[data-role="listview"].ui-listview {
  background: linear-gradient(80deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.2) 95%, rgba(0, 0, 0, 0) 100%);
  box-shadow: 0 0 225px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}

nav ul[data-role="listview"].ui-listview >li {
  /*display: inline-block;*/
  background: linear-gradient(80deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0.8) 95%, rgba(0, 0, 0, 0) 100%);
  /*
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
  */
}

  .ui-page .ui-header  {
      background: linear-gradient(80deg, rgba(0, 0, 0, 0) 0%,
                                   rgba(0, 0, 0, 0.8) 25%,
                                   rgba(0, 0, 0, 0.8) 95%,
                                   rgba(0, 0, 0, 0) 100%);
      border : none;
  }
  .menunav  {
      background: linear-gradient(80deg, rgba(0, 0, 0, 0) 0%,
                                   rgba(0, 0, 0, 0.8) 25%,
                                   rgba(0, 0, 0, 0.8) 95%,
                                  rgba(0, 0, 0, 0) 100%);
      border : none;
  }
  .cuadro  {
      border: 1px solid rgba(85, 85, 87, 0.3);
      background-color: rgb(0, 0, 0, 0.8);
      background: linear-gradient(80deg, rgba(85, 85, 87, 0.5) 0%,
                                   rgba(0, 0, 0, 0.8) 25%,
                                   rgba(85, 85, 87, 0.8) 95%,
                                  rgba(85, 85, 87, 0.5) 100%);
        border-top-left-radius: 15px;
        -webkit-border-top-left-radius: 15px;
        -moz-border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        -webkit-border-top-right-radius: 15px;
        -moz-border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        -webkit-border-bottom-right-radius: 15px;
        -moz-border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
        -webkit-border-bottom-left-radius: 15px;
        -moz-border-bottom-left-radius: 15px;
        box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
        padding-left: 10px;
        padding-right: 10px;
        margin-right: 10px;
        
  }
      


/*
nav ul[data-role="listview"].ui-listview >li> a {
  font-family: "Roboto";
  color: rgba(0, 0, 0, 0.5);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
  font-size: 25px;
  text-decoration: none;
  display: block;
}

nav ul[data-role="listview"].ui-listview >li:hover> a {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(0, 0, 0, 0.7);
}
*/


   .footer {
        background: url("../images/bg-footer-noise.jpg") repeat;
        background-position:top;
        margin-top: -20px;
        padding-top: 40px;
        border-top: solid 1px #333;
        box-shadow: #000 0 -1px 0;
        position:relative; z-index: -1;
    }
    .legal {
        margin-top: 1em;
        border-top: solid 1px #333;
        box-shadow: #000 0 -1px 0;
     }
    .legal p.copyright {
        text-align:center;
        margin: 10px 0 0 0;
        width: 40%;
        font-size: 11px;
        line-height: 130%;
        color: #777;
    }

/* These apply across all breakpoints because they are outside of a media query */
/* Make the labels light gray all caps across the board */
.movie-list thead th,
.movie-list tbody th .ui-table-cell-label,
.movie-list tbody td .ui-table-cell-label {
    text-transform: uppercase;
    font-size: .7em;
    color: rgba(0,0,0,0.5);
    font-weight: normal;
}
/* White bg, large blue text for rank and title */
.movie-list tbody th {
    font-size: 0.5em;
    background-color: #fff;
    color: #77bbff;
    text-align: center;
}
/*  Add a bit of extra left padding for the title */
.movie-list tbody td.title {
    padding-left: .8em;
}
/* Add strokes */
.movie-list thead th {
    border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.movie-list tbody th,
.movie-list tbody td {
    border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback  */
    border-bottom: 1px solid rgba(0,0,0,.05);
}
/*  Custom stacked styles for mobile sizes */
/*  Use a max-width media query so we don't have to undo these styles */
@media (max-width: 40em) {
    /*  Negate the margin between sections */
    .movie-list tbody th {
        margin-top: 0;
        text-align: left;
    }
    /*  White bg, large blue text for rank and title */
    .movie-list tbody th,
    .movie-list tbody td.title {
        display: block;
        font-size: 1.2em;
        line-height: 110%;
        padding: .5em .5em;
        background-color: #fff;
        color: #77bbff;
        -moz-box-shadow: 0 1px 6px rgba(0,0,0,.1);
        -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.1);
        box-shadow: 0 1px 6px rgba(0,0,0,.1);
    }
    /*  Hide labels for rank and title */
    .movie-list tbody th .ui-table-cell-label,
    .movie-list tbody td.title .ui-table-cell-label {
        display: none;
    }
    /*  Position the title next to the rank, pad to the left */
    .movie-list tbody td.title {
        margin-top: -2.1em;
        padding-left: 2.2em;
        border-bottom: 1px solid rgba(0,0,0,.15);
    }
    /*  Make the data bold */
    .movie-list th,
    .movie-list td {
        font-weight: bold;
    }
    /* Make the label elements a percentage width */
    .movie-list td .ui-table-cell-label,
    .movie-list th .ui-table-cell-label {
        min-width: 20%;
    }
}
/* Media query to show as a standard table at wider widths */
@media ( min-width: 40em ) {
    /* Show the table header rows */
    .movie-list td,
    .movie-list th,
    .movie-list tbody th,
    .movie-list tbody td,
    .movie-list thead td,
    .movie-list thead th {
        display: table-cell;
        margin: 0;
    }
    /* Hide the labels in each cell */
    .movie-list td .ui-table-cell-label,
    .movie-list th .ui-table-cell-label {
        display: none;
    }
}
/* Hack to make IE9 and WP7.5 treat cells like block level elements */
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this */
@media ( max-width: 40em ) {
    .movie-list td,
    .movie-list th {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        clear: left;
    }
}



