/* -----------------------------------------------------------------------------
   AUA text asset styling.

   Every selector in here is prefixed with "AUA-" on purpose. this file is loaded
   site wide for the AUA client, so any bare element selector (table, th, td...)
   or generic class name (.headshot, .noborder) would bleed into unrelated pages
   like admin grids and report tables. keeping everything behind the AUA- prefix
   means these rules only apply to markup that explicitly opts in.

   Gotcha: the text asset HTML in the database has to use the prefixed class
   names too. plain <table> markup no longer picks up the bordered look - it
   needs class="AUA-table".
   -------------------------------------------------------------------------- */

h2.AUA-us-header,
h3.AUA-us-header {
text-transform: uppercase;
font-weight: 600;
}
h2.AUA-us-header {
font-size: 1.3em;
border-bottom-width: 1px;
border-bottom-style: solid !important;
border-bottom-color: #00567a !important;
}
h2.AUA-us-header span {
border-bottom-width: 4px;
border-bottom-style: solid !important;
border-bottom-color: #00567a !important;
margin-bottom: 0.2em;
padding: 1px 2px 0 0;
}
h3.AUA-us-header {
font-size: 1.2em;
margin-bottom: 0.1em;
}
div.AUA-full-row {
width: calc(100% + 10px);
margin-right: -5px;
margin-left: -5px;
margin-bottom: 10px;
}
div.AUA-us-img-responsive {
width: calc(100% - 12px);
margin: 5px 5px 1.4em 5px;
border-style: solid !important;
border-width: 1px !important;
border-color: #264059 !important;
float: left;
}
div.AUA-us-img-responsive img,
div.AUA-us-img-responsive a img {
width: 100%;
height: auto;
}
div.AUA-us-img-responsive div.AUA-us-img-description {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #264059;
/*margin-top: 5px;*/
padding: 1em;
font-size: 1em;
font-style: italic;
background-color: #edf2f7 !important;
}
div.AUA-us-img-responsive div.AUA-us-img-description span {
font-style: normal;
font-weight: 600;
}
div.AUA-us-panel {
width: 100%;
float: right;
border-style: solid !important;
border-width: 1px !important;
border-color: #264059 !important;
background-color: #edf2f7 !important;
margin-left: 0.66em;
margin-bottom: 0.66em;
color: #080d12 !important;
}
div.AUA-us-panel div.AUA-us-panel-header {
font-size: 1.2em;
text-align: center;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-bottom-color: #264059 !important;
padding: 0.25em 0 0.25em 0;
margin-bottom: 0.25em;
background-color: #a6bfd9;
color: #fff;
}
div.AUA-us-panel div.AUA-us-panel-body {
text-align: center;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-bottom-color: #264059 !important;
font-size: 1em;
}
div.AUA-us-panel div.AUA-us-panel-body p,
div.AUA-us-panel div.AUA-us-panel-body div,
div.AUA-us-panel div.AUA-us-panel-body ul {
margin-bottom: 0.5em;
font-size: 1em;
padding: 0 !important;
}
div.AUA-us-panel div.AUA-us-panel-body p.AUA-name {
font-size: 1.05em;
font-weight: 500;
}
div.AUA-us-panel div.AUA-us-panel-footer div {
text-align: center;
margin-top: 0.5em;
margin-bottom: 0.5em;
padding-bottom: 0.5em;
}
div.AUA-us-panel div:not(:last-child) {
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-bottom-color: #264059 !important;
}
blockquote.AUA-us-blockquote {
border-style: solid !important;
border-width: 1px !important;
border-color: #cceddb !important;
padding: 0.75em 1em 0.75em 1em;
margin: 0 0 1em 0;
background-color: #e8f7f5 !important;
}
blockquote.AUA-us-blockquote p {
font-size: 1.05em;
font-style: normal;
margin-bottom: 0px;
}
blockquote.AUA-us-blockquote p span {
font-style: italic;
font-weight: 600;
}
div.AUA-us-container {
padding: 0px;
}
ol.AUA-us-list-reference,
ul.AUA-us-list-reference {
padding-left: 33px !important;
}
ol.AUA-us-list-reference li,
ul.AUA-us-list-reference li {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #d0d3d4;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #d0d3d4;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #d0d3d4;
padding: 0.4em 0.35em 0.4em 0.35em;
margin-bottom: 0px !important;
word-wrap: break-word;
}
ol.AUA-us-list-reference li:last-child,
ul.AUA-us-list-reference li:last-child {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #d0d3d4;
}
ol.AUA-us-list-reference li:nth-child(even),
ul.AUA-us-list-reference li:nth-child(even) {
background-color: #e9ebeb !important;
}
ol.AUA-us-list-reference li:nth-child(odd),
ul.AUA-us-list-reference li:nth-child(odd) {}
.AUA-us-cf {
clear: both;
}
@media (min-width: 768px) {
div.AUA-us-img-responsive.AUA-col-3 {
width: calc(25% - 12px);
}
div.AUA-us-img-responsive.AUA-col-4 {
width: calc(33% - 12px);
}
div.AUA-us-img-responsive.AUA-col-6 {
width: calc(50% - 12px);
}
div.AUA-us-img-responsive.AUA-us-right {
float: right;
margin: 5px 5px 5px 10px;
}
div.AUA-us-img-responsive.AUA-us-left {
float: left;
margin: 5px 10px 5px 5px;
}
div.AUA-us-img-responsive div.AUA-us-img-description {
font-size: 0.75em;
}
ol.AUA-us-list-reference,
ul.AUA-us-list-reference {
padding-left: 30px !important;
}
}
@media (min-width: 992px) {
h3.AUA-us-header {
font-size: 1.25em;
}
div.AUA-us-panel {
width: 33%;
}
div.AUA-us-panel div.AUA-us-panel-header {
font-size: 1.2em;
}
div.AUA-us-panel div.AUA-us-panel-body p,
div.AUA-us-panel div.AUA-us-panel-body div,
div.AUA-us-panel div.AUA-us-panel-body ul {
font-size: 0.9em;
}
div.AUA-us-panel div.AUA-us-panel-footer div {
font-size: 0.9em;
}
}
@media (min-width: 1200px) {
h3.AUA-us-header {
font-size: 1.3em;
}
h2.AUA-us-header {
font-size: 1.5em;
}
}
/* was "table, th, td" - a bare element selector that bordered every table in the
   app, including admin grids and reports. now the table has to opt in with
   class="AUA-table" and only its own cells get the border treatment. */
table.AUA-table,
table.AUA-table th,
table.AUA-table td {
border: 1px solid black;
border-collapse: collapse;
}
table.AUA-table th,
table.AUA-table td {
padding: 5px;
}
.AUA-noborder{
border: 0px !important;
border-style: none !important;
}
.AUA-headshot {
object-fit: cover;
width:150px;
height:150px !important;
}
@media only screen and (max-width: 600px) {
.AUA-headshot {
object-fit: contain;
object-position: center;
width:250px;
height:250px !important;
}
}