/* I want to make the footer background color file the remainder of the browser window.
   Not simple!  https://blogs.msdn.microsoft.com/kurlak/2015/02/20/filling-the-remaining-height-of-a-container-while-handling-overflow-in-css-ie8-firefox-chrome-safari/
   What is simple is to make the body gray and have a body-content div with a white background.
*/
body {
  background-color: lightgray;
  padding-top: 50px;
  padding-bottom: 20px;
}

.body-content {
  background-color: white;
}

/* Set padding to keep content from hitting the edges */
.page-content {
  padding-left: 15px;
  padding-right: 15px;
}

.clear { clear: both }

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.col-phone {
  display: inline;
  float: left;
  list-style: none;
}

.col-fax {
  display: inline;
  float: left;
  list-style: none;
  /*margin-bottom: 20px;*/
  margin-left: 40px;
}

a[href^="tel:"] {
  color: orange;
  text-decoration: none;
}

footer {
  background-color: lightgray;
  color: black;
  padding: 10px 40px;
  width: 100%;
}

.ga-form-row { margin-top: 10px; overflow: hidden }

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.navbar-inverse {
  background-color: #2c5882;
  color: white;
}

.navbar-nav > li > a { color: white !important }
.navbar-nav > li > a:hover { color: #e4a230 !important }
.navbar-agent > li > a:hover { color: darkblue !important }
a.hover-blue:hover { color: darkblue !important }
a.hover-gold:hover { color: goldenrod !important }

.logo {
  /*border: 2px solid red;*/
  float: right;
}

#commercial-img, #commercial a {
	display: block;
	width: 159px;
	height: 275px;
	margin: 0 15px 0 0;
	padding: 0;
	background-image: url(images/commercial.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	float: left;
}

#commercial a:hover {
	background-image: url(images/commercial_over.png);
	background-repeat: no-repeat;
}

#contract-img, #contract a {
	display: block;
	width: 159px;
	height: 275px;
	margin: 0 15px 0 0;
	padding: 0;
	background-image: url(images/contract.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	float: left;
}

#contract a:hover {
	background-image: url(images/contract_over.png);
	background-repeat: no-repeat;
}

#subdivision-img, #subdivision a {
	display: block;
	width: 159px;
	height: 275px;
	margin: 0 15px 0 0;
	padding: 0;
	background-image: url(images/subdivision.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	float: left;
}

#subdivision a:hover {
	background-image: url(images/subdivision_over.png);
	background-repeat: no-repeat;
}

#websolutions-img, #websolutions a {
	display: block;
	width: 159px;
	height: 275px;
	margin: 0 15px 0 0;
	padding: 0;
	background-image: url(images/web_solutions.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	float: left;
}

#nav-links {
	width: 560px;
	padding: 15px 0;
	margin: 0 0 10px 70px;
	text-align: center;
}

#nav-links1 {
	border-top: 1px solid #e4a230;
	border-bottom: 1px solid #e4a230;
	width: 400px;
	padding: 15px 0;
	margin: 40px 0 10px 70px;
	text-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}