body#homepage
{ 
  margin: 0px;
  /* background-image: url('HOME_Combined.png');*/
  background-image: url('HOME_Title.png');
  background-position: center top;
  background-repeat: no-repeat;
} 
 
body#subpage
{ 
  margin: 0px;
  background-image: url('BASE_top.png');
  background-position: center top;
  background-repeat: no-repeat;
}  
 
div#homepagebackground
{
  position: relative;
  width: 1200px;
  height: 700px;
  margin-left: auto;
  margin-right: auto;
}

audio {
	z-index; 4;
}

div#pagebackgroundtop
{
  position: relative;
  width: 1200px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
}

div#logo /* on pages other than the home page */
{
  position: absolute;
  left: 60px;
  width: 335px;
  height: 205px;
  background-image: url('BASE_title.png');
}

div#logo:hover
{
  position: absolute;
  left: 60px;
  width: 335px;
  height: 205px;
  background-image: url('BASE_title_rollover.png');
}


img.floatLeft /* used by the images on the Productions page */
{ 
    float: left;
    margin: 4px; 
    height: 116px;
    width: 82px;
    padding-right: 7px;
}

/* Images on the left side of each page (except the home page) */

div#sidenavimagemusical
{
  position: absolute;
  width: 275px;
  height: 414px;
  top: 250px;
  left: 60px;
  background-image: url('clan.jpg');
  z-index: 2;
}


div#sidenavimagedemos
{
  position: absolute;
  width: 275px;
  height: 414px;
  top: 250px;
  left: 60px;
  background-image: url('sisters.png');
  z-index: 2;
}

div#sidenavimagefaqs
{
  position: absolute;
  width: 275px;
  height: 414px;
  top: 250px;
  left: 60px;
  background-image: url('kidswithsister.jpg');
  z-index: 2;
}

div#sidenavimageperformances
{
  position: absolute;
  width: 275px;
  height: 414px;
  top: 250px;
  left: 60px;
  background-image: url('pope.jpg');
  z-index: 2;
}

div#sidenavimagepress
{
  position: absolute;
  width: 275px;
  height: 414px;
  top: 250px;
  left: 60px;
  background-image: url('woods.jpg');
  z-index: 2;
}

div#sidenavimagecontact
{
  position: absolute;
  width: 275px;
  height: 414px;
  top: 250px;
  left: 60px;
  background-image: url('dancers.jpg');
  z-index: 2;
}

div#sidenavimagefaq
{
  position: absolute;
  width: 275px;
  height: 414px;
  top: 250px;
  left: 60px;
  background-image: url('clan.jpg');
  z-index: 2;
}

/* Each page has a different position for the bottom image depending on how long the text is */

div#homepagebackgroundbottom
{
  position: relative;
  width: 1200px;
  height: 321px;
  top: 0px;
  background-image: url('BASE_bottom.png');
  background-position: center bottom;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
}

div#musicalpagebackgroundbottom
{
  position: relative;
  width: 1200px;
  height: 721px;
  top: 350px;
  background-image: url('BASE_bottom.png');
  background-position: center bottom;
  background-repeat: no-repeat;
}

div#demospagebackgroundbottom
{
  position: relative;
  width: 1200px;
  height: 721px;
  top: 750px;
  background-image: url('BASE_bottom.png');
  background-position: center bottom;
  background-repeat: no-repeat;
}


div#faqpagebackgroundbottom
{
  position: relative;
  width: 1200px;
  height: 721px;
  top: 420px;
  background-image: url('BASE_bottom.png');
  background-position: center bottom;
  background-repeat: no-repeat;
}

div#productionspagebackgroundbottom
{
  position: relative;
  width: 1200px;
  height: 721px;
  top: 1250px;
  background-image: url('BASE_bottom.png');
  background-position: center bottom;
  background-repeat: no-repeat;
}

div#presspagebackgroundbottom
{
  position: relative;
  width: 1200px;
  height: 721px;
  bottom: -200px;
  background-image: url('BASE_bottom.png');
  background-position: center bottom;
  background-repeat: no-repeat;
}

div#contactpagebackgroundbottom
{
  position: relative;
  width: 1200px;
  height: 721px;
  bottom: -200px;
  background-image: url('BASE_bottom.png');
  background-position: center bottom;
  background-repeat: no-repeat;
}

div#menutext
{
  font-family: Trebuchet, "Trebuchet MS", Verdana;
  font-size: 14pt;
  font-weight: bold;
  color: #a97c50;
}

div#pagetitle
{
  position:absolute;
  left:395px;
  top:180px;
  font-family: Trebuchet, "Trebuchet MS", Verdana;
  font-size: 22pt;
  font-weight: bold;
  /* color: #482e1f; */
  color: #a97c50;
  z-index: 2;
}

div#navigationbar
{
  position:absolute;
  left:395px;
  top:67px;
  width: 520px;
  font-family: Trebuchet, "Trebuchet MS", Verdana;
  font-size: 11pt;
  font-weight: bold;
  color: #a97c50;
}

span#currentpage
{
  font-family: Trebuchet, "Trebuchet MS", Verdana;
  font-size: 11pt;
  font-weight: bold;
  color: #f7941e;
}

div#homepageintrotext
{
  position:absolute;
  left:85px;
  top:320px;
  width: 520px;
  font-family: Trebuchet, "Trebuchet MS", Verdana;
  font-size: 12pt;
  font-style: italic;
  font-weight: normal;
  line-height: 16pt;
  color: #a97c50;
}

div#homepagebodytext
{
  position:absolute;
  left:85px;
  top:400px;
  width: 520px;
  font-family: Trebuchet, "Trebuchet MS", Verdana;
  font-size: 10pt;
  font-weight: normal;
  line-height: 14pt;
  color: #a97c50;

}

div#pagebodytext
{
  position:absolute;
  left:395px;
  top:250px;
  width: 520px;
  font-family: Trebuchet, "Trebuchet MS", Verdana;
  font-size: 10pt;
  font-weight: normal;
  line-height: 13pt;
  color: #a97c50;
  z-index: 4;
}


ul#instruments
{
  list-style: none;
  font-family: Trebuchet, "Trebuchet MS", Verdana;
  font-size: 9pt;
  font-weight: normal;
  line-height: 13pt;
  text-align: left;
  color: #a97c50;
  z-index: 4;
  /* margin-left: 0px; */
  padding-left: 0px;
}

span#bullet
{
  font-family: Trebuchet, "Trebuchet MS", Verdana;
  font-size: 16pt;
  font-weight: normal;
  color: #a97c50;
  vertical-align: -10%;
}

li
{
  font-size: 9pt;
  text-indent: 0pt;
}

a:link {color:#482e1f;}      /* unvisited link */
a:visited {color:#482e1f;}  /* visited link */
a:hover {color:#f7941e;}  /* mouse over link */
a:active {color:#f7941e;}  /* selected link */ 

a.navbar:link {color:#a97c50;}      /* unvisited link */
a.navbar:visited {color:#a97c50;}  /* visited link */
a.navbar:hover {color:#f7941e;}  /* mouse over link */
a.navbar:active {color:#f7941e;}  /* selected link */ 

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}


/* Medium desktop browser, iPad */
@media screen and (max-width:880px),  screen and (device-width: 1024) {

	div#homepagebackground {
		width: 780px;
	}
	
	div#homepageintrotext
	{ 
		width: 550px;
	}
  
    div#homepagebodytext
       {
	  width: 550px;
    }
	
	div#pagebackgroundtop
	{
		width: 780px;
	}
	
	div#navigationbar
	{
	  width: 300px;
	}

	div#pagebodytext
	{
	  /* left:395px; */
	  top:250px;
	  width: 350px;
	}

	div#homepagebackgroundbottom {
		width: 550px;
		display: none;
	}

	div#musicalpagebackgroundbottom {
		width: 550px;
		display: none;
	}
	
	div#demospagebackgroundbottom {
		width: 550px;
		display: none;
	}
	
	div#faqpagebackgroundbottom {
		width: 550px;
		display: none;
	}

	div#productionspagebackgroundbottom {
		width: 550px;
		display: none;
	}

	div#presspagebackgroundbottom {
		width: 550px;
		display: none;
	}

	div#contactpagebackgroundbottom {
		width: 550px;
		display: none;
	}
}

/* Narrow desktop browser, iPhone */
@media screen and (max-width:550px), screen and (device-width: 480px) {

	body#homepage {
		background-image: url('HOME_Title.png');
		background-size: 252px 137px; 	
	}
	
	div#homepagebackground {
		width: 400px;
	}
	
	div#homepagebackgroundtop {
		width: 400px;
	}
	
	div#pagebackgroundtop {
		width: 400px;
	}
	
	div#navigationbar
	{
		left: 20px;
		width:160px;
		font-size: 16pt;
		top: 150px;
	}

	span#currentpage {
		font-size: 16pt;	
	}
	
	div#homepageintrotext
	{ 
		width: 400px;
		display: none;
	}
  
    div#homepagebodytext
       {
	  left:20px;
	  top:300px;
	  width: 320px;
	  font-size: 12pt;
    }

	body#subpage
	{ 
	  background-image: url('HOME_Title.png');
      background-size: 252px 137px; 
	}  
	
	div#logo {
		display: none;
	}
	
	div#pagetitle {
		left: 20px;
		top: 340px;
		width: 300px;
		font-size: 20pt;
	}
	
	div#pagebodytext {
		left: 20px;
		top: 410px;
		width: 300px;
		font-size: 16px;
	}
	
	li {
		font-size: 12pt;
	}
	
	div#sidenavimagemusical {
		display: none;
	}

	div#sidenavimagedemos {
		display: none;
	}
	
	div#sidenavimagefaqs {
		display: none;
	}
	
	div#sidenavimageperformances{
		display: none;
	}
	
	div#sidenavimagepress {
		display: none;
	}
	
	div#sidenavimagecontact {
		display: none;
	}
	
	div#homepagebackgroundbottom {
		width: 400px;
		display: none;
	}

	div#musicalpagebackgroundbottom {
		width: 400px;
		display: none;
	}
	
	div#demospagebackgroundbottom {
		width: 400px;
		display: none;
	}
	
	div#faqpagebackgroundbottom {
		width: 400px;
		display: none;
	}

	div#productionspagebackgroundbottom {
		width: 400px;
		display: none;
	}

	div#presspagebackgroundbottom {
		width: 400px;
		display: none;
	}

	div#contactpagebackgroundbottom {
		width: 400px;
		display: none;
	}

}