:root {
--bg:rgb(48,97,86);
--bgalpha:rgba(245,233,212,0.5);
--primary:#487C3F;
--txt:#3a2c1b;
--txtinvert:#EEF4E3; /*dull yellowish green*/
--comp1:rgb(114,176,55); /*slight dark parrot green*/
--comp2:rgb(138,194,65); /*parrot green*/
--comp3:#066435;  /*dark green*/
--comp4:#64964B; /*dark parrot green for txt*/
color:
}
body,html,textarea{
font-family:'Quicksand', sans-serif;font-size:18px;
}
body,html{
position:relative;
height:100%;
width:100%;
overflow:;
padding: 0;margin: 0; 
color:#111;
}
.fnta{
font-family: 'Playfair Display', serif;	
}
.fntb{
font-family: 'Rochester', cursive;	
}
.pageWrap{
position:relative;
width:100%;
padding:2% 5%;
}
.float{
display:inline-block;
margin-right:10px;
vertical-align:top;
}
#pageHead{
position:fixed;
top:0px;left:0px;
height:7vmax;
width:100%;
transition:background 200ms ease,box-shadow 300ms;
z-index:1000;
display:flex;
align-items:center;
}
#pageHead.sticky{
/*top:calc(-1 * 6vmax);*/
background:rgb(255,255,255,0.95);
box-shadow:0px 1px 5px 0px rgb(0,0,0,0.1);
border-bottom:1px solid #EEEEE;
}
#pageHead #logo{
position:relative;
flex:auto;
z-index:320;
text-align:center;
transition:width 300ms,height 300ms,padding 300ms;
height: 6vmax;
width: 30vw;
}
#pageHead #logo a{
position: absolute;
height: 9vmax;
width: 100%;
transform: translateX(-50%);
}
#pageHead #logo img{
opacity:1;
transition:opacity 300ms;
height: 100%;
width:auto;
}
#pageHead.sticky #logo img{
/*opacity:0;*/
}
#logo_title{
color:#152fa9;
}
#app_menu,#back_menu,#tag_menu{
display:none;
}
#adminMenu{
padding:5px;
display:flex;
font-size:80%;
justify-content:center;
}
#adminMenu li{
padding:10px;
background-color:rgb(255,255,255,0.2);
color:rgb(0,0,0);
}
#adminMenu li.title{
filter:invert(0.5);
}
#pageMenu{
z-index:305;
display:block;
text-align:center;
padding-right: 30px;
flex: 70%;
}
#pageMenu>ul{
position:relative;
display:table;
width:100%;
margin:5px auto;
}
#pageMenu>ul>li{
position:relative;	
display:table-cell;
vertical-align:bottom;
text-align:center;
font-size:100%;
font-weight:bold;
}
#pageMenu a,#pageMenu span{
font-weight:bold;
display:inline-block;
color:#28392D;
padding:10px 5px;
margin:0px 1px;
width:100%;
border-radius:3px;moz-border-radius:3px;webkit-border-radius:3px;
/*fade transition*/
-webkit-transition: background-color 300ms ease;
-moz-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
transition: background-color 300ms ease;
}
#pageMenu a.active,#pageMenu a:hover{
color:#93A499;
}
.subMenu>ul{
position:absolute;
display:none;
background:#FFF;
width:100%;
box-shadow:0px 1px 5px 0px rgb(0,0,0,0.25);
text-align:left;
}
.subMenu:hover>ul{
display:flex;
flex-direction:column;
}
.subMenu a i{
width:25px;
}
#pageBody{
position:relative;
min-height:550px;
margin-top:10vmax;
padding:0 20px 20px 20px;
background:#FFF;
letter-spacing:0.5px;
}
#pageFoot{
background:var(--primary);
text-align:left;
color:#FFF;
}
#pageFoot .pageWrap{
display:flex;
align-items:center;
}
#pageFoot a{
color:#FFF;
}
#sitecredits{font-size:60%;}
#menuAdmin{
background:#F4E6D7;
padding:10px;
}
.adminedit{
display:inline-block;
padding:2px 5px;
background:#F4E6D7;
font-size:80%;
}
a{color:rgb(92,73,35); text-decoration: none; font-weight: normal;cursor:pointer;}
a:hover{color:#000;}
.none,.none:hover{
text-decoration:none !important;
border-bottom:none !important;
}
h1{
position:relative;
font-family:'Quicksand', sans-serif;
font-size:175%;
font-weight:bold;
font-style:normal;
color:var(--comp3);
}
h2{
font-family:'Quicksand', sans-serif;
color:#203527;
font-weight:bold;
font-size:140%;
margin:15px 0px 20px 0px;padding:0px;
color:var(--comp3);
}
h3{ 
font-family:'Quicksand', sans-serif;
font-style:normal;
color:var(--comp3);
font-size:130%;
font-weight:bold;
margin-bottom:5px;
padding:15px 0px 20px 0px;
line-height:30px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
ul.classic{margin-left:15px;}
ul.classic li{margin-left:15px;display:list-item;list-style:disc outside none;}
.table1 td{
padding:3px;
}
.tabs{
position:relative;
z-index:100;
}
.tabs li{
position:relative;
display:inline-block;
padding:10px 30px;
border:1px solid #AAA;
background:#EFEFEF;
cursor:pointer;
}
.tabs li.active{
position:relative;
border-bottom:1px solid #FFF;
border-top:2px solid #CC0000;
top:0px;
background:#FFF;
}
.tabContent{
z-index:90;
position:relative;
top:-1px;
border:1px solid #AAA;
padding:7px;
}
.tabContent>li{
display:none;
}
.navig1 {
color: #999999;
margin: 5px;
line-height:18px;
text-align:center;
}
.navig1 a {
font-size: 13px;
font-weight: bold;
color: #000000;

margin: 2px;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
border: 1px solid #C2B7AB;
}
.navig1 a:hover {
color:  #4F4539;
background-color: #E0DBD6;
border: 1px solid #999999;
}
.navig1 .active {
color: #C2B7AB;
background-color:#E7EBE0;
font-weight: bold;
font-size: 13px;
margin: 2px;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
border: 1px solid #C2B7AB;
}
.ackMsg span{
display:inline-block;
border:5px solid #FFF;
padding:10px 80px;
margin:20px;
border-radius:10px;moz-border-radius:10px;webkit-border-radius:10px;
font-size:600%;
background:#CCC;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
.box1{
border: 12px solid #FAFAFA;
background:#FFF;
padding:5px;
border-radius:4px;moz-border-radius:4px;webkit-border-radius:4px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
.box2 {
padding: 5px;
border: 2px solid #F2E6D2;
}
.box3{
background:#617361;
color:#FFF;
padding:10px;
border-radius:4px;moz-border-radius:4px;webkit-border-radius:4px;
}
.tablerow1 {
	border-bottom: 1px dotted #999999;
	padding: 10px 10px 10px 50px;
}
.b1{
	padding-left:12px;
	border-left:7px solid #DBE3DF;
}
.b1:hover{
	padding-left: 12px;
	border-left:7px solid #000;
}
.b2>li{
padding-left:12px;
border-left:7px solid #DBE3DF;
border-bottom: 1px dotted #999999;
padding:5px;
}
.b2>li:hover{
border-left:7px solid #000;
}
#list_content ul,ul#list_content{
display:flex;
flex-wrap:wrap;
justify-content:center;
}
#list_content li{
flex-basis:25%;
padding:2vmax;
}
#list_content li img{
max-height:15vmax;
height:auto;
width:100%;
object-fit:cover;
}
#list_content li b{
display:block;
}
#list_content li span{
font-size:80%;
}
#list_content a{
display:block;
color:#555;
}
#list_content a:hover{
color:#000;
}
.cols,.cols li{
display:flex;
padding:5px;
}
.responsive{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
}
.responsive>*{
padding:10px;
}
.tblresponsive tr td,.tblresponsive tr th{
padding:5px 10px;
border-bottom:1px solid #CCC;
}
.tblresponsive thead th{
border-bottom:2px solid #CCC;
background:#EEE;
font-weight:bold;
}
.tblresponsive thead th:first-child{
border-top-left-radius:10px;
}
.tblresponsive thead th:last-child{
border-top-right-radius:10px;
}
.tleft{text-align:left}
.tcenter{text-align:center}
.tright{text-align:right}
.cellmiddle{display:inline-block;vertical-align:middle;padding:5px;}
.c25p{width:25%;}.c33p{width:33%;}.c50p{width:50%;}.c75p{width:75%;}
.m5p{padding:5%;}.m10p{padding:10%;}.m15p{padding:15%;}.m20p{padding:20%;}
.clear{clear:both;}
.social-icons {display:flex;flex-direction:column;}
.social-icons ul{display:flex;}
.social-icons li{display:inline-block;vertical-align:middle;text-align:center;}
.social-icons a{display:block;transition:background-color 0.3s;padding:20px;}
.hmiddle{left:50%;transform:translate(-50%,0);}

/*form  components*/
#msgPage,.msgAck,.msgSuccess {
font-size: 12px;
font-weight: bold;
color:#003300;
margin: 5px;padding: 10px;
background:#CFDEC5;
border:1px dotted #EDD2C0;
border-radius:3px;moz-border-radius:3px;webkit-border-radius:3px;
}
.msgErr,.msgFail {
font-size: 12px;
font-weight: bold;
color: #CC0000;
margin: 2px;padding: 7px;
background:#F0E4BF;
border:1px dotted #EDD2C0;
border-radius:3px;moz-border-radius:3px;webkit-border-radius:3px;
}
.msgForm{
font-size: 12px;
font-weight: bold;
color: #CC0000;
margin:10px 0;padding: 10px;
background:#F5F88F;
border-radius:3px;moz-border-radius:3px;webkit-border-radius:3px;
}
.msgAck li,.msgSuccess li,.msgErr li,.msgFail li{
list-style-type:circle;
padding:3px 0px;
}
.msgTip{
font-size:85%;
}
.listDefault{
list-style:inside circle;
}
.listDefault li{
margin-left:15px;
list-style:inside circle;
display:list-item;
}
.listBasic li{
padding: 10px 0px;
}
.listBullets li{
list-style:outside circle;
padding: 10px 0px;
margin-left:25px;
}
::placeholder {font-family:Arial !important;color:#666 !important;font-weight:normal !important;}
input[type=submit],input[type=button]{
padding:5px 10px;
}
input[type=radio]{
position:relative;
top:2px;
margin-right:3px;
}
input[type=text],input[type=password],input[type=number],
select,textarea{
display:inline-block;
font-size:16px;
padding:10px;
border:1px solid #8E9DA8;
border-radius:5px;
width:100%;
background:transparent;
}
input:focus,texarea:focus,select:focus{
outline: none;
border-color:rgb(133,100,33) !important;
}
input[type=text]:hover,textarea:hover{background:rgb(255,255,255,0.4);}
input::placeholder,select.placeholder{
color:rgb(114,103,65);
}
button,.btnMain,
input[type=submit],input[type=button]{
display: inline-block;
padding:10px 20px !important;
outline: none;
border: none;
border-radius: 1.5em;
text-transform: uppercase;
background: linear-gradient(160deg,  var(--primary),rgb(0,0,0,0.7), var(--comp1));
color: #FFF;
text-shadow: 0 2px 2px var(--primary);
cursor: pointer;
transition: all .2s ease-in-out;
background-size: 500% 200%;
background-position:left top;
}
.btnMain:focus,.btnMain:hover,
input[type=submit]:hover,input[type=button]:hover{
background-position:bottom right;
color: #FFF;
}
.btnMain:active {
box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
inset 0 -2px 5px 1px #b17d10,
inset 0 -1px 1px 3px rgba(250,227,133,1);
}
select option.placeholder{
display:none;
}
select{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;	
min-width: 80px;
padding-right: 25px;
}
.dropdown{
display: inline-block;
position: relative;
}
.dropdown:before{
font-family: "Font Awesome 5 Free";
font-weight: 900; 
content: "\f150";
color: #AAA;
padding: 0px;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
text-align: center;
right: 5px;
pointer-events: none;
box-sizing: border-box;
}
input[readonly],input[disabled],select[readonly],
button[readonly],button[disabled],
select[disabled],textarea[disabled],
fieldset[disabled] input,fieldset[disabled] select,fieldset[disabled] textarea,fieldset[disabled] .prefix{
opacity:0.7;
background:#EFEFEF;
text-shadow:none;
color:#555;
}
.component{
width:100%;
}
fieldset {
border:1px solid #EEE;
padding:7px;
margin:7px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
fieldset legend{
font-size:14px;
font-weight:bold;
}
fieldset>ul>li{
padding:10px;
border-bottom:2px solid var(--primary);
}
fieldset>ul>li>label{
position:relative;
display:flex;
flex-wrap:wrap;
margin:3px 0px;
padding:3px 0px;
clear:both;
line-height:24px;
border-top:1px dotted #EEE;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
fieldset>ul>li>label>span,fieldset>ul>li>span{
min-width:200px;
flex:0 0 20%;
padding-left:20px;
padding-bottom:7px;
vertical-align:top;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
fieldset>ul>li>label>div,fieldset>ul>li>div{
flex:1 1 auto;
vertical-align:top;
padding-bottom:7px;
padding-right:5px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
fieldset .prefix{
display:inline-block;
border:1px solid #aaa;
border-radius:4px;
pointer-events: none;
opacity: 0.7; 
}
fieldset .prefix:before{
position:relative;
content: attr(prefix);
padding:0 0 0px 10px;
top:-1px;
}
fieldset .prefix input{
border:0;outline:none;
}
fieldset .clean{
background:none;border:none;
}
fieldset .custom{
padding:0 10px;
}
fieldset error{
position:relative;
display:block;
font-size:80%;
padding:0 10px;
color:red;
}

@media screen and (min-device-width:650px){ 
.monitoroff{display:none;}
.mobileon{display:none;}
}

/*site specific*/
h1{
overflow:hidden;
border-top:1px solid var(--comp3);
text-align:center;
}
h1:after{
position:absolute;
content:" ";
top:0px;left:-5vw;
animation:tofromagnet 30s linear alternate infinite;
width:5vw;height:3px;
background:var(--comp1);
}
@keyframes tofromagnet{
0%{left:-5vw;}
100%{left:105vw;}
}
#headTop{
position:absolute;
top:100%;
left:50%;transform:translateX(-50%);
z-index:310;
background:url("imgs/sun.png?4") no-repeat;
width:35vw;height:35vw;
background-size:contain;
filter:brightness(10%) hue-rotate(0deg);
/*animation:sunrise 5s linear forwards,sunshine 10s linear 7s infinite;*/
}
#logo small{display:block;font-size:60%;color:#000;}
#logo_title{
font-size:2vmax;
}
#footMenu{
font-size:85%;
display:flex;
}
.category{
font-size:60%;
display:block;
color:#AAA;
}
#footer-logo{
text-align:center;
}
#footer-logo img{
opacity:0.2;
object-fit:contain;
max-height:100px;
}