Template:Power Level Houses/styles.css
From Archon Arcana - The KeyForge Wiki
/* Outer Box */ @media screen and (min-width: 601px) { .gridOuter { width: 330px; height:645px; float: left; position: relative; display:table; margin-top:10px; margin-right:10px; margin-bottom:10px; } } @media screen and (max-width: 600px) { .gridOuter { width: 330px; height:645px; float: none; position: relative; display:table; margin-top:10px; margin-right:auto; margin-left:auto; margin-bottom:20px; } } /* Header text */ .gridHeader { font-weight: bold; font-size:1.2em; text-align: center; padding-bottom:5px; width:100%; } /* Subtitle text */ .gridSubtitle { width: 260px; position:absolute; left:40px; text-align:center; top:630px; font-size:.85em; color:#696969; } /* Gradient background for the grid */ .gridGradient { width: 260px; background-image: linear-gradient(#cccccc,#dddddd 3%,#eeeeee 6%, #f2f2f2 9%,#fbfbfb 12%,#ffffff 15%,#fbfbfb 85%,#f2f2f2 87%,#eeeeee 91%,#dddddd 94%,#cccccc); position:absolute; left:40px; top:60px; height:500px; border:1px solid #303030; } /*Defines the X- and Y- axes */ .gridXAxis { width: 260px; position:absolute; left:40px; top:565px; height:20px; } .gridXAxis1 { top:0%; left:12%; position:absolute; text-align:center; font-size:.8em; } .gridXAxis2 { top:0%; left:40%; position:absolute; text-align:center; font-size:.8em; } .gridXAxis3 { top:0%; left:65%; position:absolute; text-align:center; font-size:.8em; } .gridYAxis { width: 30px; position:absolute; left:8px; top:52px; height:500px; } .gridYAxis1 { top:0%; width:100%; position:absolute; text-align:center; font-size:.8em; } .gridYAxis2 { top:20%; width:100%; position:absolute; text-align:center; font-size:.8em; } .gridYAxis3 { top:40%; width:100%; position:absolute; text-align:center; font-size:.8em; } .gridYAxis4 { top:60%; width:100%; position:absolute; text-align:center; font-size:.8em; } .gridYAxis5 { top:80%; width:100%; position:absolute; text-align:center; font-size:.8em; } .gridYAxis6 { top:97%; width:100%; position:absolute; text-align:center; font-size:.8em; } .gridAvg { width: 30px; position:absolute; left:305px; font-size:.8em; top:355px; } /* Defines the lines in the grid */ .gridSolidLine1 { border-top: 1px solid #c9c9c9; position: absolute; top: 21%; left: 0px; width: 100%; } .gridSolidLine2 { border-top: 1px solid #c9c9c9; position: absolute; top: 40.5%; left: 0px; width: 100%; } .gridSolidLine3 { border-top: 2px dashed #696969; position: absolute; top: 60.5%; left: 0px; width: 100%; } .gridSolidLine4 { border-top: 1px solid #c9c9c9; position: absolute; top: 80%; left: 0%; width: 100%; } /* Defines the vertical lines and house logo placement */ .gridCotALine { border-left: 2px solid black; position:absolute; left:25%; top:0%; height:100%; } .gridCotA { position:absolute; left:19%; text-align:center; font-size:.8em; opacity: 0.95; } .gridCotA:hover { z-index:10; opacity:1; font-weight:bold; color:#4444c1; text-shadow: 1px 1px 2px #c0c0c0; } .gridAoALine { border-left: 2px solid black; position:absolute; left:50%; top:0%; height:100%; } .gridAoA { position:absolute; left:44%; text-align:center; font-size:.8em; opacity: 0.95; } .gridAoA:hover { z-index:10; opacity:1; font-weight:bold; color:#4444c1; text-shadow: 1px 1px 2px #c0c0c0; } .gridWCLine { border-left: 2px solid black; position:absolute; left:75%; top:0%; height:100%; } .gridWC { position:absolute; left:69%; text-align:center; font-size:.8em; opacity: 0.95; } .gridWC:hover { z-index:10; opacity:1; font-weight:bold; color:#4444c1; text-shadow: 1px 1px 2px #c0c0c0; }