/* Our additions to Bootstrap --------------- */
.bg-bold.bg-danger {
    /*Old Color QC Team Stats Widget: background-color: #b22222;*/
    background-color: #C14E4E;
    color: white;    
}
.bg-bold.bg-warning {
    /*Old Color QC Team Stats Widget: background-color: #ffff00;*/
    background-color: #FFFF99;
    color: black;
}
.bg-bold.bg-info {
    background-color: #7BAEDA;
    color: black;
}
.bg-bold.bg-success {
    /*Old Color QC Team Stats Widget: background-color: #32cd32;*/
    background-color: #70DC70;
    color: black;
}
.bg-bold.bg-primary {
    background-color: #2E618D;
    color: white;
}


/* Bootstrap overrides ---------------------- */
/* Default header sizes are dumb. Why do browsers make them monster sized?  Anyways, adjust them to a manageable size so nobody is tempted to use an h2 because it's smaller and generate poor semantic html */
h1, .h1 {
    font-size: 24px;
    margin-top: 15px;
    margin-bottom: 15px;
}

h2, .h2 {
    font-size: 21px;
    margin-top: 15px;
    margin-bottom: 15px;
}

h3, .h3 {
    font-size: 18px;
    margin-top: 15px;
    margin-bottom: 15px;
}

h4, .h4 {
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
}

h5, .h5 {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
}

h6, .h6 {
    font-size: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Realistically, we should only have one set of breadcrumbs for our entire application, so let's set a consistent style for it, rather than adding a class for wh-breadcrumbs.
    If we decide to have more than one set of breadcrumbs, with different styling, consider creating two separate sets of classes, and move this to each one in the BootstrapLayout.css file */
.breadcrumb {
    background-color: white;
    margin-bottom: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.breadcrumb {
    padding-left: 0;
}

/* Don't allow tooltips to scrunch down when containing div is narrow */
.tooltip-inner {
    min-width: 200px;
}

/* Unless otherwise specified, we want the footer row to be bolded. Think subtotals. */
table.table tfoot {
    font-weight: bold;
}

/* Unless otherwise specified, we want to have a little bit of spacing inside of our tooltips that looks consistent across the board */
.tooltip-inner hr {
    padding: 0;
    margin: 5px 0;
}

/* Data-toggle is necessary for tooltips, class names are not, so this is a more robust solution to ensure we always have a different cursor style on tooltips */
[data-toggle="tooltip"]:hover {
    cursor:help;
}

/* Make nav-tabs more obvious and easier to see */
.nav-tabs > li.active {
    font-weight: bolder;
}

.nav-tabs > li {
    font-weight: normal;
}

.nav-tabs > li > a {
    color: #000;
    background-color: #f0f0f0;
}

.nav-tabs > li > a:hover {
    background: #c0c0c0;
}

/* Wheelhouse-way of doing paging links, so that we don't use cumbersome a tags whenever we want to use a javascript next button 
    Rather than adding a wheelhouse-specific class to every set of paging links, override the default Bootstrap Paging Links so we can easily change it across the board later. */
.pager li.summary,
.pager li.next-page,
.pager li.previous-page {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 15px;
    display: inline-block;
    padding: 5px 14px;
}

.pager li.disabled {
    color: #ddd;
}

.pager li.next-page:hover,
.pager li.next-page:focus,
.pager li.previous-page:hover,
.pager li.previous-page:focus {
    background-color: #eee;
    text-decoration: none;
    cursor: pointer;
}

.pager li.disabled.next-page:hover,
.pager li.disabled.next-page:focus,
.pager li.disabled.previous-page:hover,
.pager li.disabled.previous-page:focus {
    cursor: default;
    background-color: #fff;
}

.alert {
	margin-bottom: 5px;
	margin-top: 5px;
}