@charset "utf-8";

#SA10_Hero {
	width:329px; /* important to be same as image width */
	height:674px; /* important to be same as image height */
	position:absolute; /* important */
	text-align:left;
	float:left;
	margin-left:-400px;
	margin-top:90px;
	left:50%;
	text-align:left;
	overflow:hidden;
	z-index:2;
}

#SA10_HeroContent {
   width:329px; /* important to be same as image width or wider */
   position:absolute; /* important */
   top:0; /* important */
   margin-left: 0; /* important */
   z-index:2;
}

.SA10_HeroImage {
   float:left; /* important */
   position:absolute; /* important */
   display:none; /* important */
   z-index:2;
}

.SA10_HeroImage span {
	position:absolute; /* important */
	left:0;
	font:12px/14px Arial, Helvetica, sans-serif;
	width:329px;
	background-color:#FFFFFF;
	filter: alpha(opacity=70); /* here you can set the opacity of box with text */
	-moz-opacity:0.7; /* here you can set the opacity of box with text */
	-khtml-opacity:0.7; /* here you can set the opacity of box with text */
	opacity:0.7; /* here you can set the opacity of box with text */
	color:#333333;
	display:none; /* important */
	bottom:0;
	padding-top:10px;
	padding-right:13px;
	padding-bottom:30px;
	padding-left:13px;
	text-align:left;
	z-index:2;
	/*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
   z-index:2;
}