body {padding:0 10px; font-family: 'Roboto', sans-serif; background: url(/images/muukbg.jpg?as) #000; background-attachment: fixed; font-size:11px; background-size: cover;}

    #customers {border-collapse: collapse;width: 100%; margin:0 auto; font-size: 12px;}
    #customers td, #customers th {border: 1px solid #ff7f21;padding: 5px; height:25px}
    #customers th { height:0px; font-size:11px}
    .holder img { margin: 0 auto; display:block}
    .realtime img {width: 450px; margin: 0 auto; display:block}
    h1 {font-family: 'Solway', serif;}
    h1, h2 { font-size: 24px; margin:20px 0 10px 0; text-align: center; color:#ffffff; letter-spacing:1px; font-weight: normal; background: black;  display: block;  margin: 0 auto;  width: 240px;}
    h2 { font-size: 14px;  margin:0 0 20px 0}
    #customers tr:nth-child(even){background-color: #272727; color:#cccccc}
    #customers tr:nth-child(odd){background-color: #111111; color:#cccccc}
    #customers tr:hover {background-color: #111111; color:#ffffff}
    #customers th {padding-top: 8px;padding-bottom: 9px;text-align: left;color: black; border:1px solid #febb00}
    .holder {max-width: 1900px; margin: 20px auto}
    .tabHolder {max-width:450px;  width:450px; margin:0 auto}
    .tenkTab, .halfTab, .fullTab {height:30px; padding:8px 8px 0 8px; text-align:center; background-color:#000000; color:#ffffff; display:block; float:left; margin-right:5px; font-size: 18px; color:#ffffff}
    .tenkTab {width:105px; background-color: #444444}
    .halfTab {width:135px; background-color:#444444}
    .fullTab {width:105px; background-color:#444444}
    .tenkTab.active {background-color:#ff7f21; color:#000000}
    .halfTab.active {background-color:#ff7f21; color:#000000}
    .fullTab.active {background-color:#ff7f21; color:#000000}
    .registered {color: #ff7f21}
    .tenText .brandColor {color:#ff7f21}
    .halfText .brandColor  {color:#ff7f21}
    .fullText .brandColor  {color:#ff7f21}
    .tenBlock, .halfBlock, .fullBlock {max-width:450px;  width:100%; margin:0 auto}
    .tenBlock #customers td, .tenBlock #customers th {border:1px solid #8ee4ff}
    .halfBlock #customers td, .halfBlock #customers th {border: 1px solid #ff7f21}
    .fullBlock #customers td, .fullBlock #customers th {border: 1px solid #ff7f21}
    .sectionHeader {width:100%; float:left; color:#ffffff; text-align:center}
    .noFinishers {text-align:center; color:#ffffff; margin:20px}
    .introPara {width: 300px; display: block; margin: 10px auto; font-size: 15px; font-family: 'Solway', serif; background-color: rgba(0, 0, 0, 0.7);}
    .introPara a {color:white; text-decoration: underline;}
    .time {width:40px}
    .age {width:50px}
    .logo {width:200px !important; display:inline-block}
    .logoReg {width:80px !important; display:inline-block}
    .tableArea {width:100%;}
    .icons {width:20px !important}
    .fem {color:#dddddd}
    .male{color:#dddddd}
    .grey {color:#666666}
    .footer {width:100%; clear:both}
    p {color: #dddddd; text-align: center; }
    .realtime {color:white; text-align: center; width: 190px; clear:both; margin:20px auto; display: block; background-color: rgba(0, 0, 0, 0.7);font-family: 'Solway', serif; padding: 5px; font-size: 14px;}
    .realtime a {color:white}
    input.searchQuery {font-size: 36px;width: 150px;text-align: center;text-transform: uppercase;}
    .M50:first-of-type td.ageGr {background-color: red !important; font-weight: bold !important} 
    a.btnlink:visited {color: black;}
    .inline-inner {padding: 20px;}
    h4 {font-family: 'Solway', serif;margin-bottom: 25px;font-weight: 600;color: #000;font-size: 1.2em;}
    p {line-height: 1.7em;margin-bottom: 2em;color: #dddddd;}
    .fieldSet {width: 96%;  margin:5px 2%;  float: left; font-size: 11px; height: 65px; display:block; background-color: #2b2b2b; color:#c3c3c3 }
    .error {color:tomato; font-size: 18px; margin: 10px 0;font-family: 'Solway', serif;}
    .fieldInput .fieldInputPin {width:100%}
    select {font-size: 28px;}
    .btnbck { border-radius: 5px; background-color: orange; color:black; border:none; padding:10px; font-size: 18px; text-align: center; margin: 20px auto; display: block;}
    .close {width: 99%; text-align: right; color: #ffffff; font-size: 28px; padding: 10px 20px 0 0;}
    .blueBand, .redBand {width:46%; margin:5px 2%; float: left; height: 65px;}
    .redBand {background-color:#db6b62}
    .blueBand {background-color: #2c72c3;}
    .redbg {background-color: red; color: white;}
    .bluebg {background-color: blue; color: white;}
    .timeCol{width: 56px; text-align: center;}
    .smallColl, .rAge, .rNumber {width:54px; text-align: center !important;}
    .editRow {background-color: #787c85; }
    tr th{ background-color: #8ee4ff; color:#fff; font-weight: normal;}
    .cancelBtn, .submitBtn {width:96%; margin:5px 2%;float: left; text-align: center;}
    .totalRunners {text-align: center; color: white;font-size: 16px; margin: 10px 0; letter-spacing: 1px; line-height: 30px;}
    .submitBtn .btn {background-color: #d43d31}
    .cancelBtn .btn {background-color: #66221d}
    .btn {text-transform: uppercase; text-align: center; background-color: #161d27; color:white; width:80%;  display: block; padding:10%; font-size: 14px; letter-spacing: 1px;}
    .editBG {background-color: black }
    .raceNumber {width: 96%; margin: 20px 2%; font-size: 70px; color:#fff;text-align: center;border: none;border-bottom: 1px solid #4f5e64; background: transparent; letter-spacing: 1px}
    .fieldLabel {width: 96%; margin:5px 2%; font-size: 11px; color: #8c8c8c; font-weight: normal;  letter-spacing: 1px}
    .fieldLabelPin {width: 86%; margin:5px 7%; font-size: 11px; color: #8c8c8c; font-weight: normal;  letter-spacing: 1px}
    .raceNumberHolder, .runnersNameHolder {width: 100%; float: left; }
    .leftcolHolder, .runnersNameHolder {width: 48%; float: left; font-family: 'Solway', serif;}
    .runnersNameHolder {margin: 0 2% 2% 0}
    .leftcolHolder {margin: 0 0 2% 2%}
    .raceNumberHolder {height: 140px; margin:5px 2%;  background-color: #2b2b2b; width:96%}
    .runnersNameHolder input[type="text"], .leftcolHolder input[type="text"], .loginHolder  input[type="text"]{width: 96%; margin: 8px 5% 9px 2%; font-size: 18px; color:#fff;border: none;border-bottom: 1px solid #4f5e64; background: transparent; letter-spacing: 1px}
    .loginHolder p {color: #ffffff;}
    .fieldInputPin input[type="text"] {width:80%; margin:0 10%; font-size:22px;}
    select {margin-left:30%; background-color: #8b8b8b; font-size: 20px ;}
    .raceColourHolder img {height: 50px; display: block; padding-top: 10%}
    .searchClear img {height: 20px; display: block;}
    .addRunner img {height: 50px; display: block;}
    .searcArea {width: 240px; margin: 30px auto 70px auto}
    .searchQueryNew {width: 100%; height: 30px; font-size: 22px; font-family: 'Roboto', sans-serif; background-color: #2b2b2b; border:none; color:white; }
    .searchField {width: 160px;height: 30px;  float: left; display: block; }
    .searchClear {width: 40px; height: 30px; float: left; display: block; }
    .searchIntro {text-align: center; color: grey; letter-spacing: 1px; margin: 5px 0}
    h1 {font-size: 13px; line-height: 28px}
    .fontInc {font-size: 24px; text-transform: uppercase}
    .addRunner {width: 50px; margin: 0 auto; position: fixed; right:10px; top:10px}
    .fieldCheck {font-size: 16px; padding: 6px;}
    .checkboxPadding {padding:12px; font-size: 14px;}
    .checkboxPadding label {position: relative; top:-10px}
    input[type=checkbox] {width: 30px; height: 30px;}
    input[type="color"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="text"],
    select:focus,
    textarea {
    padding: 0; border-radius: 0;
    }





    @media  (max-width: 570px) {
        .tenBlock, .halfBlock, .fullBlock, .tabHolder { max-width:100%;  width:100%}
    }

    @media  (max-width: 440px) {
         .realtime img {width: 320px; }
 
        .tenBlock, .halfBlock, .fullBlock { padding:0px; max-width:100%; float:left; width:100%; margin:0 0 20px 0}
        #customers {font-size: 11px}
        .time {width:30px}
        .age {width:40px}
    }
    @media only screen and (max-width: 424px) {
  .checkboxPadding {padding:18px 0 0 14px; font-size: 12px;}
  .hiddenSmall {display: none}

  .tenkTab {width:90px; background-color: #444444; font-size: 15px;}
    .halfTab {width:105px; background-color:#444444; font-size: 15px;}
    .fullTab {width:85px; background-color:#444444; font-size: 15px;}
}