/* ======== css for main site ======== */

* {
 padding: 0;
 margin: 0;
}

body
{
 font-size: 100.01%;
 text-align:center;
 background-color: #E5ECFF;
}

#page
{
 font-size: 1em;
 width: 88%;
 max-width: 1000px;
 margin: 1em auto;
 margin-left: auto;
 margin-right: auto;
 margin-top: 0;
 text-align: left;
 border: 1px solid gray;
 background-color: #ffffff;
}

#banner
{
 padding: 1em;
 background: #333366;
}

#banner h1
{
 color: #ffffff;
 font-weight: bold;
 font-size: 1.4em;
 text-align: center;
 font-family: helvetica, geneva, arial, sans-serif;
}

#picture
{
 float: right;
 padding: 0;
 margin-right: 4em;
 color: blue;
 font-size: 0.8em;
 text-align: center;
 font-family: helvetica, geneva, arial, sans-serif;
}

#content
{
 text-align: left;
 padding: 2em;
 padding-bottom:1em;
 padding-top:0;
}

#content p
{
 padding-top: 1em;
 padding-bottom: 1em;
}

img
{
 border: none;
 margin: 0.5em;
}

.floatR
{
 float: right;
}

.floatL
{
 float: left;
}

.right
{
 text-align: right;
}

.left
{
 text-align: left;
}

.center
{
 text-align: center;
}

.clear
{
 clear: both;
}

h1, h2, h3
{
 margin: 1em;
 margin-left: 0;
 font-family: helvetica, geneva, arial, sans-serif;
}

h1
{
 color: #0354c2;
 font-weight: bold;
 font-size: 1.4em;
}

h2
{
 color:#0354c2;
 font-size: 1.1em;
}

h3
{
 color:#0354c2;
 font-size: 1em;
}

.red
{
 color: #ff0000;
}

.white
{
 color: #fff;
}

.c1
{
 color: green;
 font-weight: bold;
}

.c2
{
 color: blue;
}

.c3
{
 color: black;
}

.c4
{
 color: orange;
}

.c5
{
 color: red;
 font-weight: bold;
}

.w5
{
 width: 5%;
}

.w30
{
 width: 30%;
}

hr
{
 width: 80%;
 clear: both;
 margin: 1em;
}

p
{
 color:#3b3b3b;
 font-size: 1em;
 line-height: 1.3em;
 font-family: "Times New Roman", georgia, serif;
 margin-bottom: 1em;
}

ul
{
 margin-left: 2em;
 color:#3b3b3b;
 font-size: 1em;
 line-height: 1.3em;
 font-family: "Times New Roman", georgia, serif;
 margin-bottom: 1em;
 /* list-style-image: url(right.gif); */
 list-style-type: square;
}

#footer
{
 text-align: left;
 padding: 1em;
 background: #fff;
}

#footer p
{
 clear: both;
 margin: 5em;
 font-size: 0.8em;
 font-family: arial, helvetica, "gill sans", sans-serif;
 color: #000;
 margin: 0;
 text-align: left;
}

#footer a
{
 margin: 5em;
}

#name
{
 padding-bottom: 1em;
}

#picture
{
 float: right;
 padding:1em;
 color: blue;
 font-size: 0.8em;
 text-align: center;
 font-family: helvetica, geneva, arial, sans-serif;
}

img
{
 border: none;
 margin: 0;
}

a
{
 margin: 0;
}

a.icon
{
 float: right;
 clear: both;
 margin: 1em;
 margin-top: -1em;
}

pre
{
 color: #039;
 background: #E5ECFF;
 text-align: left;
 font-family: monaco, "Bitstream Vera Sans Mono", "Courier New", courier, monospace;
 font-weight: normal;
 font-size: small;
 line-height: 1.3em;
 padding: 1% 2%;
 margin: 1% 2%;
 border-style: solid;
 border-width: 2px 2px 1px 2px;
 border-color: #dfdfdf #dfdfdf #666 #ccc;
}

.wrap
{
 white-space: normal;
}

.header1
{
 background-color: #80A2FF;
 color: #fff;
 text-align: center;
 text-transform: uppercase;
 letter-spacing:2px;
 padding-top: 0.5em;
 padding-bottom: 0.5em;
}

.header2
{
 background-color: #ccdaff;
 text-align: center;
}

.row0
{
 background-color: #eeeeee;
}

.row1
{
 background-color: #fff;
}

textarea.message
{
 width: 600px;
 height: 120px;
 border: 3px solid #cccccc;
 padding: 5px;
 font-family: Tahoma, sans-serif;
 border: 1px solid #888;
}

form
{
 font-size: .8em;
 width:90%;
 font-family: arial, helvetica, sans-serif;
}

table
{
 font-size: 0.8em;
 width:100%;
 border: 6px double #eeeeee;
 background-color: #fff;
}

.db
{
 vertical-align:text-top;
}

.normal
{
 font-size: 1em;
 font-family: arial, helvetica, sans-serif;
}

#arrow-paging
{
 width: 100%;
 padding: 0;
 text-align: center;
}

#arrow-paging p
{
 font-size: .8em;
 color: blue;
}

#arrow-paging img
{
 font-size: 1em;
 position: relative;
 top: .3em;
 margin-left: 0.5em;
 margin-right: 0.5em;
 height: 1.1875em;
 width: 1.375em;
 border: none;
}

#hide
{
 display:none;
 line-height: 1.3em;
 color: #039;
 background: white;
 text-align: left;
 font-weight: normal;
 font-size: 0.9em;
 line-height: 1.3em;
 padding: 1em;
 margin: 1em;
 border-style: solid;
 border-width: 2px 2px 1px 2px;
 border-color: #dfdfdf #dfdfdf #666 #ccc;
}

.w3c
{
 margin: 1em;
 margin-right: 3em;
}

.dir
{
 color: #039;
 background: white ! important;
 text-align: left;
 font-family: monaco, "Bitstream Vera Sans Mono", "Courier New", courier, monospace;
 font-weight: normal;
 font-size: small;
 line-height: 1.3em;
 padding: 1% 2%;
 margin: 1% 2%;
 border-style: solid;
 border-width: 2px 2px 1px 2px;
 border-color: #dfdfdf #dfdfdf #666 #ccc;
}

.dir input
{
 margin-left: 1em;
}

.dir
{
 color: #039;
 background: white ! important;
 text-align: left;
 font-family: monaco, "Bitstream Vera Sans Mono", "Courier New", courier, monospace;
 font-weight: normal;
 font-size: small;
 line-height: 1.3em;
 padding: 1% 2%;
 margin: 1% 2%;
 border-style: solid;
 border-width: 2px 2px 1px 2px;
 border-color: #dfdfdf #dfdfdf #666 #ccc;
}

.dir input
{
 margin-left: 1em;
}

/* ======== nav code for examples ======== */

.navcontainer
{
 position: relative;
 top: 0px;
 left: 0px;
 margin: 0;
 padding: 0;
 font-family: helvetica, geneva, arial, sans-serif;
}

ul.navlist
{
 margin-left: 0;
 padding-left: 0;
 white-space: nowrap;
}

.navlist li
{
 display: inline;
 list-style-type: none
}

.navlist a
{
 padding: 3px 10px;	/* top-bottom  3px, right-left 10px */
}

.navlist a:link, .navlist a:visited
{
 color: #fff;
 background-color: #036;
 text-decoration: none;
}

.navlist a:hover
{
 color: #fff;

 background-color: #369;
 text-decoration: none;
}

.navlist li.active
{
 color: #fff;
 padding: 3px 10px;	/* top-bottom  3px, right-left 10px */
 background-color: #369;
 text-decoration: none;
}

/* ======== Jess custom enhancements ======== */

#picture img {
 border-radius: 20px;
 box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.25);
}

h1 {
 text-decoration: none;
 color: #5E7386; /* slate blue */
}

#banner {
 background: #3F5666; /* deep blue-gray */
}

#banner h1 {
 color: #ffffff;
 text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.35);
}

hr {
 width: 80%;
 border: none;
 border-top: 1px solid rgba(63, 86, 102, 0.35);
 margin: 2em auto;
}

.pad {
 border: 2px solid red;
 padding: 20px;

 width: 85%;
 box-sizing: border-box;
 border-radius: 20px;
}

fieldset {
 width: 95%;
 margin: 0 auto 1.5em auto;
 padding: 1.25em 1.25em 1em;
 box-sizing: border-box;

 border-radius: 20px;
 overflow: hidden;
 border: 1px solid rgba(63, 86, 102, 0.35);
}

legend {
 padding: 0 0.6em;
 margin-left: 1em;
 background: #fff;
 font-weight: bold;
}

fieldset label {
 display: inline-block;
 margin-bottom: 0.5em;
}

#content form {
 font-size: 1em;
}

#content pre {
 width: 85%;
 padding: 1.25em;
 box-sizing: border-box;

 border-radius: 20px;
 border: 1px solid rgba(63, 86, 102, 0.35);
 background: #E5ECFF;
 text-align: left;

 white-space: pre-wrap;
 overflow-wrap: break-word;
}

#footer pre {
 white-space: pre-wrap;
 overflow-wrap: anywhere;
 word-break: break-word;
 max-width: 100%;
}

#footer code {
 white-space: pre-wrap;
 overflow-wrap: anywhere;
 word-break: break-word;
 max-width: 100%;
}

.groceryTable {
 width: 100%;
 border-collapse: collapse;
 margin-top: 1em;
}

.groceryTable th,
.groceryTable td {
 padding: 0.5em;
 text-align: left;
}

.groceryTable input[type="text"] {
 width: 100%;
 box-sizing: border-box;
}