* {
margin: 0;
padding: 0;
}
html, body { height : 100%; font-size:5mm; }
.phtext_bgnone, .phtext_bgwhite {
border-radius : 12pt ;
color : #004444 ;
font-weight : bold ;
margin-left : 15px ;
margin-top : 5px ;
padding-left : 10pt ;
padding-right : 10pt ;
padding-top : 4pt ;
padding-bottom : 4pt ;
position : relative ;
}
.phtext_bgwhite {
background : white ;
}
.occompass {
float : right ;
margin-left : 0pt ;
margin-right : 10pt ;
margin-top : 0pt ;
padding : 0 ;
position : relative ;
vertical-align : top ;
}
.crumbs_bgwhite {
background-color : #f8f8f8 ;
display : inline-block ;
padding-top : 2pt ;
padding-right : 12pt ;
padding-bottom : 1pt ;
padding-left : 10pt ;
}
.crumbs_bgnone {
display : inline-block ;
padding-top : 2pt ;
padding-right : 12pt ;
padding-bottom : 1pt ;
padding-left : 2pt ;
}
/* T R B L */
.ocbox, .ocboxzero, .oclabelbox, .oclabelboxzero, .oclabeltop {
background-color : #f8f8f8;
border-radius : 8px;
color : #000000;
min-width : 500px;
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 : 15px;
}
.oclabeltop {
margin : 25px auto 50px auto;
}
/* ---------------------------------------------------------------- */
/* H.H.: top of page */
/* ---------------------------------------------------------------- */
.PageHeader {
background-image : url("../imgsite/headerbg_forest.jpg") ;
background-color : #ffffff ;
color : #444488 ;
margin : 0 ;
padding : 0 ;
/* These are needed to make the top-panel fixed-height. "position" */
/* and "overflow" shouldn't be set here or things will break. */
height : 140px ; /* PANEL_HEIGHT */
top : 0 ;
width : 100% ; /* Full width */
}
.headerbg_forest {
background-image : url("../imgsite/headerbg_forest.jpg") ;
}
.headerbg_legalpad {
background-image : url("../imgsite/headerbg_legalpad.jpg") ;
}
.HeaderTitle {
/* font-size : Set dynamically later */
display : inline-block ;
font-weight : bold ;
margin-top : 5pt ;
position : relative ;
vertical-align : top ;
}
.HeaderSubtitle {
/* font-size : Set dynamically later */
color : #884422 ;
display : inline-block ;
hyphens : manual ;
font-style : italic ;
font-weight : bold ;
margin-top : 5pt ;
position : relative ;
text-align : justify ;
vertical-align : top ;
}
.SiteDesc {
/* font-size : Set dynamically later */
color : #0000FF ;
font-style : italic ;
font-weight : bold ;
hyphens : manual ;
margin-top : 0pt ;
margin-right : 0pt ;
margin-bottom : 1pt ;
margin-left : 20pt ;
padding-bottom : 0pt ;
text-align : justify ;
}
/* ---------------------------------------------------------------- */
/* H.H.: post header */
/* ---------------------------------------------------------------- */
/* T R B L */
.postheader {
background-color : #4050AA ;
border-radius : 10px ;
color : #FFFFFF ;
font-size : 5mm ;
font-weight : bold ;
margin : 35px auto 10.0mm auto ;
min-width : 400px ;
max-width : 1100px ;
padding : 15px 25px 15px 25px ;
text-align : left ;
vertical-align : top ;
}
.postheader a {
color : white ;
text-decoration : none ;
font-weight : bold ;
}
/* ---------------------------------------------------------------- */
a {
text-decoration: none;
}
.spacelinks a {
margin: 0 10px 0 0;
height: 1.1em;
line-height: 1.1em;
text-decoration: none;
}
.TopPanel {
display : block ;
height : 140px ; /* PANEL_HEIGHT. May not be needed here. */
overflow : hidden ;
position : fixed ; /* Set navbar to fixed position */
top : 0 ;
width : 100% ; /* Full width */
}
.nameline {
/* top : Set dynamically later */
position : absolute ;
}
.navanchor {
/* top : Set dynamically later */
display : block ;
position : relative ;
visibility : hidden ;
}
.bodybg {
background: #8BB9F9;
}
.ocbody {
/* "font-size" and "margin-top" are set dynamically. */
background : #8BB9F9 url(../imgsite/bodybg_ioclouds.png);
height : 100% ;
min-width : 450px ;
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;
}
.bodybg_ioclouds {
background: #8BB9F9 url(../imgsite/bodybg_ioclouds.png);
}
.bodybg_starsky {
background: #8BB9F9 url(../imgsite/bodybg_starsky.jpg);
min-width: 450px;
}
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 ;
}
.secttitle, .sect_title, .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;
}
.fixedfooter {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
.ocfooter a {
text-decoration: none;
}
.imgrt {
float:right;
padding-bottom:5px;
padding-left:20px;
margin-top:5px;
}
.imglf {
float:left;
padding-bottom:5px;
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; }}
/* ---------------------------------------------------------------- */
.naviwidth_minetest { width : 195px; }
.naviwidth_haggis { width : 233px; }
.navilink {
/* font-size : set dynamically later */
width : 233px ;
display : inline-block ;
margin-right : 3mm ;
margin-bottom : 4mm ;
border-radius : 8px ;
border-style : solid ;
border-width : 1px ;
padding : 2mm ;
padding-left : 0mm ;
}
/* ---------------------------------------------------------------- */
.navicolor_black {
background-color: rgb(115,115,115);
background-image: linear-gradient(bottom, rgb(4,4,4) 0%, rgb(115,115,115) 100%);
background-image: -o-linear-gradient(bottom, rgb(4,4,4) 0%, rgb(115,115,115) 100%);
background-image: -moz-linear-gradient(bottom, rgb(4,4,4) 0%, rgb(115,115,115) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(4,4,4) 0%, rgb(115,115,115) 100%);
background-image: -ms-linear-gradient(bottom, rgb(4,4,4) 0%, rgb(115,115,115) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(4,4,4)),
color-stop(1, rgb(115,115,115))
);
}
.navicolor_black:hover {
background-image: linear-gradient(bottom, rgb(24,24,24) 0%, rgb(135,135,135) 100%);
background-image: -o-linear-gradient(bottom, rgb(24,24,24) 0%, rgb(135,135,135) 100%);
background-image: -moz-linear-gradient(bottom, rgb(24,24,24) 0%, rgb(135,135,135) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(24,24,24) 0%, rgb(135,135,135) 100%);
background-image: -ms-linear-gradient(bottom, rgb(24,24,24) 0%, rgb(135,135,135) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(24,24,24)),
color-stop(1, rgb(135,135,135))
);
}
/* ---------------------------------------------------------------- */
.navicolor_blue {
background-color: rgb(51,120,180);
background-image: linear-gradient(bottom, rgb(0,52,154) 0%, rgb(51,120,180) 100%);
background-image: -o-linear-gradient(bottom, rgb(0,52,154) 0%, rgb(51,120,180) 100%);
background-image: -moz-linear-gradient(bottom, rgb(0,52,154) 0%, rgb(51,120,180) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(0,52,154) 0%, rgb(51,120,180) 100%);
background-image: -ms-linear-gradient(bottom, rgb(0,52,154) 0%, rgb(51,120,180) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,52,154)),
color-stop(1, rgb(51,120,180))
);
}
.navicolor_blue:hover {
background-image: linear-gradient(bottom, rgb(30,80,180) 0%, rgb(80,150,210) 100%);
background-image: -o-linear-gradient(bottom, rgb(30,80,180) 0%, rgb(80,150,210) 100%);
background-image: -moz-linear-gradient(bottom, rgb(30,80,180) 0%, rgb(80,150,210) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(30,80,180) 0%, rgb(80,150,210) 100%);
background-image: -ms-linear-gradient(bottom, rgb(30,80,180) 0%, rgb(80,150,210) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(30,80,180)),
color-stop(1, rgb(80,150,210))
);
}
/* ---------------------------------------------------------------- */
.navicolor_green {
width : 195px;
display : inline-block;
font-size : 80% ;
margin-right : 2mm;
margin-bottom : 3mm;
border-radius : 8px;
border-style : solid;
border-width : 1px;
padding : 2mm;
padding-left : 0mm;
background-color: rgb(160,160,125);
background-image: linear-gradient(bottom, rgb(0,80,100) 0%, rgb(160,160,125) 100%);
background-image: -o-linear-gradient(bottom, rgb(0,80,100) 0%, rgb(160,160,125) 100%);
background-image: -moz-linear-gradient(bottom, rgb(0,80,100) 0%, rgb(160,160,125) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(0,80,100) 0%, rgb(160,160,125) 100%);
background-image: -ms-linear-gradient(bottom, rgb(0,80,100) 0%, rgb(160,160,125) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,80,100)),
color-stop(1, rgb(160,160,125))
);
}
.navicolor_green:hover {
background-image: linear-gradient(bottom, rgb(20,40,80) 0%, rgb(170,170,150) 100%);
background-image: -o-linear-gradient(bottom, rgb(20,40,80) 0%, rgb(170,170,150) 100%);
background-image: -moz-linear-gradient(bottom, rgb(20,40,80) 0%, rgb(170,170,150) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(20,40,80) 0%, rgb(170,170,150) 100%);
background-image: -ms-linear-gradient(bottom, rgb(20,40,80) 0%, rgb(170,170,150) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(20,40,80)),
color-stop(1, rgb(170,170,150))
);
}
/* ---------------------------------------------------------------- */
.navilink a {
display : inline-block ;
height : 100% ;
text-decoration : none ;
width : 100% ;
}
.navilink a:hover {
height : 100% ;
text-decoration : none ;
width : 100% ;
}
/* ---------------------------------------------------------------- */
.p44_navbar {
overflow: hidden;
/* background-color: #303030; */
background: rgba(0,0,0,1.00);
font-family: Arial, sans-serif;
}
.p44_navbar a {
float: left;
font-size: 5mm;
color: #eeeeee;
background-color: #353570;
text-align: center;
padding: 10px 20px;
text-decoration: none;
font-weight: bold;
width: 220px;
border: solid 1px #202020;
margin: 2px 2px 2px 2px;
}
.p44_dropdown {
float: left;
overflow: hidden;
}
.p44_dropdown .p44_dropbtn {
font-size: 5mm;
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;
}
/* ---------------------------------------------------------------- */
/* The ".ocbody" "margin-top" setting used here should be slightly */
/* greater than the PANEL_HEIGHT number used elsewhere. A differ- */
/* ence of 10 pixels should be about right. */
/* The value should be expressed in pixels (px). */
/* The "top" setting in ".nameline" and ".navanchor" here should be */
/* the negative of the "margin-top" setting. */
.navanchor { top : -150px ; }
.nameline { top : -150px ; }
.ocbody { margin-top : 150px ; }
/* ---------------------------------------------------------------- */
.ocbody { font-size : 5mm ; }
.HeaderTitle { font-size : 6mm ; }
.HeaderSubtitle { font-size : 6mm ; }
.PageHeader { font-size : 6mm ; }
.SiteDesc { font-size : 5mm ; }
.navilink { font-size : 5mm ; }
.regularstanza, .stanza450, .nbstanza450, .floatstanza {
width : 500px;
}
.stanza_txt {
width : 430px; /* try preceding minus 70px */
}
/* ---------------------------------------------------------------- */
/*
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) {
.nameline { top : -140px ; }
.navanchor { top : -140px ; }
.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) {
.nameline { top : -160px ; }
.navanchor { top : -160px ; }
.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 ; }
}
/* ---------------------------------------------------------------- */
.ocwarn {
text-align: justify;
color: #880000;
font-style : italic;
font-weight : bold;
}
.em {
font-style: italic;
}
pre {
line-height: normal;
}
.subHeader {
color : #ffffff;
margin : 0;
padding : 2.0mm 2.0mm 2.0mm 30px;
}
.subHeader a {
color: #ffffff;
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.1em;
font-weight: normal;
margin: 0;
padding: 10px 15px 10px 15px;
}
.baconheaderSubtitle {
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;
}
/* ---------------------------------------------------------------- */
.regularstanza, .stanza450, .nbstanza450, .floatstanza {
/* Set dynamically based on media queries: width */
text-align : left ;
padding : 10px ;
margin-right : 4mm ;
margin-bottom : 8mm ;
display : inline-block ;
border : 2px solid #000088 ;
vertical-align : top ;
}
.floatstanza {
color : #000088 ;
font-style : italic ;
font-weight : bold ;
}
.nbstanza450 {
border : none ;
}
.stanza_num {
vertical-align : top ;
display : inline-block ;
min-width : 1.7ch ;
margin-right : 0 ;
}
.stanza_txt {
display : inline-block ;
text-align : left ;
margin-left : 0 ;
}
/* ---------------------------------------------------------------- */
.notoppad {
padding-top : 0 ;
}
.bgoffwhite {
background-color : #eeeeee ;
}
/* ---------------------------------------------------------------- */
.rfloatstanza {
color : #000088 ;
font-style : italic ;
font-weight : bold ;
vertical-align : top ;
width : 350px ;
display : inline-block ;
margin-right : 2mm ;
margin-bottom : 3mm ;
padding : 2mm ;
padding-left : 0mm ;
}
.stanza400 {
color : #000088 ;
font-style : italic ;
font-weight : bold ;
vertical-align : top ;
width : 400px ;
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 ; */
}
/* ---------------------------------------------------------------- */
.ocimgthumb {
display: table-cell;
float: left;
height: 290px; /* thumbnail image height plus 40px */
width: 250px; /* same as thumbnail image */
padding: 0px;
margin: 15px;
xborder-style: solid;
xborder-width: 1px;
text-align: left;
}
.thumblabelint {
background-color : #ffffff ;
font-size : 16px ;
font-weight : normal ;
margin : 0 ;
padding : 1mm ;
text-align : justify ;
vertical-align : top ;
width : 248px ; /* thumbnail image - 2px */
}
.maplink {
display: table-cell;
float: left;
height: 2.5em;
width: 7em;
padding: 6px;
margin: 0em;
border-style: solid;
border-width: 1px;
text-align: left;
}
.altnav {
background-color: #000022;
color: #ffffff;
display: table-cell;
float: left;
height: 2.5em;
width: 7em;
padding: 6px;
margin: 0em;
border-style: solid;
border-width: 1px;
text-align: left;
}
.maplinkw {
display: table-cell;
float: left;
height: 1em;
width: 8em;
padding: 6px;
margin: 0em;
border-style: solid;
border-width: 1px;
text-align: left;
}
.maplinkx {
display: table-cell;
float: left;
height: 1em;
width: 10em;
padding: 6px;
margin: 0em;
border-style: solid;
border-width: 1px;
text-align: left;
}
.nodec {
text-decoration: none;
}
.occenter {
margin-left: auto;
margin-right: auto;
}
.left {
text-align: left;
}
/* T R B L */
.oclabelant {
margin : 0 5mm 0 5mm;
}
.oclabelint {
background-color : #ffffff ;
color : #aa5103 ;
font-size : small ;
font-weight : bold ;
min-width : 320px ;
margin : 0 ;
padding : 1mm 0 1mm 0 ;
text-align : justify ;
vertical-align : top ;
width : 100% ;
}
.icotwitter {
display : inline-block ;
width : 75px ;
margin-right : 15px ;
vertical-align : top ;
}
.left {
text-align : left;
}
.nojustify {
text-align : left;
}
.occontent {
padding-left : 30px;
padding-right : 30px;
padding-bottom : 1px;
}