* {
	margin: 0;
	padding: 0;
}

html {
	background: url(../img/wallpaper.gif);
}

body{
	font-family: "p22-underground-1","p22-underground-2", Gill Sans, Arial, sans-serif;
	line-height: 1.4;
	color: #561218;
	font-size: 18px;
	background: transparent url(../img/gradient.png) repeat-x top left;
}		

a, a:visited {
	color: #8c1218;
	text-decoration: none;
}

a:hover, a:focus {
	text-decoration: underline;
	text-shadow: 0 0 6px rgba(255,255,255,0.8)
}

section {
	display: block;
	width: 700px;
	margin: 0 auto;
	min-height: 500px;
	position: relative;
}

header {
	display: block;
	padding: 0 0 45px 0;
	background: url(../img/tail.png) no-repeat 50px bottom;
}	

h1 {
	text-align: center;
	font-size: 55px;
	margin: 0;
	white-space: nowrap;
	color: #8c1218;
	text-shadow: 0 1px 0 rgba(255,255,255,0.8);
	background: rgba(255,255,255,0.5);
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
	padding: 0.25em 0 0 0;
}

h2 {
	font-weight: normal;
	font-size: 20px;
	margin: 120px 0 0 0;
	-webkit-text-size-adjust: 150%;
}

h2 a {
	text-transform: uppercase;
}
img {
	border: 0;	
}
footer {
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
	position: absolute;
	left: 400px;
	right: 0;
	bottom: -20px;
	display: block;
	line-height: 1.6;
}	
footer em {
	text-transform: none;
}	
		
@-webkit-keyframes ooh {
 0% {
   top: 0px;
  -webkit-transform: scale(1.0) rotate(0deg);
 }
 5% {
   top: -100px;
  -webkit-transform: scale(1.0) rotate(1deg);
 }
 10% {
   top: -100px;
  -webkit-transform: scale(1.0) rotate(-3deg);
 }		 
 15% {
   top: -100px;
  -webkit-transform: scale(1.0) rotate(3deg);
 }				 
 20% {
   top: -110px;
  -webkit-transform: scale(1.3) rotate(-6deg);
 }		 
 25% {
   top: -100px;
  -webkit-transform: scale(1.0) rotate(3deg);
 }
 30% {
   top: -100px;
  -webkit-transform: scale(1.00) rotate(-2deg);
 }		
 35% {
   top: 0;
  -webkit-transform: scale(1.0)rotate(0deg);
 }				 
 100% {
   top: 0;
  -webkit-transform: scale(1.0)rotate(0deg);
 }			 		 
}

@-webkit-keyframes shadow {
 0% { opacity: 1.0 }
 5% { opacity: 0.4 }	 	
 30% { opacity: 0.4 }				 
 35% { opacity: 1.0 }				 
 100% { opacity: 1.0}			 		 
}

#bag {
 width: 400px;
 height: 471px;		
 position: relative;
 left: 0;
 top: -70px;
 float: left;
}

#ooooh {
 -webkit-animation-name: ooh;
 -webkit-animation-duration: 6s;
 -webkit-animation-iteration-count: 3;
 -webkit-animation-timing-function: ease-in-out;
 top: 0;
 position: absolute;
 z-index: 1;
}

#shad {
-webkit-animation-name: shadow;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: 3;
-webkit-animation-timing-function: ease-in-out;
background: url(../img/shadow.png) no-repeat center bottom;		
z-index: 0;
top:0;
position: absolute;
 width: 400px;
 height: 490px;	
}

footer p {
	margin: 0.3em 0 0 0;
}

footer p+p+p+p {
	margin: 2em 0 0 0;
}

.marklet {
	background: #8c1218;
	color: #8c1218;
	text-shadow: 0 1px 0 rgba(255,255,255,0.8);
	text-transform: uppercase;
	background: rgba(255,255,255,0.5);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	padding: 0.2em 0.5em;
	margin: 1em 0;
}

/* Styles to make life better on narrower window widths and mobile devices like the iPhone */

@media screen and (max-width: 700px) {

body { 
	width: auto;
	padding: 10px 0 0 0;
}		
section { 
	width: auto;
	text-align: center;
	min-height: auto;
	padding: 0 20px;
}

audio {
	margin: 0 auto 10px auto;
	display: block;
}

h1 { font-size: 30px; }

h2 { margin: 0; -webkit-text-size-adjust: 110%; }

footer {
	position: static;
	margin: 20px 0 0 0;
	-webkit-text-size-adjust: 85%;
}	

#bag {
	position: relative;
	float: none;
	height: 220px;
	width: auto;
}

#ooooh {
	width: 250px;
	height: auto;
	left: 50%;
	margin: 0 0 0 -125px;
}

#shad { display: none; }

}