@import url('https://fonts.googleapis.com/css?family=Lato|Roboto|Oswald&display=swap');
@import url("common.css");

/* variables */

:root {
  --text-back-rgb: 228,220,194;
  --text-light-rgb: 255,240,221;
  --border-radius: 8px;
  --button-back-rgb: 0,0,0;
  --button-selected-back-rgb: 86,45,0;

  --title-margin: calc(10px + 1.5vh) 10px calc(5px + 1vh) calc(5px + 1vw);
}

/*packing starts at max-width: 740px*/

/* */

html, body {
  font-family: "Lato", sans-serif;
  font-size: 100%;
  line-height: 1.4;
  background-color: #000;
  /*font-size: 110%;*/
  /*font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;*/
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
}

@media print { html, body { background-color: #FFF; } }

@media screen and (max-device-height: 481px), screen and (max-device-width: 481px) {
  html, body {
    line-height: 1;
  }
}

small {
  font-size: 80%;
}

/* general */

h1 {
  font-size: 150%;
  font-weight: bold;
  /*text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;*/
}

a:link { color: #000088; text-decoration: none; outline: none; }
a:visited { color: #000088; }
a:hover { color: #0000FF; text-decoration: underline; }
a:active { color: #0000FF; text-decoration: underline; }
a:focus{ outline: none; }

/* header */

#header {
  width: 100%;
  background-color: rgba(var(--text-back-rgb), 0.25);
  background-blend-mode: lighten;
  background: linear-gradient(to bottom, 
    rgba(var(--text-back-rgb), 0.8) 0%, 
    rgba(var(--text-back-rgb), 0.25) 90%,  
    rgba(var(--text-back-rgb), 0) 100%);
  padding-bottom: 4px;

  display: flex;
  flex-direction: row;
  --align-items: center;
}

.clsTitle {
  display: flex;
  width: 100%;
  height: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  --padding: 3vh 0 3vh 2vw;
  padding: var(--title-margin);
  color: #000;
  /*border-radius: 40px 40px 40px 40px;*/
}

.clsTitle h1 {
  font-size: calc(24px + 1.5vw);
  font-style: normal;
  font-weight: bold;
  font-family: sans-serif;
  font-variant: small-caps;
  letter-spacing: 0.2vw;
  line-height: 1;
  text-shadow: 
    0px 0px 5px rgb(var(--text-light-rgb)), 
    0px -1px 0px rgb(var(--text-light-rgb)), 
    0px 1px 0px rgb(var(--text-light-rgb)), 
    1px 0px 0px rgb(var(--text-light-rgb)), 
    -1px 0px 0px rgb(var(--text-light-rgb));
  margin: auto 0;
}

#titleImg {
  float: left;
  margin: 0 0 0 0px;
  padding: 0;
  max-width: 250px;
  min-width: 25px;
  --max-height: 15vh;
  height: auto;
}

--@media screen and (max-width: 900px) { .clsTitle img { width: 80px; margin: 5px 20px; } }
--@media screen and (max-width: 800px) { .clsTitle img { width: 70px; margin: 5px 10px; } }

/* button bar */

#buttonBar {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: var(--title-margin);
  padding-top: 10px;
  position: relative;
}

#buttonBar ul {
  float: left;
  margin: 0;
  white-space: wrap;
  list-style-type: none;
}

#buttonBar li {
  font-weight: normal;
  font-variant: small-caps;
  /*text-transform: uppercase;*/
  font-style: normal;
  letter-spacing: 0.15;
  margin: 2px calc(2px + 1.5vw) 2px 0;
  /*box-shadow: 2px 2px 2px rgba(0,0,0,0.4);*/
  border-width: 1px;
  border-style: solid;
  border-color: rgb(var(--text-light-rgb));
  border-radius: var(--border-radius);
  display: inline-block;
  text-align: center;
  background-color: rgba(var(--button-back-rgb), 0.75);
  padding: calc(0.05em + 0.2vh) calc(0.05em + 2vw);
}

#buttonBar li.selected {
  background-color: rgba(var(--button-selected-back-rgb), 0.75);
}

#buttonBar a { 
  display: block; 
  --background-color: rgba(0,0,255, 0.5);
  color: rgba(var(--text-light-rgb), 1);
  text-decoration: none;
}

#buttonBar .selected a {
  color: rgba(var(--text-light-rgb), 1);
}

#buttonBar a:hover {
  --color: rgba(var(--text-light-rgb), 0.75);
  --background-color: rgba(0,0,0, 0.5);
  --background-color: rgba(32,32,32, 0.6);
  --background-color: rgba(0,32,32, 1);
}

#buttonBar li:hover {
  color: rgb(var(--text-light-rgb));
  --border-color: var(rgb(--text-light-rgb))
  border-color: #FFB;
}

#buttonBar li.clsSocialBarButton {
  border-width: 0;
  border-radius: 0;
  text-shadow: none;
  background: none;
  margin: 0;
  padding: 0;
}

#buttonBar li.clsSocialBarButton img {
  height: 36px;
  width: auto;
  align: left;
  vertical-align: middle  ;
  margin: 0 0 4px 8px;
  padding: 0;
}

#buttonBar li.clsSocialBarButton:hover {
  background: none; 
  filter: saturate(500%);
  -webkit-filter: saturate(500%);
  border-radius: none;
}

--@media screen and (max-device-height: 540px) and (orientation: landscape) {
  .clsTitle h1 { font-size: 105%; }
  .clsTitle { padding: 4px 0 2px 4px; }
  #buttonBar a { font-size: 100%; padding-left: 1.3em; padding-right: 1.3em; }
  #buttonBar { padding: 0px 5px 2px 0px; }
}

--@media screen and (max-device-width: 540px) and (orientation: portrait) {
  .clsTitle h1 { font-size: 105%; }
  .clsTitle { padding: 4px 0 2px 4px; }
  #buttonBar a { font-size: 100%; padding-left: 1em; padding-right: 1em; }
  #buttonBar { padding: 0; }
  #buttonBar li { margin: 0 0px; }
  .clsTitle img { width: 40px; margin: 0; }
}

--@media screen and (max-width: 740px) {
  #buttonBar a { padding-left: 1em; pading-right: 1em; }
}

--@media screen and (max-width: 650px) {
  #buttonBar li { margin-right: 0; margin-left: 2px; }
}

--@media screen and (orientation: portrait) and (max-device-width: 539px) {
  #buttonBar a { padding: 0.25em 1em 0.25em; }
}

--@media screen and (max-width: 740px) {
  .clsTextCanvas { padding: 10px; }
}

/* content */

.clsTextCanvas {
  margin: 0px 0 10px 0;
  color: #000;
  background-color: rgb(var(--text-back-rgb));
  border-radius: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
  /*border: 1px solid rgba(0,0,0,0.3);*/
  line-height: 110%;
  white-space: normal;
  --flex: 1;
}

.clsTextCanvas h1 {
  font-size: 110%;
  font-style: normal;
  font-weight: bold;
  font-variant: small-caps;
  /*text-decoration: underline;*/
  /*background-color: rgba(192,192,192,0.15);*/
  /*border-bottom: 1px solid rgba(0,0,0,0.1);*/
  --padding: 0 0 15px 0;
  margin: 0px 0 8px 0;
  border-radius: 8px 8px 0px 0px;
}

.clsTextCanvas h2 {
  font-size: 105%;
  font-style: normal;
  font-weight: 500;
  font-variant: small-caps;
  padding: 15px 0 0.5em 0;
  border-radius: 8px 8px 0px 0px;
}

.clsTextCanvasInner {
  padding: 15px;
}

.clsContentColumn {
  /*display: -webkit-box;*/
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -webkit-justify-content: space-around;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: stretch;

  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  padding: 20px 0 0 3%;
  
  /*webkit-box-flex: 1;*/
  -webkit-flex: 1;
  flex: 1 0 auto;

  width: 70vw;
  --width: 70%;
  --min-width: 30vw;
}

.clsTextPos { /* wraps around container */
  position: relative;
  /*padding: 10px 3% 10px 3%;*/
  padding: 0 3% 10px 3%;
  top: 3%;
}

.clsTextPos.FixedTop {
  padding-top: 10px;  
}

.clsTextPos.WiderTop {
  /*padding-top: 24px;  */
  top: 5%;  
}

.clsTextPos.WideTop {
  top: 8%;  
}

@media screen and (max-width: 800px) { .clsTextPos { padding-left: 1%; padding-right: 1%; } }

@media screen and (max-height: 700px) { .clsTextPos { top: 2%;	padding-bottom: 5px; } }
@media screen and (max-height: 600px) { .clsTextPos { top: 1%;	padding-bottom: 5px; } }

@media screen and (max-height: 600px) { .clsTextPos.FixedTop { padding-top: 5px;	padding-bottom: 5px; } }

@media screen and (max-height: 750px) { .clsTextPos.WiderTop { top: 3%;	padding-bottom: 5px; } }
@media screen and (max-height: 700px) { .clsTextPos.WiderTop { top: 1%;	padding-bottom: 5px; } }

@media screen and (max-height: 750px) { .clsTextPos.WideTop { top: 5%;	padding-bottom: 5px; } }
@media screen and (max-height: 700px) { .clsTextPos.WideTop { top: 3%;	padding-bottom: 5px; } }
@media screen and (max-height: 600px) { .clsTextPos.WideTop { top: 2%;	padding-bottom: 5px; } }
@media screen and (max-height: 500px) { .clsTextPos.WideTop { top: 1%;	padding-bottom: 5px; } }


.clsNormalTextContainer {
  width: auto;
  height: auto;
  max-width: 1024px;
  margin: 0 auto 0 auto;
}

.clsWideTextContainer {
  width: auto;
  height: auto;
  max-width: 1280px;
  margin: 0 auto 0 auto;
}

.clsTextIcons img {
  width: auto;
  height: 1.2em;
  padding: 0 4px 0 4px;
  position: relative;
  top: 0.25em;
  white-space: nowrap;
}

/* printing */

@media print {
  #header { background-color: #FFF; }
  .clsTitle h1 { text-shadow: none; }
  #titleImg { display: none; }
  #buttonBar { display: none; }
  .clsSidebarWrapper { display: none; }
  .clsSideContentWrapper { margin-left: 0; }
}

.clsTextBlock {
  position: relative;
  height: auto;
  margin: 7vh 15vw 5vh 15vw;
  padding: calc(20px + 4vh) 3vw;
  color: #000;
  background-color: rgb(var(--text-back-rgb));
  background: linear-gradient(0deg, 
    rgba(var(--text-back-rgb), 0.5) 0%, 
    rgba(var(--text-back-rgb), 1) 10%, 
    rgba(var(--text-back-rgb), 1) 90%, 
    rgba(var(--text-back-rgb), 0.5) 100%);
  border-radius: var(--border-radius);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  clear: both;
  box-shadow: 2px 2px 8px rgba(32,32,32,0.7);
}

.clsSmallTextBlock {
  padding: calc(10px + 2vh) 2vw;
}

.clsTextBlock br {
  content: "";
  margin: calc(1px + 0vh) 0;
  display: block;
  font-size: 0%;
}

.clsBreakAfter {
  margin: 0 0 calc(5px + 1.5vh) 0;
}

.clsBreakBefore {
  margin: calc(5px + 1.5vh) 0 0 0;
}