.stepcarousel{
	position: relative; /*leave this value alone*/
	position: fixed\9; /*leave this value alone*/
	border: 0px solid black;
	overflow: scroll; /*leave this value alone*/
	width: 523px; /*Width of Carousel Viewer itself*/
	height: 240px; /*Height should enough to fit largest content's height*/
	background-color: #F4F6F4;
}

.stepcarousel .belt{
	position: absolute; /*leave this value alone*/
	left: 0;
	top: 35;
}

.stepcarousel .panel{
	float: left; /*leave this value alone*/
	overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	margin: 9px; /*margin around each panel*/
	width: 120px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
	height: 204px; /* 184 */
	background-color: #EEEEEE;
}

.style1 {color: #990000}

.style2 {
	/* color: #990000; */
	background-color: #eef6f2;
	width: 120px; 
	height: 204px;
}

.box1 {
	background: #FFF; 
	width: 952px;
	/* text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px; */
	padding: 5px 5px 5px 5px;
	border: 1px solid #F3F3F3;
	margin: auto;
}

.box2 {
	background: #EEE; 
	width: 513px; 
	width: 523px\9;
	/* text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px; */
	padding: 5px 5px 5px 5px;
	border:0px solid #FFF;
	margin: auto;
}

div.centered{
	display:block;
	/*set the div in the center of the screen*/
    position:absolute;
	top:0%;
	left:0%;

	width:100%;
	height:100%;
	
	margin-top: 0px;
  	margin-left: 0px;
	
  }
  .extrastylen {
	font-weight: normal;
}

#divVideo{
position: absolute;
   left: 50%;
   top: 50%;
   width: 680px;
   height: 480px;
   margin-left: -340px;
   margin-top: -240px;
   border-style:solid;
   border-width:1px;
   border-color:#999999;
  filter:alpha(opacity=96); 
  /* CSS3 standard */
  opacity:0.96; 
  
	background-image:url('images/blueline.png');
	background-repeat:repeat-x;
	
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
  
	z-index: 100;

}

.summer
{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 500px;
  height: 500px;
  background-color: #a2ddfa;
  border-radius: 3px;
  z-index: 1000;  
  animation-name: example;
  animation-duration: 25s;
  animation-direction: alternate;
  animation-iteration-count: 3;
  border: 0px solid;
  padding: 10px;
  box-shadow: 5px 10px 18px #888888;
  
 /* animation-iteration-count: 3;
    animation-iteration-count: infinite;  //play for ever
    animation-delay: -2s; */
}
@keyframes example {
  0%   {background-color: #FFFFFF;}
  20%  {background-color: #48AACF;}
  40%  {background-color: #FFFFFF;}
  60%  {background-color: #11B0EB;}
  80%  {background-color: #33C7FF;}
  100% {background-color: #BDE8F9;}
}