﻿/* Phones ------------------------------------------------------- */
@media screen and (max-width: 800px) {
    body{
        -webkit-text-size-adjust: 100%;
    }
    img{
    	max-width:100%;
        max-height:auto;
	}
    .sys_top{
        min-width:0 !important;
        margin-bottom: 15px;
    }
	#Header #LogoSearch .sys_mobile-logo{
		display:block;
		padding:0 11px;
	}
	#Header #LogoSearch .sys_searchcontainer {
		padding: 0;
		position: absolute;
		width: 99%;
	}
	#Header #LogoSearch img{
		padding:12px 9px 13px;
		height:75px; 
		width:80px;
		float:left;
	}
	#Body #content h1{
		display:block;
		width:100%;
		text-align:center;
		margin: 0 auto;
		padding-bottom:10px;
		border-bottom: solid #007899 3px;
		color:#666666;
	}
	#Body #content h2{
		padding-bottom:0px;
		box-sizing:border-box;
		border:0;
		margin-bottom:18px;
		color:#666666;
	}
	#Body #content h1 img,
	#Body #content h2 img{
		display:none;
	}
	#Body #content div.sys_icons{
		margin-bottom: 20px;
	}
	#Body #content div.sys_pagefooter{
		display:none;
	}
	div.sys_pagedetails{
		display:none;
	}
	#ButtonMenuMobile .sys_reportit{
		background: url('/SiteElements/Images/mobileReportItBg.gif');
		border:1px solid #B90030;
	}
	#ButtonMenuMobile .sys_requestit{
		background: url('/SiteElements/Images/mobileRequestItBg.gif');
		border:1px solid #0060B9;
	}
	#ButtonMenuMobile .sys_payit{
		background: url('/SiteElements/Images/mobilePayItBg.gif');
		border:1px solid #6B9E19;
	}
	div.deviceinfo span.tablet{ display:none; }
	div.deviceinfo span.website{ display:none; }
	div.deviceinfo span.phone{ display: block; }
	#MainMenu {
        display: block;
    }
    #MainMenu > div > ul {
    	display:none;
    }
    
    #TopTasksMenu .sys_wrapper {
    	padding: 0 10px 0 0;
    	width: 100%;
    }
    
    #TopTasksMenu .sys_wrapper div {
    	float: left;
    	width: 80%;
    	padding-left: 10px;
    }

	.sys_slideImage{
		display:none;
	}
	.sys_imagerow{
		display:none;
	}	
	#TopMenu, .sys_news-left, .sys_atoz, .sys_areabuttons, .sys_socialnetworks, .sys_twitterfeed, .sys_myhertsmere-tabs-wrapper, .sys_findsomething, .sys_myhertsmere, .sys_news-featurelistwithimage-control img{
		display:none !important;
	}
	 #Body #content .sys_news-minilist-control .sys_datarepeatercontrol{
		width:100%;
	}
	.sys_logo img{
		width:50px;
	}
	#Body #content{
		width:100%;
	}
	#content{
		padding:0 5px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}	
	#Header #LogoSearch{
		height: 150px;
	
		position: relative;
    }
	.sys_wrapper{
		margin:0;
		padding:0;
		width:auto;
	}
	#Body .sys_wrapper{
		margin-top:10px;
	}
	#ButtonMenuMobile{
		display:block;
		height: 50px;
		background:#EEEEEE;
		border-top:1px solid #CBCCCC;
		border-bottom:1px solid #CBCCCC;
		padding:10px 0 0;
	}
	#ButtonMenuMobile div.sys_wrapper{
		text-align:justify;
		min-width:272px;
		margin:0 8px;
	}
	#ButtonMenuMobile a{
		display:inline-block;
		/*float:left;*/
		width:30%;
		height:27px;
		color:#ffffff;
		padding:11px 0 0 0;
		text-align:center;
		border-radius: 8px;
        font-size:1.4em;
		/*margin:0 auto;*/
        font-weight:bold;
	}
	#ButtonMenuMobile  div.sys_wrapper:after {
		content: '';
		width: 100%;
		display: inline-block;
	}
	
	#Header #LogoSearch div.sys_search-query-control {
		background:none;
		width: 96%;
		margin-top: 130px;
	}

	#Header .sys_searchcontainer {
		text-align: left !important;
	}

	#Header #liveSearch {
		width: 100%;
		top: 40px;
	}

    #SearchMobile input.sys_searchbox, .sys_searchcontainer input.sys_searchbox{
		width:100%;
		height:40px;
		border:1px solid #999;
		border-radius:8px;
		padding-left:40px;
		background:url('/SiteElements/Images/mobileSearchBg.gif') no-repeat 10px center #ffffff;
		font-size:1.2em;
		color:#666666;
		-moz-box-shadow: inset 0px 0px 4px 0px #888;
		-webkit-box-shadow: inset 0px 0px 4px 0px #888;
		box-shadow: inset 0px 0px 4px 0px #888;
		float:left;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		font-size:1.5em;
	}
	#SearchMobile input.sys_search-button, .sys_searchcontainer input.sys_search-button{	
		background: url("/SiteElements/Images/searchButton.gif") repeat scroll 0 0 transparent;
		border: 0 none;
		float: right;
		height: 31px;
		margin: 2px 5px 2px 0;
		width: 30px;
		position:relative;
		top:-38px;
		border-radius:8px;
        line-height:0;
        font-size:0;
        text-indent:-9999px;
	}
	#Body #content{
		padding:0 7px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#Body #content .sys_news-featurelistwithimage-control ul{
		margin:0;
	}
	#Body #content .sys_news-featurelistwithimage-control ul li{
		width:auto;
		float:none;
		height:auto;
		border-bottom:2px solid #CCCCCC;
		padding:18px 2px !important;
		margin:0;
	}
	#Body #content .sys_news-featurelistwithimage-control ul li.sys_first{
		padding-top:0 !important;
	}
	#Body #content .sys_news-featurelistwithimage-control ul li.sys_last{
		border:0;
	}
	#Body #content .sys_news-featurelistwithimage-control ul li a{
		padding-bottom:15px;
        background:none;
        color:#227DB9 !important;
	}
	#Body #content .sys_news-featurelistwithimage-control ul li p{
		line-height:1.5em;
		color:#666666;
	}
	#Body #content .sys_news-featurelistwithimage-control ul li.sys_selected{
		background:none;
	}
    #Body #content .sys_news-featurelistwithimage-control ul li.sys_more-link{
        display:none;   
    }
	.sys_datarepeatercontrol{
		width:100%;
	}
	#Body #Sidebar,
	#Body #content{
		float: none;
	}
	#Body #Sidebar{
		width:auto;
	}
	.sys_footerTranslations, .sys_footerFindus{
		display:none;
	}
	#Footer #MainFooter .sys_wrapper div{
		width:auto;
	}
	#Footer #MainFooter .sys_footerSocialNetworks li{ float:left; width:42%; padding-left:20px; }
	#Footer #MainFooter{
		height:auto;
		clear:both;
		float:left;
		width:100%;
		padding:14px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#Footer #MainFooter p{
		float:left;
	}
	#Footer #MainFooter ul{
		float:left;
		padding-bottom:18px;
	}
	#Footer #MainFooter .sys_wrapper{
		padding:0 0;
	}
	#Footer #MainFooter .sys_wrapper div.sys_footerContact,
	#Footer #MainFooter .sys_wrapper div.sys_footerSocialNetworks{
		padding:0;
	}
	#Footer #LinkFooter ul li{ 
		display:none;
	}
	#Footer #LinkFooter ul li.sys_mobilelink-gotodesktop{ 
		display:block;
	}
	#Footer #LinkFooter ul li.sys_copyright{
		display:block;
	}
	#Footer #LinkFooter p.sys_contensis-credit{
		display:none;
	}
	.footer-links__contact ul li{
		display: block;
		text-align: center;
        line-height: 10px;
	}
	.footer-legal {
		width: 100%;
	}
	.footer-legal .cell {
		min-width: 100%;
	}
	.footer-legal .cell li {
		display: block;
		float: none;
		text-align: center;
		border-right: none;
		line-height: 25px;
	}
	/* Non homepage Sidebar */

	.sys_doughnutbox{
		display:none;
	}
	#Body #content .sys_news-featurelistwithimage-control ul{
		float:none;
	}
    .sys_theme-simple .sys_featurelistwithimage-control ul{
        padding:0 !important; 
        width:auto !important;
        float:none !important;
    }
    .sys_theme-simple .sys_featurelistwithimage-control ul li{
        width:auto !important;
        float:none;
    }
    .sys_theme-simple .sys_featurelistwithimage-control ul li a{
        width:auto !important;
        float:none;
    }

	/* Mobile Menu Nav */
	#SectionChooser,.selectbox-container{
		display:none;
	}
	#Body #Sidebar .sys_sidemenu{
		width:auto !important;
	}
	#Body #Sidebar .sys_menu ul li{ 
		width:auto;
		height:auto; 
		background:url('/SiteElements/Images/mobileMenuLiBg.gif') repeat-x #EEEEEE !important;
		border-bottom:1px solid #999999;
		padding:0;
	}
	#Body #Sidebar .sys_menu ul li.sys_first{ 
		border-top:1px solid #999999;
	}
	#Body #Sidebar .sys_menu ul li.sys_first{ 
		padding-top:0;
	}
	#Body #Sidebar .sys_menu ul li a,
    #Body #Sidebar .sys_menu .sys_simpleListMenu li a{
		color:#000000;
		font-size:1.2em;
		padding:16px 0 16px 40px;
		display:block;
		height:16px;
		background:url('/SiteElements/Images/mobileDownArrow.png') no-repeat 12px center !important;
		font-weight:normal;
	}	
	#Body #Sidebar .sys_menu ul li.sys_activeparent a{
		background:url('/SiteElements/Images/mobileRightArrow.png') no-repeat 16px center;
	}
	#Body #Sidebar .sys_menu ul li ul{
		display:block;
	}
	#Body #Sidebar .sys_menu ul li ul{
		display:none;
	}
	#Body #Sidebar .sys_menu ul li ul li{
		background:#FFFFFF !important;
		border-bottom:1px dotted #CCCCCC;
		height:38px;
	}
	#Body #Sidebar .sys_menu ul li ul li a, #Body .sys_menu ul li ul li a {
    	background:url('/SiteElements/Images/mobileSubRightArrow.png') no-repeat 17px 15px !important;
		padding:12px 0 10px 25px;
		font-size:16px;
		color:#444;
	}
	.sys_comment{
		background:none !important;
		padding:0 !important;
	}
	.sys_comment-profileimage{
		display:none;
	}
    /* updates - 30/06/2014 */
    
    .sys_twitterfeed {
        display:block !important;   
    }
    .sys_box .sys_box-header {
        background: #007899;
        width: 100%;
    }
    #Body #Sidebar .sys_twitterfeed .sys_box-contents {
        width: 100%;
    }
    #Body #Sidebar .sys_twitterfeed {
        margin: 0 0 36px;
        width: 100%;
    }
    #ButtonMenuMobile {
        height: auto;
    	padding: 10px 0;
    }
    #ButtonMenuMobile .sys_doughnutbox a {
    	color: inherit;
    	font-size: 12px;
    	width: 100%;
    }
    #ButtonMenuMobile .sys_doughnutbox {
    	display: block;
        width: auto;
        clear: none;
        overflow: hidden;
        border-radius: 8px;
        text-align: justify;
        min-width: 272px;
        margin: 0 8px;
        margin-bottom: 10px;
    }
    #ButtonMenuMobile  .sys_doughnutbox .sys_doughnutbox-header {
    	height: auto;
    	width: 100%;
    	padding: 9px 0 9px 23px;
    	font-size: 120%;
    	font-weight: bold;
    	color: #FFF;
    }
    #ButtonMenuMobile .sys_doughnutbox .sys_doughnutbox-body {
    	padding: 0px 8px 8px;
    }
    #ButtonMenuMobile .sys_doughnutbox .sys_doughnutbox-body ul {
    	background: #FFF;
    	border-radius: 8px;
    }
    #ButtonMenuMobile .sys_doughnutbox a {
    	color: inherit;
    	font-size: 12px;
    	width: 100%;
    	background: #FFF;
        height: 15px;
        padding-top: 5px;
    }

    #ButtonMenuMobile .sys_reportit-doughnutbox .sys_doughnutbox-header {
    	background: url('/SiteElements/Images/mobileReportItBg.gif');
        background: #B90030;
    }
    #ButtonMenuMobile .sys_reportit-doughnutbox .sys_doughnutbox-body {
    	background: #B90030;
    }
    #ButtonMenuMobile .sys_doughnutbox .sys_doughnutbox-footer {
    	height: 0;
    	width: 0;
    }
    
    #ButtonMenuMobile .sys_requestit-doughnutbox .sys_doughnutbox-header {
    	background: url('/SiteElements/Images/mobileRequestItBg.gif');
        background: #0060B9;
    }
    #ButtonMenuMobile .sys_requestit-doughnutbox .sys_doughnutbox-body {
    	background: #0060B9;
    }
    
    #ButtonMenuMobile .sys_payit-doughnutbox .sys_doughnutbox-header {
    	background: url('/SiteElements/Images/mobilePayItBg.gif');
        background: #6B9E19;
    }
    #ButtonMenuMobile .sys_payit-doughnutbox .sys_doughnutbox-body {
    	background: #6B9E19;
    }
 .sys_menuButton {
        color: #000 !important;
        font-size: 1.2em;
        padding: 16px 0 16px 16px;
        display: block;
        height: 16px;
        font-weight: normal;
        text-decoration: none;  
        top: 0;
        position: relative;
    }
    .sys_menuButton:before {
        content: '';
        background: url('/SiteElements/Images/menu-img.png');
        font-size: 30px;
        text-decoration: none;
        line-height: 18px;
        float: left;
        margin-right: 20px;
        width: 34px;
        height: 27px;
        top: -6px;
        position: relative;
    }
    
    .sys_globalMenu {
        display:block;   
    }
    #SectionChooser,.selectbox-container{
    	display:none;
	}
	#Body  .sys_sidemenu{
		width:auto !important;
	}
	#Body  .sys_menu ul li{ 
		width:auto;
		height:auto; 
		background:url('/SiteElements/Images/mobileMenuLiBg.gif') repeat-x #EEEEEE !important;
		border-bottom:1px solid #999999;
		padding:0;
	}
	#Body  .sys_menu ul li.sys_first{ 
		border-top:1px solid #999999;
	}
	#Body  .sys_menu ul li.sys_first{ 
		padding-top:0;
	}
	#Body .sys_menu ul li a,
    #Body  .sys_menu .sys_simpleListMenu li a{
		color:#000000;
		font-size:1.2em;
		padding:16px 0 16px 40px;
		display:block;
		height:16px;
		background:url('/SiteElements/Images/mobileDownArrow.png') no-repeat 12px center !important;
		font-weight:normal;
	}	
	#Body .sys_menu ul li.sys_activeparent a{
		background:url('/SiteElements/Images/mobileRightArrow.png') no-repeat 16px center;
	}
	#Body .sys_menu ul li ul{
		display:block;
	}
	#Body .sys_menu ul li ul{
		display:none;
	}
	#Body .sys_menu ul li ul li{
		background:#FFFFFF !important;
		border-bottom:1px dotted #CCCCCC;
		height:38px;
	}
	#Body #Sidebar.sys_menu ul li ul li a{
		background:url('/SiteElements/Images/mobileSubRightArrow.png') no-repeat 17px 15px !important;
		padding:12px 0 10px 25px;
		font-size:0.95em;
		color:#444;
	}


/* -- Top Tasks -- */  
  

.toptasks__containerB {
max-width: 960px;
margin: auto;
}



.toptasksB { 
    width: 100%;
    float: left;
    background: #eeeeee;
    border: none;
}


.toptasksB ul {
    margin: 0;
    padding: 0;
   width: 100%;
}

.toptasksB li {
    list-style: none;
    display: inline-block;
    float: left;
    width: 100%;
}



.toptasksB a {
    color: #666666;
    text-decoration: none;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    display: block;
    background: #eeeeee;
   padding: 0px;
}


.toptasksB .fa {
    font-size: 20px;
    padding: 10px;
    width: 30px;
   display: inline-block;
}


.toptasksB a:hover {
background: #007899;
color: #fff;
}

/* -- Services Tiles -- */
.services .service-tile .fa {
	font-size: 20px;
}

.service-tile__title .cell {
	font-size: 0.8em;
}

.service-tile__title {
	width: 80%;
}
/* -- Footer B -- */
    
 
.MainFooterB {
    background:#007899;
    width: 100%;
    float: left;
    padding: 40px 0px;
}

.MainFooter__wrapperB  {
    margin: auto;
    width:100%;
}

.MainFooter__wrapperB ul {
    padding: 0;
    margin: auto;
}


.MainFooter__wrapperB a {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: underline;
    display: block;
    margin: 10px 10px;
    font-size: 17px;
}
.MainFooter__wrapperB a:hover {
text-decoration: none ;
}

.MainFooter__wrapperB .fa {
    width: 51px;
    height: 51px;
    line-height: 51px;
    text-align: center;
    border-radius: 0;
}


.MainFooter__topB {
display: block;
}

.MainFooter__topB li {
    text-align: center;
    width: 25%;
    margin: 0px 0px;
}


.MainFooter__bottomB {
    max-width: 100%;
    margin: auto;
    padding: 20px 0px;
    }

.MainFooter__bottomB li {
    text-align: center;
    list-style: none;
    width: 100%;
}
  
}

/* Retina */
@media screen and (-webkit-min-device-pixel-ratio: 2){
	div.deviceinfo span.retina{ display: block; }
}

@media only screen and (max-width: 860px){
	.service-tile {
        padding: 2px 0;
     }
	.services ul li {
		flex: 0 0 100%;
	}
    .services .cta {
    	margin: 0;
    }
    .services  .cta .service-tile__link {
    	margin-top: 0;
    	margin-bottom: 0;
    }
    .services .cta:nth-child(13) {
    	margin-top: 30px;
    }
    .services .cta:nth-child(15) {
    	margin-bottom: 30px;
    }
	.push-wrapper {
    	overflow: hidden;
	}
	body {
		background-color: #007899;
	}
}

@media only screen and (max-width: 760px) {
    .push-wrapper.pushed .push-wrapper-inner {
      -webkit-transform: translateX(-80%);
      -moz-transform: translateX(-80%);
      -ms-transform: translateX(-80%);
      -o-transform: translateX(-80%);
      transform: translateX(-80%);
    }
}

@media only screen and (min-width: 761px) {
  .hideon-mobile {
    display: inline;
  }
}

@media only screen and (min-width: 761px) {
  .mobile-menu {
    display: none;
  }
}

@media only screen and (max-width: 760px) {
  .main-menu .menuLink--mobile {
    background-color: rgba(51,51,51, 0.99);
    color: #fff;
  }
}

@media only screen and (max-width: 760px) {
  .main-menu .main-menu__panel--mobile {
    display: block;
  }
  .main-menu .main-menu__panel {
     background-color: rgba(51,51,51, 0.99);
    color: #fff;
  }
}

@media only screen and (min-width: 761px) {

  .main-menu {
    right: 20%;
    width: auto;
    padding: 0 7px;
    background-color: rgba(51,51,51, 0.4);
    border-radius: 0 0 3px 3px;
  }

  .main-menu > ul > li {
    float: left;
    margin: 0 15px;
    position: relative;
  }

  .main-menu > ul > li > a {
    display: block;
  }

  /**
   * Top level
   */
  .main-menu .menuLink {
    position: relative;
    float: none;
    width: auto;
    font-size: 20px;
    color: #fff;
  }

  .main-menu .hasSub > .menuLink {
    padding-right: 18px;
  }
/*
  .main-menu .hasSub > .menuLink::before,
  .main-menu .hasSub:hover > .menuLink::before {
    content: '\e800';
    right: 0;
    display: block;
  }
*/
  .main-menu .hasSub a:focus + ul, 
  .main-menu .hasSub .childInFocus,
  .main-menu .hasSub a.inFocus + ul{
      display:block;
  }

  .main-menu .menuLink:hover,
  .main-menu .menuLink:focus {
    text-decoration: underline;
  }

  .main-menu .menuLink--active {
    background-color: transparent;
  }

  /**
   * Panel
   */
  .main-menu .main-menu__panel {
    top: 100%;
    left: -165px;
    width: 327px;
    background-color: rgba(51,51,51, 0.99);
    border-radius: 3px;
    margin-top: 14px;
        -webkit-transition: ease all 300ms;
    -moz-transition: ease all 300ms;
    -o-transition: ease all 300ms;
    transition: ease all 300ms;
    box-shadow: 0 15px 35px 0px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 15px 35px 0px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 15px 35px 0px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
  }

  .main-menu__panel.main-menu__panel--left {
    left: -116px;
  }

  .main-menu .main-menu__panel::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: inset 13px;
    border-color: transparent transparent #006C89;
    border-bottom-style: solid;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 0;
    right: 17px;
    margin-left: -10px;
    margin-top: -26px;
  }

  .main-menu .hasSub > a::before,
  .main-menu .hasSub:hover > a::before {
    content: '\e802';
  }

  .main-menu .main-menu__panel li:hover > a {
    background-color: #00607A;
  }

  .main-menu .main-menu__panel li:hover > a::after {
    display: none;
  }

  .main-menu .main-menu__panel li li {
    margin-bottom: 0;
  }

  .main-menu .main-menu__panel li li a {
    background-color: transparent;
  }

  .main-menu .main-menu__panel li li a::after {
    display: block;
    background-color: #333;
  }

  .main-menu .main-menu__panel li li a:hover::after,
  .main-menu .main-menu__panel li li a:focus::after,
  .main-menu .main-menu__panel li li a:active::after {
    display: none;
  }

  .main-menu .main-menu__panel li ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 327px;
    border-radius: 3px;
    background-color: #474646;
  }
}

  @media only screen and (max-width: 1112px) {
      .main-menu .main-menu__panel {
          left: -243px;
      }
  }