/*
Goldilocks Approach to Responsive Web Design Boilerplate

Author: Design by Front - @designbyfront
Version: 0.1
URL: http://www.goldilocksapproach.com  */


/* RESET  */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size:100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
  
  
/* ROOT /

html { 
  overflow-y: scroll;
  background-color:#F4F4F4;
  }


/* /ht Ethan Marcotte - http://front.ie/l8rJaA */

img, embed, object, video { max-width: 100%; }

.ie6 img.full, .ie6 object.full, .ie6 embed, .ie6 video { width: 100%; }



/* CORE TYPOGRAPHY  */

body {
  font-family: Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
  font-size: 1em;
  line-height: 1.618em;
  color: #333;
}

h1, h2, h3, h4, h5, h6 { line-height: 1em; }


/* headings */
h1, h2, h3, h4, h5, h6 {line-height:1.2em; margin-bottom:.0.809em; padding-bottom:0.2em; }
h1 a { font-weight:normal;}
h5 {font-size:1.2em;}
h6 {font-size:0.65em; text-transform:uppercase;}

p, ul, ol, dl, blockquote {
 text-align:justify; margin-bottom: 1.618em; /* max-width: 30em; Optimal width for long-form text */
  }


ul { list-style-type: disc; margin-left: 1.618em; }

ol { list-style-type: decimal; margin-left: 1.618em; }

nav ul, nav ol { list-style: none; margin: 0; padding: 0; }

b, strong { font-weight: bold; }

i, em { font-style: italic; }

small { font-size: 80%; }
.small { font-size: 80%; }

/* LINKS */

a, a:visited { outline: none; color: #FF6600; text-decoration: none; }
a:hover { outline: none; text-decoration:underline; }  
a:active, a:focus { outline: none; }

/* LAYOUT (Tertiary) */

#container {
  padding: 0;
  max-width: 30em;
  margin: auto;
}

aside { width: 100%; }

/* BROWSER STYLING */

.cf:before, .cf:after { content: ""; display: block; }

.cf:after { clear: both; }

.ie6 .cf { zoom: 1; }

/* My CSS */
#headerBkg {  
  background-image: url(../images/Birds200x50Crop.jpg);
  background-position: top right;
  background: #fefefe;}

#headerBkgShading {
  background:rgba(255,255,255,0.7); /* sets bg transparency to 50% if 0.5 at end */
  <!--[if IE]>
  <style type="text/css">
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#70990000,endColorstr=#70990000); /* first 2 digits start and end are %transparency*/
    zoom: 1;
  <![endif]-->
}


#headerImgShading {
  background:rgba(255,255,255,0.85); /* sets bg transparency to 50% if 0.5 at end */
  <!--[if IE]>
  <style type="text/css">
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#85990000,endColorstr=#85990000); /* first 2 digits start and end are %transparency*/
    zoom: 1;
  <![endif]-->
}

#headerInfoBar, #footerInfoBar {	
  width: 100%;
  height: auto;
  line-height: auto; 
  font-weight:normal;
  font-size:0.9em;
  margin: 0px;
  color:#F4F4F4;
  background-color:#424242;
  overflow:hidden;
  border-top: solid 1px #424242;
  border-bottom: solid 1px #FFBF00;
  letter-spacing: 0.04em;
}

#headerInfoBar a, #footerInfoBar a {
  padding-left:0.5em;
  font-weight:bold;
  text-decoration:none;
  color:#F4F4F4;
}

#headerInfoBar #lft, #headerInfoBar #rht, #footerInfoBar #rht {
  float:left;
  margin-top: auto;
  margin-bottom: auto;
  text-align:right;
  /* width:50%; */
  font-size:0.9em;
  white-space:nowrap;
}

#headerInfoBar #lft {
  text-align:left;
  width:80%; /* new */
}

#headerInfoBar #rht { 
  width:20%; /* new */
}


#footerInfoBar #rht {
  width:100%;
  text-transform:uppercase;
  font-size:0.78em;
}

#footerInfoBar #lft {
  display: none;
  text-transform:uppercase;
  font-size:0.78em;
}
	
#headerInfoBar img, #footerInfoBar img {
  border:0px;
  height:1em;
  width:auto;
  vertical-align:middle;
}

.padding { padding-left:1em; padding-right:1em; }
 
#navBar1, #navBar2 { color:#8AC007; border-bottom: solid 1px #8AC007; text-transform: uppercase; }
#navBar1 { border: 0px; background-color:#424242; }
#navBar2 { background-color:#565656;}
#navBar1 #navSelection { background-color: #8AC007; }
/* #navBar2 #navSelection { background-color: #FF6600; } Does not apply as anchors used */

#main { width:100%; background-color:#fefefe; }

/* Columns */
#col1 { height:90%; width:23%; /* background-color:green;*/ display:none; }
#col2 { width:98%; /* background-color:blue;*/ }
#col3 { width:98%; /* background-color:pink;*/ }

.col {
  display: inline;
  float: left;
  margin: 1%;	
}

.col h2 {
  font-size:0.75em;
  font-weight: bold;
  text-transform:uppercase;
  color:#efefef;
  background:#333;
  padding:0.5em;	
}

#col2 h2#pageHeading {
  font-size:1em;
  padding:0;
  padding-bottom:0.45em;
  border-bottom:1px solid #ccc;
  font-weight:bold;
  color:#333;	
  background-color:inherit;
  letter-spacing: 2px;
}

#col2Font { font-size:0.75em; }
.gutter1 { height:0.8em; }
.gutter2 {height:0.5em; }
.noBtmPaddingMargin { padding-bottom:0; margin-bottom:0; }

.paddingDiv { padding:0.68em; }

h2.boxHeading { font-size:0.8em; letter-spacing: 0.15em; color:#fefefe; }

.boxFont { font-size:0.68em; line-height:158%; color:#5B5B5B; letter-spacing:0.07em; }
.boxLft p, .boxRht p { margin:0; margin-top:0; }

.boxList, .boxListNested { margin-top:0.25em; margin-bottom:0; list-style-type: circle; text-align: left; } /* this is UL */
.boxListNested { list-style-type: disc;}
.boxListNoBullet { list-style-type: none; margin-left:0em; }
.boxList li { margin-top:0; margin-bottom:0; }

.boxLft, .boxRht {
  /* limit height of boxes initially, on hover enlarge to fit remaining text */
  height: 210px;
  overflow: hidden;

  background-color: inherit; /* #D1D0C3; #797979; */
  border:solid 1px #FF6600;  /* #424242; #8AC007; */

  background:rgba(255,102,0,0.08); /* sets bg transparency to 50% if 0.5 at end */
  <!--[if IE]>
  <style type="text/css">
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#08990000,endColorstr=#08990000); /* first 2 digits start and end are %transparency*/
    zoom: 1;
  <![endif]-->
}

.boxLft:hover, .boxRht:hover {
  /* Expand height boxes to fit remaining text */
  height: auto;
  min-height: 210px;
}

.boxRht {
  border:solid 1px #8AC007; 
  background:rgba(54,237,100,0.08); /* sets bg transparency to 50% if 0.5 at end */
  <!--[if IE]>
  <style type="text/css">
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#08990000,endColorstr=#08990000); /* first 2 digits start and end are %transparency*/
    zoom: 1;
  <![endif]-->
}

.moreless {
  float: right;
}

.boxLft h2 { background:#FF6600; border:solid 1px #FF6600; }
.boxRht h2 { background:#8AC007; border:solid 1px #8AC007;/* #347C17; */ }

/* Highlight selected anchor when activated */
.boxRht :target,.boxLft :target {
  color:#fefefe;
  font-weight: bold;
  background: #33601e;
  animation:blinkingTextLft 3s infinite;
}
 /* sets blink colour and fade for blinking text left */
  @keyframes blinkingTextLft{
    0%{   background: #8AC007; }
    20%{  background: #8AC007; } 
    40%{  background: #8AC007; }
    60%{  background: #33601e; }
    80%{  background: #33601e; }
    100%{ background: #33601e; }
  }

.boxLft :target { background: #cc3300; animation:blinkingTextRht 3s infinite; }

 /* sets blink colour and fade for blinking text right */
  @keyframes blinkingTextRht{
    0%{   background: #FF6600; }
    20%{  background: #FF6600; } 
    40%{  background: #FF6600; }
    60%{  background: #cc3300; }
    80%{  background: #cc3300; }
    100%{ background: #cc3300; }
  }

.marginTopZero { margin-top:0; }
#os0 { font-size:0.85em; color:#5B5B5B; letter-spacing:0.07em; }

div.clear {
  background: none;
  border: 0;
  clear: both;
  display: block;
  float: none;
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.valign {
  display: inline-block;
  vertical-align: middle;
}

.imgRht { float: right; border:solid 1px #424242; margin-top:0.2em; margin-bottom:0.2em; margin-left:1.2em; margin-right:0;}
.imgInline { border:solid 1px #424242; margin-top:0.2em; margin-bottom:0.2em; margin-left:1.2em; margin-right:1.2em; width:150px; }
.imgCntr { display: block; margin-left: auto; margin-right: auto; }
#indexImg { width:auto; height:auto; }
.indexImg2 { width:auto; height:auto; }

.imgLogoBdr { width:95%; height:95%; padding:2%; background-color:#ffffff; border:solid 1px #ccc; }

.hiddenDiv {  
 display: none;
}

#divEmailMobileNumber {
  border: solid 1px #FF6600;
  padding: 10px;
}

.underline { text-decoration: underline; }
.bold { font-weight: 70%; }
.ulBold { text-decoration: underline; font-weight: bold; }
.ulBoldScreeningQuestions { text-decoration: underline; font-weight: bold; color:#fefefe; }
.boldScreeningQuestions { font-weight: bold; color:#fefefe; }

.tbl_logos { width:100%; height:100px; }
.tbl_logos tr td { width:50%; height:100px; }
.tbl_logos tr td a img { width:100px; height:80px; }

#home_img { height:47%; padding-bottom:4px; }
.relatedLinks { font-size: 50%; }
.txtTransformNone { text-transform:none; }

/* Cookie notification and management popup */
.cookie_banner {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 10px;
      z-index: 1000;
}
    
.cookie_banner button {
      margin: 0 5px;
      padding: 5px 10px;
      background-color: #007bff;
      color: #fff;
      border: none;
      cursor: pointer;
}
    
.cookie_banner button:hover {
      background-color: #0056b3;
}