﻿/* body{color: #18194f;} */
#brand, #brand p {
  color:#18194f;
}
#brand .bg-blue-gradient p, #brand footer p  {
	color: #fff;
}

#brand #thevideo {height: 508px;}
#brand .sys_video-thumbnail {width: 813px; height: 508px;}
#brand .sys_video {width: 813px; height: 508px;}


.bg-blue-gradient{   
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#18194f+0,007ca7+100 */
background: #18194f; /* Old browsers */
background: -moz-linear-gradient(45deg,  #18194f 0%, #007ca7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #18194f 0%,#007ca7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #18194f 0%,#007ca7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18194f', endColorstr='#007ca7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  }

.img-responsive{width: 100%; height: auto;}

section.bg-white h1, section.bg-white h2, section.bg-white h3, section.bg-white h4, section.bg-white p, section.bg-white p a, section.bg-white ul,  section.bg-white ul a {color: #18194f;}



.bg-blue-gradient h1, .bg-blue-gradient h2, .bg-blue-gradient h3, .bg-blue-gradient h4, .bg-blue-gradient p, .bg-blue-gradient ul, .bg-blue-gradient a { color: #fff;}

section.bg-pale-grey h1, section.bg-pale-grey h2, section.bg-pale-grey h3, section.bg-pale-grey h4, section.bg-pale-grey p, section.bg-pale-grey p a, section.bg-pale-grey ul {color: #18194f;}
.bg-pale-grey {background: #efefef;}



footer p {color: #fff;}


.styleGuideSection {
    margin: 30px 0;
}

.styleGuideSection .textBlock {margin: 10px 0 4px 0;}

.goodPractice, .badPractice {
    padding: 14px 38px 14px 10px ;
    margin: 5px 5px 10px 0;
    display: inline-block;
}
.goodPractice {
    background: #bde2c8 url("/siteelements/images/base/internal/bg-tick.png") no-repeat right 10px top 50%;
    background-size: 18px;
    border: 1px solid #26a04a;
}
.badPractice {
    background: #fac9d0 url("/siteelements/images/base/internal/bg-cross.png") no-repeat right 10px top 50%;
    background-size: 18px;
    border: 1px solid #d80f2a;
}


/* #brand p{color: #18194f; font-size: 1.2rem; margin: 0 0 2.5rem 0;}
#brand p:last-child{margin-bottom: 0;} */



#brand caption,
#brand td{font-size: 1.2rem;}



br{color: #18194f; font-size: 1.2rem; margin: .5rem 0 .5rem 0; display:block;}


header {padding: 0 19px; position:relative;}



.CTA-Arrow{border: 2px solid transparent; color: #fff; font-weight:normal; display:inline-block; margin-bottom:.5em; padding: 20px 38px 20px 8px; background: #de1b5c url("/SiteElements/Images/Base/Internal/CTA-icons/White/bg-icon-white-right-arrow.png") no-repeat; background-position: right 10px top 50%; text-decoration:none; background-size: 18px; }
.CTA-Arrow:hover,
.CTA-Arrow:focus,
.CTA-Arrow:active{background-color:transparent ; color: #1a296b; border-color: #1a296b; background-image: url("/SiteElements/Images/Base/Internal/CTA-icons/Colour/bg-icon-blue5-right-arrow.png");}


.bg-blue-gradient .CTA-Arrow:hover,
.bg-blue-gradient .CTA-Arrow:focus,
.bg-blue-gradient .CTA-Arrow:active{color: #fff; border-color: #fff; background-image: url("/SiteElements/Images/Base/Internal/CTA-icons/White/bg-icon-white-right-arrow.png");}


section.bg-white a.CTA-Arrow:hover, section.bg-white a.CTA-Arrow:focus, section.bg-white a.CTA-Arrow:active {color:#18194f;}
section.bg-white a.CTA-Arrow  {color:#fff;}


section.bg-pale-grey a.CTA-Arrow:hover, section.bg-pale-grey a.CTA-Arrow:focus, section.bg-pale-grey a.CTA-Arrow:active {color:#18194f;}
section.bg-pale-grey a.CTA-Arrow  {color:#fff;}

.sys_search-query-control{display:block; }
.sys_search-query-control label{visibility:hidden; position:absolute;}
.sys_search-query-control input{border-color: #18194f;font-weight:bold; width: 69%; padding: 20px 1.25%; margin: 0 0 1% 0;}
.sys_search-query-control .sys_button{background-image:none; width: 27%; padding: 0; background-color: #18194f; background-image: none; border: 2px solid #; color: #ffffff; cursor: pointer; font-weight: bold; text-align: center;}

.sys_search-query-control .sys_button:hover,
.sys_search-query-control .sys_button:active,
.sys_search-query-control .sys_button:focus{border-color: #efefef; background: transparent; color: #efefef; }



#SearchResults_wrapper .sys_subitem {margin-bottom: 1.2rem;}
#SearchResults_wrapper .sys_subitem .sys_subitem-heading {margin: 0 0 12px 0; line-height: 41px;}

#SearchResults_wrapper .sys_search-title{text-transform: revert;}

#StyleGuideSearchResults .sys_subitem a,
#SearchResults_wrapper .sys_subitem a{color: #005597; text-decoration: none; border-bottom: 2px solid #005597;}

#StyleGuideSearchResults .sys_subitem a:hover,
#StyleGuideSearchResults .sys_subitem a:active,
#StyleGuideSearchResults .sys_subitem a:focus,
#SearchResults_wrapper .sys_subitem a:hover,
#SearchResults_wrapper .sys_subitem a:active,
#SearchResults_wrapper .sys_subitem a:focus{background: #005597; color: #fff; text-decoration:none; border-color: transparent;}

#SearchResults_wrapper .sys_subitem dl {display:block; margin: 0;}
#SearchResults_wrapper .sys_subitem dl dt{display:none;}
#SearchResults_wrapper .sys_subitem dl dd{display:block; margin: 0;}

#SearchResults_wrapper .sys_subitem dl dd.sys_search-description{}
#SearchResults_wrapper .sys_subitem dl dd.sys_search-url{color: #20883F;}



/* table styles */
#brand table {width: 100%;}
table th, table td {text-align:left!important; border-collapse: collapse; padding: 8px; vertical-align: top;}
table thead th, 
table tbody th {
     background-color: #007ca7;
     color: #fff;
     font-weight: bold; }
table th, table tr, 
table tr td, 
table th, 
table tr, 
table tr td {
     border: 1px solid #eee;
     margin: 0px;}
table caption {font-weight:bold; background: none; padding: 4px 8px;color: #007ca7; text-align: left;}
table caption p{margin: 0px; padding: 0px;}
table td, table tbody tr.sys_alt td{background-color: #ffffff; border: 1px solid #eee;}
table tbody tr.sys_alt td, 
table td .tableRowHighlight {background-color: #eee;}
table tr .tableRowHighlight {background: none repeat scroll 0% 0% #eee; padding: 0px;}
table tr .tableRowHighlight span {padding: 8px;}
table .tableRowHighlight td {background: none repeat scroll 0% 0% #eee; padding: 8px;}
.noAlternateRows tbody tr td{background:#fff;}



h1.brand-h1 {
  font-size: 40px; 
  line-height: 50px; 
  margin: 120px 0 40px 0;
  }

  
section {
  padding: 20px 10px;
  min-height: auto;
}

section.titleOnlyBrand {padding-bottom: 0; min-height: auto;}

section.titleOnlyBrand h1.brand-h1 {margin-bottom: 0;}

ul {
    list-style-type: square;
}

.js-search-toggle .icon.icon-magnifier {stroke: #007ca7;}
.js-search-toggle .icon.icon-magnifier:hover {stroke: #18194f; opacity: 1;}

/* Small devices (321px and up)*/
@media screen and (min-width: 321px) {
  h1.brand-h1{
    font-size: 40px; 
    line-height: 50px; 
    margin: 120px 0 60px 0;
    }

  section {
    padding: 40px 20px;
  }

}

/* Medium devices (desktops, 641px and up) */
@media screen and (min-width: 641px) {
  h1.brand-h1 {font-size: 60px; line-height: 66px; margin: 0 0 30px 0;}
  h2{font-size: 44px; line-height: 52px; margin: 0 0 20px 0;}
  h3{font-size: 28px; line-height: 32px;margin: 0 0 10px 0;}
  section {
    padding: 60px 30px;
  }

.sys_search-query-control .sys_button{padding: 20px 0; }

section.titleOnlyBrand h1.brand-h1 {margin: 0;}

}

/* Large devices (desktops, 996px and up) */
@media screen and (min-width: 996px) {
  section {
    padding: 80px 0;
  }

.mlarge-4.column{padding-right: 4rem;}
.mlarge-8.column{padding-left: 4rem;}
.mlarge-4 {border-right: 8px solid #efefef;}
.bg-blue-gradient .mlarge-4 {border-color: rgba(255, 255, 255, .1);}
.bg-pale-grey .mlarge-4 {border-color: #fff;}

section.titleOnlyBrand h1.brand-h1 {margin: 0;}
ul.megamenu div.nav-column h3 {
  font-size: 3em;
}

}

/* Extra large devices (large desktops, 1200px and up)*/
@media screen and (min-width: 1201px) {
h1.brand-h1 {font-size: 80px; line-height: 84px; margin: 0 0 60px 0;}
h2{font-size: 50px;  margin: 0 0 30px 0;}
h3{margin: 0 0 20px 0;}

section {padding: 100px 0;}

section.titleOnlyBrand h1.brand-h1 {margin: 0;}
ul.megamenu div.nav-column h3 {
  font-size: 3.5em;
  padding-right: 20px;
}

a.js-search-toggle svg.icon.icon-magnifier {margin-top: 50px;}
a.js-search-toggle svg.icon.icon-search-cross {margin-top: 50px;}

}








