body#indexbody
{
  margin: 0px;
  background-color: #fbfaf4;
  background-image: url('Main_background.png');
  background-position: center top;
  background-repeat: no-repeat;
}
 
div#container
{
  position: relative;
  margin-left:auto;
  margin-right:auto;
  width: 1440px; 
  height: 100%;
  font-family: 'Marvel', sans-serif;
 /*  border-style: solid;
  border-color: yellow; */
}

div#xblogo
{
  position: absolute;
  left: 230px;
  top: 50px;
  height: 148;
  width: 345; 
  background-image: url('XB_logo.png');
  background-repeat: no-repeat;
  background-size: 50% 50%;
}

div#navigationelement1
{

  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
  color: #d39d61; 
  position: absolute;
  left: 500px;
  top:	51px;
  background-color: #e9e6de;
  height: 20px;
  width: 170px;
  text-align: center;
}

div#navigationelement2
{
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
  color: #d39d61; 
  position: absolute;
  left: 800px;
  top:	51px;
  background-color: #e9e6de;
  height: 20px;
  width: 170px;
  text-align: center;
}

div#navigationelement3
{
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
  color: #d39d61; 
  position: absolute;
  left: 550px;
  top:	74px;
  background-color: #e9e6de;
  height: 20px;
  width: 170px;
  text-align: center;
}

div#navigationelement4
{
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
  color: #d39d61; 
  position: absolute;
  left: 750px;
  top:	74px;
  background-color: #e9e6de;
  height: 20px;
  width: 170px;
  text-align: center;
}

div#composer
{
  position: absolute;
  top: 100;
  left:400px;
  width: 151px;
  height: 16px;
  background-image: url('title.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

div#menutext {
}

a.menutext:link {color:#d39d61; text-decoration:none;}      /* unvisited link */
a.menutext:visited {color:#5a4a42; text-decoration:none;}  /* visited link */
a.menutext:hover {color:#5a4a42; text-decoration:none;}  /* mouse over link */
a.menutext:active {color:#5a4a42; text-decoration:none;}  /* selected link */ 

a.intext:link {color:#d39d61; text-decoration:none;}      /* unvisited link */
a.intext:visited {color:#5a4a42; text-decoration:none;}  /* visited link */
a.intext:hover {color:#5a4a42; text-decoration:none;}  /* mouse over link */
a.intext:active {color:#5a4a42; text-decoration:none;}  /* selected link */ 

input
{
  font-size: 13px;
  font-weight: normal;
  line-height: 19px;
  color: #5a4a42;
  width: 100%;
}

textarea
{
  font-size: 13px;
  font-weight: normal;
  line-height: 19px;
  color: #5a4a42;
  width: 100%;
}

div#homepageheading1
{
  position: absolute;
  left: 250px;
  top:  200px;
  width: 250px;
  font-size: 17px;
  font-weight: bold;
  line-height: 19px;
  color: #d39d61;
}

div#homepagecolumn1
{
  position: absolute;
  left:250px;
  top:230px;
  width: 250px;
  height: 355px;
  font-size: 15px;
  font-weight: normal;
  line-height: 19px;
  color: #5a4a42;
}

div#columndivider1
{
  position: absolute; 
  left:513px;
  top:200px;
  width:1px;
  height:700px;
  background-color:#d39d61;
}

div#homepagecolumn2
{
  position: absolute;
  left:520px;
  top:200px;
  width: 250px;
  height: 355px;
  background-image: url('nkml.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

div#columndivider2
{
  position: absolute; 
  left:775px;
  top:200px;
  width:1px;
  height:700px;
  background-color:#d39d61;
}

div#homepageheading3
{
  position: absolute;
  left: 790px;
  top:  200px;
  width: 250px;
  font-size: 17px;
  font-weight: bold;
  line-height: 19px;
  color: #d39d61;
}

div#homepagecolumn3
{
  position: absolute;
  left:790px;
  top:230px;
  width: 250px;
  font-size: 15px;
  font-weight: normal;
  line-height: 19px;
  color: #5a4a42;
}

div#contactheading1
{
  position: absolute;
  left: 250px;
  top:  200px;
  width: 250px;
  font-size: 17px;
  font-weight: bold;
  line-height: 19px;
  color: #d39d61;
}

div#contactcolumn1
{
  position: absolute;
  left:250px;
  top:230px;
  width: 250px;
  height: 355px;
  font-size: 15px;
  font-weight: normal;
  line-height: 19px;
  color: #5a4a42;
}

div#contactheading2
{
  position: absolute;
  left: 520px;
  top:  200px;
  width: 250px;
  font-size: 17px;
  font-weight: bold;
  line-height: 19px;
  color: #d39d61;
}

div#contactcolumn2
{
  position: absolute;
  left:520px;
  top:230px;
  width: 250px;
  height: 355px;
  font-size: 15px;
  font-weight: normal;
  line-height: 19px;
  color: #5a4a42;
}

div#contactheading3
{
  position: absolute;
  left: 790px;
  top:  200px;
  width: 250px;
  font-size: 17px;
  font-weight: bold;
  line-height: 19px;
  color: #d39d61;
}

div#contactcolumn3
{
  position: absolute;
  left:790px;
  top:230px;
  width: 250px;
  font-size: 15px;
  font-weight: normal;
  line-height: 19px;
  color: #5a4a42;
}

input[type="text"], input[type="email"], select
{
  height: 25px;
  color: #5a4a42;
  font-size: 15px;
  width: 175px;
}

.button {
	font-size: 15px;
	color: #5a4a42;
	font-family: 'Marvel', sans-serif;	
}

div#workscolumn1
{
  position: absolute;
  left:250px;
  top:200px;
  width: 250px;
  height: 355px;
  text-align: center;
  background-image: url('');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

div#workscolumn2
{
  position: absolute;
  left:520px;
  top:200px;
  width: 250px;
  height: 355px;
  background-image: url('nkml.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

div#workscolumn3
{
  position: absolute;
  left:790px;
  top:200px;
  width: 250px;
  height: 355px;
  background-image: url('XB-Greys-Lobotomy-Poster.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

div#workscolumn4
{
  position: absolute;
  left:520px;
  top:570px;
  width: 250px;
  height: 355px;
  background-image: url('MACKILLOP_Poster.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

div#workscolumn5
{
  position: absolute;
  left:250px;
  top:570px;
  width: 250px;
  height: 355px;
  background-image: url('Sighs_of_Sorrow_poster.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

div#workscolumn6
{
  position: absolute;
  left:790px;
  top:570px;
  width: 250px;
  height: 355px;
  background-image: url('XB-DIVE-Poster.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

div#newsheading1
{
  position: absolute;
  left: 250px;
  top:  200px;
  width: 250px;
  font-size: 17px;
  font-weight: bold;
  line-height: 19px;
  color: #d39d61;
}

div#newscolumn1
{
  position: absolute;
  left:250px;
  top:250px;
  width: 250px;
  font-size: 15px;
  font-weight: normal;
  line-height: 19px;
  color: #5a4a42;
}

div#columndivider1
{
  position: absolute; 
  left:513px;
  top:200px;
  width:1px;
  height:700px;
  background-color:#d39d61;
}

div#newsheading2
{
  position: absolute;
  left: 520px;
  top:  200px;
  width: 250px;
  font-size: 17px;
  font-weight: bold;
  line-height: 19px;
  color: #d39d61;
}

div#newscolumn2
{
  position: absolute;
  left:520px;
  top:250px;
  width: 250px;
  height: 355px;
  font-size: 15px;
  font-weight: normal;
  line-height: 19px;
  color: #5a4a42;
}

div#columndivider2
{
  position: absolute; 
  left:775px;
  top:200px;
  width:1px;
  height:700px;
  background-color:#d39d61;
}

div#newsheading3
{
  position: absolute;
  left: 790px;
  top:  200px;
  width: 250px;
  font-size: 17px;
  font-weight: bold;
  line-height: 19px;
  color: #d39d61;
}

div#newscolumn3
{
  position: absolute;
  left:790px;
  top:250px;
  width: 250px;
  font-size: 15px;
  font-weight: normal;
  line-height: 19px;
  color: #5a4a42;
}

div#photo
{
  position: absolute;
  left: 840px;
  bottom:0px;
  width: 450px;
  height: 405px;
  background-image: url('Xavier_photo_home.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1
}

div#footerbar
{
  position: absolute;
  color: #d39d61; 
  position: absolute;
  left: 0px;
  bottom: 0px;
  background-color: #d39d61;
  height: 22px;
  width: 100%;
  z-index: 1;
}

div#facebook
{
  position: absolute;
  left:245px;
  bottom:0px;
  width: 31px;
  height: 22px;
  background-image: url('facebook_idle.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 2;
}

div#email
{
  position: absolute;
  left:275px;
  bottom:0px;
  width: 39px;
  height: 22px;
  background-image: url('email.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 2;
}

/* To get the footer to work on the iPad */
@media only screen and (device-width: 768px) {

	div#container {
		height: 900px;
	}

}

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

	body#indexbody {
	}
	
	div#container {
	}

	div#navigationelement1 {
		top: 51px;
		left: 500px;
	}
	
	div#navigationelement2 {
		top: 75px;
		left: 550px;
	}
	
	div#navigationelement3 {
		top: 100px;
		left: 600px;
	}
	
	div#navigationelement4 {
		top: 125px;
		left: 650px;
	}
	
	div#homepagecolumn2 {
		display: none;
	}
	
	div#columndivider2
	{
		display: none;
	}
	
	div#homepageheading3
	{
	  left: 520px;
	}
	
	div#homepagecolumn3
	{
	  left:520px;
	}
	
	
	div#contactheading3
	{
	  left: 250px;
	  top: 620px;
	}
	
	div#contactcolumn3
	{
	  left:250px;
	  top: 650px;
	}
	
	
	div#workscolumn1 {
	  left:250px;
      top:200px;
	}
	
	div#workscolumn2 {
	  left:520px;
      top:200px;
	}
	
	div#workscolumn3 {
	 left:250px;
	 top:570px;
	}
	
	div#workscolumn4 {
	 left:520px;
	 top:570px;
	}

	div#workscolumn5 {
	 left:250px;
	 top:940px;
	}
	
	div#workscolumn6 {
	 left:520px;
	 top:940px;
	}
	
	div#newsheading2 {
	  left:250px;
      top:570px;
	}

	div#newscolumn2 {
	  left:250px;
      top:630px;
	}
	
	div#newsheading3 {
	 left:520px;
	 top:200px;
	}
		
	div#newscolumn3 {
	 left:520px;
	 top:250px;
	}
}

/* Narrow desktop browser, iPhone */
@media screen and (max-width:700px), screen and (device-width: 480)
{
	div#container {
		width: 350;
		height: auto;
	}

	body#indexbody {
	  background-image: none;
	}
	
	div#xblogo {
		left: 10px;
	}

	div#navigationelement1 {
		top: 50px;
		left: 200px;
	}
	
	div#navigationelement2 {
		top: 75px;
		left: 200px;
	}
	
	div#navigationelement3 {
		top: 100px;
		left: 200px;
	}
	
	div#navigationelement4 {
		top: 125px;
		left: 200px;
	}
	
	div#composer
	{
		top: 125;
		left:17px;
	}
	
	div#homepageheading1 {
		left: 10px;
	}
	
	div#homepagecolumn1 {
		left: 10px;
		width: 350px;
	}
	
	div#columndivider1
	{
		display: none;
	}
		
	div#homepagecolumn2 {
		display: block;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		top: 760px;
		left: 50px;
	}
	
	div#columndivider2
	{
		display: none;
	}
	
	div#homepageheading3 {
		top: 1200px;
		left: 10px;
	}
	
	div#homepagecolumn3{
		top: 1230px;
		left: 10px;
		width: 350px;
	}
	
	div#contactheading1 {
		left: 10px;
	}
	
	div#contactcolumn1 {
		left: 10px;
		width: 350px;
	}
	
	div#contactheading2 {
		left: 10px;
		top: 500px;
	}
	
	div#contactcolumn2 {
		left: 10px;
		top: 520px;
	}
	
	div#contactheading3 {
		left: 10px;
		top: 1000px;
	}
	
	div#contactcolumn3 {
		left: 10px;
		top: 1020px;
	}
	
	div#workscolumn1 {
	  left:50px;
      top:200px;
	}
	
	div#workscolumn2 {
	  left:50px;
      top:570px;
	}
	
	div#workscolumn3 {
	  left:50px;
      top:940px;
	  
	}
	
	div#workscolumn4 {
	  left:50px;
      top:1310px;
	}
	
	div#workscolumn5 {
	  left:50px;
      top:1680px;
	}
	
	div#workscolumn6 {
	  left:50px;
      top:2050px;
	}
	
	div#newsheading1 {
		left: 10px;
	}
	
	div#newscolumn1 {
		left: 10px;
	}
	
	div#newsheading2 {
		left: 10px;
	}
	
	div#newscolumn2 {
		left: 10px;
	}
	
	div#newsheading3 {
		left: 10px;
		top: 950px;
	}
	
	div#newscolumn3 {
		left: 10px;
		top: 1000px;
	}
	
	div#photo {
		display: none;
	}
	
	div#footerbar {
		display: none;
	}
	
	div#facebook {
		display: none;
	}
	
	div#email {
		display: none;
	}
}