.gridFocus {
display: grid;
gap: 5px 10px;
text-align: center;
grid-template: "label1" "image1" "radio1" "label2" "image2" "radio2"/1fr;
}
.gridFocus #focusDesktopImage {
display: none;
}
.gridFocus .radio {
display: none;
}
.gridWidth {
display: grid;
grid-template-rows: [r1] 30% [r2] auto [r3];
grid-template-columns: [c1] 32% [c2] 110px [c3] auto [c4];
}
.gridWidth #widthDesktopImage {
display: none;
}
.gridWidth #widthMobileImage {
width: 100%;
grid-area: r1/c1/r3/c4;
}
.gridWidth #widthInput {
grid-area: r1/c2/r2/c3;
width: 100px;
height: 21px;
justify-self: center;
align-self: self-end;
font-weight: bold;
text-align: center;
}
.gridWidth #widthInputLabel {
grid-area: r1/c3/r2/c4;
color: white;
justify-self: start;
align-self: self-end;
}
.gridAnsi {
display: grid;
-moz-column-gap: 10px;
column-gap: 10px;
grid-template-rows: [r1] auto [r2];
grid-template-columns: [c1] auto [c2] 110px [c3] auto [c4];
}
.gridAnsi #ansi {
grid-area: r1/c2/r2/c3;
width: 100px;
height: 21px;
justify-self: center;
align-self: self-end;
font-weight: bold;
text-align: center;
color: black;
}
.gridAnsi #ansiLabel {
grid-area: r1/c3/r2/c4;
justify-self: start;
align-self: self-end;
color: #f6bd25;
margin: 0;
}
.gridAspect {
display: grid;
gap: 5px 10px;
text-align: center;
grid-template: "value1" "image1" "desc1" "radio1" "value2" "image2" "desc2" "radio2" "value3" "image3" "desc3" "radio3"/1fr;
}
.gridAspect .radio {
display: none;
}
.gridAspect .radioLabel {
display: none;
}
.gridMode {
display: grid;
gap: 5px 10px;
text-align: center;
grid-template: "value1" "image1" "desc1" "radio1" "value2" "image2" "desc2" "radio2" "value3" "image3" "desc3" "radio3"/1fr;
}
.gridMode .radio {
display: none;
}
.gridMode .radioLabel {
display: none;
}
.gridBlackout {
display: grid;
gap: 5px 10px;
text-align: center;
grid-template: "value1" "image1" "desc1" "radio1" "value2" "image2" "desc2" "radio2" "value3" "image3" "desc3" "radio3"/1fr;
}
.gridBlackout .radio {
display: none;
}
.gridBlackout .radioLabel {
display: none;
}
.gridCheckBlocks {
display: grid;
gap: 5px 10px;
grid-template: "title" "focus" "width" "ansi" "aspect" "mode" "blackout"/1fr;
}
.gridPaint {
display: grid;
gap: 10px 30px;
grid-template: "caption" "image" "desc" "alert" "volume" "cart"/1fr;
}
.gridPaint #paintImage {
display: flex;
}
.gridPaint #paintImage img {
width: 50%;
margin: auto;
}
.gridPaint #paintCaption {
justify-self: center;
}
.gridPaint #paintDescription {
font-style: italic;
font-weight: normal;
}
.gridPaint #paintVolumeValue {
font-weight: bold;
color: #f6bd25;
}
.gridPaint #paintOrderButton {
justify-self: center;
margin-bottom: 20px;
}
.gridWall {
display: grid;
grid-template-columns: [c1] 33% [c2] 70px [c3] auto [c4] 70px [c5] 10% [c6];
grid-template-rows: [r1] 32% [r2] 21px [r3] 21px [r4] auto [r5] 21px [r6];
}
.gridWall #wallImage {
grid-area: r1/c1/r5/c6;
width: 100%;
}
.gridWall #wallWidth {
grid-area: r3/c2/r4/c3;
width: 60px;
height: 21px;
justify-self: center;
align-self: self-end;
font-weight: bold;
text-align: center;
}
.gridWall #wallHeight {
grid-area: r2/c4/r3/c5;
width: 60px;
height: 21px;
justify-self: center;
align-self: self-end;
font-weight: bold;
text-align: center;
}
.gridWall #wallVolume {
grid-area: r4/c1/r5/c6;
text-align: left;
margin-top: 40px;
margin-bottom: 40px;
}
.gridWall #wallVolume #wallVolumeValue {
font-weight: bold;
color: #f6bd25;
}
.gridWall #wallVolume #wallOrderButton {
grid-area: r5/c1/r6/c6;
}
.gridAdded {
display: grid;
gap: 10px 30px;
grid-template: "title1" "image1" "desc1" "volume1" "cart1"/1fr;
}
.gridAdded #primerImage {
display: flex;
}
.gridAdded #primerImage img {
width: 50%;
margin: auto;
}
.gridAdded #primerCaption {
justify-self: center;
}
.gridAdded #primerDescription, .gridAdded #anzaDescription {
font-style: italic;
font-weight: normal;
align-self: self-start;
}
.gridAdded #primerVolumeValue, .gridAdded #anzaVolumeValue {
font-weight: bold;
color: #f6bd25;
}
.gridAdded #primerOrderButton, .gridAdded #anzaOrderButton {
margin: auto;
justify-self: center;
}
.gridLocation {
display: grid;
grid-template: "image"/100%;
}
.gridLocation #locationImage img {
width: 100%;
}
.gridLocation #locationLength {
position: absolute;
left: 35%;
top: 29%;
width: 60px;
height: 21px;
}
.gridLocation #locationLengthValue {
position: absolute;
left: 55%;
top: 30%;
color: white;
}
.gridResolution {
display: grid;
gap: 5px 50px;
text-align: center;
grid-template: "image1 image2 image3" "radio1 radio2 radio3" "image4 image5 . " "radio4 radio5 . "/1fr 1fr 1fr;
margin-bottom: 40px;
}
.gridResolution .radio {
display: none;
}
.gridResolution img {
width: 100%;
}
.gridQuality {
display: grid;
grid-template: "screenHeader" "screenBody" "angleHeader" "angleBody" "totalHeader" "totalBody"/1fr;
}
.gridQuality > div {
padding: 5px;
border: 1px solid white;
}
.gridScreen {
display: grid;
grid-template: "image"/1fr;
font-weight: bold;
text-align: center;
}
.gridScreen img {
width: 100%;
}
.gridScreen #screenHeight {
color: rgb(91, 155, 213);
position: absolute;
left: 0%;
top: 40%;
width: 70px;
font-size: 0.8em;
}
.gridScreen #screenWidth {
color: red;
position: absolute;
left: 40%;
top: 77%;
width: 70px;
font-size: 0.8em;
}
.gridScreen #screenDiagonal {
color: green;
position: absolute;
left: 39%;
top: 42%;
width: px;
font-size: 0.8em;
}
.gridScreen #screenSquare {
color: black;
position: absolute;
left: 74%;
top: 37%;
border: 2px solid black;
padding: 15px 10px;
width: 80px;
font-size: 0.8em;
}
.gridAngle {
display: grid;
gap: 0px 5px;
grid-template: "image1 image2" "desc desc" "alert alert"/3fr 1.3fr;
}
.gridAngle img {
width: 100%;
}
.gridAngle #angleInfo {
position: absolute;
left: 60%;
top: 38%;
width: 70px;
text-align: center;
}
.gridAngle #angleImage1 {
padding: 5px;
border: 1px solid white;
}
.gridAngle #angleImage2 {
justify-self: center;
align-self: center;
}
.gridTotal {
display: grid;
row-gap: 5px;
grid-template: "totalResolution" "totalIllumination";
}
.gridTotal .gridTotalResolution {
display: grid;
padding: 10px;
border: 1px solid white;
-moz-column-gap: 10px;
column-gap: 10px;
grid-template: "image alert" "image desc"/1fr 3fr;
}
.gridTotal .gridTotalResolution #totalResolutionImage {
align-self: center;
justify-self: center;
}
.gridTotal .gridTotalResolution #totalResolutionImage img {
width: 100%;
}
.gridTotal .gridTotalIllumination {
display: grid;
padding: 10px;
border: 1px solid white;
-moz-column-gap: 10px;
column-gap: 10px;
grid-template: "image info" "image alert" "image desc"/1fr 3fr;
}
.gridTotal .gridTotalIllumination #totalIlluminationImage {
align-self: center;
justify-self: center;
}
.gridTotal .gridTotalIllumination #totalIlluminationImage img {
width: 100%;
}