/* W3.CSS 2.71 by Jan Egil and Borge Refsnes */
/* reference: http://www.color-hex.com/color/f4fafa*/
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
audio,canvas,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}
dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}sub{bottom:-0.25em}
img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}
hr{-moz-box-sizing:content-box;box-sizing:content-box}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
button,input,select,textarea{font:inherit;margin:0}
button{overflow:visible}button,select{text-transform:none}
button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input[type=checkbox],input[type=radio]{padding:0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
input[type=search]{box-sizing:content-box;-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}pre,textarea{overflow:auto}
/* End extract from normalize.css */
.w3-serif{font-family:"Times New Roman",Times,serif}
h1,h2,h3,h4,h5,h6{font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}
.w3-noserif {font-family: 'Roboto', sans-serif;}
h1,h2,h3,h4,h5,h6{font-weight:400;margin:10px 0}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{ font-weight:inherit;}
.w3-wide{letter-spacing:4px}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{ font-weight:inherit;}
.h-sub{font-style: bold; font-weight: 800; line-height: 15.4px; font-family: Verdana, sans-serif;}
.h1 {font-size: 22px; color: #4d4d4d; line-height: 28px; } /* #003366 #4d4d4d h1*/
.h2 {font-size: 20px; color: #4d4d4d ;} /*h2*/
.h3 {font-size: 16px; font-style: bold; color: #4d4d4d ;} /*h3*/
.h4 {font-size: 14px; font-weight: 800; text-font: verdana;color: #4d4d4d ;} /*h4*/
.h4c {font-size: 14px; font-weight: 800; text-font: verdana; color: teal;} /*h4*/
.h1col{font-size: 18px; font-weight: 400; text-font: verdana;color:orange; text-align:left;}/*#006666 #993d00 #e65c00*/
.h1i {font-size: 48px; font-family: 'Roboto', sans-serif;line-height:48px; color: #f2f0e5 }
.h1xl {font-size: 48px; font-family: 'Roboto', sans-serif;line-height: 48px; color: #f2f0e5 }
.h1gold{font-size: 18px; font-weight: 400; text-font: verdana;color: #7f6b00; text-align:left;}
.txtjustify{text-align:justify!important}.txtcenter{text-align:center!important}
.hxtra {font-size: 48px; font-family: 'Roboto', sans-serif; line-height: 48px; color: #f2f0e5 }
/*TEXT COLORS AND SIZE*/
.txtcolor {
text-align: left; font-size: 12px; font-family: 'Roboto', sans-serif; color:#004d27 ; /*font color:#2E8B57 darker#262626; lighter #333333 */
}
.txtcol{ color:#444}
.txtdarkteal{color:#006C6C }
.txtsmall{ text-align: left; font-size: 10px; font-family: 'Roboto', sans-serif;}
.txtindent{padding:20px; }
.txtindtleft{padding-left:20px; }
.txt-orange{color: orange}
.{color: white;}
.txt-white{color: white}
.txt-color{color: #ba9b39}
.txt-gold {color: #7f6b00}
.txtxlarge{ text-align: center; font-size: 24px; letter-spacing: 0px; color: #4d4d4d ;
font-family: 'Roboto', sans-serif; line-height:1.5; }
.txtlarge{ text-align: justify; font-size: 14px; letter-spacing: 0px; color: #5b5b5b;
font-family: 'Roboto', sans-serif; line-height:1.5; }
.txtlarge2{ text-align: justify; font-size: 14px; letter-spacing: 0px; color:#757575;
font-family: 'Roboto', sans-serif; line-height:1.5; }
.txtmedium{ text-align: justify; font-size: 12px; letter-spacing: 0px; line-height:1.5; color:#4c4000;
font-family:'Roboto', sans-serif; }
.txtsmall{ text-align: justify; font-size: 10px; letter-spacing: 0px; line-height:1.5; font-family:'Roboto', sans-serif; }
.txtsmallr{ text-align: right; font-size: 10px; letter-spacing: 0px; line-height:1.5; font-family:'Roboto', sans-serif; }
/*CONTAINERS */
.flex-container {display: -webkit-flex;display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; text-align: center;}
.flex-container > * { padding: 20px; -webkit-flex: 1 100%; flex: 1 100%;}
.w3-open {padding-left: 20px; padding-top:8px; padding-bottom: 8px; border-top: gray thin solid; font-family:"roboto",sans-serif}
.w3-center{text-align:center!important}
.w3-left{text-align:left!important}
.w3-left{float:left!important}.w3-right{float:right!important}
.w3-theme {color:#fff; !important; background-color:navy
!important} /*#005996 #009688*/
.w3-contopen{padding:72px;}
.w3-animate-bottom{position:relative;-webkit-animation:animatebottom .4s;animation:animatebottom 0.4s}
.w3-container{padding:0.01em 16px}
.w3-contopen{padding:72px; align: right}
.w3-row-box {padding-left: 15px; padding-right:15px}
.w3-open1 {padding-left: 20px; background-color: teal; color: white;padding-top :8px; padding-bottom: 8px;
border: yellow thick solid; font:roboto;}
/*HEADER FOOTER ARTICLES DIVS*/
header {background: teal;color:#7f6b00; /*white; #444*/
border-bottom-width: 6px; border-bottom-style:solid; border-bottom-color:#ffda1a; /*#dbc44c; /*#eadd99; /*#ccab00; /*#7f6b00;*/ /*#ffdf32;*/
font-family:'roboto', san-serif;}
.subheader {color: #7f6b00; }
.shadowtxt{text-shadow: #fff 1px 0 10px; }
footer { color:black;} /*#ffeb7f #ffef99 #fff3b2 #fff7cc #fffbe5*/
article{padding-top:12px; padding-left:10px!important;
text-align: justify; font-size: 14px; color:#444;
font-family:'Roboto', sans-serif; line-height: 18px;
overflow: hidden;}
.article {font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size:16px; line-height:24px;
text-align: justify; color: #4a4a4a; overflow: hidden; }
.article-pad {padding-left: 20% !important;padding-right:20% !important; }
.article2 {padding-top:12px; /*padding-right:20px!important;; was 18px 2px*/
text-align: justify; font-size: 14px; color: #707070; /*#4d4d4d h4*/
font-family: 'Roboto', sans-serif; /*Verdana, Arial, Helvetica, sans-serif;*/
line-height: 18px; /* margin-right: 28px; */
padding: 2em;
overflow: hidden;}
.article3 {
text-align: justify; font-size: 12px; color:#333333 ; /* this is the font color */
font-family: 'Roboto', sans-serif;} /* Georgia, "Times New Roman",Times, serif; */
.col3 { border-left: medium #f9f9f9 solid; }/**/ /*change width: other columns larger*/
.coldiv {align:justify; max-width:300px; color: #333333 ; /*#f9fcfa*/
font-family: 'Open Sans', sans-serif;
background-color:#f9fcfa;
font-size: 12px; line-height: 18px;}
.coldiv2 { border-left: medium #f9f9f9 solid; align:justify; max-width:350px; color: #333333 ;
font-family: 'roboto', sans-serif; background-color:#f9fcfa; font-size: 12px; line-height: 18px; }
/**/ /*change width: other columns larger*/
.backgred {
background-color:red;
}
.vcontent { background-color: white;}
@media screen and (min-width: 1401px) {.vcontent { padding-left:20%; padding-right: 20%; }} /*at least 993px large*/
@media screen and (min-width: 1041px) and (max-width:1400px) {.vcontent { padding-left:10%; padding-right: 10%; }} /*medium bettwen 501 and 992*/
@media screen and (min-width: 601px) and (max-width:1040px) {.vcontent { padding-left:8%; padding-right: 8%; }} /*medium bettwen 501 and 992*/
@media screen and (max-width: 600px) {.vcontent { padding-left: 2%; padding-right: 2%; font-size:14px; line-height:22px; text-align: left; }} /*up to 500px wide: smallest*/
.vform { background-color: white; border: medium #cbd7e3 solid; border-radius: 15px; padding-left:8px; padding-right:8px; max-width:993px}
.vcontentsm { background-color: white; font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size:12px; line-height:16px;
padding-left:10%; padding-right:10%; }
/*SECTION IMAGES*/
#sectionimg
{ position: relative; /*opacity: 0.8;*/
background: url(assets/cityweb.jpg) no-repeat bottom center; /*globeTf.jpg globe2bo*/
background-attachment: fixed;
background-size: cover;
text-align: left; }
#sectionimg2
{ position: relative; /*opacity: 0.8;*/
background: url(assets/TREE.jpg) no-repeat bottom center; /*globeTf.jpg*/
background-attachment: fixed;
background-size: cover;
text-align: center; }
#logo1 {position: relative; /*opacity: 0.8;*/
background: url(assets/vlogo2n.png) no-repeat bottom center width:80px height:55px padding-right:20px; /*globeTf.jpg*/
text-align: left; }
/* https://www169.lunapic.com/editor/ edit image colors on line*/
#sectionimg:before
{ content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(64,64,64,0.125);
}
.imgwrap {float: left;margin: 10px; margin-left: 10px;margin-bottom: 10px;}
.linediv {margin: 25px; padding:1px 0px 1px 0px; width:100%; color:navy; background: navy; } /*padding:2px 0px 2px 0px;*/
/*LISTS AND BULLETS*/
.list {color: teal; text-decoration: none; align:right; hover: red;} /*background: orange; */
a:link.open { color: white; background-color: transparent; text-decoration: none;}
a:link { color:#666600; background-color: transparent; text-decoration: none;}
a:visited { color: #009999; background-color: blue; text-decoration: none;}
a:hover { color: grey; background-color: #f4fafa ; text-decoration: underline;}
a:active { color:#DAA520; background-color: transparent; text-decoration: underline;}
/*A COLOR BACKGROUND FOREGROUND BY USING SHADOW*/
.colorlist {background: #f4fafa ; color: #004040;
/* #004040 very dark teal; #f1ebeb* light grey-pink; #d3ebeb light teal;;#92cdcd darker teal*/
box-shadow:0 8px 16px 0 rgba(244,250,250, 0.2),0 6px 20px 0 rgba(146,205,205, 0.19);
padding-left: 11px; padding-right: 11px }
.padpara {padding-left: 11px; padding-right: 11px }
.padparasml {padding-left: 11px; padding-right: 11px; font-size 10px ; color: orange; }
.padborder{padding-left:20px; padding-right: 20px; background-color:white} /*#f9fcfcnew color*/
.padcol3 {padding-left:5px; padding-right: 5px; background-color:white}
.padborderL{padding-left:40px; padding-right: 40px}
.sectionline{border-top:5px solid #98AFC7; }
.padbottom {padding-left: 11px; padding-right: 11px; padding-bottom:30px; }
.padaddress {padding-left: 11px; padding-right: 11px; padding-top:15px; padding-bottom:15px;}
.paraintro {padding-bottom: 38px; color: }
.paracolor{ background-color:#fefefe; padding-top: 5px; padding-bottom:5px;padding-right:10px; padding-left: 10px;
box-shadow:5px 5px 2px #fdfcfc !important;}
.paraend {text-align: center; font-family: 'Roboto', sans-serif; font-size:10px; padding-bottom:10px; margin-top:2px;}
.copyend { text-align: center; font-size:12px; padding-bottom:10px;padding-top: 10px; margin-top:2px; font-family: 'roboto', sans-serif; }
/*BUTTONS*/
.button-login{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
float: right; border:none; background-color:grey; /* #4CAF50 Green */
border-radius:8px; padding: 10px 12px;
text-align: center; color: white; margin: 5px; }
.button-2{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
float: right; border:none; background-color:teal; /* #4CAF50 Green */
border-radius:8px; padding:4px 8px;
text-align: center; color: white; margin: 3px;
}
.button-3{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
float: center; border:none; background-color: #478575;
/* http://www.w3schools.com/colors/colors_picker.asp?colorhex=008080 #4CAF50 Green */
border-radius:8px; padding:4px 8px;
text-align: center; color: orange; margin: 3px; }
.button-4{box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 0px 2px 0 rgba(0,0,0,0.19);
float: center; border:none; background-color: white;
border-radius:4px; padding:3px 5px;
text-align: center; color:#7f6b00; margin: 2px; }
.button-5{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
float: right; border:none; background-color:#CCFFFF ; /* #4CAF50 Green */
border-radius:4px; padding:2px 4px;
text-align: center; color: teal; margin: 3px;
}
.button-6{
float: center; border:none; background-color: white;
border-radius:2px; padding:3px 5px;
text-align: center; color:#7f6b00; margin: 2px; }
.b-close{ float: center; border:none; background-color:transparent;
text-align: center; margin: 0px;
}
/*LISTS AND BORDERS*/
.li-none{list-style-type: none}
ul.square { list-style-type: square;}
ul.in {list-style-position:inside;}
ul.out {list-style-position:outside;}
ul.border {border-left: 5px solid orange; border-right: 5px solid teal; background-color: #f1f1f1;
list-style-type: square; padding: 5px 30px; border-radius: 25px}
ul.border2 {border-left: 3px solid orange; border-right: 3px solid teal; background-color: #f1f1f1;
list-style-type: square; padding: 5px 15px; border-radius: 25px}
ul.border3 {border-left: 3px solid orange; border-right: 3px solid teal; background-color: #f1f1f1;
list-style-type: none; padding: 5px 15px; border-radius: 25px; line-height:24px}
ul.border4 {border-left: 5px solid orange; border-right: 5px solid teal; background-color: #f1f1f1;
list-style-type: none; padding: 5px 30px; border-radius: 25px}
ul.border5 {border-left: 3px solid #7f6b00; border-right: 3px solid #003366; background-color: #f1f1f1;
list-style-type: none; padding: 10px 15px; border-radius: 25px; line-height:18px; }
ul.border6 {
list-style-type: none; padding: 10px 15px; line-height:24px;max-width: 400px
-moz-box-shadow: 1px 1px 3px 2px #008080;
-webkit-box-shadow: 1px 1px 3px 2px #008080;
box-shadow:1px 1px 3px 2px #008080;
padding: 10px; width:400px; color:#98AFC7;}
ul.border7 {list-style-type: none; padding: 10px 5px; line-height:24px;
color:teal; background-color: white;/* #004d27*/
box-shadow:1px 1px 3px 2px gray; padding: 5px; }
ul.border8 {list-style-type: none; padding: 10px 15px; line-height:20px;max-width: 400px;
color:teal;/* #004d27*/ padding: 10x; width:400px; }
ul.border9 {list-style-type: none; padding: 2px 5px; line-height:20px;
color:#004d4d; }
ul.border9n {list-style-type: none; padding: 2px 5px; line-height:1.5;
color:#004d4d; }
.border5 {border-left: 3px solid #7f6b00; border-right: 3px solid #003366; background-color: #f1f1f1;
list-style-type: none; padding: 10px 15px; border-radius: 25px; line-height:18px; }
ul.circle{list-style-type: circle}
ul.none{list-style-type: none}
ol.none {list-style-type: none}
ul.image { list-style-image: url('sqpurple.gif')}
ul.tab { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab li {float: left;}
/* Style the links inside the list items */
ul.tab li a {
display: inline-block; color: black; text-align: center; padding: 14px 16px; text-decoration: none;
transition: 0.3s; font-size: 12px;} /*text-font: Raleway;*/
/* Change background color of links on hover */
ul.tab li a:hover { background-color: #b5e3de } /*#ddd;*/
ul.tab li a:focus, .active { background-color: #38948b; color: white} /* background color: #ccc;*/
/* Style the tab content */
.tabcontent { display: none; padding: 6px 12px; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s;}
/*STANDARD NAV BAR 2 open */
/*.nav2 {background:white; width: 150px; }/*change width: other columns larger*/
/*.nav2 ul { list-style-type: none; margin: 0; padding: 5px;
font-size: 12px; font-family: 'Open Sans', sans-serif; background-color:#EBF5F0;} /*:#EBF5F0 #CCFFFF*/
/*.nav2 li a { display: block; color:teal; padding: 2px 2px; text-decoration: none; width: 150px; text-align: left;
line-height: 18px; }
/*.nav2 ul a { display: block; color:teal; padding: 4px 2px; text-decoration: none; width: 150px; text-align: left;}
.nav2 li a:hover { background-color: #00cccc; color: white; width: 150px;}/* #EB9100; Change the li link color on h*/
/*.nav2 a.current { background-color: #fffdf3; color:#6a8a8a ;}*/
/*.nav2 a.currentline { border-left-width:thick; border-left-color:orange; border-left-style: solid; }
/*.nav2 a.hilight { background-color: teal; color:white; text-decoration: bold }
/*.nav2 a.lolight { color:#85adad } */
/*STANDARD NAV BAR NARROW */
.navnar {max-width:180px ; background-color:#EBF5F0;} /*add to nav class to control width of nav bar*/
.navnar ul{ list-style-type: none; margin: 0; padding-top:30px; padding-left: 8px; /*margin-right:50px;*/
font-size: 12px; line-height: 12px;font-family: 'roboto', sans-serif; background-color:transparent; width:120px;
overflow: hidden; /*#EBF5F0*/
} /*control background; :#EBF5F0 #CCFFFF*/
.navnar ul a { display: block; color:#004080; padding: 4px 2px; text-decoration: none; width: 120px; text-align: left;}
.navnar a:hover { background-color: #7f6b00; color: white; }/* #EB9100; Change the li link color; #7f6b00; dark gold; h*/
.nanavnar v2 a.currentline {border-left-width:thick; border-left-color:#7f6b00; border-left-style: solid; }
.navnar a.hilight { background-color: #bfb57f; color:#004080; text-decoration: bold; width: 120px; }
.navnar a.lolight { color:#7f9fbf} /*85adad */
.navnar a:hover.lolight { background-color: #EBF5F0; color: #7f9fbf }
.navnar a.under { border-bottom:medium #bfb57f solid; color:#004080; text-decoration: bold; width: 120px; }
.navnar a.undernar { border-bottom:medium #bfb57f solid; color:#004080; text-decoration: bold; width: 120px; }
.navnar a:hover.under { background-color: #dfdabf}
/*STANDARD NAV BAR 2 open */
.navdiv {max-width:280px } /*add to nav class to control width of nav bar*/
.nav2 {background-color:#EBF5F0;}/*this is wide background*/
.nav2 ul{ list-style-type: none; margin: 0; padding-top:30px; padding-left: 15px; /*margin-right:50px;*/
font-size: 14px; line-height: 15px;font-family: 'roboto', sans-serif; background-color:transparent; width:230px;
overflow: hidden; /*#EBF5F0*/
} /*control background; :#EBF5F0 #CCFFFF*/
.nav2 ul a { display: block; color:#004080; padding: 4px 2px; text-decoration: none; width: 230px; text-align: left;}
.nav2 a:hover { background-color: #7f6b00; color: white; }/* #EB9100; Change the li link color; #7f6b00; dark gold; h*/
.nav2 a.currentline {border-left-width:thick; border-left-color:#7f6b00; border-left-style: solid; }
.nav2 a.hilight { background-color: #bfb57f; color:#004080; text-decoration: bold; width: 230px; }
.nav2 a.lolight { color:#7f9fbf} /*85adad */
.nav2 a:hover.lolight { background-color: #EBF5F0; color: #7f9fbf }
.nav2 a.under { border-bottom:medium #bfb57f solid; color:#004080; text-decoration: bold; width: 230px; }
.nav2 a.undernar { border-bottom:medium #bfb57f solid; color:#004080; text-decoration: bold; width: 120px; }
.nav2 a:hover.under { background-color: #dfdabf}
/*TOP NAVwhite background */
.topnav2 {background: white; color: black; padding-left:25px; border-color:orange; border-top-width:thick;}
ul.topnav2 { background-color:white; list-style-type: none; margin: 0; padding: 0; overflow: hidden; font-family: Verdana, Arial, Helvetica, sans-serif}
ul.topnav2 li {float: left;}
ul.topnav2 li a { color: black; display: inline-block; text-align: center; padding: 12px 14px; text-decoration: none; transition: 0.3s; font-size: 14px;}
ul.topnav2 li a:hover {color:white; background-color:#004080;} /*background-color: teal;*/
ul.topnav2 li.icon {display: none;}
.topnav2 a.currentline { border-bottom-width:thick; border-bottom-color:orange; border-bottom-style: solid; }
ul.topnav2 li a:hover.lolight {background-color: #DDDDDD ; color:#85adad;}
.navpadleft {padding-left: 60px;
font-family:'roboto', san-serif; /*new*/
}
.padding-leftwide {padding-left: 60px; border-top:thin gray solid; }
.bottomnav {background: white; }
ul.bottomnav{ background-color:white; list-style-type: none; border-top:#f9f9f9 medium solid; margin: 0;
padding-left: 60px; overflow: hidden; font-family: 'Roboto', sans-serif; font-size : 12px; border-bottom:#ba9b39 medium solid;}
ul.bottomnav li {float: left;}
ul.bottomnav li a { display: inline-block; text-align: center; padding: 12px 14px; text-decoration: none; transition: 0.3s; }
ul.bottomnav li a:hover {background-color: grey; color:white;}
ul.bottomnav li.icon {display: none;}
.bottomnav a.currentline { border-bottom-width:thick; border-bottom-color:orange; border-bottom-style: solid; }
ul.bottomnav li a:hover.lolight {background-color: #DDDDDD ; color:#85adad;}
.navpadleft {padding-left: 60px; padding-right: 60px; border-top:thin gray solid ;border-bottom:thin white solid ; }
.padding-leftwide {padding-left: 60px; border-top:thin gray solid; }
/*new*/
/*STANDARD NAV BAR 3 */
.nav3 {background:white; width: 150px; }/*change width: other columns larger*/
.nav3 ul { list-style-type: none; margin: 0; padding: 5px;
font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color:#CCFFFF }
.nav3 li a { display: block; color:teal; padding: 2px 2px; text-decoration: none; width: 150px; text-align: left;
line-height: 18px; } /
.nav3 ul a { display: block; color:teal; padding: 4px 2px; text-decoration: none; width: 150px; text-align: left;}
.nav3 li a:hover { background-color:#EB9100; color: white; width: 150px; }/* Change the li link color on h*/
.nav3 a.current { background-color: #798c9f; border-left-width:thick; border-left-color:orange; border-left-style: solid;
color:white ; } /*#798c9f;*/
.nav3 a.currentline { border-left-width:thick; border-left-color:orange; border-left-style: solid; }
.nav3 a.hilight { background-color: teal; color:white; text-decoration: bold }
/*STANDARD NAV BAR 3 */
.navR {background:white; width: 150px; }/*change width: other columns larger*/
.navR ul { list-style-type: none; margin: 0; padding: 5px;
font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color:#CCFFFF }
.navR li a { display: block; color:teal; padding: 2px 2px; text-decoration: none; width: 150px; text-align: right;
line-height: 18px; } /
.navR ul a { display: block; color:teal; padding: 4px 2px; text-decoration: none; width: 150px; text-align: right;}
.navR li a:hover { background-color:#EB9100; color: white; width: 150px; }/* Change the li link color on h*/
.navR a.current { background-color: #798c9f; border-left-width:thick; border-left-color:orange; border-left-style: solid;
color:white ; } /*#798c9f;*/
.nav3 a.currentline { border-left-width:thick; border-left-color:orange; border-left-style: solid; }
.nav3 a.hilight { background-color: teal; color:white; text-decoration: bold }
/*STANDARD NAV BAR */
.nav1 {background:white; width: 150px; }/*change width: other columns larger*/
.nav1 ul { list-style-type: none; margin: 0; padding: 5px; border-left: 5px solid blue;
font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color:#CCFFFF }
.nav1 li a { display: block; color:teal; padding: 2px 2px; text-decoration: none; width: 150px; text-align: left;
line-height: 18px; }
.nav1 ul a { display: block; color:teal; padding: 4px 2px; text-decoration: none; width: 150px; text-align: left; }
.nav1 li a:hover { background-color: orange; color: white; width: 150px; }/* Change the li link color on h*/
/*original nav bar */
.nav {background:white; width: 160px; }
.nav ul { list-style-type: none; margin: 0; padding: 00; width: 150px;
background-color: white;font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif}
/*change the width: allows other columns larger*/
.nav ul a { display: block; color: teal; padding: 4px 8px; text-decoration: none; width: 150px; }
/* Change the link color on hover */
.nav ul a:hover { background-color: #555; color: white; width: 180px; }
/* original nav bar*/
/*for TOP NAV HORIZONTAL BAR: */
.navtop{background: teal; color: black} /*does nothing? */
.navtop ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color:#331a00; /*darkgrey */
font-family: Verdana, Arial, Helvetica, sans-serif } /*bar color */
.navtop li { float: left; }/* border-right:1px solid #bbb;*/
.navtop li a {display: block; background-color: #331a00; color: orange; /*background,text color */
text-align: center; padding: 14px 16px; text-decoration: none;}
.navtop li a:hover:not(.active){background-color:darkblue; color:yellow}/*box color, text color */
.navtop active {background-color: darkblue;}
/*for TOP BOTTOM HORIZONTAL BAR: */
.navbottom{background: grey; color: white}
.navbottom ul {list-style-type: none; margin: 0; padding: 0;
overflow: hidden; background-color:grey;font-family: Verdana, Arial, Helvetica, sans-serif}
.navbottom li { float: left; border-right:1px solid #bbb;}
.navbottom li a { display: block; color: white; text-align: center;
padding: 14px 16px; text-decoration: none;}
.navbottom li a:hover:not(.active){ background-color: darkblue;color: white;}
.navbottom .active {background-color: darkgreen;}
.navbottom ul a:hover {background-color: darkgreen; color: white;}
/*TOP NAV */
.topnav{background: #50D0D0; color: white; border-top-color:#FF9966}
ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #50D0D0;
font-family: Verdana, Arial, Helvetica, sans-serif}
ul.topnav li {float: left;}
ul.topnav li a { display: inline-block; color: white; text-align: center; text-decoration: none; transition: 0.3s; font-size: 14px; padding-bottom:10px; padding-top:10px; padding-left: 14px;}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}
.topnav a.currentline { border-bottom-width:thick; border-bottom-color:orange; border-bottom-style: solid; }
/*TOP NAV2 Small white background */
.topnav2sm{background: white; color: black; padding-left:25px; border-color:orange; border-top-width:thick;}
ul.topnav2sm { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color:white;
font-family: Verdana, Arial, Helvetica, sans-serif}
ul.topnav2sm li {float: left;}
ul.topnav2sm li a { display: inline-block; color: black; text-align: center; padding: 12px 14px; text-decoration: none; transition: 0.3s; font-size: 12px;}
ul.topnav2sm li a:hover {background-color: #808080; color:white;}
ul.topnav2sm li.icon {display: none;}
.topnav2sm a.currentline { border-bottom-width:thick; border-bottom-color:orange; border-bottom-style: solid; }
/*TOP NAV3 */
.topnav3 {background: white; color: black; padding-left:25px; border-color:orange; border-top-width:thick;}
ul.topnav3 {background-color:white; list-style-type: none; margin: 0; padding: 0; overflow: hidden; font-family: Verdana, Arial, Helvetica, sans-serif}
ul.topnav3 li {float: left;}
ul.topnav3 li a { color: black; display: inline-block; text-align: center; padding: 12px 14px; text-decoration: none; transition: 0.3s; font-size: 12px;}
ul.topnav3 li a:hover {background-color: teal; color:white;}
ul.topnav3 li.icon {display: none;}
.topnav3 a.currentline { border-bottom-width:thick; border-bottom-color:orange; border-bottom-style: solid; }
ul.topnav3 li a:hover.lolight {background-color: #DDDDDD ; color:#85adad;}
ul.topnav3 li a.lolight{ color: grey; display: inline-block; text-align: center; padding: 12px 14px; text-decoration: none; transition: 0.3s; font-size: 12px;}
/*NAV DROPDOWN 2*/
.dropdn {background: white; color: black; border-top-color:#FF9966}
ul.dropdn {border-top-color:#FF9966; list-style-type: none; margin: 0; padding: 0; overflow: hidden;
background-color: white; color: black; font-size: 12px;font-family : Verdana, Arial, Helvetica, sans-serif}
ul.dropdn li a { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 12px;} /*active*/
ul.dropdn {border-top-color:#FF9966; list-style-type: none; margin: 0; padding: 0; overflow: hidden;
background-color: white; color: black;font-size: 12px;font-family : Verdana, Arial, Helvetica, sans-serif}
li.dropdn { float: left; display: inline-block; }
li.dropdn a, .dropbtn { display: inline-block; background-color:white; color: #ffd6c1; text-align: center;
padding: 14px 16px; text-decoration: none; font-size: 12px;}
li.dropdn a:hover, .dropdown:hover .dropbtn {background-color: teal; color: #ffd6c1; text-decoration:none}
li.dropdown {display: inline-block; }
.dropdown-content {display: none; position: absolute; background-color:white;color :#ffd6c1;
min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
.dropdown-content a { white; color: black;
padding: 12px 16px; text-decoration: none;
display: block; text-align: left;}
.dropdown-content a:hover {background-color:#50D0D0; color:#ffd6c1}
.dropdown:hover .dropdown-content {display: block;}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon { float: right; display: inline-block; }
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; }
ul.topnav.responsive li { float: none; display: inline; }
ul.topnav.responsive li a { display: block; text-align: left; }
}
@media screen and (max-width:680px) {
ul.topnav2 li:not(:first-child) {display: none;}
ul.topnav2 li.icon { float: right; display: inline-block; }
}
@media screen and (max-width:680px) {
ul.topnav2.responsive {position: relative;}
ul.topnav2.responsive li.icon { position: absolute; right: 0; top: 0; }
ul.topnav2.responsive li { float: none; display: inline; }
ul.topnav2.responsive li a { display: block; text-align: left; }
}
.sidenav { display: block; background-color:#CCFFFF ; height: 80%; width: 0; position: fixed;
z-index: 1; top: 0; left: 0; overflow-x: hidden; transition: 0.5s; padding-top: 60px; padding-left: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif; text-align:left; }
.sidenav a:hover, .offcanvas a:focus { display: block; padding: 8px 8px 8px 32px; background-color: #555; color: white; float:left}
.sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; color:orange; margin-left: 50px;}
@media screen and (max-height: 450px) {.sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;
float:left}}
/*start NAV BAR code pen erik T*/
.nav4 a{transition: color 0.3s ease; text-decoration: none; color: #004080; text-align: left; padding: 2px 2px; }
.nav4 a:hover{ background-color: #7f6b00; color: white; }
.nav4 li a:current { background-color: #7f6b00; color:white ;}
.nav4 li a.lolight{ background-color: #DDDDDD ; color:#85adad;}
#menuToggle{ display: block; position: relative; top:5px; left: 5px; z-index: 1;
-webkit-user-select: none; user-select: none;}
#menuToggle input{ display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px;
cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;}
/* * make menu hamburger */
#menuToggle span{ display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative;
background: #cdcdcd; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; /*what the hamburger looks like*/
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;}
#menuToggle span:first-child{ transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2){ transform-origin: 0% 100%;}/* * use Transform to make a check mark */
#menuToggle input:checked ~ span
{ opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: navy;}/*what the cross looks like*/
/* * hide middle line */
#menuToggle input:checked ~ span:nth-last-child(3)
{ opacity: 0; transform: rotate(0deg) scale(0.2, 0.2);}
/* * bottom one changes direction */
#menuToggle input:checked ~ span:nth-last-child(2){ transform: rotate(-45deg) translate(0, -1px);}
/* * menu absolute positioned * top left of the screen = what the menu looks like*/
#menu{ position: absolute; width: 250px; margin: -100px 0 0 -50px;
padding: 100px 20px 20px 30px; background: #EBF5F0; list-style-type : none; -webkit-font-smoothing: antialiased;
/* stop flickering text in safari */
transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);}
#menu li{ padding: 10px 0; font-size: 14px; text-align:left; line-height:10px} /*what the links look like*/
#menuToggle input:checked ~ ul{ transform: none;}/* * slide from the left */
/*end code pen erik T*/
/*@media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
} */
/*make the content wrap into columns on wider screens: and forces the order in which the content appears, eg nav bar left, articles, and footer at the bottom ___ */
@media all and (min-width: 993px) { /* was set at: 768px */
.nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.nav2 {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.nav1 {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.nav4 {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.sidenav {text-align:left; -webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.article { -webkit-flex: 5 0px; flex:5 0px; -webkit-order:2;order:2;}
.article2{ -webkit-flex: 5 0px; flex:5 0px; -webkit-order:3;order:3;}
.col3 {text-align:justify; -webkit-flex: 1 auto;flex:1 auto;-webkit-order:4;order:4;}
footer {-webkit-order:5;order:5;}
@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}}
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:993px){.w3-modal-content{width:900px}}
@media screen and (max-width:600px){.navtop a{display:block}.w3-navbar li:not(.w3-opennav){float:none;width:100%!important}.w3-navbar li.w3-right{float:none!important}}
@media screen and (max-width:600px){.navtop, .w3-dropdown-hover .w3-dropdown-content,.w3-navbar .w3-dropdown-click .w3-dropdown-content,.w3-navbar .w3-dropdown-hover .w3-dropdown-content{position:relative}}
@media screen and (max-width:600px){.navtop,.w3-navbar,{text-align:center}}
@media (max-width:600px){.w3-hide-small{display:none!important}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
@media (max-width:993px){.w3-hide-large{display:none!important}}
@media screen and (max-width:992px){.w3-sidenav.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}}
@media screen and (min-width:993px){.w3-sidenav.w3-collapse{display:block!important}}
@media (max-width:800px){.w3-hide-medium{display:none!important;}}
@media (max-width:993px){.w3-hide-nav{display:none!important; }}
@media (min-width:993px){.w3-hide-ham{display:none!important; }}
@media (max-width:450px){.w3-rightcol{margin:0 10px; width:auto!important; }}
@media (min-width:451px){.w3-rightcol{margin:0 10px; width:auto!important; }}
@media (min-width:600px){.w3-rightcol{margin:0 10px; width:auto!important; }}
@media (min-width:993px){.w3-rightcol{margin:0 10px; max-width:280px ; } } /*768*/
@media (min-width:1200px){.w3-rightcol{max-width:280px; padding: 1px 6px; }}
@media (max-width:450px){.article{margin:0 10px; width:auto!important; }}
@media (min-width:451px){.article{margin:0 10px; width:auto!important; margin-left: 20px; margin-right: 20px; }}
@media (min-width:600px){.article{margin:0 10px; width:auto!important; margin-left: 60px; margin-right: 60px; }}
@media (min-width:993px){.article{margin-left: 5px; margin-right: 10px;} } /*background-color:white 768*/
@media (min-width:1040px){.article{margin-left: 10px; margin-right: 10px; }} /*background-color:white*/
.xlarge{font-size:24px!important}.xxlarge{font-size:48px!important}
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
.box-shadow {-moz-box-shadow: 1px 1px 3px 2px #008080;
-webkit-box-shadow: 1px 1px 3px 2px #008080;
box-shadow:1px 1px 3px 2px #008080;
padding: 10px; width:400px; color:#98AFC7;}
.box-pad {padding-left: 11px; padding-right: 11px; padding-top:20px; padding-bottom: 20px }
.box-plain {-moz-box-shadow: 1px 1px 3px 2px #008080;
-webkit-box-shadow: 1px 1px 3px 2px #008080;
box-shadow:1px 1px 3px 2px #008080;
padding: 10px; width:auto; color:#98AFC7; }
.box-light {-moz-box-shadow: 1px 1px 3px 2px #d1e0e0;
-webkit-box-shadow: 1px 1px 3px 2px #d1e0e0;
box-shadow:1px 1px 3px 2px #d1e0e0;
padding: 10px; width:auto; color:#98AFC7; }
.column-gap {40px};
.half-box {float:left;width:100%; background-color: #50D0D0; color: white; padding: 8px; /*#6a7a8b;darker*/
border-top:5px solid #98AFC7; border-left: 5px solid orange; text-align: center}
.half-box-light {float:left;width:100%; background-color: #f7f8f8 ; color: gray; padding: 8px; /* #f0f5f5 #6a7a8b;darker*/
border-top:5px solid #98AFC7; border-left: 5px solid #f0f5f5 ; text-align: justify} /* #a3c2c2*/
.half-box-padded {float:center ;width:80%; background-color: #f7f8f8 ; color: gray; padding: 18px; /* #f0f5f5 #6a7a8b;darker*/
border-top:5px solid #98AFC7; border-left: 5px solid #f0f5f5 ; text-align: justify} /* #a3c2c2*/
.half-box-nav {float:left ;width:100%; background-color: #f7f8f8 ; color: gray; padding: 6px; /* #f0f5f5 #6a7a8b;darker*/
border-top:5px solid #98AFC7; border-left: 5px solid #f0f5f5 ; text-align: justify} /* #a3c2c2*/
.half-box-teal {float:left;width:100%; background-color: #fffefa; color: gray; padding: 8px; /* #f0f5f5 #6a7a8b;darker*/
border-top:5px solid teal; border-left: 5px solid #f0f5f5 ; text-align: justify}
.container { display: flex; } /*max-width:960px */
.container > div { flex: 1; }/*grow*/
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
.left-column {float:left;width:30%; color: #98AFC7; font-size:10px ;border-top: 2px solid #ffdf32;} /*#98AFC7;*/
.right-column{float:right; text-align:right;width :40%; color: #98AFC7;font-size:10px; border-top: 2px solid #ffdf32; } /*#f0f5f5 */
.center-column {float: left; width:30%; color: #98AFC7;font-size:10px; border-top: 2px solid #ffdf32; }
.table-column {float: left; width:80%;}
/*FOR BLOG css02 */
.blog-pad-4,
.blog-pad-hor-4{padding-top:2px!important;padding-bottom:2px!important}
.blog-pad-side {padding-left:8px!important;padding-right:4px!important;
border-left: 5px solid orange;}
.blog-pad-side2 {padding-left:8px!important;padding-right:4px!important;
border-left: 5px solid teal;}
.blog02-body {font-size: 12px;font-style: normal; font-variant: normal; font-weight: 400; line-height: 18px; font-family: Verdana; text-align: left; }
.blog02-sml {font-size: 12px;font-style: normal; font-variant: normal; font-weight: 400; line-height: 16px; font-family: Calibri; text-align: left; }
.blog02-h2{ font-size: 18px; font-style: normal; font-variant: normal; font-weight: 400; color:#003366 }
.blog02-h1{ font-size: 24px; font-style: normal; font-variant: normal; font-weight: 400; color:#003366 }
.blog02-container {padding:8px}
.blog02-h3{padding:0.01em 8px; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18px}
.blog02-h5{padding:0.01em 8px; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400}
.blog-header{padding:0.01em 16px; font-family: Raleway; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400}
.blog-margin8{margin:8px!important}.w3-margin-0{margin:0!important} /*for blog*/
.blog-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
.blog-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important}
.blog-opacity,.w3-hover-opacity:hover{opacity:0.60;filter:alpha(opacity=60)}
.blog-h3{padding:0.01em 8px; font-family: Raleway; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18px}
.blog-h4{padding:0.01em 8px; font-family: Raleway; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 16px}
.blog-h5{padding:0.01em 8px;font-family: Raleway; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400}
.blog-header{padding:0.01em 16px; font-family: Raleway; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400}
.blog-body {padding:0.01em 26px; font-family: Raleway; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18px; color:#333333 }
/*for blog*/
footer {color:black; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}
.footcontainer {background-color:orange; color:#98AFC7 ; }
.footernarrow{padding:3px; background-color:orange; color:black ;font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
.footerwide{padding-left:100px; background-color:gray; color:red ;font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
/* CARD */
,cardLeft {text-align:left}
, .card-2{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important}
.w3-card{border:1px solid #ccc}
.vm-card3 {box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important;
min-height:150px; max-width:360px
}
.vm-card4 {box-shadow:0 2px 8px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.19)!important;
min-height:150px; max-width:360px
}
.vm-card5 {box-shadow:0 2px 8px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.19)!important; padding:20px;
}
.w3-card-2,.w3-example{box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important}
.w3-card-4,
.w3-hover-shadow:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important}
.w3-card-8{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important}
.w3-card-12{box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)!important}
.w3-card-16{box-shadow:0 16px 24px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21)!important}
.w3-card-24{box-shadow:0 24px 24px 0 rgba(0,0,0,0.2),0 40px 77px 0 rgba(0,0,0,0.22)!important}
.halfcard1 {color: #98AFC7; padding: 8px; text-align: center}
.halfcard2 {color: #5B8B84; padding: 8px; text-align: center}
.halfcard3 {color: teal; padding: 8px; text-align: left} /* #5B8B84*/
.halfpad-left{padding-left:18px!important}
.half-box {float:left;width:100%; background-color: #50D0D0; color: white; padding: 8px; /*#6a7a8b;darker*/
border-top:5px solid #98AFC7; border-left: 5px solid orange; text-align: center}
td { padding-left: 20px; text-align: left; border: 1px solid red}
/*apply table to html with: or /*apply table to html with: */*/
table#t01 tr:nth-child(even) { background-color: #eee; font-size: 11px;}
table#t01 tr:nth-child(odd) { background-color:#FFFAF1 ; font-size: 11px;} /*darker #ffe4b2;*/
table#t01 th { background-color: #4d5f72 ; color: white; font-size: 14px; border-top-color:#FF0099}
table#t02 td { padding-left: 20px; text-align: left;:}
table#t02 tr:nth-child(even) { background-color: #eee; font-size: 11px;}
table#t02 tr:nth-child(odd) { background-color:#FFFAF1 ; font-size: 11px;} /*darker #ffe4b2;*/
table#t02 th { padding-left:20px; border-left: 1px solid red; color: green;font-size: 12px; font-weight: 500; text-align: left;}
.mytable { border-collapse: collapse; width: 100%; border-left: 1px solid teal;}
table#t03 td { padding-left: 20px; text-align: left; border: 1px solid #dddddd;}
table#t03 tr:nth-child(even) { background-color: #eee; font-size: 11px;}
table#t03 tr:nth-child(odd) { background-color:#FFFAF1 ; font-size: 11px;} /*darker #ffe4b2;*/
table#t03 th { padding-left:20px; border: 1px solid #dddddd; color: teal;font-size: 12px; font-weight: 500; }
table#t04 td { padding-left: 20px; text-align: left; border: 1px solid #dddddd;}
table#t04 tr:nth-child(even) { background-color: #eee; font-size: 11px;}
table#t04 tr:nth-child(odd) { background-color:#FFFAF1 ; font-size: 11px;} /*darker #ffe4b2;*/
table#t04 th { padding-left:20px; border: 1px solid #dddddd; color: teal;font-size: 12px; font-weight: 500; max-width:200px}
table#t05 td { padding-left: 20px; text-align: left; border: 1px solid #dddddd;}
table#t05 tr:nth-child(even) { background-color: #eee; font-size: 11px;}
table#t05 tr:nth-child(odd) { background-color:#FFFAF1 ; font-size: 11px;} /*darker #ffe4b2;*/
table#t05 th { padding-left:20px; border: 1px solid #dddddd; background-color: #eee; color: teal;font-size: 12px; font-weight: 800; }
.mytablemax {max-width:500px;}
.separator{ padding: 5px; text-align: center; background-color: #ffe4b2;font-size: 14px;
font-family: Roboto; }
.p-rob { font-family: Roboto; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 24px; }
.th-rob { font-family: Roboto; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 18px;}
/*w3 Margins and Padding*/
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
.w3-container:after,
.w3-row:after,.w3-row-padding:after,.w3-topnav:after,.w3-clear:after,
.w3-btn-group:before,.w3-btn-group:after,.w3-btn-bar:before,.w3-btn-bar:after {content:"";display:table;clear:both}
.w3-col.s12,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{width:99.99999%}
.w3-padding-medium,.w3-padding,.w3-form{padding:8px 16px!important}
.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}
.w3-padding-0{padding:0!important} .w3-padding-top{padding-top:8px!important}.w3-padding-bottom{padding-bottom:8px!important}
.w3-padding-left{padding-left:16px!important}.w3-padding-right{padding-right:16px!important}
.w3-left{float:left!important}.w3-right{float:right!important}
.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}
.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}
.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
.w3-vertical{word-break:break-all;line-height:1;text-align:center;width:0.6em}
.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}
.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.w3-display-topmiddle{position:absolute;left:0;top:0;width:100%;text-align:center}.w3-display-bottommiddle{position:absolute;left:0;bottom:0;width:100%;text-align:center}
.w3-circle{border-radius:50%!important}
.w3-round-small{border-radius:2px!important}.w3-round,.w3-round-medium{border-radius:4px!important}
.w3-round-large{border-radius:8px!important}.w3-round-xlarge{border-radius:16px!important}
.w3-round-xxlarge{border-radius:32px!important}.w3-round-jumbo{border-radius:64px!important}
.w3-border-0{border:0!important}
.w3-border{border:1px solid #ccc!important}
.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
.w3-margin{margin:16px!important}.w3-margin-0{margin:0!important}
.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}
.w3-section{margin-top:16px!important;margin-bottom:16px!important}
.w3-padding-tiny{padding:2px 4px!important}.w3-padding-small{padding:4px 8px!important}
.w3-padding-medium,.w3-padding,.w3-form{padding:8px 16px!important}
.w3-padding-xlarge{padding:16px 32px!important}
.w3-padding-xxlarge{padding:24px 48px!important}.w3-padding-jumbo{padding:32px 64px!important}
.w3-padding-4,.w3-padding-hor-4{padding-top:4px!important;padding-bottom:4px!important}
.w3-padding-8,.w3-padding-hor-8{padding-top:8px!important;padding-bottom:8px!important}
.w3-padding-12,.w3-padding-hor-12{padding-top:12px!important;padding-bottom:12px!important}
.w3-padding-18 {padding-top:16px!important;padding-bottom:16px!important}
.w3-padding-0{padding:0!important}
.w3-padding-top{padding-top:8px!important}
.w3-padding-bottom{padding-bottom:8px!important}
.w3-padding-left{padding-left:16px!important}
.w3-padding-right{padding-right:16px!important}