/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   
   this is the new prodn devel version - as of Apr 7/2022
   
   Nov 27/23 - this version DOES contain the css corrections to remove the "sticking" hover problem on
               touch screens - :hover selectors moved to separate media qry that will activate :hover only if
               screen primary input supports both :hover AND pointer: fine parameters
               
               remaining css using radio/checkbox buttons left outside above qry so that they will work on both
               larger devices that support both hover and fine pointer ie mouse pointer and may also have a touch
               screen, as well as small touchscreen devices such as ipads and cell phones whose primary input devices
               do not support hover / fine pointer input
   
   copyright Medvert 2022
   
   this is the new css for the multi-ad subscription version of Medvert
*/

html, body, div, span, object, iframe,
p, blockquote, pre,
a, abbr,  address,  cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small,  strong, sub, sup,  var,
b, u, i, 
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas,  figcaption, figure, 
footer, header,  nav, section, 
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, figcaption, figure, 
footer, header,  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%;
    position: relative;
    display: flex;
    
    flex-direction: column;
    /*border: solid black 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; /* for auto centering */
    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;
    /*border: solid red 1px;*/
    }
    
/*   
#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;
    }

/* place all selectors with :hover pseudo here to prevent tap on touchscreen causing a "sticking" hover e.g.
   a drop down menu won't close even after tap finished
*/
@media (hover: hover) and (pointer: fine) {

ul#main_menu > li#search_container:hover {
    background-color: transparent;
    }
    
ul#main_menu > li.main_menu_item > a:hover {
    color: white;
    }

ul#main_menu > li#logo_holder:hover {
background-color: #9a9a9a; 
border-top-left-radius: 0.2em;
border-top-right-radius: 0.2em;
    }
    
ul#main_menu > li#logo_holder:hover > a {
    color: black;
    }
    
ul#main_menu > li:hover > label.open_main_header {
    /* match background color of submen div and round top corners for "tab" look */
    background-color:#9a9a9a;
    color: lightgreen;
    } 
    
ul#main_menu > li:hover > label.open_main_header ~ div.sub_menu_container {
    height: auto;
    overflow: visible;
    }   

ul#main_menu > li:nth-of-type(2):hover > label.open_main_header > span:nth-of-type(1){
    color: lightgreen;
    }
    
ul#main_menu > li:nth-of-type(5):hover > label.open_main_header > span:nth-of-type(1){
    color: lightgreen;
    }
 
ul#main_menu > li div.sub_menu_container > ul > li:hover {
    background-color: #5A5A5A;
    }
    
ul#main_menu > li  div.sub_menu_container > ul > li > a:hover {
    color: white;
    }
    
ul#main_menu > li > div.sub_menu_container > ul > li:hover > div.sub_sub_menu_container {    
    width: auto;
    height: auto;
    /*border: solid red 1px;*/
    }
    
/* main menu toggle not checked -- don't need to show + sign, since hover will open sub_sub_menu div */
ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header:hover > label.open_sub_header > span:nth-of-type(2) {
    /* use visibility rather than display: none - prevent submenu div width from shifting when cursor hovering 
       over single_ad_header and we want the + sign to disappear during hover - this way + sign disappears but
       width remains as when main submenu initially opened with a hover over open_main_header label element
    */
    visibility: hidden;
    }
  
/* menu toggle check to hold sub_menu div open, want to have + sign open -- user will see + sign prompt either with hover,
   or if they want to go straight to touch open sub_sub_menu after touching open sub_menu
*/      
#menu2_open_toggle:checked ~ ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header:hover > label.open_sub_header > 
    span:nth-of-type(2) {
    display: inline;
    }
    
/* main menu toggle not checked -- don't need to show + sign, since hover will open sub_sub_menu div */
ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header:hover > label.open_sub_header > span:nth-of-type(2) {
    /* use visibility rather than display: none - prevent submenu div width from shifting when cursor hovering 
       over single_ad_header and we want the + sign to disappear during hover - this way + sign disappears but
       width remains as when main submenu initially opened with a hover over open_main_header label element
    */
    visibility: hidden;
    }
  
/* menu toggle check to hold sub_menu div open, want to have + sign open -- user will see + sign prompt either with hover,
   or if they want to go straight to touch open sub_sub_menu after touching open sub_menu
*/      
#menu2_open_toggle:checked ~ ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header:hover > label.open_sub_header > 
    span:nth-of-type(2) {
    display: inline;
    }

div.sub_sub_menu_container > ul > li:hover {
    background-color: #5A5A5A;
    }
    
div.sub_sub_menu_container > ul > li > a:hover {
    color: white;
    }    
        
    

} /* end @media hover and pointer tests */

  
    
#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;
    }
    
#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;
    }
/* -- moved to dedicated media query hover -- above this block -- 
ul#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;
    }
    
/* radio input elements */
#menu_close_toggle, 
#menu1_open_toggle, 
#menu2_open_toggle,
#menu3_open_toggle, 
#menu4_open_toggle,
#menu5_open_toggle,
#menu6_open_toggle,
#submenu1_toggle,
#submenu2_toggle
    {
    position: absolute;
    z-index: -100;
    height: 0%;
    width: 0%;
    padding: 0;
    margin: 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;
    
    }
    

#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 */
    }

ul#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); 
    }


li.main_menu_item {
    position: relative;
    z-index: 50;
    display: inline-block;
    width: auto; 
    height: 100%;
    padding: 0;
    /*border: solid blue 1px;*/
    
    font-weight: bolder;
    font-family: sans-serif;
    color: darkblue;
    vertical-align: top;
    }
 
 
/* this type doesn't have drop down submenu markup eg. open/close header, submenu_container elements etc. */   
li.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;
    }
 
 
/*-- moved to dedicated media query hover -- above this block --    

ul#main_menu > li.main_menu_item > 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;
    }

/*-- moved to dedicated media query hover -- above these blocks --    
    
ul#main_menu > li#logo_holder:hover {
    background-color: #9a9a9a; 
    border-top-left-radius: 0.2em;
    border-top-right-radius: 0.2em;
    }

    
ul#main_menu > li#logo_holder:hover > a {
    color: black;
    }
*/    
    
label.open_main_header {
    display: inline-block;
    height: 100%;
    width: 100%;
    text-align: center;
    padding-top: 1em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    margin: 0;
    /* rounded top corners not visible unless :hovered */
    /*border: solid black 1px;*/
    background-color: transparent;
    border-top-left-radius: 0.2em;
    border-top-right-radius: 0.2em;
    }
   
/*-- moved to dedicated media query hover -- above this block --   
   
ul#main_menu > li:hover > label.open_main_header {
    /* match background color of submen div and round top corners for "tab" look -- 
    background-color:#9a9a9a;
    color: lightgreen;
    }
*/

    
label.close_main_header {
    display: none;
    height: 100%;
    width: 100%;
    text-align: center;
    padding-top: 1em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    margin: 0;
    /* rounded top corners not visible unless :hovered */
    /*border: solid red 1px;*/
    background-color: #9a9a9a;
    border-top-left-radius: 0.2em;
    border-top-right-radius: 0.2em;
    } 
    
    
    
div.sub_menu_container {
    display: block;
    position: absolute; /* relative to container label.open/close_main_header  */
    top: 3.3em;
    left: 0;
    text-align: left;
    min-width: 100%;
    height: 0;
    overflow: hidden;
    background-color: #9a9a9a; /* original color #ffdab9;*/
    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;
    font-size: 90%;
    
    }

/*-- moved to dedicated media query hover -- above this block --   
   
ul#main_menu > li:hover > label.open_main_header ~ div.sub_menu_container {
    height: auto;
    overflow: visible;
    }
*/
    
ul#main_menu > li:nth-of-type(2) > label.open_main_header > span:nth-of-type(1) {
    /* main menu item title */
    display: inline-block;
    width: auto;
    height: 100%;
    }
    
/*-- moved to dedicated media query hover -- above this block --   
    
ul#main_menu > li:nth-of-type(2):hover > label.open_main_header > span:nth-of-type(1){
    color: lightgreen;
    }
*/
    
ul#main_menu > li:nth-of-type(2) > label.open_main_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_main_header > span:nth-of-type(1) {
    /* main menu item title */
    display: inline-block;
    width: auto;
    height: 100%;
    /*border: solid lightgreen 1px;*/
    } 
    
ul#main_menu > li:nth-of-type(2) > label.close_main_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(5) > label.open_main_header > span:nth-of-type(1) {
    /* main menu item title */
    display: inline-block;
    width: auto;
    height: 100%;   
    } 
    
/*-- moved to dedicated media query hover -- above this block --     
    
ul#main_menu > li:nth-of-type(5):hover > label.open_main_header > span:nth-of-type(1){
    color: lightgreen;
    }
*/
    
ul#main_menu > li:nth-of-type(5) > label.open_main_header > span:nth-of-type(2) {
    /* "+" sign to open in mobile menu */
    display: inline-block;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    text-align: right;
    }
    
ul#main_menu > li:nth-of-type(5) > label.close_main_header > span:nth-of-type(1) {
    display: inline-block;
    width: auto;
    height: 100%;
    } 
    
ul#main_menu > li:nth-of-type(5) > label.close_main_header > span:nth-of-type(2) {
    /* "-" sign to open in mobile menu */
    display: inline-block;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    text-align: right;
    }
    
/*
ul#main_menu > li >  div.sub_menu_container
    {
    display: block;
    position: absolute;  relative to container label.open/close_main_header  
    top: 3.25em;
    left: 0;
    text-align: left;
    min-width: 100%;
    height: 0;
    overflow: hidden;
    background-color: #9a9a9a;  original color #ffdab9;
    white-space: nowrap;
            
     round off sharp visible corners of submenu holder   
    border-bottom-left-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
    font-size: 90%;
    }
*/
    
/* open ie drop down main sub menu    
ul#main_menu > li:hover > div.sub_menu_container {
    height: auto;
    overflow:visible;  to show otherwise hidden sub_sub_menu div at right side of sub_menu_container 
    }
*/
    


/* using only 2, 5 at this time

#menu1_open_toggle:checked ~ ul#main_menu > li:nth-of-type(1) > label.open_main_header,
#menu3_open_toggle:checked ~ ul#main_menu > li:nth-of-type(3) > label.open_main_header,
#menu4_open_toggle:checked ~ ul#main_menu > li:nth-of-type(4) > label.open_main_header,
#menu6_open_toggle:checked ~ ul#main_menu > li:nth-of-type(6) > label.open_main_header
*/

/* when toggle checked, want to hide open_main_header, and show the close_main_header now 
   ready to be closed when toggle unchecked
*/
#menu2_open_toggle:checked ~ ul#main_menu > li:nth-of-type(2) > label.open_main_header,
#menu5_open_toggle:checked ~ ul#main_menu > li:nth-of-type(5) > label.open_main_header 
    {
    /* use display:none, not setting ht/width to 0 -- doesn't work with latter */
    display: none;
    }

/* using only 2, 5 at this time
#menu1_open_toggle:checked ~ ul#main_menu > li:nth-of-type(1) > label.close_main_header,
#menu3_open_toggle:checked ~ ul#main_menu > li:nth-of-type(3) > label.close_main_header,
#menu4_open_toggle:checked ~ ul#main_menu > li:nth-of-type(4) > label.close_main_header,
#menu6_open_toggle:checked ~ ul#main_menu > li:nth-of-type(6) > label.close_main_header
*/
#menu2_open_toggle:checked ~ ul#main_menu > li:nth-of-type(2) > label.close_main_header,
#menu5_open_toggle:checked ~ ul#main_menu > li:nth-of-type(5) > label.close_main_header
    {
    display: inline-block;
    
    }
    
#menu2_open_toggle:checked ~ ul#main_menu > li:nth-of-type(2) > label.close_main_header > span:nth-of-type(1),
#menu5_open_toggle:checked ~ ul#main_menu > li:nth-of-type(5) > label.close_main_header > span:nth-of-type(1)
    {
    /* "Advertisements", "Support" text inside labels */
    color: lightgreen;
    }
    
    
    
#menu2_open_toggle:checked ~ ul#main_menu > li:nth-of-type(2) > label.close_main_header ~ div.sub_menu_container,
#menu5_open_toggle:checked ~ ul#main_menu > li:nth-of-type(5) > label.close_main_header ~ div.sub_menu_container 
    {
    display: block;
    height: auto;
    overflow:visible; /* to show otherwise hidden sub_sub_menu div at right side of sub_menu_container */
    }
   

#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,
#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.sub_menu_container > ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: block;
    vertical-align: top;
    /* keep width of submenu to that of div.submenu_container */
    width: 100%;
    } 
    

    
ul#main_menu > li div.sub_menu_container > ul > li {
    display: block;
    text-align: left;
    white-space:pre;
    font-weight: normal;
    border: 0;
    padding: 0;
    margin: 0;
    width: auto; 
    height: auto;
    position: relative;
    } 
    
/*-- moved to dedicated media query hover -- above this block --   
    
ul#main_menu > li div.sub_menu_container > ul > li:hover {
    background-color: #5A5A5A;
    }
*/   
    
ul#main_menu > li div.sub_menu_container > ul > li > a
    {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0.75em 0.5em;
    font-weight:500;
    font-family:sans-serif;
    color: black; /* has to be here to override darkblue from main menu li */
    }
 
/*-- moved to dedicated media query hover -- above this block --  
    
ul#main_menu > li  div.sub_menu_container > ul > li > a:hover {
    color: white;
    } 
*/    
    
/* added for medvert2 */
ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header,
ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header  {
    /* nothing needed for now */  
    
    padding: 0.75em 0.5em;
    }
    
    
/* added for new menu of medvert2 -- sub_menu title of sub_sub_menu of Single/Multi Ad Subscr options -- 
   don't need close_sub_header since sub_sub_menu uses checkboxes, not radio buttons
*/
ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header > label.open_sub_header,
ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header > label.open_sub_header  {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    font-weight:500;
    font-family:sans-serif;
    
    }
    
 
    
/* span containing "single ad" or "multi ad" text */
ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header > label.open_sub_header > span:nth-of-type(1) {
    color: lightgreen;
    }
    
/* span containing + sign -- have to change span to none flex to allow proper use of display:none
   inside the flex box -- can't use abs postioning -- wraps plus sign around to next line in submenu
*/
ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header > label.open_sub_header > span:nth-of-type(2) {
    /* + (ie open sub_sub_div) sign */
    color: lightgreen;
    padding-left: 1em;
    padding-right: 0.5em;
    }
    
/* span (3) contains closing minus - sign */
ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header > label.open_sub_header > span:nth-of-type(3) {
    /* - (ie close sub_sub_div) sign */
    color: lightgreen;
    display: none;
    flex: none;
    padding-left: 1em;
    padding-right: 0.5em;
    }
    
    
ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header > label.open_sub_header > span:nth-of-type(1) {
    color: lightgreen;
    }
    
  
ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header > label.open_sub_header > span:nth-of-type(2) {
    color: lightgreen;
    padding-left: 1em;
    padding-right: 0.5em;
    }
    

    
ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header > label.open_sub_header > span:nth-of-type(3) {
    /* - (ie close sub_sub_div) sign */
    color: lightgreen;
    display: none;
    flex: none;
    padding-left: 1em;
    padding-right: 0.5em;
    }
    
/* sub_sub menu ie for each of single, multi ad subcategories */
    
div.sub_sub_menu_container {
    position: absolute;
    display: block;
    top: 0;
    left: 100%;
    width: 0;
    height: auto;
    background-color: salmon;  
    margin: 0;
    padding: 0; 
    overflow: hidden; 
    }
    
/*-- moved to dedicated media query hover -- above this block --  
    
ul#main_menu > li > div.sub_menu_container > ul > li:hover > div.sub_sub_menu_container {    
        width: auto;
        height: auto;
        /*border: solid red 1px;
        }
*/
    
#menu2_open_toggle:checked ~ #submenu1_toggle:checked ~ ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header > 
    label.open_sub_header ~ div.sub_sub_menu_container {    
        width: auto;
        background-color: yellow;
        } 
        
/*-- moved to dedicated media query hover -- above these blocks --         
        
 -- main menu toggle not checked -- don't need to show + sign, since hover will open sub_sub_menu div -- 
ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header:hover > label.open_sub_header > span:nth-of-type(2) {
        -- use visibility rather than display: none - prevent submenu div width from shifting when cursor hovering 
           over single_ad_header and we want the + sign to disappear during hover - this way + sign disappears but
           width remains as when main submenu initially opened with a hover over open_main_header label element
        --
        visibility: hidden;
        }
  
-- menu toggle check to hold sub_menu div open, want to have + sign open -- user will see + sign prompt either with hover,
   or if they want to go straight to touch open sub_sub_menu after touching open sub_menu
--     
#menu2_open_toggle:checked ~ ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header:hover > label.open_sub_header > 
    span:nth-of-type(2) {
        display: inline;
        }
        
*/
        
#menu2_open_toggle:checked ~ #submenu1_toggle:checked ~ ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header > 
    label.open_sub_header > span:nth-of-type(2) {
        display: none;
        flex: none;
        }
        
#menu2_open_toggle:checked ~ #submenu1_toggle:checked ~ ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header > 
    label.open_sub_header > span:nth-of-type(3) {
        display: inline;
        }

        
#menu2_open_toggle:checked ~ #submenu2_toggle:checked ~ ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header > 
    label.open_sub_header ~ div.sub_sub_menu_container {    
        width: auto;
        background-color: cyan;
        }


/*-- moved to dedicated media query hover -- above these blocks --      
        
-- main menu toggle not checked -- don't need to show + sign, since hover will open sub_sub_menu div --
ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header:hover > label.open_sub_header > span:nth-of-type(2) {
        -- use visibility rather than display: none - prevent submenu div width from shifting when cursor hovering 
           over single_ad_header and we want the + sign to disappear during hover - this way + sign disappears but
           width remains as when main submenu initially opened with a hover over open_main_header label element
        --
        visibility: hidden;
        }
  
-- menu toggle check to hold sub_menu div open, want to have + sign open -- user will see + sign prompt either with hover,
   or if they want to go straight to touch open sub_sub_menu after touching open sub_menu
--       
#menu2_open_toggle:checked ~ ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header:hover > label.open_sub_header > 
    span:nth-of-type(2) {
        display: inline;
        }
*/ 
        
#menu2_open_toggle:checked ~ #submenu2_toggle:checked ~ ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header > 
    label.open_sub_header > span:nth-of-type(2) {
        display: none;
        flex: none;
        }
        
#menu2_open_toggle:checked ~ #submenu2_toggle:checked ~ ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header > 
    label.open_sub_header > span:nth-of-type(3) {
        display: inline;
        }    
        
div.sub_sub_menu_container > ul > li {
    display: block;
    text-align: left;
    white-space:pre;
    font-weight: normal;
    border: 0;
    padding: 0;
    margin: 0;
    width: auto; 
    height: auto;
    }
    
/*-- moved to dedicated media query hover -- above this block --    

div.sub_sub_menu_container > ul > li:hover {
    background-color: #5A5A5A;
    }
*/
    
div.sub_sub_menu_container > ul > li > a {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0.75em 0.5em;
    font-weight:500;
    font-family:sans-serif;
    color: black;
    }

/*-- moved to dedicated media query hover -- above this block -- 
    
div.sub_sub_menu_container > 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;
    }
    
/* container for submit buttons of various types */
.submit_container {
    margin-top: 2em;
    margin-bottom: 2em;
    width: 100%;
    }

    
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;
}




/* updated to use flexbox - don't have to abs position it */
#copyright {
    /*position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    */
    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;
    }

ul#main_menu {
    width: 98%;
    }

li.main_menu_item {
    /* width: calc(99.999999%/6); original fixed, now auto */
    }
    
li.main_menu_item > a {
    /* widen padding for easier touch on smaller device eg mobile/phablets */
    padding-left: 1.75em;
    padding-right: 1.75em;
    }
    
label.open_main_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_main_header,

#menu3_open_toggle:checked ~ ul#main_menu > li:nth-of-type(3) > label.close_main_header,
#menu4_open_toggle:checked ~ ul#main_menu > li:nth-of-type(4) > label.close_main_header,
#menu6_open_toggle:checked ~ ul#main_menu > li:nth-of-type(6) > label.close_main_header
*/
#menu2_open_toggle:checked ~ ul#main_menu > li:nth-of-type(2) > label.close_main_header,
#menu5_open_toggle:checked ~ ul#main_menu > li:nth-of-type(5) > label.close_main_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_main_header ~ div.sub_menu_container,    
#menu5_open_toggle:checked ~ ul#main_menu > li > label.close_main_header ~ div.sub_menu_container
    {
    /* show submenu contained by label.close_main_header */
    top: 3.3em;
    right: 0;
    left: auto;
    /*border: solid red 1px;*/
    }
   
/* larger font, wider spacing for touch screen tablets */
 
ul#main_menu > li div.sub_menu_container > ul > li a {
    padding: 0.8em 0.5em;
    font-size: 100%;
    }
    
ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header,
ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header  {
    /* nothing needed for now */  
    
    padding: 0.8em 0.5em;
    }
   
} /* end max width 75em media qry */


@media only screen and (max-width: 50em) and (hover: hover) and (pointer: fine) {

/* place all selectors with :hover pseudo here to prevent tap on touchscreen causing a "sticking" hover e.g.
   a drop down menu won't close even after tap finished
*/

ul#main_menu > li > a:hover {
    color: darkblue;
    }
    
ul#main_menu > li#logo_holder:hover {
    background-color: #86d6dd; 
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    }
        
ul#main_menu > li:hover > label.open_main_header {
    /* match background color of submen div and round top corners for "tab" look */ 
    background-color:#86d6dd;;
    color: darkblue;
    }
    
ul#main_menu > li:nth-of-type(2):hover > label.open_main_header > span:nth-of-type(1){
    color: white;
    }

ul#main_menu > li:nth-of-type(5):hover > label.open_main_header > span:nth-of-type(1){
    color: white;
    } 
    
ul#main_menu > li:hover > label.open_main_header ~ div.sub_menu_container {
    height: 0;
    overflow: hidden;
    }
    
ul#main_menu > li div.sub_menu_container > ul > li:hover {
    /* background-color: #5A5A5A -- no change in color with hover */
    }
        
ul#main_menu > li div.sub_menu_container > ul > li a:hover {
    color: white;
    } 
    
/* spans containing "single ad" or "multi ad" text */
ul#main_menu > li:nth-of-type(2) > div.sub_menu_container > ul > li.single_ad_header:hover > label.open_sub_header > 
    span:nth-of-type(1) {
    color: lightgreen;
    font-weight: bolder;
    font-size: 100%;
    }

/*  show + sign even on hover on small screens */    
ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header:hover > label.open_sub_header > span:nth-of-type(2) {
    display: inline;
    }

/*show with hover even on smaller screens in case user using small laptop etc. */
       
ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header:hover > div.sub_sub_menu_container {    
    height: auto;
    overflow: hidden;
    } 
    

    
/* show + sign inside span element inside single_ad_header even if hovering on small screen */
ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header:hover > label.open_sub_header > span:nth-of-type(2) {
    /* use visibility rather than display: none - prevent submenu div width from shifting when cursor hovering 
       over single_ad_header and we want the + sign to disappear during hover - this way + sign disappears but
       width remains as when main submenu initially opened with a hover over open_main_header label element
    */
    visibility: visible;
    }  
    
/* spans containing "single ad" or "multi ad" text */
ul#main_menu > li:nth-of-type(2) > div.sub_menu_container > ul > li.multi_ad_header:hover > label.open_sub_header > 
    span:nth-of-type(1) {
    color: lightgreen;
    font-weight: bolder;
    font-size: 100%;
    }  
    
/* show + sign even on hover on small screens */       
ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header:hover > label.open_sub_header > span:nth-of-type(2) {
    display: inline;
    }
        
/* show with hover even on smaller screens in case user using small laptop etc. */        
ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header:hover > div.sub_sub_menu_container {    
    height: auto;
    overflow: hidden;
    }
        
/* show + sign, even on hover on small screens */
ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header:hover > label.open_sub_header > span:nth-of-type(2) {
    /* use visibility rather than display: none - prevent submenu div width from shifting when cursor hovering 
       over single_ad_header and we want the + sign to disappear during hover - this way + sign disappears but
       width remains as when main submenu initially opened with a hover over open_main_header label element
    */
    visibility: visible;
    } 
    
/* want background to remain salmon on "hover" even on small devices */
div.sub_sub_menu_container > ul > li:hover {
    background-color: salmon;
    }
    
/* remain black on hover */
div.sub_sub_menu_container > ul > li > a:hover {
    color: black;
    }
          
            

} /* end max-width 50em and hover:hover and pointer: fine media qry block */



@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;
    }      
    
ul#main_menu {
    position: absolute; /* posn relative in desktop css */
    top: 0em;
    margin: 0;
    width: 100%;
    height: 3.5em;
    max-height: 3.5em;
    text-align: left;
    overflow: hidden;
    border-radius: 0;
    background: #86d6dd;  /* mid blue */
    z-index: 5;
    }
 

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

    
li.main_menu_item {
    position: relative;
    display: block; /* inline-block, z-index 50 set in desktop css */
    width: 100%;
    min-height: 3.5em;
    border-bottom: solid darkgray 1px; /* horizontal border added for mobile css */
    }

li.main_menu_item > a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding-top: 1.15em;
    padding-bottom: 0.99em;
    padding-left: 1em;
    padding-right: 0;
    }
    
    
/* -- moved to dedicated media query hover -- above this block -- 

 -- remove and colour change on menu headings (link or submenu header) -- 
    
ul#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;
    }
  
/* -- moved to dedicated media query hover -- above this block --   
  
ul#main_menu > li#logo_holder:hover {
    background-color: #86d6dd; 
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    }
    
*/

label.open_main_header { 
    background: #86d6dd; 
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: left;
    padding-top: 1.2em;
    padding-left: 1em;
    padding-right: 0;
    }
 
/* -- moved to dedicated media query hover -- above this block --  
   
ul#main_menu > li:hover > label.open_main_header {
    -- match background color of submen div and round top corners for "tab" look -- 
    background-color:#86d6dd;;
    color: darkblue;
    }
*/    

    
label.close_main_header { /* intially closed height, width == 0 */
    background: #86d6dd;
    width: 100%;
    height: 100%;
    text-align: left;
    padding-top: 1.2em;
    padding-left: 1em;
    padding-right: 0;
    }



/* style "Advertisement", "Support" menu headings and "+" and "-" (open, close resp) symbols */
ul#main_menu > li:nth-of-type(2) > label.open_main_header > span:nth-of-type(1) {
    display: inline-block;
    width: 70%;
    height: auto;
    vertical-align:top;
    color: darkblue;
    /*border: solid orange 1px;*/
    } 
  
/* -- moved to dedicated media query hover -- above this block --    
    
ul#main_menu > li:nth-of-type(2):hover > label.open_main_header > span:nth-of-type(1){
    color: darkblue;
    }
*/
    
ul#main_menu > li:nth-of-type(2) > label.open_main_header > span:nth-of-type(2) {
    display: inline-block;
    width: 30%;
    height: auto;
    line-height: 120%;
    text-align: right;
    padding-right: 1.3em;
    margin-bottom: 0.8em;
    font-weight: 700;
    /*border: solid blue 1px;*/
    }
    
ul#main_menu > li:nth-of-type(2) > label.close_main_header > span:nth-of-type(1) {
    display: inline-block;
    width: 70%;
    height: auto;
    vertical-align:top;
    color: darkblue;
    /*border: solid orange 1px;*/
    } 
    
ul#main_menu > li:nth-of-type(2) > label.close_main_header > span:nth-of-type(2) {
    display: inline-block;
    width: 30%;
    height: auto;
    line-height: 120%;
    text-align: right;
    padding-right: 1.3em;
    margin-bottom: 0.8em;
    font-weight: 700;
    /*border: solid red 1px;*/
    } 
    

    
ul#main_menu > li:nth-of-type(5) > label.open_main_header > span:nth-of-type(1) {
    display: inline-block;
    width: 70%;
    height: auto;
    vertical-align:top;
    color: darkblue;
    /*border: solid orange 1px;*/
    } 
    
/* -- moved to dedicated media query hover -- above this block --  
    
ul#main_menu > li:nth-of-type(5):hover > label.open_main_header > span:nth-of-type(1){
    color: darkblue;
    }
*/
    
ul#main_menu > li:nth-of-type(5) > label.open_main_header > span:nth-of-type(2) {
    display: inline-block;
    width: 30%;
    height: auto;
    line-height: 120%;
    text-align: right;
    padding-right: 1.3em;
    margin-bottom: 0.8em;
    font-weight: 700;
    /*border: solid blue 1px; */   
    }
    
ul#main_menu > li:nth-of-type(5) > label.close_main_header > span:nth-of-type(1) {
display: inline-block;
    width: 70%;
    height: auto;
    vertical-align:top;
    color: darkblue;
    /*border: solid orange 1px;*/
    } 
    
ul#main_menu > li:nth-of-type(5) > label.close_main_header > span:nth-of-type(2) {
    display: inline-block;
    width: 30%;
    height: auto;
    line-height: 120%;
    text-align: right;
    padding-right: 1.3em;
    margin-bottom: 0.8em;
    font-weight: 700;
    /*border: solid red 1px;*/
    }
    
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
    */
    position: static;
    display: block;
     /* posn absolute in desktop (since pushed to R, not straight drop down as here) */
    transition: none;
    background-color: #CCCCCC;
    border-radius: 0;
    margin: 0;
    /* closed height still 0 from desktop css */
    }
 
/* -- moved to dedicated media query hover -- above this block --  
   
ul#main_menu > li:hover > label.open_main_header ~ div.sub_menu_container {
    height: 0;
    overflow: hidden;
    }
*/
    
/* only 2, 5 used at this time 
#menu1_open_toggle:checked ~ ul#main_menu > li:nth-of-type(1) > label.close_main_header,
#menu3_open_toggle:checked ~ ul#main_menu > li:nth-of-type(3) > label.close_main_header,
#menu4_open_toggle:checked ~ ul#main_menu > li:nth-of-type(4) > label.close_main_header,
#menu6_open_toggle:checked ~ ul#main_menu > li:nth-of-type(6) > label.close_main_header
*/

#menu2_open_toggle:checked ~ ul#main_menu > li:nth-of-type(2) > label.open_main_header,
#menu5_open_toggle:checked ~ ul#main_menu > li:nth-of-type(5) > label.open_main_header
    {
    display: none;
    }
    
    
#menu2_open_toggle:checked ~ ul#main_menu > li:nth-of-type(2) > label.close_main_header,
#menu5_open_toggle:checked ~ ul#main_menu > li:nth-of-type(5) > label.close_main_header
    {
    /* have to override :checked setting from max-width 75em block above */
    display: inline-block;
    padding-left: 1em;
    padding-right:0;
    }
    
#menu2_open_toggle:checked ~ ul#main_menu > li:nth-of-type(2) > label.close_main_header > span:nth-of-type(1),
#menu5_open_toggle:checked ~ ul#main_menu > li:nth-of-type(5) > label.close_main_header > span:nth-of-type(1)
    {
    /* "Advertisements", "Support" text inside labels -- keep at default dark blue for smaller touch screens */
    color: white;
    }
    
#menu2_open_toggle:checked ~ ul#main_menu > li:nth-of-type(2) > label.close_main_header ~ div.sub_menu_container,
#menu5_open_toggle:checked ~ ul#main_menu > li:nth-of-type(5) > label.close_main_header ~ div.sub_menu_container
    {
    /* show submenu when open_main_header toggled to closed ie ht/width == 0 setting */
    
    max-height: 1000%;
    /* min-width: 100%; from desktop css  */
    
    /* have to push top of submenu down a bit to have its top align with bottom of close_main_header / li containers */
    
    /*border: solid red 3px;*/
    }
   
   
#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.sub_menu_container > ul {
    display: block; /* no change from desktop css */
    width: 100%;
    height: auto;
    }    
    
ul#main_menu > li div.sub_menu_container > ul > li {
    display: block; /* same as desktop */
    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; /* add border for mobile css */
    } 
    
ul#main_menu > li:nth-of-type(2) div.sub_menu_container > ul:nth-of-type(1) > li:nth-of-type(1), 
ul#main_menu > li:nth-of-type(5) div.sub_menu_container > ul:nth-of-type(1) > li:nth-of-type(1) 
    {
    border-top: solid gray 1px;
    }
    
/* -- moved to dedicated media query hover -- above this block -- 
    
ul#main_menu > li div.sub_menu_container > ul > li:hover {
    background-color: #CCCCCC;  -- no change in color with hover --
    }
*/
    
ul#main_menu > li div.sub_menu_container > ul > li a {
    text-decoration: none;
    display: inline-block; /* same as desktop css */
    width: 100%;
    height: 100%;
    padding-left: 2em;
    padding-top: 1.15em;
    font-weight: normal;
    font-family:sans-serif;
    color: black;
    font-size: 100%;
    } 
    
/* -- moved to dedicated media query hover -- above this block --     
    
ul#main_menu > li div.sub_menu_container > ul > li a:hover {
    color: black;
    } 
*/ 
    
ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header,
ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header  {
    width: 100%;
    height: auto;
    min-height: 3.5em;
    padding: 0;
    
    }

    
ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header > label.open_sub_header,
ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header > label.open_sub_header  {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items:center; /* must have defined height eg 100% of container, or em / px, not just min-height */
    padding: 0 0 0 2em;
    font-weight:500;
    font-family:sans-serif; 
    /*border: solid blue 1px; */
    height: 3.5em;
    }
  
    
   
/* spans containing "single ad" or "multi ad" text */
ul#main_menu > li:nth-of-type(2) > div.sub_menu_container > ul > li.single_ad_header > label.open_sub_header > 
    span:nth-of-type(1) {
    color: darkslategray;
    font-weight: bolder;
    font-size: 100%;
    }
  
/* default + sign */  
ul#main_menu > li:nth-of-type(2) > div.sub_menu_container > ul > li.single_ad_header > label.open_sub_header > 
    span:nth-of-type(2)
    {
    color: black;
    font-size: 150%;
    }
  
/* default - hide closing - sign */  
ul#main_menu > li:nth-of-type(2) > div.sub_menu_container > ul > li.single_ad_header > label.open_sub_header > 
    span:nth-of-type(3)
    {
    color: lightgreen;
    display: none;
    flex: none;
    font-size: 150%;
    }
 
    
ul#main_menu > li div.sub_menu_container > ul > li.multi_ad_header > label.open_sub_header > span:nth-of-type(1) {
    color: darkslategray;
    font-weight: bolder;
    }
    
ul#main_menu > li div.sub_menu_container > ul > li.multi_ad_header > label.open_sub_header > span:nth-of-type(2)
    {
    color: black;
    font-size: 150%;
    }
    
ul#main_menu > li div.sub_menu_container > ul > li.multi_ad_header > label.open_sub_header > span:nth-of-type(3)
    {
    color: lightgreen;
    display: none;
    flex: none;
    font-size: 150%;
    }
    
div.sub_sub_menu_container {
    position: static; /* change from desktop posn absolute */
    display: block;
    width: 100%;
    height: 0;
    color: black;
    /*margin-bottom: -1em;  tweak lower edge to line up with sub_menu li border */
    } 
   
   
/* -- moved to dedicated media query hover -- above this block --  
     
  -- show + sign even on hover on small screens --       
ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header:hover > label.open_sub_header > span:nth-of-type(2) {
        display: inline;
        }

        
 -- show with hover even on smaller screens in case user using small laptop etc. -- 
       
ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header:hover > div.sub_sub_menu_container {    
    height: auto;
    overflow: hidden;
    }
*/
  
/* -- moved to dedicated media query hover -- above this block --    
        
 -- show + sign inside span element inside single_ad_header even if hovering on small screen -- 
 
ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header:hover > label.open_sub_header > span:nth-of-type(2) {
        -- use visibility rather than display: none - prevent submenu div width from shifting when cursor hovering 
           over single_ad_header and we want the + sign to disappear during hover - this way + sign disappears but
           width remains as when main submenu initially opened with a hover over open_main_header label element
        --
        visibility: visible;
        }
*/

#menu2_open_toggle:checked ~ #submenu1_toggle:checked ~ ul#main_menu > li > div.sub_menu_container > ul > 
    li.single_ad_header > label.open_sub_header {
    background-color: #5A5A5A;
    
    font-size: 100%;
    }


/* spans containing "single ad" or "multi ad" text */
#menu2_open_toggle:checked ~ #submenu1_toggle:checked ~ ul#main_menu > li:nth-of-type(2) > div.sub_menu_container > ul > 
    li.single_ad_header > label.open_sub_header > 
    span:nth-of-type(1) {
    color: lightgreen;
    
    font-size: 100%;
    }


        
#menu2_open_toggle:checked ~ #submenu1_toggle:checked ~ ul#main_menu > li > div.sub_menu_container > ul > li.single_ad_header > 
    label.open_sub_header ~ div.sub_sub_menu_container {    
        height: auto;
        overflow: hidden;
        background-color: transparent; /* get rid of yellow from non-mobile version */
        } 
        
/* -- moved to dedicated media query hover -- above this block --          
        
 -- show + sign even on hover on small screens --     
ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header:hover > label.open_sub_header > span:nth-of-type(2) {
        display: inline;
        }
        
 -- show with hover even on smaller screens in case user using small laptop etc. --        
ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header:hover > div.sub_sub_menu_container {    
        height: auto;
        overflow: hidden;
        }
        
 -- show + sign, even on hover on small screens -- 
ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header:hover > label.open_sub_header > span:nth-of-type(2) {
         -- use visibility rather than display: none - prevent submenu div width from shifting when cursor hovering 
           over single_ad_header and we want the + sign to disappear during hover - this way + sign disappears but
           width remains as when main submenu initially opened with a hover over open_main_header label element -- 
        
        visibility: visible;
        }
        
*/

/* spans containing "single ad" or "multi ad" text */
#menu2_open_toggle:checked ~ #submenu2_toggle:checked ~ ul#main_menu > li:nth-of-type(2) > div.sub_menu_container > ul > 
    li.multi_ad_header > label.open_sub_header > 
    span:nth-of-type(1) {
    color: lightgreen;
    
    font-size: 100%;
    }

#menu2_open_toggle:checked ~ #submenu2_toggle:checked ~ ul#main_menu > li > div.sub_menu_container > ul > 
    li.multi_ad_header > label.open_sub_header {
    background-color: #5A5A5A;
    
    font-size: 100%;
    }

#menu2_open_toggle:checked ~ #submenu2_toggle:checked ~ ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header > 
    label.open_sub_header ~ div.sub_sub_menu_container {    
        height: auto;
        overflow: hidden;
        background-color: transparent; /* get rid of blue from non-mobile version */
        }
        
#menu2_open_toggle:checked ~ #submenu2_toggle:checked ~ ul#main_menu > li > div.sub_menu_container > ul > li.multi_ad_header > 
    label.open_sub_header ~ div.sub_sub_menu_container {    
        height: auto;
        overflow: hidden;
        }
    


        

        
div.sub_sub_menu_container > ul {
    display: block;
    width: 100%;
    height: auto;
    } 
        
        
div.sub_sub_menu_container > ul > li {
    display: block; /* same as desktop css */
    text-align: left;
    width: 100%;
    height: 3.5em;
    padding-left: 1.5em;
    white-space:pre;
    font-weight: normal;
    border: 0;
    border-bottom: solid gray 1px;
    background-color: salmon;
    }
    
    
/* -- moved to dedicated media query hover -- above this block -- 

 -- want background to remain salmon on "hover" even on small devices -- 
div.sub_sub_menu_container > ul > li:hover {
    background-color: salmon;
    }
*/
    
div.sub_sub_menu_container > ul > li:nth-child(1) {
    border-top: solid gray 1px;
    }
    
div.sub_sub_menu_container > ul > li > a {
    text-decoration: none;
    display: inline-block; /* no change */
    width: 100%;
    height: 100%;
    padding: 0.5em;
    font-weight:500;
    font-family:sans-serif;
    color: black;
    }
    
    
/* -- moved to dedicated media query hover -- above this block -- 

 -- remain black on hover -- 
div.sub_sub_menu_container > ul > li > a:hover {
    color: black;
    }
*/    
    
        
#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.5em;
    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;
    }        
        
        
        
        
    
/* container for login, password and ad_id text entry input elements */
.submit_container {
    margin-bottom: -2em;
    }
  
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;
    }
    
    
        

    

 

/*  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 */

#subscr_id_font {
    font-family: "Times New Roman";
    font-size: 1rem;
    
    }
   

#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 */
   
   
    }  

/* <ul> element holding 1-3 locum dates in numbered <li> elements  */    
.ad_display_locum_dates {
    list-style-position: outside;
    list-style-type: disc;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 1.5em;
    padding: 0;
    }  
    
.ad_display_locum_dates > li {
    padding: 0;
    margin: 0.25em 0;
    }
    
#display_ad_ad_type {
    text-decoration: underline;
    }
    

    
.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_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;
    overflow: auto;
    }
    
.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;
    }

div#mid_page_content:not(.jqx-widget) {
    font-size: large;
    }  


} /* 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;
    }
    
}



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







}