Template:Vol/styles.css

.volumeTable {
	background-color: #F0F0F0;
	border: 3px groove #444;
	display: flex;
	flex-direction: column;
}

.volumeTableBottom {
	display: inline-flex;
	flex: 1;
}

.volumeTable ul ol {
	margin: 0 0 0 -10px !important;
}

.volumeTable dl {
	margin-left: 20px;
}

.volumeTable dd {
	margin-left: 0;
}

.listCol1, .listCol2 {
  border: 1px solid #999;
}

.volumeTableRow {
	display: table-row;
}

.volumeTableHead {
	display: table;
	width: 100%;
}

.volumeTableHeading {
	color: white;
}

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

.volumeTableNumber {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #999;
	width: 150px;
	color: white;
	font-size: small;
	font-variant: small-caps;
}

.volumeTableNumberBD {
	font-size: large;
}

.volumeTableNumber a, .volumeTableHeading a, .volumeTableTitle a {
	color: white !important;
}

.noTitle {
	width: 100%;
	font-size: initial;
	padding: 10px;
}

.volumeTableTitle {
	border: 1px solid #999;
	font-weight: bold;
	text-align: center;
	color: white;
	display: table-cell;
	position: relative;
	text-shadow: 1px 1px 1px black;
}

.volumeTableTitle2 {
	padding: 5px;
}

.volumeTableImage {
	border: 1px solid #999;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-width: 150px;
	width: 150px;
}

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

.volumeTableCell {
	border: 1px solid #999;
	display: table-cell;
	padding: 3px 10px;
	width: 50%;
}

.volumeTableCellBD {
	display: table-cell;
	padding: 3px 10px;
	width: 50%;
}

.volumeTableAll {
	display: table-cell;
	width: 100%;
	vertical-align: top;
}

.volumeTableInfo {
	display: table;
	width: 100%;
}

.volumeTableChapters {
	display: table;
	width: 100%;
	margin-top: 10px;
}

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

.volumeTableAllChapters2 {
  width: 100%;
}

.volumeTableChList, .volumeTableChList2 {
  font-size: small;
}

.volumeTableChList2 .noexcerpt {
  font-size: smaller !important;
  display: block;
}

.volumeTableNone p {
	padding-left: 15px;
}

.volumeTableNone {
	font-size: 90%;
}

.volumeTableTitle p {
	margin: 0;
}

.volumeTableScroll {
	overflow: auto;
	max-height: 400px;
}

.volumeTableScroll2 {
	overflow: auto;
	max-height: 95px;
}

.boxAnchorLink {
	float: none;
	display: inline-block;
	position: absolute;
	right: 0;
	top: 10%;
}

.volumeTableBarcode {
	font-size: small;
}

.volumeTableBDBarcodeHeading {
	width: 7.5%;
}

.volumeTableBDDateHeading {
	width: 15%;
}

.volumeTableBDDate {
	width: 25%;
}

.volumeTableBDPriceHeading {
	width: 5%;
}

.volumeTableBDPrice {
	width: 25%;
}

.volumeTableBDEpsHeading {
	width: 5%;
}

.volumeTableBDEps {
	width: 10%;
}

.volumeTableBDDiscHeading {
	width: 5%;
}

.volumeTableBDDisc {
	width: 10%;
}

.volumeTableBDDateContainer {
    width: 35%;
}

.volumeTableBDPriceContainer {
    width: 30%;
}

.volumeTableBDDiscContainer {
    width: 15%;
}

.volumeTableBDEpsContainer {
    width: 20%;
}

.volumeTableHeading2 {
	padding: 3px 10px;
	border: 1px solid #999;
	border-top: none;
	color: white;
}

.volumeTableBDCover2 {
	display: flex;
	flex-grow: 1;
	align-items: center;
	align-self: center;
	justify-content: center;
}

.volumeTableBDCover {
	display: inline-flex;
	flex-direction: column;
}

.volumeTableCovers {
	display:inline-flex;
}

.volumeTableSpecifications {
	margin-left: 10px;
}

.volumeTableLEGallery {
	display: inline-block;
	vertical-align: top;
}

.volumeTableBDDate, .volumeTableBDPrice, .volumeTableBDDisc, .volumeTableBDEps,
.volumeTableBDBarcode {
	font-size: 85%;
}

.volumeTableBDRow {
	display: table;
	width: 100%;
}

.volumeTableBDDateContainer, .volumeTableBDPriceContainer, .volumeTableBDDiscContainer, .volumeTableBDEpsContainer {
	display: table-cell;
}

.volumeTableBDContainer {
	display: flex;
	flex: 1;
}

.volumeTableSpecifications {
    margin: 0.5em 0 0 10px;
}

.volumeTableBDColumn {
    flex: 1;
}

.volumeTableBDColumnHeader {
    padding: 3px;
    font-weight: bold;
    text-align: center;
    border: 1px solid #aaa;
    color: white;
}

.volumeTableBDBarcodeContainer {
	display: table;
	width: 100%;
}

@media only screen and (min-width: 1200px) {
	.volumeTableDate {
		width: 58.85%;
	}
}

@media only screen and (max-width: 1200px) {
	.volumeTableImage {
    	display: block;
    	width: 99.5%;
    	min-width: unset !important;
	}
	
	.volumeTableAllChapters {
		display: block !important;
	}
	
	.volumeTableBottom {
		display: block !important;
	}

	.volumeTableBDContainer {
		display: block !important;
	}
	
	.volumeTableNumber {
    	display: table-header-group;
	}
	
	.volumeTableCovers {
		display: block;
		width: 99.5%;
		text-align: center;
	}
	
	.volumeTableChList2 .noexcerpt {
		display: initial;
	}
	
	.volumeTable .boxAnchorLink {
		display: none;
	}
	
	.volumeTableBDPriceHeading, .volumeTableBDDiscHeading {
		display: table-cell;
	}
	
	.volumeTableBDDate,
	.volumeTableBDPrice,
	.volumeTableBDBarcode {
		font-size: 85%;
		flex-grow: 1;
		width: 65% !important;
	}

	.volumeTableBDDisc,
	.volumeTableBDEps {
		font-size: 85%;
		flex-grow: 0.40 !important;
		width: 10% !important;
	}

	.volumeTableBDDateHeading,
	.volumeTableBDPriceHeading,
	.volumeTableBDDiscHeading,
	.volumeTableBDEpsHeading,
	.volumeTableBDBarcodeHeading {
		font-size: 75% !important;
	}

	.volumeTableBDPriceHeading,
	.volumeTableBDBarcodeHeading {
		width: 15% !important;
		flex-grow: 0.5 !important;
	}

	.volumeTableBDDiscHeading,
	.volumeTableBDEpsHeading {
		width: 15% !important;
		flex-grow: 0.12 !important;
	}
	
	.volumeTableBDDateContainer, .volumeTableBDPriceContainer, .volumeTableBDDiscContainer, .volumeTableBDEpsContainer {
		display: table-row !important;
	}
	
	.volumeTableBDRow {
		display: grid !important;;
		grid-template-columns: 1fr 2fr !important;
	}

	.volumeTableBD .volumeTableCell {
		width: auto !important;
	}
}