/****************************************************************
** Joomla Cassiopeia Styles
*****************************************************************/
header
{
  background-color:#141414 !important;
  background-image:none !important;
}

header > div.grid-child.container-below-top
{
  background-color:#222 !important;
}
.container-header .mod-menu > li
{
  padding: 5px 10px;
}
.container-header .mod-menu > li.active
{
  background: #333;
}
.container-header .mod-menu > li.active:after
{
  background: #222;
}
body.wrapper-fluid .site-grid
{
  padding:20px 3%;
  grid-gap: 0 2em;
  /*grid-template-columns: [ full-start ] minmax(0, 1fr) [ main-start ] repeat(8, minmax(0, 12%)) [ main-end ] minmax(0, 1fr) [ full-end ] !important;*/
  grid-template-columns: [ full-start ] minmax(0, 500px) [ main-start ] repeat(8, minmax(0, 12%)) [ main-end ] minmax(0, 1fr) [ full-end ] !important;
}

.container-header nav
{
  margin-bottom: 0.3em;
}

/****************************************************************
** Feature Styles
*****************************************************************/
.item-title
{
  /*border-bottom: 2px solid #CCC;*/
  padding: 4px 2px;
}
.item-title a
{
  text-decoration: none;
  color:#044;
}

/*.blog-featured*/
.item-content p
{
  border-bottom-style: solid;
  border-width: 2px;
  border-color: #CCC; 
  border-radius: 5px;
  padding: 10px 30px 20px 20px;
}

/****************************************************************
** Custom Article Styles 
*****************************************************************/

/* Special Section 2 styles */
.section-1
{
  border: 2px solid #999;
  background: #DDD;
  border-radius: 10px;
  padding: 10px;
}

.section-1 div.caption
{
  font-weight:bold;
  color:#222;
}

/****************************************************************
** Section 2 Styles
*****************************************************************/

/* Special Section 2 styles */
.section-2
{
  padding: 10px 0px;
}

.section-2 h1
{
  border-bottom-style: solid;
  border-color:#555;
  border-width:3px;
}

.section-2 h2
{
  background-color:#F7F7F7;
  padding: 10px 10px;
  font-size: 1.75rem;
  border-radius:5px;
  border-bottom-style: solid;
  border-left-style: solid;
  border-color:#CCC;
  border-width:3px;
}

.section-2 h3
{
  padding: 10px 10px;
  font-size: 1.4rem;
  border-bottom-style: solid;
  border-color:#DDD;
}

.section-2 h4
{
  padding: 10px 10px;
  font-size: 1.15rem;
  color: #333;
}

.section-2 .D1, .section-2 .D1 p, .section-2 .D1 ul
{
  margin: 0em 0em 0em 1em;
}

.section-2 .D2
{
  margin: 0em 0em 0em 2em;
}

.section-2 .D3
{
  margin: 0em 0em 0em 3em;
}

.code-documentation
{
  border: solid;
  border-color: #DDD;
  border-width: 2px;
  margin: 10px 15px !important;
}

.code-documentation .code-doc-title
{
  font-weight: bold;
  font-style:italic;
}

.code-documentation li p
{
  font-weight: 0;
}

.code-documentation ul
{
  margin: 15px 15px !important;
}

.code-variable
{
  color:#00F;
  font-family: var(--font-monospace);
}

.code-implementation
{
  padding: 2px 2px;
  margin: 15px 15px;
  border: 2px solid #DDD;
  background-color: #EEE
}
.code-implementation .implementation-title
{
  font-weight:bold;
}

/****************************************************************
** Image Modal Data
*****************************************************************/
.ads-art-img
{
  cursor:pointer;
  border-radius: 5px;
  border: 3px solid #DDD;
}

.ads-art-img:hover
{
  border-radius: 5px;
  border: 3px solid #AAA;
}

.ads-img-400
{
  max-width: 400px;
}

.ads-img-800
{
  max-width: 800px;
}

.ads-img-1200
{
  max-width: 1200px;
}

/****************************************************************
** Modal
*****************************************************************/
/* The Modal (background) */
.ads-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 20; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9) !Important; /* Black w/ opacity */ 
}

/* Modal Content/Box */
.ads-modal-content {
  background-color: #f0f0f0;
  margin: 15% auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}
.ads-modal-header
{
  background-color: #666;
  color: #CCC;
  font-weight:bold;
  font-size: 18px;
  padding: 5px 15px 10px 15px;
  clear:right;
}

.ads-modal-header div
{
  display:flow-root;
}

/* The Close Button */
.ads-modal-close
 {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.ads-modal-header-clear
{
  clear:both;
  display:none;
}

.ads-modal-close:hover,
.ads-modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/** --------------------------- Image Modal ----------------------- */
.ads-modal-img
{
  display:block;
  margin-top: 10%;
  margin-left:auto;
  margin-right:auto;
}

.ads-modal-img-caption
{
  text-align:center;
  color: #DDD;
  padding-bottom:25px;
}

/** --------------------------- Dialog Modal ----------------------- */

.ads-modal-header-txt
{
  font-size:28px;
}

.ads-modal-dlg-msg
{
  background-color: #fdfdfd;
  padding:15px 10px;
}

.ads-modal-dlg-footer
{
  background-color: #fdfdfd;
  padding:5px 10px;
  border-top:1px;
  border-style: solid;
  border-color: #DDD;
}