/* •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
   ••  Project: Scarky.com                                          ••
   ••  Date:    July 2009                                           ••
   ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* 1. DEFAULT
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

html, body, h1, h2, p, ul, ol, li {
  margin: 0;
  padding: 0;
}

body {
  font: normal 87.5%/150% "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif; 
  color: #747474;
  background-color: #fff;
}

a {
  color: #069;
  border-bottom: 1px solid #bbd6e4;
  text-decoration: none
}

a:hover,
a:focus {
  color: #c33;
  border-bottom-color: #e7a0a0;
}

strong, b { font-weight: bold; }
em, i     { font-style: italic; }
li        { list-style: none; }

/* 2 =LAYOUT
---------------------------------------------------------------------- */

#a11y {
  position: absolute;
  left: -999em;
}

body {
  background: url("i/bg-tictactoe.png") no-repeat 50% -70px;
}

#site {
  width: 940px;
  padding: 0 20px;
  border-right: 1px solid #fff; /* prevents flickering on window.resize */
  height: 670px;
  margin: 0 auto;
  position: relative;
}

/* 3 =PARTS
---------------------------------------------------------------------- */

h2 {
  position: absolute;
  left: -999em;
}

#about, #more {
  float: left;
  width: 350px;
}

/* 3.1 =Logo
---------------------------------------------------------------------- */

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -120px;
  margin-top: -155px;
  background: url("i/logo-home.png") no-repeat 50% 50%;
  width: 240px;
  height: 240px;
  text-indent: -1000em;
}

/* 3.2 =About
---------------------------------------------------------------------- */

#about {
  background: url("i/bg-about.png") no-repeat 0 180px;
  padding-top: 455px;
}

#about p {
  margin: 0 75px 18px 0;
}

#about .more {
  margin-left: -10px;
  padding: 2px 0 5px 10px;
  background: url("i/bg-more.png") no-repeat;
}

#about .more a {
  text-shadow: #fff 0 1px 0;
}

#about .more a strong {
  text-transform: lowercase;
}

/* 3.3 =More
---------------------------------------------------------------------- */

#more {
  margin-left: 240px;
  padding-top: 240px;
}

#more ul,
#more p,
#more .button {
  margin-left: 40px;
}

#more ul {
  background: url("i/bg-row-quizes.png") no-repeat 0 35px;
  margin-left: 20px;
  margin-right: -20px;
  padding-left: 20px;
  line-height: 125%;
}

#more ul:after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

#more li {
  width: 155px;
  float: left;
  min-height: 45px;
}

#more li em {
  display: block;
  text-transform: uppercase;
  font-size: 12px;
  font-style: normal;
}

#more .button {
  display: block;
  background: url("i/button-build.png") no-repeat;
  width: 164px;
  height: 35px;
  border-bottom: 0;
  text-indent: -1000em;
  outline: 0;
}

#more p {
  margin-top: 85px;
  background: url("i/bg-underline.png") no-repeat 45px 100%;
  padding-bottom: 12px;
}

#more p span {
  display: block;
}

/* 4. FOOTER
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

#footer {
  position: fixed;
  background-color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 15px;
  color: #999;
  font-size: 12px;
  line-height: 135%;
}

#footer span {
  display: block;
}

#footer a {
  color: #999;
  font-weight: bold;
  border-bottom: 0;
}

#footer .company {
  float: left;
  margin-right: 10px;
  width: 112px;
  height: 30px;
  background: url("i/logo-srl.png") no-repeat;
  text-indent: -1000em;
}

#footer .made-by {
  position: absolute;
  right: 10px;
  bottom: 10px;
}