@import url("reset.css");

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    height:100vh;
}

h1 {
    font-family: "Open Sans";
    font-size: 24px;
    font-style: normal;
    font-variant: normal;
    font-weight: 700;
    line-height: 26.4px;
}

h3 {
    font-family: "Open Sans";
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 700;
    line-height: 15.4px;
}

p {
    font-family: "Open Sans";
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 20px;
}

.article-introduction {
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 1em;
}

blockquote {
    font-family: "Open Sans";
    font-size: 14px;
    font-style: italic;
    font-variant: normal;
    font-weight: 400;
    line-height: 20px;

    background-color: #F8F8F8;
    padding:0.8rem;
    padding-left:2rem;

    border-left: solid 10px #404040;
}

pre {
    font-family: "Open Sans";
    font-size: 13px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 18.5714px;
}

li {
    font-family: "Open Sans";
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 20px;
}

.clear {clear: both;}


.img_caption.left {float: left;  margin-right: 15px;}
.img_caption.right {  float: right;  margin-left: 15px;}
.img_caption.left p {clear: left;text-align: center;}
.img_caption.right p {clear: right;  text-align: center;}


a:link, a:visited, a:active {
    color: #0000ff;
    text-decoration: underline;
    outline-color: invert;
    outline-style: none;
    outline-width: medium;
}

a:hover {
    text-decoration: none;
    cursor: pointer;
}

p {
    padding-bottom:1rem;
}

h1 {
    color: #000;
    padding-bottom:1rem;
    font-weight: bold;
}

h2 {
    color: #000;
    padding-bottom:1rem;
    font-weight: bold;
}


h3 {
    color: #000;
    padding-bottom:1rem;
    font-weight: bold;
}

h4 {
    color: #000;
    padding-bottom:1rem;
    font-weight: bold;
}

h5 {
    color: #000;
    font-weight: bold;
}

h6 {
    color: #000;
    font-weight: bold;
}

#wrapper {
    width: 100%;
    margin: 0 auto;
    flex: 1 0 auto;
}

#header {
    background-color:#378A42;
    font-family: Arial, Helvetica, sans-serif;
    padding: 1em 0em;
}

#header img {
    max-width:100%;
}

#header-left {
    display:inline-block;
    width:69%;
    vertical-align:bottom;
    padding-left:1%;
}

#header-right {
    display:inline-block;
    width:29%;
    padding-right:1%;
    vertical-align:top;
}

#header-left p, #header-left a:link, #header-left a:visited, #header-left a:active {
    color:#F8F8FF;
    margin-left:0.1em;
    margin-bottom:0;
    padding-bottom:0;
}

#header-left h1 {
    font-size:3em;
    color:#F8F8FF;
    line-height:normal;
    padding-bottom:0;
    font-weight:normal;
}

#images {
    position: absolute;
    top: 88px;
    left: 16px;
}

#nav a {
    color: #DEDEDE;
    text-decoration: none;
}

#nav ul {
    list-style-type: none;
    margin:0;
    padding:0;
    z-index: 9999;
}

#nav > ul {
    display:block;
    width:100%;
    background-color: #2D3945;
}

#nav > ul > li {
    position: relative;
    display: inline-block;
    background-color: #2D3945;
    margin:0;
}

#nav > ul > li > a{
    display:block;
    padding: 1em;
}

#nav > ul > li:hover {
    background-color: #405061;
}

#nav > ul > li > ul {
    display: none;
    position: absolute;

    background-color: #2D3945;
    top:100%;
    left:0;
}

#nav > ul > li:hover ul {
    display: block;
}

#nav > ul > li:hover ul > li {
    white-space: nowrap;
    padding: 0.2rem 1rem;
}

#nav > ul > li:hover ul > li > a {
    display:block;
    padding: 0.5rem;
}

#nav > ul > li:hover ul > li:hover {
    background-color: #405061;
}


#content ul {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 22px;
}

#content ol {
    list-style-type: decimal;
    list-style-position: outside;
    padding-left: 25px;
}

#content ul li, #content ol li {
    padding-bottom: 3px;
}

#content ul.actions {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#content ul.actions li {
    display: inline;
    padding: 0 10px;
}


#content ul.pagenav {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#content ul.pagenav li {
    display: inline;
    padding-right: 10px;
}


#leftCol {
    display:block;
    width:100%;
}

#container {
    margin-top: 1rem;
}

.styling-hotfix {
    font-family: Arial, Helvetica, sans-serif;
    color:#373D3F;
    width:50%;
    margin-left:25%;
    margin-top:2em;
    margin-bottom:2em;
}

.article-new {
    display:inline-block;
    width:66%;
    vertical-align:top;
}

.article-new img {
    margin-bottom:1rem;
}

.article-side-column {
    display:inline-block;
    width:28%;
    margin-left: 5%;
    vertical-align: top;
}

.article-side-column-section {
    display:block;
    padding:1rem;
    background-color: #eeebeb;
    margin-bottom: 1rem;
}

.mobile-fundraising-block-element {
    display: block;
    width: 100%;
    padding: 2rem;
    text-align:center;
    background-color: #F8F8F8;
    border-top: solid 10px #404040;
    border-bottom: solid 10px #404040;
    margin: 2rem 0;
}

.mobile-fundraising-block-element .fundraising-button{
    display: inline-block;
    width:40%;
    text-decoration:none!important;
    color:white!important;
    text-align:center;
    font-weight:bold;
    border-radius: 4px;
    padding: 0.5rem 0;
    margin: 0 0.5rem;
}

.contact,
.profile-edit,
.reset,
.remind,
.login,
.registration,
.login + div {
    display:block;
    width:60%;
    margin-left: 20%;
    margin-top: 2em;
    margin-bottom: 2em;
}

.btn {
    margin-top: 1rem;
}

.login + div>ul {
    display:block;
}

.logout {
    display:block;
    margin-left: 1rem;
}

.styling-hotfix h2 {
    color:#373D3F;
}

.styling-hotfix h1 {
    color:#373D3F;
}

.styling-hotfix img {
    max-width:100%;
}

#main-stats-image {
  width:100%;
}

.styling-hotfix table img {
    max-width:none;
}

.styling-hotfix a {
    color:#373D3F;
}

.pr-table {
    width:100%;
    margin-bottom:2em;
}

.pr-table td {
    border:0;
    padding-left:0.5em;
    padding-right:1em;
    padding-top:0.5em;
    padding-bottom:0.5em;
}

.pr-table td:first-child {
    width:30%;
}

.title-row {
    background-color:#2D3945;
    color:#DEDEDE;
}

.callout-table {
    width:100%;
    color:#808080
}

.callout-table th, .callout-table td {
    border:0;
    padding-left:1em;
    padding-right:1em;
    padding-top:2px;
    padding-bottom:2px;
}

#head {
    background: #212529;
    font-weight:bold;
    color:#fff;
}

.callout-table tr:nth-child(even) {
    background: #eaf8e6;
}

.callout-table tr:nth-child(odd) {
    background: #FFF;
}

.callout-table td:nth-child(2) {
    white-space: nowrap;
}

.website-history td:nth-child(2){
    white-space: normal;
}

.styling-hotfix hr {
    margin-top:0;
    margin-bottom:1em;
}

.dorsar-button-full-width {
    display:block;
    padding:2%;
    width:100%;
    text-decoration:none!important;
    color:white!important;
    text-align:center;
    margin:2em 0;
    font-weight:bold;
    border-radius: 4px;
}

.article-side-column-button {
    display:block;
    width:100%;
    text-decoration:none!important;
    color:white!important;
    text-align:center;
    font-weight:bold;
    border-radius: 4px;
    padding: 0.5rem 0;
}

.lr-green {
    background-color:#378A42;
}

.lr-red {
    background-color:#E81C37;
}

.lr-green:hover {
    background-color:#24612C;
}

.lr-red:hover {
    background-color:#B62236;
}

.amazon-orange,
.amazon-orange-hover-effect {
    background-color:#FF9900;
}

.amazon-orange-hover-effect:hover {
    background-color:#e68a1a;
}

.small, .createdate, .modifydate, .createdby {
    color: #999;
    font-size: x-small;
}

.text-region {
    margin: 2em 0em;
    padding: 1em 0em;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
}

.social-media-footer-container {
    text-align:center;
    display:block;
    width:100%;
}

.social-media-footer-container img {
    width: 32px;
    margin: 0 5px;
}

#userForm .componentheading {
    display: none;
}

#discount-table td {
    padding:1em;
}

#discount-table img {
    width:50%;
}

.member-discount-text {
    font-family: Arial, Helvetica, sans-serif;
}

.article-region {
    display:block;
    margin-top:2em;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    padding: 1em 0;
}

.article-region:first-of-type {
  margin-top: 0.5em;
}

.article-preview-image-container{
    width:20%;
    display:inline-block;
}

.article-preview-image-container img{
    width:100%;
}

.article-preview-text-container{
    width:74%;
    display: inline-block;
    vertical-align: top;
    padding:0 2%;
}

.documents-text-container {
    display: inline-block;
    width: 83%;
}

.documents-download-container {
    display: inline-block;
    width: 15%;
    vertical-align:top;
}

.documents-download-container img {
    max-width:100%;
}

.management-committee-container {
    display:block;
    vertical-align:top;
    padding-top:1em;
    border-top:1px solid #CCC;
    border-bottom:1px solid #CCC;
    margin-bottom:1em;
}

.person-details-container {
    vertical-align:top;
    display:inline-block;
    width: 45%;
    padding: 0 2%;
}

.profile-image-container {
    display:block;
    width:100%;
    margin: 1em 0;
}

.profile-image-container img {
    width:100%;
}

.narrow-image-holder {
    display: block;
    width: 100%;
    background-color: #2D3945;
    text-align: center;
}

.narrow-image-holder img {
    display: block;
    max-width: 100%;
    text-align: center;
    margin: auto;
    margin-bottom:1em;
}

/* Extra CSS used for the organisational roles page */
.personal-profile-container {
    width:96%;
    background-color: #f5f5f5;
    box-shadow: 5px 5px 5px #e5e4e2;
    padding: 2%;
    margin: 1em 0;
    border-radius: 10px;
}

.personal-profile-image {
    display:inline-block;
    vertical-align: top;
    width:15%;
    margin-right: 2%;
}

.personal-profile-text {
    display:inline-block;
    width:81%;
}

.personal-profile-image img {
    max-width: 100%;
}

.personal-profile-text h3 {
    margin-top:0;
    padding-top:0;
}

.role-container {
    margin-bottom: 4em;
}

.button-collapsible {
    display:block;
    background-color: #eee;
    color: #444;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    margin-bottom:2em;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.button-collapsible:hover {
    background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.collapsible {
    display: none;
    min-width:100%;
}

.role-description {
    margin-bottom:2rem;
}

.expand-symbol {
    display:inline-block;
    float: right;
    margin-left: 5px;
}

.position-buttons {
    align-self: stretch;
    float:left;
    width:25%;
    padding:0;
    background-color:#2D3945;
    text-align:center;
    text-align: center;
}

.position-buttons:hover {
    background-color: #405061;
}

.position-buttons p {
    padding: 1rem;
    color:#f8f9fa;
}

.position-buttons a {
    text-decoration:none;
}

#position-navigation-button-row {
    display:flex;
    width:100%;
    margin-bottom: 2rem;
}

.personal-profile-container hr {
    margin-bottom:2rem;
}

.personal-profile-container h2 {
    margin-bottom:0;
}

.button-collapsible h1,
.button-collapsible h2,
.button-collapsible h3,
.button-collapsible p {
    display:inline-block;
    padding:0.5em 0;
    font-size:1.6em;
    margin:0;
}

.mc-container {
    margin-top: 4rem;
}

.management-committee-position-container img {
    display: inline-block;
    width: 20%;
    background-color: #f0f0f0;
    vertical-align: top;
}

.management-committee-position-text {
    display: inline-block;
    width: 78%;
    padding-left: 1em;
}

.management-committee-position-container {
    margin-bottom: 1rem;

}

#hamburger-button {
    display:none;
}

.article-image-container {
    display:block;
    width:100%;
    padding:0;
    margin:0;
    background-color: #f0f0f0;
    margin-bottom: 1rem;
}

.article-image-container-2 {
    display:block;
    width:80%;
    margin: 0 auto;
}

.portrait-image img {
    display:block;
    width:50%;
    margin: 0 auto;
}

.article-image-container-2 img {
    font-size: 0;
    display: inline-block;
    width: calc(50% - 0.5rem);
}

.article-image-container-2 img:first-child {
    margin-right:0.5rem;
}

.three-image-display {
    width:100%;
    display:block;
    padding:1rem;
    white-space: nowrap;
    font-size: 0;
}

.three-image-display img:first-child {
    display:block;
    width: 100%;
    margin-bottom: 0.5rem;
}

.three-image-display img:nth-child(2) {
    display:inline-block;
    width: calc(50% - 0.5rem);
    margin-right: 0.5rem;
    margin-top: 0.5rem;
}

.three-image-display img:nth-child(3) {
    display:inline-block;
    width: calc(50% - 0.5rem);
    margin-left: 0.5rem;
    margin-top: 0.5rem;
}

.resource-download-list table {
    width:100%;
    vertical-align: center;
}

.resource-download-list p {
    margin:0;
    padding:0;
}

.resource-download-list td {
    vertical-align: middle;
}

.resource-download-list td,
.resource-download-list th {
    padding: 0.4rem;
}

.resource-download-list tr:nth-child(odd) {
    background-color: #cde3f8;
}

.resource-download-list tr:nth-child(even) {
    background-color: #e4f0fb;
}

.resource-download-list thead > tr {
    background-color: #ededed !important;
}

.resource-download-list th>p {
    font-weight: bold;
}

.download-link-text a {
    text-decoration: none;
}

.download-link-text {
    border-bottom: 1px dotted;
}

.download-link-text a:hover,
.download-link-text:hover {
    border-bottom: gray 1px dotted;
    color: gray;
    cursor: pointer;
}


.alert-box {
    display: block;
    width: 100%;
    border: 2px solid;
    box-sizing: border-box;
    text-align: center;
    padding: 1rem;
}

.alert-box h1,
.alert-box h2,
.alert-box h3 {
    font-weight: bold;
}

.alert-box-green {
    border-color: #378A42;
    background-color: #D4DABA;
}

.photo-credit-text, 
.photo-credit-text a{
  margin-top: 5px;
  color: #484848;
}


@media only screen and (max-width: 480px) {
    #container {
        margin-top: 2rem;
    }

    #header {
        padding:0;
        padding-top: 0.5rem;
    }

    #header-left h1 {
        font-size: 1em;
    }

    #header-left p {
        font-size: 0.6em;
    }

    /* Other anchor tags scaling too big. For now*/
    .dorsar-button-full-width a {
        font-size: 2em;
        line-height: 1.4em;
    }

    #discount-table {
        width: 100%;
        margin: 0;
    }

    #discount-table img{
        width: 100%;
    }

    .styling-hotfix{
        width: 96%;
        margin: 0 1%;
        padding: 0 1%;
    }

    .article-new {
        display:block;
        width:100%;
        vertical-align:top;
    }

    .article-new img {
        margin-bottom:1rem;
    }

    .article-side-column {
        display:none;
    }

    .position-buttons p {
        font-size: 0.8em;
    }

    .button-collapsible {
        font-size: 0.6em;
    }

    .personal-profile-container {
        margin-bottom:4rem;
    }

    .personal-profile-image {
        display:block;
        width:100%;
    }

    .personal-profile-image img {
        width:100%;
        margin-bottom:2rem;
    }

    .personal-profile-text {
        display:block;
        width:100%;
    }


    /* ******************************** MOBILE MENU ********************************************** */

    #hamburger-button-container {
        display: flex;
        width:100%;
        background-color: #2D3945;
    }

    #hamburger-button {
        display:block;
        margin: 0.5rem 0;
        margin-right: 1rem;
        margin-left: auto;
        background-color: transparent;
        border:none;
    }

    .hamburger-line {
        width: 35px;
        height: 4px;
        background-color: #f8f9fa;
        margin: 5px 0;
    }

    #nav {
        display: none;
    }

    #nav > ul {
        display:block;
        width:100%;
        background-color: #2D3945;
    }

    #nav > ul > li {
        display: block;
        background-color: #2D3945;
        margin:0;
    }

    #nav > ul > li > a{
        position: relative;
        display:block;
    }

    #nav > ul > li:hover {
        background-color: #405061;
    }

    #nav > ul > li > ul {
        position: absolute;
        display: none;
        background-color: #405061;
    }

    #nav > ul > li:hover ul {
        position: static;
    }

    #nav > ul > li > ul > li {
        display:block;
        white-space: nowrap;
    }

    #nav > ul > li:hover ul > li > a {
        display: block;
    }

    #nav > ul > li:hover ul > li:hover {
        background-color: #405061;
    }

    /* ****************************************************************************** */

    .callout-table-container {
        overflow-x:auto;
    }

    .portrait-image img {
        display:block;
        width:100%;
        margin:0;
    }

}

.pagination ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.pagination ul li {
    display: inline;
    padding-right: 10px;
}

body.mceContentBody {
    background: #FFFFFF !important;
    background-image: none;
    text-align: left;
}

#footer {
    background-color:#2D3945;
    font-family: Arial, Helvetica, sans-serif;
    color:#DEDEDE;
    padding:1em 0;
    flex-shrink: 0;
}

#footer a {
    font-family: Arial, Helvetica, sans-serif;
    color:#DEDEDE;
}


/* System Standard Messages */
#system-message { margin-bottom: 20px; }

#system-message dd.message ul { background: #C3D2E5;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E; margin:0px; padding-left: 40px; text-indent:0px;}
/* general stuff  - Commenting out ALL of this - very inflexible and caused plenty of styling issues. 

body {
	background-color: #fff;
	font-family: Georgia;
	color: #373D3F;
}

.clear {clear: both;}	

a:link, a:visited, a:active {
	text-decoration: underline;
	outline-color: invert;
	outline-style: none;
	outline-width: medium;	
}

a:hover {
	text-decoration: none;
	cursor: pointer;
}

h1 {
	color: #373D3F;
	font-size: 19px;
	padding-bottom: 16px;
	font-weight: bold;
}

h2 {
	color: #373D3F;
	font-size:17px;
	padding-bottom: 16px;
	font-weight: bold;
}


h3 {
	color: #373D3F;
	font-size:15px;
	padding-bottom: 15px;
	font-weight: bold;
}

h4 {
	color: #373D3F;
	font-size: 12px;
	font-weight: bold;
	padding-bottom: 10px;
	font-weight: bold;
}

h5 {
	color: #373D3F;
	font-size: 11px;
	padding-bottom: 5px;
	font-weight: bold;
}


h6 {
	color: #373D3F;
	font-size: 10px;
	padding-bottom: 5px;
	font-weight: bold;
}

p {
	padding-bottom: 15px;
}

p.buttonheading {margin: 0;}

*/