/* Reset
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: none;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

body, ul, ol, dl, h1, h2, h3, h4, h5, h6, td, th,
caption, pre, p, blockquote, input, textarea, label {
line-height: 1.5;
}

body {
font-size: 75%;
}

html > body  {
font-size: 12px;
}


/* Defaults
-------------------------------------------------------------- */

body,ul,ol,dl,h1,h3,h4,h5,h6,td,th,
caption,pre,p,blockquote,input,textarea,label {
font-family: 'LeagueGothicRegular', Haettenschweiler, Arial, sans-serif;
color: #423530;
text-transform: uppercase;
}

body { 
background: #FED732;
}

@font-face {
font-family: 'LeagueGothicRegular';
src: url('../fonts/League_Gothic-webfont.eot');
src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/League_Gothic-webfont.woff') format('woff'),
     url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
     url('../fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}


/* Common ID & Classes
-------------------------------------------------------------- */

.clear {
clear: both;
}

.hide {
display: none;
}

p.last {
margin-bottom: 0;
}


/* Headers
-------------------------------------------------------------- */

h1 {
background: url(../img/head.png) no-repeat 0 0;
margin: 54px auto 54px;
width: 152px;
height: 149px;
position: relative;
top: 0;
left: 0;
cursor: move;
z-index: 999;
}

h1 span {
display: none;
}

h2, h3 {
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3);
font-size: 46px;
line-height: 46px;
clear: both;
}

h2 span {
font-size: 38px;
display: block;
}

h2 {
margin-bottom: 36px;
}


/* Text elements
-------------------------------------------------------------- */

p {
font-size: 2.33em;
margin: 0 0 1.5em 0;
}

a, a:visited {
color: #423530;
text-decoration: none;
z-index: 10;
-moz-transition-duration: .33s;
-o-transition-duration: .33s;
-webkit-transition-duration: .33s;
}

a:hover {
-moz-opacity:.20;
-ms-filter:Óalpha(opacity=20)Ó;
filter:alpha(opacity=20);
opacity: 0.20;
z-index: 100;
-moz-transition-duration: .33s;
-o-transition-duration: .33s;
-webkit-transition-duration: .33s;
}

a:active, a:focus {
position: relative;
top: 1px;
}

strong {
font-weight: bold;
}

em {
font-style: italic;
}


/* Content
-------------------------------------------------------------- */

#overlay {
background: -moz-linear-gradient(top, #FFB51A, #FED732 80%);
background: -webkit-gradient(linear, 0 0, 0 80%, from(#FFB51A), to(#FED732));
border-top: 1px solid rgba(255, 255, 255, 0.4);
width:100%;
height:100%;
position:absolute;
}

#the-head {
position: relative;
}

#content, #footer {
width: 620px;
margin: 0 auto;
position: relative;
text-align: center;
}

ul#social {
margin: 0 auto 36px;
list-style: none;
width: 385px;
height: 46px;
}

ul#social li {
width: 45px;
height: 46px;
margin: 0 5px;
float: left;
position: relative;
}

#footer {
z-index: 10;
}

#footer p, #footer a, #footer a:visited {
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
}

span.drag-me {
background: url(../img/drag-me.png) no-repeat 0 0;
width: 73px;
height: 49px;
position: absolute;
top: 10px;
right: 150px;
}


/* Image Replacement
-------------------------------------------------------------- */

a.twitter {
background: url(../img/btn-twitter.png) no-repeat 0 0;
width: 45px;
height: 46px;
display: block;
text-indent: -9000em;
}

a.flickr {
background: url(../img/btn-flickr.png) no-repeat 0 0;
width: 45px;
height: 46px;
display: block;
text-indent: -9000em;
}

a.lastfm {
background: url(../img/btn-last.png) no-repeat 0 0;
width: 45px;
height: 46px;
display: block;
text-indent: -9000em;
}

a.in {
background: url(../img/btn-in.png) no-repeat 0 0;
width: 45px;
height: 46px;
display: block;
text-indent: -9000em;
}

a.zerply {
background: url(../img/btn-zerply.png) no-repeat 0 0;
width: 45px;
height: 46px;
display: block;
text-indent: -9000em;
}

a.tumblr {
background: url(../img/btn-tumblr.png) no-repeat 0 0;
width: 45px;
height: 46px;
display: block;
text-indent: -9000em;
}

a.email {
background: url(../img/btn-email.png) no-repeat 0 0;
width: 45px;
height: 46px;
display: block;
text-indent: -9000em;
}

h3.elsewhere {
background: url(../img/elsewhere.png) no-repeat 0 0;
width: 112px;
height: 75px;
text-indent: -9000em;
display: block;
position: absolute;
top: 310px;
left: 0;
}


/* French Fancies
-------------------------------------------------------------- */
h1 {
-webkit-animation-name: pop;
-webkit-animation-duration: .6s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}

@-webkit-keyframes pop {
from {
-webkit-transform: scale(.1);
opacity: 0;
}
75% {
-webkit-transform: scale(1.20);
opacity: 1;
}
to {
-webkit-transform: scale(1);
}
}

ul#social li span{
display:none;
}

ul#social li:hover span {
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
text-shadow: 1px 1px 1px #FFF;
line-height:18px;
text-align: center;
display:block;
position:absolute;
top: 66px;
left: -42px;
padding: 10px 15px 8px;
width: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
background: #FFF;
background: -moz-linear-gradient(top, #FFF, #FFF 50%, #EFEFEF);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(.5, #FFF), to(#EFEFEF));
z-index: 999;
-webkit-animation-name: pop;
-webkit-animation-duration: .4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;	
-moz-opacity: .90;
-ms-filter:Óalpha(opacity=90)Ó;
filter:alpha(opacity=90);
opacity: 0.90;
}

ul#social li:hover span:before {
content: "\00a0";
display: block;
position: absolute;
top:-28px;
left: 50px;
width: 0;
height: 0;
border: 14px solid transparent;
}

ul#social li:hover span:after {
content: "\00a0";
display: block;
position: absolute;
top: -26px;
left: 51px;
width: 0;
height: 0;
border: 13px solid transparent;
border-bottom-color: #FFF;
}