/*-----------------------------------*\

	Toast
	A Simple CSS Framework
	=================================

	Values you may want to change:
	- .container { max-width:; }
	- p { margin-bottom:; }
	- html { font:; }

	Remember: no framework will be as
	good as a custom built, per-
	project	one. Toast and other
	frameworks are best used for
	rapid prototyping.

\*-----------------------------------*/

/*-----------------------------------*\
	$RESET
\*-----------------------------------*/

* {
	margin: 0;
	padding: 0;
	position: relative;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

/*-----------------------------------*\
	$GRID
\*-----------------------------------*/

.container {
	/* Whatever you want. They’re your oats. */
	max-width: 800px;
    height: 592px;
	margin: 36px auto;
	padding: 0;
}

img {
  z-index: -50;
}

.grid {
	margin-left: -2%;
	max-width: 105%;
    background: transparent;
}

.unit {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	margin-left: 2%;
	margin-right: -.25em;
    top: 30px;
    left: 0px;
	/* Clearfix */
	overflow: hidden;
	*overflow: visible;
}

	.unit.demo {
		background-color: #fff8eb;
		height: 48px;
		height: 3rem;
		margin-bottom: 24px;
		margin-bottom: 1.5rem;
	}

.span-grid {
	width: 97%;
}

.one-of-two { width: 48%; }

.one-of-three { width: 30.36%; }
.two-of-three { width: 63.666666666%; }

.one-of-four { width: 22.05%; }
.three-of-four { width: 72%; }

.one-of-five { width: 17.07%; }
.two-of-five { width: 37%; }
.three-of-five { width: 57%; }
.four-of-five { width: 77%; }

@media screen and (max-width: 650px) {
	.grid {
		margin-left: 0;
		max-width: none;
	}

	.unit {
		width: auto;
		margin-left: 0;
		display: block;
	}
}

/*-----------------------------------*\
	$TYPE

	Works off the assumption of a 1.5
	line height @ 20px. Again, change
	as necessary.
\*-----------------------------------*/

p, .p, ul, ol, hr, table, form, pre,
h1, .alpha, h2, .beta {
	margin-bottom: 30px;
	margin-bottom: 1.5rem;
}

h1, .alpha {
    font-family: "Berlin Sans FB";
	font-size: 36pt;
	font-weight: normal;
    color: #fff;
	line-height: 1;
    padding-top: 25px;
    padding-bottom: 7px;
    text-align: center;
}

h2, .beta {
    font-family: "Berlin Sans FB";
    font-size: 22pt;
	font-weight: normal;
    color: #fff;
	line-height: 1;
    padding-bottom: 55px;
    text-align: center;
}

h3, h3 a:link, .gamma {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10pt;
	font-weight: normal;
    color: #fff;
	line-height: 1;
    padding-top: 0;
    padding-bottom: 5%;
    text-align: center;
    text-decoration: none;
}

h3 a:hover, h3 a:visited:hover{
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10pt;
	font-weight: normal;
	line-height: 1;
    padding-top: 0;
    padding-bottom: 5%;
    text-align: center;
    text-decoration: none;
    color: #FFBE6E;
}

hr {
	border: none;
	border-bottom: 1px solid rgba(0,0,0,.1);
	margin-top: -1px;
}

/*-----------------------------------*\
	$MAIN
\*-----------------------------------*/

html {
    font-size: 62.5%;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
}

@media screen and (max-width: 650px) {
	html {
		font-size: 100%;
	}
}

body {
  margin: 15px auto;
  background-color: #551b19;
  text-align: center;
}

.header {
  position: relative;
  float: none;
  top: 10px;
  text-align: center;
  margin: 0 auto;
}

.footer {
  position: relative;
  float: left;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  top: -310px;
}

.title {
  position: relative;
  top: -590px;
}

.chapterlist {
  position: relative;
  float: left;
  top: -285px;
  width: 100%;
  padding: 10px 0;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  background-image: url(shade30.png);
  border: 0px solid #FF1493;
}

ul a:link {
  color: #fff;
  text-decoration: none;
}

ul a:hover, ul a:visited:hover {
  /*font-size: 10pt;*/
  color: #FFBE6E;
  text-decoration: none;
}

ul a:visited, h3 a:visited {
  /*font-size: 10pt;*/
  color: #BBCBE0;
  text-decoration: none;
}

.list1, .list2, .list3, .list4 {
  position: relative;
  display: inline-block;
/*  float: left;
  clear: right;*/
  margin: 0 auto;
  padding-top: 0;
  padding-left: 0px;
  padding-bottom: 0px;
  top: 0px;
  left: 12px;
  width: 126px;
  vertical-align: top;
  border: 0px solid #32CD32;
}

li {
  list-style: none;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: normal;
  font-size: 10pt;
  line-height: 1.4;
  text-align: left;
}