/**
 * Header banner image
 */


/* GW 03/11/2016 Background colour of landing page */
.content {
    background-color: #ffffff;
}

header {
 *zoom: 1;
	background: #FFFFFF url('/SiteElements/images/custom-branding/jsna-header-pattern-Cropped-2000x465.png') no-repeat center top;
   
	background-size: cover;
}


/**
 * Header logo
 */
/*
 header h1 { 
   width: 310px; background: none;
}

header h1 a {
    display: inline-block;
    text-indent: 0em; 
}


header h1 a img{
    width: 100%;
    height: 100%;
    max-width: 310px;
	max-height: 108px;  
}

.search.block { 
	top:  -20px; 
	position: relative; 
}*/

/* Padding above page title */
.content.loaded h1 {
  margin-top:1em
}
.content.landing.loaded h1 {
    margin-top:0
}

/* Change font to open sans */
h1, h2, h3, h4, legend {
    font-family: 'open sans';
}

/**
 * Landing page heading underline colour
 */
.landing .intro .container .content h1 {
    border-bottom: 2px solid #548CC9;
}

/* Landing page paragraph text */
.landing .intro .container .content p {
    font-size: 125%;
}

/* Landing page hide heart and print icons */
#spydusfloatlanding {
    visibility: hidden;
}

/**
 * Alternative landing page heading underline and background colour
 */
.altlandingMid {  
  	border-top: 3px solid #548CC9; 
}

/* 21/04/2017 GW - EDITED OUT THIS CSS, AS THE MID-LANDING PAGE HEADER TEXT HAD A GREY BACKGROUND, BUT THE SURROUNDING AREA WAS WHITE
.altlandingMid h3 span {
    background-color: rgb(240, 240, 240);
}*/

/**
 * Menu bar colour
 */
nav {
    background-color: #548CC9;
}

/**
* Menu bar text colour
*/
.nav a {color: white;
}

/**
* Menu bar hover over colour
*/
.nav.primary > li.hover > a {
    background-color: #548CC9; 
}

/**
* Menu bar home hover over colour

.nav.primary > li > a:hover, .nav.primary > li > a:focus, .nav.primary > li.hover > a {
    background-color: #3A76B8;
}

/**
* Mega menu background colour

.nav.primary > li .menu {
    background-color: #548CC9;
}

/**
* Mega menu sub-menu hover over colour

.nav.primary .menu .menuPrimaryLink.current {
  background-color: #017280
}
*/
/**
 * Colour of 'Find out more' button on carousel
 */
.content .secondary {
    background-color: #000000;
    color: white;
}

/**
 * Hover colour of 'Find out more' button on carousel
 */

.content .secondary:hover { background-color: #419438; }

/**
 * Line above title colour
 */
.content .toolbar {
    border-top: 2px solid #548CC9;
}

/**
 * Removes 'Hertfordshire County Council' from right of search button
 */
header h2 {
    background: url('') no-repeat left top;
  display: none;
}

/* Remove shadow from top menu on content pages */
.content {

    box-shadow: inset 0 0px 0px 0px rgba(0, 0, 0, 0.5);
}

/**
 * Jump links colour
 */
.content article ul:not([class]) li::before {
    color: #548CC9;
}

/**
 * Breadcrumb active page colour
 */
.breadcrumb ul li.active { 
  	background-color: #59B3B2; 
}

/**
 * Breadcrumb hover colour
 */
.breadcrumb ul li a:hover, .breadcrumb ul li a:focus {
    background-color: #59B3B2;
}

/**
 * Breadcrumb divider line hover colour
 */
.breadcrumb ul:hover + .toggleMenu, 
.breadcrumb .toggleMenu.active {
  	border-color: #419438;
}

/* Increase gap above page title on Listing and Standard page template */
/*.content .listingArticle{
  padding-top: 3em;}
.content article {
  padding-top: 3em;}*/
.universalTitle {
    padding: 1em 0 0 0;
}

/* Card colour - Change blue and grey cards to 'JSNA' colours*/
.content .widget.cardBlue h3 {
    background-color: #548CC9;
}
.content .widget .content {
    background-color: #E6EEF7;
    position: relative;
}


/* Reduce padding at the bottom of a table */
.content table tr:last-child td {
    padding-bottom: 10px;
}

/**
 * Left line in body of page colour
 */
.content .vcard, .content .indented {
    border-left: 3px solid #59B3B2;
}

/**
 * Form left line colour
 */
ul.sys_cms-form-body {
    border-left: 2px solid #59B3B2;
}

/**
 * Primary call to action button colour
 */
.content .primary {
    background-color: #548CC9;
}
.content .panel.action a {
    color: white;
}

/* GW 05/10/2016 Info panel 'i' colour*/
.content .panel.info::before {
    color: #548CC9;
}

/**
 * Primary call to action button hover colour
 */
.content .primary:hover {
    background-color: #3A76B8;
}


/**
 * Jump link colour
 */
.content .anchors li a, a[name*='_Top1'] + ul li a {
    color: #548CC9;
}

/**
 * Jump link hover colour
 */
.content .anchors li a:hover,
a[name*="_Top1"] + ul li a:hover { color: #3A76B8; }

/**
 * Jump link external link colour
 */
.content a.link-taskLink {
    color: #548CC9;
}


/**
 * Landing page mid page top tasks
 */

.topTasks.altmiddle {
    background-color: rgb(240, 240, 240);
        padding: 20px 0px;
}





/**
 * Opening hours tab colour
 */
.tab-links li.active a, .tab-links li.active a:hover {
    background: #59B3B2;
}

/* GW 05/10/2016 Table padding and colour */
.content table td {
  padding: 1em 20px 0 20px;}


/**
 * Mobile view nav button colour
 */
.landing .intro .container .content ul li a {
    background-color: #548CC9;
  color:white
}

/**
 * Mobile view nav button hover colour
 */
.landing .intro .container .content ul li a:hover {
    background-color: #3A76B8;
  color:white
}

/* GW 05/10/2016 Form previous, next, submit buttons and left border line */

ul.sys_cms-form-body {
    border-left: 2px solid #548CC9;
}
button[id*="btnBack_"] {
    background-color: #548CC9;
  color:white
}
button[id*="btnSubmitForm_"] {
    background-color: #187a36;
  color:white
}
button[id*="btnNext_"] {
    background-color: #548CC9;
  color:white
}


/**
 * Alternative landing page tile colour
 */

  .intro .container .content ul.altpurple li a{
  	background-color: rgb(84, 140, 201);
    color: black;
  	border-style:solid;
    border-width: 3px;
    border-color:  rgb(84, 140, 201);
}

.intro .container .content ul.altpurple li a:hover{
 	background-color: rgb(56, 115, 180);
  color: white;
}

.intro .container .content ul.altlight li a {
    background-color: rgb(240, 240, 240);
  color: black
}


 .intro .container .content ul.altlight li a:hover {
    background-color: rgb(215, 215, 215);
  color: black
}



/*background color for body reset*/

body {
    background-color: #FFFFFF;
}






/* Footer */

footer .container .block h3 {
    color: black;
}

.goog-te-gadget, .goog-te-gadget a {
    color: black !important;
}

.goog-te-gadget > div {
    background: url(/SiteElements/Images/downarrowselect.png) no-repeat right #9bbcdf;
}
 
/* DESKTOP-ONLY CONTENT */

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

header .container {
    padding: 30px 0px;
}
  
  
@media only screen and (max-device-width : 768px) 
   
   {

   	.landing .topTasks {
    background-color: white;
}
/*
.search.block .searchButton { 
      margin-top: -20px; position: relative; 
    }
 
     
header .container h1 {
    box-sizing: border-box;
    margin-top:  15px;
    padding: 0;
    margin-bottom: 0px;
    text-align: center;
}

header .container { 
  max-height: 165px;
}*/

   }


@media only screen and (max-width : 970px) 
      {
 /*
	header .container { min-height: 130px; }
	header h1 { width: 250px;}
	header h1 a {
    	display: block;
    	text-indent: 0em; 
    	padding-bottom: 20px; 
    	margin-top:  0px;
	}

	.search.block, .search.block .searchButton {
      	margin-top: 50px; 
      	position: relative; 
      	 
    }*/
 .altcontenttoptasks h1 {width: 90%;}
       


   
 
}

@media only screen and (max-width : 736px) {
/*
  .search.block, .search.block .searchButton {
    margin-top: 70px; 
    position: relative; 
  }*/
  /*addition hs 14/04/16**/

.landing .intro .container .content.altcontenttoptasks h1 {
    border-bottom: none;
}
.main-menu {
    z-index: 9999;
}
  
 .altlanding {
        border-top: 2px solid #548CC9;
        width: 90%;   
   margin-top:5px
    }

  
  /* GW 07/10/2016 Reduce padding between mega menu and landing page title on mobile*/ 
  .landing .intro .container .content h1 {
    top: 15px;
  }
  
  
  /* GW 07/10/2016 Get landing page white background to cover whole image on mobile*/
    .whiteout {
    z-index: 1;
    height: 50%;
    width: 100%;
}
  
  
  /* GW 07/10/2016 Reduce padding above landing page tasks on mobile*/
  
  .landing .intro .container .content.altcontentlinks {
    padding-top: 0px !important;
  }
  .altcontenttoptasks ul {
    margin-top: 0px !important;
}


 

@media only screen   
  and (max-device-width: 568px)
{
/*
	   	header h1 a {
	 	 margin-top: -10px;
  	}
	
  	header h1 a img{
	 	max-width: 250px;
		max-height: 90px;
      margin-left: -20px;
  	}
  
 header .container { 
   		max-height: 175px; 
   		min-height: 175px;
 	}
 	  .search.block, .search.block .searchButton {
    margin-top: 40px; 
    position: relative; 
  }*/
      .altLandItem li{ width: 100% !important;}
}

/**
 * Search button colour
 */

header .search button, .searchButton {
    background-color: #000000;
    color: #000000 !important;
}

/**
 * Search button colour in cards
 */
.content .widget .menu input[type='submit'] {
    background-color: #000000;
}

/* testimonial line colour */
.content blockquote {
    border-left: 2px solid #59B3B2;
}
  
  
}}
/* header */

header h1 {
  	display: inline-block;
  	width: 60%;
  	height: auto;
  	margin: 0;
}

header h1 a img {
	max-width: 100%;
	height: auto;
	display: block;
  	margin: 0 auto;
}

header .search {
  	display: inline-block;
  	width: 85%;
  	margin: 15px 0;
}

@media only screen and (min-width: 760px) {
  
  	
	header .container  {
  		text-align: left;
	}

    header h1 {
        width: 30%;
        margin: 0;
    }
  
  	header h1 a img {
      	margin: 0;
    }
  
  	header .search {
      	float: right;
      	width: 65%;
      	text-align: right;
      	margin: 25px 0 0;
    }
}

@media only screen and (min-width: 1170px) {
  
  	header .search {
      	margin-top: 35px;
    }
  
  
  
}

#c2{
    width: 10% !important;
}

#c3{
    width: 50% !important;
}

#styleOptions{
    margin-top: 40px;
}

.topTasks ul.grid li a img, .topTasks ul.grid .size a img {
    position: static;
}