﻿/*
	$Author: Markee Anderson $
*/
html {
  font-family: Verdana, sans-serif;
}
body
{
	margin-top:0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background: #FFFFFF;
	width: 100%;
	height: fit-content;
}
p {
	display: block;
	text-align: justify;
	font-size: 1 rem; /* 1.166 rem */
	color:#000000;
	/* margin-bottom: 1em; */
	padding: 0 0 1em 0; /* Never Eat Soggy Waffles--North East South West */
}

	
.p_8 {
	font-size: 0.1 rem;
	color:#000000;
}


h1 {
	display: text;
	font-size:1.3 rem;
	color:#000000;
	font-weight: 600;
	margin-top: 3 rem;
	margin-bottom: 3 rem;
	/*padding: 3 rem 0 3 rem 0;  Never Eat Soggy Waffles--North East South West */
}

h5 {
	/* display: text; */
	font-size:1.3rem;
	color:#000000;
	font-weight: 600;
	margin-top: 1rem;
	margin-bottom: .5rem;
	/*padding: 3rem 0 3rem 0;  Never Eat Soggy Waffles--North East South West */
}

img {
  max-width: 100%;
  height: auto;
}

/* *************** Locals ********************/
.main_body {
	margin-right: auto;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
	display: block;
	width: 96%; 
	font-size: 1.1rem;
	font-weight: normal;
	color: #000000;
	text-align: justify;
}

.footer {
  background-color: #000066;
  color: #ffffff;
  text-align: center;
  font-size: 1rem bold;
  padding: 10px;
  width: 100%;
}

.topbar {
	width: 100%;
	height: 60px;
	vertical-align: top;
	background: #000000;
	/* background: transparent; */
	margin-left: 0px; 
	margin-right: 0px; 
	padding-top: 0;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	text-align: center;
	font-family: Arial;
	font-size: 1rem;
	font-weight: bold;
	color:#ffffff;
	position: sticky;
	position: -webkit-sticky; /* Safari */
	top: 0;
}
	
.bottom_bar {
	width: 100%;
	height: 10px;
	padding: 0;
	background: #000000;
}

.title_back {
	height: 300px;
	border: 0px solid #ffffff;
	padding-top: 30px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	background: linear-gradient(180deg, #000066 20%, #A0A0F7 50%, #000066 80%);
	position: static;

	/* background: #8A79AA url(pics/purpledots.png) 0% 0% repeat-x; */
	/* background-image: linear-gradient(180deg, #FFFFff, #ffff88, #ffffff); 	 */
	/* background-image: linear-gradient (90deg, #530074 25%, #E197FF 75%); */
	/* background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c); */
	/* background: linear-gradient(45deg, red 0 50%, blue 50% 100%); */
	/* background: radial-gradient(ellipse, #A0A0F7 35%, #000066); */
	/* blue/light green(ebf8e1)/orange */
	/* F2C79D (tan/orange)  F2C79D orange A61FEF purple*/
	
}

.toptitle {
	height: 250px;
	border: 0px solid #ffffff;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-right: auto;
	margin-left: auto;
	background: url(pics/toptitle.png) no-repeat;
	background-position: 50% 50%;
}

.buy_indent {
	text-indent: 20px;
}

.isbn_block {
	border: 2px solid #6B5304;
	background: #D6E3FF;
	height: 175px;
	padding: 10px 10px 10px 10px;
	box-shadow: 7px 7px 3px 1px #9E9E9E;
	font-size: 1rem;
}

.links_block {
	border: 2px solid #005601;
	background: #FFF5DD;
	height: 175px;
	padding: 10px 10px 10px 10px;
	box-shadow: 7px 7px 3px 1px #9E9E9E;
}

.divider {
	background: #021735;
	width: 100%;
	height: 5px;
	padding: 0px;
	box-shadow: 4px 4px 3px 1px #9E9E9E;
}
.index_block1 {
	text-align: center;
	background: #FFFFED;
	padding: 0px;
	width: 100%;
	font-size: 1rem;
	color: #000000;
}

.index_block2 {
	text-align: center;
	background: #FFFFFF;
	padding: 0px;
	width: 100%;
	font-size: 1rem;
	color: #000000;
}


/* **************************************** Row and Grid settings ************************************************ */
.row::after {
	content: "";
	clear: both;
	display: block;
	padding: 0 1rem 0 1rem;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

* {
  box-sizing: border-box;
}

.col-per {}
/* For desktop: */
.col-point2 {width: 0.2%;}
.col-20aper {width: 16.2%;}
.col-1per {width: 1%;}
.col-2per {width: 2%;}
.col-3per {width: 3%;}
.col-4per {width: 4%;}
.col-5per {width: 5%;}
.col-6per {width: 6%;}
.col-7per {width: 7%;}
.col-8per {width: 8%;}
.col-9per {width: 9%;}
.col-10per {width: 10%;}
.col-11per {width: 11%;}
.col-12per {width: 12%;}
.col-13per {width: 13%;}
.col-14per {width: 14%;}
.col-15per {width: 15%;}
.col-16per {width: 16%;}
.col-17per {width: 17%;}
.col-18per {width: 18%;}
.col-19per {width: 19%;}
.col-20per {width: 20%;}
.col-21per {width: 21%;}
.col-22per {width: 22%;}
.col-23per {width: 23%;}
.col-24per {width: 24%;}
.col-25per {width: 25%;}
.col-26per {width: 26%;}
.col-27per {width: 27%;}
.col-28per {width: 28%;}
.col-29per {width: 29%;}
.col-30per {width: 30%;}
.col-31per {width: 31%;}
.col-32per {width: 32%;}
.col-33per {width: 33%;}
.col-34per {width: 34%;}
.col-35per {width: 35%;}
.col-36per {width: 36%;}
.col-37per {width: 37%;}
.col-38per {width: 38%;}
.col-39per {width: 39%;}
.col-40per {width: 40%;}
.col-41per {width: 41%;}
.col-42per {width: 42%;}
.col-43per {width: 43%;}
.col-44per {width: 44%;}
.col-45per {width: 45%;}
.col-46per {width: 46%;}
.col-47per {width: 47%;}
.col-48per {width: 48%;}
.col-49per {width: 49%;}
.col-50per {width: 50%;}
.col-51per {width: 51%;}
.col-52per {width: 52%;}
.col-53per {width: 53%;}
.col-54per {width: 54%;}
.col-55per {width: 55%;}
.col-56per {width: 56%;}
.col-57per {width: 57%;}
.col-58per {width: 58%;}
.col-59per {width: 59%;}
.col-60per {width: 60%;}
.col-61per {width: 61%;}
.col-62per {width: 62%;}
.col-63per {width: 63%;}
.col-64per {width: 64%;}
.col-65per {width: 65%;}
.col-66per {width: 66%;}
.col-67per {width: 67%;}
.col-68per {width: 68%;}
.col-69per {width: 69%;}
.col-70per {width: 70%;}
.col-71per {width: 71%;}
.col-72per {width: 72%;}
.col-73per {width: 73%;}
.col-74per {width: 74%;}
.col-75per {width: 75%;}
.col-76per {width: 76%;}
.col-77per {width: 77%;}
.col-78per {width: 78%;}
.col-79per {width: 79%;}
.col-80per {width: 80%;}
.col-81per {width: 81%;}
.col-82per {width: 82%;}
.col-83per {width: 83%;}
.col-84per {width: 84%;}
.col-85per {width: 85%;}
.col-86per {width: 86%;}
.col-87per {width: 87%;}
.col-88per {width: 88%;}
.col-89per {width: 89%;}
.col-90per {width: 90%;}
.col-91per {width: 91%;}
.col-92per {width: 92%;}
.col-93per {width: 93%;}
.col-94per {width: 94%;}
.col-95per {width: 95%;}
.col-96per {width: 96%;}
.col-97per {width: 97%;}
.col-98per {width: 98%;}
.col-99per {width: 99%;}
.col-100per {width: 100%;}

/* */


/* **************************************** Shadows ************************************************ */

.book_shadow {
	box-shadow: 7px 7px 3px 1px #9E9E9E;
}
#gray_shadow { /* shadow behind box */
  padding: 10px;
  background: transparent;
  box-shadow: 7px 7px 3px 1px #9E9E9E;
}
#gray_shadow2 { /* shadow behind box */
	padding: 0px;
	border: 0px solid #D6D6D6;
	box-shadow: 7px 7px 3px 1px #9E9E9E;
}


a:link { color: #000000; text-decoration: none }
a:visited { color: #000000; text-decoration: none }
a:hover { color: #000000; bgColor: white; text-decoration: none}
a:active { color: #000000; text-decoration: none }

a.email:link { color: #000000; text-decoration: none;}
a.email:visited { color: #000000; text-decoration: none}
a.email:hover { color: #ffffee; background: #000000; text-decoration: none}
a.email:active { color: #000000; text-decoration: none}

a.emailu:link { color: #000000; text-decoration: underline}
a.emailu:visited { color: #000000; text-decoration: underline}
a.emailu:hover { color: #ffffee; background: #000000; text-decoration: underline}
a.emailu:active { color: #000000; text-decoration: underline}

a.email2u:link { color: #ffffee; text-decoration: underline}
a.email2u:visited { color: #ffffee; text-decoration: underline}
a.email2u:hover { color: #000000; background: #ffffee; text-decoration: underline}
a.email2u:active { color: #ffffee; text-decoration: underline}

a.email2:link { color: #ffffee; text-decoration: none}
a.email2:visited { color: #ffffee; text-decoration: none}
a.email2:hover { color: #000000; background: #ffffee; text-decoration: none}
a.email2:active { color: #ffffee; text-decoration: none}

/* *******************  Phones and Tablets  *****************/

@media only screen and (max-width: 1200px) {
	.isbn_block {width: 100%;font-size: .8rem;padding: 10px 2px 2px 2px;text-align: left;}
	.links_block {width: 100%;font-size: .8rem;padding: 10px 2px 2px 2px;text-align: left;}
}

@media only screen and (max-width: 1024px) {
	.isbn_block {width: 100%;font-size: .85rem;padding: 10px 2px 2px 2px;text-align: left;}
	.links_block {width: 100%;font-size: .85rem;padding: 10px 2px 2px 2px;text-align: left;}
	.buy_indent {text-indent: 5px; font-size: 0.6 rem;}
	.index_block1 {font-size: .85rem;}
	.index_block2 {font-size: .85rem;}
	/* [class*="col-"] {width: 100%;padding: 10px;} */

}

@media only screen and (max-width: 900px) {
	.isbn_block {width: 100%;font-size: .8rem;padding: 10px 2px 2px 2px;}
	.links_block {width: 100%;font-size: .8rem;padding: 10px 2px 2px 2px;}
}

@media only screen and (max-width: 768px) {
	img {max-width: 50%;}
	.bottom_bar {height: 5px;}
	.buy_indent {font-size: 0.5 rem;}
	.footer {font-size: .8rem;}
	.index_block1 {font-size: .8rem;}
	.index_block2 {font-size: .8rem;}
	.main_body {font-size: .9rem;}
	.title_back {padding-top: 20px;height: 250px;}
	.topbar {height: 40px;margin-left: auto; margin-right: auto; padding-bottom: 5px;font-size: .75rem;}
	.toptitle {background: url(pics/toptitle_small.png) no-repeat;background-position: 50% 50%;height: 200px;}
	[class*="col-"] {width: 100%;float: left;padding: 10px;}
	h1 {font-size: 1.1rem;}
	h5 {font-size: 1rem;}
	p {font-size: .9rem;}
}
	
@media only screen and (max-width: 700px) {
	.isbn_block {padding: 5px 2px 2px 2px;font-size: .8rem;height: 150px;}
	.links_block {height: 150px;padding: 5px 2px 2px 2px;font-size: .8rem;}
}

@media only screen and (max-width: 500px) {
.main_body {font-size: .8rem;}
.index_block2 {font-size: .8rem;}
.index_block1 {font-size: .8rem;}
.buy_indent {font-size: 0.4 rem;}
}

@media only screen and (max-width: 426px) {
	h1 {font-size: .8rem;}
	h5 {font-size: .8rem;}
	p {font-size: .8rem;}
	.bottom_bar {height:5px;}
	.title_back {height: 300px;border: 0px solid #ffffff;padding-top: 30px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;background: linear-gradient(180deg, #000066 20%, #A0A0F7 50%, #000066 80%);position: static;/* background: #8A79AA url(pics/purpledots.png) 0% 0% repeat-x; *//* background-image: linear-gradient(180deg, #FFFFff, #ffff88, #ffffff);  *//* background-image: linear-gradient (90deg, #530074 25%, #E197FF 75%); *//* background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c); *//* background: linear-gradient(45deg, red 0 50%, blue 50% 100%); *//* background: radial-gradient(ellipse, #A0A0F7 35%, #000066); *//* blue/light green(ebf8e1)/orange *//* F2C79D (tan/orange)  F2C79D orange A61FEF purple*/}
	.footer {font-size: .6rem;}
	.topbar {width: 100%;height: 60px;vertical-align: top;background: #000000;/* background: transparent; */margin-left: 0px; margin-right: 0px; padding-top: 0;padding-right: 0px;padding-bottom: 10px;padding-left: 0px;text-align: center;font-family: Arial;font-size: 1rem;font-weight: bold;color:#ffffff;position: sticky;position: -webkit-sticky; /* Safari */top: 0;}
	.title_back {padding-top: 10px;height:150px;}
	.toptitle {height: 250px;border: 0px solid #ffffff;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;margin-right: auto;margin-left: auto;background: url(pics/toptitle.png) no-repeat;background-position: 50% 50%;/* position: static; */}
	.topbar {height: 40px;padding-bottom: 5px;font-size: .5rem;}
	.bottom_bar {width: 100%;height: 10px;padding: 0;background: #000000;}
	.toptitle {background: url(pics/toptitle_smaller.png) no-repeat;background-position: 50% 50%;height:150px;}
.buy_indent {font-size: 0.3 rem;}
	.main_body {font-size: .8rem;}
}

@media only screen and (max-width: 400px) {
p {font-size: .8rem;}
h5 {font-size: .8rem;}
h1 {font-size: .8rem;}
.main_body {font-size: .8rem;}
}

@media only screen and (max-width: 330px) {
.links_block {font-size: .7rem;}
.isbn_block {font-size: .7rem;}
.index_block1 {font-size: .7rem;}
.index_block2 {font-size: .7rem;}
.buy_indent {font-size: 0.2 rem;}
}


