body { font-family: titillium web,sans-serif; background: url(/bits/bigwolf.png) #212121 no-repeat; background-size: 1500px; background-position: center top;}
.checkinRun { max-width: 300px; margin: 0 auto } 
.errorText { color:#e66262; margin: 5px; display: block; } 
.blockColour { background-color: #35a69b; } 
.inActive .blockColour { background-color: #2e6863; } 
.form-container { background: #444444; border: #555555 1px solid; padding: 20px; border-radius: 2px; max-width: 400px; margin: 0 auto}
.red, .redB { color:#638582; font-size: 14px; } 
.live-container { max-width: 700px; margin: 0 auto}
.logoimg {width:300px; margin:0 auto; display:block}
.nextAllowed, .nextNot, .alreadySubmited, .checkinRun, .logged, .notStarted, .itsOver, .dnfd, .completedForm { display: none; } 
.checkmark { display: inline-block; transform: rotate(45deg); height: 20px; width: 8px; border-bottom: 1px solid #222222; border-right: 1px solid #222222; }
h2 { color: #fff; font-size: 21px; text-align: center; font-size: 19px; } 
button {width: 80%; max-width: 400px; padding: 10px; font-family: titillium web,sans-serif; border-radius: 2px; font-size: 22px; margin: 20px auto 0 auto; border: none; display: block } 
.lap { background-color: #5aa1c2; color: #222; text-decoration: none; } 
.lapBlock { border: 1px solid #bfaf9d; font-size: 12px; float: left; margin:0.5%; padding: 3px; width: 13.3%; }
.lapLabel {color: #bfaf9d}
.DNF .lap { text-decoration: none; background-color: #3a6c81;} 
.DNF .tleft, .DNF .tcentre {color: #aaaaaa}
.Active .tleft, .Active .tcentre {color: #5aa1c2}
.Winner .lap { text-decoration: none; background-color: gold;} 
.chevron {width:15px; height: 15px;margin-right: 8px;}

.Winner .tleft, .Winner .tcentre {color: gold}
.checkin { padding: 0px; max-width: 120px; }
.nextInfo {font-size: 18px; color: #3ba69b} 
a.noUnder { text-decoration: none; } 
.dnf, .dnf a { color: #222 !important; text-decoration: none; } 
/* .DNF td, .DNF td {color:grey !important} */
.compeltedSticker {width: 100%;}
.tableBody td {border-top: 1px solid #444;}
.lapsRow td {border: none !important; padding-left: 20px;}
table { width: 100%; border-spacing: 1; } 
thead { border: none } 
td, th { padding: 8px 0px; color: white; height: 25px; } 
td {  text-align: center; } 
.runner td { border-right:1px solid #333333 } 
.noBorder { border-right:none !important } 
.tcentre { text-align: center; } 
.tleft { text-align: left; } 
.rName { color: #5aa1c2 } 
.active a {text-decoration: none;}
.broadCol {width:46%}
.narrowCol {width:11%}
.inActive .rName, .inActive a { color: #48626e ; text-decoration: none;} 
.text-container { text-align: center; padding: 20px; max-width: 400px; margin: 0 auto}
.text-container a {text-decoration: none;}
.insta  {width: 15px; margin-left: 5px; top: 2px; position: relative;}
.text-containerCenter { padding: 20px; max-width: 400px; margin: 0 auto; text-align: center; }
p, li { color:#dddddd; } 
select { width: 100%; background: #ffffff; height: 25px; }
.input-row {margin: 0 auto 20px auto; max-width: 300px; }
.input-row label { color: #ffffff; font-size: 16px; margin: 15px 0 5px 0;width: 100%;float: left; }
.input-field, textarea { width: 100%; border-radius: 2px; padding: 10px; border: #e0dfdf 1px solid; box-sizing: border-box; margin-top: 2px; font-size: 16px; }
.span-field { font: Arial; font-size: small; text-decoration: none; }
.btn-submit { padding: 10px 60px; background: #5aa1c2;; border: none; color: black; font-size: 0.9em; border-radius: 2px; cursor: pointer; }
.errorMessage { background-color: #e66262; border: #AA4502 1px solid; padding: 5px 10px; color: #FFFFFF; border-radius: 3px; }
.successMessage {background-color: #9fd2a1; border: #91bf93 1px solid; padding: 5px 10px; color: #3d503d; border-radius: 3px; cursor: pointer; font-size: 0.9em; }
.info { font-size: .8em; color: #e66262; padding-left: 5px; display: inline-block }
.doneIt {color:#35a69b; font-size: 16px;}
.check {margin-bottom: 32px; width:100%; float: left; color: white}
.check .terms {width: 80%; display: block; float: left; position: relative; top: 16px;}
.check input {width: 20px;display: block; float: left; position: relative; top: 19px; margin-right: 10px;}
.completedIt {font-size: 22px; color: white}
#terms-info {display: block; width:100%; clear:both;}
a, a:visited {color:#5aa1c2; text-decoration: underline;}
.titles {text-align: left}
.titles h3 { margin: 4px 0 4px 25px;color: grey; font-size: 16px; letter-spacing: 1px; font-weight: 100;}
.laps {background-color: rgba(203, 231, 238, 0.05);}
.totals {background-color: rgba(180, 166, 150, 0.05);}
.brown {color:#b4a696}
.blue {color:#cbe7ee}
@media (max-width: 768px) { 
    body {background: url(/bits/mobwolf.png) #212121 no-repeat; background-size: contain;}
}

@media (max-width: 650px) { 
    
    .broadCol {width:34%}
    .narrowCol {width:5.5%}
}

@media (max-width: 600px) { 
    .red { font-size: 10px; } 
    td, th { padding:5px; } 
    p, li { color: #dddddd; font-size: 14px; }
}

@media (max-width: 500px) { 
    .chevron {width:15px; height: 15px;margin-right: 3px;}
    .narrowCol {width:11%}
    .logoimg {width:150px; margin:0 auto; display:block}
    .red { font-size: 7px; } 
    td, th { padding:3px; } 
    th, td { font-size: 11px; }
    .rName { color: #5aa1c2; font-size: 12px; }
    .live-container { width: 100%; max-width: 900px; margin: 0 auto } 
    .checkmark { height: 10px; width: 3px; border-bottom: 1px solid #222222; border-right: 1px solid #222222; }
}