body, body * {
  vertical-align: baseline;
  border: 0 none;
  outline: 0;
  padding: 0;
  margin: 0;
}


#main-container {
  width:970px;
   height:250px;
   overflow: hidden;
   margin: auto;
   position: relative;
   box-sizing:border-box;
}

#collapsed-state {
  position: absolute;
  top: 0;
  left: 0;
  width: 970px;
  height: 66px;
  z-index: 100;
  cursor: pointer;
  text-align: center;
  background-color: #fff;
   border:1px solid #cccccc;
  box-sizing: border-box;
  cursor: pointer;
}

#expanded-state {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 200;
   border:1px solid #cccccc;
  display: none;
}

#expanded-exit {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  cursor: pointer;
  /* IE10 needs a background color otherwise he won't capture clicks */
  background-color: #FFF;
  opacity: 0;
  z-index: 400;
  display: none;
}
#closeButton {
	position: absolute;
	top: 10px;
	right: 10px;
	height: 20px;
	width: 20px;
	border-radius: 10px;
	z-index: 10;	
	cursor: pointer;
   display: none;
}
#closeButton:before {
	content:"";
	display: block;
	position: absolute;
	width: 15px;
	height: 3px;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	top: 9px;
	left: 3px;
	background:#000000;
}
#closeButton:after {
	content:"";
	display: block;
	position: absolute;
	width: 15px;
	height: 3px;
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	top: 9px;
	left: 3px;
	background:#000000;
}
#finalFrameLeft {
   width:263px;
   height:250px;
   overflow: hidden;
   position: absolute;
   box-sizing:border-box;
   top: 0px;
   left: 0px;
   display: none;
   cursor: pointer;
}
#finalFrameLeft #headline1, #finalFrameLeft #headline2, #finalFrameLeft #headline3 {
   background:url(assets/EndFrameLeft.gif) no-repeat;
	width: 100%;
	position: absolute;
	left: 0px;
}
#finalFrameLeft #headline1 {
	height: 60px;
	top: 0px;
}
#finalFrameLeft #headline2{
	height: 30px;
	top: 60px;
	background-position: 0px -60px;
}
#finalFrameLeft #headline3{
	height: 50px;
	top: 90px;
	background-position: 0px -90px;
}
#finalFrameRight {
   width:263px;
   height:250px;
   overflow: hidden;
   position: absolute;
   box-sizing:border-box;
   top: 0px;
   right: 0px;
   display: none;
   cursor: pointer;
}
#finalFrameRight #headline4, #finalFrameRight #headline5, #finalFrameRight #CTA {
   background:url(assets/EndFrameRight.gif) no-repeat;
	width: 100%;
	position: absolute;
	left: 0px;
}
#finalFrameRight #headline4 {
	height: 110px;
	top: 0px;
}
#finalFrameRight #headline5{
	height: 50px;
	top: 110px;
	background-position: 0px -110px;
}
#finalFrameRight #CTA{
	height: 30px;
	width: 120px;
	background: #00B388;
	position: absolute;
	left: auto;
	right: 30px;
	bottom: 30px;
	line-height: 30px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-align: center;
	font-weight: normal;
	font-size: 12px;
}
#finalFrameRight #CTA:hover {
	background: #ff8d6d;
}
#headline6, #headline7, #headline8, #headline9, #headline10, #CTA2 {
   background:url(assets/HPE_VC_970x66.png) no-repeat;
	position: absolute;
	box-sizing: border-box;
}
#headline6 {
	height: 66px;
	width: 135px;
	top: 0px;
	left: 0px;
	background-position: 0px 0px;
}
#headline7 {
	height: 28px;
	width: 135px;
	top: 0px;
	left: 135px;
	background-position: -135px 0px;
}
#headline8 {
	height: 38px;
	width: 135px;
	top: 28px;
	left: 135px;
	background-position: -135px -28px;
}
#headline9 {
	height: 38px;
	width: 500px;
	top: 0px;
	left: 270px;
	background-position: -270px 0px;
}
#headline10 {
	height: 28px;
	width: 500px;
	top: 38px;
	left: 270px;
	background-position: -270px -38px;
}
#CTA2 {
	height: 30px;
	width: 120px;
	background: #00B388;
	position: absolute;
	left: auto;
	right: 30px;
	top: 18px;
	line-height: 30px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-align: center;
	font-weight: normal;
	font-size: 12px;
}
#CTA2:hover {
	background: #ff8d6d;
}
#mainMovie {
   width:444px;
   height:250px;
   position: absolute;
   top: 0px;
   left: 263px;
   visibility: hidden;
   z-index:4;
}
#introMovieContainer {
   width:444px;
   height:250px;
   position: absolute;
   top: 0px;
   left: 263px;
   visibility: visible;
   z-index:1;
}
#introMovie {
   position: absolute;
   top: 0px;
   left: 0px;
   z-index:1;
}
#elementOverlay {
   width:444px;
   height:250px;
   position: absolute;
   top: 0px;
   left: 0px;
   z-index:2;
   opacity: 0;
}
#startOverlay {
   width:444px;
   height:250px;
   position: absolute;
   top: 0px;
   left: 0px;
   z-index:3;
   opacity: 0;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
#startOverlay:hover {
   opacity: 0.85;
   cursor: pointer;
}
#replayOverlay {
   width:444px;
   height:250px;
   position: absolute;
   top: 0px;
   left: 263px;
   z-index:10;
   opacity: 0;
   display: none;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
#replayOverlay:hover {
   opacity: 0.85;
   cursor: pointer;
}

:focus {
  outline:none;
}
::-moz-focus-inner {
  border:0;
}