/* ------------------------------------------- */
/* Simulating a table layout with flexbox      */
/* ------------------------------------------- */

/* override what is in unity.css */
article ul {
 margin:0;
 padding:0;
}

/* override what is in unity.css */
article ul li {
 margin:0;
 display:flex;
}

.item_name {
 border: 1px solid #323133;
 border-top: none;
 padding: 1% 2% 1% 1%;
 font-family: "Lucida Console", "Courier New", monospace;
 flex: 0 1 20%;
 min-width: 145px;
} 

.item_name h4 {
 margin: 0;
 font-size: 1.15rem;
}

.item_info {
 border-right: 1px solid #323133;
 border-bottom: 1px solid #323133;
 padding: 1%;
 flex: 1 1 80%;
} 

.item_info ul {
 margin: 10px 0 0 0;
}

.item_info ul li {
 list-style-type: none;
 display: inline;
 padding: 0 1.5rem;
}

.item_info ul li a {
 text-transform: uppercase;
 font-weight: bold;
 font-size: 0.85em;
 line-height: 1.3em;
 margin:0;
 padding: 1%;
}

.item_info ul li a:hover,
.item_info ul li a:active {
 text-decoration: none;
 background-color: #00797c;
 color: #FFFFFF;
}

.title {
 background-color: #00797c;
 color: #FFFFFF;
 border: 1px solid #323133;
}


.title .item_name {
 font-family: inherit !important;
 border: none;
 border-right: 1px solid #323133;
}
 
.title .item_info {
 border: none;
}

.nomargin {
 margin: 0 !important;
} 

/* inactive mailing lists */
.item_info ul li .inactive {
 text-transform: uppercase;
 text-decoration: line-through;
 font-weight: bold;
 font-size: 0.85em;
 line-height: 1.3em;
 margin:0;
 padding: 1%;
}

.item_name.inactive b {
 font-size: 1rem;
}

.item_name.inactive small {
 font-family: "Poppins", "UbuntuRegular", "Lucida Grande", Verdana, Arial;
}


/* ------------------------------------------- */
/* Styling for narrow screens                  */
/* ------------------------------------------- */


@media all and (max-width: 1120px) {
 .item_info ul li {
  padding: 0 0.8rem !important;
 }
}

@media all and (max-width: 1010px) {
 .item_info ul li {
  padding: 0 0.5rem !important;
 }
}

@media all and (max-width: 960px) {
 .item_info ul {
  margin: 5px 0 0 0;
  padding: 0 !important;
 }
 .item_info ul li {
  display: block;
  margin: 0;
  padding: 0 !important;
 }
}

@media all and (max-width: 900px) {
 article ul li {
  flex-direction: column;
 }

 .item_name {
  order:1;
  border-bottom: none;
 }

 .item_info {
  order:2;
  border-left: 1px solid #323133;
 }

 .title .item_info {
  display: none;
 }
}