html {
  min-height:100%;
}

body {
  background-color:#4a2a0d;
  
  background-image:
    -webkit-gradient(radial, center 170, 40, center top, 700, from(rgba(74,42,13,.1)), to(rgba(0,0,0,.7))),
    url(../images/background.gif);
  
  background-image:
    -moz-radial-gradient(center 170px, rgba(74,42,13,.1) 0%, rgba(0,0,0,.7) 100%),
    url(../images/background.gif);
    
  background-position:
    left top,
    left top;
    
  background-repeat:
    no-repeat,
    repeat;
  
  width:564px;
  margin:80px auto;
  color:#2c1c08;
  font-size:14px;
  line-height:1.5em;
  font-family:"ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2","Georgia",serif;
}

h1 {
  font-family:"ff-meta-serif-sc-web-pro-1","ff-meta-serif-sc-web-pro-2","Georgia",serif;
  font-size:70px;
  line-height:1.5em;
  color:hsla(32,93%,5%,.6);
  text-shadow:0 1px 0 hsla(30,53%,43%,.1);
  
  background-image:
    -webkit-gradient(linear, 0 0, 100% 0, from(rgba(40,20,3,.8)), color-stop(.4, rgba(40,20,3,.8)), color-stop(.48, #f7ff11), color-stop(.5,#ffffff), color-stop(.51,#f7ff11), color-stop(.52, rgba(40,20,3,.8)), to(rgba(40,20,3,.8)));
    background-position:right top;
    background-repeat:no-repeat;
      
  -webkit-background-size:2000px 200px;
  
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
  /*background-color:hsla(32,93%,5%,.6);*/
  
  cursor:default;
}

h1 span { background:transparent url(../images/line.png) left bottom repeat-x; }

h1:hover {
  -webkit-animation-name:textGlow;
  -webkit-animation-duration:40s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function:ease-in-out;
}

a {
  text-decoration:none;
  color:#604530;
  
  color:rgba(96,69,48,1);
  text-shadow:0 1px 0 rgba(0,0,0,.33);
}

em {
  font-family:"ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2","Georgia",serif;
  font-style:italic;
}

hr { display:none; }

blockquote,
#navigation {
  font-family:"ff-meta-serif-sc-web-pro-1","ff-meta-serif-sc-web-pro-2","Georgia",serif;
  float:left;
  text-align:center;
}

blockquote {
  width:304px;
  margin-right:15px;
  margin-left:119px;
  text-shadow:0 1px 0 hsla(30,53%,43%,.1);
}

#navigation { width:125px; }

#footer {
  position:absolute;
  text-indent:136px;
  bottom:1em;
  color:rgba(96,69,48,1);
  text-shadow:0 1px 0 rgba(0,0,0,.33);
}

#logo {
  position:relative;
  top:30px;
  display:inline-block;
  background:transparent url(../images/m.png) center center no-repeat;
}

#logo div {
  text-indent:-10px;
  width:103px;
  height:103px;
  background:transparent url(../images/logo-outside.png) left top no-repeat;
}

h1:hover div div {
  -webkit-animation-name:rotateLogo;
  -webkit-animation-duration:40s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function:ease-in-out;
}

@-webkit-keyframes rotateLogo {
    from  { -webkit-transform:rotate(0deg); }
    30%   { -webkit-transform:rotate(0deg); }
    40%   { -webkit-transform:rotate(20deg); }
    60%   { -webkit-transform:rotate(-5deg); }
    80%   { -webkit-transform:rotate(285deg); }
    98%   { -webkit-transform:rotate(365deg); }
    to    { -webkit-transform:rotate(360deg); }
}

@-webkit-keyframes textGlow {
  from  { background-position:top right; }
  95%   { background-position:top right; }
  to    { background-position:top left; }
}