* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 

@media screen and (min-width:800px) {
	body {
		background-image: url('images/tile5cweb-800.jpg');
		-webkit-background-size: 1944px 1467px;
		-moz-background-size: 1944px 1467px;
		-o-background-size: 1944px 1467px;
		background-size: 1944px 1467px;
	}
}

a:link, a:visited {
    color: black;
}

a:hover {
    color: red;
}

a:active {
    color: orange;
}

@media screen and (min-width:970px) {
  #title-div   { width: 860px; height: 144px; }
  #title-logo { width: 175px; height: 144px; }
  #title-logo img { width: 175px; height: 144px; }
  #title-text { width: 600px; height: 144px; margin: 0px auto 0px auto; } 
  #title-text h1 { font-size: 48px; margin: 5px 0 0 0; }
  #title-text h2 { font-size: 35px; margin: 0;}  	 
}

@media screen and (min-width:710px) and (max-width:969px) {
  #title-div   { width: 660px; height: 108px; }
  #title-logo { width: 131px; height: 108px; }
  #title-logo img { width: 131px; height: 108px; }
  #title-text { width: 480px; height: 108px; } 
  #title-text h1 { font-size: 2.25em; margin: 0.1em 0em 0em 0em; }
  #title-text h2 { font-size: 1.65em; margin: 0em;}  	 
}

@media screen and (max-width:709px) {
  #title-div   { width: 530px; height: 86px; }
  #title-logo { width: 105px; height: 86px; }
  #title-logo img { width: 105px; height: 86px; }
  #title-text { width: 384px; height: 86px; } 
  #title-text h1 { font-size: 1.80em; margin: 0em 0em 0em 0em; }
  #title-text h2 { font-size: 1.32em; margin: 0em;} 	 
}

#title-div { margin: 10px auto 0px auto; }
#title-logo { float: left; margin: 0px 10px 0px 0px; }
#title-text { float: left;  
			background-color: #7E3517; 
			border: 5px solid #000000; border-radius: 85px; -webkit-border-radius: 85px;   
			padding: 8px 15px 32px 15px; text-align: center; vertical-align:middle; 
			font-family: Desyrel, sans-serif; 
		  } 

#title-text h1, #title-text h2 { padding: 0; } 	  

@media screen and (max-width:899px) 
{ #inner-background { width: 100%; margin: 0px; } 
  body { margin: 0px; }
}

@media screen and (min-width:900px) 
{
	#inner-background { width: 900px; margin: 0px; } 
}

#inner-background {
background-image: url('./images/oldpapertile30kb.jpg'); 
margin: 0px auto 0px auto;
padding: 10px 40px 80px 50px;
}

@media screen and (min-width:780px) { #menu-div { width: 666px; height: 126px; } }
@media screen and (max-width:779px) { #menu-div { width: 338px; height: 248px; } }
#menu-div {
clear: both;	  
padding: 0px; margin: 20px auto 20px auto; 
border: 3px solid #7E3517; 
}

#menu-div a { 
float: left; width: 100px; height: 110px; background-color: white; 
border: 1px solid black; border-radius: 4px; -webkit-border-radius: 4px;
display: table-cell; position: relative; text-align: center; vertical-align: bottom; 
padding-top: 6px; margin: 5px 5px 5px 5px; 
}

#menu-div a div { 
width: 96px;
height: 104px;
bottom: 12px; left: 0px;
text-align:center;
} 

#menu-div a span {
position: absolute; bottom: 0; left: 0; width: 100%; 
text-align:center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
}

.main-content {
padding: 5px 20px 5px 2px;
font-family: NeutonRegular, Times, serif;
font-size: 1.3em;
font-weight: 600;
}

p.initialcap:first-letter { font-size: 1.5em; }
p.initialcap:first-line { line-height: 1em; } 

p.photocredit {
	font-size: 0.75em;
    font-style: italic;
	text-align: center;
	margin: 0.1em;
}

.image-with-caption { 
padding: 0px;
border: solid black 1px;
}

.image-with-caption p { 
font-style: italic;
font-size: 0.85em;
text-align: center;
margin: 0px auto 7px auto;
width: 92%;
}

.float-left, .float-right  { 
padding: 0px;
}

@media screen and (max-width:750px) {
h2, .clear-right, .clear-left { clear: both; }
.float-left    { clear: both;  margin: 0px auto 0px auto; }
.float-right  { clear: both; margin: 0px auto 0px auto; }
}

@media screen and (min-width:751px) {
.clear-right { clear: right; }
.clear-left   { clear: left; }
.float-right { float: right; margin: 0px 0px 0px 1em; }
.float-left   { float: left;  margin: 0px 1em 0px 0px; }		
#bio  .float-right  { margin: 0px 0px 0px 50px; }
#bio .float-left  { margin: 0px 50px 0px 0px; 
}

@media screen and (max-width:945px) {
.float-player { margin: 0 auto 0 auto; }	
}

#quotes-box {
  margin: 10px auto 10px auto;
  border: 2px solid black;
  padding: 2px;
}

#quotes-text {
  height: 100%;
  background-color: white;
  color: black;
  float: left;
  text-align: center;
  border: 1px solid black;
  font-size: 19px;
  padding: 20px;
}

@media screen and (max-width:859px)
{
	#quotes-box {
	  width: 410px;
	  height: 796px;
	  margin: 10px auto 10px auto;
	  border: 2px solid black;
	  padding: 3px;
	}

	#quotes-text {
	  height: 400px;
	  width: 400px;
	  margin: 0px auto 6px auto;
	}

	#quotes-photo {
	  clear: both;
	  width: 400px;
	  height: 380px;
	  margin: 6px auto 0px auto;
	}
}

@media screen and (min-width:860px)
{
	#quotes-box {
	  width: 786px;
	  height: 400px;
	  margin: 10px auto 10px auto;
	  border: 2px solid black;
	  padding: 2px;
	}
	
	#quotes-text {
	  width: 356px;
	  heigth: 100%;
	}

	#quotes-photo {
	  float: right;
	  height: 100%; 
	}
}


#quotes-photo {
  text-align: center;
  border: 1px solid black;
  padding: 1px;
}

#quotes-photo * {
   margin-top: 50px;
}

@media screen and (max-width:921px) { #musicplayer-box { clear: both; margin: 5px auto 5px auto;} }
#musicplayer-box {
  width: 469px;
  border: 5px solid #4E2825; }
  
.smallplayerbox {
	box-sizing: border-box;
    background-color:#7E3517;
    text-align:center;
	padding: 0px;
	font-size: 0.8em;
}  

.smallplayerbox .caption {
	border: 1px solid black;
	padding: 5px;
}  

@media screen and (min-width:750px) { 
	.smallplayerbox 				{ width: 380px; }
}
  
@media screen and (max-width:749px) { 
	.smallplayerbox 				{ width: 380px; margin: 0px auto 0px auto;}
}

@media screen and (min-width:1044px)                        { .thumbnails { width: 964px; } }
@media screen and (min-width: 885px) and (max-width: 1043px){ .thumbnails { width: 804px; } }
@media screen and (min-width: 734px) and (max-width:  884px){ .thumbnails { width: 644px; } }
@media screen and 					     (max-width:  733px){ .thumbnails { width: 484px; } }

.thumbnails {
   border: 2px solid black;
   background-color: white;
	margin: 5px auto 5px auto;
	padding: 0px;
	height: 100%;
}
  
.thumbnails ol {
	margin: 0px;
	padding: 0px;
}
  
.thumb  {
	float: left;
	width: 156px;
	height: 209px;
	border: 1px solid black;
	margin: 2px;
	position: relative;
}

.thumb * {
	/* For Centering */
	margin: auto; position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
}

.vcenter {
	position: relative;
}

.vcenter * {
	/* For Centering */
	margin: auto; position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
}

.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}

.white_content {
	display: none;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	padding: 16px;
	border: 16px solid orange;
	background-color: white;
	z-index:1002;
	overflow: auto;
}