@charset "utf-8";

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
        display: block;
}
body {
        line-height: 1;
		/*
		background-image: url("images/bg1.png");
		*/
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}
table {
        border-collapse: collapse;
        border-spacing: 0;
}

body {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 1em;
	background-color: rgb(1,89,124);
}

a {
color:rgb(83,71,65);
text-decoration: none;
}

a:hover, a:active {
color: rgb(0,214,221);
}


p {
margin-bottom: .5em;
line-height: 1.25em;
}

.navi {
vertical-align: top;
background-color:rgb(38,35,36);
width: 100%;
margin: 0 auto;
text-align: center;
}

.navi li {
display: inline;
text-align: center;
padding-bottom: .1em;
background-color:rgb(38,35,36);
width: 8em;
text-align: center;
}

.navi a {
display: inline-block;
text-decoration: none;
color: rgb(255,255,255);
padding: 0;
margin: 0 1em .5em 1em;
}

.navi a:hover, a:active {
color: rgb(0,214,221);
}

a.naviS  {
color: rgb(0,214,221);
}

.ears {
display: block;
margin: 2em auto;
height: 261px;
width: 600px;
text-align: center;
overflow: hidden;
background: url("images/ears.png");
}

.ears:hover {
background: url("images/ears2.png");
}

header {
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
height: auto;
background-color:rgb(38,35,36);
}


header h1 {
font-family: "Special Elite", cursive;
color: rgb(201,202,204);
font-size: 2.2em;
margin: 1em 0 .5em 0;
line-height: .8em;
text-align: center;
font-weight: 300;
}

header h2 {
color: rgb(201,202,204);
font-size: 2.1em;
text-align: center;
font-weight: 300;
}


h1 {
margin-bottom: 1em;
text-align: center;
color: rgb(0,214,221);
font-size: 1.3em;
}

h2 {
font-family: "Special Elite", cursive;
text-align: center;
color: rgb(0,214,221);
font-size: 1.3em;
margin-bottom: 0.5em;
}

h3 {
color: rgb(83,71,65);
text-align: left;
text-decoration: none;
font-size: 1.2em;
font-family: 'Special Elite', cursive;
}


#container {
vertical-align: top;
background-color: rgb(240,242,240);
display: block;
width: 90%;
margin: 0 auto;
box-shadow: 3px 3px 2px rgba(3,0,0,0.5);
padding: 0;
overflow: hidden;
max-width: 930px;
}

#maincontent {
display: block;
margin: 1em auto 0 auto;
clear: both;
}

#maincontent img {
margin: 0 auto;
text-align: center;
}

#maincontent p {
max-width: 740px;
margin: 0 auto 1em auto;
padding: 0 1em;
}

#maincontent p:first-child:first-letter {
font-size: 2em;
}

.space {
margin: 2em auto;
}

.cent {
display: block;
text-align: center;
margin: 0 auto;
}
	
#left {
display: block;
float: left;
clear: both;
width: 60%;
margin: 1em 3em;
}

#left p {
text-align: left;
}

#bio {
display: inline-block;
float: right;
text-align: left;
width: 50%;
margin: 1em;
}

#bio p {
margin: 0 auto 2em auto;
}

#wrap {
display: block;
overflow: hidden;
text-align: center;
margin: 0 auto;
padding: 0;
max-width: 1200px;
}


#side {
display: block;
margin-top: 1em;
font-size: 1em;
}

#side ul {
list-style-type: circle;
list-style-position: inside;
}

#side li {
line-height: 1em;
text-align: left;
text-indent: -1em;
margin: 1em;
}

#side img {
margin-bottom: 1em;
}

#simgs {
display: block;
text-align: center;
margin: 0 auto;
}

.simg {
display: inline-block;
width: 180px;
margin: 10px auto;
vertical-align: middle;
text-align: center;
}

.albums {
display: block;
text-align: center;
margin: 0 auto;
width: 99%;
}

.credits {
display: inline-block;
width: 250px;
height: 340px;
margin: 10px auto;
vertical-align: middle;
text-align: center;
border: 1px solid rgb(237,237,237);
}

footer {
background-color:rgb(83,71,65);
color: rgb(0,214,221);
clear: both;
font-size: 0.8em;
line-height: 1em;
text-align: center;
width: 90%;
max-width: 930px;
margin: 0 auto 0.5em auto;
padding: 0.5em 0;
box-shadow: 3px 3px 2px rgba(3,0,0,0.5);
}

footer a {
color: #FFFFFF;
}

#break {
display: none;
}

img.index {
display: block;
text-align: center;
margin: 0 auto;
}

img.pos_left {
position: inherit;
float: none;
margin: 0 auto;
text-align: center;
position: block;
left: 0;
}


/*media queries*/
@media screen and (max-width: 480px) {
.navi a {
margin: 0 .2em .5em .2em;
}
header h1 {
font-size: 1.6em;
}

#break {
display: block;
}

img.pos_left {
    position: relative;
    left: -54px;
}

img.index {
	position: relative;
	left: -54px;
}

}

@media screen and (min-width: 480px) and (max-width: 675px) {
.navi a {
margin: 0 .8em .5em .8em;
}
header h1 {
font-size: 1.8em;
}
	
}


@media screen and (max-width: 675px) {
#left {
width: 95%;
margin: .5em;
padding: 0;
}

h3 {
text-align: center;
}

#side li {
text-indent: 0em;
}

}

@media screen and (min-width: 675px) and (max-width: 845px) {
#maincontent p {
padding: 0 .5em;
}

header h1 {
font-size: 2em;
}
#side li {
text-indent: 0em;
}

}

@media screen and (max-width: 950px) {
#bio {
	width: 95%;
	margin: .5em;
	padding: 0;
}
}

@media screen and (min-width: 950px) {
img.pos_left {
float: right;
text-align: right;
}
	
}