@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400');

/* Proxima Nova font, from Adobe. This is the body font. */
@import url("https://use.typekit.net/zrl5vhh.css");

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");


* {
	box-sizing: border-box;
} 
  
html {
	height: 100%;
}

:root {
  --whitebg: #ffffff;
  --text: #000000;
  --light: #e6e0ea;
  --link: #0000ff;
  --gray: #aaa;
}

@media (prefers-color-scheme: dark) {
  :root {
    --whitebg: #111111;
    --text: #f0f0f0;
    --light: #1e1a21;
    --link:  #dcc8ea;
    --gray: #666;
  }
}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	background-color: var(--whitebg);
	color: var(--text);
    font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: 12pt;
	font-style: normal;
}

a {
	cursor: default;
    color: var(--link);
}

img {
  max-width: 100%;
  width: auto;
  border: none;
}

hr {
 	border: 0;
    height: 0;
    border-bottom: 1px solid #e6e0ea;	
}

.nobr {
	white-space: nowrap;
}

.desktop {
	display: block;
}

.mobile {
	display: none;
}

.whiteText, #footer {
	color:  var(--whitebg);
}

#darkBgColor, #mainhdr a:hover {
	background-color: #80559d;
}

#darkcolor, .bigNavButns a, .bigLoginButns a {
	color: #80559d;
}

#maincolor, #sidebar, #sidehdr, #mainhdr, #footer, #hdrtabs {
	background-color: #A37FBB;
}
#midcolor, #sidebar hr, .bigloginButns a, #alt_xtra a {
	background-color: #dcc8ea;
}
#lightBgcolor, .bigNavButns a {
	background-color: var(--light);
}
#lightcolor, #footer a {
	color: var(--light);
}

#wrapper {
	display: grid;
    width: 100%;
    height: 100%;
    grid-template-rows: 170px 1fr 75px;
}

#header {
	display: grid;
	grid-template-columns: 170px 1fr;
}

#mainhdr a {
	text-decoration: none;
	color: #eee;
}

#sidehdr {
	text-align: center;
	padding: 10px;
}

#mainhdr {
	top: 0;
}

#mainhdr h1 {
	margin-bottom: 2px;
    padding-bottom: 0px;
}

#mainhdr h2 {
	margin-top: 0px;
    padding-top: 0px;
}

#navhdr {
	padding: 4px 15px;
	border-bottom: 2px solid #dcc8ea;
}

#hdrtabs {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

#hdrtabs h2 {
	font: 300 20pt 'Josefin Sans', sans-serif;
	display: inline-block;
	background-color:  var(--whitebg);
	padding: 8px 8px 4px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin: 0 10px -2px;
}

#hdr_xtra {
	padding: 4px;
}

#hdr_xtra a {
	font: 300 20pt 'Josefin Sans', sans-serif;
	display: inline-block;
	padding: 8px 8px 4px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin: 0 10px -4px;
	text-decoration: none;
}

#hdr_xtra a:hover {
	background_color:  var(--whitebg);
}

#pagecontent {	
    background:  var(--whitebg);
}

#content {
	margin: 20px 50px 50px;
}

#footer {
	padding: 20px;
	text-align: center;
}

.upArrow {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 7.5px 10px 7.5px;
	border-color: transparent transparent #fff transparent;
	display: inline-block;
}

.centerText {
	max-width: 700px;
}

.prewrap {
	 white-space: pre-wrap;       /* css-3 */
	 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	 white-space: -pre-wrap;      /* Opera 4-6 */
	 white-space: -o-pre-wrap;    /* Opera 7 */
	 word-wrap: break-word;       /* Internet Explorer 5.5+ */	
}

.error {
	background-color: #ffe4e5;
	border: 1px solid #991519;
	padding: 10px;
}

.warning {
	background-color: #eaba6a;
	border: 1px solid #995315;
	padding: 10px;
	color: #582f0c;
}

.notice {
	background-color: #f4f2d1	;
	border: 1px solid rgba(150,173,107,0.5959975);
	padding: 10px;
	-webkit-border-radius: 5px;
  	-moz-border-radius: 5px;
  	border-radius: 5px;
}

.small {
	font-size: small;
}

.gray {
	color: var(--gray);
}

.bignum {
	font-weight: bold;
	padding-top: 40px;
	font: 32pt Georgia, Times New Roman, Times, serif;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size is 24 */

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* eol */