/* TYPOGRAPHY
-------------------------------------------------------------*/
@font-face {
  font-family: 'Titillium Maps';
	font-weight: 200;	
	src: url('../fonts/titillium-maps.eot');
	src: local('://'), url('../fonts/titillium-maps.svg#titilliummaps29l') format('svg'), url('../fonts/titillium-maps.woff') format('woff'),  url('../fonts/titillium-maps.ttf') format('truetype');
}

@font-face {
	font-family: 'Titillium Maps 1';
	src: url('../fonts/titillium-maps-1.eot');
	src: local('://'), url('../fonts/titillium-maps-1.svg#titilliummaps29l001') format('svg'), url('../fonts/titillium-maps-1.woff') format('woff'),  url('../fonts/titillium-maps-1.ttf') format('truetype');
}

/* BODY & HTML
-------------------------------------------------------------*/
html                 { background: url(../images/tile.jpg); }
body                 { background: url(../images/leather.png) repeat-x 0 0; color: #000; font: normal 16px/24px 'Titillium Maps'; padding: 100px 0 0; text-rendering: optimizeLegibility; }


/* CONTENT
-------------------------------------------------------------*/
section              { margin: 0 auto; height: 530px; padding: 0 0 125px; overflow: hidden; position: relative; width: 700px; }
#fold                { background: url(../images/fold.png); bottom: 0; left: 0; position: absolute; height: 150px; width: 700px; z-index: 5; }
#page                { background: url(../images/paper.jpg); height: 460px; margin: 0 auto; padding: 70px 0 0; position: relative; text-align: center; top: 25px; width: 640px; }
#page                { box-shadow: #999 0 2px 20px; -moz-box-shadow: #999 0 2px 20px; -webkit-box-shadow: #999 0 2px 20px; }
.js #page            { height: 250px; top: 300px; }

h1                   { background: url(../images/logo-sml.png); height: 86px; margin: 0 auto; text-indent: -9999px; width: 54px; }
h2                   { font-family: 'Titillium Maps 1'; font-size: 36px; margin: 30px 0; }
p                    { padding: 0 80px 15px; }
p a                  { color: #000; font-weight: bold; }

.icon                { display: block; padding: 0; position: absolute; z-index: 5; }
.icon span           { display: block; height: 0; overflow: hidden; }
.icon a              { display: block; }
#email               { height: 110px; left: 323px; top: 18px; width: 57px; }
#email a             { background: url(../images/ribbon.png) no-repeat 0 0; height: 110px; width: 57px; }
#twitter             { background: url(../images/stamp.png); height: 93px; right: 85px; top: 50px; width: 93px; }
#twitter a           { background: url(../images/stamp.png) no-repeat 0 -94px; height: 93px; width: 93px; }

@-webkit-keyframes rotate {
  from { -webkit-transform: rotate(0deg) }
  to { -webkit-transform: rotate(180deg) }
}

#twitter a:hover {
  -webkit-animation-name: rotate; 
  -webkit-animation-duration: 0.7s; 
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
}

.no-cssanimations #twitter:hover { margin: 1px 0 0;  }