Template:Figure/Styles.css

From JoJo's Bizarre Encyclopedia - JoJo Wiki
Jump to navigation Jump to search
.figureBox {
	font-size: 90%;
	width:99.5%;
	margin-bottom: 8px;
}

.figureBoxMain {
	border: 2px solid black;
}

.figureImage {
	 display:flex;
	 align-items: center;
	 padding:10px;
	 border: 1.5px solid black;
	 text-align: center;
}

.figureBoxCell {
	border: 1.5px solid black;
	display:table-cell;
	padding: 3px;
}

.w-25 {
	width: 25%;
}

.w-35 {
	width: 35%;
}

.w-50 {
	width: 50%;
}

.w-65 {
	width: 65%;
}

.figureBoxHeading {
	font-size: 15px;
	color:white;
	font-family:'Rubik',sans-serif;
	text-shadow: 1px 1px 1px #333333;
	border: 1.5px solid black;
	text-align: center;
}

.figureBoxHeading2 {
	font-size: 14px;
	color:white;
	font-family:'Rubik',sans-serif;
	text-shadow: 1px 1px 1px #333333;
	border: 1.5px solid black;
	text-align: center;
}

.figureTitle {
	display: inline-block;
}

.figureBoxSub {
	border: 1.5px solid black;
	color: white;
	text-shadow: 1px 1px 1px #333333;
}

.figureImage img {
	border: 2px solid black;
}

.figureInner {
	display: flex;
	flex-direction: row;
	height: 100%;
	width: 100%;
}

.figureBoxColumn1 {
	text-align: center;
	display:flex;
	flex-wrap: wrap;
	width: 35%;
}

.figureBoxColumn1 .figureImage {
  width: 100%;
}

#figureColumn2 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
}

.figureData {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.figureBoxBottom {
	flex-grow: 1;
}

.figureJPN {
	font-size:small;
	padding-left:5px;
}

.figureBoxRow {
	width:100%;
	text-align:center;
	display:flex;
}

.boxAnchorLink {
	display:inline-block;
	float: right;
}

.figureBoxAccessories {
	padding: 3px;
	text-align: center;
}

.figureBoxAccessories2{
	padding: 3px;
	border: 1.5px solid black;
}

.ichibanData {
	font-size: 85%;
	text-align: left;
}

@media only screen and (max-width: 1200px) {
.ichibanBox .figureImage {
	display: block !important;
}

.ichibanBox .figureInner {
	display:table !important;
}

.ichibanBox .figureBoxColumn1 {
	width: 100% !important;
}

.ichibanBox #figureColumn2 {
	display: block !important;
	width: 100% !important;
}
}

@media only screen and (max-width: 800px) {
.figureImage {
	display: block !important;
}

.figureInner {
	display:table !important;
}

.figureBoxColumn1 {
	width: 100% !important;
}

#figureColumn2 {
	display: block !important;
	width: 100% !important;
}
}