/*----------------------------
[Table of contents]

1. body
  1.a buttons
2. header
3. navigation
  3.a navigation megaMenu
4. jumbotron
5. action boxes
  5.a login
  5.b tabs
6. news section
  6.a news background
7. graphics content section
  7.a graphics left content
  7.b graphics right content
8. sub-page-specific
  8.a sub-header
  8.b sub-content
    8.i sub-content-left
    8.ii sub-content-right
9. sitelinks
10. footer
11. bootstrap overrides
12. media queries
  12.a iphone 5
  12.b ipad air
  12.c desktop
---------------------------*/


/* 1. body ----------------*/
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  /*overflow-y: scroll;*/
  /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}
.dnnEditState {
    overflow-x: initial;
}

body form {
     height: 100%;
}

ul {
  list-style-type: none;
  -webkit-margin-start: 0px;
  -webkit-padding-start: 40px;   
}
ol {
  -webkit-margin-start: 0px;
  -webkit-padding-start: 40px;   
}
input:focus {
  outline: none;
}
select::-ms-expand {
  width: 12px;
  border: none;
  background: #fff;
}
.form-inline .form-group input {
  width: 100%;
}
.form-group {
  float: left;
}

/* 1.a buttons -----------------*/

.btn-one,
.btn-two,
.btn-three {
  border: 0;
  padding: 0.5em;
  border-radius: 0;
  cursor: pointer;
}
.btn-one,
.btn-one:hover,
.btn-two,
.btn-two:hover {
  color: #fff;
}
.btn-one,
.btn-one:hover {
  background: #f78a39;
}
.btn-two,
.btn-two:hover {
  background: #005396;
}
.btn-three,
.btn-three:hover {
  color: #005396;
}
.btn-three,
.btn-three:hover {
  background: transparent;
}
.hammy {
  border: 0;
}
.submit {
  color: #fff;
  border: none;
  background: #005396;
  padding: 0.4em 1.5em;
  border-radius: 0;
  cursor: pointer;
}

/* 2. header ----------------------------*/

.nav--top {
  border: none;
  padding: 1em 0;
  margin-bottom: 0;
  background: #fff;
}
.nav--top > div {
  float: none;
}

/* input bar */

.icon--search {
  color: #fff;
  border-radius: 0;
  background: #f78a39;
  border: 1px solid #fff;
}
.icon--search:hover {
  background: #005396;
}
.input--bar {
  border-radius: 0;
  border: none;
}
.input--bar:focus {
  outline: none;
}

/* 3. navigation ------------------*/

.nav--bottom {
  color: #fff;
  width: auto;
  margin: 0 auto;
  border-radius: 0;
  text-align: center;
  background: #005396;
  /*height: 100%;*/
}
.nav--bottom a {
  color: #fff;
  font-size: 16px;
}
.nav--bottom li a:focus,
.nav--bottom li a:hover {
  background: #f78a39;
}
.menu--child {
  left: auto;
  background: #efefef;
  border-top: 0;
}
.menu--child li > a {
  color: #005396 !important;
}

.menu--lastchild {
  right: 0;
  left: auto;
  background: #efefef;
  border-top: 0;
}
.menu--lastchild li > a {
  color: #005396 !important;
}

/* 3.a navigation-megamenu ---------*/

.menu--large {
  position: static !important;
}
#megamenu {
  width: 90%;
  padding: 1em;
  left: auto;
  margin: 0 auto;
  background: #efefef;
  border-top: 0;
}
#megamenu h5 {
  color: #005396;
}
#megamenu ul {
  margin: 0;
  padding: 0 0.5em;
}
#megamenu > ul > li {
  list-style: none;
  color: #005396;
}
#megamenu > ul > li > a {
  color: #005396;
  display: block;
  line-height: 1.5;
  padding: 3px 20px;
  font-weight: normal;
  white-space: normal;
}
#megamenu .megamenu--links {
  padding: 0;
}
#megamenu .megamenu--links a {
  color: #4481b2;
}
#megamenu .megamenu--links a:hover {
  background: transparent;
}
#megamenu .megamenu--links ul li:before {
  /*Commented as per PROJ#TF16001D (UAT Feedback)*/
  /*content: '+';
  color: #005396;
  padding-right: 8px;*/
}
#megamenu .megamenu--right {
  margin: 0 auto;
  border-left: 1px solid #e5e5e5;
  padding: 0;
}
#megamenu .megamenu--right ul {
  padding-left: 0;
}
#megamenu .megamenu--right img {
  margin: 0.5em;
  max-width: 100%;
}

#megamenu .menu-special-blue{
    background-image: url('../images/menu-special-blue.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 343px;
    height: 98px;
    margin: 5px 5px 10px 5px;
}

#megamenu .menu-special-orange{
    background-image: url('../images/menu-special-orange.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 343px;
    height: 98px;
    margin: 5px 5px 10px 5px;
}

#megamenu .menu-special-blue a,
#megamenu .menu-special-orange a{
    float: right;
    font-size: 16px;
    color: white;
    margin: 50px 15px 0px 0px;
}
#megamenu .menu-special-blue a:hover,
#megamenu .menu-special-orange a:hover{
    background-color:transparent;
}

/* 4. jumbotron ----------------*/

.jumbotron {
  background: -webkit-linear-gradient(rgba(4, 84, 149, 0.8), rgba(4, 84, 149, 0.8)), url("../images/mol-barge-river.jpg");
  background: linear-gradient( rgba(4, 84, 149, 0.8), rgba(4, 84, 149, 0.8)), url("../images/mol-barge-river.jpg");
  background: -webkit-linear-gradient( rgba(4, 84, 149, 0.8), rgba(4, 84, 149, 0.8)), url("../images/mol-barge-river.jpg");
  padding-bottom: 0;
  background-size: cover;
  background-position: 80%;
  background-repeat: no-repeat;
}
.jumbotron h3 {
  color: #fff;
  font-size: 1.2em;
}
.jumbotron span {
  color: #e6d409;
}

/* 5. action boxes --------------*/

.jumbotron > .container {
  padding: 0;
  margin: 4em auto 0;
}

/* 5.a login */

.login--content {
  bottom: 0;
  height: 220px;
  background: #f78a39;
  border-bottom: 4px solid #005396;
  box-shadow: inset -10px 0px 11px 0px rgba(50, 50, 50, 0.22);
}
.login--content form,
.login--content .form {
  margin-top: 1em;
}
.login--content h3 {
  color: #fff;
  padding-bottom: 5px;
  border-bottom: 1px solid #fff;
}

/* 5.b tabs -----------------------*/

.generic--tabs {
  padding: 0;
}
.generic--tabs h3 {
  color: #102f51;
}

/*tab styles*/

.generic--tabs ul {
  margin: 0;
  padding: 0;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  overflow: hidden;
}
.generic--tabs ul li {
  width: 33.33%;
  background: #efefef;
  margin-right: 0.3em;
  display: inline-block;
}

/*tab link styles*/

.generic--tabs ul li a {
  padding: 1em;
  display: block;
  color: #4481b2;
  text-align: center;
  text-decoration: none;
}

/*active tab styles*/

.generic--tabs ul li.active {
  background: #fff;
}
.generic--tabs ul li.active a {
  color: #005396;
}

/*tab content styles*/

.generic--tabs .tab--content {
  height: 172px;
  color: #005396;
  background: #fff;
  padding: 1em 3em;
  border-bottom: 4px solid #005396;
}
.generic--tabs .tab--content h1 {
  margin-top: 0;
}
.generic--tabs .tab--content button {
  margin-top: 2em;
}

/* 5.c content left/right section -----------------*/

.col-xs-12-content{
  position: relative;
  min-height: 1px;
  padding-right: 0px;
  padding-left: 0px;
}


/* 6. news section -----------------*/

.middle h3 {
  color: #fff;
  margin: 0.5em auto;
  white-space: nowrap;
}
.middle a {
  color: #fff;
}
.middle--left-content,
.middle--right-content {
  padding: 0;
  margin: 0.5em auto;
}
.middle--left-content {
  background: #005396;
}
.middle--right-content {
  background: #4481b2;
}
.middle--links {
  padding: 0;
  margin: 1.5em auto;
}
.middle--links li {
  padding: 0.2em 0 0;
  line-height: 16px;
}
.middle--links li p.date {
  color: #e5e5e5;
  font-style: italic;
  font-size: 12px;
  display: block;
  padding: 5px 0;
}

/** 6.a news--background **/

.news {
  padding: 0;
  position: relative;
}
.news--left {
  background: #005396;
  border-top: 1px solid #fff;
}
.news--right {
  background: #4481b2;
  border-top: 1px solid #fff;
}

/* 7. graphics section ---------------*/

.graphics {
  /*height: 100%;*/
}
.graphics--left,
.graphics--right {
  padding: 2em;
  text-align: center;
}

/* 7.a graphics left content -----------*/

.graphics--left {
  background: #efefef;
  vertical-align: middle;
}
.graphics--left img {
  border: 8px solid #f78a39;
}

/* 7.b graphics right content -----------*/

.graphics--right {
  background: #fff;

}

.graphics--right img {
  display: block;
  width:75%;
}
.graphics--right > div {
  margin: 0 auto 0.4em auto;
}
.graphics--right .home-graphics-block {
  margin: 0 auto 0.4em auto;
}
.graphics--right .list{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  max-width:30em;
}
.graphics--right .list .content-list {
  width: 25%;
  float: left;
  color: #fff;
  line-height: 96px;
  background: #f78a39;
  display: block;
  -webkit-box-flex:1;
  -webkit-flex:1;
      -ms-flex:1;
          flex:1;
}
.graphics--right .list .content-list img{
-webkit-box-flex:1;
-webkit-flex:1;
    -ms-flex:1;
        flex:1;
}
/* 8. sub-page-specific ----------------*/


/* 8.a subheader -----------------------*/

.subheader {
  border-bottom: 1px solid #4481b2;
  padding: 2em 0 0;
}
.blockgrid {
  padding: 2em 0;
}

/* 8.i subheader left content ----------*/

.subheader--left {
  text-align: center;
  background: #f78a39;
  /*height: 100%;*/
  color: #fff;
  padding: 1.8em;
}

/* 8.ii subheader right content --------*/

.subheader--right {
  padding: 0;
}
.subheader--right img {
  width: 100%;
}
.subheader--breadcrumbs {
  color: #005396;
}

/* 8.b subcontent ----------------------*/

.subcontent {
  padding: 2em auto;
  border-bottom: 2px solid #f5f5f5;
}

/* 8.i subcontent left content ----------*/

.subcontent--left {
  text-align: left;
}
.subcontent--left h3 {
  margin: 0 auto;
  color: #005396;
}
.subcontent--left ul {
  list-style-type: disc;
}
.subcontent--left h3:first-child {
  margin-top: 1em;
}
.subcontent--left p {
  margin-top: 1em;
}

/* 8.ii subcontent right content ---------*/

.subcontent--right {
  background: #F5F5F5;
  text-align: center;
  margin: 1em auto;
  padding: 2em 1em;
}
.subcontent--right h5,
.subcontent--right p,
.subcontent--right button {
  margin: 1.5em auto;
}
.subcontent--right h5,
.subcontent--right button {
  color: #005396;
}
.subcontent--right p {
  text-align: left;
}
.subcontent--right button {
  background: 0;
  border: 1px solid #005396;
  padding: 0.3em 0.5em;
}
.subcontent--right .ad p {
  font-size: 12px;
  padding: 26px 0 4px;
  margin: 0 auto;
  display: block;
  background: #f78a39;
  width: 100%;
  color: #fff;
  text-align: center;
}
.subcontent--right img,
.subcontent--right .ad img {
  width: 100%;
}
.subcontent--right .ad img {
  border: 4px solid #f78a39;
  text-align: center;
}

/* 8.c subcontent announcement ---------*/

.subcontent--announcement {
  color: #005396;
  text-align: center;
  margin: 2em auto;
}
.subcontent--announcement .glyphicon {
  padding: 0 0.5em;
  color: #f78a39;
}
.subcontent--announcement .advisory {
  font-size: 1.2em;
  color: #000;
}

/* 9. sitelinks -------------------------*/

.sitelinks {
  margin: 0 auto;
  padding: 2em 2em 0;
  background: #005396;
}
.sitelinks a, .sitelinks a:visited {
  color: #fff !important;
}
.sitelinks-wrapper {
  margin: 0 4em;
  padding-bottom: 4em;
  border-bottom: 1px solid #4481b2;
}
.sitelinks ul 
{
     -webkit-margin-start: 0px;
    -webkit-padding-start: 40px;   
}

/* 10. footer ---------------------------*/

footer {
  bottom: 0;
  text-align: center;
  background: #005396;
  padding: 2em 1em 1em;
}
footer ul {
  padding: 0;
  margin: 0 auto;
}
footer li {
  margin: 0 0.5em;
  display: inline-block;
}
footer li a, footer li a:visited{
  color: #fff !important;
}

/* 11. bootstrap overrides ----------------------*/


/* navbar */

.navbar {
  /*min-height: 100%;*/
  border: 0;
}

/* logo */

.navbar-brand {
  padding: 0;
}
.navbar-brand img {
  height: 100%;
  width: auto;
  padding-left: 1em;
}

/* hammy menu*/

.navbar-toggle .icon-bar {
  width: 30px;
  height: 3px;
}

/* mobile menu icon*/

.navbar-default .navbar-toggle .icon-bar {
  background-color: #005396;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background: transparent;
}
.nav > li {
  background: #005396;
}
.nav > li a {
  color: #fff;
}
.navbar-header {
  padding: 1em;
}

/* mobile menu */

.navbar-default .navbar-nav .open .dropdown-menu > li > a,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover {
  color: #fff;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > ul > li > a,
.navbar-default .navbar-nav .open .dropdown-menu > li > ul > li > a:hover 
{
    text-decoration: none;   
    line-height: 30px;
}


.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
  background: #f78a39;
  color: #fff;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  color: #005396;
}
.navbar-default .navbar-nav .open .dropdown-menu li a:before {
  content: '+';
  color: #fff;
  padding-right: 8px;
}

/* centered carousel */

.carousel-inner > .item > img {
  margin: 0 auto;
}
.carousel-inner > .item > h3 {
  margin: 4.5em;
  text-align: center;
}
.carousel-control.left,
.carousel-control.right {
  background: none !important;
  -webkit-filter: progid: none !important;
          filter: progid: none !important;
  outline: 0;
  opacity: 1;
  filter: alpha(opacity=100);
}
.carousel-indicators {
  bottom: -35px;
}
.carousel-indicators li {
  border: 1px solid #005396;
}
.carousel-indicators .active {
  background: #005396;
}
.subcontent--grid {
  margin: 0 auto;
}
.subcontent--grid-block {
  margin: 1em auto;
}
.subcontent--grid-block img {
  border: 2px solid #f78a39;
  width: 100%;
}

/* 12. media queries -------------------*/


/* 12.a iphone 5 -----------------------*/

@media only screen and (min-width: 320px) and (max-width: 767px) {
  .jumbotron > .container {
    margin-bottom: 0;
  }
  body {
    text-align: center;
  }
  .mobile--bottom {
    padding: 2em 0.7em 0 0;
  }
  .jumbotron {
    margin: 0 auto;
  }
  .generic--tabs ul li {
    font-size: 12px;
    line-height: 12px;
  }
  .generic--tabs .tab--content {
    height: 240px;
  }
  .generic--tabs ul li.active,
  .generic--tabs .tab--content {
    background: #f78a39;
  }
  .generic--tabs .tab--content h3,
  .generic--tabs .tab--content label,
  .generic--tabs ul li.active a {
    color: #fff;
  }
  .generic--tabs .tab--content h3 {
    font-size: 16px;
  }
  .middle {
    width: 100%;
    text-align: left;
    background: transparent;
  }
  .middle h3 {
    text-align: center;
  }
  .middle--left,
  .middle--right {
    height: 28em;
    margin: 0 auto;
  }
  .middle--left {
    background: #005396;
  }
  .middle--right {
    background: #4481b2;
  }
  .graphics--right .list .content-list{
    font-size:1rem;
  }
}

/* 12.b ipad air  ----------------------*/

@media only screen and (min-width:768px) and (max-width: 959px) {
  /* bootstrap override for navbar */
  .nav > li > a {
    padding: 10px;
  }
  #megamenu {
    width: 60%;
    padding: 0;
  }
  .login--content {
    margin: 0 auto;
  }
  .login--content h3 {
    padding-left: 1em;
  }
  .jumbotron {
    background: url("../images/barge.jpg");
    z-index: 0;
    height: 500px;
    margin: 0 auto;
    padding-bottom: 0;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
  }
  .jumbotron > .container {
    padding: 0;
    margin: 4em auto;
  }
  .generic--tabs .tab--content .input--bar {
    border: 1px solid #005396;
  }
  .middle {
    z-index: 2;
    width: 100%;
    margin: -2em auto;
    background: transparent;
    position: absolute;
  }
  .middle,
  .middle--left,
  .middle--right {
    height: 2.08em;
  }
  .middle--left {
    background: #005396;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #005396;
    border-radius: 10px 0 0 0;
    -moz-border-radius: 10px 0 0 0;
    -webkit-border-radius: 10px 0 0 0;
  }
  .middle--right {
    background: #4481b2;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #4481b2;
    border-radius: 0 10px 0 0;
    -moz-border-radius: 0 10px 0 0;
    -webkit-border-radius: 0 10px 0 0;
  }
  .news,
  .news--left,
  .news--right {
    height: 28em;
  }
}

/* bootstrap overrides */


/* 12.c desktop -----------------------------*/

@media only screen and (min-width: 960px) {
  .nav--bottom-links {
    float: none;
    vertical-align: top;
    display: inline-block;
  }
  .navbar .navbar-collapse {
    text-align: center;
  }
  .jumbotron {
    background: url("../images/barge.jpg");
    z-index: 0;
    height: 60%;
    margin: 0 auto;
    padding-bottom: 0;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
  }
  .login--content h3 {
    text-align: left;
  }
  .jumbotron > .container {
    padding: 0;
    margin: 4em auto;
  }
  .middle {
    z-index: 2;
    width: 100%;
    margin: -2em auto;
    position: absolute;
    background: transparent;
  }
  .middle,
  .middle--left,
  .middle--right {
    height: 2.08em;
  }
  .middle--left {
    background: #005396;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #005396;
    border-radius: 10px 0 0 0;
    -moz-border-radius: 10px 0 0 0;
    -webkit-border-radius: 10px 0 0 0;
  }
  .middle--right {
    background: #4481b2;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #4481b2;
    border-radius: 0 10px 0 0;
    -moz-border-radius: 0 10px 0 0;
    -webkit-border-radius: 0 10px 0 0;
  }
  .generic--tabs .tab--content .input--bar {
    border: 1px solid #005396;
  }
  .news,
  .news--left,
  .news--right {
    height: 28em;
  }
  .footer--links {
    float: right;
  }
  .footer--links-copyright {
    float: left;
  }
}
@media only screen and (min-width:1199px) {
  .subheader--left {
    padding: 4em;
  }
}