/* =============================================================================
   HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Original BasicTemplate1.css
   ========================================================================== */
body, body#aboutPage {
	background: center/cover url('../images/BitOHeavenBG.webp') no-repeat;
	/* background: center/cover url('../images/IMG_20240108_225004.jpg') no-repeat; */
	min-height: 100vh;
	}
body#housingPage, body#loginPage {
	background: center/cover url('../images/ARsunsetBG.webp') no-repeat;
	min-height: 100vh;
	}
body#faqPage, body#topicsPage {
	background: center/cover url('../images/FallTreeBG.webp') no-repeat;
	min-height: 100vh;
	}
body#contactPage, body#privacyPage {
	background: center/cover url('../images/YellowstoneFallsBG.webp') no-repeat;
	min-height: 100vh;
	}
#container{ 
	background-color: rgba(196, 112, 173, .80); /*#c470ad; */ /* #ccf; */
	color: #303;
	min-height: 100vh;
	min-width: 100vw;
}
 
#content { min-height: 100vh; }
#mainColumn { min-height: 100vh; }
   
body * 
			{ font-family:  "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif; }

h1, h2, h3, h4, dt, .helenkellerquote, #copyright
			{ font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; }
/*
body	{ font-size:9pt;	}
h1 b	{ font-size:36pt;  
				font-weight:800; }
h1		{ font-size:24pt; }
h2		{ font-size:12pt; }
dt 		{ font-size:12pt;
	 			font-weight:800; }
dd 		{ font-size:11pt; }
p			{ font-size:9pt; }
*/
body	{ font-size:12pt;	}
p			{ font-size:12pt; }
h1 b	{ font-size:36pt;  
				font-weight:800; }
h1		{ font-size:24pt; }
h2		{ font-size:16pt; }
dt 		{ font-size:16pt;
	 			font-weight:800;
	 			line-height: 1.2; }
dd 		{ font-size:14pt; 
				line-height: 1.2; }

/* =============================================================================
   End Original BasicTemplate1.css
   ========================================================================== */


html, p, dd, dt, ul, ol, #contactPage form { font-size: 2.5em; -webkit-text-size-adjust: 2.5em; -ms-text-size-adjust: 2.5em; line-height: 1.2; }
ul li ul, ol li ol, li ol li { font-size: 1em; -webkit-text-size-adjust: 1em; -ms-text-size-adjust: 1em; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 2.5em; line-height: 2.0; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0 1em .5em; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; margin-top: .75em; margin-bottom: .75em; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { 
	box-sizing: border-box; 
	padding: 0; 
	*width: 2em; 
	*height: 2em; 
	margin-right: .5em;  
	transform: scale(3);
	vertical-align: middle;
}
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* ===== Initializr Styles =====================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body{ font:16px/26px Helvetica, Helvetica Neue, Arial; }

.wrapper{
	width:90%;
	margin:0 5%;
}


/****************************************************************************************************
 * Basic Website Template 1 stylesheet                                                              *
 * A simple 2-column asymetrical layout with header at top, footer at bottom in centered container. *
 * Template 1 has narrow column and navigation along left-hand side; main content column on right.  *
 ****************************************************************************************************/

html, body, #container, #content, #mainColumn {min-height: 100vh;}
body > #container {height: auto; min-height: 100vh;}
#mainColumn {padding-bottom: 50px;}  /* must be same height as the footer */
#pageFooter {position: relative;
	margin-top: -50px; /* negative value of footer height */
	height: 50px;
	clear:both;} 

#container
	{ 
	position:relative;
	/* width:720px; */
	margin: 0 auto;
	}
#pageHeader,
#pageFooter
	{
	position:relative;
	clear:both;
	width:100%;
	border: 1px solid #aac;
	}
#logo{ float:left; }
#pageTitle { margin: 1em auto; color: blue; }

#mainColumn dl,
#mainColumn p { padding-left: .5em; }
dd { margin-bottom: 2ex; }

#sideColumn, #tencircles
	{
	width:0;
	visibility:hidden;
	display:none;
	min-height: 100%;
	}	
/* #sideColumn     restored in media queries below where screen-width allows
	{
	width: 25%;
	padding: .25em;
	float:left;
	border: 1px solid #aac;
	} */
#sideColumn p, .pullout
	{
	text-indent:0;
	}
.pullout
	{
	display:block;
	width:35%;
	margin: .5em;
	padding: .25em;
	float:right;
	border:1px dashed #aac;
	background-color: rgba(8,8,8,.5);
	color: #ccc;
	}
	
#navigation
	{
	width: 50%;
	padding: .25em;
	float:left;
	border: 1px solid #aac;
	}
#mainColumn
	{
	width: 100%;
	float:right;
	border: 1px solid #aac;
	}
#copyright
	{
	text-align: center;
	font-size: 6pt; 
	color: #888;
	}
p 
	{ 
	padding: .5em 1em;
	line-height: 1.2em;
	text-indent: 2em;
	}
	svg#ninecircles { margin-bottom: 0; float:right; }
	svg#tencircles { margin-top: 0; margin-left: 10px; float:left; }
	
#navigation
	{
	display:block;
	list-style-type: none;
	text-align: center;
	margin-bottom: .5em;
	}
#navigation li
	{
	background-color: gray; /* #ffc; */
	}
#navigation li a:hover, 
#navigation li a:active 
 	{
	display:block;
	width:100%;
	background-color:#0ff;
	}
#navigation li a
	{
	text-decoration: none;
	line-height: 1.3em;
	}
	
#HousingPic { float: right; }
#HousingPic::after { clear: both; }

#pageFooter #navigation
	{
	float:none;
	position:relative;
	width:100%;
	border: none;
	}
#pageFooter #navigation li
	{
	display: inline;
	background-color: #ccf;
	border: none;
	margin-right: 2em;
	}
#pageFooter #navigation li a:hover,
#pageFooter #navigation li a:active
	{
	display:inline;
	width:auto;
	text-decoration: underline;
	background-color: #ccf;
	}
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
	
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* ==============
    MOBILE: Menu
   ============== */

nav a{
	display:block;
	margin-bottom:10px;
	padding:15px 0;

	background:#e44d26;
	color:white;

	text-align:center;
	text-decoration:none;
	font-weight:bold;
}

nav a:hover, nav a:visited{
	color:white;
}

nav a:hover{
	text-decoration:underline;
}

/* ==============
    MOBILE: Main
   ============== */

#main{
	padding:30px 0;
}

#main article h1{
	font-size:2.5em;
}

#main aside{
	color:white;
	padding:0px 5% 10px;
}

#footer-container footer{
	color:white;
	padding:20px 0;
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 #title{ padding-top:20px; }


/* ===== Primary Styles ========================================================
   Author:
   ========================================================================== */

form ol.statements { list-style-type: upper-roman; }
form ol.responses { list-style-type: upper-alpha; }
form li {  margin-bottom: .5em; }








/* =============================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {

/* ====================
    INTERMEDIATE: Menu
   ==================== */
	
	nav a{
		float:left;
		width:27%;
		margin:0 1.7%;
		padding:25px 2%;
		margin-bottom:0;
	}
	
	nav li:first-child a{ margin-left:0;  }
	nav li:last-child  a{ margin-right:0; }
	
/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

	nav ul li{
		display:inline;
	}	
	.oldie nav a{
		margin:0 0.7%;		
	}
	
#mainColumn
	{
	width:100%;
	columns: 1 auto;
	border: 1px solid #aac;
	}
}

@media only screen and (min-width: 768px) {

/* ====================
    WIDE: CSS3 Effects
   ==================== */

	#header-container,
	#main aside{
		-webkit-box-shadow:0 5px 10px #aaa;
		   -moz-box-shadow:0 5px 10px #aaa;
		        box-shadow:0 5px 10px #aaa;
	}

/* ============
    WIDE: Menu
   ============ */
	
	#title{
		float:left;
	}

	nav{
		float:right;
		width:38%;
	}

/* ============
    WIDE: Main
   ============ */

	#main article{
		float:left;
		width:57%;
	}
		
	#main aside{
		float:right;
		width:28%;
	}

	#mainColumn
		{
		width:100%;
		columns: 1 auto;
		border: 1px solid #aac;
		min-height: 100%;
		}
}

@media only screen and (min-width: 1140px) {

html, p, dd, dt, ul, ol, li, #contactPage form { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 1em; line-height: 1.4; }
input[type="checkbox"], input[type="radio"] { 
	box-sizing: border-box; 
	padding: 0; 
	*width: 200%; 
	*height: 200%; 
	margin-right: .5em; 
	transform: scale(2); 
	vertical-align: middle;
}

/* ===============
    Maximal Width
   =============== */

	.wrapper{
		width:1026px; /* 1140px - 10% for margins */
		margin:0 auto;
	}
	#sideColumn
		{
		width: 25%;
		padding: .25em;
		float:left;
		border: 1px solid #aac;
		visibility:visible;
		display:block;
		}
	#mainColumn
		{
		width:73%;
		columns: 2 auto;
		border: 1px solid #aac;
		}
	#mainColumn.singleColumn { columns: 1 auto; }
	#tencircles	
		{
		width:auto;
		visibility:visible;
		display:block;		
		}
}

/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* =============================================================================
   Print Styles
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}