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

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;
box-sizing: border-box;
}



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

html {
font-size: 100%;
font-family: Verdana, Geneva, sans-serif;

}

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

body {
margin: 22px auto;
background-color: #223b6e;
}

.page {
max-width: 400px;
margin: 30px auto;
padding: 0;
background-color: transparent;
border: 0px solid #000;
}

.title {
max-width: 400px;
margin: 0 auto;
min-height: 732px;
text-align: center;
background-image: url(menhirs-at-night-sm.jpg);
background-position: top center;
background-repeat: no-repeat;
border: 0px solid #00FF00;
}

h1 {
font-size: 26pt;
font-weight: bold;
color: #fff;
line-height: 1.1;
padding-top: 190px;
text-align: center;
text-shadow: 0px 0px 7px #000;
border: 0px solid #0000ff;
}

h2 {
font-size: 16pt;
font-weight: normal;
color: #fff;
height: 20px;
margin-top: 15px;
text-align: center;
text-shadow: 0px 0px 7px #000;
border: 0px solid #ff0000;
}

h3 {
font-size: 10pt;
font-weight: normal;
color: #fff;
padding-top: 15px;
text-align: center;
}

p {
float: left;
width: 455px;
font-size: 10pt;
margin: 5px 20px 20px 20px;
border: 0px solid #ff0000;
}

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

a:hover, a:visited:hover {
color: #FFBE6E;
text-decoration: none;
}

.list {
padding-top: 0px;
  width: 250px;
  margin: 40px auto;
  text-align: center;
  border: 0px solid #000;
}

li {
  width: 100%;
  font-size: 12pt;
  font-weight: bold;
  text-align: center;
  border: none;
  list-style: none;
}

ul a {
  color: #fff;
  display: block;
  margin: 0px 0px 5px 0px;
  padding: 7px;
  border: 1px solid #376D8B;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

ul a:hover {
  color: #fff;
  background-color: rgba(255,255,255,.15);
  }


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

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

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



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

.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;
}
}