/* master.css */

body {
	font-family:HPReg, "HP Simplified", Arial, sans-serif;
	font-size:16px;
	margin: 0px;
	padding: 0px;
	/*-ms-touch-action: none !important; */
}
sup {
	font-size:xx-small; 
	vertical-align:super;
}

@font-face {
	font-family: HPReg;
	src: url('../fonts/HPSimplifiedW01-Regular.eot');
    src: url('../fonts/HPSimplifiedW01-Regular.eot?#iehack') format('embedded-opentype'), 
         url('../fonts/HPSimplifiedW01-Regular.woff') format('woff'), 
         url('../fonts/HPSimplifiedW01-Regular.ttf')  format('truetype'),
         url('../fonts/HPSimplifiedW01-Regular.svg#svgFontName') format('svg');
} 
@font-face {
	font-family: HPLight;
	src: url('../fonts/HPSimplifiedW01-Light.eot');
    src: url('../fonts/HPSimplifiedW01-Light.eot?#iehack') format('embedded-opentype'), 
         url('../fonts/HPSimplifiedW01-Light.woff') format('woff'), 
         url('../fonts/HPSimplifiedW01-Light.ttf')  format('truetype'),
         url('../fonts/HPSimplifiedW01-Light.svg#svgFontName') format('svg');
}
@font-face {
	font-family: HPBold;
	src: url('../fonts/HPSimplifiedW01-Bold.eot');
    src: url('../fonts/HPSimplifiedW01-Bold.eot?#iehack') format('embedded-opentype'), 
         url('../fonts/HPSimplifiedW01-Bold.woff') format('woff'), 
         url('../fonts/HPSimplifiedW01-Bold.ttf')  format('truetype'),
         url('../fonts/HPSimplifiedW01-Bold.svg#svgFontName') format('svg');
} 

div > img {
	/*width: 100%;*/
	max-width: 100%;
	max-height: 100%;
}

#banner {
	position:absolute;
	/*bottom:0;*/
	width:900px;
	height: 564px;
	/*top: 0px;*/
	/*overflow:hidden;*/
	background-color:#eeeeee;
  	background-image: linear-gradient(#fefefe, #dfdfdf);
	/*background-image:url(../bg0a.png);*/
}

#overlay {
	position:absolute;
	display: none;
}

.collapsed {
	/*height: 106px !important;*/
}

.expanded {
	/*height: 564px !important;*/
}

#printer1 {
	position:absolute;
	width: 115px;
	height: 94px;
	margin-left:74px;
	margin-top:12px;
}

#text1a {
	position: absolute;
	width: 300px;
	height: 100px;
	margin-left:213px;
	margin-top:24px;
	font-family:HPBold, "HP Simplified", Arial, sans-serif;
	font-size:30px;
}
#text1a p:nth-child(1) {
	position: absolute;
	margin-top:0px;
}
#text1a p:nth-child(2) {
	position: absolute;
	margin-top:30px;
}

#text1b {
	position: absolute;
	margin-left:213px;
	margin-top:27px;
	line-height: 19px;
	font-family:HPBold, "HP Simplified", Arial, sans-serif;
	font-size:20px;	
	opacity:0;
}

#btnSeeHow {
	position: absolute;
  	cursor:pointer;
  	width: 82px;
  	height: 37px;
	margin-left:480px;
	margin-top:35px;
}
#btnSeeHow:hover {	
	margin-left:481px;
	margin-top:36px;
}

#logosMain {
	position:absolute;
	overflow: hidden;
	width: 265px;
	height: 81px;
	margin-left:601px;
	margin-top:13px;	
}
#logosMain div:nth-of-type(1) {
	position:absolute;
	width: 161px;
	height: 62px;
	margin-left:0px;
	margin-top:10px;
}
#logosMain div:nth-of-type(2) {
	position: absolute;
	content: '';
	width: 0;
	height: 100%;
	border-left: 1px solid black;
	margin-left:179px;
	margin-top:0px;
}
#logosMain div:nth-of-type(3) {
	position:absolute;
	width: 63px;
	height: 63px;
	margin-left:199px;
	margin-top:11px;
}

.btnClose {
	position:absolute;
  	cursor:pointer;
	width: 25px;
	height: 25px;
	margin-left:0px;
	margin-top:0px;
}
.btnClose p {
	position:absolute;	
	font-family:Arial, sans-serif;
	font-size: 23px;
	color: #aaaaaa;
	margin-left:6px;
	margin-top:-3px;
}

#btnCollapse {
	position:absolute;
	margin-left:0px;
	margin-top:0px;
	/*display: none;*/
}

#btnBuyNow {
	position: absolute;
  	cursor:pointer;
	margin-left:300px;
	margin-top:375px;

}
#btnBuyNow:hover {
	margin-left:301px;
	margin-top:376px;
}

#logoFB {
	position:absolute;
  	cursor:pointer;
	margin-left:38px;
	margin-top:508px;
}

#logoTW {
	position:absolute;
  	cursor:pointer;
	margin-left:70px;
	margin-top:508px;
}

#logoLI {
	position:absolute;
  	cursor:pointer;
	margin-left:102px;
	margin-top:508px;
}

#printerSpin {
	position:absolute;
	margin-left:364px;
	margin-top:88px;
	width: 513px;
	height: 791px;
	-ms-touch-action: none !important;
}

#hitCapture {
	position:absolute;	
	/*content: '';*/
	margin-left:390px;
	margin-top:140px;
	width: 480px;
	height: 200px;
	background-image:url(../img/transparent.png);
	/*-ms-touch-action: none !important;*/
}

.blueDotBtn {
	position:absolute;
	padding:15px;
}
.blueDotBtn > div { 
	position: absolute;
	border: 1px solid #0096d6;
    height: 10px;
    width: 10px;
    background-color: #FFFFFF;
    border-radius: 10px;
    margin: 4px;
}
.blueDotBtn > div div {
	border: 1px solid #0096d6;
	height: 20px;
	width: 20px;
	border-radius: 10px;
    margin: -6px;
}
.blueDotBtn:hover > div div { 
	border: 3px solid #d74108;	
    border-radius: 12px;
    margin-left: -8px;
    margin-top: -8px;
}

.blueDotSelected { 
	/*cursor:none;*/
}
.blueDotSelected > div {
	border: 1px solid #d74108;	
    background-color: #d74108;
}
.blueDotSelected > div div  {
	border: 1px solid #d74108;
}

#blueDot1 {
	position:absolute;
  	cursor:pointer;
	margin-left:529px;
	margin-top:176px;
	width: 20px;
	height: 20px;
	background-image:url(../img/transparent.png);
}
#blueDot2 {
	position:absolute;
  	cursor:pointer;
	margin-left:683px;
	margin-top:141px;
	width: 20px;
	height: 20px;
	background-image:url(../img/transparent.png);
}
#blueDot3 {
	position:absolute;
  	cursor:pointer;
	margin-left:596px;
	margin-top:285px;
	width: 20px;
	height: 20px;
	background-image:url(../img/transparent.png);
}
#blueDot4 {
	position:absolute;
  	cursor:pointer;
	margin-left:733px;
	margin-top:243px;
	width: 20px;
	height: 20px;
	background-image:url(../img/transparent.png);
}

#arrows {
	position:absolute;
	margin-left:475px;
	margin-top:491px;
  	width: 54px;
  	height: 16px;
}
#arrows p {
	position:absolute;
	width: 90px;
	font-size: 12px;
	letter-spacing: -.2px;
	color: #555555;
	margin-left:-10px;
	margin-top:-1px;
}

#printerTitle {
	position:absolute;
	width: 220px;
	margin-left: 504px;
	margin-top: 494px;
}
#printerTitle p {
	position:absolute;
	margin-left: 0px;
	margin-top: 0px;
	width: 220px;
	height: 20px;
	font-family: "HPReg", Arial, sans-serif;
	font-size: 12px;
	color: #555555;
}

#replay {
	position:absolute;
  	cursor:pointer;
  	width: 51px;
  	height: 14px;
	margin-left:841px;
	margin-top:547px;
	display: none;
}

#featuresDivider {
	position: absolute;
	content: '';
	width: 0;
	height: 190px;
	border-left: 1px solid black;
	margin-left:227px;
	margin-top:185px;
	display: none;
}

#detailsLink {
	position:absolute;
	width: 160px;
	height: 20px;
	margin-left: 37px;
	margin-top: 545px;
	font-family:HPLight, "HP Simplified", Arial, sans-serif;
	font-size:9px;
	letter-spacing: .2px;
	color: #333333;
	display: none;
}
#detailsURL {
	color: #ec008c;
	text-decoration: none;
}


#featureMain {
	position:absolute;
	width: 318px;
	text-align: right;
	margin-left:64px;
	margin-top:121px;
	/*display: none;*/
}
#featureMain p:first-child {
	position:absolute;	
	margin-top: 30px;
	margin-left: 61px;
	width: 260px;	
	letter-spacing: -.1px;
	font-family:HPBold, Arial, sans-serif;
	font-size:30px;
}
#featureMain p:nth-child(2) {
	position:absolute;	
	margin-top: 60px;
	margin-left: 61px;
	width: 260px;	
	letter-spacing: -.1px;
	font-family:HPBold, Arial, sans-serif;
	font-size:30px;
}
#featureMain p:nth-child(3) {
	position:absolute;	
	margin-top:101px;
	text-align: center;
	line-height: 32px;
	width: 318px;
	height: 31px;
	background-color: #0096d6;
	font-family:HPReg, Arial, sans-serif;
	font-size:18px;
	color: #FFFFFF;
}
#featureMain p:nth-child(4) {
	position:absolute;
	margin-top:147px;
	margin-left: 0px;
	width: 318px;
	letter-spacing: 0.06px;
	line-height: 18px;
	font-family:HPLight, "HP Simplified", Arial, sans-serif;
	font-size:17px;
}

#feature1 {
	position:absolute;
	margin-left:93px;
	margin-top:196px;
	display: none;
}
#feature1 div:first-child {
	position:absolute;
	width: 79px;
	height: 62px;
	margin-left: 18px;
	margin-top: 8px;
}
#feature1 p:nth-child(2) {
	position:absolute;
	margin-left: 15px;
	margin-top:89px;
	width: 300px;
	letter-spacing: .1px;
	line-height: 18px;
	font-family:HPLight, "HP Simplified", Arial, sans-serif;
	font-size:17px;
}

#feature2 {
	position:absolute;
	margin-left:90px;
	margin-top:206px;
	display: none;
}
#feature2 div:first-child {
	position:absolute;
	width: 75px;
	height: 60px;
	margin-left: 15px;
	margin-top: 0px;
}
#feature2 div:nth-child(2) {
	position:absolute;
	width: 80px;
	height: 59px;
	margin-left: 175px;
	margin-top: 1px;
}
#feature2 p:nth-child(3) {
	position:absolute;
	margin-left: 0px;
	margin-top:79px;
	width: 125px;
	letter-spacing: .2px;
	line-height: 18px;
	font-family:HPLight, "HP Simplified", Arial, sans-serif;
	font-size:17px;
}
#feature2 p:nth-child(4) {
	position:absolute;
	margin-left: 157px;
	margin-top:79px;
	width: 160px;
	letter-spacing: .1px;
	line-height: 18px;
	font-family:HPLight, "HP Simplified", Arial, sans-serif;
	font-size:17px;
}

#feature3 {
	position:absolute;
	margin-left:111px;
	margin-top:200px;
	display: none;
}
#feature3 div:first-child {
	position:absolute;
	width: 74px;
	height: 66px;
	margin-left: 1px;
	margin-top: 0px;
}
#feature3 div:nth-child(2) {
	position:absolute;
	width: 65px;
	height: 65px;
	margin-left: 169px;
	margin-top: 1px;
}
#feature3 p:nth-child(3) {
	position:absolute;
	margin-left: 0px;
	margin-top:85px;
	width: 150px;
	letter-spacing: .1px;
	line-height: 18px;
	font-family:HPLight, "HP Simplified", Arial, sans-serif;
	font-size:17px;
}
#feature3 p:nth-child(4) {
	position:absolute;
	margin-left: 136px;
	margin-top:85px;
	width: 160px;
	letter-spacing: .1px;
	line-height: 18px;
	font-family:HPLight, "HP Simplified", Arial, sans-serif;
	font-size:17px;
}

#feature4 {
	position:absolute;
	margin-left:105px;
	margin-top:205px;
	display: none;
}
#feature4 div:first-child {
	position:absolute;
	width: 117px;
	height: 66px;
	margin-left: -28px;
	margin-top: -5px;
}
#feature4 div:nth-child(2) {
	position:absolute;
	width: 53px;
	height: 61px;
	margin-left: 182px;
	margin-top: 0px;
}
#feature4 p:nth-child(3) {
	position:absolute;
	margin-left: -32px;
	margin-top:80px;
	width: 145px;
	letter-spacing: .1px;
	line-height: 18px;
	font-family:HPLight, "HP Simplified", Arial, sans-serif;
	font-size:17px;
}
#feature4 p:nth-child(4) {
	position:absolute;
	margin-left: 141px;
	margin-top:80px;
	width: 160px;
	letter-spacing: .1px;
	line-height: 18px;
	font-family:HPLight, "HP Simplified", Arial, sans-serif;
	font-size:17px;
}

/* 
 * ******************
 * Orientation styles
 * ******************
 */
body.landscape #banner {
    width:900px;
    height: 564px;
}


body.portrait #banner{
    width:750px;
    height: 900px;
}
body.portrait #printer1 {
    width: 96px;
    height: 89px;
    margin-left:40px;
    margin-top:11px;
}

body.portrait #text1a {
    margin-left:163px;
    margin-top:20px;
    font-size: 25px;
}
body.portrait #text1a p:nth-child(2) {
	margin-top:25px;
}

body.portrait #text1b {
    margin-left:168px;
    margin-top:21px;
    font-size:16px;
    line-height: 17px;
    letter-spacing: .3px;
}

body.portrait #btnSeeHow {
    margin-left:399px;
    margin-top:25px;
    font-size:16px;
}
body.portrait #btnSeeHow:hover {    
    margin-left:400px;
    margin-top:26px;
}

body.portrait #logosMain {
    height: 68px;
    margin-left:502px;
    margin-top:11px;
}
body.portrait #logosMain div:nth-of-type(1) {
	width: 135px;
	height: 52px;
    margin-left:0px;
    margin-top:8px;
}
body.portrait #logosMain  div:nth-of-type(2) {
    border-left: 1px solid black;
    margin-left:150px;
    margin-top:0px;

}
body.portrait #logosMain div:nth-of-type(3) {
    width: 53px;
    height: 53px;
    margin-left:166px;
    margin-top:9px;
}



body.portrait #btnBuyNow {
    margin-left:529px;
    margin-top:753px;
}
body.portrait #btnBuyNow:hover {
    margin-left:531px;
    margin-top:748px;
}

body.portrait #logoFB {
    margin-left:34px;
    margin-top:844px;
}
body.portrait #logoTW {
    margin-left:65px;
    margin-top:844px;
}
body.portrait #logoLI {
    margin-left:97px;
    margin-top:844px;
}

body.portrait #printerSpin {
    margin-left:104px;
    margin-top:353px;
}

body.portrait #hitCapture {
	margin-left:130px;
	margin-top:400px;
}

body.portrait #blueDot1 {
    margin-left:274px;
    margin-top:442px;
}
body.portrait #blueDot2 {
    margin-left:423px;
    margin-top:406px;
}
body.portrait #blueDot3 {
    margin-left:344px;
    margin-top:550px;
}
body.portrait #blueDot4 {
    margin-left:471px;
    margin-top:508px;
}

body.portrait #arrows {
    margin-left:251px;
    margin-top:744px;
}

body.portrait #printerTitle {
	margin-left: 256px;
	margin-top: 769px;
}
body.portrait #printerTitle p {
	width: 220px;
	height: 20px;
	font-size: 12px;
}

body.portrait #replay {
    margin-left: 695px;
    margin-top:883px;
}

body.portrait #featuresDivider {
    margin-left:376px;
    margin-top:189px;
}

body.portrait #detailsLink {
	margin-left: 35px;
	margin-top: 882px;
}

body.portrait #featureMain {
    width: 476px;
    margin-left:136px;
    margin-top:190px;
}
body.portrait #featureMain p:first-child {
    text-align: left;
    margin-left: -1px;  
    letter-spacing: -.2px;
}
body.portrait #featureMain p:nth-child(2) {
    margin-top: 30px;
    margin-left: 241px;
    text-align: left;
}
body.portrait #featureMain p:nth-child(3) {
    margin-top:72px;
    margin-left:-1px;
    width: 457px;
    text-align: left;
    letter-spacing: 0.07px;
    line-height: 30px;
    font-size:18px;
    padding-left: 20px;
}
body.portrait #featureMain p:nth-child(4) {
    margin-top:118px;
    margin-left:-1px;
    width: 480px;
    text-align: left;
    letter-spacing: 0.07px;
    line-height: 18px;
    font-size:17px;
}

body.portrait #feature1 {
    margin-left:92px;
    margin-top:220px;
}
body.portrait #feature1 div:first-child {
    margin-left: 89px;
    margin-top: 8px;
}

body.portrait #feature1 p:nth-child(2) {
    margin-top:95px;
    margin-left: 86px;
    width: 350px;
    letter-spacing: .1px;
    line-height: 17px;
}

body.portrait #feature2 {
    margin-left:122px;
    margin-top:230px;
}
body.portrait #feature2 div:first-child {
    margin-left: 62px;
}
body.portrait #feature2 div:nth-child(2) {
    margin-left: 367px;
}
body.portrait #feature2 p:nth-child(3) {
    margin-top:85px;
    width: 210px;
    letter-spacing: .01px;
    line-height: 17px;
}
body.portrait #feature2 p:nth-child(4) {
    margin-left: 311px;
    margin-top:85px;
    width: 210px;
    letter-spacing: 0px;
}


body.portrait #feature3 {
    margin-left:142px;
    margin-top:229px;
}
body.portrait #feature3 div:first-child {
    margin-left: 43px;
}
body.portrait #feature3 div:nth-child(2) {
    margin-left: 363px;
}
body.portrait #feature3 p:nth-child(3) {
    margin-top:86px;
    width: 180px;
    letter-spacing: 0px;
}
body.portrait #feature3 p:nth-child(4) {
    margin-left: 305px;
    margin-top:86px;
    width: 180px;
}

body.portrait #feature3 {
    margin-left:139px;
    margin-top:225px;
}
body.portrait #feature3 div:first-child {
    margin-left: 44px;
}
body.portrait #feature3 div:nth-child(2) {
    margin-left: 343px;
    margin-top: 1px;
}
body.portrait #feature3 p:nth-child(3) {
    margin-top:90px;
    width: 180px;
    letter-spacing: 0px;
}
body.portrait #feature3 p:nth-child(4) {
    margin-left: 297px;
    margin-top:90px;
    width: 170px;
}

body.portrait #feature4 {
    margin-left:142px;
    margin-top:229px;
}
body.portrait #feature4 div:first-child {
    margin-left: 23px;
}
body.portrait #feature4 div:nth-child(2) {
    margin-left: 363px;
}
body.portrait #feature4 p:nth-child(3) {
    margin-left: -50px;
    margin-top:86px;
    width: 265px;
}
body.portrait #feature4 p:nth-child(4) {
    margin-left: 305px;
    margin-top:86px;
    width: 180px;
}