html,body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: garamond;
}

div#outerWrapper {
	position: relative; /* needed for footer positioning*/
	margin: 0 auto; /* center, not in IE5 */
	width: auto !important;
	width: 100%;
	min-width: 100%;
	height: auto !important; /* real browsers */
	height: 100%; /* IE6: treaded as min-height*/
	min-height: 100%; /* real browsers */
}

div.longWrapper {
	margin: 0 auto;
	width: 100%;
}

div.top {
	position: absolute;
	top: 0;
	height: 120px;
	background-color: #ddd;
}
div.middle {
	position: absolute;
	height: 100%;
	background-color: #fff;
	overflow:hidden;
}
div.bottom {
	position: absolute;
	bottom: 0;
	height: 120px;
	background-color: #333;
}

div.left {
	position: absolute;
	left: 0;
	width: 50%;
	height: 100%;
}
div.right {
	position: absolute;
	right: 0;
	width: 50%;
	height: 100%;
}

div.top div.left {
}
div.top div.left img {
	position: absolute;
	left: 20px;
	top: 50px;
}
div.top div.right {
	background-color: #ccc;
}

div.middle div.left {
}
div.middle div.right {
	background-color: #000;
}
div.middle ul {
	position: absolute;
	width: 100%;
}
div.middle li {
	font-size: 20px;
	list-style: none;
	line-height: 35px;
}
div.col {
	position: absolute;
	top: 120px;
	bottom: 120px;
	width: 100%;
}
div.middle div.left div.col ul {
	text-align: right;
	right: 20px;
	color: #000;
}
div.middle div.right div.col ul {
	text-align: left;
	left: 20px;
	color: #fff;
}

/* index.html spacing */
div.col ul.ichi {
	top: 2%;
}
div.col ul.ni {
	top: 30%;
}
div.col ul.san {
	top: 58%;
}
div.col ul.shi {
	top: 87%;
}

/* more.html spacing */
body#more div.col ul.ni {
	top: 35%;
}
body#more div.col ul.san {
	top: 57%;
}

div.left li {
	font-size: 30px;
    margin-right: 40px;
}

div.bottom div.left {
}
div.bottom div.right {
	background-color: #222;
}
div.bottom div.right img {
	position: absolute;
	right: 20px;
	top: 2px;
}

span.notes {
    font-size: 16px;
    letter-spacing: 1px;
    color: #eee;
    margin-left: 20px
}

/* Links */
a{
	text-decoration: none;
	color: #999;
}
a:hover{
	text-decoration: underline;
}

/* 1. who */
#mission {
	color: #bbb;
}

a#resume {
	color: #ddd;
}

a#email {
	color: #fff;
}

/* 2. projects */

a#link_a {
	color: #ff6dd3;
}

a#link_b {
  color: #F5ED8F;
}

a#link_c {
	color: #71ddbb;
}

a#link_d {
	color: #b8e89b;
}

/* 3. etc */
.middle .san li {
  line-height: 32px;
}
.social_type {
  display: inline-block;
  width: 70px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #ccc;
  cursor: default;
}

.social {
  font-size: 16px;
}
.social.twitter {
  color: #35d5e8;
}
.social.g_plus {
  color: #f18a8a;
}
.social.linked_in {
  color: #d59dff;
}
.social.fb {
  color: #8cbcff;
}

/* 4. more */

a#more {
	color: #808080;
}

a#less {
	color: #9d9d9d;
}

/* 0. more.html */
a.websites {
	color: #7ff2d2;
}

a.etc {
	color: #ffb0ec;
}

/* header/footer */

#header{
    color: #444;
}
#header div{
	position: absolute;
    top: 10px;
    width: 50%;
    letter-spacing: 1px;
}
#headerLeft{
	left: 0;
    text-align: right;
}
#headerLeft span{
    margin-right: 8px;
}
#headerRight{
	right: 0;
    text-align: left;
}
#headerRight span{
    margin-left: 8px;
}

#footer{
}
#footerLeft{
	position: absolute;
    bottom: 10px;
	left: 0;
    width: 50%;
    text-align: right;
    letter-spacing: 1px;
}
#footerLeft span{
    margin-right: 8px;
}
#footerRight{
	position: absolute;
    bottom: 10px;
	right: 0;
    width: 50%;
    text-align: left;
    letter-spacing: 2px;
}
#footerRight span{
    margin-left: 8px;
}