/* transistion helpers:: -webkit-transition: all 0.35s linear; -moz-transition: all 0.35s linear; -o-transition: all 0.35s linear; transition: all 0.35s linear; */ body {background: #000000; color: #b3b1b1;} .no-bullet {list-style: none;} .row-fluid [class*="span"].center, .center {margin: 0 auto; float: none; } #configurator_header { max-width: 440px; width: 100%; margin-bottom: 30px;} #configurator_header h2 { color: #ffffff; } #wrapper {max-width: 62.5em; width: 100%; margin: 0 auto; position: relative; padding-top: 2rem; min-height: 600px;} .ipad #three-d-video {display: none;} #configurator_wrapper {max-width: 720px; position: relative; width: 100%; min-height: 540px; top: 0; float: right;} #three-d-video #globalnav, #three-d-video #nav_descriptions {display: none;} #mobileContainer .thinkpad-toggle { clear: both; margin-bottom: 25px; } .thinkpad-toggle { margin-top: 20px; } .thinkpad-toggle .button { margin-right: 10px; } #globalnav { margin-bottom: 55px;} #globalnav ul {font-family: Arial; list-style-position: inside; margin: 0; padding: 0.6em 0; border-left: 1px solid #4c4c4c; border-right: 1px solid #4c4c4c;} #globalnav ul li { line-height: 13px; font-size: 0.8em; /*letter-spacing: 1px;*/ -webkit-transition: all 0.35s linear; -moz-transition: all 0.35s linear; -o-transition: all 0.35s linear; transition: all 0.35s linear;} #globalnav ul li a {color: #b3b1b1; text-decoration: none; display: block; padding: 0 0.6em; -webkit-transition: all 0.35s linear; -moz-transition: all 0.35s linear; -o-transition: all 0.35s linear; transition: all 0.35s linear;} #globalnav ul li span.linkwrap {height: inherit; padding: 6px 0; margin: 0; width: 100%; display: block; color: #ffffff; border-left: 2px solid #000; border-right: 2px solid #000;} #globalnav ul li.active {background: #161616;} #globalnav ul li.active span.linkwrap {height: inherit; padding: 6px 0; margin: 0; width: 100%; display: block; color: #ffffff; border-left: 2px solid #ee3124; border-right: 2px solid #ee3124; border-top: 1px solid #4c4c4c; border-bottom: 1px solid #4c4c4c;} #globalnav ul li.active a { color: white; } #globalnav ul li.first {border-top: 1px solid #4c4c4c;} #globalnav ul li.last {border-bottom: 1px solid #4c4c4c;} #globalnav ul li.first span.dashes, #globalnav ul li.last span.dashes {display: block; width: 96%; background: #000000; height: 1px; position: relative; margin: 0 auto;} #globalnav ul li.first span.dashes {top: -1px;} #globalnav ul li.last span.dashes {bottom: -1px;} #globalnav li ul.subnav {display: none; padding: 0; padding-top: 0; border: none;} #globalnav li ul.subnav li { font-size: 1em; letter-spacing: normal; -webkit-transition: all 0.35s linear; -moz-transition: all 0.35s linear; -o-transition: all 0.35s linear; transition: all 0.35s linear;} #globalnav li ul.subnav li a {display: inline-block; width: 100%;} #globalnav li ul.subnav li i {margin-right: 0.3em;} #globalnav li ul.subnav li.on i {color: #ee3124;} #nav_descriptions h3 {color: #ee3124; font-size: 1.1em; margin-top: 0;} #nav_descriptions p {font-size: 0.8em;} #nav_descriptions .tour, #stillcontainer .tour {display: none;} #nav_descriptions .tour.active, #stillcontainer .tour.active {display: block;} #introcontainer, #videocontainer {position: absolute;} #introcontainer, #videocontainer, #videocontainer video, #introcontainer video {max-width: 720px; width: 100%; max-height: 540px; height: 100%;} #videocontainer img.placeholder {position: absolute; z-index: 99999; display:none;} .ipad #videocontainer #mainvideo {display: block;} .ipad #videocontainer, .ipad #videocontainer img.placeholder {display: block;} .ipad #configurator_header, .ipad #videocontainer { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } #stillcontainer {width: 720px; height: 540px; position: absolute; top: 0; left: 0; z-index:1;} #stillcontainer .tour {width: 720px; height: 540px;} #stillcontainer .tour.active img { display: block; } #stillcontainer .tour.active img.animated { display: none; } #stillcontainer .tour img {width: 720px; height: 540px; position: absolute; top: 0; left: 0; display: none;} #stillcontainer .tour .subnav {position: absolute; bottom: 0; left: 2em;} #stillcontainer .tour .subnav a {margin-right: 1em; background: none; border: 1px solid #4c4c4c; border-radius: 0; padding: 0;} #stillcontainer .tour .subnav a span.top, #stillcontainer .tour .subnav a span.bottom {background: #000000; height: 1px; width: 90%; display: block; margin: 0 auto; position: relative;} #stillcontainer .tour .subnav a span.top {top: -1px;} #stillcontainer .tour .subnav a span.link {padding: 6px 12px; display: block;} #stillcontainer .tour .subnav a span.bottom {bottom: -1px;} #stillcontainer .tour .subnav a.active {background: #161616;} #stillcontainer .tour .subnav a.active span.link {border-left: 2px solid #ee3124; border-right: 2px solid #ee3124;} #stillcontainer img.base {z-index: 1;} #stillcontainer img.highlight {z-index: 2;} #stillcontainer img.trays {z-index: 2;} #stillcontainer img.trays2 {z-index: 3;} #stillcontainer img.trays.show, #stillcontainer img.highlight.show {display: block;} #stillcontainer img.trays2.active {display: block;} #panelcontainer {position: absolute; height: 100%; width: 100%;} #panelcontainer .tour {display: none;} #panelcontainer .tour.active {display: block;} #panelcontainer .tour .content_article .content_panel {max-width: 260px; width: 100%; box-shadow: 0 0 1px transparent;} #panelcontainer .tour .content_article .content_panel header { display: inline-block; padding: 3px 12px 3px 3px; background: rgba(0,0,0,1); border-radius: 14px 2px 2px 14px; box-shadow: 0 0 18px #ee3124; margin-bottom: 0.6em;} #panelcontainer .tour .content_article .content_panel h2 {margin: 0; font-size: 1em; font-weight: normal; line-height: 1.8em; padding-left: 0.1em;} #panelcontainer .tour .content_article .content_panel h2 a { color: #b3b1b1; display: block;} #panelcontainer .tour .content_article .content_panel h2 a:hover {text-decoration: none;} #panelcontainer .tour .content_article .content_panel h2 span.fa-stack {font-size: 0.8em; font-weight: normal;} #panelcontainer .tour .content_article .content_panel h2 a i.fa-circle-thin {color: #b3b1b1;} #panelcontainer .tour .content_article .content_panel h2 a i.fa-play { line-height: 1.9em; padding-left: 0.2em; font-size: 0.8em; top: 0.1em;} #panelcontainer .tour .content_article .content_panel.active h2 a i.fa-circle-thin {color: #ffffff;} #panelcontainer .tour .content_article .content_panel.active h2 a i.fa-play {color: #ee3124;} #panelcontainer .tour .content_article .content_panel .panel_body {display: none; padding: 0; background: rgba(0,0,0,0.7); border: 1px solid #4c4c4c; -webkit-transition: all 0.35s linear; -moz-transition: all 0.35s linear; -o-transition: all 0.35s linear; transition: all 0.35s linear;} #panelcontainer .tour .content_article .content_panel .panel_body.active {display: block;} #panelcontainer .tour .content_article .content_panel .panel_body .panel_content {border-left: 2px solid #ee3124; border-right: 2px solid #ee3124;} #panelcontainer .tour .content_article .content_panel .panel_body .panel_content p {margin: 0; padding: 0.5em 1em;} #panelcontainer .tour .content_article .stage {display: none;} #panelcontainer .tour .content_article .stage.active {display: block;} #panelcontainer .tour .content_article .stage .callout {position: absolute; z-index: 1;} #panelcontainer .tour .content_article .stage .callout.active {z-index: 99;} #panelcontainer .tour .content_article .stage .callout.active h2 a {color: #ffffff;} /* ThinkStation Callouts */ #panelcontainer .tour.stopTwo .content_article .stage1 .calloutA {top: 53px; left: 259px;} #panelcontainer .tour.stopTwo .content_article .stage1 .calloutB {top: 262px; left: 254px;} #panelcontainer .tour.stopTwo .content_article .stage1 .calloutC {top: 128px; right: -68px;} #panelcontainer .tour.stopThree .content_article .stage1 .calloutA {top: 280px; left: 186px;} #panelcontainer .tour.stopThree .content_article .stage1 .calloutB {top: 20px; left: 270px;} #panelcontainer .tour.stopThree .content_article .stage2 .calloutA {top: 310px; left: 306px;} #panelcontainer .tour.stopThree .content_article .stage3 .calloutA {top: 240px; left: 146px;} #panelcontainer .tour.stopFour .content_article .stage1 .calloutA {top: 324px; left: 195px;} #panelcontainer .tour.stopFour .content_article .stage1 .calloutB {top: 208px; left: 160px;} #panelcontainer .tour.stopFour .content_article .stage1 .calloutC {top: 285px; left: 467px;} #panelcontainer .tour.stopFive .content_article .stage1 .calloutA {top: 204px; left: 31px;} #panelcontainer .tour.stopFive .content_article .stage1 .calloutB {top: 333px; left: 295px;} #panelcontainer .tour.stopFive .content_article .stage1 .calloutC {top: 180px; left: 286px;} #panelcontainer .tour.stopFive .content_article .stage1 .calloutD {top: 178px; left: 497px;} #panelcontainer .tour.stopFive .content_article .stage2 .calloutA {top: 204px; left: 31px;} #panelcontainer .tour.stopFive .content_article .stage2 .calloutB {top: 333px; left: 244px;} #panelcontainer .tour.stopFive .content_article .stage2 .calloutC {top: 193px; left: 356px;} #panelcontainer .tour.stopFive .content_article .stage2 .calloutD {top: 208px; left: 567px;} #panelcontainer .tour.stopSix .content_article .stage1 .calloutA {top: 172px; left: 426px;} #panelcontainer .tour.stopSeven .content_article .stage1 .calloutA {top: 350px; left: 457px;} /* ThinkPad Callouts */ #panelcontainer.thinkpad-panel a:focus { text-decoration: none; } #panelcontainer.thinkpad-panel .tour.stopTwo .content_article .stage1 .calloutA {top: 108px; left: 259px;} #panelcontainer.thinkpad-panel .tour.stopTwo .content_article .stage1 .calloutB {top: 224px; left: 212px;} #panelcontainer.thinkpad-panel .tour.stopTwo .content_article .stage1 .calloutC {top: 159px; right: 20px; left: auto; } #panelcontainer.thinkpad-panel .tour.stopTwo .content_article .content_panel.calloutC .panel_body { left: 4px; } #panelcontainer.thinkpad-panel .tour.stopThree .content_article .stage1 .calloutB { top: 156px; right: -120px; left: auto; } #panelcontainer.thinkpad-panel .tour.stopThree .content_article .stage1 .calloutA { top: 257px; right: 39px; left: auto; } #panelcontainer.thinkpad-panel .tour.stopFour .content_article .stage1 .calloutA { top: 362px; left: 90px; } #panelcontainer.thinkpad-panel .tour.stopFour .content_article .stage1 .calloutB { top: 110px; right: -232px; left: auto; } .tablet #panelcontainer.thinkpad-panel .tour.stopFour .content_article .stage1 .calloutB { right: -196px; } #panelcontainer.thinkpad-panel .tour.stopFive .content_article .stage1 .calloutA { top: 440px; left: 300px; } #panelcontainer.thinkpad-panel .tour.stopFive .content_article .stage1 .calloutB { top: 277px; right: -170px; left: auto; } .tablet #panelcontainer.thinkpad-panel .tour.stopFive .content_article .stage1 .calloutB { top: 267px; right: -113px; } #panelcontainer.thinkpad-panel .tour.stopFive .content_article .stage1 .calloutC { top: 403px; left: 106px; } #panelcontainer.thinkpad-panel .tour.stopSix .content_article .stage1 .calloutA { top: 407px; left: 130px; } #panelcontainer.thinkpad-panel .tour.stopSix .content_article .stage1 .calloutB { top: 177px; left: 188px; } #panelcontainer.thinkpad-panel .tour.stopSix .content_article .stage1 .calloutC { top: 259px; right: -110px; } /* Yoga P40 Callouts */ #panelcontainer.yoga-panel .tour.stopTwo .content_article .stage1 .calloutA {top: 150px; left: 105px;} #panelcontainer.yoga-panel .tour.stopTwo .content_article .stage1 .calloutB {top: 420px; left: 295px;} #panelcontainer.yoga-panel .tour.stopTwo .content_article .stage1 .calloutC {top: 260px; right: -56px; left: auto; } #panelcontainer.yoga-panel .tour.stopThree .content_article .stage1 .calloutA {top: 315px; left: 186px; } #panelcontainer.yoga-panel .tour.stopThree .content_article .stage1 .calloutB {top: 30px; left: auto; right: -120px; } #panelcontainer.yoga-panel .tour.stopThree .content_article .stage1 .calloutC {top: 370px; right:-100px; } #panelcontainer.yoga-panel .tour.stopFour .content_article .stage1 .calloutA {top:110px; left:auto; right:-50px;} #panelcontainer.yoga-panel .tour.stopFour .content_article .stage1 .calloutB {top:235px; left:auto; right:-90px;} #panelcontainer.yoga-panel .tour.stopFour .content_article .stage1 .calloutC {top:420px; left:290px;} #panelcontainer #contentThree .content_article>div {max-width: 400px;} #panelcontainer .tour.stopTwo .content_article .content_panel.calloutC .panel_body {position: relative; left: 0;} #panelcontainer .tour.stopFour .content_article .content_panel {max-width: 360px;} #panelcontainer .tour.stopFour .content_article .content_panel.calloutB .panel_body {max-width: 300px;} #panelcontainer .tour.stopFive .content_article .content_panel.calloutA {max-width: 240px;} #panelcontainer .tour.stopFive .content_article .content_panel.calloutA .panel_body {} #panelcontainer .tour.stopFive .content_article .stage1 .calloutB .panel_body {width: 320px;} #panelcontainer .tour.stopFive .content_article .stage1 .calloutD .panel_body {position: relative; left: -40px; width: 190px; z-index: 99;} #panelcontainer .tour.stopFive .content_article .content_panel.calloutC .panel_body {max-width: 280px;} @media only screen and (max-width : 1350px) { #panelcontainer.thinkpad-panel .tour.stopFour .content_article .content_panel.calloutB .panel_body { position: relative; left: -135px; } } @media only screen and (max-width : 1465px) { #panelcontainer.thinkpad-panel .tour.stopFive .content_article .stage1 .calloutB .panel_body { position: relative; left: -160px; } } @media only screen and (max-width : 1240px) { #panelcontainer.thinkpad-panel .tour.stopThree .content_article .stage1 .calloutB .panel_body { position: relative; left: -118px; } } @media only screen and (max-width : 1220px) { #panelcontainer.thinkpad-panel .tour.stopSix .content_article .stage1 .calloutC .panel_body { position: relative; left: -138px; } } /********************** *********************** IPAD SPECIFIC ************************ ***********************/ #mobileIntroNav {display: none; margin-left: 9px;} .ipad #mobileIntroNav {display: block; width: auto; margin: 10px 0 0 0;} .ipad #globalnav {margin-bottom: 35px;} .ipad #globalnav ul li .linkwrap {padding: 0.5em 0; display: block;} .ipad #globalnav ul li a {padding: 0 0.4em;} .ipad #panelcontainer .tour .content_article .content_panel h2 a i.fa-circle-thin {top: -2px;} .ipad #panelcontainer .tour.stopFive .content_article .stage1 .calloutD .panel_body {position: relative; left: 0px; width: 190px; z-index: 99;} .ipad #panelcontainer .tour.stopThree .content_article .stage1 .calloutA {top: 280px; left: 186px;} /********************** *********************** MOBILE PAGE ************************ ***********************/ #mobileContainer {padding: 0 1em 2em 1em; min-height: 500px;} #mobileContainer img {width: 100%; margin-bottom: 1em;} #mobileContainer p {font-size: 1.2em; line-height: 1.2em; margin-bottom: 1em;} #mobileContainer .mobile_header {margin-bottom: 1em;} #mobileContainer .mobile_header h2 { color: #fcfcfc; font-size: 1.8em;} #mobilenav #accordion .panel .collapse {width: 97%; margin: 0 auto; border: 1px solid #4c4c4c; border-top: none; border-bottom: none;} #mobilenav #accordion .panel-default {background: none; border: none;} #mobilenav #accordion .panel-default>.panel-heading {padding: 0;overflow: hidden; border: 1px solid #4c4c4c; border-radius: 4px; background: -moz-linear-gradient(top, rgba(255,255,255,0.26) 0%, rgba(0,0,0,0.36) 99%, rgba(0,0,0,0.36) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.26)), color-stop(99%,rgba(0,0,0,0.36)), color-stop(100%,rgba(0,0,0,0.36))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,0.26) 0%,rgba(0,0,0,0.36) 99%,rgba(0,0,0,0.36) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,0.26) 0%,rgba(0,0,0,0.36) 99%,rgba(0,0,0,0.36) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,0.26) 0%,rgba(0,0,0,0.36) 99%,rgba(0,0,0,0.36) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,0.26) 0%,rgba(0,0,0,0.36) 99%,rgba(0,0,0,0.36) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5cffffff', endColorstr='#5c000000',GradientType=0 ); /* IE6-9 */} #mobilenav #accordion .panel-default>.panel-heading .pager {margin: 0; padding-right: 0;} #mobilenav #accordion .panel-heading {border: none;} #mobilenav #accordion .panel-title {height: 37px; line-height: 37px; font-size: 12px;} #mobilenav #accordion .panel-title>a {display: block; text-align: center; letter-spacing: 1px; color: #fcfcfc;} #mobilenav #accordion .panel-title>a:hover {text-decoration: none;} #mobilenav #accordion .panel-heading .mobilepager {padding: 1em 0;display: block; width: 100%; height: 100%; color: #ee3124; text-shadow: 0 0 1px #000000; font-size: 0.8em; background: -moz-linear-gradient(top, rgba(255,255,255,0.16) 0%, rgba(0,0,0,0.76) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.16)), color-stop(100%,rgba(0,0,0,0.76))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,0.16) 0%,rgba(0,0,0,0.76) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,0.16) 0%,rgba(0,0,0,0.76) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,0.16) 0%,rgba(0,0,0,0.76) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,0.16) 0%,rgba(0,0,0,0.76) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29ffffff', endColorstr='#c2000000',GradientType=0 ); /* IE6-9 */} #mobilenav #accordion .panel-heading .mobilepager.prev {border-right: 1px solid #4c4c4c;} #mobilenav #accordion .panel-heading .mobilepager.next {border-left: 1px solid #4c4c4c;} #mobilenav #accordion .panel-heading .mobilepager.prev.disabled, #mobilenav #accordion .panel-heading .mobilepager.next.disabled { color: #585858;} #mobilenav #accordion .panel-default>.panel-heading+.panel-collapse .panel-body {padding: 0;} #mobilenav #accordion .panel-body {border: none;} #mobilenav #accordion .panel-body ul {margin-bottom: 0; padding-top: 0.5em;} #mobilenav #accordion .panel-body li {line-height: 2em; margin: 0.5em 0;} #mobilenav #accordion .panel-body li.active {background: #161616;} #mobilenav #accordion .panel-body li a {color: #fcfcfc; display: block; line-height: 2em; padding-left: 3em;} #mobilenav #accordion .panel-body li.active a {text-decoration: none; border-left: 3px solid #ee3124; border-right: 3px solid #ee3124; border-top: 1px solid #4c4c4c; border-bottom: 1px solid #4c4c4c;} #mobilenav #accordion .panel-body li a:hover {text-decoration: none;} #mobilenav #accordion .panel-body li.active a:hover {text-decoration: none;} #mobilenav #accordion .panel-body li.first {border-top: 1px solid #4c4c4c;} #mobilenav #accordion .panel-body li.last {border-bottom: 1px solid #4c4c4c;} #mobilenav #accordion .panel-body li.first span, #mobilenav #accordion .panel-body li.last span {display: block; width: 96%; background: #000000; height: 1px; position: relative; margin: 0 auto;} #mobilenav #accordion .panel-body li.first span {top: -1px;} #mobilenav #accordion .panel-body li.last span {bottom: -1px;} #mobilenav #accordion .panel-body li span.forceline {display: inline; top: inherit;} #mobileContentWrapper article {display: none;} #mobileContentWrapper article.active {display: block;} #mobileContentWrapper article h3.descrip_title { color: #ee3124; font-size: 1.4em;} #mobileContentWrapper article .tourStopContent .callouts .callout .calloutTitle {margin-bottom: 0.2em; color:white;} #mobileContentWrapper article .tourStopContent .callouts .callout .calloutContent {padding-left: 20px; font-size: 1em;} #three-d-mobile .tour.stopThree ul.subnav {overflow: hidden; padding: 0; padding-top: 0; border: none;} #three-d-mobile .tour.stopThree ul.subnav li {border: 1px solid #4c4c4c; text-align: center; position: relative; font-size: 1em; letter-spacing: normal; float: left; max-width: 80px; margin-right: 1.8em; -webkit-transition: all 0.35s linear; -moz-transition: all 0.35s linear; -o-transition: all 0.35s linear; transition: all 0.35s linear;} #three-d-mobile .tour.stopThree ul.subnav li:last-child {margin-right: 0;} #three-d-mobile .tour.stopThree ul.subnav li .dashes {display: block; width: 96%; background: #000000; height: 1px; position: relative; margin: 0 auto;} #three-d-mobile .tour.stopThree ul.subnav li .dashes:first-child {top: -1px;} #three-d-mobile .tour.stopThree ul.subnav li .dashes:last-child {bottom: -1px;} #three-d-mobile .tour.stopThree ul.subnav li a {color: #b3b1b1; text-decoration: none; display: block; padding: 0 0.5em; -webkit-transition: all 0.35s linear; -moz-transition: all 0.35s linear; -o-transition: all 0.35s linear; transition: all 0.35s linear;} #three-d-mobile .tour.stopThree ul.subnav li.active {background: #161616;} #three-d-mobile .tour.stopThree ul.subnav li.active a {color: #ffffff; border-left: 1px solid #ee3124; border-right: 1px solid #ee3124;} #three-d-mobile .tour.stopThree ul.subnav li i {margin-right: 0.3em;} #three-d-mobile .tour.stopThree ul.subnav li.on i {color: #ee3124;} @media only screen and (orientation: portrait) { #stillcontainer {width: 640px; height: 480px;} #stillcontainer .tour {width: 640px; height: 480px;} #stillcontainer .tour img {width: 640px; height: 480px;} #panelcontainer .tour.stopTwo .content_article .stage1 .calloutA {top: 46px; left: 228px;} #panelcontainer .tour.stopTwo .content_article .stage1 .calloutB {top: 284px; left: 124px;} #panelcontainer .tour.stopTwo .content_article .stage1 .calloutC {top: 21px; right: -65px;} #panelcontainer .tour.stopTwo .content_article .stage1 .calloutC .panel_body {width: 200px; left: -30px;} } @media only screen and (min-width: 320px) and (max-width: 760px) { #three-d-video .container, #three-d-static .container {width: 760px;} } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-width : 768px) and (max-width : 1024px) { #three-d-video #introcontainer, #three-d-video #introcontainer video, #three-d-static #videocontainer, #three-d-static #videocontainer video {width: 720px; height: 540px;} #panelcontainer .tour.stopTwo .content_article .stage1 .calloutC {top: 128px; right: -168px;} #panelcontainer .tour.stopTwo .content_article .content_panel.calloutC .panel_body {left: -88px;} #panelcontainer.yoga-panel .tour.stopTwo .content_article .content_panel.calloutC .panel_body { left: -127px; } #panelcontainer.yoga-panel .tour.stopThree .content_article .content_panel.calloutB .panel_body { position: relative; left: -115px; } #panelcontainer.yoga-panel .tour.stopThree .content_article .content_panel.calloutC .panel_body { position: relative; left: -110px; } #panelcontainer.yoga-panel .tour.stopFour .content_article .content_panel.calloutB .panel_body { position: relative; left: -164px; } } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { #panelcontainer .tour.stopTwo .content_article .stage1 .calloutC {top: 21px; right: -60px;} #panelcontainer .tour.stopTwo .content_article .stage1 .calloutC .panel_body {width: 200px} #panelcontainer .tour.stopFour .content_article .stage1 .calloutC .panel_body {width: 240px; position: relative; left: -46px;} } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { .forceline {display: block;} #stillcontainer, #panelcontainer {top: 30px;} #panelcontainer .tour.stopTwo .content_article .stage1 .calloutC {right: -48px;} #panelcontainer .tour.stopFour .content_article .stage1 .calloutA {top: 324px; left: 125px;} #panelcontainer .tour.stopFour .content_article .stage1 .calloutB {top: 196px; left: 121px;} #panelcontainer .tour.stopFour .content_article .stage1 .calloutC {top: 285px; left: 410px;} #panelcontainer .tour.stopFour .content_article .stage1 .calloutC .panel_body {width: 240px; position: relative; left: -46px;} #panelcontainer .tour.stopFour .content_article .stage1 .calloutB .panel_body {position: relative; left: -56px; top: -3px;} #panelcontainer .tour.stopFive .content_article .stage1 .calloutA {top: 180px; left: 23px;} #panelcontainer .tour.stopFive .content_article .stage1 .calloutA .panel_body {width: 180px;} #panelcontainer .tour.stopFive .content_article .stage1 .calloutB {top: 293px; left: 214px;} #panelcontainer .tour.stopFive .content_article .stage1 .calloutC {top: 150px} #panelcontainer .tour.stopFive .content_article .stage1 .calloutC .panel_body {width: 318px; position: relative; left: -142px; top: 6px;} #panelcontainer .tour.stopFive .content_article .stage1 .calloutD {top: 178px; left: 497px;} #panelcontainer .tour.stopFive .content_article .stage1 .calloutD .panel_body {position: relative; left: -80px; width: 190px; z-index: 99;} #panelcontainer .tour.stopSix .content_article .stage1 .calloutA {top: 152px; left: 366px;} #panelcontainer .tour.stopSeven .content_article .stage1 .calloutA {top: 204px; left: 357px;} }