View source for Template:Power Level Houses/styles.css

/* 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;
}