* {
  margin: 0;
  padding: 0;
}

html {
  background-color: #0f2461;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #ccd2ed;
  font-size: 80%;
}

h1 {
  display: none;
}

a img {
  border: 0px;
}

/* Left */
#left {
  position: absolute;
  left: 59px;
  top: 0;
  width: 280px;
  height: 650px;
  background: transparent url(../images/backgrounds/front.gif) no-repeat;
}

#left ul#mainnav {
  height: 100px;
  left: 14px;
  position: absolute;
  top: 187px;
  width: 258px;
}
#left ul#mainnav li {
  float: left;
  width: 86px;
  list-style: none;
}
#left ul#mainnav li a {
  display: block;
  text-indent: -9999px;
  height: 100px;
}

#left ul#mainnav li#web { background: transparent url(/images/navigation/front/web.gif) no-repeat; }
#left ul#mainnav li#web:hover { background: transparent url(/images/navigation/front/web_roll.gif) no-repeat; }
#left ul#mainnav li#interface { background: transparent url(/images/navigation/front/ui.gif) no-repeat; }
#left ul#mainnav li#interface:hover { background: transparent url(/images/navigation/front/ui_roll.gif) no-repeat; }
#left ul#mainnav li#concept { background: transparent url(/images/navigation/front/concept.gif) no-repeat; }
#left ul#mainnav li#concept:hover { background: transparent url(/images/navigation/front/concept_roll.gif) no-repeat; }

#left ul#mainnav li ul {
  display: none;
}
#left ul#mainnav li.hover ul {
  display: block;
  width: 80px;
  position: absolute;
  top: 95px;
  background-color: #fff;
}
#left ul#mainnav li ul li {
  width: 80px;
  height: auto;
  font-size: 90%;
}
#left ul#mainnav li ul li a {
  text-decoration: none;
  display: block;
  padding: 2px 4px;
  border-bottom: 1px dotted #333;
  text-indent: 0;
  height: auto;
}

#left ul#mainnav li#web ul li a { background: #9cd114; color: #525d37; }
#left ul#mainnav li#web ul li a:hover { background: #cae08d; }
#left ul#mainnav li#interface ul li a { background: #92dbe6; color: #253586; }
#left ul#mainnav li#interface ul li a:hover { background: #c0e9f0; }
#left ul#mainnav li#concept ul li a { background: #fdc70b; color: #5f5638; }
#left ul#mainnav li#concept ul li a:hover { background: #f4dd92; }

#top ul#secondarynav {
  margin-left: 720px;
  width: 220px;
  list-style: none;
}
#top ul#secondarynav li {
  float: left;
  width: 54px;
  text-indent: -9999px;
}
#top ul#secondarynav li a {
  display: block;
  height: 27px;
  outline: none;
}

#top ul#secondarynav li#blog-btn a { background: transparent url(/images/navigation/front/blog.gif) no-repeat; }
#top ul#secondarynav li#blog-btn a:hover { background: transparent url(/images/navigation/front/blog_roll.gif) no-repeat; }
#top ul#secondarynav li#about-btn a { background: transparent url(/images/navigation/front/about.gif) no-repeat; }
#top ul#secondarynav li#about-btn a:hover { background: transparent url(/images/navigation/front/about_roll.gif) no-repeat; }
#top ul#secondarynav li#contact-btn a {
  width: 58px;
  background: transparent url(/images/navigation/front/contact.gif) no-repeat;
}
#top ul#secondarynav li#contact-btn a:hover { background: transparent url(/images/navigation/front/contact_roll.gif) no-repeat; }

#top ul#secondarynav li#twitter-btn a {
  height: 18px;
  width: 20px;
  margin: 9px 12px;
  background: transparent url(/images/twitter.gif) no-repeat 0 0;
}
#top ul#secondarynav li#twitter-btn a:hover {
  background: transparent url(/images/twitter.gif) no-repeat 0 -18px;
}

/* Top */
#top {
  background-color: #0c225d;
  height: 76px;
}


/* Main */
#main {
  background-color: #273a8b;
  height: 363px;
  padding-left: 340px;
  padding-top: 62px;
}
#main #splash-items {
  height: 245px;
  width: 650px;
  overflow: hidden;
}
#main .item {
  margin-left: 40px;
  width: 154px;
  height: 245px;
  float: left;
  position: relative;
}
#main .item .title {
  height: 25px;
  margin-bottom: 20px;
}

#main .item .image-container {
  position: absolute;
  height: 150px;
  width: 150px;
  top: -5px;
  left: -54px;
  padding: 45px 52px;
}
#main .item.hover .image-container {
  background: transparent url(../images/glow.png) no-repeat;
}
#main .item .image-container img {
  border: none;
  cursor: pointer;
}
#main .item .hidden-link {
  display: none;
}
#main .item .subtext {
  text-align: center;
  position: absolute;
  top: 0;
  padding-top: 205px;
  padding-bottom: 15px;
  width: 154px;
  font-size: 120%;
  font-weight: bold;
  display: none;
}
#main .item:hover .subtext,
#main .item.hover .subtext {
  display: inline;
}
#main .item .subtext a {
  color: #dbddf3;
  text-decoration: none;
}
#main .item .post-link {
  position: absolute;
  z-index: 1;
  top: 44px;
  bottom: 0px;
  width: 154px;
}

#welcome-message {
  margin-left: 40px;
  width: 540px;  
}
#welcome-message h2 {
  margin-bottom: 0.3em;
}
#welcome-message p {
  line-height: 1.3em;
}

/* Footer */
#footer {
  margin-top: 20px;
  margin-left: 380px;
  color: #959cc3;
}