/* 
----------------------------------------------------------
Only edit this file in the confdmin/makesite folder.      
Other versions are copies of that and are overwrtten.      

basic appearance of pages
set max width of display area 
set background colour of whole page and various elements 
---------------------------------------------------------- 
*/


/*  This is an alternative colour scheme
:root {
      --na-bg-color: #fefbd8;
      --na-banner-color: #618685;
      --na-banner-text-color: #ffffff;
      --na-extra-color: #d5f4e6;
      --na-extra-text-color: #000;
      --na-form-input-color: #ffffff;
      --na-font-size: 16px;
}
*/

:root {
      --na-bg-color: #eefbff;
      --na-banner-color: #aaddfa;
      --na-banner-text-color: #000;
      --na-extra-color: #3b897d;
      --na-extra-text-color: #ffffff;
      --na-form-input-color: #ffffff;
      --na-font-size: 16px;
}

body,h1,h2,h3,h4,h5,p {font-family: "Open Sans",sans-serif}

body {
        max-width:1080px; 
	margin: 0 auto !important; 
	float: none !important;
        color:#000!important;
        background-color:var(--na-bg-color) !important;     
}

.na-col,.na-hover-col:hover{
                            color:var(--na-banner-text-color)!important;
                 background-color:var(--na-banner-color)!important;}

.na-col2  {
                            color:var(--na-banner-text-color)!important;
                 background-color:var(--na-banner-color)!important;}
.na-col2:hover  {
                            color:var(--na-extra-text-color)!important;
                 background-color:var(--na-extra-color)!important;}

.na-pale-col,.na-hover-pale-col:hover {
                            color:var(--na-extra-text-color)!important;
                 background-color:var(--na-extra-color) !important;}

iframe{
   width:100%;
   height:500px;
}

.na-center{
  margin: auto;
  width: 50%;
  border: 3px solid #73AD21;
  padding: 10px;
}

@media screen and (max-width: 750px) {
   .topnav  a.na-mob {display: none;}
  }

.topnav div.barcenter {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 65px;
}

details > summary {
  padding: 4px 4px;
  margin-top:10px;
  margin-bottom:10px;
  max-width: inherit;
  background-color:var(--na-banner-color);
  color:var(--na-banner-text-color);
  border: 0.5em solid var(--na-banner-color);
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
  font-weight: 500;
}

details > summary:hover {
  padding: 4px 4px;
  margin-top:10px;
  margin-bottom:10px;
  max-width: inherit;
  background-color:var(--na-extra-color);
  color: var(--na-extra-text-color);
  border: 0.5em solid var(--na-extra-color);
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
  font-weight: 500;
}

details[open] > summary {
  padding: 4px 4px;
  margin-top:10px;
  margin-bottom:10px;
  max-width: inherit;
  background-color:var(--na-extra-color);
  color: var(--na-extra-text-color);
  border: 0.5em solid var(--na-extra-color);
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
  font-weight: 500;
}

[open]::details-content{
  background-color: var(--na-bg-color);
  max-width: inherit;
  padding: 4px 4px;
  border-left: 4px solid var(--na-banner-color);
}

details > p {
  background-color: var(--na-bg-color);
  max-width: inherit;
  padding: 4px 4px;
}


a:link {color: blue; text-decoration: none;}
a:visited {color: blue; text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: underline;}

.natable {border-collapse: collapse;}
.natable td,th {padding: 5px; border: solid 3px var(--na-banner-color);}

ul {
  margin-left: -1em;
}
ol {
  margin-left: -1em;
}


/* --------------------------------------------------- */
/* forms and buttons */
/* --------------------------------------------------- */

label {
   font-weight: 500;       // slightly bolder than normal=400, but less than bold=700
   font-size: var(--na-font-size);
   display:inline-block;
   width:120px;
}


select {
  width: 150px;  // default width of button or box
  padding: 4px;
  margin: 6px 0;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: var(--na-form-input-color);
  font-size: var(--na-font-size);
  color: black;
}

input[type=text],input[type=email],button[type=submit],button[type=button],button[type=checkbox] {
  width: 150px;  // default width of button or box
  padding: 4px;
  margin: 6px 0;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: var(--na-form-input-color);
  font-size: var(--na-font-size);
  color: black;
}

input[type=checkbox] {
    transform: scale(1.5);
}

textarea {
  width: 100%;
  height: 200px;
  padding: 12px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: var(--na-form-input-color);
  font-size: var(--na-font-size);
  color: black;
}