body {
  background: white;
  /*background-attachment: scroll;
  background-repeat: no-repeat;*/
  font-family: bookman, sans-serif;
  border-width: 0;
  margin: 0;
  padding: 0;
  box-shadow: inset 0px 0px 150px #88afff;
}

body.nonfront {
    background: url(../hlonggradstrip.png) white;
    background-attachment: scroll;
    background-repeat: repeat-y;
    font-family: bookman, sans-serif;
    border-width: 0;
    margin: 0;
    padding: 0;
}


body.gray {
    background: #dddddd;
    background-attachment: scroll;
    background-repeat: no-repeat;
    font-family: bookman, sans-serif;
    border-width: 0;
    margin: 0;
    padding: 5;
    box-shadow: none;
  }
body.gray h1 {
    font-size: 32pt;
    color: rgb(0,0,0);
  }
body.gray a:link { color: #cc0000 }
body.gray a:visited { color: #aa0000 }
body.gray a:hover { color: #220066 }
body.gray a:active { color: #ff0000 }




h1 {
    font-size: 32pt;
    color: rgb(192,0,0);
}

a:link    { text-decoration:none; color: #cc0000 }
a:visited { color: #aa0000 }
a:hover   { background-color: #eeeeee; color: #550099 }
a:active  { color: #ff0000 }

#main {
	display: inline-block;
	position: relative;
	width: 1200px;
	max-width: 90%;
	white-space:normal;
}

.whole {
	white-space:nowrap;
}

code {
  		background: #eeeeee;
  		border-color: #000000;
  		border-width: 1px;
  		padding: 5px;
}
div.code {
  		background: #eeeeee;
  		border-color: #000000;
  		border-width: 1px;
  		padding: 5px;
  		font-family: courier;
}
div.section {
  	  /*background: #eeeeee;
  		border-color: #000000;
  		border-width: 1px;
  		padding: 5;*/
      font-size: 110%;
      font-weight: bold;
}
pre {
  		background: #eeeeee;
  		border-color: #000000;
  		border-width: 1px;
  		padding: 10px;
}
pre.code {
	   font-family: courier;
  		background: #eeeeee;
  		border-color: #000000;
  		border-width: 0px;
  		padding: 10px;
}


 
  /* --------------------- sidebar -------------------------- */

#sidemenu a:link { text-decoration:none; color: #cc0000 }
#sidemenu a:visited { color: #aa0000 }
#sidemenu a:hover { background-color:transparent; color: #220066 }
#sidemenu a:active { color: #ff0000 }
  
td.padded { 
  	padding: 10px;
}

	#side {
		width: 3em;
		/*height: 100%;*/
		display: inline-block;
		float: left;
		text-align: center;
		position: relative;
		padding: 1.5em .5em .5em 1em; 
	}
    
   .sidenav {
		transform-origin: left top;
  		transform: rotate(-90deg) translateX(-100%);
		/*height: 100%;*/
		white-space:nowrap;
		position:relative;
		width: 100vh;
		font-size: 90%;
		text-align: right;
	}
   .sidenav {
		padding: 0px;
		margin: 0px;
	}
	.sidenav li {
		font-weight: 700;
		display: inline-block;
		
	}
	.sidenav a {
		display: block;
		padding: .5em;
	}
	.sidenav a:hover {
		background: radial-gradient(ellipse at center, rgba(50,50,255,.5) 0%, rgba(0,0,0,0) 75%);
	}
	
	#bg {
		display: none;
		background: linear-gradient(to bottom, #88afff 0px, rgba(0, 0, 0, 0) 5em),
						linear-gradient(to right, #88afff 0px, rgba(0, 0, 0, 0) 5em);
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}
	.sidenav a.feeds {
		padding: 0px;
		transform: rotate(90deg);
	}
	.feeds img {
		width: 20px;
		height: 20px;
		vertical-align: middle;
		/*margin-top: .5em;*/
	}

	#bannercont {
		height:0px;
		max-width:90%;
		width:700px;
		height:308px;
		padding:0;
		position:relative;
		}
	


/* ----------------- faq stuff ------------- */  
  
.qHeader {
     font-size: 110%;
     font-weight: bold;
     padding-left: 2em;
}

.qaheader {
	margin:.5em 0px 1em 0px;
	padding: .3em;
	color: #ccc;
	background: #555;
	text-align: center;
	font-weight: 700;
	font-size: 2em;
	font-family: 'Montserrat', sans-serif;
}
.qAndA {
	max-width: 1000px;
	margin: auto;
	text-align: left;
}
.qAndA dt {
	cursor: pointer;
	margin-top: .5em;
	font-weight: 700;
	width: 100%;
	padding: .5em;
	background: #ddd;
}
.qAndA dd {
	display:none;
	width: 100%;
	padding: .5em;
	margin: 0px 0px 1em 0px;
}

hr {
  height: 1px;
  background: transparent;
  border: none;
  clear: both;
  width: 50%;
  background-image: linear-gradient(to right, transparent, #333, transparent);
}


/* ------------------------------ media queries ----------------------- */

@media only screen and (max-width: 850px) {
	#bannercont {
		height:0px;
		max-width:90%;
		width:700px;
		padding:44% 0 0 0;
		position:relative;
	}
}

@media only screen and (max-width: 700px) {
	.whole {
		box-shadow: inset 0px 0px 20% #88afff;
	}
	#main {
		display: block;
		padding: 1em;
	}
	#side {
		float: none;
		width: 100%;
		display: block;
		text-align: center;
		padding: .5em .5em .5em .5em; 
	}
    .sidenav {
		transform: none;
		width: 100%;
		white-space:normal;
		text-align: center;
	}
	.feeds {
		padding: 0px;
		transform: none;
	}
	.feeds img {
		margin-top: 0;
		width: 12px;
		height: 12px;
	}
}