@import url("/EasySiteWeb/EasySite/StyleData/BOP19-master/CSS/lib.generics.css");
@import url("/EasySiteWeb/EasySite/StyleData/BOP19-master/CSS/lib.modules.css");
@import url("/EasySiteWeb/EasySite/StyleData/BOP19-master/CSS/lib.nav.css");
@import url("/EasySiteWeb/EasySite/StyleData/BOP19-master/CSS/lib.grists.css");
@import url("/EasySiteWeb/EasySite/StyleData/BOP19-master/CSS/lib.panels.css");
@import url("/EasySiteWeb/EasySite/StyleData/BOP19-master/CSS/lib.promotion.css");
@import url("/EasySiteWeb/EasySite/StyleData/BOP19-master/CSS/lib.apps.css");


@media screen, all {

/*-------------------------------------------------------
 LAYOUT
---------------------------------------------------------*/

/* whole page container */
#pwrapper { position: relative; margin: 0; padding: 0; }

/* masthead */
#sx-masthead { width: 100%; background: #161e2b; }
.sx-mo { max-width: 1220px; margin: 0 auto; }
.sx-mi { padding: 10px 0; position: relative; }
.cls.sx-mi { /*overflow: visible;*/ }

/* avatar */
#sx-avatar { float: left;  }
#sx-avatar img { display: block; }
.logotxt { float: left; color: #fff; margin-left: 20px; margin-top: 20px; font-size: 2em; font-weight: 400; letter-spacing: -1px; }
.logotxt a, .logotxt a:visited { color: #fff; text-decoration: none; } 

/* search */
#sx-search, .sx-so {}
.sx-si {}

/* top menu */
.section-link { position: absolute; top: 20px; right: 10px; background: #32558e url("/EasySiteWeb/EasySite/StyleData/BOP19-master/Images/nav-lines.png") no-repeat left 20px center; padding: 12px 30px 13px 80px; color: #fff; }

.mob-nav-item-i {display: block; z-index: 100; text-transform: capitalize; text-decoration: underline; }
a.section-link { color: #fff; font-size: 1.25em; font-weight: 500; text-decoration: none; }
.mob-nav-item-i:hover { text-decoration: none; }

/* nav + content */
#sx-body { clear: both; background: #fff; margin: auto; /*position: relative;*/ }
.sx-bdo { background: #fff; padding: 0; width: 1220px; margin: auto; }
.sx-bdi { margin: auto; padding: 0 0 20px 0; }

/* content */
#sx-content { float: none; width: 100%; }
.sx-co { padding: 0 15px; }
.sx-ci {}

/*to contain 1220 content on 100% pages*/
.width-container { max-width: 1220px; margin: auto; }

/* generator */
#sx-generator {}

/*-------------------------------------------------------
 USABILITY
---------------------------------------------------------*/
/*mobile search button*/
#clk-search { display: none; margin-top: 13px; }
a#search-link-alt { border: 0; height: 50px; width: 100%; background: #32558e url("/EasySiteWeb/EasySite/StyleData/BOP19-master/Images/search-lg.png") no-repeat left 18px center; cursor: pointer; color: #fff; padding: 16px 30px 15px 80px; font-weight: normal; font-size: 1.05em; }

/* search box */
#sx-search { float: left; width: 40%; margin: 10px 0 0 130px; clear: right; }
#sx-search { padding: 0; }
#sx-search fieldset { border: 0; padding: 0; margin: 0; width: 100%; background: #fff; }
/* with this method, it remains visible to screen readers */
#sx-search fieldset legend, #sx-search fieldset .question { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
#sx-search fieldset .fields { float: left; width: 70%; background: #fff; }
#sx-search fieldset .buttons { float: left; width: 30%; text-align: right; clear: none; margin: 0; background: #32558e; }
#sx-search .answer { margin: 0; width: 100%; }
#sx-search .textbox { border-width: 0; width: 100%; color: #444; }
#sx-search input.textbox  { border: 0; outline: none; padding: 15.5px; }
#sx-search .button { display: inline-block; float: right; margin-top: 0; }
#sx-search .button { border: 0; height: 52px; width: 100%; background: #32558e url("/EasySiteWeb/EasySite/StyleData/BOP19-master/Images/ico-search.png") no-repeat left 13px  center; cursor: pointer; color: #fff; padding-left: 25px; font-weight: 500; font-size: 1.25em; text-decoration: underline; }
#sx-search .button:hover { text-decoration:none; }
#sx-search .element { margin: 0; }

/*skip*/
#skiptocontent a { background: none; border-bottom: 1px solid white; border-right: 1px solid white; border-bottom-right-radius: 8px; color: white; left: 0; padding: 6px; position: absolute; top: -150px; transition: top 1s ease-out 0s, background 1s linear 0s; z-index: 10005; }
#skiptocontent a:focus { background: #bf1722 none repeat scroll 0 0; left: 0; outline: 0 none;  position: absolute; top: 0; transition: top 0.1s ease-in 0s, background 0.5s linear 0s; }

/*-------------------------------------------------------
 BREADCRUMB 
---------------------------------------------------------*/
#sx-bct { clear: both; background: #e6e6e6; margin-bottom: 25px; }
.sx-bi { max-width: 1220px; margin: 0 auto; padding: 19px 0; font-size: 1.1em; }
.sx-bi span.sep { text-indent: -9999em; background: url("/EasySiteWeb/EasySite/StyleData/BOP19-master/Images/bc-chev.png") no-repeat center; width: 10px; display: inline-block; margin: 0 10px; }

/*-------------------------------------------------------
 FOOTER
---------------------------------------------------------*/
#sx-extras { clear: both; color: #fff; }
#sx-extras .ft-info { background: #202a32; padding: 30px 0; overflow: Hidden; }
#sx-extras .ft-info-inr { max-width: 1220px; min-height: 410px; margin: auto; }
#sx-extras .fservices, #sx-extras .fcontact { float: left }

#sx-extras .fservices { width: 60%; margin-right: 100px; }
#sx-extras .fcontact { width: 30%; }
#sx-extras .fservices ul { float: left; width: 50%; }
#sx-extras .fservices ul li { margin-bottom: 22px; }

#sx-extras .fcontact ul { display: block; }
#sx-extras .fcontact ul li { width: 25%; float: left; }
#sx-extras .fcontact ul li a { display: block; height: 62px; width: 62px; text-indent: -999em; margin-bottom: 25px; }

#sx-extras .sx-eo { margin: auto; background: #030e17; padding: 20px 0; }
#sx-extras .sx-ei { max-width: 1220px; margin: 0 auto; }
#sx-extras .copyright { color: #fff; margin-top: 35px;}
#sx-extras .flinks { width: 70%; float: left; }

#sx-extras .rlinks { float: right; }
#sx-extras .rlinks a { width: 309px; height: 62px; display: block; background: url("/EasySiteWeb/EasySite/StyleData/BOP19-master/Images/logo-govuk.png") no-repeat top right; text-indent: -9999em; }

#sx-extras .copyright { clear: both; padding-top: 40px; display: block; }

#sx-generator { background: #fff; text-align: center; color: #ccc; padding: 10px 0; }

#sx-extras .sup a { padding: 7px 30px; border: 2px solid #fff; color: #fff; display: inline-block; }

/*-------------------------------------------------------
 COLUMNS
---------------------------------------------------------*/
/*default column style*/
/* so that empty columns show */
.column-inner { min-height: 1px; }

.columns-alpha { margin-top: 0; padding-bottom: 10px; }
.columns-alpha .column-inner { margin-right: 10px; }
.columns-alpha .column-inner .columns-alpha .column-inner { margin-right: 10px; }
/*.columns-alpha .column-alpha .column-inner { margin-left: 0; }*/

/*with extra spacing, as used on home page*/
.columns-beta { margin-top: 0; padding-bottom: 20px; }
.columns-beta .column-inner { margin-left: 115px; }
.columns-beta .column-alpha .column-inner { margin-left: 0; }
.columns-beta .column-inner .column-inner { margin-right: 10px; }

/*columns-omega - single column, no padding, used to keep icons by text at rwd - used in contact panel*/

/*columns-psi - for swapping left and right order*/
.columns-psi { margin-top: 0; padding-bottom: 20px; }
.columns-psi .column-inner { margin-right: 80px; }
.columns-psi .column-inner .column-inner { margin-right: 8px !important; }
.columns-psi .column-outer.column-alpha, .columns-psi .column-outer.column-beta { float: right !important; clear: left !important; }
/*protect nested columns, as using selectors isn't working*/
.columns-psi .columns-alpha .column-outer.column-alpha, .columns-psi .columns-alpha .column-outer.column-beta { float: left !important; clear: right !important; }

/* columns-chi - used for google maps where we want a nested column to be able to expand to 100% for mobile (instead of auto) */

/*---------------------------------------
STRUCTURAL ELEMENTS
-----------------------------------------------------------*/

/*for showing/hiding content at desktop/mobile. Used on the home page*/
.showdesktop { display: block; }
.showmobile { display: none; }

/*when wanting a dashed wrapped around content*/
.dashing-wrapper { background: url("/EasySiteWeb/EasySite/StyleData/BOP19-master/Images/bg-dashedheader.png") repeat-x left top; padding: 20px 0; clear: both; }
.dashing-wrapper .columns-outer.columns-alpha { background: url("/EasySiteWeb/EasySite/StyleData/BOP19-master/Images/bg-dashedheader.png") repeat-x left bottom; padding-bottom: 20px; }
.dashing-wrapper .columns-outer.columns-alpha .columns-outer.columns-alpha { background: none !important; }

/*for wrappers with top and bottom borders, and a lighter title*/
.bordered-element { border-bottom: 1px solid #cccccc; padding-bottom: 20px; }
.bordered-element h2 { color: #777; font-weight: 300 !important; border-bottom: 1px solid #ccc; padding-bottom: 35px; }

/*a useful structural element to keep elements grouped at rwd. Used around icons and text in contact panel, to keep icons and correct content editor together at rwd.*/
.contactitems { display: block; clear: both; min-height: 37px; }
.contactitems .justify-left { min-width: 40px; }
}

@media print {
/* print friendly */
#sx-help, sx-masthead, #sx-extras, #sx-bct { display: none; }
#sx-nav { width: 0; display: none; }
#sx-content { margin-left: 0px; }

}