Template:Sandbox3/styles.css

/* Sets up the infobox */
div.infobox {
  font-size: .9em;
  position:relative;
  background-color: #ffffff;
  font-family: Arial, Sans-serif;
  border-spacing: 0px;
  margin-bottom: 15px;
  margin-top: 10px;
  border-radius: 15px;
  box-shadow: 0 10px 20px #cccccc, 0 6px 6px #ababab;
}

@media screen and (min-width: 601px) {
  div.infobox {
    width: 325px;
    float: right;
    margin-left: 10px;
    margin-right: 10px;
  }
}

@media screen and (max-width: 600px) {
  div.infobox {
    width: 95%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Image at the top */
div.topimage img {
  border-radius: 25%;
  box-shadow: 0 10px 20px #cccccc, 0 6px 6px #ababab;
}

div.infobox .topimage {
  padding-top: 0px;
  padding-bottom: 10px;
  text-align: center;
}

/* header */
div.infobox .name {
  position:absolute;
  top:190px; left:0px;
  width:100%;
  letter-spacing: .02em;
  opacity:.9;
  font-size: 2em;
  font-weight: 700;
  box-sizing:border-box;
  height:48px;
      padding-top:4px; padding-bottom:6px;
  color: #000000;
  text-shadow: 1px 2px 1px #0e1b25;
  text-align: center;
}
div.infobox .margin {
  height:15px;
}
div.infobox .smallmargin {
  height:5px;
}
div.infobox .houses {
  position:absolute;
  top:234px; width:100%;
  text-align:center;
}

/* generic row */
div.infobox .row {
  display: flex;
  padding: 1px;
}

div.infobox .middlerow {
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
  font-weight: bold;
}

div.infobox .bottomrow {
  display: flex;
  padding: 1px;
}

div.infobox .textleft {
  flex: 32%;
  font-weight: bold;
  text-align: right;
  margin-right: 5px;
  margin-left: 2px;
}

div.infobox .textright {
  flex: 68%;
  margin-right: 5px;
}

/* sets up the CotA coloring scheme */
div.infoboxcota {
    border: 1px solid #a0a0a0;
}

div.infoboxcota .topline {
	background-image:linear-gradient(45deg,#df3a68,#f7cdd9,#fbe9ee,#ed91ab);
  height:5px;
  position:absolute;
  top:185px;
  width:100%;
}
div.infoboxcota .bottomline {
	background-image:linear-gradient(45deg,#df3a68,#f7cdd9,#fbe9ee,#ed91ab);
  height:5px;
  position:absolute;
  top:238px;
  width:100%;
}
div.topimagecota img {
  border:solid 3px #f1a7bc;
}

div.infoboxcota .name {
  color:#ffffff;
    background-image: linear-gradient(#420b1a, #6e122c);
    opacity:.9;
}

div.infoboxcota .row  {
}

div.infoboxcota .topimage {
  background-image: linear-gradient(#ffffff, #fbe9ee, #ffffff);
}

/* sets up the AoA coloring scheme */
div.infoboxaoa {
    border: 1px solid #a0a0a0;
}

div.infoboxaoa .topline {
  background-image: linear-gradient(45deg, #6b9ec7, #b3ddff, #e6f4ff, #b3ddff);
  height:5px;
  position:absolute;
  top:185px;
  width:100%;
}
div.infoboxaoa .bottomline {
  background-image: linear-gradient(45deg, #6b9ec7, #b3ddff, #e6f4ff, #b3ddff);
  height:5px;
  position:absolute;
  top:238px;
  width:100%;
}

div.infoboxaoa .name {
  color:#ffffff;
    background-image: linear-gradient(#2a506f, #3f78a6);
}
div.topimageaoa img {
  border:solid 3px #b3deff;
}

div.infoboxaoa .row  {
}

div.infoboxaoa .topimage {
  background-image: linear-gradient(#ffffff, #e6f4ff, #ffffff);
}

/* sets up the WC coloring scheme */
div.infoboxwc {
    border: 1px solid #a0a0a0;
    background-image:linear-gradient(#e7ceed 2px,#f6ecf8 5px,#ffffff 10px,#ffffff 400px,#f6ecf8 600px, #e7ceed);
}

div.infoboxwc .topline {
	background-image:linear-gradient(45deg,#a345ba,#e7ceed,#f6ecf8,#c88fd6);
  height:5px;
  position:absolute;
  top:185px;
  width:100%;
}
div.infoboxwc .bottomline {
	background-image:linear-gradient(45deg,#a345ba,#e7ceed,#f6ecf8,#c88fd6);
  height:5px;
  position:absolute;
  top:238px;
  width:100%;
}
div.topimagewc img {
  border:solid 3px #dab5e3;
}

div.infoboxwc .name {
  color:#ffffff;
    background-image: linear-gradient(#411c4a, #622970);
    opacity:.9;
}

div.infoboxwc .row  {
}

div.infoboxwc .topimage {
  background-image: linear-gradient(#ffffff, #f6ecf8, #ffffff);
}

/* sets up the MM coloring scheme */
div.infoboxmm {
    border: 1px solid #a0a0a0;
        background-image:linear-gradient(#b1bccd 2px,#e0e4eb 5px,#ffffff 10px,#ffffff 400px,#b1bccd 600px, #a2aec3);
}

div.infoboxmm .topline {
	background-image:linear-gradient(45deg,#50607c,#a2aec3,#e0e4eb,#a2aec3);
  height:5px;
  position:absolute;
  top:185px;
  width:100%;
}
div.infoboxmm .bottomline {
	background-image:linear-gradient(45deg,#50607c,#a2aec3,#e0e4eb,#a2aec3);
  height:5px;
  position:absolute;
  top:238px;
  width:100%;
}
div.topimagemm img {
  border:solid 3px #b1bccd;
}

div.infoboxmm .name {
  color:#ffffff;
    background-image: linear-gradient(#1e242f, #3c485d);
    opacity:.9;
}

div.infoboxmm .row  {
}

div.infoboxmm .topimage {
  background-image: linear-gradient(#ffffff, #e0e4eb, #ffffff);
}