/* 2012 Jables Design - Splash (index)  */

/* TAG specific */
body {
 background: #d0988d;
 font: 13px/24px Arial, sans-serif;
 color: #757171;
}


/* id and css */
#hmBody {
  background: #b83326 url('http://img-gfx.stringcelebrationsusa.com/general/bkg/backgroundGRD.png') repeat-x top left;
  width: 1043px;
  height: 625px;
  border: 2px solid #362823;
  margin: 2% auto;
  position: relative;
}
#hmLogoContainer {
	text-align: center;
	margin-right: 340px;
}
#hmViolinContainer {
	float: right;
	width: 339px;
	height: 525px;
	background: url('http://img-gfx.stringcelebrationsusa.com/splash/hm_staffUnder.png') no-repeat 0px 285px;
}
#hmStaff {
	position: relative;
	margin-bottom: 30px;
}
#hmStaff img {
	position: absolute;
	z-index: 5;
	top: -110px;
	left: -76px;
}
#hmFooter {
 clear: both;
 font: 18px/100px Arial, sans-serif;
 color: #e7d8da;
 background: #362823;
 border-top: 3px solid #000;
 height: 100px;
 text-align: center;
 position: absolute;
 width: 1043px;
 bottom: 0;
}

/* BUTTON  */
a.btnStyle:link, a.btnStyle:visited,  input.btnStyle  {
  background: url('http://img-gfx.stringcelebrationsusa.com/common/btnSprite.png') repeat-x 0px 0px;
  display: block;
  text-decoration: none; 
  color: #dad4c9;
}
a.btnStyle:hover, input.btnStyle:hover {
  background: url('http://img-gfx.stringcelebrationsusa.com/common/btnSprite.png') repeat-x 0 -35px ;
  text-decoration: none;
  color: #dad4c9;
}

.btn {
  border: 1px solid #554d3a;
  -moz-border-radius 6px;
  -webkit-border-radius 6px;
  border-radius: 6px;
  color: #dad4c9;
  font: bold 14px arial, sans-serif;
  height: 35px;
  line-height: 35px;
  width: 150px;
  text-align: center;
  margin: 0 auto;
}

/**********  MEDIA CHANGE ************/
@media only screen and (min-width: 680px){
	#hmBody,#hmFooter  { width: 680px; }
	#hmLogoContainer { padding: 100px 0px 20px 100px; }
}
@media only screen and (min-width: 960px){
	#hmBody,#hmFooter  { width: 960px; }
	#hmLogoContainer { 	padding: 100px 0px 20px 300px; }	
}
/* -- 992 --*/
@media only screen and (min-width: 1043px){
	#hmBody,#hmFooter  { width: 1043px; }
	#hmLogoContainer {padding: 100px 0px 20px 300px; }	
	#logoImg2 {
		animation:logoball 4s;
		-moz-animation:logoball 4s; /* Firefox */
		-webkit-animation:logoball 4s; /* Safari and Chrome */
	}
	@keyframes logoball {
		0% { opacity: 0.1; }
		100% { opacity: 1.0; }
	}
	@-moz-keyframes logoball {
		0% { opacity: 0.0; }
		100% { opacity: 1.0; }
	}	
	@-webkit-keyframes logoball {
		0% { opacity: 0.1;} 
		100% { opacity: 1.0; }
	}
}