body                     { background:#311; color:#d5d1d1; line-height:1.3; }
a                        { color:#eee; }
a[target="_blank"]:after { content:url('images/external.png'); }     /* add icon to offsite links */ 
h1,h2,h3,h4,h5,h6        { color:#7581aa; }
h2                       { font-size:1.5rem; }
h3                       { color:#777; font-size:1.2rem; margin:1rem 0; }
.black                   { color:#000; }
img                      { width:auto; max-width:100%; }
input[type=submit], 
input[type=button], 
button, 
a.falsebutt              { border:0; border-radius:5px; background-color:#000; opacity:0.6; padding:1px 15px; font-size:0.9rem; color:white; font-family:sans-serif; margin:4px 0;   }
input[type="submit"], 
input[type="button"], 
button, 
input[type="text"], 
input[type="password"], 
select, 
textarea                { border-color:rgba(0,0,0,0.7); border-radius:4px; line-height:1.8; }

.lightish    { color:rgba(255,255,255,0.6); }
.darkish     { color:rgba(0,0,0,0.75); }
.nomargintop { margin-top:0; }
.left        { text-align:left !important; }


@media (min-width: 700px) {
  a        { text-decoration:none; }
  a:hover  { text-decoration:underline; }
}

hr.side { border:solid #ddd; border-width:1px 0 0; clear:both; margin:22px 0 21px; height:0; }


div#wrapper { display:flex; flex-direction:column; margin-top:247px; margin-left:auto; margin-right:auto; max-width:2000px; }          /* margin-top allows space for fixed header; flex settings to fix flex-child vert alignment bug in IE */ 
@media (max-width: 900px) {
    div#wrapper { margin-top:0; }                                /* no need to allow space for header at smaller screen sizes */
}


div.widthrestrict { max-width:1300px; margin:0 auto; /* height:100%; */ width:100%; padding:0.1px 5%; background:justatest#aaf;  } /* invisibly small padding prevents margin collapse */
div.fullwidth     { max-width:2000px; margin:0 auto; /* height:100%; */ width:100%; } /* width:100% required to get IE to behave! */


img.naturalwidth { width:auto; margin:20px 0; display:inline-block; }
img.fullwidth    { width:100%; margin:20px 0; display:inline-block; }


table.cfdebug { /* position:absolute; top:4000px; */ width:100%; }
.cfdebug .cfdebug { width:auto; }

/* HEADER SECTION */

/* 2020 version =======================================================

div#header     { background:url('images/headerbg.jpg') center center no-repeat #f5c332;  background-size:cover;  min-height:100px; position:relative; top:0; width:100%; z-index:150; padding-bottom:0.01px; }
a#headlogo     { background:url('images/headertitle3_2021.png') no-repeat left 10%; background-size:contain; height:140px; display:block; margin:0; }
a#headlogobwcs { display:block; position:absolute; width:70px; bottom:5px; left:18%; }

@media (min-width: 500px) {
  div#header     { background-size:cover; }
  a#headlogo     { background:url('images/headertitle2_2021.png') no-repeat left 20%; height:183px; background-size:contain;  }
  a#headlogobwcs { width:80px; bottom:10px; left:40px; }
}

@media (min-width: 900px) {
  div#header     { background:url('images/headerbg.jpg') center center no-repeat ; background-size:cover; min-height:100px;  width:100%; z-index:150; padding-bottom:0.01px; }
  a#headlogo     { background:url('images/headertitle2021.png') no-repeat left 20%; background-size:contain; height:183px; display:block; margin:0; } 
  a#headlogobwcs { bottom:auto; left:auto; right:2%; top:15%; width:auto; }
}

@media (min-width: 900px) {
  div#header     { background-size:cover; background-position:center top; margin:0 auto; max-width:2000px; }
}


 ================================================= end 2020 version */
 
 
 /* 2021 version */
 
 div#header                     { background-position:bottom center; background-repeat:no-repeat; background-size:auto 140px; min-height:100px; position:relative;  padding-bottom:0.01px; /* max-width:1920px; */ margin-left:auto; margin-right:auto; }
 a#headlogo                     { /* background:url('images/headertitle3_2021.png'); see page header include */ background-repeat:no-repeat; background-position:center center; background-size:contain; height:140px; display:block; margin:0; }
 /* img#headlogoimage           { max-height:140px; } */
 a#headlogobwcs                 { display:block; position:absolute; width:55px; top:10px; right:10px; }
 div#header > div.widthrestrict { padding: 0 70px 0 5px;  /* leave space for menubutton on the right */ position:relative; }

 @media (min-width: 500px) {
   div#header        { background-size: auto auto; }
   img#headlogoimage { max-height:183px; }
   a#headlogobwcs    { width:80px;  }
 }
 

 
 @media (min-width: 900px) {  /* width below which main menu is hidden  */
   div#header     { background-position:center center; }
   a#headlogo     { height:183px; }
   a#headlogobwcs { width:100px;  }
   div#header > div.widthrestrict { padding-right:5px; }
 }
 
 @media (min-width: 1100px) {
   a#headlogobwcs { right:90px;  }
 }

 
/* end 2021 version */

 
 

/* NORMAL MENU (LARGE SCREENS ONLY) */
div#mainmenu               { background:#fff; font-size:13px; display:none; }
div#mainmenu div           { text-align:center; padding:5px 0; }
div#mainmenu a             { display:inline-block; padding:4px 10px; border-left:solid 1px #f79931; text-decoration:none; font-weight:bold; color:#222; }
div#mainmenu a:first-child { border-left:0; }


/* BUTTON TO SHOW/HIDE MENU 'PAGE' (SMALL SCREENS ONLY) */
a.menubutt             { color:#fff; border:solid 2px #fff; border-radius:5px; padding:0 2px; text-align:center; font-size:1.5rem; line-height:110%; margin:15px 5px 0 0; display:block; position:absolute; bottom:1.5rem; right:1rem; text-decoration:none; }
a.menubutt span::after { content:"\2630"; }  /* menu symbol */

@media (min-width: 500px) {
  a.menubutt { bottom:0.6rem; } 
}

@media (min-width: 900px) {
  a.menubutt   { display:none; }
  div#mainmenu { display:block; }
}


/* MENU 'PAGE' (SMALL SCREENS ONLY) */
div#menupage { /* min-height:calc(100vh - 200px ); */ padding:0; color:#000; position:relative; z-index:100; margin-bottom:0 !important; display:none; background:#532; width:100%; } /* display of this gets toggled */
.mpShow      { display:block !important;  } /* this class, controlling display properties for the menupage, is toggled on/off by the menu button */ 
#menupage h1 { font-size:3rem;   font-weight:normal; color:#082a57; margin-top:2.5rem; }
#menupage a  { font-size:1.3rem; font-weight:bold; color:#fff; margin-top:0; padding:1rem 0; display:block; text-decoration:none; text-align:center; border-bottom:solid 1px #888; }
#menupage a:nth-child(odd) { background:rgba(255,255,255,0.05); }
#menupage a:hover          { background:rgba(255,255,255,0.1) !important; }



/* At small sizes, header is small and scrollable, menu is on-demand, so content sections from standalone pages and the first content section of the homepage need to make allowance for header only  */

/* HOMEPAGE SECTIONS */
div#content1  { min-height:calc(100vh - 140px); align-items:center; flex-direction:row !important; padding:0.1px 0; color:#fff; margin-bottom:0 !important; background:url('images/traincomms2022.jpg') #bbb center center; background-size:cover; } 

div#content1b  { min-height:100vh;               align-items:center; flex-direction:row !important; padding:0.1px 0; color:#444; margin-bottom:0 !important; background:#ba7465 center center; background-size:cover; }

div#content2  { min-height:100vh;               align-items:center; flex-direction:row !important; padding:0.1px 0; color:#444; margin-bottom:0 !important; background:#aaa; }
div#content2b  { min-height:100vh;               align-items:center; flex-direction:row !important; padding:0.1px 0; color:#444; margin-bottom:0 !important; background:#aaa; }
div#content3  { min-height:100vh;               align-items:center; flex-direction:row !important; padding:0.1px 0; color:#000; margin-bottom:0 !important; background:#deb420; } 
div#content4  { min-height:100vh;               align-items:center; flex-direction:row !important; padding:0.1px 0; color:#000; margin-bottom:0 !important; background:#aaa; }
div#content4b { min-height:100vh;               align-items:center; flex-direction:row !important; padding:0.1px 0; color:#000; margin-bottom:0 !important; background:#aaa; }
div#content5  { min-height:100vh;               align-items:center; flex-direction:row !important; padding:0.1px 0; color:#bbb; margin-bottom:0 !important; background:#333; }
div#content6  { min-height:100vh;               align-items:center; flex-direction:row !important; padding:0.1px 0; color:#000; margin-bottom:0 !important; background:#ffffff; }
div#content7  { min-height:100vh;               align-items:center; flex-direction:row !important; padding:0.1px 0; color:#533; margin-bottom:0 !important; background:#333; }
div#content8  { min-height:100vh;               align-items:center; flex-direction:row !important; padding:0.1px 0; color:#444; margin-bottom:0 !important; background:#aaa; }
div#content9  { min-height:100vh;               align-items:center; flex-direction:row !important; padding:0.1px 0; color:#444; margin-bottom:0 !important; background:#aaa; }

div#contentvenue  { min-height:100vh;               align-items:center; flex-direction:row !important; padding:0.1px 0; color:#444; margin-bottom:0 !important; background:#ba7465; }

div#contentsponsors  { min-height:100vh;               align-items:center; flex-direction:row !important; padding:0.1px 0; color:#444; margin-bottom:0 !important; background:#ba7465; }

/* CONTENT DIV FOR STANDALONE PAGES */
/* the default background/foreground colours set here are generally overridden by a separate rule in the head of each standalone page */
div#content0 { min-height:calc(100vh - 140px ); padding:1px 0 3rem 0; margin-bottom:0 !important; text-align:left; overflow:hidden; background:#aaa; color:#fff; }



/* changes for wider displays */

@media (min-width: 500px) { 
  /* at medium sizes, header is large and scrollable, menu is on-demand, so content sections from standalone pages and the first content section of the homepage need to make allowance for header only  */
  div#content1, div#content1b, div#content0 { min-height:calc(100vh - 183px); }  
}


@media (min-width: 900px) { 
  /* at large sizes header is large and fixed, so ALL content sections need to make allowance for header + standard menu */
  div#content1, 
  div#content1b, 
  div#content2,
  div#content2b,
  div#content3, 
  div#content4, 
  div#content4b, 
  div#content5,  
  div#content6, 
  div#content7,
  div#content8,
  div#content9,
  div#contentvenue, 
  div#contentsponsors, 
  div#content0          { min-height:calc(100vh - 248px); }     /* viewport height - header height - menu height */
}



/* PAGE TITLE */
h1.pagetit     { background:#a2bed6; padding:15px 30px 15px 130px; border-radius:1rem; font-size:1.7rem; color:white; margin:0; display:inline-block; position:relative; margin:20px 0 80px 0; }
img.pagetitpic { position:absolute; top:-20px; left:0; width:auto; }



/* UNUSED */
@media (max-width: 500px) {     /* at window sizes below 500px, we show a lower-res image; we'll also crop it to a narrower width with this css... */        
    img#bannerimg { width:160%; margin-left:-30%; }
}

/* COLOUR SCHEMES USED FOR MAIN PAGE TITLES AND CONTENTS */            
.yellowblack { background:#fcb017; color:#000; }
.bluewhite   { background:#4e7aaa; color:#fff; }
.greenblack  { background:#10ab09; color:#000; }
.greenwhite  { background:#10ab09; color:#fff; }
.redwhite    { background:#ea5225; color:#fff; }
.pinkwhite   { background:#f1439a; color:#fff; }



/* FLEX SETTINGS */
/* default is for mobile display */
.flex, .flex1, .flex2, .flex3, .flex4, .flex5, .flex6                                            { display:flex; flex-direction:column; margin-bottom:20px; align-items:center; }   
.flex > *, .flex1 > *, .flex2 > *, .flex3 > *, .flex4 > *, .flex5 > *, .flex6 > *                { width:100%;  text-align:center; flex-grow:0; }
.flex > img, .flex1 > img, .flex2 > img, .flex3 > img, .flex4 > img, .flex5 > img, .flex6 > img  { margin-bottom:20px; }


/* changes for wider displays */
@media (min-width: 650px) {
  .flex, .flex1, .flex2, .flex3, .flex4, .flex5, .flex6     { flex-direction:row; justify-content:space-between; align-items:stretch  }
  .flex > *  { width:0; text-align:left; flex-grow:1; }
  .flex1 > * { width:100%; text-align:left; }
  .flex2 > * { width:48%; text-align:left; }
  .flex3 > * { width:31%; }
  .flex4 > * { width:21%; }
  .flex5 > * { width:18%; }
  .flex6 > * { width:15%; }
}

h1.strap1   { font-size:1.5rem; font-weight:bold;   color:#fc8;                   margin:7.5rem auto 2rem auto; width:100%; background:rgba(30,30,60,0.5); padding:1.9rem 1.9rem; border-radius:20px; }
h1.strap1b  { font-size:1.0rem; font-weight:bold;   color:#fff;                   margin:1rem auto 2rem auto; width:75%;  background:rgba(40,60,126,0.17);   padding:1.9rem 1.9rem; border-radius:1.7rem; }
/* h1.strap2   { font-size:2.5rem; font-weight:bold;   color:rgba(255,255,255,1.00);  margin:4rem 0 3rem 0; } */
h1.strap2   { font-size:2.5rem; font-weight:bold;   color:#fff;  margin:4rem 0 3rem 0; }
h1.strap2c  { font-size:2.5rem; font-weight:bold;   color:rgba(0,0,0,0.3);        margin:4rem 0 3rem 0; }
h1.strap3   { font-size:2.5rem; font-weight:bold;   color:rgba(255,255,255,0.7);  margin:4rem 0 3rem 0; }
h1.strap4   { font-size:2.5rem; font-weight:bold;   color:#2a5292;                margin:4rem 0 3rem 0; }
h1.strap6   { font-size:1.0rem; font-weight:bold;   color:rgba(0,0,0,1);          margin:4rem 0 3rem 0; }

h2.strap2a  { font-size:1.4rem; font-weight:bold;   color:rgba(255,255,255,0.75); margin:0 auto 0 auto;       width:74%; }

/* changes for narrowerer displays */
@media (max-width: 500px) {
   h1.strap1 { font-size:1.2rem; }
}


/* COVERAGE CHECKER (See also coveragechecker/release/assets/css ) */
div#gomcheckintro                  { max-width:500px; margin:0 auto; }
div#gomcheckintro div:nth-child(1) { background:url('images/bubbletail.png') no-repeat right 80px; width:161px; float:left; text-align:right; }
div#gomcheckintro div:nth-child(2) { background:#ccd9c9; border-radius:1.2rem; width:calc(100% - 161px); color:#293c7e; float:right; font-size:1rem; padding:1rem; margin-top:3rem;  }
.ukb-intro .ukb-search-panel       { margin-top:5px !important; }

/* changes for narrower displays */
@media (max-width: 450px) {
  div#gomcheckintro div:nth-child(1) { background:url('images/bubbletail2.png') no-repeat 20% bottom; float:none; margin:0 auto; padding-bottom:30px; }
  div#gomcheckintro div:nth-child(2) { background:#ccd9c9; border-radius:1.2rem; width:100%; color:#293c7e; font-size:1rem; padding:1rem; margin-top:0; float:none; }
}



a.explorebutt             { display:inline-block; background:#000; color:#fff; text-decoration:none; padding:5px 30px; margin:20px 0; font-size:80%; }
a.explorebutt span::after { content:"\25bc"; margin-left:0.5em; color:#fa0; }  /* downward arrowhead symbol */



/* a.arrowbutt { display:inline-block; color:#fff; background:url('images/morebox.png') no-repeat center center; background-size:contain; padding:70px 60px 80px 60px; font-size:1.1rem; font-weight:bold; text-decoration:none; } */
a.arrowbutt { display:inline-block; color:#fff; background:url('images/butt_down.png') no-repeat center center; background-size:auto; padding:33px; font-size:1.1rem; font-weight:bold; text-decoration:none; margin-bottom:2rem; }
a.arrowbutt:hover { opacity:0.8; }

/* a.arrowbuttup { display:inline-block; color:#fff; background:url('images/morebox_up.png') no-repeat center center; background-size:contain; padding:70px 60px 80px 60px; font-size:1.1rem; font-weight:bold; text-decoration:none; } */
a.arrowbuttup { display:inline-block; color:#fff; background:url('images/butt_up.png') no-repeat center center; background-size:auto; padding:33px; font-size:1.1rem; font-weight:bold; text-decoration:none; margin-bottom:2rem; }
a.arrowbuttup:hover { opacity:0.8; }



div.motivquote { color:white; opacity:0.4; padding:5rem 0; font-weight:bold; font-size:2rem; }


/* VIDEO EMBED */
.vwOuter             { margin:50px 10%; }
.videoWrapper        { position:relative; padding-bottom:56.25%;  /* 56.25%=16:9  75%=4:3) */ 	/* padding-top:25px; */ height: 0; }
.videoWrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; }


/* INFOPAIRS */
div#infopairs > div.flex > div:first-child { padding:15px 5%; } /* for info divs */

/* changes for wider displays */
@media (min-width: 450px) {
	/* set the info div twice as big as the pic div */
	div#infopairs > div.flex > div             { flex-grow:1; }
	div#infopairs > div.flex > div:first-child { flex-grow:2;  }
	/* swap the display order of the info & pic divs in even-numbered rows, for an alternating effect */
	div#infopairs > div.flex:nth-child(even) > div             { order:1; }
	div#infopairs > div.flex:nth-child(even) > div:first-child { order:2; }
}


/* TEXT-FLOWING COLUMNS */
.cols2,.cols3 { column-count:1; column-gap:4rem; margin:0 0 2rem 0; }

/* changes for wider displays */
@media (min-width: 500px) { 
  .cols2 { column-count:2; } 
  .cols3 { column-count:3; }
}


.flexcaption { text-align:left; font-size:0.8rem; margin:1rem 0; }


/* HOMEPAGE SECTION 3: MORE INFO BOXES */
div.moreinfoboxes                              { justify-content:space-around; }
div.moreinfoboxes > div                        { background:#2d9dd5; min-height:300px; border-radius:2rem; width:300px; overflow:hidden; position:relative; margin:0.5rem; }
div.moreinfoboxes > div > a                    { text-decoration:none; display:block; height:100%; width:100%; position:absolute; }
div.moreinfoboxes > div > a > h3               { background:#293c7e; color:#fff; margin:0; padding:1rem; text-align:center; }
div.moreinfoboxes > div > a > div              { min-height:240px; }
div.moreinfoboxes > div > a > div > div        { width:65%; color:#fff; padding:1rem; height:; }
div.moreinfoboxes > div > a > div > div > span { display:inline-block; background:#293c7e; padding:0.3rem 1rem; border-radius:1rem; margin:1rem 0; }



/* HOMEPAGE SECTION 4: PROVIDER LOGOS */
.providerlogos     { flex-wrap:wrap; justify-content:space-around; }
.providerlogos > * { display:block; margin:1rem 1%;  }
#provideradviser   { order:-1; } /* provideradviser comes first for narrow displays only */

@media (min-width: 450px) {
  #provideradviser { position:relative; top:-1rem; order:0; }  /* for wider displays only: provideradviser offset upwards, and back into source order */
}






/* FOOTER SECTION */
div#partnersandcontact                   { background:#f2f2f2; padding:30px 0.1px; }
div#partnersandcontact > div             { display:flex; flex-direction:column; justify-content:space-around; }
div#partnersandcontact > div > div       { text-align:center; }
div#partnersandcontact h2                { font-weight:normal; }
div#partnersandcontact img               { width:auto; }
div#partnersandcontact a                 { color:#283c7e; }

/* changes for wider displays */
@media (min-width: 600px) {
        div#partnersandcontact > div       { flex-direction:row; }
        div#partnersandcontact > div > div { text-align:left; }
}

div#foot        { background:#222; padding:30px 2%; color:#fb3; }
div#foot a      { color:#fb3; text-decoration:none; }
div#foot a#gomangolink { color:#862; }
div#foot > div  { margin-bottom:10px; display:flex; flex-direction:column; justify-content:space-around; align-items:center; }

/* changes for wider displays */
@media (min-width: 600px) {
        div#foot > div   { flex-direction:row; }
}



/* ========================== COLUMNS CSS FROM THE 2016 TRAIN COMMS FILESET ============================= */


/* default columns setup for wide screens - 3 cols side by side */
div#traincols { margin:0 auto; padding:0 0px; max-width:700px; }
div#traincolbooking      { box-sizing:border-box; float:left;  width:98%; margin-right:0%; margin-bottom:40px; }
div#traincolbooking label { color:black; }




/* columns setup for medium screens - 3rd col under other two */
@media (max-width: 500px) {
                             div#traincols       { max-width:350px; }
                             div#traincolbooking { width:100%; margin-right:0; }
                          }

/* columns setup for narrow screens - all columns stacked */                          
@media (max-width: 500px) {
                             div#traincolbooking { width:auto; float:none; margin:0 0 40px 0; }
                          }     


/* new booking pages */
table.borderdetails     { box-sizing:border-box; width:100%; } 
table.borderdetails *   { box-sizing:border-box; }

/* colours for booking table title and submit rows */    
table.borderdetails th                 { text-align:left; background:#eb4; border:solid 1px #888; padding:1px 5px; font-weight:normal; }
table.borderdetails td                 { text-align:left; background:#fff; border:solid 1px #888; padding:1px 5px; font-weight:normal; }
table.borderdetails input[type=submit] { border:0; background:#000; border-radius:4px; color:#fff; }

/* ===================== END OF COLUMNS CONTROL ============================= */