/* CSS Document */

html {-webkit-text-size-adjust:none;}

::-webkit-scrollbar {width:16px; height:16px;}
::-webkit-scrollbar-button {width:16px; height:16px; background:#292929;}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
  display: block;
}
::-webkit-scrollbar-track {
  background:#9A9A9A;
  border:1px solid #FFFFFF;
  border-radius:40px;
}
::-webkit-scrollbar-track:hover,
::-webkit-scrollbar-track:active {background:#9A9A9A;}

::-webkit-scrollbar-thumb {
  background:#666666;
  border:1px solid #FFFFFF;
  border-radius:50px;
}
::-webkit-scrollbar-thumb:vertical {height:80px;}
::-webkit-scrollbar-thumb:hover, 
::-webkit-scrollbar-thumb:active {background:#444444;}

::-webkit-scrollbar-corner {background:transparent;}

body {   
  background-image:url(../images/city2.jpg);
  background-size:100%;
  background-repeat:no-repeat;
  background-color:#000000;
}
a {-webkit-touch-callout:none;} /*prevents iphones from doing anything on press and hold */

:root {
  scroll-behavior:smooth; /*makes scrolling smooth for back to top button*/
  --bg-color:#232323;
  --font-color:#FFFFFF;
  --borderb-color:#FFFFFF;
  --text-deco:none;
  --bg-image:none;
}
[data-theme="singledark"] {
  --bg-color:#232323;  
  --font-color:#FFFFFF;
  --borderb-color:#FFFFFF;
  --text-deco:none;
  --bg-image:none;
}
[data-theme="singlelight"] {
  --bg-color:#FFFFFF;
  --font-color:#FF2222;
  --borderb-color:#FFFFFF;
  --text-deco:underline;
  --bg-image:none;
}
[data-theme="multidark"] {
  --bg-color:#232323;
  --font-color:#FFFFFF;
  --borderb-color:#FFFFFF;
  --text-deco:none;
  --bg-image:url(../webpages/arrows/arrowhead_white.gif);
}
[data-theme="multilight"] {
  --bg-color:#FFFFFF;
  --font-color:#FF2222;
  --borderb-color:#232323;
  --text-deco:none;
  --bg-image:url(../webpages/arrows/arrowhead_red.gif);
} 
.scrollbtn {
  position:fixed;
  bottom:15rem;
  right:1rem;
  border-radius:50%;
  border:1px solid #000000;
  cursor:pointer;
  height:3rem;
  width:3rem;
  display:none; 
  /*arrow color set by fill='%23000000' where %23 is a url escape for #*/ 
  /*%3E = >, %3C = <, M = move to, L = line to, and C = curve to (followed by coordinates)*/ 
  background:#FE0000 url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23000000' d='M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z' /%3E%3C/svg%3E") center no-repeat;  
  opacity: 0.7;
} 
.scrollbtn:link, .scrollbtn:visited {opacity:0.7;} 
.scrollbtn:hover, .scrollbtn:active {opacity:1;}

.searchform {
  display:flex;
  height:28px;  
  justify-content:flex-start;
  align-items:center;
  background-color:#FFFFFF;
}
.searchbar {
  width:145px;
  height:28px;
  text-align:left;
  font-size:13px;
  font-family:Arial, Helvetica, sans-serif;
  color:#000000;
  background-color:#FFFFFF;
  padding:5px 8px 5px 8px;
  border:0px;  
}
.searchbar:focus {
  outline:none;
}
datalist {
  position:absolute;
  top:108px;
  left:144px;
  width:max-content;
  height:215px;
  overflow-y:scroll;
  padding:3px 0px 3px 0px;
  display:none;
  opacity:0;
  background-color:#FFFFFF;  
  border:1px solid #232323;
  font-family:Arial, Helvetica, sans-serif;  
  font-size:13px;  
  color:#000000;   
}
datalist::-webkit-scrollbar {width:10px;}
datalist::-webkit-scrollbar-button {height:0px;}
option {
  text-align:left;  
  font:bold 13px Arial;
  color:#000000;  
  cursor:pointer;
  padding:3px 10px 3px 10px;
}
option:hover, .active {  
  color:#FF2222;
  text-decoration:underline;
}
.cancelbtn {
  width:20px;
  height:28px;  
  padding-top:6px; 
  border:0px;
  cursor:pointer; 
  fill:#000000;  
}
.cancelbtn:hover {
  fill:#FF2222;  
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {display:none;}

.searchbtn {
  width:34px;
  height:28px;   
  padding-top:3px; 
  padding-right:3px;  
  border:0px;  
  cursor:pointer;
  background-color:#EEEEEE;
  fill:#000000;
}
.searchbtn:hover {
  background-color:#FFFFFF;
  fill:#FF2222;
}
.results { 
  display:none; 
  width:199px;
  height:28px; 
  max-height:200px; 
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  border-top:1px solid #232323; 
  border-bottom:1px solid #232323;  
  text-align:left;
  font-size:13px;
  font-family:Arial, Helvetica, sans-serif;
  color:#000000;
  background-color:#FFFFFF;   
}

.results-link {color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
.results-link:link, .results-link:visited {color:#000000; text-decoration:none;}
.results-link:hover, .results-link:active {color:#FF2222; text-decoration:underline;}

.results::-webkit-scrollbar {width:8px; height:8px; background:#292929;}
.results::-webkit-scrollbar-button {width:8px; height:5px; background:#292929;}
.results::-webkit-scrollbar-button:start:decrement, 
.results::-webkit-scrollbar-button:end:increment {
  display: block;
} 
.results::-webkit-scrollbar-track {
  background:#9A9A9A;
  border:1px solid #FFFFFF;
  border-radius:40px;
}

.results::-webkit-scrollbar-track:hover,
.results::-webkit-scrollbar-track:active {background:#9A9A9A;} 

.results::-webkit-scrollbar-thumb {
  background:#666666;
  border:1px solid #FFFFFF;
  border-radius:50px;
}
.results::-webkit-scrollbar-thumb:vertical {height:5px;}
.results::-webkit-scrollbar-thumb:hover, 
.results::-webkit-scrollbar-thumb:active {background:#444444;}

.results::-webkit-scrollbar-corner {background:#292929;}

.noresults {
  height:initial;
  padding-left:8px;
  line-height:28px; 
}

ol {font-weight:bold; padding-inline-start:1.7em;}
.results a {font-weight:normal;}
 
#heading {
  width:836px; 
  height:100px;		
  margin-left:auto; 
  margin-right:auto; 
  text-align:center;	
}
#maincontainer {
  position:relative; /*all absolutely positioned items inside this container are relative to this container's position*/
  width:836px;
  height:720px;
  background-color:transparent;
  border-width:1px 0px 1px 0px;
  border-style:solid; 
  border-color:#FFFFFF;   
  margin-left:auto;
  margin-right:auto;
  margin-bottom:500px;
  text-align:center;
}
#mainmenu {
  position:absolute; /*top left side of maincontainer div*/
  top:0px;
  left:0px;
  z-index:10;
  width:199px;  
  max-height:10000px;
  border-width:0px 1px 0px 1px;
  border-style:solid; 
  border-color:#FFFFFF;    
}
/* Menu - all links within #mainmenu */	
#mainmenu a {
  padding:5px 8px 5px 8px;
  float:none;
  display:block;
  white-space:nowrap;
  text-align:left;
  font:bold 13px Arial;
}
/* Menu - classes for javascript light and dark data-themes */
.singles {
  background-color:var(--bg-color);
  color:var(--font-color);  
  border-color:var(--borderb-color);
  text-decoration:var(--text-deco);
  background-image:var(--bg-image);
  border-width:0px 0px 1px 0px;   
  border-style:solid;     
  transition: all 0.3s;
}
.multis {
  background-color:var(--bg-color);
  color:var(--font-color);  
  border-color:var(--borderb-color);
  text-decoration:var(--text-deco); 
  background-image:var(--bg-image);
  border-width:0px 0px 1px 0px;   
  border-style:solid;  
  background-repeat:no-repeat;
  background-position:96% 50%;
}
.closed {display:none;}

/* Menu - Sub Items */
#mainmenu a.sub, #mainmenu a.subsingle {
  color:#000000;
  text-decoration:none;
  background-color:#CCCCCC;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
/* Menu - Sub Items Hover */	
#mainmenu ul li:hover>a {	
  color:#FF2222;
  text-decoration:underline;
}
#mainmenu a.subsingle:hover {	
  color:#FF2222;
  text-decoration:underline;
  background-color:#FFFFFF;
}
/* Menu - Sub Items Arrows */	
#mainmenu a.sub {	
  background-image:url(../webpages/arrows/arrow_white.gif); 
  background-repeat:no-repeat;
  background-position:96% 50%;		
}
#mainmenu div:hover > a.sub {
  background-color:#FFFFFF;
  color:#FF2222;
  background-image:url(../webpages/arrows/arrow_FF2222.gif);
  background-repeat:no-repeat;
  text-decoration:none;
}
/* Menu - List Styles */
#mainmenu ul {
  position:absolute;
  z-index:10;
  list-style-type:none; 
  width:auto;
  padding:3px;
  background-color:#FFFFFF;   				
  border:1px solid #232323;
}
/* Menu - List Items */	
#mainmenu ul a {	
  padding:4px 25px 4px 5px;  
  color:#000000; 
  text-decoration:none;   
}
/* Codes to hide and show Menu Sub Items */
#mainmenu ul {display:none;}
#mainmenu div:hover a.sub, #mainmenu div:hover a.subsingle {display:block;}
#mainmenu div:hover>ul{display:block; left:98.5%; margin-top:-40px;}

/* News Title Link - is in mainmenu div */
#mainmenu a.news-link {
  height:22px;
  padding-top:10px;
  color:#FFFFFF;
  text-decoration:none;  
  background-color:#232323;
  border-bottom:1px solid #FFFFFF;  
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#mainmenu a.news-link:link, .news-link:visited {text-decoration:none;}
#mainmenu a.news-link:hover, .news-link:active {
  background-color:#FFFFFF;
  text-decoration:underline;
  color:#0390F3;
  border-bottom: 1px solid #232323;  
}
/* End of Menu */

#newsRefresh {
  position:absolute; /*middle left side of maincontainer div*/
  top:193px;
  left:0px;
  z-index:1;
  width:199px;
  height:43px;
  background-color:#232323;
  border-left:1px solid #FFFFFF;
  border-right:1px solid #FFFFFF;
  text-align:left;	  
}
#newsButton {  
  background-color:#232323; 
  border:1px solid #000000; 
  padding:5px;
  margin-top:10px;
  margin-left:7px;
}
:focus:not(:focus-visible) {
  outline:none;
} 
:focus-visible {
  outline:1px solid #000000;
}
.button-link {
  color:#FFFFFF;  
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
}
.button-link:link, .button-link:visited {color:#FFFFFF; text-decoration:none;}
.button-link:hover, .button-link:active {color:#08B4F9; text-decoration:underline;}

#newsDiv {
  position:absolute; /*middle left side of maincontainer div*/
  top:220px;
  left:0px;
  z-index:0;
  width:200px;
  height:455px;  
  overflow-x:hidden;
  overflow-y:scroll;
  -webkit-overflow-scrolling:touch;
  color:#FFFFFF;
  background-color:#232323;
  font-size: 13px;
  font-family:Arial, Helvetica, sans-serif;
  text-align:left;
  margin-top:0px;
  border-left:1px solid #FFFFFF;  
}
#newsDiv a, #newsDiv a:link, #newsDiv a:visited {color:#FFFFFF; text-decoration:none;}
#newsDiv a:hover, #newsDiv a:active {color:#08B4F9; text-decoration:underline;}

.date {font-size:10px;color:#08B4F9;}

#newsList {
  list-style-type:none;
  font-size: 13px;
  margin-left:-30px;
  padding-top:0px;
  padding-right:5px;
  line-height:15px;  
}
#newsList a, #newsList a:link, #newsList a:visited {color:#FFFFFF; text-decoration:none;}
#newsList a:hover, #newsList a:active {color:#08B4F9; text-decoration:underline;}

#footer {
  position:absolute; /*bottom left side of maincontainer div*/
  top:670px; 
  left:0px; 
  z-index:0;
  width:200px; 
  height:45px;
  padding-top:4px;
  background-color:#232323;
  text-align:center;
  border-width:1px 0px 0px 1px;
  border-style:solid; 
  border-color:#FFFFFF;   
}
.contact-link {color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;	font-size:10px;}
.contact-link:link, .contact-link:visited {text-decoration:none;}
.contact-link:hover, .contact-link:active {text-decoration:underline;}

.wallpaper-link {color:#AAAAAA; font-size:8px; font-family:Arial, Helvetica, sans-serif;}
.wallpaper-link:link, .wallpaper-link:visited {text-decoration:none;}
.wallpaper-link:hover, .wallpaper-link:active {color:#FFFFFF; text-decoration:underline;}
 
#frame {
  position:absolute;  /*right side of maincontainer div*/
  top:0px;
  right:0px;
  width:634px;
  height:720px;
  border-width:0px 1px 1px 1px;
  border-style:solid; 
  border-color:#FFFFFF;   
  background-color:transparent;
  /*all pages loaded into frame div with non-transparent backgrounds have background color set in frameSize.js*/
}