/*STYLE: .section .sectionInner*/ .section { position:relative; width:100%; } .section.heightAuto { height:auto; } .minHeight { min-height:680px; } /*tall screen height / vertically centered*/ .tall { height: -moz-calc(100vh - 150px); height: -webkit-calc(100vh - 150px); height: -o-calc(100vh - 150px); height: calc(100vh - 150px);/*Updated, because of the subnavigation 92vh;*/ } .wide { width:100%; } .tall.wide .section { height:100%; max-width:none; } .tall.wide .section .sectionInner { height:100%; /*width:100%; max-width:4000px;*/ box-shadow:none; } .vCentered, .vTop, .vBottom { display: table; } .vCentered .vCenteredInner { display: table-cell; vertical-align: middle; } .vBottomInner { display: table-cell; vertical-align: bottom; } .vTopInner { display: table-cell; vertical-align: top; } /*.pageContent .section h1:first-child {}*/ /*!!removed: 12/1, this should only be shown in themeDefault.css*/ /*.pageContent .section h1 { text-align:center; color: #CC3300;*/ /*font-family: Alienleague; text-transform: lowercase; font-weight: normal;*//*text-shadow: rgb(39, 39, 39) 2px 2px 2px;*/ /*color: #ffd553;*/ /*color: #C30 !important;*//*}*/ /*REGULAR FONT h1*/ /* @media screen and (min-width : 1px) {.pageContent .section h1 {font-size:35px; letter-spacing:-0.6px;}} @media screen and (min-width : 320px) {.pageContent .section h1 {font-size:35px; letter-spacing:-0.7px;}} @media screen and (min-width : 480px){.pageContent .section h1 {font-size:35px; letter-spacing:-0.8px;}} @media screen and (min-width : 768px){.pageContent .section h1 {font-size:40px; letter-spacing:-0.9px;}} @media screen and (min-width : 1024px){.pageContent .section h1 {font-size:45px; letter-spacing:-1px;}} @media screen and (min-width : 1224px) {.pageContent .section h1 {font-size:50px; letter-spacing:-1.1px;}} @media screen and (min-width : 1824px) {.pageContent .section h1 {font-size:55px; letter-spacing:-1.2px;}} */ /* commented: 11/13/2015 @media screen and (min-width : 1px) {.pageContent .section h1 {font-size:20px; letter-spacing:-0.6px;}} @media screen and (min-width : 320px) {.pageContent .section h1 {font-size:22px; letter-spacing:-0.7px;}} @media screen and (min-width : 480px){.pageContent .section h1 {font-size:25px; letter-spacing:-0.8px;}} @media screen and (min-width : 768px){.pageContent .section h1 {font-size:30px; letter-spacing:-0.9px;}} @media screen and (min-width : 1024px){.pageContent .section h1 {font-size:35px; letter-spacing:-1px;}} @media screen and (min-width : 1224px) {.pageContent .section h1 {font-size:40px; letter-spacing:-1.1px;}} @media screen and (min-width : 1824px) {.pageContent .section h1 {font-size:45px; letter-spacing:-1.2px;}} */ /*ALIEN FONT h1*/ /*@media screen and (min-width : 1px) {.pageContent .section.pageIntro h1, .pageContent .section.relatedResources h1 {font-size:35px; letter-spacing:-0.6px;}} @media screen and (min-width : 320px) {.pageContent .section.pageIntro h1, .pageContent .section.relatedResources h1 {font-size:40px; letter-spacing:-0.7px;}} @media screen and (min-width : 480px){.pageContent .section.pageIntro h1, .pageContent .section.relatedResources h1 {font-size:45px; letter-spacing:-0.8px;}} @media screen and (min-width : 768px){.pageContent .section.pageIntro h1, .pageContent .section.relatedResources h1 {font-size:50px; letter-spacing:-0.9px;}} @media screen and (min-width : 1024px){.pageContent .section.pageIntro h1, .pageContent .section.relatedResources h1 {font-size:55px; letter-spacing:-1px;}} @media screen and (min-width : 1224px) {.pageContent .section.pageIntro h1, .pageContent .section.relatedResources h1 {font-size:60px; letter-spacing:-1.1px;}} @media screen and (min-width : 1824px) {.pageContent .section.pageIntro h1, .pageContent .section.relatedResources h1 {font-size:70px; letter-spacing:-1.2px;}} */ .sectionInner { position:relative; max-width:1440px; /*height:100%;*/ margin-left:auto; margin-right:auto; /*min-height:680px;*/ text-align:left; background-color:#ffffff; /*box-shadow: 0px -15px 50px -10px rgba(8, 32, 60, 0.8);*/ } /*need to fix, why textcontentparse is automatically adding section twice: example - news detail*/ .section .sectionInner .section .sectionInner, .sectionInner.noBoxShadow { box-shadow:none; } .section[class*=" bg"] .sectionInner, .section.relatedResources .sectionInner { background-color:transparent; } .noMinHeight { min-height:1px; } .section.boxShadow, .sectionInner.boxShadow { box-shadow: 0 0 50px rgba(8, 32, 60, 0.8); } /*table layout*/ table.tableListContent { width:85%; min-width:250px; margin:0 auto; border-collapse:collapse } @media screen and (min-width : 768px) { table.tableListContent { min-width:350px; } } table.tableListContent tr { } table.tableListContent tr td { vertical-align:top; } table.tableListContent tr td:first-child { /*width: 35%;min-width:170px;*/ font-weight:bold; color:#6d3007; text-align:left; } table.tableListContent tr td:first-child a { color:#6d3007; text-decoration:underline; } table.tableListContent tr td:first-child a:hover { color: #E04514; } table.tableListContent td { padding:0 5% 3% 0; /*border-bottom:1px solid #CCC;*/ } @-moz-document url-prefix() { table.tableListContent td { padding:0 50px 30px 0; } } table.tableListContent tr:last-child td {/*border-bottom:none;*/ } .tableListContent .smallerText { font-size:0.7em; } .tablelistContent .spanBlock { display:block; } /*STYLE: vertically center align content*/ /*VERTICAL ALIGNMENT*/ .verticalAlignTop,.vAlignTop { display:table-cell; vertical-align: top; } .verticalAlignCenter,.verticalAlignMiddle,.vAlignMiddle, .vAlignCenter { display:table-cell; vertical-align: middle; } .verticalAlignBottom,.vAlignBottom { display:table-cell; vertical-align: bottom; } .sectionInner.verticalAlignMiddle { display:table; width:100%; } .sectionInner.verticalAlignMiddle .grid { display:table-cell; vertical-align: middle; } /*STYLE: VERTICAL ALIGNMENT surround div with both below for left/right text [[image]]*/ .verticalAlignMiddleText { vertical-align: middle; height: 100%; display: inline-block; width: 60%; width: -moz-calc(100% - 560px); width: -webkit-calc(100% - 560px); width: -o-calc(100% - 560px); width: calc(100% - 560px); } .verticalAlignMiddleImage { vertical-align: middle; display: inline-block; width: 550px; } .verticalAlignTopText { vertical-align: top; height: 100%; display: inline-block; width: 60%; width: -moz-calc(100% - 560px); width: -webkit-calc(100% - 560px); width: -o-calc(100% - 560px); width: calc(100% - 560px); } .verticalAlignTopImage { vertical-align: top; display: inline-block; width: 550px; } .verticalAlignBottomText { vertical-align: bottom; height: 100%; display: inline-block; width: 60%; width: -moz-calc(100% - 560px); width: -webkit-calc(100% - 560px); width: -o-calc(100% - 560px); width: calc(100% - 560px); } .verticalAlignBottomImage { vertical-align: bottom; display: inline-block; width: 550px; } @media only screen and (max-width: 950px) { .verticalAlignMiddleText, .verticalAlignMiddleImage, .verticalAlignTopText, .verticalAlignTopImage, .verticalAlignBottomText, .verticalAlignBottomImage { width:100%; display:block; } } /*END vertically center align content*/ .textAlignCenter { text-align:center;} /*STYLE: Arrows Next/Previous Page */ .arrowNextSection, .arrowPrevSection { width: 100%; height: 30px; text-align: center; clear: both; position:absolute; display:block; bottom: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; cursor:pointer; z-index:1; left:0; }/*original opacity is 0.8*/ .arrowNextSection:hover, .arrowPrevSection:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=0.5); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .arrowNextSection img, .arrowPrevSection img { background-image: url('https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/layout/slider-home-rotator/slider-layout.png'); background-repeat: no-repeat; width:50px; height:25px; } /*.arrowPrevSection { bottom: 0;}*/ .arrowNextSection img { background-position: 0px -20px; } /*.arrowPrevSection { top: 0;}*/ .arrowPrevSection img { background-position: 0px 10px; } a.arrowPrevSection.scrollToTop { height:55px; } a.arrowPrevSection.scrollToTop:before { content: 'TOP'; width: 50px; height: 25px; position: absolute; top: 25px; font-size: small; color: #FFDA9E; } /*.sectionInner a.arrowNextSection, .sectionInner a.arrowPrevSection{ position: absolute; left: 47%; left: -moz-calc(50% - 25px);left: -webkit-calc(50% - 25px);left: -o-calc(50% - 25px);left: calc(50% - 25px); opacity:0;}*/ /*.sectionInner a.arrowNextSection, .sectionInner a.arrowPrevSection{ position: absolute; left: 47%; left: -moz-calc(50% - 25px);left: -webkit-calc(50% - 25px);left: -o-calc(50% - 25px);left: calc(50% - 25px); opacity:0;} .sectionInner a.arrowNextSection img,.sectionInner a.arrowPrevSection img{ width:50px;height:25px; } .sectionInner a.arrowPrevSection.scrollToTop:before {content: 'TOP'; width: 50px; height: 25px; position: absolute; top: 15px; color: orange; font-size: small;}*/ /*END: Arrows Next/Previous Page */ .widthImageParallax {/*width:1920px !important;*/ max-width: 1920px !important; } .minHeight50 { min-height:50px !important; } .minHeight100 { min-height:100px !important; } .minHeight150 { min-height:150px !important; } .minHeight200 { min-height:200px !important; } .minHeight300 { min-height:300px !important; } .minHeight500 { min-height:500px !important; } .minHeight700 { min-height:768px !important; } .minHeight1200 { min-height:1200px !important; } .sectionInner.padded { /*padding-left:20px; padding-right:20px;*/ /*padding-left:4%; padding-right:4%;*/ /* padding:20px 10%;*/ padding:20px 10%; box-sizing: border-box; } .section.padded { /*padding:20px;*/ padding:20px 10%; box-sizing: border-box; } .section.paddedSmall { /*padding:20px;*/ padding:20px 20px; box-sizing: border-box; } .section.relatedResources.padded { padding:20px 20px; } .section.pageIntro.padded, .section.pageIntro .sectionInner.padded { /*padding:20px 20%;*/ } .sectionInner.paddedLeft { padding-left:20px; box-sizing: border-box; } .sectionInner.paddedRight { padding-right:20px; box-sizing: border-box; } .section .sectionInner #contentImageCentered, .section .sectionInner .newsLatestImage, .section .sectionInner .galleryImageCentered img { margin-left: 0% !important; margin-right: 0% !important; margin-top: 0px; width: 100% !important; } .section .sectionInner .galleryImageCentered .outer-deepZoomContainer img { width:auto !important; } .absolute { position:absolute; } .valignBottom { position:relative; bottom:0; } /*STYLE: page other styles*/ .shadow { -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75); box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75); } .shadowInset { -moz-box-shadow: inset 0 0 5px #000000; -webkit-box-shadow: inset 0 0 5px #000000; box-shadow: inset 0 0 5px #000000; } .border { border: 1px solid #b1b4b8; } .imageBorder { background-image:url('https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/layout/borderBrushMetal.jpg'); padding:3px; background-size:cover; } img.imageBorder/*, .imageBorder img*/ { width: 100%; width: -moz-calc(100% - 6px); width: -webkit-calc(100% - 6px); width: -o-calc(100% - 6px); width: calc(100% - 6px); } /*selection indication effects*/ .textOnFire, .textOnFire h3 {color:white;} .textOnFire .active h3, .textOnFire h3:hover {color:white; text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;} /*BUTTON: SQUARE BORDER-BUTTON*/ .imageBorder200x150 { background-image:url('https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/layout/border-200x150.png'); /*padding:18px;*/ padding:14px; /*background-size:contain;*/ background-size:100% 100%; background-repeat:no-repeat; } .imageBorder200x150:hover { background-image:url('https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/layout/border-200x150-on2.png'); } img.imageBorder200x150, .imageBorder200x150 img {/*width: 100%; width: -moz-calc(100% - 36px);width: -webkit-calc(100% - 36px);width: -o-calc(100% - 36px);width: calc(100% - 36px);*/ /*width: 100%;*/ width: -moz-calc(100% - 28px); width: -webkit-calc(100% - 28px); width: -o-calc(100% - 28px); width: calc(100% - 28px); } /*BUTTON: FONT*/ .grid.buttonAlt03 .rowItem { line-height:normal; font-weight:normal; } .grid.buttonAlt03 .rowItem h3 { font-family: Alienleague; font-weight: normal; text-transform: lowercase; letter-spacing: -1.2px; } .themeDark .grid.buttonAlt03 .rowItem h3 { color:white; } @media screen and (min-width : 1px) { .grid.buttonAlt03 .rowItem h3 { font-size:16px } } @media screen and (min-width : 320px) { .grid.buttonAlt03 .rowItem h3 { font-size:18px } } @media screen and (min-width : 480px) { .grid.buttonAlt03 .rowItem h3 { font-size:20px } } @media screen and (min-width : 768px) { .grid.buttonAlt03 .rowItem h3 { font-size:22px } } @media screen and (min-width : 1024px) { .grid.buttonAlt03 .rowItem h3 { font-size:25px } } @media screen and (min-width : 1224px) { .grid.buttonAlt03 .rowItem h3 { font-size:28px } } @media screen and (min-width : 1824px) { .grid.buttonAlt03 .rowItem h3 { font-size:34px } } /*END BUTTON: FONT*/ /*!!!!! Grid Row/Columns !!!!!*/ .grid .rowItem { display:inline-block; text-align:left; margin-top:20px; } .grid .rowItem img { width: 100%; } /* 2 Columns */ /*NOTE: this calculation needs to be balanced. if you make margin changes, make sure it adds up to 98-99%*/ .grid .rowItem:nth-of-type(1):nth-last-of-type(2) {/*width:47%; margin-right:2%;*/ /*width:42%; margin-right:4%;*/ width:42%; margin:0 4%; } .grid .rowItem:nth-of-type(2):nth-last-of-type(1) {/*width:47%; margin-left:2%;*/ /*width:42%; margin-left:4%;*/ width:42%; margin:0 3%; } @media screen and (min-width : 1px) { .grid.custom1 .rowItem:nth-of-type(1):nth-last-of-type(2) { width:100%; margin-right:0%; display:block; } .grid.custom1 .rowItem:nth-of-type(2):nth-last-of-type(1) { width:100%; margin-left:0%; display:block; } } @media screen and (min-width : 1024px) { .grid.custom1 .rowItem:nth-of-type(1):nth-last-of-type(2) { width:42% !important; margin-right:0% !important; display:inline-block !important; } .grid.custom1 .rowItem:nth-of-type(2):nth-last-of-type(1) { width:53% !important; margin-left:0% !important; display:inline-block !important; } } @media screen and (min-width : 1px) { .grid.custom1, .pageContent .section .grid.custom1 h2 { font-size:11px; line-height:15px; } } @media screen and (min-width : 320px) { .grid.custom1, .pageContent .section .grid.custom1 h2 { font-size:12px; line-height:15px; } } @media screen and (min-width : 480px) { .grid.custom1, .pageContent .section .grid.custom1 h2 { font-size:13px; line-height:17px; } } @media screen and (min-width : 768px) { .grid.custom1, .pageContent .section .grid.custom1 h2 { font-size:14px; line-height:18px; } } @media screen and (min-width : 1024px) { .grid.custom1, .pageContent .section .grid.custom1 h2 { font-size:17px; line-height:21px; } } @media screen and (min-width : 1224px) { .grid.custom1, .pageContent .section .grid.custom1 h2 { font-size:18px; line-height:22px; } } @media screen and (min-width : 1824px) { .grid.custom1, .pageContent .section .grid.custom1 h2 { font-size:20px; line-height:24px; } } /* 3 Columns */ .grid .rowItem:nth-of-type(1):nth-last-of-type(3) { width:28%; margin-left:1.5%;/*width:26%;margin-left:0;*/ } .grid .rowItem:nth-of-type(2):nth-last-of-type(3), .grid .rowItem:nth-of-type(2):nth-last-of-type(2), .grid .rowItem:nth-of-type(3):nth-last-of-type(1), .grid .rowItem:nth-of-type(3):nth-last-of-type(3) { width:28%; margin-left:6%;/*width:26%; margin-left:7%;*/ } /* 4 Columns */ .grid .rowItem:nth-of-type(1):nth-last-of-type(4) {/*width:24%;margin-left:0;*/ /*width:20%;*/ width:18.5%; margin-left:0; } .grid .rowItem:nth-of-type(2):nth-last-of-type(3), .grid .rowItem:nth-of-type(3):nth-last-of-type(2), .grid .rowItem:nth-of-type(4):nth-last-of-type(1) {/*width:22.5%; margin-left:2%;*/ width:18.5%; margin-left:6%; } /* 5 Columns */ .grid .rowItem:nth-of-type(1):nth-last-of-type(5) {/*width:18%;margin-left:0;*/ width:15%; margin-left:0; } .grid .rowItem:nth-of-type(2):nth-last-of-type(4), .grid .rowItem:nth-of-type(3):nth-last-of-type(3), .grid .rowItem:nth-of-type(4):nth-last-of-type(2), .grid .rowItem:nth-of-type(5):nth-last-of-type(1) {/*width:18%; margin-left:2%;*/ width:15%; margin-left:5%; } /* 6 Columns */ .grid .rowItem:nth-of-type(1):nth-last-of-type(6) {/*width:14.6%;margin-left:0;*/ width:12.6%; margin-left:0; } .grid .rowItem:nth-of-type(2):nth-last-of-type(5), .grid .rowItem:nth-of-type(3):nth-last-of-type(4), .grid .rowItem:nth-of-type(4):nth-last-of-type(3), .grid .rowItem:nth-of-type(5):nth-last-of-type(2), .grid .rowItem:nth-of-type(6):nth-last-of-type(1) {/*width:14.6%; margin-left:2%;*/ width:12.6%; margin-left:4%; } /* 7 Columns (Special, 2 rows 4 & 3 columns*/ .grid .rowItem:nth-of-type(1):nth-last-of-type(7), .grid .rowItem:nth-of-type(5):nth-last-of-type(3) { width:24%; margin-left:0 } .grid .rowItem:nth-of-type(2):nth-last-of-type(6), .grid .rowItem:nth-of-type(3):nth-last-of-type(5), .grid .rowItem:nth-of-type(4):nth-last-of-type(4), .grid .rowItem:nth-of-type(6):nth-last-of-type(2), .grid .rowItem:nth-of-type(7):nth-last-of-type(1) { width:22.5%; margin-left:2%; } .grid .rowItem:nth-of-type(5):nth-last-of-type(3), .grid .rowItem:nth-of-type(6):nth-last-of-type(2), .grid .rowItem:nth-of-type(7):nth-last-of-type(1) { margin-top:3em; } /* SPECIAL: 2/3rd 1/3rd Columns */ .grid .large.rowItem:nth-of-type(1):nth-last-of-type(2) { width:62%; margin:0 2% 0 0; } .grid .xlarge.rowItem:nth-of-type(1):nth-last-of-type(2) { width:72%; margin:0 2% 0 0; } .grid .small.rowItem:nth-of-type(2):nth-last-of-type(1) { width:31%; margin:0 0 0 2%; } .grid .xsmall.rowItem:nth-of-type(2):nth-last-of-type(1) { width:21%; margin:0 0 0 2%; } .grid .small.rowItem:nth-of-type(1):nth-last-of-type(2) { width:31%; margin:0 2% 0 0; } .grid .xsmall.rowItem:nth-of-type(1):nth-last-of-type(2) { width:21%; margin:0 2% 0 0; } .grid .large.rowItem:nth-of-type(2):nth-last-of-type(1) { width:62%; margin:0 0 0 2%; } .grid .xlarge.rowItem:nth-of-type(2):nth-last-of-type(1) { width:72%; margin:0 0 0 2%; } @media only screen and (max-width:799px) { .grid .rowItem { display:block !important; width:100% !important; margin-left:0 !important; } .grid .rowItem:nth-of-type(5):nth-last-of-type(3), .grid .rowItem:nth-of-type(6):nth-last-of-type(2), .grid .rowItem:nth-of-type(7):nth-last-of-type(1) { margin-top:0; } } /*SPECIAL GRID SHAPES*/ .grid.parallelogram .rowItem{-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); margin-top:0;} .grid.parallelogram .rowItem:first-child{-webkit-clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);} .grid.parallelogram .rowItem:last-child{-webkit-clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);} #Mission-Timeline-Intro .grid.parallelogram .rowItem .titleLabel{ padding-top:0px !important;} @media only screen and (min-width:800px) { .grid.parallelogram .rowItem .titleLabel{ font-size:2vw; font-weight:bold; font-style:italic; width: 75%;} .grid.parallelogram .rowItem:last-child .titleLabel{ width: 100%;} .grid.parallelogram .rowItem .titleLabel.above{ padding-left: 25% !important; padding-bottom: 0 !important; } } /* 2 Columns */ /* 3 Columns */ /* 4 Columns */ .grid.parallelogram .rowItem:nth-of-type(1):nth-last-of-type(4){width: 29.5%; margin-left:0;} .grid.parallelogram .rowItem:nth-of-type(2):nth-last-of-type(3), .grid.parallelogram .rowItem:nth-of-type(3):nth-last-of-type(2), .grid.parallelogram .rowItem:nth-of-type(4):nth-last-of-type(1){width: 29.5%; margin-left: -6%;} /*ie exception (webkit doesn't work)*/ /* .gecko .grid.parallelogram .rowItem:nth-of-type(1):nth-last-of-type(4), .gecko .grid.parallelogram .rowItem:nth-of-type(2):nth-last-of-type(3), .gecko .grid.parallelogram .rowItem:nth-of-type(3):nth-last-of-type(2), .gecko .grid.parallelogram .rowItem:nth-of-type(4):nth-last-of-type(1),*/.ie .grid.parallelogram .rowItem:nth-of-type(1):nth-last-of-type(4), .ie .grid.parallelogram .rowItem:nth-of-type(2):nth-last-of-type(3), .ie .grid.parallelogram .rowItem:nth-of-type(3):nth-last-of-type(2), .ie .grid.parallelogram .rowItem:nth-of-type(4):nth-last-of-type(1){width: 23%; margin-left:1.6%; margin-top:1.6%;} /* .gecko .grid.parallelogram .rowItem .titleLabel,*/.ie .grid.parallelogram .rowItem .titleLabel{width:100%;} /*Safari exception*/ .safari .grid.parallelogram .rowItem{min-height:380px;} .safari .grid.parallelogram .rowItem:nth-of-type(1):nth-last-of-type(4){width: 29.499%;} /* 5 Columns */ /* 6 Columns */ @media only screen and (max-width:600px) {/*mobile*/ .grid.parallelogram .rowItem:first-child, .grid.parallelogram .rowItem:last-child, .grid.parallelogram .rowItem{-webkit-clip-path: none;clip-path: none;} .gecko .grid.parallelogram .rowItem .titleLabel,.ie .grid.parallelogram .rowItem .titleLabel{ font-size:45px; width:100%;} } /*GRID: Image buttons*/ /* CIRCLES: */ /*Size doesn't matter*/ .grid .rowItem.imgButton,.grid .rowItem.imgButton:hover, .grid .rowItem.imgButton img { display:inline-block !important; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }/*OVERRIDE MOBILE VER*/ /*Begin-- Circle Styles*/ /*Regular Circle*/ .grid .rowItem.imgButton .buttonCircle { background: url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/button-circle.png) no-repeat; background-size: contain; width: 100%; height: 100%; overflow: hidden; position: relative; } .grid .rowItem.imgButton:hover .buttonCircle, .grid .rowItem.imgButton.active .buttonCircle { background: url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/button-circle-on.png) no-repeat; background-size: contain; } .grid .rowItem.imgButton .buttonCircle img { position: absolute; top: 10%; left: 10%; border-radius: 50%; border: 0px; height: 80%; width: 80%; } /*Martian Circle*/ .grid .rowItem.imgButton .buttonCircleMartian { background: url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/blue-styled-martian-circle.png) no-repeat; background-size: contain; width: 100%; height: 100%; overflow: hidden; position: relative; } .grid .rowItem.imgButton:hover .buttonCircleMartian, .grid .rowItem.imgButton.active .buttonCircleMartian { background: url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/blue-styled-martian-circle-on.png) no-repeat; background-size: contain; } .grid .rowItem.imgButton .buttonCircleMartian img { position: absolute; top: 12.5%; left: 12.5%; border-radius: 50%; border: 0px; height: 75%; width: 75%; } .grid .rowItem.imgButton:nth-child(1) .buttonCircleMartian { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); } .grid .rowItem.imgButton:nth-child(2) .buttonCircleMartian { -webkit-transform:rotate(120deg); -moz-transform:rotate(120deg); } .grid .rowItem.imgButton:nth-child(3) .buttonCircleMartian { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); } .grid .rowItem.imgButton:nth-child(4) .buttonCircleMartian { -webkit-transform:rotate(240deg); -moz-transform:rotate(240deg); } .grid .rowItem.imgButton:nth-child(5) .buttonCircleMartian { -webkit-transform:rotate(300deg); -moz-transform:rotate(300deg); } .grid .rowItem.imgButton:nth-child(1) .buttonCircleMartian img { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); } .grid .rowItem.imgButton:nth-child(2) .buttonCircleMartian img { -webkit-transform:rotate(-120deg); -moz-transform:rotate(-120deg); } .grid .rowItem.imgButton:nth-child(3) .buttonCircleMartian img { -webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); } .grid .rowItem.imgButton:nth-child(4) .buttonCircleMartian img { -webkit-transform:rotate(-240deg); -moz-transform:rotate(-240deg); } .grid .rowItem.imgButton:nth-child(5) .buttonCircleMartian img { -webkit-transform:rotate(-300deg); -moz-transform:rotate(-300deg); } /*--End Circle Styles*/ .grid .rowItem.imgButton:hover, .grid .rowItem.imgButton:hover a, .grid .rowItem.imgButton.active, .grid .rowItem.imgButton.active h3, .grid .rowItem.imgButton:hover h3 { color:#FFD553 !important; } /*Font style*/ .grid .rowItem.imgButton.alt01 { font-family:Roboto, Helvetica, Arial; } .grid .rowItem.imgButton.alt02 { font-family:Ubuntu, Helvetica, Arial; } .grid .rowItem.imgButton.alt03 { font-family:Alienleague, Helvetica, Arial; } /* BUTTON: fadeInOut Active/Inactive styling */ .grid.fadeInOut .rowItem.imgButton img { opacity: 0.5; } .grid.fadeInOut .rowItem.imgButton:hover img, .grid.fadeInOut .rowItem.imgButton.active img { opacity: 1; } /* BUTTON: GRAYSCALE Active/Inactive styling */ .grid.grayScale .rowItem.imgButton { filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); opacity: 0.8; } .grid.grayScale .rowItem.imgButton:hover, .grid.grayScale .rowItem.imgButton.active { filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); -ms-filter: grayscale(0); opacity: 1; } .grid.grayScale .rowItem.imgButton:hover { transform: scale(1.1); } /*BUTTON: decorative textual button: -- used on "top science findings" pages and for instument menues*/ .buttonDecorative { background: url("https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/layout/border-white-375x150.png") no-repeat; background-size: 100% 100%; width: 200px; height: 50px; /*overflow: hidden;*/ position: relative; } .buttonDecorative.round { background-image: url("https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/button-circle.png"); background-repeat:no-repeat; background-size:contain; width: 200px; height: 200px; } .dimmed .buttonDecorative { opacity: 0.8; } .dimmed .buttonDecorative:hover, .dimmed .buttonDecorative.active { opacity: 1; } .grayScale .buttonDecorative { filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); } .grayScale .buttonDecorative:hover, .grayScale .buttonDecorative.active { filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); -ms-filter: grayscale(0); } .buttonDecorative, .buttonDecorative:hover, .buttonDecorative img { display:inline-block !important; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .buttonDecorative:hover {transform: scale(1.1);} .buttonDecorative:hover, .buttonDecorative.active { background-image: url("https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/layout/border-white-375x150.png");background-repeat: no-repeat; background-size: 100% 100%; width: 200px; height: 50px; /*overflow: hidden;*/ position: relative; } .buttonDecorative.round:hover {transform: scale(1.1);} .buttonDecorative.round:hover, .buttonDecorative.round.active { background-image: url("https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/button-circle-on.png");background-repeat: no-repeat; background-size: 100% 100%; width: 200px; height: 200px; position: relative; } .buttonDecorative .btnText { position: absolute; top: 10%; left: 5%; border-radius: 50%; border: 0px; height: 80%; width: 90%; background-color: #056CB4; border-radius: 1px; border: solid 1px #056CB4; color: white !important; text-decoration: none; font-weight: normal; line-height: 40px; padding: 0px 20px 0px 20px; box-sizing:border-box; } .buttonDecorative.round .btnText { position: absolute; top: 10%; left: 10%; border-radius: 50%; border: 0px; height: 80%; width: 80%; padding-top:25%;} .buttonDecorative .btnText:hover { background-color: #072F81; border: solid 1px #072F81; color:white !important;} /*SIZE MATTERS!!!*/ /*Size: 250 */ /*of 2*/.grid .rowItem.imgButton.height250:nth-of-type(1):nth-last-of-type(2), .grid .rowItem.imgButton.height250:nth-of-type(2):nth-last-of-type(1), /*of 3*/ .grid .rowItem.imgButton.height250:nth-of-type(1):nth-last-of-type(3), .grid .rowItem.imgButton.height250:nth-of-type(2):nth-last-of-type(2), .grid .rowItem.imgButton.height250:nth-of-type(3):nth-last-of-type(1), /*of 4*/ .grid .rowItem.imgButton.height250:nth-of-type(1):nth-last-of-type(4), .grid .rowItem.imgButton.height250:nth-of-type(2):nth-last-of-type(3), .grid .rowItem.imgButton.height250:nth-of-type(3):nth-last-of-type(2), .grid .rowItem.imgButton.height250:nth-of-type(4):nth-last-of-type(1), /*of 5*/ .grid .rowItem.imgButton.height250:nth-of-type(1):nth-last-of-type(5), .grid .rowItem.imgButton.height250:nth-of-type(2):nth-last-of-type(4), .grid .rowItem.imgButton.height250:nth-of-type(3):nth-last-of-type(3), .grid .rowItem.imgButton.height250:nth-of-type(4):nth-last-of-type(2), .grid .rowItem.imgButton.height250:nth-of-type(5):nth-last-of-type(1), /*of 6*/ .grid .rowItem.imgButton.height250:nth-of-type(1):nth-last-of-type(6), .grid .rowItem.imgButton.height250:nth-of-type(2):nth-last-of-type(5), .grid .rowItem.imgButton.height250:nth-of-type(3):nth-last-of-type(4), .grid .rowItem.imgButton.height250:nth-of-type(4):nth-last-of-type(3), .grid .rowItem.imgButton.height250:nth-of-type(5):nth-last-of-type(2), .grid .rowItem.imgButton.height250:nth-of-type(6):nth-last-of-type(1), /*of 7*/ .grid .rowItem.imgButton.height250:nth-of-type(1):nth-last-of-type(7), .grid .rowItem.imgButton.height250:nth-of-type(2):nth-last-of-type(6), .grid .rowItem.imgButton.height250:nth-of-type(3):nth-last-of-type(5), .grid .rowItem.imgButton.height250:nth-of-type(4):nth-last-of-type(4), .grid .rowItem.imgButton.height250:nth-of-type(5):nth-last-of-type(3), .grid .rowItem.imgButton.height250:nth-of-type(6):nth-last-of-type(2), .grid .rowItem.imgButton.height250:nth-of-type(7):nth-last-of-type(1) { width:250px !important; height:250px; margin:0; } /*Size: 200 */ /*of 2*/.grid .rowItem.imgButton.height200:nth-of-type(1):nth-last-of-type(2), .grid .rowItem.imgButton.height200:nth-of-type(2):nth-last-of-type(1), /*of 3*/ .grid .rowItem.imgButton.height200:nth-of-type(1):nth-last-of-type(3), .grid .rowItem.imgButton.height200:nth-of-type(2):nth-last-of-type(2), .grid .rowItem.imgButton.height200:nth-of-type(3):nth-last-of-type(1), /*of 4*/ .grid .rowItem.imgButton.height200:nth-of-type(1):nth-last-of-type(4), .grid .rowItem.imgButton.height200:nth-of-type(2):nth-last-of-type(3), .grid .rowItem.imgButton.height200:nth-of-type(3):nth-last-of-type(2), .grid .rowItem.imgButton.height200:nth-of-type(4):nth-last-of-type(1), /*of 5*/ .grid .rowItem.imgButton.height200:nth-of-type(1):nth-last-of-type(5), .grid .rowItem.imgButton.height200:nth-of-type(2):nth-last-of-type(4), .grid .rowItem.imgButton.height200:nth-of-type(3):nth-last-of-type(3), .grid .rowItem.imgButton.height200:nth-of-type(4):nth-last-of-type(2), .grid .rowItem.imgButton.height200:nth-of-type(5):nth-last-of-type(1), /*of 6*/ .grid .rowItem.imgButton.height200:nth-of-type(1):nth-last-of-type(6), .grid .rowItem.imgButton.height200:nth-of-type(2):nth-last-of-type(5), .grid .rowItem.imgButton.height200:nth-of-type(3):nth-last-of-type(4), .grid .rowItem.imgButton.height200:nth-of-type(4):nth-last-of-type(3), .grid .rowItem.imgButton.height200:nth-of-type(5):nth-last-of-type(2), .grid .rowItem.imgButton.height200:nth-of-type(6):nth-last-of-type(1), /*of 7*/ .grid .rowItem.imgButton.height200:nth-of-type(1):nth-last-of-type(7), .grid .rowItem.imgButton.height200:nth-of-type(2):nth-last-of-type(6), .grid .rowItem.imgButton.height200:nth-of-type(3):nth-last-of-type(5), .grid .rowItem.imgButton.height200:nth-of-type(4):nth-last-of-type(4), .grid .rowItem.imgButton.height200:nth-of-type(5):nth-last-of-type(3), .grid .rowItem.imgButton.height200:nth-of-type(6):nth-last-of-type(2), .grid .rowItem.imgButton.height200:nth-of-type(7):nth-last-of-type(1) { width:200px !important; height:200px; padding:0 2% 7%; margin:0; } /*Size: 175 */ /*of 2*/.grid .rowItem.imgButton.height175:nth-of-type(1):nth-last-of-type(2), .grid .rowItem.imgButton.height175:nth-of-type(2):nth-last-of-type(1), /*of 3*/ .grid .rowItem.imgButton.height175:nth-of-type(1):nth-last-of-type(3), .grid .rowItem.imgButton.height175:nth-of-type(2):nth-last-of-type(2), .grid .rowItem.imgButton.height175:nth-of-type(3):nth-last-of-type(1), /*of 4*/ .grid .rowItem.imgButton.height175:nth-of-type(1):nth-last-of-type(4), .grid .rowItem.imgButton.height175:nth-of-type(2):nth-last-of-type(3), .grid .rowItem.imgButton.height175:nth-of-type(3):nth-last-of-type(2), .grid .rowItem.imgButton.height175:nth-of-type(4):nth-last-of-type(1), /*of 5*/ .grid .rowItem.imgButton.height175:nth-of-type(1):nth-last-of-type(5), .grid .rowItem.imgButton.height175:nth-of-type(2):nth-last-of-type(4), .grid .rowItem.imgButton.height175:nth-of-type(3):nth-last-of-type(3), .grid .rowItem.imgButton.height175:nth-of-type(4):nth-last-of-type(2), .grid .rowItem.imgButton.height175:nth-of-type(5):nth-last-of-type(1), /*of 6*/ .grid .rowItem.imgButton.height175:nth-of-type(1):nth-last-of-type(6), .grid .rowItem.imgButton.height175:nth-of-type(2):nth-last-of-type(5), .grid .rowItem.imgButton.height175:nth-of-type(3):nth-last-of-type(4), .grid .rowItem.imgButton.height175:nth-of-type(4):nth-last-of-type(3), .grid .rowItem.imgButton.height175:nth-of-type(5):nth-last-of-type(2), .grid .rowItem.imgButton.height175:nth-of-type(6):nth-last-of-type(1), /*of 7*/ .grid .rowItem.imgButton.height175:nth-of-type(1):nth-last-of-type(7), .grid .rowItem.imgButton.height175:nth-of-type(2):nth-last-of-type(6), .grid .rowItem.imgButton.height175:nth-of-type(3):nth-last-of-type(5), .grid .rowItem.imgButton.height175:nth-of-type(4):nth-last-of-type(4), .grid .rowItem.imgButton.height175:nth-of-type(5):nth-last-of-type(3), .grid .rowItem.imgButton.height175:nth-of-type(6):nth-last-of-type(2), .grid .rowItem.imgButton.height175:nth-of-type(7):nth-last-of-type(1) { width:175px !important; height:175px; padding:0 2% 7%; margin:0; } /*Size: 150 */ /*of 2*/.grid .rowItem.imgButton.height150:nth-of-type(1):nth-last-of-type(2), .grid .rowItem.imgButton.height150:nth-of-type(2):nth-last-of-type(1), /*of 3*/ .grid .rowItem.imgButton.height150:nth-of-type(1):nth-last-of-type(3), .grid .rowItem.imgButton.height150:nth-of-type(2):nth-last-of-type(2), .grid .rowItem.imgButton.height150:nth-of-type(3):nth-last-of-type(1), /*of 4*/ .grid .rowItem.imgButton.height150:nth-of-type(1):nth-last-of-type(4), .grid .rowItem.imgButton.height150:nth-of-type(2):nth-last-of-type(3), .grid .rowItem.imgButton.height150:nth-of-type(3):nth-last-of-type(2), .grid .rowItem.imgButton.height150:nth-of-type(4):nth-last-of-type(1), /*of 5*/ .grid .rowItem.imgButton.height150:nth-of-type(1):nth-last-of-type(5), .grid .rowItem.imgButton.height150:nth-of-type(2):nth-last-of-type(4), .grid .rowItem.imgButton.height150:nth-of-type(3):nth-last-of-type(3), .grid .rowItem.imgButton.height150:nth-of-type(4):nth-last-of-type(2), .grid .rowItem.imgButton.height150:nth-of-type(5):nth-last-of-type(1), /*of 6*/ .grid .rowItem.imgButton.height150:nth-of-type(1):nth-last-of-type(6), .grid .rowItem.imgButton.height150:nth-of-type(2):nth-last-of-type(5), .grid .rowItem.imgButton.height150:nth-of-type(3):nth-last-of-type(4), .grid .rowItem.imgButton.height150:nth-of-type(4):nth-last-of-type(3), .grid .rowItem.imgButton.height150:nth-of-type(5):nth-last-of-type(2), .grid .rowItem.imgButton.height150:nth-of-type(6):nth-last-of-type(1), /*of 7*/ .grid .rowItem.imgButton.height150:nth-of-type(1):nth-last-of-type(7), .grid .rowItem.imgButton.height150:nth-of-type(2):nth-last-of-type(6), .grid .rowItem.imgButton.height150:nth-of-type(3):nth-last-of-type(5), .grid .rowItem.imgButton.height150:nth-of-type(4):nth-last-of-type(4), .grid .rowItem.imgButton.height150:nth-of-type(5):nth-last-of-type(3), .grid .rowItem.imgButton.height150:nth-of-type(6):nth-last-of-type(2), .grid .rowItem.imgButton.height150:nth-of-type(7):nth-last-of-type(1) { width:150px !important; height:150px; padding:0 2% 7%; font-size:0.9em; line-height:normal; } /*Size: 100 */ /*of 2*/.grid .rowItem.imgButton.height100:nth-of-type(1):nth-last-of-type(2), .grid .rowItem.imgButton.height100:nth-of-type(2):nth-last-of-type(1), /*of 3*/ .grid .rowItem.imgButton.height100:nth-of-type(1):nth-last-of-type(3), .grid .rowItem.imgButton.height100:nth-of-type(2):nth-last-of-type(2), .grid .rowItem.imgButton.height100:nth-of-type(3):nth-last-of-type(1), /*of 4*/ .grid .rowItem.imgButton.height100:nth-of-type(1):nth-last-of-type(4), .grid .rowItem.imgButton.height100:nth-of-type(2):nth-last-of-type(3), .grid .rowItem.imgButton.height100:nth-of-type(3):nth-last-of-type(2), .grid .rowItem.imgButton.height100:nth-of-type(4):nth-last-of-type(1), /*of 5*/ .grid .rowItem.imgButton.height100:nth-of-type(1):nth-last-of-type(5), .grid .rowItem.imgButton.height100:nth-of-type(2):nth-last-of-type(4), .grid .rowItem.imgButton.height100:nth-of-type(3):nth-last-of-type(3), .grid .rowItem.imgButton.height100:nth-of-type(4):nth-last-of-type(2), .grid .rowItem.imgButton.height100:nth-of-type(5):nth-last-of-type(1), /*of 6*/ .grid .rowItem.imgButton.height100:nth-of-type(1):nth-last-of-type(6), .grid .rowItem.imgButton.height100:nth-of-type(2):nth-last-of-type(5), .grid .rowItem.imgButton.height100:nth-of-type(3):nth-last-of-type(4), .grid .rowItem.imgButton.height100:nth-of-type(4):nth-last-of-type(3), .grid .rowItem.imgButton.height100:nth-of-type(5):nth-last-of-type(2), .grid .rowItem.imgButton.height100:nth-of-type(6):nth-last-of-type(1), /*of 7*/ .grid .rowItem.imgButton.height100:nth-of-type(1):nth-last-of-type(7), .grid .rowItem.imgButton.height100:nth-of-type(2):nth-last-of-type(6), .grid .rowItem.imgButton.height100:nth-of-type(3):nth-last-of-type(5), .grid .rowItem.imgButton.height100:nth-of-type(4):nth-last-of-type(4), .grid .rowItem.imgButton.height100:nth-of-type(5):nth-last-of-type(3), .grid .rowItem.imgButton.height100:nth-of-type(6):nth-last-of-type(2), .grid .rowItem.imgButton.height100:nth-of-type(7):nth-last-of-type(1) { width:100px !important; height:100px; padding:0 0% 5%; font-size: 0.8em; line-height: normal; } /*extending custom button styling*/ /*buttonCirclesStyle01: custom font */ .grid .rowItem.imgButton h1, .grid .rowItem.imgButton h2, .grid .rowItem.imgButton h3 { color:white !important; } .buttonCirclesStyle01 .grid .rowItem.imgButton { } @media screen and (min-width : 1px) { .grid .rowItem.imgButton { font-size:10px; line-height:12px; }} @media screen and (min-width : 320px) { .grid .rowItem.imgButton { font-size:11px; line-height:13px; }} @media screen and (min-width : 480px) { .grid .rowItem.imgButton { font-size:12px; line-height:14px; }} @media screen and (min-width : 768px) { .grid .rowItem.imgButton { font-size:14px; line-height:16px; }} @media screen and (min-width : 1024px) { .grid .rowItem.imgButton { font-size:16px; line-height:18px; }} @media screen and (min-width : 1224px) { .grid .rowItem.imgButton { font-size:18px; line-height:20px; }} @media screen and (min-width : 1824px) { .grid .rowItem.imgButton { font-size:20px; line-height:22px; }} /*buttonCirclesSmallStyle01: font color, vertically padded, with opacity and scaling*/ /*.buttonCirclesSmallStyle01 .sectionInner { padding-top:50px; padding-bottom:50px; }*/ /*END GRID: Image buttons*/ /* some custom stacking styles */ .stack-4-images img { width:25%} @media screen and (max-width: 1024px) { .stack-4-images img { width:50%} } @media screen and (max-width: 480px) { .stack-4-images img { width:100%} } /*STYLE: section custom styling*/ .section.pageIntro { height: -moz-calc(100vh - 150px); height: -webkit-calc(100vh - 150px); height: -o-calc(100vh - 150px); height: calc(100vh - 150px);/*Updated, because of the subnavigation 85vh;*/ } .section.pageIntro h1 { padding: 0 0 1em !important; /*color:orange;*/ color: #C30; /*font-family:Alienleague; font-weight:normal; text-transform:lowercase; letter-spacing: -1.2px;*/ } .section.pageIntro h3 { padding: 1em 0 !important; color:#276581; } .section.pageIntro p, .section.pageIntro li { line-height:1.5em; } .section.pageIntro li { margin-top:0; } .section.pageIntro li { margin-top: 0.5em; margin-bottom: 0.5em; } /*
*/ .sectionSeparatorChains { /*background:url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/bg/chain.jpg) repeat-x bottom #ffffff; background-size:7%; padding-bottom:100px;*/ } .sectionSeparator, .sectionSeparator-thin { /*background:url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/bg/separator-thin.jpg) repeat-x bottom #ffffff; background-size:15%; padding-bottom:200px;*/ } .sectionSeparatorMer { /*background:url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/bg/separator-thin.jpg) repeat-x bottom #ffffff; background-size:15%; padding-bottom:200px;*/ } .sectionSeparator-medium { /*background:url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/bg/separator-medium.jpg) repeat-x bottom #ffffff; background-size:20%; padding-bottom:200px;*/ } .sectionSeparator-full { /*background:url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/bg/separator-full.jpg) no-repeat bottom #ffffff; background-size:100%; padding-bottom:200px;*/ } /*.tblImageList {margin:0 auto; width:100%; border-collapse:separate; border-spacing:10px;} .tblImageList td {font-size:24px; padding-left:40px;} .tblImageList img {width:150px; height:150px;} .tdImage {background-color:#B1B4B8; padding:1px !important; width:150px;} .tblImageList td h2 { text-align:center;}*/ ul.listImageText { margin:0px; padding:50px 10px 50px 10px; width:100%; clear:both; } .listImageText li { font-size:24px; clear:both; padding:10px 0px; list-style-type: none; /*min-height:150px; height:auto !important; height:150px;*/ /*min-height:290px; height:auto !important; height:290px;*/ min-height:230px; height:auto !important; height:230px; } .listImageText img {/*width:150px; height:150px;*/ /*width:160px; height:120px;*/ /*width:420px; height:260px;*/ width:320px; height:198px; } .listImage { background-color:#B1B4B8; padding:1px !important; /*width:150px;*/ /*width:160px;*/ /*width:420px;*/ width:320px; float:left; margin-right:50px; } .listImageText li h2 { text-align:center; padding: 1em 0 !important; } .centered { text-align:center; } .bottom { position:absolute; bottom:0px; } /*STYLE: RELATED RESOURCES */ .relatedResources { width: 100%; /*padding: 10px 0 100px; */ text-align: center; font-weight: bold; color: #fff; margin: 0; border: 0; } #Zip-Code-Mars.relatedResources { /*background: #145F7E;*/background: #01396e; font-size: 1.3em; font-weight: normal;} .relatedResources.small { padding: 0px 0 0px; } .pageContent .relatedResources.small h1 { font-family:Ubuntu; letter-spacing:normal; text-transform:none; margin-top:50px; } /*.relatedResources h1 { color:white; padding: 1em 0 !important; font-family: Alienleagueii-Bold; text-transform: lowercase; text-shadow: 2px 2px 2px black; }*/ /*.pageContent .section.relatedResources h1, .pageContent .section.relatedResources h2, .pageContent .section.relatedResources h3, .pageContent .section.relatedResources h4, .pageContent .section.relatedResources h5 {color:#ffd553} .pageContent .section.relatedResources, .pageContent .section.relatedResources div, .pageContent .section.relatedResources span, .pageContent .section.relatedResources p, .pageContent .section.relatedResources li { color: #fff;} .pageContent .section.relatedResources a { color: #FFD553;} .pageContent .section.relatedResources h1 {font-family:Alienleague; font-weight:normal; text-transform:lowercase; letter-spacing: -1.2px;}*/ .pageContent .relatedResources h1, .pageContent .relatedResources h2, .pageContent .relatedResources h3, .pageContent .relatedResources h4, .pageContent .relatedResources h5 { color:#ffd553 } .pageContent .relatedResources, .pageContent .relatedResources div, .pageContent .relatedResources span, .pageContent .relatedResources p, .pageContent .relatedResources li { color: #fff; } .pageContent .relatedResources a { color: #FFD553;/* color:#e04514;*/ } .pageContent .relatedResources h1 { font-family:Alienleague; font-weight:normal; text-transform:lowercase; letter-spacing: -1.2px; } .pageContent .relatedResources h2.relatedResourcesHeader { font-family: Ubuntu !important; letter-spacing: -1.1px; } /*Default: Related Resources: Alien Font*/ @media screen and (min-width : 1px) { .relatedResources h1 { font-size:37px; letter-spacing: -1px; } } @media screen and (min-width : 320px) { .relatedResources h1 { font-size:41px; letter-spacing: -1px; } } @media screen and (min-width : 480px) { .relatedResources h1 { font-size:45px; letter-spacing: -1.1px; } } @media screen and (min-width : 768px) { .relatedResources h1 { font-size:50px; letter-spacing: -1.1px; } } @media screen and (min-width : 1024px) { .relatedResources h1 { font-size:55px; letter-spacing: -1.2px; } } @media screen and (min-width : 1224px) { .relatedResources h1 { font-size:60px; letter-spacing: -1.2px; } } @media screen and (min-width : 1824px) { .relatedResources h1 { font-size:66px; letter-spacing: -1.3px; } } /*Override: Related Resources: Ubuntu */ /*REGULAR*/ .relatedResources h1.fontUbuntu, .relatedResources h2.relatedResourcesHeader { text-transform:none;} @media screen and (min-width : 1px) { .relatedResources h1.fontUbuntu, .relatedResources h2.relatedResourcesHeader { font-size:22px } } @media screen and (min-width : 320px) { .relatedResources h1.fontUbuntu, .relatedResources h2.relatedResourcesHeader { font-size:26px } } @media screen and (min-width : 480px) { .relatedResources h1.fontUbuntu, .relatedResources h2.relatedResourcesHeader { font-size:31px } } @media screen and (min-width : 768px) { .relatedResources h1.fontUbuntu, .relatedResources h2.relatedResourcesHeader { font-size:36px } } @media screen and (min-width : 1024px) { .relatedResources h1.fontUbuntu, .relatedResources h2.relatedResourcesHeader { font-size:41px } } @media screen and (min-width : 1224px) { .relatedResources h1.fontUbuntu, .relatedResources h2.relatedResourcesHeader { font-size:46px } } @media screen and (min-width : 1824px) { .relatedResources h1.fontUbuntu, .relatedResources h2.relatedResourcesHeader { font-size:54px } } /*SMALL*/ @media screen and (min-width : 1px) { .relatedResources.small h1.fontUbuntu { font-size:20px; letter-spacing: -0.6px; } } @media screen and (min-width : 320px) { .relatedResources.small h1.fontUbuntu { font-size:22px; letter-spacing: -0.7px; } } @media screen and (min-width : 480px) { .relatedResources.small h1.fontUbuntu { font-size:25px; letter-spacing: -0.8px; } } @media screen and (min-width : 768px) { .relatedResources.small h1.fontUbuntu { font-size:30px; letter-spacing: -0.9px; } } @media screen and (min-width : 1024px) { .relatedResources.small h1.fontUbuntu { font-size:35px; letter-spacing: -1px; } } @media screen and (min-width : 1224px) { .relatedResources.small h1.fontUbuntu { font-size:40px; letter-spacing: -1.1px; } } @media screen and (min-width : 1824px) { .relatedResources.small h1.fontUbuntu { font-size:66px; letter-spacing: -1.2px; } } /*.relatedResources a { color:gold !important; font-size:1em !important; }*/ .relatedResources a .modVideo h2 {/*color:gold !important;*/ color:white; font-size:18px; letter-spacing:1px; padding-left:30px; padding-right:30px; text-align:left; } .relatedResources a .modVideo .videoInformation { position:absolute; bottom:0px; } .relatedResources ul.horizontalText { /*margin: 70px auto;*/ margin: 0px auto; display:table; width:100%; padding-left:0px; clear:both; } .relatedResources ul.horizontalText.missionButtons li {/*list-style: outside none none; position: relative;*/ /*width: 110px;*/ width:110px; /*margin-right: 10px;*/ } .relatedResources ul.horizontalText.missionButtons li:hover { background-color:gold; } .relatedResources ul.horizontalText.missionButtons li a { display: block; font-size: 12px; padding: 10px 20px; position: relative; text-decoration: none; transition: all 0.2s ease-in-out 0s; color: #fff !important; } .relatedResources ul.horizontalText.missionButtons li:hover a { color: #29608c !important; } .relatedResources ul.horizontalText.topHR { border-top: solid 1px white; padding-top: 40px; } .relatedResources ul.horizontalText li { /*width:16%;*/ display:table-cell; /*float:left;*/ list-style: outside none none; /*padding: 40px 20px;*/ padding: 10px 20px; } .relatedResources ul.horizontalText.cols6 li { width:15%; float:left; padding: 10px 0.5%; } .relatedResources ul.horizontalText.cols3 li { width:30%; float:left; padding: 10px 1%; } .relatedResources ul.horizontalText.cols1 li { width:100%; display:block; float:none; padding: 10px 1%; } .relatedResources ul.horizontalImages { margin: 70px auto; display:table; /*width:99%;*/ padding-left:0px; white-space:normal; clear:both; } .relatedResources.goals ul.horizontalImages { margin: 20px auto; display:table; /*width:99%;*/ padding-left:0px; white-space:normal; clear:both; } .relatedResources.small ul.horizontalImages { margin: 5px auto; display:table; padding-left:0px; white-space:normal; clear:both; } .relatedResources ul.horizontalImages.topHR { /*border-top: solid 1px white;*/ /*background-image:url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/horizontalGradientLine-blue-inset.png); background-position:top; background-size:80% 6px; background-repeat:no-repeat; */ /*background-image:url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/horizontalGradientLine-blue-inset.png); background-position:top; background-size:80% 6px; background-repeat:no-repeat; */ /*background: linear-gradient(to right, rgba(67, 102, 134, 0), #436686, rgba(67, 102, 134, 0)) repeat scroll 0 0 rgba(0, 0, 0, 0);*/ /*background-image:url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/verticalGradientLine-blue.jpg); background-position:left; background-size:1px 100%; background-repeat:no-repeat;*/ /*background-image:url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/horizontalGradientLine-blue.jpg); background-position:top; background-size:80% 1px; background-repeat:no-repeat;*/ padding-top: 70px; } .relatedResources .gradient_line { /*background: linear-gradient(to right, rgba(67, 102, 134, 0), #436686, rgba(67, 102, 134, 0)) repeat scroll 0 0 rgba(0, 0, 0, 0);*/ background: linear-gradient(to right, rgba(67, 102, 134, 0), #00e5e5, rgba(67, 102, 134, 0)) repeat scroll 0 0 rgba(0, 0, 0, 0); background-size:100% 6px; clear: both; content: " "; height: 2px; margin-left: auto; margin-right: auto; width: 100%; margin-top:100px;/*-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75); box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);*/ } /*.relatedResources .gradient_line2 { clear: both; content: " "; height: 1px; margin-left: auto; margin-right: auto; width: 100%; margin-top:100px; background: radial-gradient(ellipse at center center , rgba(0, 29, 53, 1) 0%, rgba(1, 57, 110, 1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); }*/ /*ul.nav-MarsSiteLinks.nav-bottomLnks { display:table; width:99%; background-image:url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/horizontalGradientLine-blue-inset.png); background-position:top; background-size:80% 6px; background-repeat:no-repeat;padding-top:20px;} */ .relatedResources ul.horizontalImages li { /*width:33%;*//* display:table-cell; float:left;*/ list-style: outside none none; padding: 0px 20px; position:relative;} .relatedResources ul.horizontalImages.buttonCircle li { display:table-cell; float:left; } @media screen and (min-width : 1px) { .relatedResources ul.horizontalImages li, .relatedResources ul.horizontalImages.buttonCircle.height200 li, .relatedResources ul.horizontalImages.buttonCircle.height250 li { display:block; float:none; } } @media screen and (min-width : 480px) { .relatedResources ul.horizontalImages.buttonCircle.height200 li { display:table-cell; float:left; } } @media screen and (min-width : 580px) { .relatedResources ul.horizontalImages.buttonCircle.height250 li { display:table-cell; float:left; } } @media screen and (min-width : 630px) { .relatedResources ul.horizontalImages.buttonCircle.height275 li { display:table-cell; float:left; } } @media screen and (min-width : 680px) { .relatedResources ul.horizontalImages.buttonCircle.height300 li { display:table-cell; float:left; } } @media screen and (min-width : 768px) { .relatedResources ul.horizontalImages li { display:table-cell; float:left; } } @media screen and (min-width : 1px) { .relatedResources ul.horizontalImages.height200 li { clear:all; } .relatedResources ul.horizontalImages.height200 li:nth-child(3) { clear:left; } } @media screen and (min-width : 768px) { .relatedResources ul.horizontalImages.height200 li { clear:none; } .relatedResources ul.horizontalImages.height200 li:nth-child(3) { clear:left; } } @media screen and (min-width : 1024px) { .relatedResources ul.horizontalImages.height200 li:nth-child(3) { clear:none; } } .relatedResources ul.horizontalImages li img { height: 250px; margin-bottom:10px; display:block; } .relatedResources ul.horizontalImages.height200 li img { height: 200px; } @media screen and (min-width : 1px) { .relatedResources ul.horizontalImages.height250 li img { height: 200px; } } @media screen and (min-width : 1024px) { .relatedResources ul.horizontalImages.height250 li img { height: 250px; } } /*@media screen and (min-width : 1px){.relatedResources ul.horizontalImages.height250 li img { height: 175px; }} @media screen and (min-width : 1024px){.relatedResources ul.horizontalImages.height250 li img { height: 250px; }}*/ .relatedResources ul.horizontalImages.height275 li img { height: 275px; } .relatedResources ul.horizontalImages.height300 li img { height: 300px; } .relatedResources.small ul.horizontalImages li { /*width:33%;*/ display:inline-block; float:none; list-style: outside none none; padding: 0px 20px; position:relative; } @media screen and (min-width : 768px) {.relatedResources.small ul.horizontalImages li { display:table-cell; float:left;}} .relatedResources.small ul.horizontalImages li img { height: 100px; margin-bottom:10px; display:block; } .relatedResources.small ul.horizontalImages.height100 li img { height: 100px; } /*.relatedResources ul.horizontalImages.buttonCircle li { background: url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/button-circle.png) no-repeat; background-size:cover; padding: 0px 0px; margin-bottom:0px; } .relatedResources ul.horizontalImages.buttonCircle.height250 li, .relatedResources ul.horizontalImages.height250.buttonCircle li { height: 250px; width:250px;} .relatedResources ul.horizontalImages.buttonCircle.height275 li, .relatedResources ul.horizontalImages.height275.buttonCircle li { height: 275px; width:275px;} .relatedResources ul.horizontalImages.buttonCircle.height300 li, .relatedResources ul.horizontalImages.height300.buttonCircle li { height: 300px; width:300px;} .relatedResources ul.horizontalImages.buttonCircle li img { width:76%; height:76%; position:relative; top:12%; left:12%; border-radius:50%; border:0px; box-shadow:none; } .relatedResources ul.horizontalImages.buttonCircle li .buttonText { position:relative; vertical-align: middle; margin-top:20%; font-size:18px; line-height:24px;} .relatedResources ul.horizontalImages.buttonCircle li .buttonText .goalNumber { font-family: Roboto !important; text-transform: uppercase; font-size:20px; line-height:30px !important;}*/ .relatedResources ul.horizontalImages.buttonCircle li { background: url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/button-circle.png) no-repeat; background-size: contain; padding: 0px 0px; margin-bottom:0px; } .relatedResources ul.horizontalImages.buttonCircle li:hover { background: url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/button-circle-on.png) no-repeat; background-size: contain; padding: 0px 0px; margin-bottom:0px; } .relatedResources ul.horizontalImages.buttonCircle li:hover a div { color:#FFD553 !important; } .relatedResources ul.horizontalImages.buttonCircle li img { position:relative; border-radius:50%; border:0px; box-shadow:none; } .relatedResources ul.horizontalImages.buttonCircle.height200 li, .relatedResources ul.horizontalImages.height200.buttonCircle li { width:200px; /*margin:0px 25px 30px 0px;*/ margin:0px 12px 30px 12px; } .relatedResources ul.horizontalImages.buttonCircle.height250 li, .relatedResources ul.horizontalImages.height250.buttonCircle li { width:250px; } /*@media screen and (min-width : 1px){.relatedResources ul.horizontalImages.buttonCircle.height250 li, .relatedResources ul.horizontalImages.height250.buttonCircle li { width:151px; }} @media screen and (min-width : 1024px){.relatedResources ul.horizontalImages.buttonCircle.height250 li, .relatedResources ul.horizontalImages.height250.buttonCircle li { width:191px; }}*/ .relatedResources ul.horizontalImages.buttonCircle.height200 li img, .relatedResources ul.horizontalImages.height200.buttonCircle li img { width:155px; height: 155px; left:22px; top:22px; } .relatedResources ul.horizontalImages.buttonCircle.height250 li img, .relatedResources ul.horizontalImages.height250.buttonCircle li img { width:191px; height: 191px; left:29px; top:29px; } /*@media screen and (min-width : 1px){.relatedResources ul.horizontalImages.buttonCircle.height250 li img, .relatedResources ul.horizontalImages.height250.buttonCircle li img { width:151px; height: 151px; }} @media screen and (min-width : 1024px){.relatedResources ul.horizontalImages.buttonCircle.height250 li img, .relatedResources ul.horizontalImages.height250.buttonCircle li img { width:191px; height: 191px; }}*/ .relatedResources ul.horizontalImages.buttonCircle.height100 li, .relatedResources ul.horizontalImages.height100.buttonCircle li { width:100px; } .relatedResources.small ul.horizontalImages.buttonCircle.height100 li, .relatedResources ul.horizontalImages.height100.buttonCircle li { margin: 0px 16px; } .relatedResources ul.horizontalImages.buttonCircle.height100 li img, .relatedResources ul.horizontalImages.height100.buttonCircle li img { width:77px; height: 77px; left:11px; top:11px; } .relatedResources ul.horizontalImages.buttonCircle.height100 li.off { background: url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/button-circle.png) no-repeat; background-size: contain; padding: 0px 0px; margin-bottom:0px; /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 5-7 */ filter: alpha(opacity=80); /* Netscape */ -moz-opacity: 0.8; /* Safari 1.x */ -khtml-opacity: 0.8; /* Good browsers */ opacity: 0.8; } .relatedResources ul.horizontalImages.buttonCircle.height100 li.off:hover { background: url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/button-circle-on.png) no-repeat; background-size: contain; padding: 0px 0px; margin-bottom:0px; /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 5-7 */ filter: alpha(opacity=100); /* Netscape */ -moz-opacity: 1; /* Safari 1.x */ -khtml-opacity: 1; /* Good browsers */ opacity: 1; } .relatedResources ul.horizontalImages.buttonCircle.height100 li { background: url(https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/button-circle-on.png) no-repeat; background-size: contain; padding: 0px 0px; margin-bottom:0px; color:#FFD553 !important; } .relatedResources ul.horizontalImages.buttonCircle.height100 li:nth-child(3), .relatedResources ul.horizontalImages.buttonCircle.height100 li.off:nth-child(3) { clear:left;} /*fits best in mars2020 overview*/ #Mars2020-Rover-Science .relatedResources.small ul.horizontalImages li { display:table-cell; float:left;} #Mars2020-Rover-Science .relatedResources ul.horizontalImages.buttonCircle.height200 li, #Mars2020-Rover-Science .relatedResources ul.horizontalImages.height200.buttonCircle li{width:175px;} #Mars2020-Rover-Science .relatedResources ul.horizontalImages.buttonCircle.height200 li img, #Mars2020-Rover-Science .relatedResources ul.horizontalImages.height200.buttonCircle li img{left:7px;} @media screen and (min-width : 768px) {.relatedResources ul.horizontalImages.buttonCircle.height100 li:nth-child(3), .relatedResources ul.horizontalImages.buttonCircle.height100 li.off:nth-child(3) { clear:none;} } .relatedResources ul.horizontalImages.buttonCircle.height100 li.off div { color:#ffffff !important; } .relatedResources ul.horizontalImages.buttonCircle.height100 li div { color:#FFD553 !important; } .relatedResources ul.horizontalImages.buttonCircle.height100 li.off img, .relatedResources ul.horizontalImages.height100.buttonCircle li.off img { filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .relatedResources ul.horizontalImages.buttonCircle.height100 li.off img:hover, .relatedResources ul.horizontalImages.height100.buttonCircle li.off img:hover { filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); -ms-filter: grayscale(0); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .relatedResources ul.horizontalImages.buttonCircle.height275 li, .relatedResources ul.horizontalImages.height275.buttonCircle li { width:275px; } .relatedResources ul.horizontalImages.buttonCircle.height275 li img, .relatedResources ul.horizontalImages.height275.buttonCircle li img { width:210px; height: 210px; left:32px; top:32px; } .relatedResources ul.horizontalImages.buttonCircle.height300 li, .relatedResources ul.horizontalImages.height300.buttonCircle li { width:300px; } .relatedResources ul.horizontalImages.buttonCircle.height300 li img, .relatedResources ul.horizontalImages.height300.buttonCircle li img { width:229px; height: 229px; left:35px; top:35px; } .relatedResources ul.horizontalImages.buttonCircle li .buttonText { position:relative; vertical-align: middle; margin-top:20%; /*font-size:18px; line-height:24px;*/ /*font-size:16px; line-height:18px;*/ padding:0px 35px; } @media screen and (min-width : 1px) { .relatedResources ul.horizontalImages.buttonCircle li .buttonText { font-size:10px; line-height:12px; } } @media screen and (min-width : 320px) { .relatedResources ul.horizontalImages.buttonCircle li .buttonText { font-size:11px; line-height:13px; } } @media screen and (min-width : 480px) { .relatedResources ul.horizontalImages.buttonCircle li .buttonText { font-size:12px; line-height:14px; } } @media screen and (min-width : 768px) { .relatedResources ul.horizontalImages.buttonCircle li .buttonText { font-size:14px; line-height:16px; } } @media screen and (min-width : 1024px) { .relatedResources ul.horizontalImages.buttonCircle li .buttonText { font-size:16px; line-height:18px; } } @media screen and (min-width : 1224px) { .relatedResources ul.horizontalImages.buttonCircle li .buttonText { font-size:18px; line-height:20px; } } @media screen and (min-width : 1824px) { .relatedResources ul.horizontalImages.buttonCircle li .buttonText { font-size:20px; line-height:22px; } } .relatedResources ul.horizontalImages.buttonCircle.height100 li .buttonText { padding:0px 0px; } .relatedResources ul.horizontalImages.buttonCircle.height200 li .buttonText { padding: 0px 0px; } .relatedResources ul.horizontalImages.buttonCircle.height100 li a.off { /*opacity:0.7;*/ } .relatedResources ul.horizontalImages.buttonCircle li .buttonText .goalNumber { font-family: Roboto !important; text-transform: uppercase; /*font-size:20px; line-height:30px !important;*/ /*text-shadow: 2px 2px 2px black;*/ text-shadow: 1px 1px 1px #595980; } @media screen and (min-width : 1px) { .relatedResources ul.horizontalImages.buttonCircle li .buttonText .goalNumber { font-size:12px; line-height:23px !important; } } @media screen and (min-width : 320px) { .relatedResources ul.horizontalImages.buttonCircle li .buttonText .goalNumber { font-size:13px; line-height:25px !important; } } @media screen and (min-width : 480px) { .relatedResources ul.horizontalImages.buttonCircle li .buttonText .goalNumber { font-size:16px; line-height:26px !important; } } @media screen and (min-width : 768px) { .relatedResources ul.horizontalImages.buttonCircle li .buttonText .goalNumber { font-size:18px; line-height:28px !important; } } @media screen and (min-width : 1024px) { .relatedResources ul.horizontalImages.buttonCircle li .buttonText .goalNumber { font-size:20px; line-height:30px !important; } } @media screen and (min-width : 1224px) { .relatedResources ul.horizontalImages.buttonCircle li .buttonText .goalNumber { font-size:22px; line-height:32px !important; } } @media screen and (min-width : 1824px) { .relatedResources ul.horizontalImages.buttonCircle li .buttonText .goalNumber { font-size:22px; line-height:32px !important; } } .relatedResources.small ul.horizontalImages.buttonCircle li .buttonText .goalNumber { font-family: Montserrat, Helvetica, Arial !important; text-transform: uppercase; font-size:16px; line-height:20px !important; text-shadow: 1px 1px 1px black; } /*END STYLE: RELATED RESOURCES */ /*START: sliding captions of standard content images*/ .contentImageInner.slidingCaption .imageDescription { position:absolute; background: none; padding: 10px 0%; width:100%; overflow: hidden; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -o-transition-duration: 0.3s;} .contentImageInner.slidingCaption.active .imageDescription { position:absolute; background: #01396E none no-repeat scroll 0px 0px; padding: 10px 5%; width:100%; overflow:hidden; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -o-transition-duration: 0.3s;} .slidingCaption .imageDescription .imageTitle, .slidingCaption .imageDescription .imageCaption{ position:relative; right: -100%; display:block; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -o-transition-duration: 0.3s; } .slidingCaption.active .imageDescription .imageTitle, .slidingCaption.active .imageDescription .imageCaption{ right: 0%; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -o-transition-duration: 0.3s; } .slidingCaption .imageCreditBottom {display:none;} /*END: sliding captions of standard content images*/ /*START: slideout*/ .slideout-blurb { position: fixed; z-index:11; top: 50%; width: 35px; height: 75px; /*padding: 10px 0;*/ text-align: center; /*background: none repeat scroll 0 0 #01396e;*/ -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -o-transition-duration: 0.3s; cursor: pointer; opacity:0.85; } #slideout-prev { /*-webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;*/ /*border-top: 1px solid #285588; border-right: 1px solid #285588; border-bottom: 1px solid #285588; */ border:0px; left: 0; } .sidebarActive #slideout-prev { left:360px } #slideout-next { /*-webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;*/ /*border-top: 1px solid #285588; border-left: 1px solid #285588; border-bottom: 1px solid #285588; */ border:0px; right: 0; } .sidebarActive #slideout-next { right:360px } .slideout-blurb .slideout-blurb-content { position: fixed; top: 50%; /* width: 200px;*/ width: 250px; padding: 12px 25px 8px 25px; height: 75px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -o-transition-duration: 0.3s; text-align: left; background: none no-repeat scroll 0 0 #01396e; color:white; display:block; /*display: table;*/ overflow:hidden; border-top: 1px solid #285588; border-bottom: 1px solid #285588; } #slideout-prev .slideout-blurb-content { /* left: -250px;*/ left: -300px; /*-webkit-border-radius: 0 0 0px 0; -moz-border-radius: 0 0 0px 0; border-radius: 0 0 0px 0;*/ -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } .sidebarActive #slideout-prev .slideout-blurb-content { left:-660px } #slideout-next .slideout-blurb-content { /*right: -250px;*/ right: -300px; /*-webkit-border-radius: 0 0 0px 0; -moz-border-radius: 0 0 0px 0; border-radius: 0 0 0px 0;*/ -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; } .sidebarActive #slideout-prev .slideout-blurb-content { right:-660px } #slideout-prev:hover { /*left: 250px;*/ left: 300px; opacity:1; } .sidebarActive #slideout-prev:hover { left:360px; } #slideout-next:hover { /*right: 250px;*/ right: 300px; opacity:1; } .sidebarActive #slideout-next:hover { left:360px; } #slideout-prev:hover .slideout-blurb-content { left: 0; } .sidebarActive #slideout-prev:hover .slideout-blurb-content { left:360px; } #slideout-next:hover .slideout-blurb-content { right: 0; } .sidebarActive #slideout-next:hover .slideout-blurb-content { left:360px; } .slideout-blurb .slideout-blurb-arrow-image { width: 25px; position:absolute; height: 46px; margin-top:10px; background: url('https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/layout/slider-home-rotator/slider-layout.png') no-repeat scroll 0 0; display: table-cell; vertical-align: middle; } #slideout-prev .slideout-blurb-arrow-image { background-position: 0 -231px; left:0px; } #slideout-next .slideout-blurb-arrow-image { background-position: -25px -231px; right:0px; } /*.slideout-blurb .slideout-blurb-arrow { overflow: visible; display:block; position: absolute; padding: 12px 0px 8px 0px; background-repeat: no-repeat; opacity: 0.8; width: 35px; height: 75px; border: 1px solid #285588; background-color:#01396e; }*/ .slideout-blurb-arrow { /*overflow: visible; display:block; position: fixed; top: 50%; padding: 12px 0px 8px 0px; background-repeat: no-repeat; opacity: 0.85; width: 35px; height: 75px; border: 1px solid #285588; background-color:#01396e; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -o-transition-duration: 0.3s; z-index:6; */ position: fixed; z-index:6; top: 50%; width: 35px; height: 75px; padding: 10px 0; text-align: center; background: none repeat scroll 0 0 #01396e; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -o-transition-duration: 0.3s; cursor: pointer; /*opacity:0.85;*/ opacity:1; } #slideout-blurb-arrow-prev { /*-webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;*/ /*border-top: 1px solid #285588; border-right: 1px solid #285588; border-bottom: 1px solid #285588; */ border:0px; left: 0px; } .sidebarActive #slideout-blurb-arrow-prev { left:360px; } #slideout-blurb-arrow-next { /*-webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;*/ /*border-top: 1px solid #285588; border-left: 1px solid #285588; border-bottom: 1px solid #285588; */ border:0px; right: 0px; } .sidebarActive #slideout-blurb-arrow-next { right:360px; } #slideout-blurb-arrow-prev:hover { opacity: 0; } #slideout-blurb-arrow-next:hover { opacity: 0; } .slideout-blurb-arrow .slideout-blurb-arrow-image { width: 25px; height: 46px; margin-top:10px; margin-left:5px; background: url('https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/layout/slider-home-rotator/slider-layout.png') no-repeat scroll 0 0; } #slideout-blurb-arrow-prev.slideout-blurb-arrow { -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } #slideout-blurb-arrow-prev.slideout-blurb-arrow .slideout-blurb-arrow-image { background-position: 0 -231px; } #slideout-blurb-arrow-next.slideout-blurb-arrow { -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; } #slideout-blurb-arrow-next.slideout-blurb-arrow .slideout-blurb-arrow-image { background-position: -25px -231px; } .slideout-blurb .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; } .slideout-blurb .slideout-blurb-content-thumb {/*width: 65px;*/ margin: 0px; padding-top:2px; height: 75px; display: table-cell; vertical-align: middle; opacity:0; } .slideout-blurb:hover .slideout-blurb-content-thumb { opacity:1; transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition-delay: 0.5s; } #slideout-prev .slideout-blurb-content-thumb { padding-left:10px; } #slideout-next .slideout-blurb-content-thumb { padding-right:10px; } .slideout-blurb .slideout-blurb-content-text { display: table-cell; vertical-align: middle; font-size:13px; color:white; line-height:18px; position:relative; top:-100px; transition: top 0.3s 0s; opacity:0.9; } .slideout-blurb:hover .slideout-blurb-content-text { top:0px; -webkit-transition: top 0.3s 0s; -moz-transition: top 0.3s 0s; transition: top 0.3s 0s; transition-delay: 0.3s; } #slideout-prev .slideout-blurb-content-text { padding-left:15px; text-align:left; } #slideout-next .slideout-blurb-content-text { padding-right:15px; text-align:left; } .slideout-blurb a.slideout-blurb-content:link, .slideout-blurb a.slideout-blurb-content:visited, .slideout-blurb a.slideout-blurb-content:hover { color:white; font-weight:normal !important; height: 75px; text-decoration:none !important; } /*END: slideout*/ /*this is temp till all instrument pages are finishes and all use instruments2.css*/ @media screen and (min-width : 1px) { .info .title h1 span { font-size:35px; letter-spacing:-0.6px; color: #ffd553; } } @media screen and (min-width : 320px) { .info .title h1 span { font-size:40px; letter-spacing:-0.7px; } } @media screen and (min-width : 480px) { .info .title h1 span { font-size:45px; letter-spacing:-0.8px; } } @media screen and (min-width : 768px) { .info .title h1 span { font-size:50px; letter-spacing:-0.9px; } } @media screen and (min-width : 1024px) { .info .title h1 span { font-size:55px; letter-spacing:-1px; } } @media screen and (min-width : 1224px) { .info .title h1 span { font-size:60px; letter-spacing:-1.1px; } } @media screen and (min-width : 1824px) { .info .title h1 span { font-size:70px; letter-spacing:-1.2px; } } .quickFacts h2 { text-align:center; } .section #dynamiccontentimage.alignCenter, .section.contentCenteredImage #dynamiccontentimage.alignCenter, .section.contentCenteredImage1 #dynamiccontentimage.alignCenter, .section.contentCenteredImage2 #dynamiccontentimage.alignCenter, .section.contentCenteredImage3 #dynamiccontentimage.alignCenter { padding-bottom:0px !important; } .section #dynamiccontentimage.alignCenter img { margin: 0% !important; width: 100% !important; } .section p { margin-bottom:0px; } .pageContent .section h1, .pageContent .section h2, .pageContent .section h3, .pageContent .section h4, .pageContent .section h5 { line-height: normal; /*margin: 0; padding: 0 0 0.5em;*/ padding: 0.5em 0 0.5em; } .pageContent .section h1.padded, .pageContent .section h2.padded, .pageContent .section h3.padded, .pageContent .section h4.padded, .pageContent .section h5.padded { padding:20px; } .pageContent .section h1.paddedMedium, .pageContent .section h2.paddedMedium, .pageContent .section h3.paddedMedium, .pageContent .section h4.paddedMedium, .pageContent .section h5.paddedMedium { padding:20px 10%; } .section div.columntype_sidebar { margin: 60px 0 10px 2%; } .sectionObjectives article { top:33% !important; } .sectionObjectives .FloatingTitle { font-size:80px; text-transform:none; text-shadow:6px 6px 6px black; } .sectionObjectives .FloatingText { font-size:160px; text-transform:uppercase; margin-top:100px; text-shadow:6px 6px 6px black; } .totalsHomepageCnt { font-size: 30px !important; text-shadow: 6px 6px 6px black; text-transform: none; } .section hr.plain { color:#7F93B9; background-color:#7F93B9; display: block; border: 0 none; line-height:0px; height:1px; } /*STYLE: QUOTES */ /*20160715 blockquote { margin: 1.5em auto; padding: 0.5em 10px; quotes: "\201C""\201D""\2018""\2019"; color:white; color:rgba(255, 255, 255, 0.9); font-size: 1.2em; letter-spacing: 2px; text-shadow:rgb(5, 30, 69) 2px 2px 5px; } blockquote:before, blockquote:after { color:white; color:rgba(255, 255, 255, 0.9); font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.1em; font-family:Great Vibes; font-style:italic; } blockquote:before { content: open-quote; } blockquote:after { content: close-quote; } blockquote span { display: inline; }*/ .quote, .author { color:white; color:rgba(255, 255, 255, 0.9); /*font-size: 4em; line-height: 1.5em;*/ text-shadow:rgb(5, 30, 69) 2px 2px 5px; } .quote { font-size:2em; line-height:normal; } .author { display: block; text-align: center; /*font-size:1.5em; line-height:normal;*/ margin-top:-1em; } /* STYLE: UL Category Styles*/ .categoryColumns { padding-left: 0; } .categoryColumns li i.fa { font-size:300%; display:block; text-align:center; padding:0 10px; } .categoryColumns li .fa.fa-check { color:rgb(30, 253, 15); text-shadow:black 1px 1px 20px; } .categoryColumns li span.fa.fa-check { font-size: 150%; padding-right: 10px; } .categoryColumns li.padded { padding:20px; } .categoryColumns { /*font-weight:bold; text-shadow:black 1px 1px 1px;*/ } .categoryColumns li { display:inline-block; zoom: 1; text-align: left; vertical-align: top; margin: 0 .9%; padding: 0; } .relatedResources .categoryColumns li { vertical-align:middle; } .categoryColumns li:first-child:nth-last-child(2), .categoryColumns li:first-child:nth-last-child(2) ~ li { width: -moz-calc(95% / 2); width: -webkit-calc(95% / 2); width: -o-calc(95% / 2); width: calc(95% / 2); max-height:500px; } .categoryColumns li:first-child:nth-last-child(3), .categoryColumns li:first-child:nth-last-child(3) ~ li { width: -moz-calc(93% / 3); width: -webkit-calc(93% / 3); width: -o-calc(93% / 3); width: calc(93% / 3); } @media screen and (max-width:700px) { .categoryColumns li:first-child:nth-last-child(2), .categoryColumns li:first-child:nth-last-child(2) ~ li { width:100%; margin:15px auto; } .categoryColumns li:first-child:nth-last-child(3), .categoryColumns li:first-child:nth-last-child(3) ~ li { width: 90%; display:block; margin:15px auto; } } .categoryColumns li:first-child:nth-last-child(4), .categoryColumns li:first-child:nth-last-child(4) ~ li { width: -moz-calc(90% / 4); width: -webkit-calc(90% / 4); width: -o-calc(90% / 4); width: calc(90% / 4); } @media screen and (max-width:1100px) { .categoryColumns li:first-child:nth-last-child(4), .categoryColumns li:first-child:nth-last-child(4) ~ li { width: -moz-calc(90% / 2); width: -webkit-calc(90% / 2); width: -o-calc(90% / 2); width: calc(90% / 2); } } @media screen and (max-width:900px) { .categoryColumns li:first-child:nth-last-child(4), .categoryColumns li:first-child:nth-last-child(4) ~ li { width: 80%; margin:0 10%; padding:25px 0; } } .categoryColumns li:first-child:nth-last-child(5), .categoryColumns li:first-child:nth-last-child(5) ~ li { width: -moz-calc(85% / 5); width: -webkit-calc(85% / 5); width: -o-calc(85% / 5); width: calc(85% / 5); } .categoryColumns .slick-dots li { width:20px !important; height:20px !important; } .categoryColumns .slickGeneral ul.slick-dots, .categoryColumns.slickGeneral ul.slick-dots { background:none !important; } /*Martian Circles*/ /*UNIQUE: MARTIAN CIRCLES missionButtons*/ /*.general.martianCircles.missionButtons { position: absolute; padding-left: 0; margin:0 auto; width:100%; bottom:5%; } @media screen and (max-height: 1000px and max-width:1900px) { .martianCircles.missionButtons { bottom:35%; */} } /*MARS MISSION RESOURCES*/ /*ul.categoryColumns.martianCircles.missionButtons li { position:relative; height:200px; } .martianCircles.missionButtons li .martianOutlineCircle { position:absolute; margin:-25%; width:150%; height:150%; background:url('https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/blue-styled-martian-circle.png') no-repeat center center; background-size:contain; } .martianCircles.missionButtons li:hover .martianOutlineCircle { background:url('https://mars-jpl-nasa-gov-images.s3.amazonaws.com/general/blue-styled-martian-circle-on.png') no-repeat center center; background-size:contain; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .martianCircles.missionButtons li:nth-child(1) .martianOutlineCircle { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); } .martianCircles.missionButtons li:nth-child(2) .martianOutlineCircle { -webkit-transform:rotate(120deg); -moz-transform:rotate(120deg); } .martianCircles.missionButtons li:nth-child(3) .martianOutlineCircle { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); } .martianCircles.missionButtons li:nth-child(4) .martianOutlineCircle { -webkit-transform:rotate(240deg); -moz-transform:rotate(240deg); } .martianCircles.missionButtons li:nth-child(5) .martianOutlineCircle { -webkit-transform:rotate(300deg); -moz-transform:rotate(300deg); } .martianCircles.missionButtons li .martianInnerCircle { width:80%; display: block; border-radius: 100%; margin:-10% auto 0; opacity:0.8; background-position: center center; background-size: cover; background-repeat:no-repeat; text-align:center; } .martianCircles.missionButtons li:hover .martianInnerCircle { opacity:1; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .martianCircles.missionButtons li .martianCircles.missionButtonsLabel { display:block; min-height:45px; width:100%; text-align:center; } .martianCircles.missionButtons li .martianCircles.missionButtonsLabel span { display:block; margin:0 auto; width:90%; } .martianCircles.missionButtons li .martianInnerCircle .martianCirclesLabel a { color:white; text-decoration:none; } .martianCircles.missionButtons li:hover .martianInnerCircle .martianCirclesLabel a { color:gold; text-decoration:none; } @media screen and (max-width: 1100px) { .martianCircles.missionButtons li .martianInnerCircle { margin-top:-13%; } ul.categoryColumns.martianCircles.missionButtons li { margin-top:10%; } } @media screen and (max-width: 900px) { ul.categoryColumns.martianCircles.missionButtons li:first-child:nth-last-child(4), ul.categoryColumns.martianCircles.missionButtons li:first-child:nth-last-child(4) ~ li { width: -moz-calc(90% / 2); width: -webkit-calc(90% / 2); width: -o-calc(90% / 2); width: calc(90% / 2); height: 200px; margin: 10% auto 0; padding: 0; } } @media screen and (min-width : 1px) { .martianCircles.missionButtons li .martianInnerCircle .martianCirclesLabel br { font-size:12px; line-height:12px; } } @media screen and (min-width : 1px) { .martianCircles.missionButtons li .martianInnerCircle .martianCirclesLabel a { line-height:12px; } } @media screen and (min-width : 320px) { .martianCircles.missionButtons li .martianInnerCircle .martianCirclesLabel a { line-height:14px; } } @media screen and (min-width : 480px) { .martianCircles.missionButtons li .martianInnerCircle .martianCirclesLabel a { line-height:15px; } } @media screen and (min-width : 768px) { .martianCircles.missionButtons li .martianInnerCircle .martianCirclesLabel a { line-height:17px; } } @media screen and (min-width : 1024px) { .martianCircles.missionButtons li .martianInnerCircle .martianCirclesLabel a { line-height:19px; } } @media screen and (min-width : 1224px) { .martianCircles.missionButtons li .martianInnerCircle .martianCirclesLabel a { line-height:21px; } } @media screen and (min-width : 1824px) { .martianCircles.missionButtons li .martianInnerCircle .martianCirclesLabel a { line-height:24px; } } *//* should only display in themeDefault.css @media screen and (min-width : 1px) {*,p,a{font-size:12px;}} @media screen and (min-width : 320px) {*,p,a{font-size:14px;}} @media screen and (min-width : 480px){*,p,a{font-size:15px;}} @media screen and (min-width : 768px){*,p,a{font-size:17px;}} @media screen and (min-width : 1024px){*,p,a{font-size:19px;}} @media screen and (min-width : 1224px) {*,p,a{font-size:21px;}} @media screen and (min-width : 1824px) {*,p,a{font-size:24px;}} */