/* T R B L */
.ocbox, .ocboxzero, .oclabelbox, .oclabelboxzero, .oclabeltop {
    background-color : #ffffff;
    border-radius    : 10px;
    color            : #000000;
    min-width        :  400px;
    max-width        : 1100px;
    text-align       : justify;
    vertical-align   : top;
    margin           : 35px auto 10.0mm auto;
    padding          : 15px 25px 15px 25px;
}

.oclabelbox, .oclabelboxzero, .oclabeltop {
    margin           : 75px auto  5px auto;
}

.ocboxzero, .oclabelboxzero {
    margin-top       : 0;
}

.oclabeltop {
    margin           : 25px auto 50px auto;
}

/* padding: T R B L */
.postheader {
/*  background-color : rgb(100,135,220); */
    background-color : #4050AA;
    border-radius    : 10px;
    color            : #FFFFFF;
    font-weight      : bold;
    min-width        : 320px;
    text-align       : left;
    vertical-align   : top;
    margin           : 55px auto  5px auto;
    padding          : 15px 25px 15px 25px;
}

.postheader a {
    color: white;
    font-weight: bold;
    text-decoration: none;
}

a {
    text-decoration: none;
}

.spacelinks a {
    margin: 0 10px 0 0;
    height: 1.1em;
    line-height: 1.1em;
    text-decoration: none;
}

.bodybg {
    xbackground: #8BB9F9 url(../imgsite/clouds.png) repeat-x scroll center;
    min-width: 450px;
}

.ocbody {
    background : #8BB9F9 ;
    height     : 100%    ;
    padding    : 0       ;
    margin     : 0       ;

    overflow-wrap   : break-word    ;
    word-wrap       : break-word    ;

    -ms-hyphens     : manual        ;
    -moz-hyphens    : manual        ;
    -webkit-hyphens : manual        ;
    hyphens         : manual        ;

    font-family : 'Merriweather', 'LatoLatinWebMedium',
        -apple-system, BlinkMacSystemFont,
        "Roboto", "Oxygen", "Ubuntu",
        "Cantarell", "Fira Sans", "Droid Sans",
        "Helvetica Neue", sans-serif,
        arial, sans, helvetica;
}

* {
   margin: 0;
   padding: 0;
}

p {
    margin-bottom: 1em;
}

.acode {
    color: #aa5103;
    font-weight: bold;
}

.blocktitle {
    color: #aa5103;
    font-weight: bold;
}

.ocnotice {
    color: #880000;
    font-style  : italic;
    font-weight : bold;
}

.sect_title, .secttitle, .poemtitle {
    color: #aa5103;
    /* font-size: 1.1em; */
    font-weight: bold;
}

.emquote {
    color: #000088;
    font-style: italic;
    font-weight: bold;
}

.greenpoem {
    color: #006600;
    font-style: italic;
    font-weight: bold;
}

.embold {
    color: #000088;
    font-style: italic;
    font-weight: bold;
}

.ocfooter {
    margin-bottom: 20px;
}

.ocfooter a {
    text-decoration: none;
}

.imgrt {
    float          : right;
    padding-bottom :  10px;
    padding-left   :  20px;
    margin-top     :   5px;
}

.imglf {
    float          :  left;
    padding-bottom :  10px;
    padding-right  :  20px;
    margin-top     :   5px;
}

.btn {
    margin-top: 10px;
    background-color: #009900;
    color: #ffffff;
}

p:before {
    content  : ""     ;
    width    : 400px  ;
    height   :   1px  ;
    display  : block  ;
    overflow : hidden ;
/*  border   : 1px solid blue; */
}

.justify {
    text-align : justify;
}

.padright {
    padding-right : 12px;
}

.offlink {
    position: relative; top: -60px;
}

.thumbnail {
    border-radius: 0 !important;
    border: 4px solid #333;
}

.thumbnail { border:0;background:transparent; }

.thumbnail > img, .thumbnail a > img, {
    display: block; max-width: 100%; height: auto;
}

.imgrow {
    overflow      : hidden ;
    max-width     : 100%   ;
    max-height    : 100%   ;
    margin-left   : auto   ;
    margin-right  : auto   ;
}

@media screen and (min-width: 1000px) { .thinner1000 { display: none; }}
@media screen and (max-width:  999px) { .wider1000   { display: none; }}

@media screen and (min-width:  900px) { .thinner0900 { display: none; }}
@media screen and (max-width:  899px) { .wider0900   { display: none; }}

@media screen and (min-width:  800px) { .thinner0800 { display: none; }}
@media screen and (max-width:  799px) { .wider0800   { display: none; }}

@media screen and (min-width:  700px) { .thinner0700 { display: none; }}
@media screen and (max-width:  699px) { .wider0700   { display: none; }}

@media screen and (min-width:  600px) { .thinner0600 { display: none; }}
@media screen and (max-width:  599px) { .wider0600   { display: none; }}

@media screen and (min-width:  500px) { .thinner0500 { display: none; }}
@media screen and (max-width:  499px) { .wider0500   { display: none; }}

@media screen and (min-width:  400px) { .thinner0400 { display: none; }}
@media screen and (max-width:  399px) { .wider0400   { display: none; }}

/* ---------------------------------------------------------------- */

/*
    Note: "navilink" gradients run from bottom to top.

    Regular button:
    51, 120, 180 = top    color: brighter
     0,  52, 154 = bottom color: darker

    Button during hover:
    80, 150, 210 = top    color hover: brighter
    30,  80, 180 = bottom color hover: darker
 */

.navilink {

    width         : 195px;
    display       : inline-block;
    font-size     : 80% ;
    margin-right  :   2mm;
    margin-bottom :   3mm;
    border-radius :   8px;
    border-style  :  none;
    border-width  :   1px;
    padding       :   2mm;
    padding-left  :   0mm;

    background-color: rgb(92%,94%,97%);

    background-image: linear-gradient(bottom, rgb(57%,64%,74%) 0%, rgb(92%,94%,97%) 100%);
    background-image: -o-linear-gradient(bottom, rgb(57%,64%,74%) 0%, rgb(92%,94%,97%) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(57%,64%,74%) 0%, rgb(92%,94%,97%) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(57%,64%,74%) 0%, rgb(92%,94%,97%) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(57%,64%,74%) 0%, rgb(92%,94%,97%) 100%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(57%,64%,74%)),
        color-stop(1, rgb(92%,94%,97%))
    );
}

.navilink a {
    text-decoration: none;
    display:inline-block;
    width:100%;
    height:100%;
}

.navilink a:hover {
    text-decoration: none;
    display:inline-block;
    width:100%;
    height:100%;
}

.navilink:hover {
    background-image: linear-gradient(bottom, rgb(68%,73%,74%) 0%, rgb(100%,100%,100%) 100%);
    background-image: -o-linear-gradient(bottom, rgb(68%,73%,74%) 0%, rgb(100%,100%,100%) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(68%,73%,74%) 0%, rgb(100%,100%,100%) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(68%,73%,74%) 0%, rgb(100%,100%,100%) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(68%,73%,74%) 0%, rgb(100%,100%,100%) 100%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(68%,73%,74%)),
        color-stop(1, rgb(100%,100%,100%))
    );
}

/* ---------------------------------------------------------------- */

.p44_navbar {
    margin-left: 30px;
    margin-right: 30px;
    overflow: hidden;
    /* background: rgba(0,0,0,1.00); */
    font-family: Arial, sans-serif;
}

.p44_navbar a {
    float: left;
    color: #eeeeee;
    background-color: #252525; /* button color */
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    width: 175px;
    border: solid 1px #202020;
    margin: 2px 2px 2px 2px;
}

.p44_dropdown {
    float: left;
    overflow: hidden;
}

.p44_dropdown .p44_dropbtn {
    border: solid 1px #202020;
    outline: none;
    color: #dddddd;
    width: 262px;
    padding: 10px 20px;
    /* background-color: #252525; */
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.p44_navbar a:hover, .p44_dropdown:hover .p44_dropbtn {
    background-color: #444444;
}

.p44_dropdown-content {
    display: none;
    position: absolute;
    background-color: #333333;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.p44_dropdown-content a {
    float: none;
    color: #dddddd;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.p44_dropdown-content a:hover {
    background-color: #444444;
}

.p44_dropdown:hover .p44_dropdown-content {
    display: block;
}

/* ---------------------------------------------------------------- */

html {
    -webkit-text-size-adjust : none;
    -moz-text-size-adjust    : none;
    -ms-text-size-adjust     : none;
}

.bodyfont {
    font-family: -apple-system, BlinkMacSystemFont,
        "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
        "Cantarell", "Fira Sans", "Droid Sans",
        "Helvetica Neue" , sans-serif ,
        arial, sans, helvetica;
    font-size : 18pt;
}

@media screen and (min-resolution: 2dppx)
              and (orientation: landscape) {
    .bodyfont { font-size : 20pt; }
}

@media screen and (min-resolution: 2dppx)
              and (orientation: portrait) {
    .bodyfont { font-size : 20pt; }
}

@media screen and (min-resolution: 3dppx)
              and (orientation: landscape) {
    .bodyfont { font-size : 24pt; }
}

@media screen and (min-resolution: 3dppx)
              and (orientation: portrait) {
    .bodyfont { font-size : 24pt; }
}

/* ---------------------------------------------------------------- */

.thincol { display   : none   ; }
.widecol { display   : block  ; }

@media screen and (max-width: 699px) {
    .thincol { display   : block  ; }
    .widecol { display   : none   ; }
}

@media screen and (min-resolution: 2dppx)
              and (orientation: portrait) {
    .thincol { display   : block  ; }
    .widecol { display   : none   ; }
}

@media screen and (min-resolution: 2dppx)
              and (orientation: landscape) {
    .thincol { display   : none  ; }
    .widecol { display   : block ; }
}

@media screen and (min-width: 1024px) {
    .thincol { display   : none  ; }
    .widecol { display   : block ; }
}

/* ---------------------------------------------------------------- */

.ocwarn {
    text-align: justify;
    color: #880000;
    font-style  : italic;
    font-weight : bold;
}

.em {
    font-style: italic;
}

pre {
    line-height: normal;
}

.subHeader {
    color: white;
/*  background-color: rgb(0,51,153); */
    margin: 0;
    padding: 2.0mm 2.0mm 2.0mm 2.0mm;
}

.subHeader a {
    color: rgb(25%,25%,25%);
    background-color: transparent;
    text-decoration: none;
    font-weight: bold;
    margin: 0;
    padding: 0 4.0mm 0 4.0mm;
}

.subHeader a:hover {
/* text-decoration: underline; */
}

.headerTitle {
    text-align: left;
    font-size: 1.2em;
    font-weight: normal;
    margin: 0;
    padding: 10px 15px 10px 15px;
}

.headerSubtitle {
    hyphens: manual;
    color: #884422;
    text-align: justify;
    font-style:  italic;
    font-weight: bold;
    margin: 0 4.0mm 0 4.0mm;
    padding: 4.0mm 0;
}

.mobname, .moblongname {
    width         : 150px;
    display       : inline-block;
    margin-right  :  10px;
    margin-bottom :  12px;
    border-style  : solid;
    border-width  :   1px;
    padding       :   5px;
}

.moblongname {
    width         : 250px;
}

.pre {
    color: #000099;
    font-family: monospace;
    font-size  : 1.1em;
    font-weight: bold;
    white-space: pre;
}

.floatstanza {
    color          : #000088           ;
    font-style     : italic            ;
    font-weight    : bold              ;
    padding        :  15px             ;
    margin         :  15px             ;
    width          : 400px             ;
    display        : inline-block      ;
    border         : 2px solid #000088 ;
    vertical-align : top               ;
}

.rfloatstanza {
    color          : #000088           ;
    font-style     : italic            ;
    font-weight    : bold              ;
    vertical-align : top               ;
    width          : 250px             ;
    display        : inline-block      ;
    margin-right   :   2mm             ;
    margin-bottom  :   3mm             ;
    padding        :   2mm             ;
    padding-left   :   0mm             ;
}

.floatimage {
    border         : 2px solid #000088 ;
    margin         :  15px             ;
    padding        :  15px             ;
    width          : 400px             ;
    display        : inline-block      ;
    vertical-align : top               ;
}

.hdrnonlink {
    color          : #AAAAAA           ;
    margin         : 0 10px 0 0;
    height         : 1.1em;
    line-height    : 1.1em;
}

.sitedesc {
    hyphens        : manual            ;
    color          : #FFFF00           ;
}

/* ---------------------------------------------------------------- */

/* max-width must be set at the caller level */

.imgcenterinbox {
    min-width      : 350px             ;
    margin-left    : auto              ;
    margin-right   : auto              ;
/*  margin-bottom  :  30px             ; */
}

/* ---------------------------------------------------------------- */

/* T R B L */

/* The negative  margin-bottom setting used here seems to be needed */
/* for Chrome  under Android.  The reason is unknown,  but it helps */
/* with the layout in general regardless.                           */

.sect_dirt_grass {
    background-image: url(../imgsite/backgrounds/bg_dirt_grass.png);
    repeat-x scroll;
    margin: 0; padding: 0px 35px 20px 35px;
    margin-bottom: -30px;
}

.sect_desert_sandstone {
    background-image: url(../imgsite/backgrounds/bg_desert_sandstone.png);
    margin: 0; padding: 0px 30px 20px 30px;
}

.sect_dirt {
    background-image: url(../imgsite/backgrounds/bg_dirt.png);
    margin: 0; padding: 0px 30px 20px 30px;
}

.sect_hard_rock {
    background-image: url(../imgsite/backgrounds/bg_hard_rock.png);
    margin: 0; padding: 0px 30px 20px 30px;
}

.sect_lava {
    background-image: url(../imgsite/backgrounds/bg_lava.png);
    margin: 0; padding: 0px 30px 20px 30px;
}

.sect_stone {
    background-image: url(../imgsite/backgrounds/bg_stone.png);
    margin: 0; padding: 0px 30px 20px 30px;
}

.sect_slate_brick {
    background-image: url(../imgsite/backgrounds/bg_slate_brick.png);
    margin: 0; padding: 0px 30px 20px 30px;
}

.sect_water {
    background-image: url(../imgsite/backgrounds/bg_water.png);
    margin: 0; padding: 0px 30px 20px 30px;
}

/* ---------------------------------------------------------------- */

.maplink, .maplinkw, .maplinkx {
    display: table-cell;
    float:  left;
    padding: 6px;
    margin:  0em;
    border-style: solid;
    border-width: 1px;
    text-align: left;
}

.maplink {
    height:  2.5em;
    width:   7em;
}

.maplinkg {
    display: inline-block;
    float:  left;
    padding: 6px;
    margin       :  0em ;
    border-style : solid;
    border-width : 1px;
    text-align   : left;
}

.maplinkg, .maplinkg a, .maplinkga {
    margin          :  0.2em ;
    padding         :  0.2em ;
    height          :  1.5em ;
    width           :  9.0em ;
    font-weight     : bold   ;
    text-decoration : none   ;
}

.maplinkw {
    height: 1em;
    width: 50mm;
}

.maplinkw a {
    text-decoration: none;
}

.maplinkx {
    height: 1em;
    width: 10em;
}

.nodec {
    text-decoration: none;
}

.occenter {
    margin-left: auto;
    margin-right: auto;
}

.left {
    text-align: left;
}

.oclabelint {
    background-color : #ffffff             ;
    color            : #aa5103             ;
    font-size        : medium              ;
    font-weight      : bold                ;
    min-width        : 320px               ;
    text-align       : justify             ;
    vertical-align   : top                 ;
    margin           : 0                   ;
    padding          : 10px 0px 10px 0px   ;
    width            : 100%                ;
}

.mtcontent {
    padding : 0;
    margin  : 0;
}

/* ---------------------------------------------------------------- */

.ocbody         { font-size  : 16pt   ; }
.mtcontent      { font-size  : 16pt   ; }
.p44_navbar     { font-size  : 14pt   ; }
.p44_navbar a   { font-size  : 14pt   ; }

.HeaderTitle    { font-size  : 19pt   ; }
.HeaderSubtitle { font-size  : 10pt   ; }
.SiteDesc       { font-size  : 15pt   ; }
.navilink       { font-size  : 20px   ; }

/* ---------------------------------------------------------------- */

/*
   Examples of phones:
   [2x] 320x568 iPhone 5/SE
   [2x] 360x640 Galaxy S III
   [2x] 375x667 iPhone 6, 7, 8
   [2x] 375x812 iPhone X
   [2x] 384x640 Nexus 4
*/

/* ---------------------------------------------------------------- */

/* Suppress optional text for phones in portrait mode.              */

@media screen and (max-resolution: 1dppx)
              and (max-width: 900px) {
    .HeaderSubtitle { display: none; }
}

@media screen and (min-resolution: 2dppx)
              and (orientation: portrait) {
    .HeaderSubtitle { display: none; }
}

@media screen and (min-resolution: 2dppx) {
    .mtcontent      { font-size  :   23pt ; }
    .ocbody         { font-size  :   23pt ; }
    .p44_navbar     { font-size  :   20pt ; }
    .p44_navbar a   { font-size  :   20pt ; }

    .HeaderTitle    { font-size  :   25pt ; }
    .HeaderSubtitle { font-size  :   17pt ; }
    .SiteDesc       { font-size  :   20pt ; }
    .navilink       { font-size  :   16pt ; }

    .x_nameline     { top        : -140px ; }
    .x_navanchor    { top        : -140px ; }
    .x_ocbody       { margin-top :  140px ; }
}

@media screen and (min-resolution: 2dppx)
              and (orientation: portrait) {
    .regularstanza, .stanza450, .nbstanza450, .floatstanza {
        width : 550px;
    }
    /* try preceding minus 70px */
    .stanza_txt { width : 480px; }
}

@media screen and (min-resolution: 3dppx) {
    .mtcontent      { font-size  :   24pt ; }
    .ocbody         { font-size  :   24pt ; }
    .p44_navbar     { font-size  :   22pt ; }
    .p44_navbar a   { font-size  :   22pt ; }

    .HeaderTitle    { font-size  :   26pt ; }
    .HeaderSubtitle { font-size  :   17pt ; }
    .SiteDesc       { font-size  :   21pt ; }
    .navilink       { font-size  :   24px ; }

    .x_nameline     { top        : -160px ; }
    .x_navanchor    { top        : -160px ; }
    .x_ocbody       { margin-top :  160px ; }
}

@media screen and (min-resolution: 3dppx)
              and (orientation: portrait) {
    .regularstanza, .stanza450, .nbstanza450, .floatstanza {
        width : 585px;
    }
    /* try preceding minus 70px */
    .stanza_txt { width : 515px; }
}

/* ---------------------------------------------------------------- */

.thincol { display   : none   ; }
.widecol { display   : block  ; }

@media screen and (max-width: 699px) {
    .thincol { display   : block  ; }
    .widecol { display   : none   ; }
}

@media screen and (min-resolution: 2dppx)
              and (orientation: portrait) {
    .thincol { display   : block  ; }
    .widecol { display   : none   ; }
}

@media screen and (min-resolution: 2dppx)
              and (orientation: landscape) {
    .thincol { display   : none  ; }
    .widecol { display   : block ; }
}

@media screen and (min-width: 1024px) {
    .thincol { display   : none  ; }
    .widecol { display   : block ; }
}

/* ---------------------------------------------------------------- */

.box {
    margin-bottom:      30px;
    margin-top:         30px;
}

.txtname {
    color:             #aa6000;
    display:           table-cell;
    float:             left;
    font-size:          15px;
    font-weight:       bold;
    height:             34px;
    text-align:        left;
    vertical-align:    middle;
    width:             145px;
}

.txtarea {
    border:            solid 1px #ccc;
    border-radius:       5px;
    color:             #888;
    height:            200px;
    min-width:         350px;
    max-width:         700px;
}

.txtbox {
    border:            solid 1px #ccc;
    border-radius:       5px;
    color:             #888;
    height:             34px;
    width:             350px;
}

.sendbutton {
    background-color: #252525; /* button color */
    border:            solid 1px #ddd;
    border-radius:       3px;
    color:             #eeeeee;
    cursor:            pointer;
    display:           inline-block;
    font:              14px/100%;
    font-weight:       600;
    margin:             5px;
    outline:           none;
    padding:           0.50em 2.00em 0.55em;
    text-align:        center;
    text-decoration:   none;
}

.sendbutton:active {
    position:          relative;
    top:                 1px;
}

.sendbutton:hover {
    text-decoration:   none;
}