/*	base.css 160415,20160312,20150201,20110509 copyright wedu.biz

<link href="./css/base.css" rel="stylesheet" type="text/css"
media="screen, handheld" /><!-- media="all" -->

 */

body {
    background-color: #000000;
    color: #FFFFFF;
    font-family: 'dejavu sans', sans-serif, segoe, 'century gothic', Helvetica;
    font-size: 16px;
    margin: 0;
    padding: 0;
    --mastHeight: 14em; /* height of sticky header */
    scroll-padding-top: var(--mastHeight, 70px); /* 04/05/19 Chromium */
}    /* font-family: Verdana, Geneva, Arial, Helvetica; */
/*
  * ,
    *::before ,
    *::after {
        box-sizing: border-box;
    }
*/

a {display:inline-block; font-size:1.2em; padding:.75em .5em;}
a:link ,
a:visited ,
a:active {color: #00FFFF;}

img, video {height: auto; max-width: 100%;}
video {cursor: pointer; z-index: 2018;}
#outerwrap {width: 100%;position: relative;}
#interwrap {
    margin: 0 0 1em;
    position: relative;
}

#TOP {height: 5em;}
  /* min-height: 5.5em; margin: 0 auto 1em auto; position: relative; width: 100%; */

#mast {
    background-color: #000;
    padding-top: 0.5em;
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
    max-width: 1920px;
    z-index: 1947;
}/* background-color: #4d4d4d;  dark gray #mast h1 {float:left; margin-top:0; width: 70%;}*/

details {
  margin: 1rem;
}
summary {
  cursor: pointer;
  padding: .8em;
}  /* font-weight: bold; */

/* 05/2019 example, the following rule creates a 2-line drop-letter
 on every paragraph following a level-2 header.
 Only applies to block containers. (initial-letter has little support)
        h2 + p::first-letter {initial-letter: 2;}
*/
@supports (initial-letter: 1) or (-webkit-initial-letter: 1) {
   
} /* your initial-letter styles here */

@media only screen and (min-width: 800px) {
    /* set paragraph styles for larger screens */
    p {font-size: 1.25em;}
}/* set drop cap styles for larger screens
    p::first-letter {
        initial-letter: 3 2;
        margin: 1em .5em 0 0;
    }
*/

.header {
    color: #1E90FF;/* a red #FE2763; #FF0000 red; #0000FF;blue; */
    font-family: sans-serif, 'century gothic', Verdana, Geneva, Arial, Helvetica;
    font-size: 2.5em;
    font-weight: bold;
    padding-bottom: 13px;
}/* background-color: var(--accent-background, #0000FF); float: right;
 max-width: 248px; padding: 0;1em;  position: relative; line-height: inherit; */

.title {
    color: #1E90FF;
    display: inline;
    font-family: sans-serif;
    font-size: 8rem;
    font-weight: 400;
    margin: 0;
    padding-bottom: 15px;
    text-align: center;
    text-transform: uppercase;
} /* color: rgba(0, 0, 0,0.3); */
.title::first-letter {font-size: 128%;}
.title::first-line {line-height: 1em;}
.dropcase {vertical-align: text-bottom;}
.raisecase {vertical-align: text-top;}

.subtitle {font-size: 1.5rem;}

@media (min-width: 1598px) {
    .subtitle {font-size: calc(2.75rem + 2.1vw);}
}
@media (max-width: 1597px) { /* less than */
    .title {font-size: calc(3.525rem + 3.3vw);}
    .subtitle {font-size: calc(2.425rem + 2.1vw);}
}
@media (max-width: 1202px) { /* less than */
    .title {font-size: calc(2.525rem + 3.3vw);}
    .subtitle {font-size: calc(1.425rem + 2.1vw);}
}
@media (max-width: 902px) { /* less than */
    .title {font-size: calc(1.525rem + 3.3vw);}
    .subtitle {font-size: calc(1.425rem + 2.1vw);}
}
@media (max-width: 684px) { /* less than */
    .title {
        display: inline;
        font-size: calc(1.325rem + 1.0vw);
    }
    .subtitle {font-size: calc(1.125rem + 1.1vw);}
}

.quite {text-decoration: none;}

.quitelink {
    font-size: 0.8em;
}
.quitelink a {
    display: inline-block;
    color: #DDDBDB;
    padding: .8em;
}
.quitelink a:hover {
    background-color: green;
    color: #ffffff;
}/* background-color: #A020F0; */

#ccol0, #ccol1, #ccol2, #ccol3, #ccol4, #mymsg {
    margin: 0 4px;
    min-width: 15.5em;
    max-width: 816px;
}
#ccol1 {
    text-align: center;
} /* background-color: var(--accent-background);
    color: var(--first-color); */
#ccol1 h3 {margin: 0 4px}
#ccol4 {font-weight: bold}
/* shape-outside: url(../images/100_1772.jpg);*/

#footer {
    margin: 1em 0 0 0;
    max-width: 1920px;
    position: relative;
    text-align: center;
} /* width: 100%;*/

.myhr {
    background: #000;
    background: linear-gradient(to right, #a33, #ebb, #a33)
            center / 100% 1px no-repeat, 
        linear-gradient(to right, #a33, transparent 25%, transparent 75%, #a33)
            center / 100% 1em no-repeat;
    border: 0;
    display: block;
    width: 100%;
    height: 1.5em;
}

#mycontent {
    margin: 18px auto;
    position: relative;
} /* border-top: 2px solid; float: left; Must have to prevent covering up #myLefts. */

#myLefts {text-align: center;}
#myRights {margin: auto;}

#myend {
    background-attachment: scroll;
    background-image: url("../images/amst.jpg");/* 192x1440 */
    background-position: center center;
    background-position: center bottom;
    background-repeat: no-repeat;
    /* background-size: 100% auto; contain; cover; 100%; */
    background-size: contain;
    height: 400px;
    position: relative;
    padding: 0 4px;
}
#mymsg {
    margin: 0 auto;
    width: 98%;
}
#showrap { margin: 20px auto; text-align: center;}
#myshow {
    height: auto;
    margin: 1em;
    max-height: 640px;
    max-width:480px;
} /* width: 98%; z-index:13;
 #myshow a {	text-decoration: none; } Not using '<a>' now. */

#menu {margin: auto;}
#menu a:link, #menu a:visited {
    background-color: #000000;
    color: #ffffff;
}
#nav {
    padding: 1em 8px 8px 8px;
} /* margin-top: 8px;  background:gray; border:1px red;    text-align: center;
   background-color: #CEC3C3; opacity: 0.5;     clear:both; */

#nav li { display: inline-block; }

#pagewrap {
    clear: both;
    margin: 1.0em 4px 1.0em;
    position: relative;
} /* background-color: #000;	color: #DDDBDB;
 float: left; MUST HAVE to NOT cover Menu above! */

#thesign {
    display: none;
} /* Comment out for thesign display. Only display with print. */

.bhmenu {
    border: 0;
    clear: left;
    font-size: 0.8em;
    font-weight: bold;
    margin: 2px;
    padding: 0;
    position: relative;
    text-align: center;
} /* bottom horizontal box menu for a list; font-family: arial, helvetica, sans-serif;
    background-color: green; text-decoration: none; */
.bhmenu ul {
    list-style-type: none; /* we donot want to view the list as a list */
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    text-align: center;
} /*  Note:  line-height must be 1.0 or 1.5 or 2.0 for Mozilla
 globally SET the menu's item spacing.
 SET to center, left, or right to align as desired */
.bhmenu li {
    display: inline;
    display: inline-block; /* keep from breakup, maintain spacing */
    height: 24px;
    margin: 0;
    padding: 8px;
} /* float: left;  side-by-side margin: 18px 6px;
 display: inline-block;  keep from breakup, maintain spacing */
.bhmenu a {
    padding: 4px;
    text-decoration: none;
} /* border: solid 1px #ffffff; color: #ffffff;
 display: block; margin: 0 4px 6px 4px; */
.bhmenu a:link,
.bhmenu a:visited {
    color: #ffffff;
}
.bhmenu a:hover {
    background-color: green; /* #A020F0; */
    color: #ffffff;
    padding-bottom: 2px; /* Decrease from 4px for a pushup affect. */
    padding-top: 4px; /* Decrease top pad to match border increase. */
} /* border-top-width: 2px; border-top-color: #ffffff; border-bottom-color: #00FF00;
    Stop movement by keeping top padding and border equal to a: */
.bhmenu a:active {
    background-color: yellow;
    color: #ffffff;
}
/* end bottom horizontal box menu */

.bgrd {
    background-image: url("../images/stmarkssquare.jpg");
    background-position: center center;/* 10% 0%;*/
    background-repeat: no-repeat;
    background-size: 100% auto;/*320px auto;*/
    max-width: 100%;/*320px;*/
    margin: 0 auto;
}

.catalog3 {
    background-image: url(../images/catalog2012.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 8px;
}

.copy {
    clear: left;
    font-size: 0.8em;
    margin: 24px 0 2px 0;
    text-align: center;
}
.copy p {margin: 1em auto; max-width: 550px;}


.drm {
    color:#FF9999;
    font-size: 0.8em;
    font-weight: bold;
    max-width: 550px;
    margin: 1em auto;
    padding: 6px;
}

.emicon {
    vertical-align: middle;
}

.floatimg {margin: 0 auto; padding: 8px; text-align: center; width: 96%;}

.img01 {
    border: 0;
    width: 99%;
    height: auto;
    width: 207px;
    height: 138px;
}/* max-width: 240px; ie 8 trouble	max-height: auto;*/
.img02 {
    border: 0;
    width: 99.8%;
    height: auto;
    width: 130px;
    height: 50px;
}/* margin: 6px; max-width: 207px; max-height: auto;*/

/* .imgLink { text-decoration: none; } */
.imgtitle {
    font-size: 0.8em;
}

.hblocks li {
    display: inline;
    display: inline-block;
    margin: 1em;
    padding: 8px;
    vertical-align: top;
}

.info {
    color: #0080FF;/* lighter blue */
    font-size: 1.2em;
    font-weight: bold;
}/* margin: auto; 	width: 277px; */
.info ul {list-style-type: none; padding: 0; margin: 1em 0}
.info li {margin: 1em 1em 2em 1em;}
/* to center use margin: 12px auto; 20px auto; and width: 276px; */
.info a:link {color: #0080FF; padding: .8em .4em;}
.info a:visited {color: #0080FF;}
.info a:hover {
    background-color: green; /* #A020F0; */
    color: #ffffff;
}

.menub {
    color: #0080FF;
    font-size: 1.2em;
    font-weight: bold;
    margin: 1em;
    padding: 8px;
}
.menub ul {
    list-style-type: none; padding: 0; margin: 1em 0;
}
.menub li {
    display: inline;
    display: inline-block;
    margin: 0.4em 0.6em;
    vertical-align: top;
}
.menub a:link ,
.menub a:visited {
    color: #0080FF;
}
.menub a:hover {
    background-color: green;
    color: #ffffff;
}

.ititle2 {
    background-color: #e6e6fa;
    box-shadow: -2px 2px 18px #e6e6fa;
    color: #1a1a1a;
    margin: 0 2%;
    max-width: 280px;
    padding: 4px;
    position: absolute;/* pops over content */
    z-index: 33;
}/* -webkit-box-shadow: -2px 2px 18px #e6e6fa; */
a ~ .ititle2 {display:none;}
a:hover ~ .ititle2{display: block;}

.linkfb {
    background-color: #3B5998;
    border-radius: 4px;
    color: #fff !important;
    font-family: sans-serif;
    font-size: 3.0em;
    font-weight: bold;
    line-height: 0.7em;
    padding: 14px 8px 0 24px !important;
    text-decoration: none;
}

.poweredBy {
    background:#000000;
    color: #9C9C9C;
    font-size: 1.1em;
    font-weight: 300;
    letter-spacing: 0.05em;
    line-height: 29px;
    margin-top: 0.8em;
}/* #707070 position: absolute; right: 0;  top: 5px; width: 223px;*/

.show {
    border: 0; /* 3em groove black;background-color: black; */
    height: auto;
    width: 99.0%;
}

.pbody {
    background: #000;
    color:#00FF00;
    font-family: 'century gothic', Verdana, Arial, Helvetica, sans-serif;
}/* font-size:0.9em; */
.bluetxem {color: #52A7FF; font-size: 1.2em; font-weight: bold}
/* color: #52A7FF;#0080FF; */
.darkblue {color: #2273C4; font-weight: bold}/*#4699EC;#336699;*/
.hottext {color: #F92B0B}
.hottxt {color: #EE4A1C}/* another red orange */
.hottxt2 {color: #FF0000}
.lightblue {color: #3399FF}
.linkgreen {color: green; font-size: 0.9em}
.linkwhite {color: #FFFFFF;	font-size: 0.9em}
.txcenter {text-align: center}
.whiteon {color: #FFFFFF}
.underline a {text-decoration: underline}
.smallwhite { font-size: 0.7em; color: #FFFFFF}


/* Begin popout classes - October 2013 */

.popout {position: relative;}/*	width: 100%;
    div.popout a:hover ~ .hover-popup { display: block; }
    .popout-link {
    background: url(../images/cat13cvr.png) no-repeat center center;
        center center fixed; -moz-background-size: cover;
    background-size: cover;	-o-background-size: cover;	-webkit-background-size: cover;*/
.popout-link {text-align: center;}
.popout-link a {
    text-decoration: underline;
}
.popout-link img {
    height: auto;
    max-height: 300px;/* for small screens */
    width: auto;
}
.popout-item {
    background-color: #BFBFBF;/*#E6E6FA;*/
    border: 1px solid #999999;
    box-shadow: 1px 1px 10px #E6E6FA;/*#7F7F7F;*/
    padding: 8px;
    position: absolute;
    left: -7px;
    top: 0;
    width: 100%;
    z-index: 37;
}/*-webkit-box-shadow: 1px 1px 10px #E6E6FA;
.popout-item:hover {max-width: 316px;}*/
.popout-item a {color: #00008B}
.popout-item a.close {
    background-color: #BFBFBF;
    color: red;
    position: absolute;
    top: -2.7em;/* 1.875rem;*/
    right: 0.1rem;/* 2.8125rem;*/
    padding: .75em .86em;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    z-index: 39;
}
/*  display: none; overflow: hidden; removes underline bar
   padding: 0;    width: 1.875rem; height: 1.875rem; text-indent: 100%; hides text */
.popout-item a.close::before {content: "\0274c";}/* red X */
.popout-item a.close:hover {display: none;}
.popout-item a:hover {color: #000;}
.popout-img {border: 0; height: auto; width: 99.9%;}
    /* max-height: 50%; max-width: 50%;  276px;*/
.popout-article {padding: 4px;	text-align: left;}
.popout-title {color: #FF0000; font-size:2em; text-align: center;}
  /* centered by #myLefts, background-color: #BFBFBF;*/
.popout-title:before {content: open-quote;}
.popout-title:after {content: close-quote;}
.popout-title-src {text-decoration: underline;}
.popout-title-txt {color: #EE4A1C;}
.popout-close {
    background-color: #BFBFBF;
    cursor: pointer;
    margin: 0 0 0 2px;
    padding: 2px 8px 9px 8px;
    position: absolute;
    top: -1.7em;/*0.1em; place on top of item; -1.1em; place above item */
    /*right: 0.2rem;*/
    z-index: 47;
}/* border-radius: 5px 5px 0 0;
left: 1px; right: 1px; creates bar
border-radius-stroke: 5px; never used - moz error
box-shadow: 1px -1px 10px #E6E6FA; color: #fff;*/
.popout-close a {text-decoration: none;}
/*    .popout-close is needed for touch to close .popout-item
by placing it outside of .popout-item; Not needed on desktop screens.
This needs to be 1 less than popout-item top.
Adjust tops to keep these in sync, default 0.2 -1.2em.
.popout-item {	top: 0.2em;}	.popout-close { top: -1.2em; } */

.popout-hover {display: none;}
.popout-link:hover ~ .popout-hover, .popout-item:hover {display: block;}
/* end popout classes */


/* Menubars 3 horizontal bars symbol &#9776; */
.menuicon {
    color: #F9F4F4;
    font-size: 2em;
    padding: 0 0.4em;
} /* background-color: #E5E5E5;
    border: 1px solid #444;
    border-radius: 5px;
    color: #FF0000; blue; */
.menuicon:hover { cursor: pointer;}
    /* background: #bfbfbf; gray */
.menutext {font-size: .6em; padding-left: .4em;}


.popmenu {
    background: #000;
    position: absolute;
    left: 0;
    top: 3em;
    z-index: 37;
}
.popmenu-link {display: inline-block; float:right; padding: 1px 1px 8px 1px;}
.popmenu-link a:link , .popmenu-link a:hover , .popmenu-link a:visited {
    cursor: pointer;
    text-decoration: none;
}
.popmenu-link:hover {border: 1px solid gray; padding: 0 0 7px 0;}
.popmenu-exit {font-size: 2em;}
.popmenu-hover, .popmenu-exit {display: none;}

.popmenu-link:hover ~ .popmenu-exit {display: inline-block;}
.popmenu-link:hover ~ .popmenu-hover, .popmenu:hover {
    display: block;
    box-shadow: 7px 1px 5px;
}/* border: 1px darkgray solid;
 .popmenu-link .small {font-size: 0.4em; font-weight: bold;} */


@media (min-width: 500px) {
    .popmenu {top: 4em;}
}

@media screen and (min-width: 800px) {
    #mast {height: auto}
    #nav {padding: 8px}
    .popmenu-link {display: none}
    .popmenu, .popmenu-hover {display: block; top: 0; position: relative;}
    .bhmenu {display: block}
    #TOP {height: 8em;}
}
@media (min-width: 900px) {
    #TOP {height: 9em;}
}
@media (min-width: 1170px) {
    #TOP {height: var(--mastHeight, 62px)}
}

/* Suppress our whole menu when not an interactive mode. */
/*	@media print, projection (when printing, etc.) */
@media print {
    body {font-size: 10pt;}
    #mast {position: relative;}
    .popmenu-link {visibility: hidden;}
    .header {font-size: 4.0em;}
    .bhmenu, .prhide, #myend {display: none;}
    .menubtn, #mymsg, #thesign {display: block;}
}/* float: right; visibility: visible; img { max-width: 320px; }*/

/* eof base.css */

/* gradient.css Copyright 2012 geneDumas at sbcglobal dot net
    20160415 2012201
*/
.gradbtn {
    float: none;/* play nicely with others */
    font-family: 'Courier New', Courier, Verdana, Helvetica;
    /* font-family: Helvetica, Verdana, 'Courier New', Courier; */
    font-size: 1.0em; /* this (and also below) sets the menu's font size */
    font-weight: bold;
    /* height: 3.3125em; only for bar does not wrap with pg.
    margin: 0 0 0 8px; padding: 0 0 0 8px; text-align: left; */
    position: relative;	/* establish a menu-relative positioning context */
}/* width: 100%; want the menu to fill the available space */

/* Horizonal Menu Gradient added UL tag for IE 8 and less. */
.gradbtn ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}/* Set text-align left, center, or right to align the menu as desired */
.gradbtn ul li {
    display: block;
    display: inline;
    margin: 4px 0 4px 0;
    text-align: center;
}/* display: inline-block; this is the same as inline with float: left; */

/* Change default background color for non-css3 browsers.
    #7FC2F7 lite blue #3282c2 bluer */
#menu a:link, #menu a:visited {
    background-color: #3282c2;
    color: #fff;
}
.gradbtn ul li a {
    text-decoration: none;
    padding: 3px 7px;
    margin-right: 5px;
    margin-bottom: 5px;
    display: block;
    border: 1px solid gray;
    border-radius: 8px; /* w3c border radius */
    /* -moz-border-radius: 8px; mozilla border radius */
    /* -webkit-border-radius: 8px; webkit border radius */
    box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
    /* -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); mozilla box shadow */
    /* -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); webkit box shadow */

/* Cross-Browser CSS Gradient */
    /* for firefox 3.6+ start, from color, to color */
    background: -moz-linear-gradient(top, #a4ccec, #72a6d4);
    /* mozilla gradient background */
    background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4);
    /* for IE lt 10
      Creates square li background. 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a4ccec', endColorstr='#72a6d4');
       IE 10 The first color stop top-right corner defines a gradient line
     to the bottom-left corner color stop:
    1. shade of yellow 2. shade of green at halfway 3. shade of blue at 80% (0.8)
    along the gradient line. Starting point: top or bottom and left or right */
    background: -ms-linear-gradient(top right, #fff133 0%, #16D611 50%, #00a3ef 80%);
    /* for webkit browsers from gray to black to to bottom */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
    /* webkit gradient background */
    background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4));
    background: linear-gradient(180deg, #a4ccec 5%, #72a6d4, #3282c2 45%, #357cbd 85%, #72a6d4);
}/*  #357CBD #7FC2F7 #3282c2
    background: linear-gradient(#a4ccec, #72a6d4); (#e66465, #9198e5); 
    background: linear-gradient(180deg, #a4ccec, #72a6d4, 25%, #3282c2, 45%, #357cbd, 85%, #72a6d4);
 */
.gradbtn ul li:hover a,
.gradbtn ul li a:hover {
    background-color: green;
    color: #ffffff;/* #7F7F7F; gray */
    background: green;
    background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
    background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690));
    background: linear-gradient(180deg, #7ad690 25%, #3ec05c 45%, #298a40 85%, #3ec05c, #7ad690);
}/* mouse over link */
.gradbtn ul li a:visited {
    /*color: #000000;*/
}
.gradbtn ul li a:active {
    background-color: yellow;
    color: #000;
}/* selected link #EEFF00; lightyellow */

/* .btnoptions  Change .gradbtn properties above; */
.btnoptions {
    /* add space before margin-left: 2em; */
    margin-left: 8px;
}/* display: inline from center to left align; */
.btnoptions ul li {
    float: left; /* for horzional buttons that wrap */
}/* float: none; for wide bars stacked */
.btnoptions ul li a {	
    font-size: 1.5em; line-height: 2.0em;
}/* Button Size:   Normal 
    font-size: 1.5em; line-height: 2.5em;  Medium
    font-size: 3.0em; line-height: 2.0em;  Large
    Default Changes
     vertical-align: bottom;
     Copy here one of the theme options. Default: blue */

/* gradient.css Copyright 2012 genedumas at sbcglobal dot net */