html {
  background-color:black;
}
#self {
  color: #CCFFFF;
  background-color: #7F6636;
}

body {
  color:#FFA500;	
  margin: 2% 8%;
  font: medium "Trebuchet MS", trebuchet, verdana, sans-serif;
}

#bottom {
  min-width: 356px;
}

h1 { 
  float:left;
}

a {
  color: #E6E6FA;
  text-decoration:none;
}

a:hover {
  background-color: white;
  color: orange;
}

#left {
  float:left;
  width:50%;
  position: absolute;
  top:0%;
  line-height: 18px;
}
#left p {
  margin: 0.8em 0;
}
#right {
  float:right;
  width:20%;
  min-width: 50px;
  border-left:thick solid #ffccff;
}

#right a {
  color: #E6E6FA;
}

#right a:hover {
  background-color: orange;
  color: #CFF;
}

#fields {
  clear: left;
  color: #C4C4C4;
  font-size: 14px;
  padding-top: 4%;
}

#title a {
  color: #CCFFFF;
  font-size: large;
}

#fields a {
  color: #C4C4C4;
  font-size: 14px;
}

#title a:hover, #fields a:hover {
  background-color: orange;
  color: #CCFFFF;
}

#title {
  clear:left;
  color:#C4C4C4;
  font-size: 20px;
}
#title span {
  color: orange;
}
#right2 {
  position: absolute;
  margin-left: 40%;
  top: 50%;
  margin-right: 10%;
  color: #CCFFFF;
}

#right2 p {
  font-size: 18px;
  font-weight: 100;
  line-height: 40px;
  padding-left: 2%;
}

img {
   position: relative;
   float: left;
   top: 2%;
   margin-bottom: 3%;
   padding-top: 0%;
}

#contact {
  color: #C4C4C4;
}

ul.bar {
   position: relative;
   width:100%;
   float:left;
   margin: 2% 0 2% 0;
   padding: 0;
   list-style: none;
   background-color: orange;
   top: 0%;
}

ul.bar li {
   float: left;
}

ul.bar li a {
   display: block;
   padding:5px 13px;
   text-decoration: none;
   font-weight: bold;
   color: black;
}

ul.bar li a:hover {
   color: #C4C4C4;
   background-color:black;
}

#projects {
  position: absolute;
  top: 100%;
  margin: 0;
  margin-bottom: 3%;
  color: #ffccff;
  font-size: 15px;
}

#projects:hover {
  background-color: blue;
}