﻿/* base content master */


html,
body
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
strong.home-h3 {
    font-family: 'Calibri',Calibri, Arial; 
    color: #830065;
    margin: 1em 0em 0.5em 0em;
    line-height: 1.2;
}

html { margin: 0px;}

h1 {
 margin-bottom: 30px !important;
}
h2, 
h3,
h4, h5
{
    margin-bottom:20px !important;
}
p {
    margin-bottom:20px !important;
}


strong.home-h3 {
    display: block;
    color: #041C2C;
}

div,
p,
ul,
ol,
a,
label {
  color: #041c2c;
}

blockquote {
  font-weight: bold;
}

a {
  color: #830065;
}

a:active {
  outline: none;
}

a:hover {
  text-decoration: underline;
}


img.float-left { 
    float:left;

}
img.float-right { float:right;

}
img#logo {
  margin-top: 20px;
  width: 200px;
}

.zero-pad-left {
  padding-left: 0px !important;
}

.zero-pad-right {
  padding-right: 0px !important;
}

.zero-pad-all {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.zero-pad-bottom {
  padding-bottom: 0px;
}

.thirty-pad-right {
  padding-right: 30px;
}

.row {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.navbar-inverse {
  padding-top: 2px;
}

.navbar-collapse {
    padding-left:0px;
    padding-right:0px;
}

div.my-area-search-container,
div.news-and-twitter,
.navbar-collapse {
    padding-left: 0px;
    padding-right: 0px;
}

.nav > li > a {
  padding: 10px 0px;
}

.homepage-root-outer-container {
  width: 100%;
  background-color: #fff;
  
}

#root-container {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    opacity: 1;
}



div#navigation-outer-container > div:first-child,
div#homepage-banner-container,
div#navigation-inner-container,
div#search-box-inner,
div#emergency-box,
div#top-tasks-menu-container,
div#top-tasks-outer-container,
div#all-services-outer-container,
div#campaign,
div#blackpool-central,
div.my-area-search-container,
div#back-to-top,
div.footer-top,
div.footer-bottom,
div#footer-top-outer-container,
div#footer-bottom-outer-container,
div.latest-news {
    max-width: 1180px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 20px
}

div#search-box-inner > div.row > div.col-xs-9 {
    padding-right:0px;
}

div#campaign {
    padding-bottom:30px;
}

.homepage-outer-container {
  width: 100%;
  background-color: white;
}

#navigation-outer-container {
  background-color: #041c2c;
  position: relative;
  top: 0px;
  height: 40px;
}

#news-items-outer-container {
    background-color: #CCD2D5;
}

footer div.row div.col-md-12 {
  padding-left: 0px;
  padding-right: 0px;
}

/* --------------- nav bar ------------------------ */

.navbar-inverse .navbar-collapse, 
.navbar-inverse .navbar-form {
    padding-left: 0px;
}
.navbar {
  margin-bottom: 0px;
  border-radius: 0px;
}


#top-nav.navbar {
  min-height: 30px;
  height: 30px;
  color: #ffffff;
  border: none;
  background-color: #041c2c;
  top:2px
}

.navbar-nav {
    min-width: 605px;
    border: solid 0px pink;
}

#top-nav.navbar .navbar-nav > li {
  padding-right: 12.75px;
  display: inline;
  top: 2px;
}


#top-nav.navbar .navbar-nav > li:last-child {
    padding-right:0px;
}

#top-nav.navbar .navbar-nav > li.divider-vertical {
    padding-top: 0px;
    color: #fff;
    position: relative;
    top: 1px;
}

#top-nav.navbar .navbar-nav > li > a:first-child {
    padding-left:0px;
 }

#top-nav.navbar .navbar-nav > li > a {
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 25px;
  color: #ffffff;
}

#top-nav.navbar .navbar-nav > li > a:hover {
  text-decoration: underline;
}

#top-nav.navbar .navbar-toggle {
  margin-top: 3px;
  margin-bottom: 0px;
  padding: 8px 9px;
}

#listen-list {
    display: none !important;
}

.listen span {
  background: url('/SiteElements/ChannelShift/content/images/header-menu/listenicon.svg');
  background-repeat: no-repeat;
  height: 17px;
  width: 20px;
  position: relative;
  display: block;
  top: 5px;
  left: 0px;
  height:45px;
}

#top-nav.navbar .navbar-nav > .li-listen {
  margin: 0px;
  padding-left: 5px;
  padding-right: 0px;
}

/* -----------------search box -------------------------- */
div#search > span#form-master {

  border: solid 0px red;
  position:relative;
  float:right;
  padding-left:15px;
  
}

#searchbox-outer-container {
  background-color: #fff;
  position:relative;
  border:solid 0px blue;
}

#search-box-inner {
    width: 100%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    opacity: 1;
    height: 109px;
}

.left-inner-addon {
  position: relative;
}

.left-inner-addon input {
  padding-left: 30px;
}

.left-inner-addon i {
  position: absolute;
  padding: 10px 12px;
  pointer-events: none;
}

.right-inner-addon {
  position: relative;
  border:solid 0px black;
  top:8px;
  height:inherit;
  max-height:50px;
  float:right;

 
}

.right-inner-addon input {
  padding-right: 0px;
  margin-top: 0px;
}

.right-inner-addon input::placeholder {
    color: #041C2C !important;
    font: normal normal 300 19px/27px Calibri;
}

.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    pointer-events: none;
}


#search-box-inner > div.row:first-child {
    display: flex;
    border: 0px solid blue;
    box-sizing:border-box;
    position:relative;
    top:8px;
    width:100%;
}

#search-box-inner > div.row > div:first-child {
    display: flex;
    flex:1;
    box-sizing: border-box;
    border:solid 0px green;
}

#search-box-inner > div.row > div:first-child {
    display: flex;
    flex: 4;
    box-sizing: border-box;
    border:solid 0px red;
}

div#gateway-container {
    display: flex;
    border: 0px solid blue;
    box-sizing: border-box;
}

#search-box-inner .row {
  min-height: 100px;
  height: auto;
  position:relative;
  top:3.5px;
}



#search-box-inner .form-control,
.home-outline .form-control {
    border-radius: 0px;
    border: 1px solid #041C2C;
    height: 44px;
    position:relative;
    left:-10px;
}

.home-outline .btn {
  border-radius: 0px;
}

/* desk top view search button*/
#form-master {
  position: relative;
  display: block;
  width:97%;
}

#search-container {
  padding-right: 0px;
  padding-left:0px;
}

#search {
    display: flex;
    box-sizing: border-box;
    position:relative;
    right:-4px;
   
}

#search-box {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

 search-box-inner .col-xs-9 {
  
}


#search-button {
  position: absolute;
  top: -0.5px;
  right: -8px;
  z-index: 99;
  border: none;
  height: 44.9px;
  border:solid 0px transparent;
  background-color: #830065;
  border-top-right-radius: 10px;
  border-bottom-right-radius:10px;
}

#search-button > input {
  background: url('/SiteElements/ChannelShift/content/images/homepage-new/mag-glass.svg');
  background-repeat: no-repeat;
  height: 25px;
  width: 50px;
  border: none;
  color: transparent;
  position: relative;
  top: 8px;
  left: 10px;
  outline:none;
}

/* top - gateway landing pages */
.gateway-container {
  text-align: center;
  height:108%;
  max-height:100px;
  border: solid 0px black;
}

.gateway-container ul {
    display: block;
    list-style: none;
    padding: 0px;
    margin: 10px 0px;
    font-weight: bold;
    position: relative;
    top: 7px;
    left:1px;
    text-align:left;
}

.gateway-container ul li {
  display: inline;
  padding-right: 8.3%;
  font-size:19px;
}

.gateway-links {
  margin-top: 10px;
}

.gateway-links a {
  color: #000;
  letter-spacing: 0.5px;
}



/* printer and pdf links */

ul#print-links-ul {
    height: 25px;
    margin-bottom: 0px;
    position:relative;
    left:0px;
}

ul#print-links-ul li {
    width: 30px;
    height: 30px;
    list-style-type: none;
    display: inline;
}

ul#print-links-ul li {
    margin-right: 0px;
}

a.icon-pdf {
    background: url("/SiteElements/ChannelShift/content/images/landing-pages/pdf-icon.svg");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: 0px 0px;
    background-size: 20px 20px;
    height: 25px;
    width: 30px;
    position: relative;
    top: -7px;
    left: 5px;
    display: inline-block;
    outline: none !important;
    font-size: 0px;
}

a.icon-printer {
    background: url("/SiteElements/ChannelShift/content/images/landing-pages/printer-icon.svg");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: 0px 0px;
    background-size: 20px 20px;
    height: 25px;
    width: 30px;
    position: relative;
    top: -7px;
    left: 5px;
    display: inline-block;
    outline: none !important;
    font-size: 0px;
}

a.icon-pdf,
a.icon-printer {
    text-decoration: none;
}

/* bread Crumbs */

#crumbs {
    float: left;
}

#crumbs ul {
    list-style: none;
    margin-top: -7px;
    padding: 0px;
}

#crumbs ul li {
    display: inline;
    font-size: 19.2px;
    margin-right: 5px;
    line-height: 1em;
}

#crumbs ul li a {
    color: #041c2c;
}

#crumbs ul li.last {
    font-weight: bold;
}


/*  ------------ footer ------------------- */

footer {
    background-color: #041C2C;
    min-height: 450px;
}



/*  ------------ mobile/desktop views ------------------- */
.mobile-view,
.mobile-view2 {
  display: none;
}

.mobile-view2 > div.col-md-12 {
  background-color: #061b2b;
}

.desktop-view {
  display: block;
}

.table > tbody > tr > td {
  border-top: none;
  padding:2px;
}

span.error {
  color: #FF0000;
  position: relative;
  font-weight: bold;
}

.text-center-block {
  text-align: center;
  display: block;
  margin: auto;
  padding-bottom: 15px;
}

.emergency-box {
  min-height: 130px;
  margin: 10px 0px 10px 0px;
  width: 100%;
  background-color: #960416;
  display:none;
}

#emergency-placeholder {
  color: #fff;
  text-align: center;
  position: relative;
  top: 5px;
}

#emergency-placeholder p {
  text-align: center;
}

#emergency-placeholder p a {
  color: #fff;
}

#emergency-placeholder p a:hover {
  color: #fff;
  text-decoration: underline;
}

/* table styling  */
.tbl-responsive {
  margin: 0 auto;
  width: 100%;
  margin-bottom: 15px;
  border: none;
}

.tbl-responsive thead th,
.tbl-responsive tr th {
  border: solid 1px #fff;
  background: #830065;
  color: #fff;
}
.tbl-responsive thead th,
.tbl-responsive tr th,
.tbl-responsive tbody td {
  padding: .8rem;
}

.tbl-responsive tbody td {
  background: #e3e4e6;
  border: solid 1px #fff;
}


/* back to the top styling */
.backtotop-container {
  border-top: dashed 1px #000;
  padding-top: 6px;
  padding-bottom: 30px;
  font-size: 0.9em;
  margin-top: 24px;
}

#root-container {
    overflow-x: hidden;
}

#root-container div.backtotop-container > a.scrollToTop {
  color:#041c2c;
  background: url('/SiteElements/Channelshift/Content/Images/backToTopArrow.png') center left no-repeat;
  padding-left: 9px;
}

#root-container div.backtotop-container > a.scrollToTop:hover {
  text-decoration: none;
}

div#sidebar span.input-group-btn {
    max-width:50px !important;
    width:50px !important;
}


footer #find-services-input {
    height: 50px;
    width: 76%;
    float: left;
    border: solid 0px transparent;
}

footer #find-services-button-container {
    border: solid 0px red;
    float: left;
    width: 24%;
    height: 50px;
    display: block;
}

footer #postcode-search {
    border: solid 0px yellow;
    display: block;
    height: 100%;
    margin-top: 10px;
}

footer #postcode-search > input::placeholder {
    color: #041C2C !important;
    font: normal normal 300 19px/27px Calibri;
    font-family: 'Calibri',Calibri, Arial;
}

footer #find-services-button {
    height: 100%;
    width: 100%;
    margin-left: 0px;
    border-radius: 0px;
    background-color: #E6CCE0;
    font: normal normal bold 19px/23px Calibri;
    color: #041C2C;
}

    @media screen and (min-width: 497px) and (max-width: 1170px) {
        .gateway-container ul {
            margin: 10px 0px;
            text-align:center;
        }

        .gateway-container ul li {
            display: inline;
            padding-right: 6%;
        }

        #search {
            right:0px;
        }
    }

    @media screen and (max-width: 768px) {
        div.mobile-hidden {
            display: none;
        }

        #search-box-inner {
            height: 90px;
        }

        #search {
            right: 0px;
        }

        .mobile-view {
            display: block;
            float: right;
            margin-right: 10px;
            position:relative;
            left:0px !important;
        }

        .mobile-view2 {
            display: block;
        }

        div.mobile-view2 > div {
            padding-left: 0px;
            padding-right: 0px;
        }

        div#home-show-hide-services > div {
            width: 100%;
            float: left;
            min-width: 277px;
        }

        div#home-show-hide-services > div > strong {
            color: #fff;
            margin: 10px 0px 10px 0px;
            display: block;
            font-weight: 700;
            font-size: 24px;
        }

        .desktop-view {
            display: none !important;
        }

        #search-box-inner > div.row:first-child {
            border:solid 0px red;
            position:relative;
            top:5px;
        }

        #search-box-inner div.row {
            min-height: 0px;
        }

        #search-box-inner div.toggle-search {
            padding-top: 10px;
            padding-bottom: 20px;
        }

        #gateway {
        
        }

        #search-container {
            float: right;
            min-width: 99px;
            height: 70px;
         
        }

        a.menu-anchor,
        a.search-anchor {
            color: #fff;
            display: block;
            padding: 2px 0px 0px 0px;
            position:relative;
            height:50px;
            border:solid 0px red;
        }

        a.menu-anchor {

        }

        span.mobile-view > a.menu-anchor:active,
        a.search-anchor :active {
            outline: none;
        }

        footer #postcode-search > input::placeholder {
            color: #041C2C !important;
            font: normal normal 300 16px/23px Calibri;
        }

        footer #find-services-button {
            font: normal normal bold 16px/19px Calibri;
        }

    }



    @media only screen and (min-width: 1480px) {
        #root-container {
            margin: 0 auto;
            border: solid 0px red;

        }
    }

    @media screen and (min-width: 680px) and (max-width: 1060px) {
        .gateway-container ul {
            margin: 10px 0px 10px 0px;
            text-align:center;
        }

        .gateway-container ul li {
            display: inline;
            padding-right: 2%;
        }
    }

    @media screen and (max-width: 640px) {

        .text-white {
            color: #ffffff !important;
        }

        .tbl-responsive thead,
        .tbl-responsive tr th {
            display: none;
        }

        .tbl-responsive tbody td {
            display: block;
            padding: .6rem;
            text-align: right;
            padding-right: 20px;
        }

        .tbl-responsive tbody tr td:first-child {
            background: #830065;
            color: #fff;
        }

        .tbl-responsive tbody tr td.background-gray {
            background: #e3e4e6;
            color: #000;
        }

        .tbl-responsive tbody td:before {
            content: attr(data-th);
            font-weight: bold;
            display: inline-block;
            width: 1rem;
            float: left;
        }

        .tbl-responsive tbody td[data-title]:before {
            content: attr(data-title);
            float: left;
            font-size: .8em;
            color: #041c2c;
            padding-right: 6px;
            min-width: 100px;
            display: inline-block;
            text-align: left;
        }

        .tbl-responsive tbody td[data-title].text-white:before {
            color: #fff !important;
        }


        .tbl-responsive tbody td.width-full {
            display: block;
            padding: 5px;
            text-align: left;
        }

        .tbl-responsive tbody td.width-full:before {
            content: attr(data-th);
            font-weight: 700;
            display: inline-block;
            width: 100%;
            float: left;
            text-align: left;
            background-color: #830065;
            color: #fff;
            padding: 10px 5px;
        }


        div#crumbs > ul > li {
            display: none;
        }

        div#crumbs > ul > li:first-child,
        div#crumbs > ul > li:nth-child(2),
        div#crumbs > ul > li:nth-child(3) {
            display: inline;
        }

        div#crumbs > ul > li:nth-child(3):after {
            content: " ...";
        }

        ul#print-links-ul li:first-child {
            display: none;
        }

        #search-container {
  
        }

        #search-box-inner .row {
            top: 18.5px; 
        }

        .right-inner-addon {
            top:-5px;
        }

        div#gateway-container {
            display: block !important;
        }

        img#logo {
            width: 170px;
            position: relative;
            top: -5px;
        }
    }

    @media screen and (max-width: 496px) {

        div#navigation-inner-container,
        div#search-box-inner,
        div#emergency-box,
        div#top-tasks-menu-container,
        div#top-tasks-outer-container,
        div#all-services-outer-container,
        div#campaign,
        div.my-area-search-container,
        div#back-to-top,
        div.footer-top,
        div.footer-bottom,
        div#footer-top-outer-container,
        div#footer-bottom-outer-container,
        div.latest-news {
            padding-left: 15px;
            padding-right: 15px;
        }



        h2, h3 {
            margin-bottom: 24px !important;
        }



        h4, h5 {
            font: normal normal normal 19px/23px Calibri;
        }

        p {
            margin-bottom: 16px !important;
        }

        img#logo {
            top: 0px !important;
        }

        #search-container {
            top: 0px;
        }

        div#campaign {
            padding-bottom: 10px;
        }

        footer {
            min-height: 960px;
        }
    }


@media screen and (max-width: 321px) {
    .right-inner-addon {
        top: -4px;
        left: 15px;
        height: 50px;
    }

    button#find-services-button {
        width: 73px;
    }
}