/*
    stylesheet.css
*/
/* 1. Reset and Globals 
********************************************************/
*{
  margin:0;
  padding:0;
}
body{
  text-align:center;
  color:#00bc1f;
  font:12px/1.2 'Folksolid','Helvetica Neue Condensed Bold','HelveticaNeue-CondensedBold', Helvetica;
  text-shadow:1px 1px 1px rgba(0,0,0,0.4);
}

/* 2. Links 
********************************************************/
a:link,
a:visited{
  color:#00bc1f;
  text-decoration:none;
  -webkit-transition: color 0.1s linear;
}

a:active,
a:hover,
a:focus{
  color:#f26704;
}

/* 3. Page Header 
********************************************************/
h1 {
  font-size:120px;
  width:590px;
  margin:.2em auto 0;
  padding-bottom:.2em;
  border-bottom:1px solid #ccc;
}
span.surname {
  color:#000;
}

/* 4. Section 
********************************************************/
section{
  display:block;
  margin:0 auto;
  padding-top:3em;
  padding-bottom:3.2em;
  width:580px;
  font-size:25px;
  text-transform:uppercase;
  text-align:left;
  border-bottom:1px solid #ccc;
}
section h2{
  padding-left:220px;
  min-height:190px;
  background:transparent none no-repeat 0 0;
}
section a:hover h2{
  background-position: 0 -380px;
}
section#photos      h2 { background-image:url(../images/camera.png);     }
section#writing     h2 { background-image:url(../images/writing.png);    }
section#music       h2 { background-image:url(../images/music.png);      }
section#twitter     h2 { background-image:url(../images/twitter.png);    }
section#software    h2 { background-image:url(../images/software.png);   }
section#job         h2 { background-image:url(../images/job.png);        }
section#code        h2 { background-image:url(../images/code.png);       }
section#weather     h2 { background-image:url(../images/weather.png);    }
section#skype       h2 { background-image:url(../images/skype.png);      }
section#southampton h2 { background-image:url(../images/southampton.png);}

section:nth-child(2n) h2 {
  text-align:right;
  padding-right:220px;
  padding-left:0;
  background-position:100% 0;
}
section:nth-child(2n) a:hover h2 {
  background-position:100% -380px;
}
section h2 span.percent,
section h2 span.number{
  font-size:130px;
  line-height:0.8;
  display:block;
}
section h2 span.number span.of{
  font-size:28px;
}

section p.subtext{
  padding-left:220px;
  color:#ccc;
  font-size:20px;
  word-spacing:2px;
}
section p.subtext a:link,
section p.subtext a:visited{
  color:#999;
}
section:nth-child(2n) p.subtext{
  text-align:right;
  padding-right:220px;
  padding-left:0;
}

/* 4. Footer 
********************************************************/
footer {
  padding:1.5em;
  display:block;
  font-size:2em;
}

/* 5. @font-face 
********************************************************/
@font-face {
	font-family: 'Folksolid';
	src: url('Folksolid-webfont.eot');
	src: local('☺'), url('Folksolid-webfont.woff') format('woff'), url('Folksolid-webfont.ttf') format('truetype'), url('Folksolid-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}