/* 
    KCARCS stylesheet.  Created and maintained by Bob Smith, AI7CS.
	Started July 17, 2021.
*/
body {
  align: center;
  margin: 0;
}

.footer {
  margin: 0px;
  padding: 0px;
  border-top: ridge 3px black;
}

.iupdate {
  float: left;
  padding-left: 15px;
  padding-bottom: 10px;
}

.icopyright {
  float: right;
  padding-right: 15px;
  padding-bottom: 10px;
}

.cs-container {
  padding:0.01em 16px;
}
.cs-indent {
  padding-left:25px;
}

.navcs {
  overflow: hidden;
  /*background-color: #ac5c5d;*/
  color: white;
  background-color: #a95759;
}

.acs_navcs {
    overflow: hidden;
	background-color: #000099;
    color: #ffd700;
}
.navcs a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.acs_navcs a {
  float: left;
  font-size: 16px;
  color: inherit;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  color: inherit;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  text-align: center;
  border: none;
  outline: none;
  color: inherit;
  padding: 16px;
  background-color: inherit;
  font-family: inherit;
  margin:1px;
}

.navcs a:hover, .dropdown:hover .dropbtn {
  background-color: #111111;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.cs-center { 
  text-align:center; 
}

.cs-sidebar {
  height:100%;
  width:200px;
  background-color:#fff;
  position:fixed!important;
  z-index:1;
  overflow:auto
}

.accent {
    font-weight: bold;
    margin: 0px;
    padding-left:10px;
	font-size: 16px;
}

.tableborder {
	border: 0px;
	padding: 0px;
}
.hdralign {
	text-align:right; 
	padding-right:15px;
}

.announce {
    /*background-color:RoyalBlue;*/
	background-color: #934c30;
    color:white;
    text-align:center;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size:20px;
    font-weight: bold;
}

.acs_announce {
    background-color: #000099;
    color: #ffd700;
    text-align:center;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size:20px;
    font-weight: bold;
}

.alert {
	background-color:red;
	color:white;
	text-align:center;
}

.sidecard {
	box-shadow:5px 10px 8px #888888;
	margin-bottom: 15px; 
	padding-bottom: 5px;
}
	
.sidetitle {
  /* background-color:teal; */
  background-color: #a95759;
  color: white;
  padding-left: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  font-size:20px;
  font-weight: bold;
  /*border: 2px solid red;
   margin: 1px; */
}

.acs_sidetitle {
  /* background-color:teal; */
  background-color: #000099;
  color: #ffd700;
  padding-left: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  font-size:20px;
  font-weight: bold;
  /*border: 2px solid red;
   margin: 1px; */
}

.sidetable {
	text-align: left;
    margin-bottom: 5px;
	/*border-spacing: 5px;*/
    /*border: 2px solid blue;*/
}

.silentlist {
	/*list-style-type: none; */
	padding-left: 15px;
	/*border: 2px solid yellow;*/
} 

ul.whatsnewlist {
	list-style-type: square; 
	padding-left: 15px;
} 

.whatsnewlist li {
    /*color: red;*/
	list-style-position: inside;
	padding-left: 15px;
} 

.listheader {
	/* background-color: #40E0D0;*/
    background-color: #d6c4b8;
	color: black;
    padding-left:10px;
    padding-top:5px;
    padding-bottom:5px;
    margin: 0px;
	/*border: 1px solid red; */
}

.acs_listheader {
	/* background-color: #40E0D0;*/
    background-color: RoyalBlue;
    color: white;
    padding-left:10px;
    padding-top:5px;
    padding-bottom:5px;
    margin: 0px;
	/*border: 1px solid red; */
}
p, img {
    padding-left:10px;
    padding-right:10px;
}

.thdr {
	padding: 5,2,5,2; 
	background-color: #d6c4b8;
	color: black;
}

.acs_thdr {
	padding: 5,2,5,2; 
	background-color: RoyalBlue;
	color: white;
}

td { padding: 5px; text-align:left; }	

.cent { padding: 5px; text-align: center; }

.netlink { color:black; font-style:italic; font-weight:bold; }

.cardheader {
	background-color: #d6c4b8;
	/*background-color: #a65335;*/
	color: black;
    padding-left:10px;
    padding-top:5px;
    padding-bottom:5px;
    margin: 0px;
	font-size: 20px;
    font-weight:bold;
}

.acs_cardheader {
	/*background-color: #d6c4b8;*/
	background-color: RoyalBlue;
	color: white;
    padding-left:10px;
    padding-top:5px;
    padding-bottom:5px;
    margin: 0px;
	font-size: 20px;
    font-weight:bold;
}

.breadcrumb {
	float:right;
	padding:14px 16px;
	text-align:center;
	color:inherit;
	font-style: italic;
	font-weight:bold;
}

.masthead {
    display: block;
	margin-left: auto;
	margin-right: auto;
}
/* from w3.css */
  html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
  html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
  h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

/* Left and right column */
.column.side {
  width: 25%;
  background-color:#ffffff;
}

/* Middle column */
.column.middle {
  width: 75%;
  background-color:#ffffff;
}
.column.main {
  width: 80%;
  background-color:#ffffff;
}

/* Middle column */
.column.half {
  width: 50%;
  background-color:#ffffff;
}

.column.img {
  width: 20%;
  float: left;
  background-color: #ffffff;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

div.gallery {
  border: 1px solid #ccc;
  margin-bottom: 4px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
  padding-top: 4px;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
}