/*start: GENERAL*/ /*end: GENERAL*/ /*start: TOP BANNER + NAVIGATION*/ /* Desktops and laptops ----------- */ /* LARGE SCREEN ----------- */ @media only screen and (min-width : 1824px) { } /* MEDIUM SCREEN ----------- */ @media only screen and (max-width:1460px){ #top_marsBanner{ background-image:url('/layout/mars2020/images/mars2020-banner-edged.png'); background-size:cover; height:145px; background-position:left top} } @media only screen and (min-width : 1224px) { } @media only screen and (max-width:1024px){ #top_marsBanner{ height:125px; background-size:auto 110px} .bannerHome a{ height:50px} } @media only screen and (min-width:716px){ #lnk_mars.navMarsTabs_sub .submenu{ width:300px; margin-left:-215px} #lnk_multimedia.navMarsTabs_sub .submenu{ width:200px; margin-left:-95px} #lnk_news.navMarsTabs_sub .submenu{ width:130px; margin-left:-70px} #lnk_news.navMarsTabs_sub .submenu{} #lnk_news.navMarsTabs_sub:hover ul.submenu:before, #lnk_news.navMarsTabs_sub a:hover ul.submenu:before, #lnk_news.navMarsTabs_sub.hover_effect ul.submenu:before{ left:70%} #navMarsSearch{ padding-right:5px} #navMarsTabs #lnk_mars.navMarsTabs_sub a{ color:#f6bc8f} #navMarsTabs #lnk_mars.navMarsTabs_sub ul.submenu a:hover, #navMarsTabs #lnk_mars.navMarsTabs_sub a:hover{ color:gold} #navMarsTabs #lnk_mars.navMarsTabs_sub ul.submenu a{ color:#a6b7cf} #navMarsTabs #lnk_mars.navMarsTabs_sub ul.submenu li:first-child a{ color:#f4ae77} #navMarsTabs #lnk_mars.navMarsTabs_sub ul.submenu li:first-child{ margin:0 0 10px} #navMarsTabs #lnk_mars.navMarsTabs_sub ul.submenu li{ margin:0 0 0 10px} #navMarsTabs #lnk_mars.navMarsTabs_sub:before{ background:rgba(246,188,143,0.2); display:inline-block; width:1px; height:17px; content:' '; position:relative; right:7px; top:5px} #navMarsTabs #lnk_mars.navMarsTabs_sub{ width:100px} #navMarsTabs #lnk_mission.navMarsTabs_sub{ width:80px} #navMarsTabs #lnk_multimedia.navMarsTabs_sub{ width:110px} #navMarsTabs #lnk_news.navMarsTabs_sub{ width:60px} #navMarsTabs #lnk_participate.navMarsTabs_sub{ width:110px} #navMarsTabs .navMarsTabs_sub:last-child{ padding-right:15px; padding-bottom:15px;} #navMarsTabs .navMarsTabs_sub{ display:inline-block; vertical-align:top; text-align:right; height:35px} #navMarsTabs .navMarsTabs_sub{ padding-right:5px} #navMarsTabs .submenu a:hover{ color:gold; text-decoration:none} #navMarsTabs .submenu li{ padding:1px 10px} #navMarsTabs a:hover{ color:gold; text-decoration:none} #navMarsTabs{ margin-top:5px; width:auto; float:right; z-index:100} .navMarsTabs_sub .submenu{ position:relative; visibility:hidden; opacity:0; z-index:10; margin:10px 0 0; text-align:left; border-radius:5px; position:relative; margin-left:-200px; padding-bottom:10px; box-shadow:rgba(0,0,0,0.65) 2px 2px 15px; background:#003d77; background:-moz-radial-gradient(center,ellipse cover,#003d77 0%,#00305d 99%); background:-webkit-radial-gradient(center,ellipse cover,#003d77 0%,#00305d 99%); background:radial-gradient(ellipse at center,#003d77 0%,#00305d 99%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#003d77',endColorstr='#00305d',GradientType=1 )} .navMarsTabs_sub:hover ul.submenu, .navMarsTabs_sub ul.submenu:hover, .navMarsTabs_sub.hover_effect ul.submenu{ visibility:visible; opacity:1; width:280px} .navMarsTabs_sub:hover ul.submenu:before, .navMarsTabs_sub a:hover ul.submenu:before, .navMarsTabs_sub.hover_effect ul.submenu:before{ visibility:visible; opacity:1; transition:opacity 1s linear; width:0; height:0; border-style:solid; border-width:0 10px 10px 10px; border-color:transparent transparent #00305d transparent; display:block; content:""; position:relative; top:-10px; left:80%; z-index:10} } /* MEDIUM TO FIT NAV --------*/ @media only screen and (max-width:900px){ .topSubNavInnerInner h1#pageTitleText a{font-size: 110% !important} .topSubNavInnerInner #pageTitleText .breadcrumbArrow{font-size: 100%!important} .topSubNavInnerInner .subNavItem a{font-size: 90% !important} .topSubNavInnerInner .subNavItem{font-size: 13px !important; padding: 0 5px} } /* SMALL SCREEN ----------- */ @media only screen and (max-width:715px){ #top_marsBanner{ height:110px; background-size:auto 110px} .bannerHome a{ height:50px} #footer #usagov img{width:70%; height:auto} #navMarsIcons .menuButton, #navMarsSearch input{ vertical-align:top; margin-top:0} #navMarsIcons .menuButton{ visibility:visible; background-image:url('/images/general/layout/navMarsMenu.png'); background-size:cover; background-repeat:no-repeat; width:40px; height:40px; cursor:pointer; display:inline-block; content:' '} #navMarsSearch input.searchButton{ margin-top:0} #navMarsSearch{display:none} #navMarsTabs{ visibility:hidden} #navMarsTabs{ z-index:100; position:absolute; width:100%; background:#00213d} #navMarsTabs{max-height:0} #navMarsTabs a{ font-size:1.7em} #navMarsTabs.active{ visibility:visible; max-height:none; transition:max-height 1s ease-in; overflow:hidden} #navMarsTabs .navMarsTabs_sub .submenu{ max-height:0px; transition:max-height 1s ease-in; overflow:hidden} #navMarsTabs .navMarsTabs_sub a.toplevel{pointer-events:none; cursor:pointer} #navMarsTabs .navMarsTabs_sub#lnk_participate a.toplevel{pointer-events:visible} #navMarsTabs .navMarsTabs_sub:before{ height:1px; margin:0 auto; position:relative; background:url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background:-moz-linear-gradient(left,rgba(255,255,255,0) 20%,rgba(255,255,255,0.2) 25%,rgba(255,255,255,0.35) 30%,rgba(255,255,255,0.43) 40%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0.43) 60%,rgba(255,255,255,0.35) 70%,rgba(255,255,255,0.2) 75%,rgba(255,255,255,0) 80%); background:-webkit-gradient(linear,left top,right top,color-stop(20%,rgba(255,255,255,0)),color-stop(25%,rgba(255,255,255,0.2)),color-stop(30%,rgba(255,255,255,0.35)),color-stop(40%,rgba(255,255,255,0.43)),color-stop(50%,rgba(255,255,255,0.5)),color-stop(60%,rgba(255,255,255,0.43)),color-stop(70%,rgba(255,255,255,0.35)),color-stop(75%,rgba(255,255,255,0.2)),color-stop(80%,rgba(255,255,255,0))); background:-webkit-linear-gradient(left,rgba(255,255,255,0) 20%,rgba(255,255,255,0.2) 25%,rgba(255,255,255,0.35) 30%,rgba(255,255,255,0.43) 40%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0.43) 60%,rgba(255,255,255,0.35) 70%,rgba(255,255,255,0.2) 75%,rgba(255,255,255,0) 80%); background:-o-linear-gradient(left,rgba(255,255,255,0) 20%,rgba(255,255,255,0.2) 25%,rgba(255,255,255,0.35) 30%,rgba(255,255,255,0.43) 40%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0.43) 60%,rgba(255,255,255,0.35) 70%,rgba(255,255,255,0.2) 75%,rgba(255,255,255,0) 80%); background:-ms-linear-gradient(left,rgba(255,255,255,0) 20%,rgba(255,255,255,0.2) 25%,rgba(255,255,255,0.35) 30%,rgba(255,255,255,0.43) 40%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0.43) 60%,rgba(255,255,255,0.35) 70%,rgba(255,255,255,0.2) 75%,rgba(255,255,255,0) 80%); background:linear-gradient(to right,rgba(255,255,255,0) 20%,rgba(255,255,255,0.2) 25%,rgba(255,255,255,0.35) 30%,rgba(255,255,255,0.43) 40%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0.43) 60%,rgba(255,255,255,0.35) 70%,rgba(255,255,255,0.2) 75%,rgba(255,255,255,0) 80%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799',endColorstr='#001e5799',GradientType=1 ); display:block; content:' '; width:100%; bottom:-33px} #navMarsTabs .navMarsTabs_sub:before{ z-index:-1} #navMarsTabs .navMarsTabs_sub:last-child:before, #navMarsTabs .submenu li:last-child:before{ visibility:hidden} #navMarsTabs .navMarsTabs_sub:last-child{padding-bottom:100px} #navMarsTabs .navMarsTabs_sub{ display:block; width:100% !important; text-align:center; padding:0} #navMarsTabs .navMarsTabs_sub{ height:35px; max-height:35px; transition:max-height 1s ease-in} #navMarsTabs .submenu li:before{ z-index:1; bottom:-28px} #navMarsTabs .submenu li:last-child:after{visibility:hidden} #navMarsTabs .navMarsTabs_sub.active .submenu li{ padding:10px; text-align:center} #navMarsTabs .navMarsTabs_sub.active .submenu{ max-height:none; transition:max-height 1s ease-in} #navMarsTabs .navMarsTabs_sub.active a.toplevel{color:gold} #navMarsTabs .navMarsTabs_sub.active#lnk_participate{ height:35px} #navMarsTabs .navMarsTabs_sub.active{ height:auto; max-height:100vh; transition:max-height 1s ease-in} #navMarsTabs .navMarsTabs_sub.active ul.submenu{ visibility:visible; display:block; opacity:1; background:#193750; box-shadow:none; position:relative; margin:0} #top_marsBanner.menuactive #navMars{width:100%} #top_marsBanner.menuactive #navMarsSearch input.searchBox{display:inline-block; width:75%; width:calc(100% - 75px); height:30px; top:0} #top_marsBanner.menuactive #navMarsSearch{display:inline-block; width:75%; width:calc(100% - 135px)} #top_marsBanner.menuactive #navMarsSearch{position:absolute; right:40px} #top_marsBanner.menuactive #topSiteNavBox{padding-top:25px; background-color:#00213d} #top_marsBanner.menuactive .bannerHome{ background-color:#00213d} #topSubNav{ margin-top:35px} .homepage section#features .slick-next, .homepage section#features .slick-prev{visibility:hidden; display:none !important} .menuactive #navMarsIcons .menuButton{ position:absolute; right:0} .topSubNavInnerInner .subNavItem{ display:none} /*s:news*/ #newsList .list_view.grid_gallery li{margin-top:50px;} #newsList .list_view.grid_gallery li .objectContainer{height:260px;} #searchNews{width:100%;margin:0} #newsList .grid_view.grid_gallery li { width: calc(98% / 2 - 10px) !important;} .view_selectors{right:2.5%;} #newsList .list_view.grid_gallery li .objectContainer, #newsList .list_view.grid_gallery li .listTextLabel{ width:100%; padding-left:0;} #newsList .list_view.grid_gallery li .objectContainer .featureImgLarge { background-size:cover;height:100%; background-position: top center !important;} #newsList .list_view.grid_gallery li, #newsList .list_view.grid_gallery li .objectContainer, #newsList .list_view.grid_gallery li .listTextLabel{ width:100% !important;} #newsList #searchNews{width:100%;margin-left:0;} #newsList .newsListOptions{padding-right:0 !important; width: 100% !important; text-align: left !important;} #newsList .view_selectors{right:0;} /*e:news*/ /*s:images*/ #imagesList #searchImages, #imagesList .list_view.grid_gallery li{width:100% !important;} #imagesList .grid_gallery .view_selectors{right:0%; max-width: 1440px;} #imagesList .grid_view.grid_gallery li { width: calc(98% / 2 - 10px) !important;} /*e:images*/ } @media only screen and (max-width:513px){ #top_marsBanner{ background-size:auto 90%; position:relative;} #top_marsBanner #topSiteNavBox{margin-top:15px;} .bannerHome a{ height:60px} #topSubNav{ margin-top:20px; z-index:1; background-color:#0b1629;} #topSubNav .subNavItem{display:none;} #topSubNav.active .subNavItem{display:block;} .section.pageIntro,.tall,.bgImageIntro,.bgImageIntro01,.minHeight500{ -webkit-background-size:contain; -moz-background-size:contain; -o-background-size:contain; background-size:contain !important; background-attachment:inherit; min-height:300px !important; background-position:center center !important} #Mars2020-Rover-Science .relatedResources ul.horizontalImages.buttonCircle.height200 li, #Mars2020-Rover-Science .relatedResources ul.horizontalImages.height200.buttonCircle li{} } @media only screen and (max-width:320px){ .topSubNavInnerInner h1#pageTitleText a{font-size:21px !important;} #navMarsTabs{ float:none} #topSubNav{ margin-top:24px} .section.pageIntro,.tall,.bgImageIntro,.bgImageIntro01,.minHeight500{ min-height:200px !important} } /*end: TOP BANNER + NAVIGATION*/ /*start: PAGE CONTENT: GENERAL*/ /*end: PAGE CONTENT: GENERAL*/ /*start: PAGE SPECIFIC*/ /*s:home*/ /*e:home*/ /*s:overview*/ @media only screen and (max-width:513px){ #Mars2020-Rover-Science .relatedResources.small ul.horizontalImages li{float:none;display:block;} } /*e:overview*/ /*s:instruments*/ /*e:instruments*/ /*end: PAGE SPECIFIC*/ /*start: FOOTER*/ /*end: FOOTER*/ /* COMMON BREAK POINTS */ /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #Images-List-Header{height:445px !important} /* #lnk_mars.navMarsTabs_sub .submenu{ width:100%} #lnk_multimedia.navMarsTabs_sub .submenu{ width:100%} #lnk_news.navMarsTabs_sub .submenu{ width:100%}*/ #top_marsBanner{height:120px !important} .section.pageIntro,.tall,.bgImageIntro,.bgImageIntro01{ -webkit-background-size:contain; -moz-background-size:contain; -o-background-size:contain; background-size:contain !important; background-attachment:inherit; min-height:inherit} } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /********** iPad 3 **********/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } /* iPhone 5 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* iPhone 6 ----------- */ @media only screen and (min-device-width: 375px) and (max-device-height: 667px) { #footer #usagov img{width:50%; height:auto} #Images-List-Header{height:250px !important} #lnk_mars.navMarsTabs_sub .submenu{ width:100%} #lnk_multimedia.navMarsTabs_sub .submenu{ width:100%} #lnk_news.navMarsTabs_sub .submenu{ width:100%} #top_marsBanner{height:120px !important} .section.pageIntro,.tall,.bgImageIntro,.bgImageIntro01{ -webkit-background-size:contain; -moz-background-size:contain; -o-background-size:contain; background-size:contain !important; background-attachment:inherit; min-height:inherit} } @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ .Featured-Rotator-Box{top:0px !important;} } @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ .Featured-Rotator-Box{top:0px !important;} } /* iPhone 6+ ----------- */ @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* Samsung Galaxy S3 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* Samsung Galaxy S4 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } /* Samsung Galaxy S5 ----------- */ @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ /* Styles */ }