@viewport {
    zoom: 1.0;
    width: auto;
    height: extend-to-zoom 100%;
}

body { width:auto; margin:auto;}
.fl {float:left;}
.fr {float:right;}
h1.booktitle {
    font-family: 'Archivo Black', sans-serif;
    color: #00a5c8;
    font-size: 72pt;
    line-height: 58pt;
	width:330px;
}
/* slightly enhanced, universal clearfix hack */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
.clearfix { display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* stop commented backslash hack */

.btn {
  display:inline-block;
  position:relative;
  border-radius: 25px;
  background-color: rgb(255, 198, 89);
  padding:.5em 1em;
  line-height:normal;
  color:white;
  font-variant:small-caps;
  font-weight:bold;
  text-align:center;
  font-size:1.2em;
}

.btn:hover {
  background-color: #cc9e47;
  color:#fff;
}

a {
	color:inherit;
	text-decoration:none;
}

a:hover {
	color:inherit;
	text-decoration:none;
}

h1, h2, h3, h4, h5, h6, th {
	font-family: "Trebuchet MS";
	font-size:16pt;
	font-weight: bold;
	margin:0;
}

body, p, div, main, aside, td {
	font-size: 14pt;
	font-family: arial, helvetica, sans-serif;
	line-height: 170%;
}

.buybtns {
	position: relative;
    top: 7em;
}

.buybtns a {
	display:inline-block;
	width:30%;
	padding:1%;
    top: 7em;
	vertical-align:top;
}
.bar {
	position:relative;
	min-height:50px;
	line-height:50px;
	width:100%;
	background-color:#00a5c8;
	vertical-align:middle;
}

.banner {
	background:url(../images/bkgnd2.jpg) center bottom no-repeat transparent;
	background-size:cover;
	padding:2em 2em 3em;
}
.banner .title {
  font-size: 36pt;
  font-family: Arial, Helvetica, sans-serif, "Trajan Pro";
  color: rgb(255, 255, 255);
  font-weight: bold;
  text-align: center;
  text-transform:uppercase;
}

.banner .description {
  color: rgb(0, 0, 0);
  text-align: center;
}
main,aside {
display:inline-block;
padding:0 2.4% 2.4% 2.4%;
position:relative;
}
main {
width:60%;
margin-top:-2.5%;
}
aside {
padding-right:0;
width: 32.4%;
padding-top: 1em;
}

section {}
section h1{
  color: rgb(255, 255, 255);
  font-variant: small-caps;
  padding: 25px 20px;
  background-color:#b2d1c4;
}

.date_passed { text-decoration: line-through;}

section#upcoming h1{
	background:url(../images/events.png) 95% center no-repeat #b2d1c4;
}

section#contact h1{
	background:url(../images/envelope.png) 95% center no-repeat #b2d1c4;
}

article#book {
	width:95%;
	display:inline-block;
	padding:2.5%;
	position:relative;
	top: -5em;
}

#book_cover {
    position: absolute;
    right: 0px;
    bottom: -50px;
}

div.container {
	width:100%;
	position:relative;
	max-width:1300px;
	margin:auto;
}

.r { text-align:right;}
.l { text-align:left;}

footer div.bar {padding:.5em 0;}
footer p{ color:white; font-size:.7em;}

section#contact h1, section#donate h1 { padding:0;}
section#contact h1 a, section#donate h1 a{ padding: 25px 20px; display:block;}
section#contact h1 a:hover, section#donate h1 a:hover{ background-color:#648c91;}

/* ############################################################################ */
/* ############################################################################ */

@media screen and (max-width: 700px), screen and (max-device-width: 700px) {

div.container { max-width:100%; }
main { width:95%;}
aside { width:95%; }
#book_cover { float:none; position:relative; bottom:0; width:100%; }
footer p.r { text-align:center;}
a.btn { width:85%; padding-left:5%; padding-right:5%;}

}