/* author: Kirk Austin */
@font-face {
	font-family: 'Origins';
	src: url('fonts/Origins.eot');
}

@font-face {
	font-family: 'Origins';
	src: url('fonts/Origins.woff') format('woff'),
	url('fonts/Origins.svg#Origins') format('svg');
}

@font-face {
	font-family: 'Bianca';
	src: url('fonts/Bianca.eot');
}

@font-face {
	font-family: 'Bianca';
	src: url('fonts/Bianca.woff') format('woff'),
	url('fonts/Bianca.svg#Bianca') format('svg');
}

@font-face {
	font-family: 'Tiva';
	src: url('fonts/Tiva.eot');
}

@font-face {
	font-family: 'Tiva';
	src: url('fonts/Tiva.woff') format('woff'),
	url('fonts/Tiva.svg#Tiva') format('svg');
}

body:before
{
   content: "";
   position: fixed;
   top: -10px;
   left: 0;
   width: 100%;
   height: 10px;
   z-index: 100;
   -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}

.pageHeader {
	font-family: "Origins", serif;
	font-size:72px;
	width:75%;
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	padding:8px;
	background-color:#aaa;/*fallback*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#eeeeee');
	background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#eee));
	background: -moz-linear-gradient(top,  #aaa,  #eee);
	-moz-border-radius-topleft: 50px;
	border-top-left-radius: 50px;
	-moz-border-radius-topright: 50px;
	border-top-right-radius: 50px;
	-moz-box-shadow: 0px 2px 8px #ccc;
	-webkit-box-shadow: 0px 2px 8px #ccc;
	box-shadow: 0px 2px 8px #ccc;
}

.pageFooter {
	font-family: "Bianca", serif;
	font-size:24px;
	width:75%;
	margin-left:auto;
	margin-right:auto;
	padding:8px;
	background-color:#aaa;/*fallback*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#aaaaaa');
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
	background: -moz-linear-gradient(top,  #eee,  #aaa);
	-moz-border-radius-bottomleft: 50px;
	border-bottom-left-radius: 50px;
	-moz-border-radius-bottomright: 50px;
	border-bottom-right-radius: 50px;
	-moz-box-shadow: 0px 2px 8px #ccc;
	-webkit-box-shadow: 0px 2px 8px #ccc;
	box-shadow: 0px 2px 8px #ccc;
}

.topNav {
	font-size:48px;
}

a {
	text-decoration: none;
}

.home {
	color: black;
	text-decoration: none;
	padding-left:40px;
	cursor:pointer;
}

.audio {
	color: black;
	text-decoration: none;
	padding-left:40px;
	cursor:pointer;
}

.details {
	color: black;
	text-decoration: none;
	padding-left:40px;
	cursor:pointer;
}

.pageContent {
	width: 75%;
	margin-left:auto;
	margin-right:auto;
	padding:8px;
	-moz-box-shadow: 0px 2px 8px #ccc;
	-webkit-box-shadow: 0px 2px 8px #ccc;
	box-shadow: 0px 2px 8px #ccc;
}

.homeContent,
.detailsContent {
	padding:4px;
	width:75%;
	font-family: "Tiva", serif;
	font-size:56px;
}

.audioSamplesCaption,
.pageCaption {
	font-family:"Tiva";
	font-size:56px;
}

.audioSample,
.section {
	padding:4px;
}

.audioSampleTitle,
.section .title {
	padding:4px;
	font-family: "Bianca", serif;
	font-size:32px;
}

.audioSampleDescription,
.section .content {
	padding:4px;
	width:100%;
	font-family: "Tiva", serif;
	font-size:32px;
}

.audioSample audio {
	padding:4px;
}

.audioPlayer {
}

.audioPlayer .audioTitle {
	font-family: "Bianca", serif;
	font-size:32px;
	margin-left:20px;
}

.contentSection .title {
	font-family: "Bianca", serif;
	font-size:32px;
	margin-left:20px;
}

.ampPhoto
{
  position: relative;
  width: 60%;
  background: #ddd;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
}

.ampPhoto:before, .ampPhoto:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.ampPhoto:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}