/*****************************************************************************************
* nsa-styles.css - August 2025 *
* Styles for version 5 of NSACR website *
* Covers all but Headers, Menus and Footers
*****************************************************************************************/
/* Flex row and display boxes */
.flex-row {display: flex; flex-direction: row; flex-wrap: wrap; margin: 0 auto;}
.stretch-box, .whole-box, .half-box, .third-box, .quarter-box {width: 95%; font-size: 16px; font-weight: normal; margin: 10px auto; padding: 5px 10px;}
.stretch-box, .whole-box, .half-box, .third-box, .quarter-box  p {text-align: left; color: black;}
.whole-box p.pagetitle {margin: 0px 0px 10px 0px; font-size: 20px; font-weight: bold; color: black; border-bottom: 2px solid DodgerBlue;}
.whole-box p.headline, .half-box p.headline,
.third-box p.headline, .quarter-box p.headline {margin: 0px 0px 10px 0px; font-size: 18px; font-weight: bold; color: black; border-bottom: 2px solid LimeGreen;}
div.field-box {margin: 5px 0px 10px 15px; padding: 0; box-shadow: none;}

/* Link colours */
.link-color a:link, a:visited {color: DodgerBlue; text-decoration: none;}
.link-color a:hover {color: FireBrick; border-bottom: 1px solid DodgerBlue;}
.link-color a:active {color: Red; text-decoration: none; border-bottom: 1px solid Red;}

/* General error message */
p.error-msg {font-family: arial; font-weight: normal; font-size: 18px; text-align: center; color: red; padding: 0; margin: 25px 5px 15px;}

/* General purpose browse table */
table.browse {text-align: left; border-collapse: collapse; width: 100%}
table.browse th {padding: 5px; border: 1px solid black; text-align: center; vertical-align: middle;}
table.browse td {padding: 5px; border: 1px solid black; text-align: left; vertical-align: middle; font-weight: normal}

/* General purpose list table (also used for sub-tables) */
table.list {text-align: left; border-collapse: collapse; width: 100%}
table.list td {font-weight: normal; padding: 5px; border: 0px; vertical-align: middle;}

/* Section title, label, data & warning text */
.fieldset {margin: 5px 2px 0px; padding: 3px;}
.section-title {font-size: 16px; font-weight: normal!important; color: firebrick!important;}
.label {font-weight: normal!important; color: #38ba00!important;}
.data {font-weight: normal!important; color: black!important;}
.warning {font-weight: bold!important; text-align: center!important; color: FireBrick!important;}
.input {font-family: arial!important; font-weight: normal!important; font-size: 14px!important; color: black!important; padding: 1px 2px!important;}

/* Blue & red text - used to replace <blue> & <red> tags in home page and events pages */
.blue-text {text-align: left; font-size: 16px; font-weight: normal; color: DodgerBlue;}
.red-text {text-align: left; font-size: 16px; font-weight: normal; color: FireBrick;}

/* General purpose buttons */
.button {font-size: 16px; width: 49%; height: 35px; margin: 5px 0px 5px; outline: none; cursor: pointer;}
.button:active {transform: translate(3px,3px);}
.a-button {display: inline-block; font-size: 16px; width: 49%; height: 35px; padding: 10px 0px; margin: 5px 0px 0px;
           text-decoration: none; text-align: center; outline: none; cursor: pointer;}
.a-button-small {display: inline-block; font-size: 16px; width: 49%; height: 25px; padding: 5px 0px; margin: 0px 0px 5px;
                 text-decoration: none; text-align: center; outline: none; cursor: pointer;}

/* Responsive changes for large screen */
@media screen and (min-width: 800px) and (orientation: landscape) {
  .stretch-box {width: auto;}
  .whole-box {width: 98%;}
  .half-box {width: 48%!important;}
  .third-box {width: 31.3%;}
  .quarter-box {width: 23%;}
  .button {width: 100px; margin: 10px 15px 0px;}
  .a-button {width: 100px; margin: 10px 15px 0px;}
  .a-button-small {width: 100px; margin: 0px 5px 5px;}
}