/* custom styles for rm_racebox application
-------------------------------------------------- */

:root {
    --primary: #2c3e50;
    --darkblue: #2c4c7c;
    --darkred: #8b0000;
    --darkgrey: #a9a9a9;
    --red: #c20000;
    --white: #ffffff;
    --black: #000000;
    --green: #18bc9c;
    --grey: #708090;
    --lightgrey: #e6e6e6;
    --lightyellow: #eee8aa;
    --lightorange: #f39c12;
    --lightred: #e74c3c;
    --lightblue: #add8e6;
}

/* flatly colours
 - primary     #2C3E50
 - success     #18BC9C
 - info        #3498DB
 - warning     #F39C12
 - danger      #E74C3C
 - default     #95A5A6
 - shade       #ECF0F1
 */

html { position: relative; min-height: 100%; }

/* style for body  - margin for navbar/footer, default font */
body { margin-top: 40px; margin-bottom: 40px;  font-family: Kalinga, Arial, sans-serif; }

/* style for main page container after body */
body > .container { padding: 10px 0px 0px 0px; }

/* top margin styles */
.margin-top-0  { margin-top: 0.0em; }
.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-40 { margin-top: 4.0em; }

/* padding styles */
.padding-bot-10 { padding-bottom: 1.0em; }

/* horizontal margin styles */
.margin-center-30 { margin-left: 30%; margin-right: 30%; padding-top: 10px; padding-bottom:  10px; }
.margin-right-40 {margin-right: 40px;}

/* text styles */
.lead { line-height: 1.1 !important;}
.bunch-text { line-height: 1.2 !important; font-size: 18px !important; padding: 6px 6px !important;}
.help-title-text {color: var(--white); font-size: 1.5em;}
.help-answer-text {color: var(--darkblue); font-size: 1.2em;}
.help-notes-text {color: var(--darkred); font-size: 1.2em;}

/* growls */
.growl-container { font-size: 1.2em; line-height: 1.2; }
.growl-left { display:inline-block; vertical-align: top; width:5%; margin:0; padding:0; font-size: 1.5em;}
.growl-right { display:inline-block; width:90%; text-wrap:none;
}

/* alerts bootstrap default (NOT _flatly colors) */
.alert-primary { background-color: var(--primary) !important; color: var(--white) !important; border-color: #121a21 !important;}
.alert-warning { background-color: #f8edba !important; color: #8a6d3b !important; border-color: #8a6d3b !important;}
.alert-success { background-color: #dff0d8 !important; color: #3c763d !important; border-color: #3c763d !important;}
.alert-info    { background-color: #d9edf7 !important; color: #31708f !important; border-color: #31708f !important;}
.alert-danger  { background-color: #f2dede !important; color: #a94442 !important; border-color: #a94442 !important;}

/* tables */
.table-condensed > tbody > tr > td { padding: 2px; }
.table-hover tbody tr:hover td { background: var(--lightblue); }
.table-hover tbody.rowlink tr:hover td { background: var(--lightblue); }
.table-borderless tbody tr td, .table-borderless tbody tr th, .table-borderless thead tr th { border: none; }
.table-top-padding tbody tr:first-of-type td { padding-top: 10px; }
.table-top-border thead tr th {border-bottom: 4px solid var(--darkblue);}
.table-data { font-size: 1.25em; line-height: 1.8}

/* forms */
.help-block { font-style: italic; color: var(--grey); font-weight: normal}
.form-control { border: 1px solid var(--darkgrey) !important}
.form-condensed { margin-bottom: 7px; }
.form-control-feedback { padding-left: 20px; font-size: 0.7em; color: var(--green); }  /* fixme */
.form-help {color: var(--darkgrey);}
::-webkit-input-placeholder { text-transform: none;}
:-moz-placeholder { text-transform: none; }
::-moz-placeholder { text-transform: none;}
:-ms-input-placeholder { text-transform: none; }
::placeholder { text-transform: none; }

/* right hand page buttons */
#rhcol .btn {text-align: left !important;}

/* modals (using _flatly colors)*/
.bg-danger-modal  {background-color: var(--lightred); color: var(--white);}
.bg-warning-modal {background-color: var(--lightorange); color: var(--white);}
.bg-primary-modal {background-color: var(--primary); color: var(--white);}
.bg-success-modal {background-color: var(--green); color: var(--white);}
.bg-info-modal    {background-color: #3498DB; color: var(--white);}
.bg-default-modal {background-color: #95A5A6; color: var(--black);}
.bg-shade-modal   {background-color: #ECF0F1; color: var(--black);}
.modal-footer {margin-top: 0px; padding: 5px 20px 10px; }
.modal-close { font-size: 18px !important; color: var(--white) !important; text-shadow: none !important;
               filter: none !important; opacity: 1.0 !important; }
.modal-lg {width: 1100px !important}
.modal-md {width: 800px !important}
.modal-sm {width: 600px !important}

/* navpills */
.pill-fleet li.active a, .pill-fleet li.active a:focus, .pill-fleet li.active a:hover { background-color: var(--primary); }
.pill-fleet li {min-width:200px; }
.pill-fleet li a {border: 3px solid var(--lightgrey) !important; }

/* drop down menu */
.dropdown-menu {background-color: var(--lightgrey); color: var(--black); font-size: 1.2em;}
.dropdown-menu > li > a { padding:1px 10px !important;}

/* race page classes*/
#racetable td { vertical-align: middle; }

/* timer page row classes */
.table > tbody > tr.default  {}
.table > tbody > tr.racing   {}
.table > tbody > tr.finished {background-color: var(--lightgrey); color: var(--grey);}
.table > tbody > tr.excluded {background-color: var(--lightgrey); color: var(--grey);}
.table > tbody > tr.lastlap  {background-color: var(--lightyellow); }

.truncate        { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inline-button   { padding: 0px 5px 0px 5px; text-align: center; }

.laptime-racing  { background-color: var(--green); color: var(--white); }   /* flatly: success */
.laptime-lastlap { background-color: var(--lightorange); color: var(--black); }   /* flatly: warning */
.laptime-finish  { background-color: var(--grey); color: var(--white); }

/* styles for navbar */
.rm-brand-title          { font-size: 160% !important; }
.rm-brand-title:hover    {color: var(--lightorange);}
.rm-navmenu              { font-size: 160%; color: white; }
.rm-navmenu:hover        { color: var(--lightorange); }
.rm-navmenu-active       { font-size: 160%; color:  var(--lightred); }
.rm-navmenu-active:hover { color: var(--lightorange); }
.rm-navmenu-right        { font-size: 160%; }
.rm-navmenu-icon:hover   { color: var(--lightorange); }

@media (min-width: 1600px) { .navbar li { margin-left : 1.5em; margin-right : 1.5em; } }

/* timer styles */
.timer-lg { width: 100%; height: 70px; padding: 4px; font-weight: bold; text-align: center; color: var(--white);
            background-color: var(--black); font-size: 48px; border-radius: 4pt; }
    
.timer-sm { width: 120px; height: 36px; padding: 4px; font-weight: bold; text-align: center; color: var(--white);
            background-color: var(--black); font-size: 24px; border-radius: 4pt; }

.timer-tt-lap { color: white; font-size: 2em; line-height: 1.5; background-color: var(--darkblue); }