/*======================================================
  STRUCTURE.CSS
  ======================================================

    1.  FLUID CONTAINER
    2.  HEADER 
            - Logo
            - Top Nav
            - Search
            - I'd LIke To
            - Main Nav
            - Mobile Nav
            
    3.  CONTENT AREA
            - Interior Banner
            - Actions Container
            - Subnav
            - Print Area
            - Right Column
                - Quick Links
                - Contact
    4.  HOMEPAGE
            - Homepage Banner
            - Homepage Content
    5.  FOOTER
    6.  MEDIA QUERIES
            - Desktop
            - Tablet
            - Mobile
            - Narrow Mobile

  ===================================================== */

/*======================================================
  0. BODY STYLES
  ===================================================== */

html, body, header, footer {
    min-width: 320px;
}

#uber, body, html {
    width: 100%;
}


body {
    background: #fff url(/_catalogs/masterpage/Newmarket_EcoDev/images/structure/bg.png) top center no-repeat !important;
}

/*======================================================
  0.5. BACK TO TOWN LINK
  ===================================================== */

.townLink {
    position: absolute;
    top: 0;
    right: 15px;
}

    .townLink a {
       display: inline-block;
        background: #d5e4ee;
        padding: 5px 10px 5px 30px;
        border-radius: 0 0 3px 3px;
        position: relative;
        font-weight: bold;
        color: #1762a0 !important; 
    }

    .townLink a:hover {
       text-decoration: none;
       background: #c5d3dd;
    }

        .townLink a span {
            display: block;
            position: absolute;
            left: 15px;
            top: -4px;
            font-weight: bold;
            font-size: 1.75em;
        }

/*======================================================
  1. FLUID CONTAINER
  ===================================================== */

.ic-container-fluid {
    width: 94%;
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 0;
}

/*======================================================
  2. HEADER
  ===================================================== */

header {
    width: 100%;
    padding: 0 0 0 0;
    position: relative;
    z-index: 102;  /* Before was 3000*/
}

    header a, header a:link, header a:visited {
        color: #000;
    }

header .ic-container-fluid{
    padding-top: 24px;
}

.headerLeft {
    width: 50%;
    padding-right: 40px;
    float: left;
    max-width: 464px;
}

.headerRight {
    width: 50%;
    float: right;
    padding-top: 28px;
}


.headerRow {
    clear: both;
    padding-top: 10px;
}


/*==================
  Logo
====================*/

#logo {
    width: 100%;
    float: left;
}

    #logo img {
        display: block;
        width: 100%;
        max-width: 424px;
        height: auto;
    }

    #logo a:focus img {
        outline: 1px solid #0078AE;
    }


/*==================
  SOCIAL LINKS
====================*/

.socialLinks {
    display: inline-block;
    float: right;
}

    .socialLinks a {
        display: inline-block;
        margin-left: 10px;
        width: 40px;
        vertical-align: middle;
    }

        .socialLinks a img {
            display: block;
            height: 40px;
            width: auto;
        }

/*==================
  Search
====================*/

.searchContainer {
    clear: both;
    width: 100%;
    max-width: 510px;
    float: right;
    height: 40px;
}

.mobileSearchContainer {
    display: none;
}

.interior .mobileSearchContainer {
    margin-bottom: 30px;
}

.search {
    width: 100%;
    float: right;
    height: 40px;
    background: #fff;
    border: none;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.no-borderradius .search {
    border: solid 1px #bbb;
}

.search form {
    display: block;
}

.search input {
    border: none;
    outline: none;
    background: none;
}

/*    .search input.searchText {
        width: 80%;
        height: 38px;
        padding: 0 10px;
        margin: 0;
        line-height: 38px;
        float: left;
        font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
        color: #000;
        background: none;
        border: none;
        overflow: hidden;
        -webkit-appearance: none;
        -moz-border-radius: 3px 0 0 3px;
        -webkit-border-radius: 3px 0 0 3px;
        border-radius: 3px 0 0 3px;
    }*/

     .search input.searchInput {
          width: 80%;
          height: 38px;
          padding: 0 10px;
         margin: 0;
         line-height: 38px;
         float: left;
         font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
         color: #000;
         background: none;
         border: none;
         overflow: hidden;
         -webkit-appearance: none;
         -moz-border-radius: 3px 0 0 3px;
         -webkit-border-radius: 3px 0 0 3px;
          border-radius: 3px 0 0 3px;
      }


/*.search .gobutton {
    width: 20%;
    display: block;
    max-width: 44px;
    height: 38px;
    margin: 0;
    padding: 0;
    float: right;
    text-indent: -9999px;
    background: url(../images/structure/icon-search2x.png) center center no-repeat !important;
    background-size: 20px auto !important;
    -moz-border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
} */

*/

    .search input.searchInput::placeholder {
         opacity: 1;
         color: #000;
     }
 
     .search input.searchInput:focus::placeholder {
         opacity: .5;
     }
 
  .search .searchButton {
      width: 20%;
      display: block;
      max-width: 44px;
     height: 38px;
     margin: 0;
     padding: 0;
     float: right;
     text-indent: -9999px;
     background: url(../images/structure/icon-search2x.png) center center no-repeat !important;
     background-size: 20px auto !important;
     -moz-border-radius: 0 3px 3px 0;
     -webkit-border-radius: 0 3px 3px 0;
      border-radius: 0 3px 3px 0;
  }


/*.no-backgroundsize .search .gobutton {
    background: url(../images/structure/icon-search.png) center center no-repeat !important;
}*/


.no-backgroundsize .search .searchButton {
      background: url(../images/structure/icon-search.png) center center no-repeat !important;
  }

/*.search .gobutton:focus {
    border: dotted 1px #ccc;
}*/

*/

.search .searchButton:focus {
     border: dotted 1px #000;
 }

#search_autocomplete{
     top: 40px !important;
     left: 0;
     border: none !important;
     border-radius: 3px;
     overflow: hidden;
  }


/*================= MOBILE SEARCH */

.mobileSearchContainer {
    width: 90%;
    margin: 10px auto;
    display: none;
}


/*==================
  Main Nav
====================*/
.mainNavContainer {
    clear: both;
}

#mainNav {
    width: 100%;
    padding-top: 40px;
}

/*==================
  Mobile Nav
====================*/

.mobileNav {
    display: none;
    width: 100%;
    padding-top: 22px;
    float: right;
}

.mobileDropDown {
    display: none;
    height: auto;
    overflow: hidden;
    width: 100%;
    z-index: 999;
    margin-bottom: 20px;
    background: #1762A0;
}

.navOpen .mobileDropDown {
    display: block;
}



/*======================================================
  3. CONTENT AREA
  ===================================================== */

#intBanner {
    width: 94%;
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
}

    #intBanner img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

#uberMain .noImage{
    padding-top:100px !important;
}

#uberMain.mainInterior {
    background: #fff;
}

#mainContent {
    width: 94%;
    max-width: 1300px;
    position: relative;
    margin: 0 auto;
}

    #mainContent:focus {
        outline: none !important;
    }

.intSectionLeft {
    width: 25%;
    float: left;
    background: #dcecf7;
    position: relative;
    z-index: 2;
}

.intSectionLeftBg {
    width: 25%;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    background: #dcecf7;
    z-index: 1;
}

.wide .intSectionLeft, .wide .intSectionLeftBg {
    display: none;
}


.intSectionRight {
    width: 75%;
    float: right;
    padding-left: 35px;
    padding-top: 35px;
}

.wide .intSectionRight {
    margin-left: 0;
    padding-left: 0;
    width: 100%;
}


/* TOGGLE CONTENT DIV */

.toggleContent {
    padding: 10px;
    background: #eaeaea;
    font-size: .9em;
    margin-bottom: 20px;
}


.topContent {
    margin-bottom: 20px;
}

.pageHeadingContainer {
    margin-bottom: 10px;
    border-bottom: solid 1px #ccc;
}

#mobileHeading {
    display: none;
}

#subNavContainer.wide {
    display: none;
}

.subNavTrigger {
    display: none;
    font-size: .85em;
    text-align: center;
    color: #000 !important;
}

    .subNavTrigger img {
        width: 34px;
        display: block;
        margin: 0 auto;
        height: auto;
    }

#contentInt {
    background: #fff;
}

.wide #contentInt {
    width: 100%;
    margin-left: 0;
}



/*==================
  SubNav
====================*/

.uberInt {
    display: block;
}


/*==================
  Right Column
====================*/

#intFloatRight {
    float: right;
    margin: 0 0 5% 5%;
    width: 31.914893617021278%;
}

#RightImage {
     margin-bottom: 0px;
}

    #RightImage img {
        width: 100%;
        height: auto;
        display: block;
    }

/*======================================================
  4. HOMEPAGE
  ===================================================== */

.homepage header {
    padding-bottom: 20px;
}

.homepage h1 {
    display: none;
}

/*==================
  HOMEPAGE BANNER
====================*/

#homepageBannerContainer {
    display: inline-block;
    width: 100%;
    margin-top: 0;
    position: relative;
    height: 400px;
    overflow: hidden;
}

@media only screen and (max-width : 991px) {
    #homepageBannerContainer {
        height: auto;
    }

    .aspecRatioMargin {
        margin-top: 40%;
    }
}


/*======================
  HOMEPAGE NOTICE LINKS
======================== */

.noticeLinks {
    min-height: 180px;
}

    .noticeLinks ul, .noticeLinks ul li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .noticeLinks ul li a {
            display: block;
            padding: 7px 0;
            color: #000;
            text-decoration: none;
            border-top: solid 1px #ccc;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .noticeLinks ul li:first-child a {
            border: none;
        }

/*=====================
  HOMEPAGE NEWS TICKER
======================= */

.tickerContentOuter {
    background: #545454;
    background: rgba(0,0,0,0.7);
}

.ticker-content {
    width: 100%;
    padding: 20px 0;
    padding-right: 60px;
    position: relative;
    color: #fff;
}

    .ticker-content .newsTickerTitle {
        display: inline-block;
        float: left;
        margin-right: 10px;
    }

    .ticker-content ul, .ticker-content ul li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .ticker-content ul li a {
            color: #fff;
            text-decoration: none;
        }

#newsPause {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 13px;
}

    #newsPause a {
        display: block;
        padding: 5px;
        font-size: .9em;
        border: solid 1px #999;
        color: #fff;
        -webkit-transition: background 0.1s ease-in;
        -moz-transition: background 0.1s ease-in;
        -ms-transition: background 0.1s ease-in;
        -o-transition: background 0.1s ease-in;
        transition: background 0.1s ease-in;
        -webkit-backface-visibility: hidden;
    }

        #newsPause a:hover, #newsPause a:active {
            text-decoration: none;
            background: #333;
        }


/*==================
  Homepage Footer
====================*/

.homepage footer {
    bottom: 0;
    left: 0;
    width: 100%;
}


/*======================================================
  5. FOOTER
  ===================================================== */

footer {
    padding: 30px 0;
}

    footer .footerBottom {
        background: #eaeaea;
        padding: 15px 0;
    }

    footer .footerText {
        width: 60%;
        float: left;
        text-align: left;
        font-size: .9em;
    }

#esol {
    width: 40%;
    float: right;
    font-size: .9em;
    text-align: right;
}

footer .socialLinks {
    display: none;
}

/*======================================================
  6. MEDIA QUERIES
  ===================================================== */


/*==================
  Tablet
====================*/

@media only screen and (max-width : 1100px) {

    body {
        background: #fff url(../images/structure/bg.png) top center no-repeat;
        background-size: 200% auto;
    }
}


@media only screen and (max-width : 991px) {


    /* Header ========= */

    #logo {
        padding-top: 30px;
    }

    .mainNavContainer {
        padding-top: 20px;
    }

    #topNav {
        font-size: .9em;
    }

    /* Content Area ===== */
    #contentInt {
        margin: 0;
        width: 100%;
    }

    .intSectionLeft, .intSectionLeftBg {
        display: none;
    }

    .intSectionRight {
        margin-left: 0;
        padding-left: 0;
        width: 100%;
    }

    #subNavContainer {
        display: none;
    }

    #pageHeading {
        display: table;
        width: 100%;
    }

        #pageHeading h1 {
            display: table-cell;
            margin: 0;
            padding: 0 20px 10px 0;
            vertical-align: middle;
        }

    .subNavTriggerContainer {
        display: table-cell;
        width: 44px;
        text-align: center;
        padding-left: 10px;
        vertical-align: middle;
    }

    .subNavTrigger {
        display: block;
        float: right;
    }

    /* ========== 2nd Level (Drop-down) Quick Links ========== */

    #quickLinksContainer .quickDropDown {
        font-size: .9em;
    }

    .newsFeature .featureImage {
        float: none;
        margin-bottom: 20px;
    }

    .calendarItemLeft {
        width: 30%;
    }

    .calendarItem .description {
        width: 70%;
        height: 4.2em;
    }

        .calendarItem .description a {
            color: #333;
        }

    .imgLinkOverlay {
        height: 26px;
        line-height: 26px;
        font-size: .9em;
        padding: 0 20px 0 10px;
    }
}

/*==================
  Wide Mobile
====================*/

@media only screen and (max-width : 767px) {

    body {
        background: #fff;
    }

    #feedbackTabButton {
        display: none;
    }

    /* Header ========= */

    header {
        padding: 0;
        width: 100%;
        height: 80px;
        z-index: 1000;
        background: rgba(255,255,255,.9);
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
        box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    }


    .headerLeft {
        width: 40%;
        padding-right: 5px;
    }

    .headerRight {
        width: 60%;
        padding-top: 0;
    }

    .headerRow {
        display: none;
    }

    .mainNavContainer {
        display: none;
    }

    .socialLinks, .langSelect {
        display: none;
    }

    .mobileNav {
        display: block;
        text-align: right;
    }

    .mobileSearchContainer {
        display: block;
        padding: 10px 0 0 0;
    }

    .search {
        box-shadow: none;
    }

    #topNav {
        padding-top: 0;
    }

    #topNav, #idLikeTo {
        display: none;
    }

    #mainNav {
    }

    #logo {
        padding-top: 15px;
    }

        #logo img {
            height: 44px;
            width: auto;
        }

    /* Content Area ========= */



    .toggleContent {
        display: none;
    }

    #uberMain {
        width: 100%;
        border: none;
        padding-top: 35px;
    }

        #uberMain .noImage
        {
            padding-top: 60px;
            background-color: white;
        }

    #mobileHeading h1 {
        padding: 10px 10px 10px 0;
    }

    .intSectionRight {
        padding-top: 0;
    }

    #intBanner {
        display: none;
    }

    #actionsContainer {
        margin-top: 120px;
        border-top: solid 1px #ccc;
    }

    #actions {
        margin: 0;
    }

        #actions div {
            display: none;
        }

        #actions .resizeText {
            display: block;
        }

    #breadcrumbs {
        display: none;
    }

    .headlineContainer {
        display: table;
        width: 100%;
        padding: 20px 0;
        margin-bottom: 20px;
        border-bottom: dotted 1px #000;
    }

        .headlineContainer > * {
            vertical-align: middle;
        }

    .contentSection {
        padding: 40px 0;
    }

    .button, a.button {
        width: 100%;
    }

    a, a:hover {
        text-decoration: none !important;
    }

    #intFloatRight {
        width: 100%;
        padding-top: 30px;
        margin-top: 30px;
        border-top: solid 1px #ccc;
    }

    #RightImage {
        display: none;
    }

    #quickLinksContainer {
        display: none;
    }

    .noticeLinks {
        min-height: 0;
    }

    .homepage {
        text-align: center;
    }

    /* News Ticker ========= */

    .ticker-content {
        text-align: center;
        padding: 10px 0;
    }

        .ticker-content .newsTickerTitle {
            display: block;
            float: none;
        }

    #newsPause {
        position: relative;
        top: auto;
        right: auto;
    }

        #newsPause a {
            display: none;
        }

    /* Footer ========= */

    footer #esol, footer .footerText {
        text-align: center;
        width: 100%;
        padding: 7px 0;
    }

    footer .socialLinks {
        display: block;
        float: none;
        padding: 0 0 10px 0;
    }

    header .ic-container-fluid {
    padding-top: 10px;
    }

    .mobileNav {
           Padding-top:30px;
    }

    .mobileNav a.menuTrigger {
           Padding-left: 30px;
           Position: relative;
           Width: 100%;
           Max-width: 65px;
           Text-align:right;
    }

    .mobileNav a.menuTrigger img {
           Position: absolute;
           Left:0;
           Top: 0; 
    }

        .mobileNav a.menuTrigger .menuTriggerText {
            Display: inline-block;
            padding-top: 3px;
        }

    .townLink {
           Right: 0;
    }
}