.above { z-index: 150; }
.beneath { z-index: 50; }
/*
class .d used for the info 'loc' inputs so that they're the only ones that can receive 
the placement of btnPin. when shown, they toggle class .loc, else they're hidden

class .e used for the final inputs of the info <div> to toggle .w225, else they're hidden

class .f used for each radio button holder <div> to make it an in-line block

*/

body { background-color: #cce6ff; font-family:"Arial"; font-size:3em; width:410px;} /*was 1em*/
button { font-size:16px; width: 75px; margin: 0px 2px; }
button.btn { width:  auto; height: auto; }
#btnG { background-color: #88FF88; }
#btnR { background-color: red; color: white; }

/*FIXME? input { display:inline-block; } */
input { display:none; }
input[type='radio'] { display:initial; }

img { width:26px; height:22px; }

span { display: inline-block; }
textarea { display:none; }

ul {margin-left: -15px;}
li {margin-bottom: -15px;}

.cache { display:none; }
.ia  { display:inline-block; }
.loc { display:inline-block; width: 80%; }
.f { display:inline-block; }

h3 {display: inline-block; }

#accordion {
    width:400px;
    height:450px;
}

.divLeft { /* if this works, should allow #maplayout to layout to the right */
    display:inline-block;
    margin-right:10px;
    vertical-align:top;
    width:510px;
/*    float:left; */ /* didn't work after all */
}

#divPartic {padding-left: 1.0em; }

.divright { /*if this works, should allow links to move to the right*/
    float: right;
    text-align: right;
/*    width: 450px;*/ /* divright s/b no wider than comes naturally */
/* may want to set suitable width for following <h3> -? */
}

#divInfo {
    max-width:450px;
    height:300px;
    overflow:scroll;
    scrollbar-color:blue #CCCCCC;
    scrollbar-width:10px;
}

#maplayout {
/*    top: 0; */
/*    left: 0; */
    display: inline-block;
/*    z-index: 0; */
    /* let width and height be figured from contents */
    /*position: relative;*/
}
/**
#mask {
    background-color: #cce6ff;
/*    top: 0px; o/
/*    left: 0px; o/
    width:405px;
    height:405px;
    z-index:100;
/*    position: relative; o/
}
**/
#divFind {
    display: none;
    background-color: #DDDDDD;
/*    top: -400px; */
/*    left: 5px; */
    width:400px;
    padding-top: 5px;
    height:130px;
/*    z-index:0; */
/*    position: relative; */
}
/**
#divFind.shown {
    z-index:200;
}
**/
#divFind INPUT { display:initial; }

#map {
    display: none;
    background-color: #FF8080; /*maybe not needed if it contains google map*/
/*    top:-530px; */
/*    left: 5px;  */
    height:395px;
    width: 400px;
    z-index:0;
/*    position: relative;    */
}

#map.shown1 {
    z-index:200;
}

#map.shown2 {
    z-index:200;
    /*top: -390px; /*-445px + 5 + 50 */
}

/*#spright { float: right; } NOT USED */

select {
    font-size: 16px;
    display:none;
}

table { border-collapse: collapse; }

#sel01, #selSeg { width: 200px; display:initial; }

.w35  {width:  35px; }
.w40  {width:  40px; }
.w55  {width:  55px; }
.w65  {width:  65px; }
.w70  {width:  70px; }
.w100 {width: 100px; }
.w125 {width: 125px; }
.w150 {width: 150px; }
.w200 {width: 200px; }
.w225 {width: 225px; }
.w275 {width: 275px; }
.w300 {width: 300px; }
.x    {text-decoration-line: line-throuugh; }

@media screen and (orientation: portrait) { /*cellphone 'normal'*/
    body {font-size:3em; width:100%;}
    input {font-size:1em; min-width:60%; }
    span {min-width:30%;}
    select { font-size:1em; min-width:60%;}
    button { font-size:1em; min-width:25%;}
}

@media screen and (orientation: landscape) { /*both desktop and cellphone 'sideways'*/

    body {width:1500px; font-size:14pt; } /* needs to be at least as wide as .divLeft + #maplayout, else can't layout properly side by side */
    #accordion/*, #info*/ {
        width:510px;
    }
    #maplayout {
/*        position: relative; */
/*        top: -400px; */
/*        left: 510px; */
    }
    #sel01, #selSeg {
        width: 250px;
    }
}

@media print {
    body { background-color: #cce600;  }
}