*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } small {color:#808080;} /* Tables */ /* Responsive scroll-y table */ .table-responsive {min-height:.01%; overflow-x:auto;} @media screen and (max-width: 801px) { .table-responsive {width:100%; overflow-y:hidden; -ms-overflow-style:-ms-autohiding-scrollbar;} } /* Default table */ table { border-collapse:collapse; border-spacing:0; -webkit-box-shadow:0px 7px 6px -6px rgba(0,0,0,.28); -moz-box-shadow:0px 7px 6px -6px rgba(0,0,0,.28); box-shadow:0px 7px 6px -6px rgba(0,0,0,.28); margin-bottom:40px; margin-top:.5em; width:100%; max-width:100%; } table thead tr {border-bottom:2px solid #0085a6; color:#000;} table tfoot tr {border-top:3px solid #0085a6;} table thead th, table tfoot th { color:#000; font-size:.83333em; line-height:1.8; padding: 15px 14px 13px 14px; position:relative; text-align:left; text-transform:uppercase; } table tbody tr {background-color:#fff;} table tbody tr:hover {background-color:#eee; color:#000;} table th, table td { border:2px solid #bfbfbf; padding:10px 14px; position:relative; vertical-align:middle; } caption {font-size:1.111em; font-weight:300; padding:10px 0;} @media (max-width:1024px) { table {font-size: .944444em;} } @media (max-width:767px) { table {font-size: 1em;} } /* Responsive table full */ @media (max-width: 767px) { .table-responsive-full {box-shadow:none;} .table-responsive-full thead tr, .table-responsive-full tfoot tr {display:none;} .table-responsive-full tbody tr { -webkit-box-shadow:0px 7px 6px -6px rgba(0,0,0,.28); -moz-box-shadow:0px 7px 6px -6px rgba(0,0,0,.28); box-shadow:0px 7px 6px -6px rgba(0,0,0,.28); margin-bottom:20px; } .table-responsive-full tbody tr:last-child {margin-bottom:0;} .table-responsive-full tr, .table-responsive-full td {display:block;} .table-responsive-full td { background-color:#fff; border-top:none; position:relative; } .table-responsive-full td:hover {background-color:#eee; color:#000;} .table-responsive-full td:hover:before {color:hsl(0, 0%, 40%);} .table-responsive-full td:first-child { border-top:1px solid #bfbfbf; border-bottom: 3px solid #0085a6; border-radius: 4px 4px 0 0; color: #000; font-size: 1.11111em; } .table-responsive-full td:before { content: attr(data-label); display: inline-block; color: hsl(0, 0%, 60%); font-size: 14px; font-weight: normal; text-transform: uppercase; width: 100%; white-space:nowrap; } } @media (max-width: 360px) { .table-responsive-full td {padding-left:14px;} .table-responsive-full td:before {display:block; margin-bottom:.5em; margin-left:0;} } /* Sort table */ .sort-table-arrows {float:right; transition:.3s ease;} .sort-table-arrows button {margin:0; padding:4px 8px;} .sort-table th.title, .sort-table th.composer {width:20% !important;} .sort-table th.lyrics, .sort-table th.arranger, .sort-table th.set, .sort-table th.info {width:15% !important;} .sort-table .title {font-weight: bold;} .sort-table .title small {font-weight:normal;} @media (max-width:1024px) { .sort-table th,.sort-table-arrows {text-align:center;} .sort-table-arrows {float:none; padding:8px 0 0; position:relative; right:0px;} .sort-table-arrows button {bottom:0;} } @media (max-width:767px) { .sort-table thead tr {border-bottom:none; display:block; margin:10px 0; text-align:center;} .sort-table thead tr th.arranger {display:none;} .sort-table th { border-bottom:1px solid #bfbfbf; border-radius:4px; display:none; font-size:.75em; line-height:1; margin:3px 0; padding:10px; } .sort-table th.title, .sort-table th.composer, .sort-table th.lyrics, .sort-table th.set, .sort-table th.info {width: 100px !important;} .sort-table td.title:before {display:none;} .sort-table td.title {letter-spacing:.03em; padding-left:14px;} }