body, html {
font-family: Helvetica, sans-serif;
}
.text--center {
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 50px;
color:#fff;
}
/* Zebra striping */
/*
tr:nth-of-type(odd) {
background: #eee;
}
*/
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: center;
}
tr { background:#18202d; }
.mobile-radio-france--skipper {
text-align: left;
}
.table-img {
width: 50px;
}
.live {
border-collapse: separate;
border-spacing: 2px;
}
.live th {
background: none;
border: none;
}
.table-live-header {
background-color: transparent;
}
.position{
font-family: 'Montserrat', sans-serif;
font-size: 40px;
font-weight: 700
}
.bold {
font-family: "Montserrat",sans-serif;
font-weight: 700;
}
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.position {
font-family: "Montserrat",sans-serif;
font-size: 26px;
font-weight: 700;
}
tr {border: 1px solid #ccc; }
td {
/* Behave like a "row" */
text-align: left;
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/* Label the data
-------------------------------------------------------- */
/*General JSON Data*/
td.mobile-general-fr:nth-of-type(1):before { content: "Rang"; font-size: 13px;}
td.mobile-general-fr:nth-of-type(2):before { content: "Skipper / Bateau / Bateau";font-size: 13px; }
td.mobile-general-fr:nth-of-type(3):before { content: "Temps cumulé";font-size: 13px; }
td.mobile-general-fr:nth-of-type(4):before { content: "Ecart au premier";font-size: 13px; }
td.mobile-general-fr:nth-of-type(5):before { content: "Ecart au précédent"; font-size: 13px;}
td.mobile-general-fr:nth-of-type(6):before { content: "Temps étape 1";font-size: 13px; }
td.mobile-general-fr:nth-of-type(7):before { content: "Temps étape 2";font-size: 13px; }
td.mobile-general-fr:nth-of-type(8):before { content: "Temps étape 3";font-size: 13px; }
td.mobile-general-fr:nth-of-type(9):before { content: "Temps étape 4";font-size: 13px; }
td.mobile-general-en:nth-of-type(1):before { content: "Rank"; font-size: 13px;}
td.mobile-general-en:nth-of-type(2):before { content: "Skipper / Boat";font-size: 13px; }
td.mobile-general-en:nth-of-type(3):before { content: "Total Time"; font-size: 13px;}
td.mobile-general-en:nth-of-type(4):before { content: "Distance to the leader";font-size: 13px; }
td.mobile-general-en:nth-of-type(5):before { content: "Distance to the last"; font-size: 13px;}
td.mobile-general-en:nth-of-type(6):before { content: "Total Time Leg 1";font-size: 13px; }
td.mobile-general-en:nth-of-type(7):before { content: "Total Time Leg 2";font-size: 13px; }
td.mobile-general-en:nth-of-type(8):before { content: "Total Time Leg 3";font-size: 13px; }
td.mobile-general-en:nth-of-type(9):before { content: "Total Time Leg 4";font-size: 13px; }
/* Ranking JSON Data */
td.mobile-ranking-fr {text-align: left; font-size: 14px;}
td.mobile-ranking-fr:nth-of-type(1):before { content: "Position"; font-size: 13px;}
td.mobile-ranking-fr:nth-of-type(2):before { content: "Skipper / Bateau"; font-size: 13px;}
td.mobile-ranking-fr:nth-of-type(3):before { content: "Changement";font-size: 13px; }
td.mobile-ranking-fr:nth-of-type(4):before { content: "Premier"; font-size: 13px;}
td.mobile-ranking-fr:nth-of-type(5):before { content: "Terminer";font-size: 13px; }
td.mobile-ranking-fr:nth-of-type(6):before { content: "La vitesse"; font-size: 13px;}
td.mobile-ranking-en {text-align: left; font-size: 14px;}
td.mobile-ranking-en:nth-of-type(1):before { content: "Position";font-size: 13px; }
td.mobile-ranking-en:nth-of-type(2):before { content: "Skipper / Boat";font-size: 13px; }
td.mobile-ranking-en:nth-of-type(3):before { content: "Change";font-size: 13px;}
td.mobile-ranking-en:nth-of-type(4):before { content: "First";font-size: 13px; }
td.mobile-ranking-en:nth-of-type(5):before { content: "Finish"; font-size: 13px;}
td.mobile-ranking-en:nth-of-type(6):before { content: "Speed";font-size: 13px; }
/* Mobile for Radio France*/
td.mobile-radio-france-fr:nth-of-type(1):before { content: "Rang"; font-size: 13px;}
td.mobile-radio-france-fr:nth-of-type(2):before { content: "Skipper/Bateau";font-size: 13px;}
td.mobile-radio-france-fr:nth-of-type(3):before { content: "Étape 1";font-size: 13px;}
td.mobile-radio-france-fr:nth-of-type(4):before { content: "Étape 2";font-size: 13px;}
td.mobile-radio-france-fr:nth-of-type(5):before { content: "Étape 3";font-size: 13px;}
td.mobile-radio-france-fr:nth-of-type(6):before { content: "Étape 4";font-size: 13px;}
td.mobile-radio-france-fr:nth-of-type(7):before { content: "Total";font-size: 13px;}
td.mobile-radio-france-en:nth-of-type(1):before { content: "Rank"; font-size: 13px;}
td.mobile-radio-france-en:nth-of-type(2):before { content: "Skipper/Boat";font-size: 13px; }
td.mobile-radio-france-en:nth-of-type(3):before { content: "Leg 1";font-size: 13px; }
td.mobile-radio-france-en:nth-of-type(4):before { content: "Leg 2";font-size: 13px; }
td.mobile-radio-france-en:nth-of-type(5):before { content: "Leg 3";font-size: 13px; }
td.mobile-radio-france-en:nth-of-type(6):before { content: "Leg 4";font-size: 13px; }
td.mobile-radio-france-en:nth-of-type(7):before { content: "Total";font-size: 13px; }
}
/* ----------------------------------------------------
classes to hightlignt errors
---------------------------------------------------- */
.text-danger {
color: #a94442;
}
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}