Template:User info/sandbox/styles.css

.userinfo-bar {
	margin-top: 1em;
	height: 4px;
}
.userinfo-bar > div {
	width: 25%;
	height: 100%;
}
.userinfo[dir="ltr"] .userinfo-bar > div {
	/* @noflip */
	float: left;
}
.userinfo[dir="rtl"] .userinfo-bar > div {
	/* @noflip */
	float: right;
}
.userinfo-bar-1 {
	background-color: #990000;
}
.userinfo-bar-2 {
	background-color: #339966;
}
.userinfo-bar-3 {
	background-color: #0063bf;
}
.userinfo-bar-4 {
	background-color: #54595d;
}

.userinfo-basic,
.userinfo-detailed-header {
	font-family: 'Helvetica Neue', Helvetica, 'Lucida Grande', Tahoma, Verdana, sans-serif;
}

.userinfo-basic {
	padding-top: 2em;
}
.userinfo-basic:after {
	display: block;
	content: "";
	clear: both;
}
.userinfo-fullname {
	font-size: 2.6em;
	line-height: 1.2;
}
.userinfo-jobtitle {
	font-size: 1.8em;
	line-height: 1.2;
	padding-top: .5em;
}
.userinfo-quote {
	padding-top: 16px;
}

.userinfo-detailed {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 1em;
}
.userinfo-detailed > div {
	flex-grow: 1;
	flex-shrink: 0;
}
.userinfo-detailed-column {
	flex-basis: 250px;
	font-family: 'Helvetica Neue', Helvetica, 'Lucida Grande', Tahoma, Verdana, sans-serif;
}
.userinfo[dir="ltr"] .userinfo-detailed-column {
	/* @noflip */
	margin-right: 2em;
}
.userinfo[dir="rtl"] .userinfo-detailed-column {
	/* @noflip */
	margin-left: 2em;
}
.userinfo-detailed > div > h2 {
	border-bottom: 0;
}
.userinfo-disclaimer {
	color: #555;
	font-size: smaller;
	margin: 1em 0;
}
.userinfo-contact {
	padding: 0 1em 1em 1em;
	background: #F0F0F0;
}