/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
*/

html, body, div, span, applet, object, iframe,
 p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, 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, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }

/* removed h1, h2, h3, h4, h5, h6 from above reset since we want different sizes for differenet h's , not 
   just font-size: 100% ie same size for all headings
*/

/* to allow .js word processor output which uses <strong> for bold text to be correctly displayed as bold type */
strong { font-weight: bold; } 

* {
    box-sizing: border-box;
    }


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
    box-sizing: border-box;
}

html {
    /* add this in conjunction with body set 99+%  so bottom of body always at bottom 
       of browser viewport even if body has < 1 screen's worth of content -- can then
       easily fix copyright to bottom of all pages even those with little content
    */
    height: 100%;
    
    /* to prevent font size from increasing when rotating iPhone/MS phones from 
       portrait to landscape
    */
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    }

body {
    line-height: 1;
    position: relative; /* default z-index 0 */
    font-size: 100%;
    font-family:  Arial, 'Microsoft Sans Serif' , 'MS Sans Serif',
        'Bitstream Vera Sans', Courier, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    width: 100%;
    
    /* force body to fill viewport, even if page has minimal content */
    height: 100%;
    /* fix copyright at bottom of all pages */
    
    display: flex;
    flex-direction: column;
    
    /*border: solid blue 1px;*/
}

p {
    margin-bottom: 1em;
}


#main_container > h1, h2, h3, h4, h5, h6 {
    font-weight: bolder;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    }


#main_container {
    width: 100%;
    max-width: 75em; /* 1200px == 75 16px chars */
    margin-left: auto;
    margin-right: auto;
    background-color: white;
        
    /* hack - if no border abs posnd social media div enclosed in main_menu despite main_container
       being posn relative!
    */
    border-top: solid white 1px;
    position: relative; /* default z-index 0 */
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    }
    
/*   
#main_container > p, #main_container > div > p,
#main_container > form > p 
    { 
     keep text away from edge of browser window 
    padding-left: 0.5em;
    padding-right: 0.5em;
    line-height: 1.2;
    }

    
#main_container > ul, #main_container > ol {
    margin-left: 0.5em;
    margin-right: 0.5em;
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    }
*/

ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define visible focus styles! 
:focus {
    outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

select, input, textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: Arial, 'Microsoft Sans Serif' , 'MS Sans Serif',
        'Bitstream Vera Sans', Courier, Helvetica, sans-serif;
}

/* original version #search_input:-ms-input-placeholder etc */
:-ms-input-placeholder {  
    color: rgba(92, 92, 92, 1.0);
    font-style: italic;
    }

::-moz-placeholder {  /* Firefox 19+ */
    color: rgba(92, 92, 92, 1.0);
    font-style: italic;  
    }

::-webkit-input-placeholder {
    color: rgba(92, 92, 92, 1.0);
    font-style: italic;
    }


/* radio input elements */
#menu_close_toggle, 
#menu1_open_toggle, 
#menu2_open_toggle,
#menu3_open_toggle, 
#menu4_open_toggle,
#menu5_open_toggle,
#menu6_open_toggle 
    {
    position: absolute;
    z-index: -100;
    height: 0%;
    width: 0%;
    }

#main_window_close_submenu_label { /* label for closing menus when user clicks anywhere else on page */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    padding: 0;
    background-color: transparent;
    z-index: 40;
    
    }  
    
#social_media {
    position: absolute; /* rel to main_container */
    left: 6%;
    top: 1.8em;
    width: 5em;
    height: 2em;
    z-index: 50;
    }
    
#social_media  span {
    display: inline-block;
    width: 50%;
    height: 100%;
    }
    
#social_media  span:nth-of-type(1) {
    text-align: left;
    }
    
#social_media  span:nth-of-type(2) {
    text-align: right;
    }
    
.sm_icon {
    border: none;
    max-height: 75%;
    max-width: 1.5em;
    }
    

#toggle_main_menu { /* checkbox input element */
    position: absolute;
    height: 0%;
    width: 0%;
    z-index: -90;
    }


    
#label_main_menu_toggle { /* menu trigram for mobile browsers */
    position: absolute;
    right: 0.5em;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 0.5em;
    padding-bottom: 0.5em;
    z-index: -45; /* relative to main_container - hide in screens > 768 px wide */
    }

#main_menu {
    height: 3em;
    width: 95%;
    margin-left: auto;
    margin-top: 5em;
    margin-right: auto;
    margin-bottom: 3em;
    /*border: solid red 1px;*/
    text-align: right;
    position: relative; /* inside main_container, inherits z-index 0 */
    clear: both;
    
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    /*
    background:  -webkit-linear-gradient(#c0ecef,#32c0cb); /* For Safari 
    background: -o-linear-gradient(#c0ecef,#32c0cb); /* For Opera 
    background: -moz-linear-gradient(#c0ecef,#32c0cb); /* For Firefox  
    background: linear-gradient(#c0ecef,#32c0cb); /* Standard */
    
    /* ver 2 gradient with a little more green -- looks better on 
       led backlit monitor at home -- Nov 23/16
    */
    background:  -webkit-linear-gradient(#c0efef,#32cCcb); 
    background: -o-linear-gradient(#c0efef,#32cCcb);  
    background: -moz-linear-gradient(#c0efef,#32cCcb); 
    background: linear-gradient(#c0efef,#32cCcb); 
    
    
    
    
    }


.main_menu_item {
    display: inline-block;
    width: auto; 
    height: 100%;
    padding: 0;
    /*border: solid blue 1px;*/
    
    font-weight: bolder;
    font-family: sans-serif;
    position: relative;
    z-index: 50;
    color: darkblue;
    vertical-align: top;
    }
    
.main_menu_item > a {
    display: inline-block;
    width: auto;
    height: 100%;
    padding-top: 1em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    text-decoration: none;
    color: darkblue;
    }
    
    
.open_header {
    display: inline-block;
    height: 100%;
    width: auto;
    padding-top: 1em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    position: relative;
    /* rounded top corners not visible unless :hovered */
    border-top-left-radius: 0.2em;
    border-top-right-radius: 0.2em;
    
    /*border: solid black 1px;*/
    /*background-color: rgba(200, 64, 64, 0.8);*/ 
    }

.close_header {
    display: inline-block;
    height: 0;
    width: 0;
    padding: 0;
    color: lightgreen;
    position: relative;
    overflow: hidden; /* hide sub_menu_container until open_header ht/width set to 0 */
    /*border: solid green 1px;*/
    /*background-color: pink;*/
    } 
  
/*  
#main_menu > li > label.open_header:hover { 
    /* match background color of submen div and round top corners for "tab" look 
    background-color: #9a9a9a; 
    color: lightgreen;
    } */
    
#main_menu > li > a:hover {
    color: white;
    }
    
    
#logo_holder {
    float: left;
    color: black;
    text-shadow: 1px 1px 3px #A55;
    padding: 0; /* override menu_item and customize in <a> below */
    }
    
#logo_holder > a {
    display: inline-block;
    width: auto;
    height: 100%;
    text-decoration: none; 
    color: inherit; 
    font-size: 2em;
    padding-left: 0.7em;
    padding-top: 0.25em;
    padding-right: 0.7em;
    }
    
#main_menu > li#logo_holder:hover {
    background-color: #9a9a9a; 
    border-top-left-radius: 0.2em;
    border-top-right-radius: 0.2em;
    }
    
#main_menu > li#logo_holder:hover > a {
    color: black;
    }

    
#search_container {
    width: calc(2.4*(99.99%/7));
    height: 3em;
    position: absolute; /* relative to container ul#main_menu */
    top: -4em;
    right:  0; /*calc(2*(99.99%/7) + 2em;); */
    border: 0;
    padding: 0;
    }

#main_menu > li#search_container:hover {
    background-color: transparent;
    }
      
#search_container form {
    /*border: solid red 1px;*/
    padding: 0;
    height: 100%;
    width: 100%;
    }
    
#search span {
    /*border: solid brown 1px;*/
    width: 100%;
    height: 100%;
    margin-right: 0;
    display: inline-block;
    padding: 0;
    margin: 0;
    position: relative;
    
    background-color: rgba(255, 192, 203, 0.5);
    border-radius: 0.5em;
    }
  
   
#search_container input#search_input {
    display: inline-block;
    font-size: medium;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    height: 2em;
    width: calc(100% - 3.4em); /* width of search icon at right + .2em */
    border: solid rgba(0, 0, 192, 0.2) 1px;
    }
    
#search_container button#search_button  {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 3.4em;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    display: inline-block;
    }

#search_container button#search_button > img {
    height: 100%;
    width: 100%;
    opacity: 0.5;
    border: 0;
    padding: 0;
    margin: 0;
    }
      


ul#main_menu > li > label.open_header > div.sub_menu_container,
ul#main_menu > li > label.close_header > div.sub_menu_container
    {
    display: block;
    position: absolute; /* relative to container label.open/close_header  */
    top: 2.9em;
    left: 0;
    text-align: left;
    max-height: 0%;
    max-width: 0%;
    background-color: #9a9a9a; /* original color #ffdab9;*/
    overflow: hidden;
    white-space: nowrap;
    
    /* round off sharp visible corners of submenu holder */    
    border-top-right-radius: 0.2em;
    border-bottom-left-radius: 0.2em;
    border-bottom-right-radius: 0.2em;
    }
    
/*   
ul#main_menu > li:nth-of-type(2) > label.open_header:hover > div.sub_menu_container,
ul#main_menu > li:nth-of-type(5) > label.open_header:hover > div.sub_menu_container
    {
    max-height: 1000%;
    min-width: 100%;
    max-width: 50em;
    }
*/

ul#main_menu > li:nth-of-type(2) > label.open_header > span:nth-of-type(1) {
    /* main menu item title */
    display: inline-block;
    width: auto;
    height: 100%;
    /*border: solid red 1px;*/
    } 
    
ul#main_menu > li:nth-of-type(2) > label.open_header > span:nth-of-type(2) {
    /* hide "+" sign for use only in mobile menu */
    display: inline-block;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    text-align: right;
    }
    
ul#main_menu > li:nth-of-type(2) > label.close_header > span:nth-of-type(1) {
    display: inline-block;
    width: auto;
    height: 100%;
    /*border: solid lightgreen 1px;*/
    } 
    
ul#main_menu > li:nth-of-type(2) > label.close_header > span:nth-of-type(2) {
    display: inline-block;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    text-align: right;
    }
    
ul#main_menu > li:nth-of-type(5) > label.open_header > span:nth-of-type(1) {
    display: inline-block;
    width: auto;
    height: 100%;   
    } 
    
ul#main_menu > li:nth-of-type(5) > label.open_header > span:nth-of-type(2) {
    display: inline-block;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    text-align: right;
    }
    
ul#main_menu > li:nth-of-type(5) > label.close_header > span:nth-of-type(1) {
    display: inline-block;
    width: auto;
    height: 100%;
    } 
    
ul#main_menu > li:nth-of-type(5) > label.close_header > span:nth-of-type(2) {
    display: inline-block;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    text-align: right;
    }

/* using only 2, 5 at this time

#menu1_open_toggle:checked ~ ul#main_menu > li:nth-of-type(1) > label.open_header,
#menu3_open_toggle:checked ~ ul#main_menu > li:nth-of-type(3) > label.open_header,
#menu4_open_toggle:checked ~ ul#main_menu > li:nth-of-type(4) > label.open_header,
#menu6_open_toggle:checked ~ ul#main_menu > li:nth-of-type(6) > label.open_header
*/
#menu2_open_toggle:checked ~ ul#main_menu > li:nth-of-type(2) > label.open_header,
#menu5_open_toggle:checked ~ ul#main_menu > li:nth-of-type(5) > label.open_header 
    {
    /* hide open_header so no "hover" area on desktop or mobile, and hide submenu div */
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    
    }
    
#menu2_open_toggle:checked ~ ul#main_menu > li:nth-of-type(2) > label.open_header > div.sub_menu_container,
#menu5_open_toggle:checked ~ ul#main_menu > li:nth-of-type(5) > label.open_header > div.sub_menu_container
    {
    /* close submenu div and use submenu from label.close_header */
    max-height: 0;
    max-width: 0;
    }

/* using only 2, 5 at this time
#menu1_open_toggle:checked ~ ul#main_menu > li:nth-of-type(1) > label.close_header,
#menu3_open_toggle:checked ~ ul#main_menu > li:nth-of-type(3) > label.close_header,
#menu4_open_toggle:checked ~ ul#main_menu > li:nth-of-type(4) > label.close_header,
#menu6_open_toggle:checked ~ ul#main_menu > li:nth-of-type(6) > label.close_header
*/
#menu2_open_toggle:checked ~ ul#main_menu > li:nth-of-type(2) > label.close_header,
#menu5_open_toggle:checked ~ ul#main_menu > li:nth-of-type(5) > label.close_header
    {
    height: 100%;
    width: auto;
    padding-top: 1em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    /* keep gray menu header tab open if touched and color heading lightgreen */
    background-color: #9a9a9a; 
    border-top-left-radius: 0.2em;
    border-top-right-radius: 0.2em;  
    overflow: visible; 
    /*color: orange;
    border: solid green 1px;*/
    }
    
    
#menu2_open_toggle:checked ~ ul#main_menu > li > label.close_header > div.sub_menu_container,
#menu5_open_toggle:checked ~ ul#main_menu > li > label.close_header > div.sub_menu_container
    {
    /* show submenu contained by label.close_header */
    max-height: 1000%;
    min-width: 100%;
    max-width: 50em;
    /*border: solid red 1px;*/
    }
   

#menu2_open_toggle:checked ~ #main_window_close_submenu_label,
#menu5_open_toggle:checked ~ #main_window_close_submenu_label
    {
    width: 100%;
    height: 100%;
    background-color: transparent; /*rgba(255, 10, 10, 0.2);*/
    }
    
#menu1_open_toggle:checked ~ #main_window_close_submenu_label,
#menu3_open_toggle:checked ~ #main_window_close_submenu_label,
#menu4_open_toggle:checked ~ #main_window_close_submenu_label,
#menu6_open_toggle:checked ~ #main_window_close_submenu_label
    {
    width: 0%;
    height: 0%;
    background-color: transparent;
    }
    
    
/* configure submenus */

ul#main_menu > li div > ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: top;
    } 
    

    
ul#main_menu > li div > ul > li {
    text-align: left;
    white-space:pre;
    font-weight: normal;
    border: 0;
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
    } 
    
ul#main_menu > li div > ul > li:hover {
    background-color: #5A5A5A;
    }
    
ul#main_menu > li div > ul > li a {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0.5em;
    font-weight:500;
    font-family:sans-serif;
    color: black;
    font-size: 90%;
    }
    
   
    
ul#main_menu > li div > ul > li a:hover {
    color: white;
    }  
    
/* container for content below menu and header and above footer */
#mid_page_content {
    padding-left: 0.7em;
    padding-right: 0.7em;
    } 
    

#mid_page_content  p {
    line-height: 1.2;
    }
    


    
footer {
    /*border: solid blue 1px;*/
    
    /* NB!!! -- need for to anchor footer at bottom of mobile safari browswers */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    padding-bottom: 0.75em;
    }


/* copyright div abs posn'd with respect to main_container div - will
    always be at bottom of page, even if very little content in
    page
*/
#copyright {
    /* updated to use flexbox - don't have to abs position it */
    width: 100%;
    font-family: san-serif;
    font-size: 70%;
    text-align: center;
    color: dimgray;
    text-align: center;
    }
/* remove space between main menu items and home logo <li> element for tablets (min-width: 769px) and*/
    
@media only screen and  (max-width: 75em) { /* 1200px */

    
#social_media {
    left: 2%;
    width: 6em;
    }
    
.sm_icon {
    border: none;
    max-height: 75%;
    max-width: 1.5em;
    }

#main_menu {
    width: 98%;
    }

.main_menu_item {
    /* width: calc(99.999999%/6); original fixed, now auto */
    }
    
.main_menu_item > a {
    /* widen padding for easier touch on smaller device eg mobile/phablets */
    padding-left: 1.75em;
    padding-right: 1.75em;
    }
    
.open_header {
    padding-left: 1.75em;
    padding-right: 1.75em;
    }
    
/* only using 2,5 at this time
#menu1_open_toggle:checked ~ ul#main_menu > li:nth-of-type(1) > label.close_header,

#menu3_open_toggle:checked ~ ul#main_menu > li:nth-of-type(3) > label.close_header,
#menu4_open_toggle:checked ~ ul#main_menu > li:nth-of-type(4) > label.close_header,
#menu6_open_toggle:checked ~ ul#main_menu > li:nth-of-type(6) > label.close_header
*/
#menu2_open_toggle:checked ~ ul#main_menu > li:nth-of-type(2) > label.close_header,
#menu5_open_toggle:checked ~ ul#main_menu > li:nth-of-type(5) > label.close_header
    {
    padding-left: 1.75em;
    padding-right: 1.75em;
    }
    
#logo_holder {
    float: left;
    color: black;
    text-shadow: 1px 1px 3px #A55;
    padding: 0; /* override menu_item and customize in <a> below */
    }
    
#logo_holder > a {
    font-size: 1.7em;
    padding-left: 0.7em;
    padding-top: 0.45em;
    padding-right: 0.5em;
    }


   
#search_container {
    right: 0;
    width: calc(2.6*(99.999999%/6));
    }
    
#search_container input#search_input {
   
    }
    
/* have support menu open to left so submenu isn't immediately next to
   right edge of browser / tablet device
*/
    
ul#main_menu > li:nth-of-type(5) > label.open_header > div.sub_menu_container,    
#menu5_open_toggle:checked ~ ul#main_menu > li > label.close_header > div.sub_menu_container
    {
    /* show submenu contained by label.close_header */
    top: 2.9em;
    right: 0;
    left: auto;
    /*border: solid red 1px;*/
    }
   
/* larger font, wider spacing for touch screen tablets */
 
ul#main_menu > li div > ul > li a {
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.8em;
    padding-bottom: 0.8em;
    font-size: 100%;
    }
    
} /* end max width 75em media qry */

@media only screen and (max-width: 50em) { /* 800 px*/
    
/* move social icons to bottom of page to allow centering of 
   "Medvert" link at top of page on smaller screen devices
*/

#main_container {
    padding-bottom: 5em;
}

#social_media {
    left: auto;
    top: auto;
    bottom: -2.75em;
    width: 100%;
    height: 2.5em;
    padding-top: 0.5em;
    background-color: transparent;
    }
    
#social_media > span:nth-of-type(1) {
    display: inline-block;
    width: 50%;
    text-align: left;
    vertical-align:top;
    padding-left: 1.5em;
    
    
}

#social_media > span:nth-of-type(2) {
    display: inline-block;
    width: 50%;
    text-align: right;
    vertical-align: top;
    padding-right: 1.5em;
  
}
    
.sm_icon {
    max-height: 100%;
    max-width: 2em;
    }
    
#label_main_menu_toggle {
    z-index: 45;
    padding-top: 1.3em
    } 
    
#toggle_main_menu ~ #label_main_menu_toggle > span:nth-of-type(1) > span {
    /* "Menu [trigram]" span */
    width: auto;
    height: auto;
    overflow: hidden;
    }  
    

#label_main_menu_toggle > span:nth-of-type(2) {
    /* "Menu X" (close) span */
    display: inline-block;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    }   

#toggle_main_menu:checked ~ #label_main_menu_toggle > span:nth-of-type(1) {
    display: inline-block;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    }  
    
#toggle_main_menu:checked ~ #label_main_menu_toggle > span:nth-of-type(2) {
    width: auto;
    height: auto;
    overflow: hidden;
    }      


    
#main_menu {
    margin: 0;
    width: 100%;
    height: 3.5em;
    max-height: 3.5em;
    text-align: left;
    position: absolute;
    top: 0em;
    overflow: hidden;
    border-radius: 0;
    background: #86d6dd;  /* mid blue */
    z-index: 5;

    }
 

#toggle_main_menu:checked ~ #main_menu {
    max-height: 100em;
    height: auto;
    }
    

    
.main_menu_item {
    display: block;
    width: 100%;
    min-height: 3.5em;
    position: relative;
    border-bottom: solid darkgray 1px;
    }

.main_menu_item > a {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: 1.15em;
    padding-bottom: 0.99em;
    padding-left: 1em;
    padding-right: 0;
    }
    
/* remove and colour change on menu headings (link or submenu header) */
    
#main_menu > li > a:hover {
    color: darkblue;
    }

#logo_holder {
    float: none;
    width: 100%;
    text-align: left;
    text-shadow: none;
    }

 
#logo_holder > a {
    width: auto;
    height: 100%;
    font-size: 1.3em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.9em;
    padding-bottom: 0.5em;
    }
    
#main_menu > li#logo_holder:hover {
    background-color: #86d6dd; 
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    }

.open_header { 
    /* posn abs in .menu_item so out of flow -- .close_header will fill menu_item 
       completely when activated but won't be pushed below open_header if latter was 
       left at posn == static -- if open_header left static, even if ht/wd set to 0 it
       still pushes close_header to next line an enlarges menu_item > 3em which now is 
       larger than non-submenu headers which are fixed at 3em
    */
    position: absolute;
    top: 0;
    left: 0;
    text-align: left;
    height: 100%;
    width: 100%;
    overflow: hidden;
    /* set padding to 0 so submenu div can expand to full width of device */
    padding-left: 0;
    padding-top: 1.25em;
    padding-right: 0;
    background: #86d6dd;  /* mid blue */
    /* remove rounded top corners */
    border-radius: 0;
    /*border: solid red 1px;*/
    }
    
/* remove colour change, border radius on any hover 
#main_menu > li.main_menu_item > label.open_header:hover {
    background-color: #86d6dd; 
    color: darkblue;
    } */
    
.close_header { /* intially closed height, width == 0 */
    position: static;
    background: #86d6dd;  /* mid blue */
    color: darkblue;
    padding-left: 0;
    padding-right: 0;  
    /*border: solid green 1px;*/
}


ul#main_menu > li > label.open_header > div.sub_menu_container,
ul#main_menu > li > label.close_header > div.sub_menu_container
    {
    /* change to static -- when submenu made visible by increasing height, 
       will push rest of menu below it so that latter still visible -- if left
       posn abs, will just cover main menu heading below it
    */
    display: block;
    position: static; 
    transition: none;
    background-color: #CCCCCC;
    overflow: hidden;
    white-space: nowrap;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    }
    
/*
ul#main_menu > li:nth-of-type(2) > label.open_header:hover > div.sub_menu_container,
ul#main_menu > li:nth-of-type(5) > label.open_header:hover > div.sub_menu_container
    {
    /* disable open_header:hover from showing submenu in mobile version -- user has to
       touch label ie check menu toggle to show submenu, unlike :hover version on larger
       devices
    *
    max-height: 0;
    min-width: 0;
    max-width: 0;
    }*/

/* only 2, 5 used at this time 
#menu1_open_toggle:checked ~ ul#main_menu > li:nth-of-type(1) > label.close_header,
#menu3_open_toggle:checked ~ ul#main_menu > li:nth-of-type(3) > label.close_header,
#menu4_open_toggle:checked ~ ul#main_menu > li:nth-of-type(4) > label.close_header,
#menu6_open_toggle:checked ~ ul#main_menu > li:nth-of-type(6) > label.close_header
*/
#menu2_open_toggle:checked ~ ul#main_menu > li:nth-of-type(2) > label.close_header,
#menu5_open_toggle:checked ~ ul#main_menu > li:nth-of-type(5) > label.close_header
    {
    text-align: left;
    height: 100%;
    width: 100%;
    /* allow submenu to cover entire width of mobile device */
    padding-left: 0;
    padding-top: 1.25em;
    padding-right: 0; 
    background: #86d6dd;  /* mid blue */
    color: darkblue;
    }
    
/* .open_header will be set to ht/width == 0 if menu[x]_open_toggle:checked as set in
   desktop version above
*/

#search_container {
    position: static;
    display: block;
    width: 100%;
   
    }
    
#search span {
    /*border: solid brown 1px;*/
    width: 100%;
    height: 100%;
    display: inline-block;
    padding: 0;
    margin: 0;
    position: relative;
    text-align:right;
    background-color: rgba(255, 192, 203, 0.9);
    border-radius: 0;
    }
    
#search_container input#search_input {
    display: inline-block;
    font-size: medium;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0.7em;
    left: 1%;
    width: calc(99% - 4.8em);
    height: 2em;
    }
    
#search_container button#search_button  {
    margin: 0;
    height: 100%;
    width: 5.2em;
    padding-left: 0.7em;
    padding-right: 0.5em;
    cursor: pointer;
    background-color: transparent;
    }
    
#search_container button#search_button > img {
    opacity: 0.8;
    }


/* style "Advertisement", "Support" menu headings and "+" and "-" (open, close resp) symbols */
ul#main_menu > li:nth-of-type(2) > label.open_header > span:nth-of-type(1) {
    display: inline-block;
    width: 50%;
    height: 100%;
    vertical-align:top;
    padding-left: 1em;
    } 
    
ul#main_menu > li:nth-of-type(2) > label.open_header > span:nth-of-type(2) {
    display: inline-block;
    width: 50%;
    height: 100%;
    text-align: right;
    padding-right: 1.5em; 
    font-size: larger;
    font-weight: 700;
    }
    
ul#main_menu > li:nth-of-type(2) > label.close_header > span:nth-of-type(1) {
    display: inline-block;
    width: 50%;
    height: 100%;
    vertical-align: top;
    padding-left: 1em;
    } 
    
ul#main_menu > li:nth-of-type(2) > label.close_header > span:nth-of-type(2) {
    display: inline-block;
    width: 50%;
    height: 100%;
    text-align: right;
    padding-right: 1.5em; 
    font-size: larger;
    font-weight: 700;
    } 
    

#menu2_open_toggle:checked ~ ul#main_menu > li:nth-of-type(2) > label.close_header > div.sub_menu_container,
#menu5_open_toggle:checked ~ ul#main_menu > li:nth-of-type(5) > label.close_header > div.sub_menu_container
    {
    /* show submenu when open_header toggled to closed ie ht/width == 0 setting */
    max-height: 1000%;
    min-width: 0;
    width: 100%;
    /* have to push top of submenu down a bit to have its top align with bottom 
       of close_header / li containers
    */
    margin-top: 1em;
    /*border: solid red 1px;*/
    }
 
/*   #menu2/5_open_toggle:checked open_header ht /width set to 0 as specified 
     in desktop css above 
*/


    
ul#main_menu > li:nth-of-type(5) > label.open_header > span:nth-of-type(1) {
    display: inline-block;
    width: 50%;
    height: 100%;
    vertical-align: top;
    padding-left: 1em;
    } 
    
ul#main_menu > li:nth-of-type(5) > label.open_header > span:nth-of-type(2) {
    display: inline-block;
    width: 50%;
    height: 100%;
    text-align: right;
    padding-right: 1.5em;
    font-size: larger;
    font-weight: 700;
    }
    
ul#main_menu > li:nth-of-type(5) > label.close_header > span:nth-of-type(1) {
    display: inline-block;
    width: 50%;
    height: 100%;
    vertical-align: top;
    padding-left: 1em;
    } 
    
ul#main_menu > li:nth-of-type(5) > label.close_header > span:nth-of-type(2) {
    display: inline-block;
    width: 50%;
    height: 100%;
    text-align: right;
    padding-right: 1.5em;
    font-size: larger;
    font-weight: 700;
    }
   
   
#menu2_open_toggle:checked ~ #main_window_close_submenu_label,
#menu5_open_toggle:checked ~ #main_window_close_submenu_label
    {
    height: 0;
    width: 0;
    padding: 0;
    background-color: transparent;
    }
    
    
ul#main_menu > li div > ul {
    display: block;
    width: 100%;
    height: auto;
    }    
    
ul#main_menu > li div > ul > li {
    text-align: left;
    width: 100%;
    height: 3.5em;
    padding: 0;
    white-space:pre;
    font-weight: normal;
    border: 0;
    border-bottom: solid gray 1px;
    background-color: #CCCCCC;
    } 
    
ul#main_menu > li:nth-of-type(2) div > ul:nth-of-type(1) > li:nth-of-type(1), 
ul#main_menu > li:nth-of-type(5) div > ul:nth-of-type(1) > li:nth-of-type(1) 
    {
    border-top: solid gray 1px;
    }
    
    
ul#main_menu > li div > ul > li:hover {
    background-color: #CCCCCC;
    }
    
ul#main_menu > li div > ul > li a {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding-left: 2em;
    padding-top: 1.15em;
    font-weight: normal;
    font-family:sans-serif;
    color: black;
    font-size: 100%;
    } 
    
ul#main_menu > li div > ul > li a:hover {
    color: black;
    }    
  
footer {
    background-color: #AAAAAA;
    padding-top: 2em;
    } 

#copyright {
    color: #333333;
}
    
} /* end of media queries max-width 800 px / 50 em for main menu */


/* global custom css styling */

input[type="text"],
input[type="password"] {
    font-size: 100%;
    font-family: san-serif, Arial, Verdana;
    }
    
    
.align_right {
    text-align: right;
    }
    
.align_center {
    text-align: center;
    }
    
.align_left {
    text-align: left;
    }
    
    
.posn_relative {
    position: relative;
    }
    
    
.pure-button {
    /* appearance: none to override default system style for iphones */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(66, 184, 221, 0.8);
    border-radius: 4px;
    font-weight: bolder;
    font-size: 110%; 
    color: black;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    }


/* container for purecss styled divs that hold one or more of login_name, password 
   or ad_id input elements
*/
#login_container {
    margin-bottom: 2em;
    }
    
    
        
/* container for login, password and ad_id text entry input elements */
.submit_container {
    margin-top: 2em;
    width: 100%;
    
    }
 

/*  end global custom styles */

/* medvert custom error msg styling */

#error_msg_page_top {
    color: red;
    font-size: larger;
    font-weight: bolder;
    text-align: center;
    width:auto;
    padding: 0;
    margin-top: 1.5em;
    margin-bottom: -1em;
    }
    
.error_color {
    color: red;
    }
    
div[id^="error_div_"] {
    color: red;
    margin-top: 0.5em;
    margin-bottom: 0.4em;
    line-height: 1.1;
    }
    
    
/*
#error_div_login_name {
    color: red;
    font-weight: bold;
    }
    
#error_div_password {
    color: red;
    font-weight: bold;
    }
    
#error_div_ad_id {
    color: red;
    font-weight: bold;
    }
    
#error_div_passphrase{
    color: red;
    font-weight: bold;
    }
*/
    
/* next 3 used for error colors if none of 
   contact info street address, phone, email entered
   by user in contact info section of [new|renew|mod]ad forms
*/
.error_color_street_address {
    color:  #00868B;
    }

.error_color_phone {
    color: #0033FF;
    }

.error_color_email {
    color: #CD00CD;
    }
  
/* need .pure-form input prefix to override default .pure-form input[type="text"] 
   in purecss_mdv.css file
*/  
.pure-form input.error_color_phone_inputs {
    border-color: red;
    }

.error_color_ad_len_caution {
    color: #fd8202;
    }   
    
/* billing info, standard ad box display css */

#ad_display_billing_info_preview {
    margin-top: 1em;
    margin-bottom: 2em; 
    }
    
#ad_display_billing_info_preview_left_col > div, 
#ad_display_billing_info_preview_right_col > div {
    padding: 0.2em 0;
    }
    
#ad_display_sa_b { /* street address b */
    margin-top:0.5em;
    margin-bottom: 0em;
    
    } 
    
#ad_display_sa_b > div {
    margin-top: 0.3em;  
    word-wrap: break-word;
    }
    
#billing_info_frame, #ad_frame {
    display: block;
    
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: hidden;
    }
 
/* reset just top padding of billing iframe */   
#billing_info_frame {
    margin-top: 0.5em;
    }
    
/* class based billing css */

.ad_display_billing_info_preview {
    margin-top: 1em;
    margin-bottom: 2em; 
    }
    
.ad_display_billing_info_preview_left_col > div, 
.ad_display_billing_info_preview_right_col > div {
    padding: 0.2em 0;
    }
    
.ad_display_sa_b { /* street address b */
    margin-top:0.5em;
    margin-bottom: 0em;
    
    } 
    
.ad_display_sa_b > div {
    margin-top: 0.3em;  
    word-wrap: break-word;
    }
    
.billing_info_frame, .ad_frame {
    display: block;
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: hidden;
    }
 
/* reset just top padding of billing iframe */   
.billing_info_frame {
    margin-top: 0.5em;
    }
    
/* end class based billing css */
    
#ad_display_ad_review {
    margin-top: 1em;
    margin-bottom: 2em;
    padding: 0.2em 0.2em;
    border: solid rgba(0, 127, 255, 0.6);
    border-style: ridge;
    border-radius: 4px;
    height: auto;
    }
    
#ad_display_locum_dates_preview { /* pure-u div row holding "Locum dates" label */
   
   
    }    
    
#display_ad_ad_type {
    text-decoration: underline;
    }
    
#ad_display_locum_dates_preview > div {
    padding-top: 0.4em;
    padding-left: 0.2em;
    }
    
.ad_display_text_em1 { /* highlight any particular position if entered */
    font-weight: bolder;
    color: #3399FF;
    }
    
.ad_display_h4_ad { /* adjust headings inside ad preview, but outside of purecss divs  */
    padding-left: 0.25em;
    }
    
#ad_display_ad_review  div.pure-g > div[class^="pure-u-"]  {
    padding: 0.5em 0.2em 0.2em;
    }
  

#ad_display_ad_text_preview { /* holds word processor / non-js main ad_text only -- is a non-pure-css div*/
    /*border: solid red 1px;*/
    padding-bottom: 1em;
    width: 100%;
    padding: 0.2em;
   
    }
    
#ad_display_ad_text_preview ul {
    list-style-type: disc;
    list-style-position: outside;
    /*border: solid turquoise 1px;*/
    }
   
#ad_display_ad_text_preview ul li {
    display: list-item;
    /*border: solid green 1px;*/
    margin-left: 2em;
    padding: 0.3em 0;
    }
    
#ad_display_ad_text_preview ol {
    list-style-type: decimal;
   
    }
    
#ad_display_contact_info_preview {
        
}
    
    
#ad_display_contact_info_preview > div[class^="pure-u-"] > div {
     padding: 0.2em 0;
     }
    
    
/* separate pure-g div that holds optional email/website addresses outside of iframe (so that popup
   window / email clients can be invoked by user) but still inside ad_display_ad_preview visible outer
   border
*/ 
#ad_display_email_website { 
    margin-top: 0;
    margin-bottom: 0.5em;
    word-wrap: break-word;
    }


/* end standard billing info, ad box display default css */  

/* class based ad_display css */

.ad_display_ad_review {
    margin-top: 1em;
    margin-bottom: 2em;
    padding: 0.2em 0.2em;
    border: solid rgba(0, 127, 255, 0.6);
    border-style: ridge ;
    border-radius: 4px;
    height: auto;
    }
    
.ad_display_locum_dates_preview { /* pure-u div row holding "Locum dates" label */
   
   
    }    
    
.display_ad_ad_type {
    text-decoration: underline;
    }
    
.ad_display_locum_dates_preview > div {
    padding-top: 0.4em;
    padding-left: 0.2em;
    }
    
.ad_display_text_em1 { /* highlight any particular position if entered */
    font-weight: bolder;
    color: #3399FF;
    }
    
.ad_display_h4_ad { /* adjust headings inside ad preview, but outside of purecss divs  */
    padding-left: 0.25em;
    }
    
.ad_display_ad_review  div.pure-g > div[class^="pure-u-"]  {
    padding: 0.5em 0.2em 0.2em;
    
    }
  

.ad_display_ad_text_preview { /* holds word processor / non-js main ad_text only -- is a non-pure-css div*/
    /*border: solid red 1px;*/
    padding-bottom: 1em;
    width: 100%;
    padding: 0.2em;
   
    }
    
.ad_display_ad_text_preview ul {
    list-style-type: disc;
    list-style-position: outside;
    /*border: solid turquoise 1px;*/
    }
   
.ad_display_ad_text_preview ul li {
    display: list-item;
    /*border: solid green 1px;*/
    margin-left: 2em;
    padding: 0.3em 0;
    }
    
.ad_display_ad_text_preview ol {
    list-style-type: decimal;
   
    }
    
.ad_display_contact_info_preview {
        
}
    
    
.ad_display_contact_info_preview > div[class^="pure-u-"] > div {
     padding: 0.2em 0;
     }
    
    
/* separate pure-g div that holds optional email/website addresses outside of iframe (so that popup
   window / email clients can be invoked by user) but still inside ad_display_ad_preview visible outer
   border
*/ 
.ad_display_email_website { 
    margin-top: 0;
    margin-bottom: 0.5em;
    word-wrap: break-word;
    }
    
/* format locum dates list in readad.php which is inside iframe */

#locum_dates_list_readad {
    padding-top: 0;
    margin-left: 1.5em;
    margin-right: 1em;
    width: auto;
    list-style-position: outside;
    list-style-type: disc;
    }
    
#locum_dates_list_readad > li {
    padding: 0.5em 0 0;
    }
    
    
    

/* end class based ad_display css */

/* css for display box showing advertisement dates eg "submitted", "paid" etc -- used in various
   sections eg. list ads, renew/mod ad
*/

/* pure-g div with single pure-u div containing "Date Advertisement" heading */
.dates_intro {
    margin-top: 2em;
    text-align: center;
    border-top: 1px solid #3388CC;
    border-right: 1px solid #3388CC;
    border-left: 1px solid #3388CC;
    border-bottom: 1px solid #3388CC;
    margin-bottom: 0;
    font-weight: bolder;
    }
    
.dates_intro > div {
    padding: 0.3em 0 0.3em;
    }
 
    
/* next pure-g div containing 4 responsive pure-u columns, each of which contains a 
   pure-g row with 2 pure-u divs inside holding  "submitted" etc headings and dates or ------ 
   respectively
*/
.dates { /* outer pure-g div */
   /* border-top: 1px solid red;
    border-right: 1px solid red;
    border-left: 1px solid red;
    border-bottom: 1px solid red;*/
    margin-top: 0;
    }
    
/* override default pure-u padding */

.dates > div[class^="pure-u-"] {
    padding: 0;
    }
    
.dates > div[class^="pure-u-"] > div[class="pure-g"] {
    /*border: solid green 1px;*/
    }
    
.dates > div[class^="pure-u-"] > div[class="pure-g"] > div[class^="pure-u-"] {
    border-left: 1px solid #3388CC;
    border-bottom: 1px solid #3388CC;
    text-align: center;
    padding: 0.2em 0;
    }
    
.dates > div[class^="pure-u-"]:last-child > div[class="pure-g"] > div[class^="pure-u-"]  {
    border-right: 1px solid #3388CC;
    }


input[name="payment_type"] {
    /*display: none;*/
    border: solid green 1px;
    background-color: pink;
    }
    
/* end global Date Advertisement box styling */

/* responsive css for Date Advertisment box */

@media screen and (max-width: 38em) { 

.dates > div[class^="pure-u-"]:nth-child(2) > div[class="pure-g"] > div[class^="pure-u-"]  {
    border-right: 1px solid #3388CC;
    }
    
.dates > div[class^="pure-u-"] > div[class="pure-g"] > div[class^="pure-u-"]:first-child {
    border-bottom: 0;
    
    }

.dates > div[class^="pure-u-"] > div[class="pure-g"] > div[class^="pure-u-"]:first-child,
.dates > div[class^="pure-u-"] > div[class="pure-g"] > div[class^="pure-u-"]:first-child  {
    padding-top: 0.5em;
    }
    
.dates > div[class^="pure-u-"] > div[class="pure-g"] > div[class^="pure-u-"]:last-child,
.dates > div[class^="pure-u-"] > div[class="pure-g"] > div[class^="pure-u-"]:last-child  {
    padding-bottom: 0.5em;
    }
    


} /* end 38em/608 px css media query */


/* end responsive css for Date Advertisment box */
    
    
    
@media only screen and (max-width: 50em) { /* 800 px*/

#error_msg_page_top {
    text-align: left;
    padding-left: 0;
    }

#error_div_login_name, #error_div_password, #error_div_ad_id,
#error_div_passphrase {
    margin-bottom: 0;
    
    }
    
} /* end max-width 50em/800px media qry block */


@media screen and (max-width: 38em) { /* 608 px */

/* billing info, ad box display css */

#ad_display_billing_info_preview_left_col,
#ad_display_billing_info_preview_right_col {
    word-wrap: break-word;
    }
    
#ad_display_ad_info div.pure-g div[class^="pure-u-"] {
    word-wrap: break-word;
    }
    
#ad_display_ad_review {
    border: solid rgba(0, 127, 255, 1) 1px;
    }
    
#ad_display_contact_info_preview_left_col,
#ad_display_contact_info_preview_right_col {
    word-wrap: break-word;
    }
    
/* end billing info, ad box display css */

/* class based variant */

.ad_display_billing_info_preview_left_col,
.ad_display_billing_info_preview_right_col {
    word-wrap: break-word;
    }
    
.ad_display_ad_info div.pure-g div[class^="pure-u-"] {
    word-wrap: break-word;
    }
    
.ad_display_ad_review {
    border: solid rgba(0, 127, 255, 1) 1px;
    }
    
.ad_display_contact_info_preview_left_col,
.ad_display_contact_info_preview_right_col {
    word-wrap: break-word;
    }

#mid_page_content {
    font-size: large;
    }    

    
}



@media only screen and (max-width: 25em) { /* 400 px*/








}