Template:Vault Tour/styles.css

.infobox {
	font-size:.9em; 
	color:#333333; 
	background-image:linear-gradient(#cccccc,#dddddd 1%,#eeeeee 2%, #f2f2f2 3%,#fbfbfb 4%,#ffffff 5%,#fbfbfb 96%,#f2f2f2 97%,#eeeeee 98%,#dddddd 99%,#cccccc);
	letter-spacing:.03em; 
	font-family:Arial,Sans-serif; 
	border-spacing:0px; 
	border:solid 1px #aaaaaa; 
	margin-bottom:15px; margin-top:10px;
	border-radius: 20px; 
	box-shadow: 0 5px 5px #cccccc, 0 3px 6px #cccccc; 
}
.topimage {
	padding-top:30px; padding-bottom:10px; 
	color:#404040; 
	text-shadow: 1px 2px 1px #e6e6e6; 
	text-align: center;
}
.name {
	padding-top:10px; padding-bottom:10px; 
	letter-spacing:.03em; 
	font-size:1.4em; 
	font-weight:bold; 
	color:#404040; 
	background-color:#f4f4f4; 
	text-shadow: 1px 2px 1px #efefef; text-align: center;
	background-image:linear-gradient(290deg,#bbbbbb,#eaeaea 66%);
}
.row {
	display:flex; 
	padding-top:3px;
}
.textleft {
	flex:30%; 
	font-weight:bold; 
	text-align:right; 
	margin-right:5px;
	box-sizing:border-box;
}
.textright {
	flex:70%;
	margin-right:5px;
	box-sizing:border-box;
}
@media screen and (min-width: 701px) {
  div.infobox {
  	width:325px;
  	float:right;
	margin-left:15px;
	margin-right:10px; 
  }
  .pieChartCompare {
  	width:325px;
  	float:none;
	margin-bottom:20px; 
	border:solid 1px #aaaaaa;  
	display:table;
  }
}
@media screen and (max-width: 700px) {
  div.infobox {
  	width:90%;
  	max-width:350px;
  	margin-left:auto;
  	margin-right:auto;
  }
  .pieChartCompare {
  	width:95%;
  	float:none;
	margin-bottom:20px; 
	display:table;
	margin-left:auto; margin-right:auto;
  }
}