body, div, td, th, p, div, h1, h2, h3, h4, h5 {
	font-family: ProximaNova, Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
} 
.mainBody {
  padding: 25px;
  }

/* datepicker calendar colors for UPS shipping  */  
.cal-oneday a {
  background: #ff6a6a !important;
}
.cal-twoday a {
  background: #ffb062 !important;
}
.cal-threeday a {
  background: #e2f587 !important;
}
.cal-ground a {
  background: #a8f777 !important;
}

.cartBox {
 top:95px;
 width:265px;
}

/* Buttons */
.btn-donate,
.btn-donate:link,
.btn-donate:visited {
	background-color: #FF7700;
	border: 1px solid #E8520C;
	color: white;
}
.btn-donate:hover,
.btn-donate:active {
	background-color: #E8520C;
	border: 1px solid #FF7700;
	color: white;
}
/* Labels */
.label-donate { background-color: #FF7700; }
/* Text Classes */
.text-donate { color: white; }
.donate-color { color: #FF7700; }

/*************************

    tl;dr - TWBSColor - Generate your own Bootstrap navbar

    Version notes: - Online tool: Bootstrap 3.3.2+ / 4.0.0+ - This answer: Bootstrap 3.0.x

Available navbars

You've got two basic navbars:

<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

Default color usage

Here are the main colors and their usage:

    #F8F8F8: navbar background
    #E7E7E7: navbar border
    #777: default color
    #333: hover color (#5E5E5E for .nav-brand)
    #555: active color
    #D5D5D5: active background

Default style

If you want to put some custom style, here's the CSS you need to change:

 **************************/

/* navbar */
.navbar-default {
    background-color:#00269A; /* previous value 0d1230 */
    border-color: #00269A; /* previous value 0d1230  */
}
/* Title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* Link - main text on nagivation */
.navbar-default .navbar-nav > li > a {
    color: white;
	font-size:18px;
}
/* mouse over main text on navigation bar */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #00C2F3;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
/* selected main menu item */
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #FFFFFF;
    background-color: #003763;
}
/* Caret on main menu text */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: silver;
    border-bottom-color: silver;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
          color: #333;
    }
}

/******************************
    END OF COLOR NAVIGATION 
 ******************************/ 
 

.modal.modal-medium .modal-dialog {
  width: 66%;
}
.modal-medium .modal-body {
  overflow-y: auto;
  max-height:430px;
}

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
  max-height:430px;
}

/* shade the inactive tab on navbar */
.nav-tabs li a {
 background-color: #cecee0;
 color: #3a4262;
}

.popSale:hover {
  text-decoration:underline;
  cursor: pointer;
}
.popPerson:hover {
  text-decoration:underline;
  cursor: pointer;
}
.popProduct:hover {
  text-decoration:underline;
  cursor: pointer;
}

.companyName {
  color: gray;
  font-size: 0.90em;
  text-transform: uppercase;
}
.productName {
 color: navy;
}

.timezone {
   font-size:60%;
   color:gray;
}

label.required::before {
  content: "*"; /* Content to be inserted */
  color: red; /* Color of the asterisk */
  margin-right: 5px; /* Optional: Adjust spacing between asterisk and label */
}
.form-group.required .control-label:after {
  content:"*";
  color:#ec0000;
  margin-right:-8px;
}

/* the hover over table row color */
/* I added the groupby to not hover over the table group row */
.table-hover tbody tr:hover:not(.groupby) td, 
.table-hover tbody tr:hover:not(.groupby) th {
  background-color: #C8E1FF ;
}


/* thinner gutters in bootstrap grids */
.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

.row.sm-gutter {
  margin-left: -15px;
  margin-right: -15px;
}

.row.sm-gutter [class*='col-']:not(:last-child) {
  padding-right: 5px;
}
.row.sm-gutter [class*='col-']:not(:first-child) {
  padding-left: 5px;
}
/* END thinner gutters in bootstrap grids END */

/* no gutter in bootstrap grids */
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}
/* END NO GUTTER */



/* hide the number spinner from numeric input fields for Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
/* hide number spinner from firefox */
input[type='number'] {
    -moz-appearance:textfield;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	}

.table-hover tbody tr.nohover:hover td,
.table-hover tbody tr:hover th {
  background-color: transparent;
}
.rowStripe {
 background-color: #eeeeee
 }
.rowStripeOff {
 background-color: white;
} 

/* this is the page title over the grids */
.page-heading {
   color: #3c763d;
   background-color: #dff0d8;
   border-color: #d6e9c6;
} 

div.count-sm {
  font-size:18px;
  color: darkgray;
  }	
div.count-md {
  font-size:24px;
  color: darkgray;
  }	
div.count-lg {
  font-size:32px;
  color: black;
  }	

/*****************
    Fix the Nav bar to the stop when scrolling
 *****************/
#fixedNavBar {
	margin-bottom: -50px; /* Accomodate for non-existent height when affixed */
	z-index: 1030;
	border-radius: 0px;
	left: 0px;
	right: 0px;
}

#fixedNavBar.affix {
	top: 0px;
}

/************************
    FOOTER
 ************************/
footer {
	background-color: #00269A;  /* 0d1230 */
	border-top: 1px solid #61b3e4;
}
footer a:link, footer a:visited, footer a:hover, footer a:active, footer a:focus {
	/*
	display: block;
	width: 100%;
	*/
	color: gray;
	text-decoration: none;
	font-size: 16px;
}
footer a:hover {
	/* background-color: rgba(0, 0, 0, 0.25); */
	color: #999;
}

/***  
	<cfset getTheme.color_a = "FA8076">
	<cfset getTheme.color_b = "DD33AA">
	<cfset getTheme.color_c = "CCBBAA">
	<cfset getTheme.color_d = "334400">
	<cfset getTheme.color_e = "666666">
	<cfset getTheme.color_f = "AA00FF">
	****/


.iconLabel {
  font-size: 16px;
  text-transform: uppercase;
  color: black;
  }
.hugeNumber {
  font-size:48px;
  line-height:50px;
  color:  #61b3e4;
  margin-bottom:10px;
  } 	
.bigNumber  {
  font-size:32px;
  color:  #61b3e4;
  } 	
.largeNumber  {
  font-size:24px;
  color:  #61b3e4;
  } 	
.mediumNumber  {
  font-size:21px;
  color:  #61b3e4;
  } 	
 
 
/*************************
    ZOOM IN on HOVER
 **************************/
.zoom:hover img {
  -moz-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  cursor: pointer;
}
.zoom:hover span, .zoom:hover div {
  -moz-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  cursor: pointer;
  color: navy;
  text-decoration:none;
}




/*************************
  VERTICALLY CENTER THE MODAL 
 **************************/
.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}



/*************************
  this it the box on each of the main landing pages
 **************************/

div.titleBox {
  min-height:500px;
  background-size:100% auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}
div.titleBox h1 {
 color:white;
 padding:150px 0 0 150px;
 font-size:72px;
 margin-top:0 !important;
 //text-shadow: 2px 2px darkgray;
}   


.textBody {
 font-size:22px;
 color:#808080;
}
.textBody p {
 margin-top:24px;
}





/* thinner gutters in bootstrap grids */
.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

.row.sm-gutter {
  margin-left: -15px;
  margin-right: -15px;
}

.row.sm-gutter [class*='col-']:not(:last-child) {
  padding-right: 5px;
}
.row.sm-gutter [class*='col-']:not(:first-child) {
  padding-left: 5px;
}
/* END thinner gutters in bootstrap grids END */

/* no gutter in bootstrap grids */
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}
/* END NO GUTTER */





.btn-primary, .btn-primary:hover, .btn-primary:active {
  background-color: #00269A;
  border: 1px solid silver;
}
.btn-primary {
  color: white;
  background-repeat: repeat-x;
  background-image: linear-gradient(top, #00FFFF 0%, #00C3F3 100%);
  /*
  font-size: 14px;
  padding:7px 30px;
  min-width: 130px;
  border-radius:17px;        /*supported by all latest Browser
  -moz-border-radius: 17px;   /*For older Browser
  -webkit-border-radius:17px;/*For older Browser
    **/
}
.btn-primary:hover {
  color: white;
  background-color: #004d9a;
  background-position: 0 -10px;
}



.btn-info, .btn-info:hover, .btn-info:active {
  background-color: #00C2F3;
  border: 1px solid silver;
}
.btn-info {
  color: white;
  background-repeat: repeat-x;
  background-image: linear-gradient(top, #00FFFF 0%, #00C3F3 100%);
  /*
  font-size: 14px;
  padding:7px 30px;
  min-width: 130px;
  border-radius:17px;        /*supported by all latest Browser
  -moz-border-radius: 17px;   /*For older Browser
  -webkit-border-radius:17px;/*For older Browser
    **/
}
.btn-info:hover {
  color: white;
  background-color: #009af3;
  background-position: 0 -10px;
}