/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
/* $$$$$$$$$$$$$$$$$$$$$$$$$$ general $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
html{
    height: 100%;
}
body{
    height: 100%;
    background-color: #90ee90; 
    line-height: 2em;
/*    font-weight: bold; */
    font-family: Arial, sans-serif;
    font-size: large;
}
h1, h2, h3, h4, h5, h6{
    color: #f5f5f5;  
    font-weight: bolder;
    margin: 1px;
    padding: 1px;
}
.center {
  margin: auto;
  width: 60%;
/*  border: 3px solid #73AD21; */
  padding: 10px;
}
#container{
    width: 100%;
    text-align: center;
}
#header{
    background: #294a58;
    text-align: center;
}
#nav{
    text-align: center;
}
nav{	      
	margin: 0;
	border: 0;
}
nav ul{
	margin: 0;
	border: 0;
	padding: 0;
	position: relative;     
	list-style: none;
	display: inline-table;
	vertical-align: bottom;}
nav ul li{
		float: left;
              margin: 0 20px;
              border: 0;
              padding: 0;
		}
nav a{
/*    color: #829084; */
/*    color: #ffffff; */
/*	color: 00bfa8;*/
	color: #fb7e21;
/*    font-style: normal; */
  font-size: 25px;
	  letter-spacing: 0.1em;
  margin-bottom: 0.3em;
    text-decoration: none;
}
a:hover{
    background: #0000ff;
}
#footer{
    color: #294a58;
    font-weight: bold;
    font-size: 200%;
    line-height: 100%;
    font-family: Helvetica, Verdana, serif;
    text-align: center;
}

/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
/* $$$$$$$$$$$$$$$$$$$$$$$$$$ layout $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
.txtleft{
    text-align: left;
}
.txtcenter{
    text-align: center;
}
.txtright{
    text-align: right;
}
div{
    width: 100%;
    margin: 0px;
}
div.cyan{
    background: cyan;
    padding-top: 1em;
}
div.wrapper{
    word-wrap: break-word;
    text-align: center;
}
div.wrapperL{
    word-wrap: break-word;
    text-align: left;
}
div.wrappergray{
    word-wrap: break-word;
    text-align: center;
    background: #817980;
}
div.wrappergreen{
    word-wrap: break-word;
    text-align: center;
    background: #1bff1b;
}
/*  div.wrapper h2, div.wrapper h3, div.wrapper h4 {
    color: #740014;
} */
div.xapper{
    background: #0af50a;
    margin: 5em auto;
}
div.vtable{
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}
div.vcenter{
    display: table-cell;
    vertical-align: middle;
}

.loaf{
    display: inline-block;
    vertical-align: top;
/*    border-style: solid; */
/*    border-color: black; */
    border-width: thick; 
}

.half{
    width: 7%;
}
.one{
    width: 10%;
}
.two{                                    /* !!!!!!!!!!!!!!! */
    width: 20%;
}
.three{
    width: 30%;
}
.four{
    width: 40%;
}
.five{
    width: 52%;
}
.six{
    width: 60%;
}
.seven{
    width: 73%;
}
.eight{
    width: 80%;
}
.nine{
    width: 90%;
}
.ten{
    width: 100%;
}

.oneh{
    height: 50px;
}
.twoh{                                 /* !!!!!!!!!!!!!!! */
    height: 75px;
}
.threeh{
    height: 100px;
}
.fourh{
    height: 125px;
}
.fiveh{
    height: 150px;
}
.sixh{
    height: 175px;
}
.sevenh{
    height: 200px;
}
.eighth{
    height: 225px;
}
.nineh{
    height: 250px;
}
.tenh{
    height: 300px;
}
 
/* center a line of texts vertically according to... */
/* height of parent div, say, oneh, twoh, etc. */
.onelineh{
    line-height: 50px;
}
.twolineh{                                 /* !!!!!!!!!!!!!!! */
    line-height: 75px;
}
.threelineh{
    line-height: 100px;
}
.fourlineh{
    line-height: 125px;
}
.fivelineh{
    line-height: 150px;
}
.sixlineh{
    line-height: 175px;
}
.sevenlineh{
    line-height: 200px;
}
.eightlineh{
    line-height: 225px;
}
.ninelineh{
    line-height: 250px;
}
.tenlineh{
    line-height: 300px;
}

.txtone{
    font-size: 20px;
}
.txttwo{
    font-size: 25px;
}
.txtthree{
    font-size: 30px;
}

/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
/* $$$$$$$$$$$$$$$$$$$$$$$$ decorations $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
.choco{
    color: #a55318;
}
.lake{
    color: #186aa5;
}
.forest{
    color: #18a553;
}
.night{
    color: black;
}
.navy{
    color: #000080;
}
.peach{
    color: #ffc0eb;
}
.boold{
    font-weight: 600;
}
.boolder{
    font-weight: 800;
}

.button{
    width: 100%;
    height: 100%;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
    font-size: 145%;
    padding: 1.5% 0.5%;
    border: 5.5px solid #00bd50;
    border-radius: 0.5em;
    -webkit-border-radius: 0.5em;                  
    -moz-border-radius: 0.5em;                
    -o-border-radius: 0.5em;                  
/*    box-shadow:      5px 2px 5px 5px #bd006d; */
/*    -moz-box-shadow: 5px 2px 5px 5px #bd006d;  */
/*    -webkit-box-shadow: 5px 2px 5px 5px #bd006d;  */
/*    -o-box-shadow: 5px 2px 5px 5px #bd006d; */
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    color: #00ff00; /* border: green */
    color: #4630b9; /* text(offset):   some blue */
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    font-family: "Arial Black", Arial, sans-serif;
}
/* widths are set due to padding and other unknown spaces... */
.onebtn{
    width: 99%;
}
.twobtn{
    width: 45%; /* 47%? 48%? */
}
.threebtn{
    width: 31%;
}
.fourbtn{
    width: 23%;         
}
.fivebtn{
    width: 18%;
}
.sixbtn{
    width: 14.5%;
}
.modalDialog{
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 5;
    right: 10;
    bottom: 10;
    left: 10;
    background: #2c373b;
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    -o-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog h1, .modalDialog h2, .modalDialog h3, .modalDialog h4,.modalDialog h5{
    color: #003b21;
}
.modalDialog:target{
    opacity: 1;
    pointer-events: auto;
}
.modalDialog>div{
    width: 800px;
    height: 700px;
    position: relative;
    margin: 1% auto;
    padding: 5px 5px 5px 5px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
.close{
    background: #ff9100;
    color: #ffffff;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-size: large;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -o-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 2px 3px #000;
    -webkit-box-shadow: 1px 2px 3px #000;
    -o-box-shadow: 1px 2px 3px #000;
    box-shadow: 1px 2px 3px #000;
}
.button:hover{
    color: white;
}
.close:hover{
    background: #00eeff;
}

ul{
    line-height: 1.35em;
    margin: 10px;
}

ul.row{
    list-style-type: none;
    padding: 0;
    border: 1px solid #000080;  /*box*/
}

ul.row li{
    padding: 5px 15px;
    border-bottom: 1px solid #000080; /*inline*/
}

ul.row li:last-child{
    border-bottom: none
}