@charset "UTF-8"; @media screen and (min-width: 981px) { IMG.Logo { float: right; display: block; transform: scale(.7); transform-origin: top right; } H1 { text-align: left; text-transform: uppercase; } #Content NAV UL:not(.Selected) { margin-top: 20px; } #Content NAV UL { position: relative; list-style: none; } #Content NAV LI { position: relative; width: 100%; padding: 10px 0; border-top: 1px solid #CCC; font-weight: 700; cursor: pointer; } #Content NAV LI:before { visibility: hidden; position: absolute; z-index: -1; width: 20px; height: calc(100% + 1px); left: -16px; top: -1px; background: #FFF; cursor: pointer; transform: skewX(-11.6deg); content: ""; } #Content NAV LI:after { visibility: hidden; position: absolute; z-index: -1; width: 20px; height: calc(100% + 1px); right: -16px; top: -1px; background: #FFF; cursor: pointer; transform: skewX(-11.6deg); content: ""; } #Content NAV LI:not(.Active):hover { background: #FFF; border-color: transparent; } #Content NAV LI:hover + LI { border-color: transparent; } #Content NAV LI:hover:before { visibility: visible; } #Content NAV LI:hover:after { visibility: visible; } #Content UL.Selected { display: inline-block; } #Content UL.Selected LI:not(.Active) { display: none; } #Content UL.Selected LI.Active { width: auto; margin: 0 15px; border: none; font-weight: 700; font-size: 20px; } #Content UL.Selected:before { position: absolute; right: 100%; top: 5px; height: calc(100% - 10px); content: ""; transform: skewX(-11.6deg); border-right: 1px solid #CCC; } #Content UL.Selected LI.Active:before { content: none; } #Content UL.Selected LI.Active:after { content: none; } #Content UL.Selected:first-child { box-sizing: border-box; width: 50px; margin-left: -18px; background: url(/i/icons.210255569.svg#home) no-repeat center; background-size: 18px; } #Content UL.Selected:first-child:before { content: none; } TABLE.Models { width: 100%; margin-top: 20px; } TABLE.Models TR { border-top: 1px solid #CCC; } TABLE.Models TD { position: relative; } TABLE.Models TD:nth-child(1) { width: 1%; text-align: left; font-weight: 700; white-space: nowrap; } TABLE.Models TD:nth-child(3) { width: 18px; } TABLE.Models A { display: block; box-sizing: border-box; width: 100%; padding: 10px 0; text-decoration: none; color: #000 !important; } TABLE.Models TD:nth-child(1) A { padding-right: 30px;} TABLE.Models TD SPAN { background: yellow; } TABLE.Models TR TD:first-child:before { visibility: hidden; position: absolute; z-index: -1; width: 20px; height: calc(100% + 1px); left: -16px; top: -1px; background: #FFF; cursor: pointer; transform: skewX(-11.6deg); content: ""; } TABLE.Models TR TD:last-child:before { visibility: hidden; position: absolute; z-index: -1; width: 20px; height: calc(100% + 1px); right: -16px; top: -1px; background: #FFF; cursor: pointer; transform: skewX(-11.6deg); content: ""; } TABLE.Models TR:hover { background: #FFF; border-color: transparent; } TABLE.Models TR:hover + TR { border-color: transparent; } TABLE.Models TR:hover TD:first-child:before { visibility: visible; } TABLE.Models TR:hover TD:last-child:before { visibility: visible; } TABLE.Models TR.Note TD:last-child { background: url(/i/icons.210255569.svg#i-grey) no-repeat center; background-size: 15px; cursor: pointer; } TABLE.Models TR.Note P { display: none; position: absolute; width: 400px; top: 18px; right: 23px; padding: 15px 20px; font-size: 12px; line-height: 1.4; background: #666; color: #FFF; transform: skewX(-11.6deg); transform-origin: top right; } TABLE.Models TR.Note P I { display: block; font-style: normal; transform: skewX(11.6deg); transform-origin: top right; } TABLE.Models TR.Note:hover P { display: block; } #Search { width: 100%; display: flex; justify-content: space-between; margin-bottom: 30px; } #Search FORM { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; } #Search INPUT { width: 220px; padding: 9px 30px 9px 0px; text-align: left; font-size: 20px; font-weight: 700; text-transform: uppercase; background: none; outline: none; border: none; border-bottom: 1px solid #CCC; } #Search BUTTON { width: 20px; margin-left: -20px; background: url(/i/icons.210255569.svg#search-red) no-repeat center; background-size: 18px; border: none; outline: none; cursor: pointer; filter: grayscale(1) opacity(.5); transition: 150ms; } #Search BUTTON:hover { filter: none; } #Search BUTTON.Loading { background-image: url(/i/icons.210255569.svg#gear); animation: rotating 2s linear infinite; } #Search INPUT::-webkit-input-placeholder { font-size: 16px; font-weight: 400; text-transform: none; } #Search INPUT::-moz-placeholder { font-size: 16px; font-weight: 400; text-transform: none; } #Search INPUT:-ms-input-placeholder { font-size: 16px; font-weight: 400; text-transform: none; } #Search INPUT:-moz-placeholder { font-size: 16px; font-weight: 400; text-transform: none; } #Search FORM:last-child { justify-content: flex-end; } #Search FORM:last-child INPUT { text-align: right; } #SearchResults { position: relative; display: none; margin-top: 40px; } #SearchResults H2 { font-size: 20px; font-weight: 500; } #Close { display: block; float: right; width: 20px; height: 20px; background: url(/i/icons.210255569.svg#search-reset) no-repeat center; background-size: 33px; cursor: pointer; filter: grayscale(1) opacity(.5); transition: 150ms; } #Close:hover { filter: none; } #Applicability UL { list-style: none; font-size: 15px; } #Applicability H2 { position: relative; padding: 9px 0 7px 0; font-size: 21px; font-weight: 700; margin-top: 30px; text-transform: uppercase; } #Applicability H2 IMG { position: absolute; right: 0; top: 0; transform: scale(.5); transform-origin: center right; filter: grayscale(1); } #Applicability H2 IMG.CSAG { top: -7px; transform: scale(.45); } #Applicability H2 IMG.CSCE { top: -5px; } #Applicability H2 IMG.NHAG { top: -11px; transform: scale(.45); } #Applicability H3 { position: relative; padding: 9px 0 7px 0; font-size: 17px; cursor: pointer; } #Applicability H3 B:after { content: " /"; } #Applicability H3:before { position: absolute; left: -16px; margin-top: -2px; content: "+"; } #Applicability H3.Active:before { content: "–"; } #Applicability H3:hover { color: #C41230; } #Applicability H4 { padding: 8px 0; font-weight: 500; color: #999; } #Applicability UL.Groups { margin-bottom: 30px; } #Applicability UL.Groups > LI { border-top: 1px solid #CCC; } #Applicability UL.Series { display: none; } #Applicability UL.Models > LI { position: relative; padding: 9px 0 7px 0; border-top: 1px dashed #CCC; background: url(/i/icons.210255569.svg#arr-down) no-repeat right 14px; background-size: 10px 10px; cursor: pointer; } #Applicability UL.Models > LI:hover { color: #C41230; } #Applicability UL.Models > LI.Opened { background-image: url(/i/icons.210255569.svg#dash); } #Applicability UL.Models > LI.Loading { background: none; } #Applicability UL.Models > LI.Loading:before {position: absolute; right: 0; top: 11px; width: 11px; height: 11px; animation: rotating 2s linear infinite; background: url(/i/icons.210255569.svg#gear); filter: grayscale(1); opacity: .5; content: ""; } #Applicability UL.Models > LI:not(.Opened) > UL { display: none; } #Applicability UL.Schemas { display: grid; width: 100%; margin: 20px 0; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 30px; list-style: none; } #Applicability UL.Schemas LI { position: relative; min-height: calc(1em + 20px); font-size: 12px; background: #FFF; overflow: hidden; } #Applicability UL.Schemas LI A { text-decoration: none; } #Applicability UL.Schemas LI IMG { display: block; width: 100%; margin-bottom: 35px; } #Applicability UL.Schemas LI IMG.NoPic { width: 25%; margin: 30px auto calc(1em + 50px) auto; filter: grayscale(1) opacity(.6); } #Applicability UL.Schemas LI DIV { position: absolute; bottom: 0; box-sizing: border-box; width: 100%; padding: 10px; font-weight: 400; line-height: 15px; background: #666; color: #FFF; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #Applicability UL.Schemas LI:hover DIV { white-space: normal; overflow: auto; background: #C41230; } #Applicability UL.Schemas LI I { display: block; position: absolute; z-index: 9; right: 0; top: 0; width: 34px; height: 34px; background: url(/i/icons.210255569.svg#i-red) no-repeat center; background-size: 18px; filter: grayscale(1); opacity: .7; cursor: pointer; } #Applicability UL.Schemas LI:hover I { filter: none; opacity: 1; } #Applicability UL.Schemas LI P { box-sizing: border-box; position: absolute; width: 100%; top: 0; padding: 10px; background: rgba(0,0,0,.6); color: #FFF; transform: translateY(-100%); transition: 300ms; } #Applicability UL.Schemas LI P:before { content: ""; float: right; width: 24px; height: 16px; } #Applicability UL.Schemas LI I:hover + P { transform: none; } H2 > A { text-decoration: none; } H2 > A:hover { text-decoration: underline; } #OldNumbers { position: relative; margin: 5px 0 20px 0; line-height: 1.5; font-size: 15px; } #OldNumbers A { text-decoration: none; } #OldNumbers A:hover { text-decoration: underline; color: #C41230; } #OldNumbers A.Cur { color: #000; } } @media screen and (max-width: 980px) { #Content { padding: 60px 40px 40px 40px; } IMG.Logo { display: block; margin: 0 auto 16px auto; } H1 { text-transform: uppercase; font-size: 38px; margin-bottom: 20px; } #Locked { text-align: center; font-size: 34px; margin-top: 70px; } #Content NAV UL { list-style: none; font-size: 34px; } #Content NAV LI { width: 100%; padding: 22px 0 18px 0; border-top: 1px solid #CCC; font-weight: 700; cursor: pointer; } #Content NAV LI:hover { color: #C41230; } #Content UL.Selected:first-child { background: url(/i/icons.210255569.svg#home) no-repeat center; background-size: 40px 40px; } #Content UL.Selected:first-child LI:first-child { border: none; background: none; } #Content UL.Selected LI:not(.Active) { display: none; } #Content UL.Selected LI.Active { color: #C41230; background: url(/i/icons.210255569.svg#arr-down) no-repeat center right; background-size: 24px 17px; } TABLE.Models { width: 100%; } TABLE.Models TR { position: relative; display: grid; grid-template-columns: auto 80px; border-top: 1px solid #CCC; } TABLE.Models TD:nth-child(3) { grid-row: 1 / 3; grid-column-start: 2; user-select: none; } TABLE.Models TD A { display: block; height: 100%; font-size: 34px; text-decoration: none; color: #000 !important; } TABLE.Models TR:hover A { color: #C41230 !important; } TABLE.Models TD:nth-child(1) A { font-weight: 700; padding-top: 22px; } TABLE.Models TD:nth-child(2) A { font-size: 30px; padding-bottom: 18px; } TABLE.Models TD SPAN { background: yellow; } TABLE.Models TR.Note TD:last-child { background: url(/i/icons.210255569.svg#i-grey) no-repeat right center; background-size: 30px 30px; } TABLE.Models TR.Note A { pointer-events: none; } TABLE.Models TR.Note P { display: none; position: absolute; width: calc(100% - 60px); bottom: 100%; right: 0; padding: 30px; font-size: 30px; line-height: 1.3; background: #666; color: #FFF; } TABLE.Models TR.Note P I { font-style: normal; } TABLE.Models TR.Note P:after { position: absolute; right: 0; top: 100%; margin-top: -20px; content: ""; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 16px solid #666; } TABLE.Models TR.Show P { display: block; } #Search { margin-bottom: 40px; margin-right: -40px; } #Search FORM { display: flex; justify-content: center; align-items: stretch; } #Search INPUT { width: 440px; padding: 20px; text-align: center; font-size: 40px; font-weight: 700; text-transform: uppercase; background: none; outline: none; border: none; border-bottom: 1px solid #CCC; } #Search BUTTON { width: 40px; background: url(/i/icons.210255569.svg#search-red) no-repeat center; background-size: 36px; border: none; outline: none; cursor: pointer; transition: 150ms; } #Search INPUT[value=""] + BUTTON { visibility: hidden; } #Search BUTTON.Loading { background-image: url(/i/icons.210255569.svg#gear); animation: rotating 2s linear infinite; } #Search INPUT::-webkit-input-placeholder { font-size: 32px; font-weight: 400; text-transform: none; } #Search INPUT::-moz-placeholder { font-size: 32px; font-weight: 400; text-transform: none; } #Search INPUT:-ms-input-placeholder { font-size: 32px; font-weight: 400; text-transform: none; } #Search INPUT:-moz-placeholder { font-size: 32px; font-weight: 400; text-transform: none; } #SearchResults { position: relative; display: none; margin-top: 60px; } #SearchResults H2 { margin-bottom: 20px; font-size: 40px; font-weight: 500; } #Close { display: block; float: right; width: 40px; height: 40px; background: url(/i/icons.210255569.svg#search-reset) no-repeat center; background-size: 70px; cursor: pointer; filter: grayscale(1) opacity(.5); transition: 150ms; } #Close:hover { filter: none; } #Applicability H2 { margin: 50px 0 30px 0; text-align: center; } #Applicability H3 { position: relative; } #Applicability H3 B { display: block; font-size: 16px; font-weight: 500; color: #999; } #Applicability H3:after { float: right; font-size: 36px; font-weight: 400; margin-top: -18px; color: #777; content: "+"; } #Applicability H3.Active:after { content: "–"; } #Applicability H4 { margin: 15px 0; color: #999; text-align: center; } #Applicability UL { list-style: none; font-size: 30px; } #Applicability UL.Groups > LI { padding: 15px 0; border-top: 1px solid #999; } #Applicability UL.Series { display: none; } #Applicability UL.Models > LI { position: relative; padding: 15px 40px 15px 0; font-size: 24px; background: url(/i/icons.210255569.svg#arr-down) no-repeat right 32px; background-size: 22px 22px; border-top: 1px solid #CCC; } #Applicability UL.Models > LI B { display: block; font-size: 30px; } #Applicability UL.Models > LI.Opened { background-image: url(/i/icons.210255569.svg#dash); } #Applicability UL.Models > LI.Loading { background: none; } #Applicability UL.Models > LI.Loading:before { position: absolute; right: 0; top: 30px; width: 22px; height: 22px; animation: rotating 2s linear infinite; background: url(/i/icons.210255569.svg#gear); filter: grayscale(1); opacity: .5; content: ""; } #Applicability UL.Models > LI:not(.Opened) > UL { display: none; } #Applicability UL.Schemas { width: 760px; margin-top: 40px; list-style: none; } #Applicability UL.Schemas LI { position: relative; margin-bottom: 40px; font-size: 24px; background: #FFF; text-align: center; } #Applicability UL.Schemas LI A { text-decoration: none; } #Applicability UL.Schemas LI IMG { display: block; width: 100%; } #Applicability UL.Schemas LI IMG.NoPic { display: inline-block; width: 13%; margin: 50px auto; filter: grayscale(1) opacity(.3); } #Applicability UL.Schemas LI DIV { box-sizing: border-box; width: 100%; padding: 20px; background: #666; font-weight: 400; color: #FFF; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #Applicability UL.Schemas LI:hover DIV { background: #C41230; } #Applicability UL.Schemas LI P { padding-top: 20px; text-align: left; background: #F2F2F2; color: #000; font-size: 24px; } #Applicability UL.Schemas LI I { float: left; width: 34px; height: 34px; margin: 20px 7px 0 0; background: url(/i/icons.210255569.svg#i-grey) no-repeat center; background-size: 30px; } H2 > A { text-decoration: none; } #OldNumbers A { text-decoration: none; } #OldNumbers A.Cur { color: #000; } }