Template:Vertical header/styles.css
Appearance
/* {{subst:template for discussion|help=off}} */.vertical-header {
line-height: 99%;
vertical-align: bottom;
padding: .4em .4em .2em;
background-position: 50% .4em !important;
min-width: 0.875em;
width: 0.875em;
max-width: 0.875em;
overflow: hidden;
}
.vertical-header-align-top {
vertical-align: top;
}
.vertical-header-align-middle {
vertical-align: middle;
}
/*
We need a selector with a "th." in front of it to make it more specific than the
"th.headerSort" selector used in jquery.tablesorter.styles.
*/
.vertical-header-sortable,
th.vertical-header-sortable {
padding: 21px .4em .2em;
}
.vertical-header-2rows {
/* 0.875em * 2 */
min-width: 1.75em;
width: 1.75em;
max-width: 1.75em;
}
.vertical-header-3rows {
/* 0.875em * 3 */
min-width: 2.625em;
width: 2.625em;
max-width: 2.625em;
}
.vertical-header-4rows {
/* 0.875em * 4 */
min-width: 3.5em;
width: 3.5em;
max-width: 3.5em;
}
.vertical-header div {
/* From {{writing-mode|v1}} */
/*
-webkit-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: tb-rl;
*/
writing-mode: vertical-rl;
/*
layout-flow: vertical-ideographic;
*/
/* From {{Transform-rotate|180}} */
display: inline-block;
/*
-webkit-transform: rotate(180deg);
*/
transform: rotate(180deg);
padding-left: 1px;
text-align: left;
}
.vertical-header-align-top div {
text-align: right;
}
.vertical-header-align-middle div {
text-align: center;
}
.vertical-header-nobold {
font-weight: normal;
}
/* move references to better position */
.vertical-header .reference {
display: inline-block;
vertical-align: middle;
}
/* make images display the right way around */
.vertical-header img {
vertical-align: middle;
transform: rotate(90deg);
transform-origin: center;
/* small images look better with this set when rotated. */
/* image-rendering: pixelated; currently forbidden */
/* this makes up for the fact that the size for layout purposes is now wrong. */
margin: 0 -0.5em;
}