/*******************************************************************************
Copyright (c)2011-2018 Nationwide Computer Services.  All rights reserved.
*******************************************************************************/

/*** global stuff ***/

HTML, BODY {
  padding: 0px;
  margin: 0px;
  }

BODY {
  background-color: #E5E5E5;
  color: #193366;
  font-family: sans-serif;
  min-width: 440px;
  }

A.covert-link {
  color: inherit;
  text-decoration: none;
  }

/* for IE.  bless. */
IMG {
  border: none;
  }

/*** stuff in heid ***/

#heid {
  background-color: #193366;
  color: #FFFFFF;
  height: 100px;
  }

#heid .phoneno {
  float: right;
  padding: 0px;
  padding-right: 0.5em;
  margin: 0px;
  }

#heid .wttlogo {
  display: none;
  }

/*** stuff in navi ***/

#navi {
  background-color: #193366;
  }

#navi UL {
  list-style-type: none;
  padding: 0;
  margin: 0;
  }

#navi UL LI {
  list-style-type: none;
  margin: 0;  /* for O7 */
  position: relative;  /* for absolutely positioned child blocks */
  white-space: nowrap;  /* prevents child menus wrapping because they exceed the "containing" block */
  font-weight: bold;
  }

#navi > UL > LI {
  display: inline-block;
  }

#navi UL LI > UL {
  width: auto;
  position: absolute;
  top: 100%;
  left: 0;
  /* child menu blocks hidden by default, exhibit snazzy animation */
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.25s, opacity 0.25s linear;
  }

#navi UL LI:hover > UL {
  box-shadow: 0.5em 0.5em 0.25em rgba(0, 0, 0, 0.5);
  z-index: 100;
  /* child menu block visible when hovered, also snazzy animation */
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
  }

#navi A {
  display: block;
  transition: 0.25s background-color;
  background-color: #193366;
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
  padding: 1ex 1.5em;
  }

#navi A:hover {
  background-color: #CCCCCC;
  color: #193366;
  }

/* hack to highlight current navi */
#ncs-home #navi A.nhome,
#ncs-serv #navi A.nserv,
#ncs-hchk #navi A.nserv, #ncs-hchk #navi A.nhchk,
#ncs-repa #navi A.nserv, #ncs-repa #navi A.nrepa,
#ncs-newc #navi A.nserv, #ncs-newc #navi A.nnewc,
#ncs-refu #navi A.nserv, #ncs-refu #navi A.nrefu,
#ncs-hvis #navi A.nserv, #ncs-hvis #navi A.nhvis,
#ncs-drec #navi A.nserv, #ncs-drec #navi A.ndrec,
#ncs-hwrc #navi A.nserv, #ncs-hwrc #navi A.nhwrc,
#ncs-busi #navi A.nbusi,
#ncs-ofit #navi A.nbusi, #ncs-ofit #navi A.nofit,
#ncs-bkup #navi A.nbusi, #ncs-bkup #navi A.nbkup,
#ncs-secu #navi A.nbusi, #ncs-secu #navi A.nsecu,
#ncs-wbst #navi A.nbusi, #ncs-wbst #navi A.nwbst,
#ncs-cons #navi A.nbusi, #ncs-cons #navi A.ncons,
#ncs-abtu #navi A.nabtu,
#ncs-cont #navi A.nabtu, #ncs-cont #navi A.ncont,
#ncs-cfrm #navi A.nabtu, #ncs-cfrm #navi A.ncfrm
  {
  background-color: #193366;
  color: #B2B2B2;
  transition: none;
  cursor: default;
  }

/*
if the screen width goes below 640px, there wont be enough room to show
the menu bar, or to display the telephone numbers next to the logo.  so
suppress display of the menu bar and stack the logo and phone numbers
vertically.
*/
@media only screen and (max-width: 640px) {
  #heid {
    height: 180px;
    }
  #heid .phoneno {
    float: none;
    }
  #navi {
    display: none;
    }
  }

/*
by default, the Which? logo is shown in the footer.  if there is enough
room to do so, display it in the header as well.
*/
@media only screen and (min-width: 768px) {
  #heid .wttlogo {
    width: 100px;
    height: 100px;
    margin-left: 16px;
    display: inherit;
    }
/*  instead:
  #foot .wttlogo {
    display: none;
    }
*/
  }

/*** stuff in main ***/

#main {
  background-color: #FFFFFF;
  }

.price {
  color: #CC0000;
  font-weight: bold;
  }

/*** stuff in main (front page) ***/

.layout-div {
  display: table;
  width: 100%;
  }

.layout-row {
  display: table-row;
  }

.layout-box {
  display: table-cell;
  padding: 1ex 1em;
  }

.layout-box .icon, .layout-box H1, .layout-box H2 {
  text-align: center;
  }

.icon IMG {
  margin: 0 auto;
  }

.pri1 .layout-box, .pri3 .layout-box {
  background-color: #FFFFFF;
  border-left: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
  }

.pri2 .layout-box, .pri4 .layout-box {
  background-color: #E5E5E5;
  border-left: 1px solid #999999;
  border-right: 1px solid #999999;
  }

.pri1 .layout-box {
  width: 100%;
  }

.pri2 .layout-box {
  width: 25%;
  }

.pri3 .layout-box {
/*  width: 14.285%; */
  width: 16.667%;
  }

.pri1 .layout-nub {
  display: table;
  max-width: 64em;
  margin: 0 auto;
  }

.pri1 .icon {
  display: table-cell;
  vertical-align: middle;
/* or use "float: left; width: 256px;" */
  }

.pri1 .text {
  display: table-cell;
  vertical-align: middle;
/* or use "margin-left: 272px;" */
  padding: 0ex 1em;
  }

.pri2 H2 {
  font-size: 150%;
  }

.pri3 H2 {
  font-size: 133.33%;
  }

.pri1 IMG, .pri2 IMG {
  width: 200px;
  }

.pri3 IMG {
  width: 100px;
  }

/*** stuff in main (subpages) ***/

.page H1 {
  text-align: center;
  padding: 1em 0;
  margin-top: 0;
  }

.page IFRAME#gmap {
  border: none;
  }

.page FORM {
  max-width: 40em;
  margin: 0 auto;
  xxxborder: 2px dotted #193366;
  }

.formnote {
  font-style: italic;
  margin: 0 0 1em 0;
  }

.frmrow {
  display: table-row;
  }

.frmlbl, .frmctl {
  display: table-cell;
  }

.frmlbl {
  text-align: right;
  padding-right: 0.5em;
  }

.frmctl {
  }

.page {
  padding: 2em 1em;
  }

.section:after {
  content: "";
  display: table;
  clear: both;
  }

.section IMG {
  width: 128px;
  margin-right: 1em;
  float: left;
  }

.section TD {
  background-color: #E5E5E5;
  padding: 0.5ex 1em;
  }

/*** stuff in foot ***/

#foot {
  background-color: #E5E5E5;
  padding: 4ex 1em 1ex 1em;
  }

#foot P {
  margin: 0 auto;
  }

#foot .wttlogo {
  width: 128px;
  height: 128px;
  float: right;
  }

#copyright P {
  font-size: 64%;
  text-align: center;
  }

/*** ends ***/