/*1-2-3*/ #step1-2-3box{height:156px;width:100%; position:relative;z-index:1000} .step1-2-3bg { height: 157px; background-image:url(/layout/images/send-your-name/1-2-3-btn-bg.png); background-repeat:repeat-x; position:relative; z-index: 1; width: 100%; } .step1-2-3 { /*height: 156px;*/ margin-top:-157px; width:100%; position:relative; z-index: 3; } .step { height: 156px; position:relative; padding:0px; float:left; } .landscapeMode .step { width:20%; } .portraitMode .step { min-width:50px; } .step.active { } #redArrow { position: absolute; top:0; white-space: nowrap; z-index: 2; } #redArrow .bookends, #redArrow #middle { background: transparent url(/layout/images/send-your-name/sprite-maps/active-arrows.png) no-repeat left top; } #redArrow .bookends { display: none; height: 156px; float: left; position: relative; } #redArrow .bookends.left { width: 43px; } #redArrow #middle { background-position: -45px 0px; float: left; height: 156px; position: relative; } #redArrow .bookends.right { float: left; width: 37px; } .step a, .step span { text-decoration:none; color:#8eb1db; } /* Blue Background with Light Blue Hover */ .step a:hover, .step a:hover .stepText, .step a:hover span { text-decoration:none; color:#C3CEDB; } /* Red Background with Gold Hover */ .step.active a:hover, .step.active a:hover .stepText, .step.active a:hover span, .step.active a:hover .s4 { text-decoration:none; color:#ffdb9f; } /* Blue or Red Background with White Hover */ .step.active a, .step.active span, .step.active .non-link-header { text-decoration:none; color:#ffffff; } .stepNumber { float:left; margin-left:15px; margin-top:34px; background-size:contain; background-repeat:no-repeat; height: 79px; width: 86px; } .step .stepText .slash { font-size: 12px; line-height: 12px; } .step.active .stepText .slash { color: #ffffff; font-weight: bold; text-decoration:none; } /* With we enable the Landscape menu text & disable the Portrait menu text. */ .landscapeMode .step .landscapeMode { display: block; } .step .portraitMode, .landscapeMode .step .portraitMode { display: none; } /* With we enable the Portrait menu text & disable the Landscape menu text. */ .portraitMode .step .landscapeMode { display: none; } .portraitMode .step .portraitMode { display: block; } .stepText { float:left; color:#8eb1db;/*margin-top:60px;*/ margin:50px 0 0 0; font-size:19px; line-height:24px; width:50%; } .step.active .stepText, .stepText.active { color:#ffffff; } .stepNumber1 { background-image:url(/layout/images/send-your-name/btnInactive01.png?1); } .step.active .stepNumber1, .stepNumber1.active { background-image:url(/layout/images/send-your-name/btnActive01.png?1); } .stepNumber2 { background-image:url(/layout/images/send-your-name/btnInactive02.png?1); } .step.active .stepNumber2, .stepNumber2.active { background-image:url(/layout/images/send-your-name/btnActive02.png?1); } .stepNumber3 { background-image:url(/layout/images/send-your-name/btnInactive03.png?1); } .step.active .stepNumber3, .stepNumber3.active { background-image:url(/layout/images/send-your-name/btnActive03.png?1); } .stepText.stepMaps a:hover {text-decoration:underline;} .stepNumber4 { background-image:url(/layout/images/send-your-name/btnInactive04.png); } .step.active .stepNumber4, .stepNumber4.active { background-image:url(/layout/images/send-your-name/btnActive04.png); } .stepNumber.stepNumber0{width:0;height:0;} /* @media only screen and (min-width: 600px) and (max-width: 725px) { .step3.active .stepText { width: 50px; } } @media only screen and (min-width: 900px) and (max-width: 1050px) { .stepNumber { width:40px; height:43px; } .stepNumber.active { width:40px; } .stepText .portraitMode { white-space: pre-wrap; } .step3 .stepText .portraitMode, .step4 .stepText .portraitMode { white-space: pre-wrap; } } @media only screen and (min-width: 1050px) and (max-width: 1300px) { .stepNumber { width: 70px; height: 79px; } .stepText { margin-left: 5px; } .stepText .portraitMode { font-size: 20px; margin-left: -5px; } .stepText.active .portraitMode { margin-right: 15px; } .step2 .landscapeMode .shareText { display: none; } .step.step4 .stepText { width: 50%; } } @media only screen and (min-width: 1275px) and (max-width: 1400px) { .step2.active .landscapeMode .shareText { display: none; } }*/ .s1 { display:block; width:100%; height:100%; margin:0px; padding:0px; } .s2 { font-size:16px; line-height:1.2em; white-space: nowrap; } .s3 { font-size:12px; line-height:1.2em; white-space: nowrap; } .s4 { font-size:12px; line-height:1.2em; white-space: nowrap; } .portraitMode .step .portraitMode .s3 { white-space: inherit; } /*LAST STEP: FREQUENT FLYER*/ /*.step.last.active { margin-left: 0px; padding-left: 0px; }*/ .step.last .stepText { margin: -20px 0 0 20px;font-size:90%;font-weight:bold;padding:0 5px } @media only screen and (max-width: 1200px) { .step.last .portraitMode{margin-top:20px;font-size: 14px;} } @media only screen and (max-width: 950px) { .stepNumber { width:40px; height:43px; margin:20px 45% 10px auto;} .stepText { margin:20px 30% 10px auto;} .stepNumber, .stepText, .stepText * { float:none; text-align:center; } .stepNumber.active { width:40px; } .step.last .portraitMode { margin-top: 50px;font-size: 80%;} } .step.last .stepText.stepFrequentFlyer .landscapeMode{margin-top:10px;} .step .stepText.stepMaps{font-weight:bold;} .step.last a.s4{white-space:pre-wrap;} .landscapeMode .step, .portraitMode .step {width: 22%;} .step.last{width: 12%;} .step.last .stepText{margin-left:0;width:95%;width:calc(100% - 10px);} .step.last .stepText .s2{white-space:normal;} .step1-2-3bg{width:100% !important;}