/*&&&&&&&&& Non-menu stuff*/
html,
body {
  margin: 0;
  margin-bottom: 2em;
  padding: 0;
  padding-bottom: 2em;
  position: relative;
    font: 1em/1.75 Verdana, Arial, Helvetica, sans-serif;
background: #faf4f8;
/*background: #f2e5ef;*/
}

body {
/*removed the following line to allow horizontal scrolling of results table*/
  /*overflow-x: hidden;*/
  -webkit-animation: androidbugfix infinite 1s
}
/* http://timpietrusky.com/advanced-checkbox-hack */

@-webkit-keyframes androidbugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}

/*&&&&&&&&&&& Menu Bar for wide screens*/
#header{
/*display:block;*/
  position: fixed;
    position: relative; /*sept*/
  top: 0;
  left: 0;
  right: 0;
height: 4em;
background: #CC4422;
background: linear-gradient(5deg, #FF6600 30%, #CC4422 100%);
}

/*&&&&&&&&& Select mobile menu */
#header label {
  padding: 0 0.125em;
    font: 1.9em/1.7em Arial;
      text-shadow: 0.1em 0.1em 0.1em #907;

}

/*&&&&&&&&&&&& close mobile menu*/
#menu label {
padding: 0 0.25em;
font: 1.8em/1.6em Arial;
font-weight: bold;
text-shadow: 0.1em 0.1em 0.1em #907;
}

/*&&&&&&&&&&&& left arrow show previous sub-menu*/
#menu .sub-nav .toggle {
     /*%%%%%%%*/
    /*padding: 2em 4.5em;*/
    font: 1.5em/1em Arial;
  margin: 2em 4.3em;
  /*border: 2px solid;*/
}


/*&&&&&&&&&&&& colour of left/right arrows and Close */
#header label:hover,
#menu label:hover {
    color: #fff;
}
/*puts the checkbox off the screen*/
#main-nav-check,
#menu .sub-nav-check {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

/*3 horrizontal bars and Close */
.toggle {
  position: absolute;
left: 0.8em;
  cursor: pointer;
    color: #ff0
}


/*&&&&&&&&& mobile menu*/
#menu,
#menu .sub-nav {
position: absolute;
top: 0;
height: 18em;
width: 8em;
background:#F60;
background: linear-gradient(-45deg, #d6acff 0%, #F60 50%);
z-index: 999;
left: -8em;
}

.container, #menu, #menu .sub-nav{
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: -webkit-transform .25s ease;
  transition: transform .25s ease;
}

/*&&&&&&&&& both menus main label box*/
#menu ul {
/*background: transparent;*/
line-height: 2em;
text-decoration: none;
padding: 0;
list-style: none;
margin-top: 4.23em;  /*&&&&&& mobile menu top margin*/
}

/*&&&&&&&&& both menus main label text*/
#menu li a {
display: block;
font-size: 1em;
padding-left: 1em;
color: #ff0;
text-decoration: none;
}

/*&&&&&&&&& mobile menu hover for label and left arrow*/
#menu li a:hover,
#menu .toggle-sub:hover {background: transparent;}
#menu .sub-nav a:hover {background: #c00;}
#menu .sub-nav {margin-top: -1px;}

/*&&&&&&&&& mobile menu sub-heading alignment*/
#menu .sub-heading {
  margin-top: 4.23em;
  padding-left: 1.3125em;
  color: #057;
  font-weight: bold;
  font-size: smaller;
}

/*&&&&&&&&& mobile menu sub-heading alignment*/
#menu .sub-heading:before {
  content: "";
  display: block;
  height: 1px;
  width: 8em;
  margin-left: -1.3125em;
}

/*&&&&&&&&&  menu arrow container - some main menu styles are defined elsewhere*/
#menu .toggle-sub {
font: bold 1em/2em Arial;
color: #ff0;
background: transparent;
float: right;   /*puts arrow on same line as label */
margin-top: -2em;
width: 1em;
cursor: pointer;
text-align: center;
}

/*.footer  ###########*/
.container,
#menu,
#menu .sub-nav,
.close-all{
  -webkit-transform: translate3d(0, 0, 0)
}
/* http://davidwalsh.name/translate3d */
/* #### - corrects 'unfixing' bug in Safari - uncomment if you have position:fixed elements inside .container - #### */
/* @media screen and (-webkit-min-device-pixel-ratio:0) { .container { -webkit-transform:none !important } } */
/* #### - extra css for js enhancement - #### */

#menu .close-all {
display: none;          /*does not work!*/
visibility: hidden;     /*??????*/
}
.js #menu .close-all {display: inline;}
.js #menu .toggle {top: 0;  z-index: 9999;}
.js #menu .sub-nav .toggle { left: 0.15em;  width: 1em;}

/* #### - define ids of animated container, menu and sub-menus here - #### */

#main-nav-check:checked ~ .container,

/*#main-nav-check:checked ~ .page-content,*/


                 /* ###########*/
/*#main-nav-check:checked ~ .footer,*/

#main-nav-check:checked ~ #menu,
#menu .sub-nav-check:checked ~ [id$="-sub"]
/* matches all elements with id ending "-sub" that are siblings of #menu .sub-nav-check:checked and come after it*/

/*&&&&&&&&& mobile menu width - must be same values as earlier*/
{
  -webkit-transform: translate(8em, 0);
  -ms-transform: translate(8em, 0);
  transform: translate(8em, 0)
}
/*&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&*/
/*&&&&&&&&&&&&&&&&&&&&&    WIDE SCREEN    &&&&&&&&&&&&&&&&&&&&*/
/*&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&*/

@media ( min-width:55em) { /*sept*/
/*@media ( min-width:70em) {*/

  /* #### - switch to desktop menu at 960px (960/16=60 - 16px being default browser font-size) - #### */
  /*&&&&&&&&& change to ems. Use of px conflicts with browser user setting, if not 16px*/
  /* #### - extra css for js enhancement - #### */

  .js #menu .close-all {display: none}

  .container,
  #menu,
  #menu .sub-nav {
    -webkit-transform: translate(0, 0) !important;
    -ms-transform: translate(0, 0) !important;
    transform: translate(0, 0) !important
  }
  #menu label,
  #menu .sub-nav,
  #menu .sub-heading,
  #header label {
    display: none
  }

      /* tmpb */
  #menu {
  /*position: relative;*/
   /*sept*/
     left: 2em;
         left: auto;    /*sept*/
    margin: auto;
    bottom: auto;
    height: 4em;
      height: 0;    /*sept*/
background: transparent;
    width: 55em; /*sept*/
        width: 100%;  /*sept*/
    padding: 10px;
  }

/*&&&&&&&&&&&& down arrow on wide screen menu.*/
  #menu .toggle-sub {
    display: inline-block;
    margin-top: -2.7em;
    margin-right: 0.25em;
    /*border-left: 0;*/
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  #menu .toggle-sub,
  #menu .toggle-sub:hover {
    background: transparent;
  }

/*&&&&&&&&&&&& 2 deep menu not used */
/*  #menu ul ul .toggle-sub {
    margin-top: -2.75em;
    margin-right: 0;
    border-left: 1px solid #444;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }*/
  #menu ul li:hover > label {
             color: #fff;
  }
  /*&&&&&&&&&&&& wide screen Menu position */
  #menu > ul {
    float: right;
    position: relative;
    z-index: 1;
    top: 0.4285em;
    right: 1em;
    margin-top: 0;
    display: inline-table;
    font-size: 0.875em;
  }
  #menu ul:after {
    content: "";
    clear: both;
    display: block;
  }
  #menu ul li {
    float: left;
    position: relative;
    text-align: left;
  }
  #menu ul li a {
    /*padding: 0.5em 3.75em 0.5em 1.5em*/
    padding: 0.5em 3em 0.5em 1em
    /*allows min-width:60em instead of 70em*/
  }
  #menu ul li a:only-child {
    padding-right: 1.5em;
  }
  #menu ul li:hover > a {
           /*background: #c00;*/
    -webkit-transition: background-color .25s ease;
    transition: background-color .25s ease;
  }
  #menu ul li:hover > ul {
    display: block;
  }

/*&&&&&&&&&&&& drop-down*/
  #menu ul ul {
    position: absolute;
    left: 0;
    margin-left: -1px;
  }
  #menu ul ul li {
    float: inherit;
    width: 13.75em;
  }
  #menu ul ul li a {
    padding: 0 1.5em;
  }
  #menu ul ul li a:after {
    right: 0.375em;
    margin-top: -1.6875em;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  #menu ul .sub-nav {
    top: auto;
    bottom: auto;
    left: auto;
    width: auto;
    margin-top: 0;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
  }

/*&&&&&&&&&&&& drop-down */
  #menu ul ul .sub-nav {
    float: left;
    top: 0;
    left: 13.75em;
    margin-left: 0;
    margin-top: -1px;
  }

/*&&&&&&&&&&&& keeps the RH menu items on the screen */
  #menu ul .fly-left ul li {
    float: none
  }
  #menu ul .fly-left ul {
        left: -8em;
    margin-left: -2px;
  }
  #menu ul .fly-left .toggle-sub {
    right: auto;
    left: 0.375em;
    padding-bottom: 1px;
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }

#menu li a {
font-size: 1.2em;
}

body {
/*Moved this from overall html, body attribute, to allow small screen scrolling*/
overflow-x: hidden;
}
}
/*&&&&&&&&&&&&&&&&&&&&&    END WIDE SCREEN    &&&&&&&&&&&&&&&&&&&&*/

.page-content {
  padding: 1em;
   /*max-width: 80em;*/
  margin: auto;
}

.page-content:after {
  display: block;
  content: "";
  height: 1px;

}

/* fixes bottom padding issue in IE10 */

.breadcrumbs {
  font-size: .85em;
  border-bottom: 5px solid #eee;
  margin: 0 -1.25em 1.5em ;
    margin: 0 0 1.5em ;
  padding: 1em 1.25em;
}

.breadcrumbs span {
  /*display: none;*/
}

@media(min-width:30em) {
  .breadcrumbs {
    line-height: 3.75;
    padding: 0 1.25em;
  }
}

@media(min-width:55em) { /*sept*/
  .breadcrumbs span {
    display: inline-block;
  }
}

blockquote {
  font-style: italic;
  margin: 0 5%;
}

/*********************************/

.logo{
position:fixed;
width:16em;
border:0;
top:0.2em;
right: 1em;
z-index: 20;
}

.icon{
position: fixed;
width:1.5em;
/*border:0;*/
top:0.2em;
}

.togglefooter {
  cursor: pointer;
    color: #ff0;
    padding: 1em;
font-size: x-large;
font-weight: bold;
  text-align: center;
}

.footer{
bottom: 0;
position: fixed;
padding: 0.2em 0.4em 0.2em 0.4em;
background: #D6ACFF;
    left: -8em;
    left: 0;
    right: 0;
    min-height: 2em;
/*23-3-17*/
z-index: 999;
}

.footer-content {
  padding: 2em;
font-size: 0.7em;
}
.footer-content a{
padding: 0.3em;
font-size: 1em;
}
.footer label {
  padding: 0;
    font: 1.5em/1.7em Arial;
  text-shadow: 0.2em 0.1em 0.1em #000;
}

.footer label:hover {
    color: #fff;
}
 /* ###########*/

.top, .top a{
text-decoration: none;
text-shadow: 0.1em 0.1em 0.1em #000;
padding: 0em 0.35em 0.4em 0.3em;
border-radius: 0.8em;
background: #D6ACFF;
font: bold 1.5em/1em Arial;
   font: bold 1.2em/1em Arial;
color: #ff0;
}
/*for content*/
a.top:hover{
color:#f0f;
}
/*for footer*/
.top a:hover{
color:#f0f;
}

#header .close-all {
	display:none
}

.js #header .close-all {
	display:inline
}