body
{
   background-color:#91ACBF;
}

div.viewport
{
   margin:auto;
   max-width:1000px;
   background-color: white;
}


article h1
{
   margin-top:0;
}


/* Expanded Navbar setup */
.navbar
{
   margin-bottom: 0;
   border-radius: 0;
}

.navbar-inverse .navbar-nav>li>a { color: white; }
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a { color: #000000DD; }
.navbar-inverse .navbar-nav>li>a:hover { text-decoration: underline; }

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover
{
    color: #000000DD;
    background-color: #DBE0E4;
    outline: 0;
}

.navbar-brand>img
{
   display: none;
}

.lg-banner
{
   display:block;
   background-color: #095489;
}


.navbar-inverse
{
   background-color: black;
   border-color: #080808;
}

/* -- end Expanded Navbar setup -- */


article { padding-bottom: 2em; }

article dl dt
{
   font-size: 1.5em;
   font-weight: normal;
   margin-top: 1.5em;
   color: #444444;
}

article dl dd
{
   margin-left: 0em;
}

article h1 { color: #095489; font-size:300%; margin-top:0; font-weight:500;}
article h2 { color: #444444; margin-top:1.25em; font-weight:500;}
article h4 { font-size: 1.5em; font-weight: normal; margin-top: 1.5em; margin-bottom:0.3em; color: #444444;  }
article .well h4 { margin-top: 0; }
article .well h2 { color: #444444; margin-top:0; font-weight:500;}

article .strap { margin-top:1.5em; }

article ul>li
{
   margin-top:0.5em;
}


/* google map div */
#map
{
   height: 400px;
   width: 100%;
   margin-bottom:2em;

   border: 1px solid #e3e3e3;
   border-radius: 4px;
}


.nobold { font-weight:normal; }

.form-spacer { margin-bottom: 2em; }

/* Note, this is an aunty spayam measure who's name is deliberately non-obvious */
form .remark { display:none; }

.btn-primary h4 { color: white; }


.overviews { margin-top:2em; margin-bottom:2em; text-align:center;}

.oview
{
   background-color: #095489;
   color: white;
   border: 1px solid  #333333;
   border-radius: 0.9em;
   padding:0.6em;
   display:inline-block;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   margin-left: 0.5em;
   margin-right: 0.5em;
}

.oview img
{
   border-radius: 0.9em;
   margin:0;
   padding:0;
}

.oview .caption
{
   text-align: center;
   font-size: 120%;
}


.oview .caption a
{
   color: white;
   text-decoration: none;
}

.oview .caption a:hover
{
   text-decoration: underline;
}

.insights { margin-top:2em; margin-bottom:2em; }

.insight {text-align: center;}
.insight img
{
   margin:auto;
   border-radius: 0.4em;
}



/* Set gray background color and 100% height */
.sidenav
{
   padding-top: 20px;
   height: 100%;
}


.poi-block
{
   min-height: 20px;
   margin-bottom: 1.4em;
   text-align:left;
}

.poi-block>.title
{
   background: #095489;
   background-color: #095489;
   border-top-left-radius: 0.5em;
   font-size: 1.23077em;
   line-height: 2.275em;
   color: white;
   padding: 0 0 0 20px;
   margin:0;
}

.poi-block>.title a
{
   color: white;      
}


.poi-block>.content
{
   background: #DBE0E4;
   background-color: #DBE0E4;
   border-bottom-right-radius: 0.5em;
   padding:1em;
}


.poi-block div .contact
{
    padding-left: 38px;
    min-height: 38px;
    background-repeat: no-repeat;
    xcolor: red; /*#464445;*/
}

.poi-block div.phone-row { background-image: url(images/byphone.png); }
.poi-block div.email-row { background-image: url(images/byemail.png); }
.poi-block div.form-row { background-image: url(images/viawebform.png); }
.poi-block div.feedback-row { background-image: url(images/consumerfeedback.png); }

.poi-block div.quoted
{
    background: url(images/blockquote.png) no-repeat 0 0;
    margin: 0;
    padding-top: 3px;
    padding-left: 23px;
}

.poi-block div.quoted span.testimonial-edit
{
    font-style: italic;
}

.poi-block div.quote-attrib
{
    font-style: italic;
    margin-top: 12pt;
    padding-left: 23px;
}



img.emer-left
{
   width:100px;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   border: 3px solid #095489;
   border-radius: 0.9em;
   height: auto;
   display:block;
   float:left;
}

div.emer
{
   display:block;
   margin-left: 110px;
}

.emergencyNBB
{
   color:white;
   font-weight:bold;
   background-color: #990000;
}

.emergencyNBB:hover
{
   background-color: red;
}

.illus-box
{
   margin-bottom:1.5em;
}

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

/* Set black background color, white text and some padding */
footer
{
   background-color: #095489;
   color: white;
   padding: 15px;
}

/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 768px)
{
   .sidenav
   {
      height: auto;
      padding: 15px;
   }

   .row.content {height:auto;}
}


/* Set wider collapse point to avoid multi-line nav menu on large screens */
@media (max-width: 870px)
{

   .navbar-header {float: none;}

   .navbar-left,.navbar-right {float: none !important;}

   .navbar-toggle {display: block;}

   .navbar-collapse
   {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
   }

   .navbar-fixed-top
   {
      top: 0;
      border-width: 0 0 1px;
   }

   .navbar-collapse.collapse {display: none!important;}

   .navbar-nav
   {
      float: none!important;
      margin-top: 7.5px;
   }

   .navbar-nav>li {float: none;}

   .navbar-nav>li>a
   {
      padding-top: 10px;
      padding-bottom: 10px;
   }

   .collapse.in {display:block !important;}


   /* Collapsed Navbar setup -- */

   .navbar-brand>img
   {
      display: block;
      max-height: 55px;
      margin-top: -16px;
      margin-left: -16px;
   }

   .lg-banner
   {
      display:none;
   }

   .navbar-inverse
   {
      background-color: #095489;
      border-color: #080808;
   }

   .navbar-toggle { background-color: black; }
   .navbar-inverse .navbar-nav>li>a { color: white; }
   .navbar-inverse .navbar-nav .open .dropdown-menu>li>a { color: #000000DD; }

   .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover
   {
       color: #000000DD;
       background-color: #DBE0E4;
   }

   /* -- end Collapsed Navbar setup -- */


}


/* Large Devices, Wide Screens */
@media (min-width : 1200px)
{
   .sidenav {max-width:300px; min-width:200px;}
}