/*

File: alcumus.css

Alcumus styles on main pages.

*/

/*********************************************************/
/* General */
/*********************************************************/

#main-content ul,
#main-content ol {
	margin: 0;
}

.alc-left {
	float: left;
}

.alc-right {
	float: right;
}

.alc-clear {
	clear: both;
}

.alc-one-line {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.alc-relative {
	position: relative;
}

.alc-pointer {
	cursor: pointer;
}

/* List from http://stackoverflow.com/questions/2032652/ */
.alc-pre {
	font-family: Consolas, Monaco, Lucida Console, Liberation Mono,
		DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
}

.alc-noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#alc-page .aops-panel h1 {
	font-size: 18pt;
}

.alc-uniform-columns {
	display: table;
	table-layout: fixed;
	width: 100%;
}
.alc-uniform-columns-inner {
	display: table-row;
	vertical-align: top;
}
.alc-uniform-columns-inner > div {
	display: table-cell;
	vertical-align: top;
}

.alc-flex-space {
	margin: 0 auto auto 0;
}

/*********************************************************/
/* Main containers */
/*********************************************************/

#alc-page {
	/* From http://css-tricks.com/snippets/css/better-helvetica/ */
	font-family: "Roboto", sans-serif;
	font-weight: 300;

	width: 100%;
	margin: 0 auto;
	position: relative;

	display: -webkit-flex;

	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
}
#alc-page.alc-no-sidebar {
	width: auto !important;
}

/* main.css inexplicably sets this to a different value at some window size,
which results in fail. */
.grid {
	letter-spacing: normal !important;
}

#side-column .white-panel {
	margin: 0px 10px 10px 10px !important;
}

#side-column .alc-log-panel {
	margin: 10px !important;
}

#side-column .alc-active-quests-panel {
	margin: 10px !important;
}

/*********************************************************/
/* Intro */
/*********************************************************/

.alc-bottom-right-button {
	position: absolute;
	bottom: 16px;
	right: 16px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	        align-items: center;
}

.alc-bottom-right-button .btn {
	height: 30px;
	line-height: 30px;
	width: 150px;
	text-transform: uppercase;
}

.alc-get-started,
.alc-intro-bullet-head {
	color: #1b365d;
	font-size: 16pt;
	font-weight: bold;
}

.alc-get-started,
.alc-intro-bullet.alc--last {
	width: 60%;
	width: calc(100% - 200px);
}

.alc-intro-bullet {
	padding: 10px 0;
}
.alc-intro-bullet > div {
	display: inline-block;
}
.alc-intro-bullet-icon {
	width: 100px;
	text-align: center;
	vertical-align: top;
	padding-top: 5px;
}
.alc-intro-bullet-icon img {
	width: 50px;
	height: auto;
}
.alc-intro-bullet-main {
	width: 70%;
	width: calc(100% - 130px); /* 100 + 2 * aops panel padding */
}

.alc-intro-footnote {
	margin-bottom: 20px;
}

.alc--register {
	margin-left: 8px;
}

.alc--login.btn-primary {
	width: auto;
}

@media (max-width: 640px) {
	.alc-intro-bullet.alc--last {
		width: auto;
		margin-bottom: 40px;
	}
}

@media (max-width: 500px) {
	.alc-get-started {
		visibility: hidden;
		height: 40px;
	}
	.alc-intro-bullet-icon {
		width: 60px;
	}
	.alc-intro-bullet-main {
		width: 75%;
		width: calc(100% - 90px); /* 60 + 2 * aops panel padding */
	}
	.alc-bottom-right-button .btn {
		position: static;
		text-align: center;
	}
}

/*********************************************************/
/* Stuff that will make levans mad */
/*********************************************************/

/* Give same line to top and bottom of menu */
#side-column .menu:last-of-type {
	padding-bottom: 0;
}

#side-column .menu.open h1 {
	background-color: #1b365d;
}
#side-column .menu.open h1 a {
	color: #fff !important;
}

/* Rip of h1 */
.aops-panel > h2 {
	margin: -5px 0 5px;
}

/*********************************************************/
/* Panels */
/*********************************************************/

/* aops-panel with white text embeddable in the top line and a possible subheader */
.alc-panel-headed {
	box-shadow: 2px 2px 6px #ccc;

	display: -webkit-flex;

	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
}

.alc-panel-headed .alc--header {
	background-color: #1b365d;
	padding: 6px 8px;
	color: white;
	font-size: 12pt;

	display: -webkit-flex;

	display: flex;
	-webkit-flex-direction: row;
	        flex-direction: row;
}
.alc-panel-headed .alc--header h1 {
	font-size: 16pt;
	line-height: 16pt;
	color: white;
	margin: 0;
	margin-right: auto;
}

.alc-panel-headed .alc--sub-header {
	background-color: #009fad;
	padding: 0px 8px;
	height: 18px;
	color: white;
	font-size: 10pt;

	display: -webkit-flex;

	display: flex;
	-webkit-flex-direction: row;
	        flex-direction: row;
}
.alc-panel-headed .alc--sub-header.alc--two-lines {
	height: 38px;
}

.alc-panel-headed .alc--main {
	background-color: white;
	padding: 10px 15px;
	-webkit-flex: 1 0 auto;
	        flex: 1 0 auto;

	display: -webkit-flex;

	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
}

/*********************************************************/
/* Unsorted */
/*********************************************************/

.alc-small-stats {
	font-size: 9pt;
	font-weight: bold;
	color: #9f9f9f;
}

/*********************************************************/
/* Custom Tooltip */
/*********************************************************/

.alc-custom-tooltip {
	z-index: 100;

	background-color: #a0a0a0;
	color: #fff;
	border-radius: 6px;
	padding: 6px;

	text-align: center;
	font-weight: normal;
	font-size: 8pt;
	text-align: left;
}

.alc-custom-tooltip h2 {
	color: #fff !important;
	margin: 0;
	padding: 0;
	font-size: 10pt;
	font-weight: bold;
}

/*
This crazy utility class is used when you have an element that should be able
to accept JS-specified widths and heights, but its center should be pinned
to the same position. Give the element's original parent relative positioning,
wrap the element in an alc-center-pin div, and set the alc-center-pin's width
and height to the desired size of the element.
*/
.alc-center-pin {
	position: absolute;
	left: 50%;
	top: 50%;
	/* not really needed, but it makes a good default */
	width: 100%;
	height: 100%;
}
/* universal selector not good for performance; for now, modify this whenever
a new center pin tag is needed */
.alc-center-pin > img,
.alc-center-pin > div {
	margin-left: -50%;
	margin-top: -50%;
	width: 100%;
	height: 100%;
}

/*********************************************************/
/* Results Icons */
/*********************************************************/

.alc-result-icon {
	font-style: normal;
	font-family: AoPS;
	font-size: 14pt;
	line-height: 20px;
}
.alc-result-icon.alc-result-Y {
	color: #1496d8;
}
.alc-result-icon.alc-result-N {
	color: #ef7f00;
}
.alc-result-icon.alc-result-G {
	color: #e2002b;
}

/*********************************************************/
/* Category Dropdown */
/*********************************************************/

/* All these styles are unused (we're replacing the aops-select with chosen) */
.alc-cat-dropdown .aops-select {
	width: 200px;
	height: 28px;
	line-height: 28px;
	font-size: 11pt;
	color: #1b365d;
	background-color: #eee;
	border: 0;
}

.alc-cat-dropdown .chosen-container-single .chosen-single {
	height: 27px;
	font-size: 11pt;
}
.alc-cat-dropdown .chosen-container-single .chosen-results li {
	font-size: 11pt;
}

/*********************************************************/
/* General Progress Table */
/*********************************************************/

.alc-progress-tables table {
	width: 100%;
	text-align: left;
	border: none;
	color: #1b365d;
	font-size: 11pt;
	table-layout: fixed;
}

.alc-progress-tables td {
	padding: 8px 10px;
	border: 2px solid white;
	background-color: #eee;
}

/* Column widths */

.alc-progress-tables col.alc--name-col {
	width: 50%;
}
.alc-progress-tables col.alc--bar-col {
	width: 50%;
}
/* Width tweaks if the table has a date column (so date, name, progress) */
.alc-progress-tables.alc--has-date col.alc--date-col {
	width: 15%;
}
.alc-progress-tables.alc--has-date col.alc--bar-col {
	width: 35%;
}

/* Name column of subject/class list of both header and main table */
.alc-progress-tables td.alc--name-cell {
	vertical-align: top;
}
/* Header cells */
.alc-progress-tables .alc--table-head td {
	font-weight: bold;
}
/* Progress header */
.alc-progress-tables .alc--table-head td.alc--bar-cell {
	padding-left: 24px;
}
/* First row after the header */
.alc-progress-tables .alc--table-main tr:first-child td {
	border-top: none;
}
/* Progress bars */
.alc-progress-tables .alc--table-main td.alc--bar-cell {
	padding: 0 2px;
}

.alc-progress-tables .alc--table-main .alc--name {
	display: block;
	font-weight: bold;
}
.alc-progress-tables .alc--table-main tr.alc--topic .alc--name {
	font-weight: normal;
}

.alc-progress-tables .alc--table-main tr.alc--topic.alc--selected td {
	background-color: #cde;
}
.alc-progress-tables .alc--table-main tr.alc--topic:hover .alc--name,
.alc-progress-tables .alc--table-main tr.alc--topic.alc--selected .alc--name {
	font-weight: bold;
}

.alc-progress-tables .aops-rogb-bar-array .aops--bar div {
	background-color: #eee;
}

/* Warning: tricky and sensitive CSS to get progress bar in td to work here */
/* (Problem is FF doesn't allow position: relative on td) */
.alc-progress-tables .alc--table-main tr.alc--topic {
	height: 37px;
}
.alc-progress-tables .alc--table-main tr.alc--topic td {
	line-height: 37px;
	padding-top: 0;
	padding-bottom: 0;
}
.alc-progress-tables .alc--table-main tr.alc--topic td .alc-relative {
	/* 37 (tr height) + 1 (fudge) - 24 (bar height) = 14 total padding */
	padding-top: 7px;
	padding-bottom: 7px;
}
.alc-progress-tables .alc--table-main tr.alc--topic td .aops-rogb-container {
	height: 24px;
	line-height: 24px;
}

/*********************************************************/
/* Log */
/*********************************************************/

/* override of some white-panel styles */
#side-column .alc-log-panel.white-panel {
	padding: 0;
	text-align: left;
	color: #21409a;
}
#side-column .alc-log-panel.white-panel h1 {
	font-size: 14pt;
	margin: 0;
	padding: 4px 10px;
}

.alc-log-panel .aops-scroll-outer {
	width: 201px;
}
.alc-log-panel .aops-scroll-inner {
	width: 221px; /* 201 (outer) + 20 (bar) */
}
.alc-log-panel .aops-scroll-content {
	width: 201px;
	padding: 1px 0;
	overflow-x: hidden;
}

.alc-log-panel .aops-scroll-bar {
	right: 0;
}

.alc-log-panel h1 {
	border-bottom: 2px solid #9f9f9f;
}
.alc-log-entry {
	position: relative;
	width: 100%;
	padding: 6px 0;
	font-size: 12px;
	border-bottom: 2px solid #9f9f9f;
}
.alc-log-entry:last-child {
	border-bottom: 0;
}

.alc-log-entry .alc-one-line {
	text-overflow: initial;
}

.alc-log-entry.alc-one-line {
	width: auto;
	margin: 0;
	padding-left: 10px;
	padding-right: 6px;
	font-size: 10px;
}

.alc-log-entry .alc-log-text {
	padding-left: 10px;
	margin-right: 6px;
}

.alc-log-entry .alc-topic-name {
	font-weight: bold;
}
.alc-log-entry a.alc-topic-name:hover {
	text-decoration: underline;
}

.alc-log-entry .aops-rogb-topic-container {
	margin: 4px 6px;
}
.alc-log-entry .aops-rogb-topic-container .aops-rogb-container {
	height: 20px;
	line-height: 20px;
}

/* Quest entries */

/* Log gets tiny icon, flyout gets full badge */
.alc-log-entry .alc-log-quest-badge .alc-quest-badge-image,
#flyout .alc-log-quest-badge .alc-quest-icon {
	display: none;
}
.alc-log-entry .alc-log-quest-badge {
	position: absolute;
	top: 4px;
	left: 4px;
}
.alc-log-entry .alc--body {
	padding-left: 21px;
	font-size: 10px;
	/* alc-one-line, which should apply in log but not flyout */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#flyout .alc-log-quest-badge {
	float: left;
	margin: 0 6px 6px 0;
}
.alc-log-entry .alc-quest-icon {
	width: 12px;
	height: 12px;
}
#flyout .alc-log-quest-badge .alc-quest-badge-image {
	height: 50px;
	width: 50px;
}

/* Problem finished entry */

.alc-log-entry .alc-summary-box,
.alc-log-entry .alc-xp-box,
.alc-log-entry .alc-time-box {
	padding-left: 21px;
	margin-bottom: 4px;
	font-size: 9px;
}

.alc-log-entry .alc-summary-box {
	margin: 0;
}
.alc-log-entry .alc-summary-box .alc-result-icon {
	position: absolute;
	top: 6px;
	left: 5px;
	font-size: 11pt;
	line-height: 16px;
}
.alc-log-entry .alc-log-problem-text {
	display: inline-block;
	font-size: 10px;
	max-width: 100%;
	width: 100%;
}

.alc-log-entry .alc-xp-box img {
	position: relative;
	top: -1px;
}
.alc-log-entry .alc-xp-box span {
	display: inline-block;
	font-weight: bold;
	margin-right: 3%;
}

.alc-log-entry .alc-time-box {
	font-style: italic;
}

/* End problem finished entry */

/*********************************************************/
/* Active quests panel */
/*********************************************************/

/* override of some white-panel styles */
#side-column .alc-active-quests-panel.white-panel {
	padding: 4px 10px 10px 10px;
	text-align: left;
	color: #21409a;
}
#side-column .alc-active-quests-panel.white-panel h1 {
	font-size: 14pt;
}

.alc-quest-badge {
	display: inline-block;
	position: relative;
	height: 50px;
	width: 50px;
	margin-right: 8px;
}
.alc-quest-badge .alc-quest-badge-image {
	height: 50px;
	width: 50px;
}
.alc-quest-badge.alc--inactive .alc-quest-badge-image {
	opacity: 0.3;
}

.alc-active-quests-panel .alc-quest-badge {
	cursor: pointer;
}

.alc-quest-badge .alc-custom-tooltip {
	position: absolute;
	left: -10px; /* nudge slightly past badge, can't go off sidebar */
	top: 56px; /* image height + arrow size = 50 + 6 */
	width: 160px;
}

/* Speech bubble triangle - below */
.alc-quest-badge .alc-custom-tooltip:before {
	content: " ";
	position: absolute;
	left: 29px;
	top: -11px;
	width: 0px;
	height: 0px;

	z-index: 100;

	border: 6px solid transparent;
	border-bottom-color: #a0a0a0;
}

/* Mostly copied from profile-bottom-item rules */
.alc-quest-active-modal {
	padding: 10px 20px;
}
.alc-quest-active-modal .alc-quest-badge,
.alc-quest-active-modal .alc--info {
	display: inline-block;
	vertical-align: top;
	text-align: left;
}
.alc-quest-active-modal .alc-quest-badge {
	height: 50px;
	line-height: 50px;
	margin-right: 8px;
}
.alc-quest-active-modal .alc--name {
	color: #1b365d;
	text-transform: uppercase;
	font-size: 11pt;
	font-weight: bold;
}
.alc-quest-active-modal .alc--description {
	color: #1b365d;
	font-size: 10pt;
	font-weight: bold;
	max-height: 42px;
	overflow-y: hidden;
}
.alc-quest-active-modal .alc--abandon {
	margin: 10px auto 0 auto;
	max-width: 420px;
	font-style: italic;
}

/*********************************************************/
/* Side column responsive design */
/*********************************************************/

@media (max-width: 840px) {
	#side-column .alc-log-panel {
		display: none !important;
	}
}

/*********************************************************/
/* Problem Page Layout */
/*********************************************************/

.alc-problem-page {
	-webkit-flex: 1 0 auto;
	        flex: 1 0 auto;

	display: -webkit-flex;

	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
}

.alc-problem-page-top {
	height: 130px;

	display: -webkit-flex;

	display: flex;
	-webkit-flex-direction: row;
	        flex-direction: row;
}

.aops-panel.alc-subject-progress {
	-webkit-flex: 1 0 0;
	        flex: 1 0 0;
	margin-right: 10px;
	margin-bottom: 10px;
}

.aops-panel.alc-focus-panel {
	-webkit-flex: 1 0 0;
	        flex: 1 0 0;
	margin-bottom: 10px;
}

.alc-problem-page-main {
	-webkit-flex: 1 0 auto;
	        flex: 1 0 auto;
	margin-bottom: 10px;

	display: -webkit-flex;

	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
}

.alc-current-problem,
.alc-past-problem {
	-webkit-flex: 1 1 auto;
	        flex: 1 1 auto;

	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
}

.alc-problem-panel,
.alc-solution-panel {
	-webkit-flex: 1 0 auto;
	        flex: 1 0 auto;
}

.alc-problem-panel .alc-error,
.alc-solution-panel .alc-error {
	color: red;
	font-size: 9pt;
}

/* Responsive design */

@media (max-width: 640px) {
	.aops-panel.alc-subject-progress {
		display: none;
	}
	.aops-panel.alc-focus-panel {
		width: 100%;
	}
}

/*********************************************************/
/* Subject XP Bar */
/*********************************************************/

/*
Regrettably, CSS makes it hard to tweak the size of this bar. If you need to
override the default sizes for the bar to size N (default 24px), set the following:
	.alc-xp-display { height: N; width: N; }
	.alc-xp-display .alc-level-emblem { top: ??; left: -7N/8; width: 25N/12; }
	.alc-xp-display .alc-level-emblem span { top: ??; line-height: 25N/12; font-size: 7N/12pt; }
	.alc-xp-display .alc--label { line-height: N; font-size: 2N/3pt; }
??s have to be tweaked...
*/

.alc-xp-display {
	position: relative;

	height: 24px;
	width: calc(100% - 16px);
	margin: 8px 0 8px 16px;

	background-color: #eee;
}

.alc-level-emblem {
	position: absolute;
	top: -15px;
	left: -21px;
	height: 208%;
	width: 50px;
	z-index: 1;
}
.alc-level-emblem img {
	height: 100%;
	width: 100%;
}
/* Contains the number with the current level */
.alc-level-emblem span {
	position: absolute;
	/* Positioned relative to emblem */
	top: 0px;
	width: 100%;
	line-height: 50px;

	color: #fff;
	font-size: 14pt;
	font-weight: bold;

	text-align: center;
	z-index: 2;
}

.alc-xp-display .alc-xp-bar {
	position: absolute;
	height: 100%;
	/* Color set in JS */
}

.alc-xp-display .alc--label {
	position: absolute;
	top: 0;
	/* left/right set in JS */

	line-height: 24px;
	color: #fff;
	font-size: 12pt;
	font-weight: bold;
}
.alc-xp-display .alc--label.alc--outside {
	color: #9f9f9f;
}

/*********************************************************/
/* Subject Panel */
/*********************************************************/

.alc-subject-progress .alc-xp-display {
	margin: 8px 0 0 20px; /* tweak of the original's 8 0 8 8 */
}

/*********************************************************/
/* Focus Panel */
/*********************************************************/

/* Copies thhttps://psaopstest.com/report/progress_report.php?class_id=1843&user_id=408456e usual rogb colors as foreground colors */
.alc-focus-panel h1.aops-rogb-red {
	background-color: inherit;
	color: #e2002b;
}
.alc-focus-panel h1.aops-rogb-orange {
	background-color: inherit;
	color: #ef7f00;
}
.alc-focus-panel h1.aops-rogb-green {
	background-color: inherit;
	color: #3da000;
}
.alc-focus-panel h1.aops-rogb-blue {
	background-color: inherit;
	color: #1496d8;
}

.alc-focus-panel .aops-rogb-topic-container {
	margin-top: 8px;
}
.alc-focus-panel .aops-rogb-topic-container .aops-rogb-container {
	height: 24px;
}

.alc-focus-panel .alc--all-topics-text {
	margin-top: 8px;
	height: 24px;
	font-style: italic;
}

.alc-focus-panel .alc--change-button {
	font-size: 10pt;
	padding: 0; /* To left align with panel heading */
}

/*********************************************************/
/* Focus Editor Dialog */
/*********************************************************/

.alc-edit-focus {
	width: 100%;
	height: 100%;
	min-width: 550px;
	background-color: #fff;
}

.alc--top {
	margin-top: 6px;
}

/* Default modal has too much top padding */
/*.alc-edit-focus > .alc--top {
	position: relative;
	top: -8px;
	margin-bottom: -8px;
}*/
/* Various overrides */
.alc-edit-focus > .alc--top > h2 {
	text-align: left;
	margin-top: 0;
	width: 50%; /* Fix weird bug where this tag obscures the dropdown */
}

.alc-edit-focus .alc-cat-dropdown .aops-select {
	height: 22px;
	line-height: 22px;
	font-size: 11pt;
}

.alc-edit-focus .alc-topic-name,
.alc-edit-focus .alc-parent-name {
	font-weight: bold;
}
.alc-edit-focus a.alc-topic-name:hover,
.alc-edit-focus a.alc-parent-name:hover {
	text-decoration: underline;
}

.alc-edit-focus .alc-progress-tables,
.alc-edit-focus .alc-edit-focus-all-display {
	height: 75%;
	height: calc(100% - 84px);
	padding: 10px 0;
}

/* With .alc--advanced, there's another line of text, so we decrease by another 21px. */
.alc-edit-focus.alc--advanced .alc-progress-tables,
.alc-edit-focus.alc--advanced .alc-edit-focus-all-display {
	height: 70%;
	height: calc(100% - 105px);
	padding: 10px 0;
}

.alc-edit-focus .aops-scroll-outer {
	height: 95%;
	height: calc(100% - 25px);
}
/* Palmer on these next calcs: I have no idea what I'm doing */
/* Looks like these widths are now properly taken care of by scrollbar autosize.
  Leaving these lines because they give a close-to-correct initial appearance. */
.alc-edit-focus .aops-scroll-outer {
	width: 100%;
}
.alc-edit-focus .aops-scroll-inner {
	width: 110%;
	width: calc(100% + 20px);
}
.alc-edit-focus .aops-scroll-content {
	width: 100%;
	width: calc(100% - 3px);
}

/* Tweaking row sizes */
.alc-edit-focus .alc-progress-tables .alc--table-head tr,
.alc-edit-focus .alc-progress-tables .alc--table-main tr {
	height: 21px;
}
.alc-edit-focus .alc-progress-tables .alc--table-head tr td,
.alc-edit-focus .alc-progress-tables .alc--table-main tr td {
	line-height: 21px;
	padding-top: 0;
	padding-bottom: 0;
}
.alc-edit-focus .alc-progress-tables .alc--table-main tr td .alc-relative {
	/* 21 (tr height) + 1 (fudge) - 14 (bar height) = 8 total padding */
	padding-top: 4px;
	padding-bottom: 4px;
}
.alc-edit-focus
	.alc-progress-tables
	.alc--table-main
	tr
	td
	.aops-rogb-container {
	height: 14px;
	line-height: 14px;
}

.alc-edit-focus .alc--buttons {
	float: right;
}
.alc-edit-focus .alc-new-focus {
	min-height: 24px;
}

/* Responsive design */

.alc-edit-focus h2.alc--small {
	display: none;
}

@media (max-width: 640px) {
	.alc-edit-focus {
		min-width: 0;
	}
}
@media (max-width: 500px) {
	.alc-new-focus {
		display: none;
	}
	.alc-edit-focus .alc--buttons {
		float: left;
	}
	.alc-edit-focus h2.alc--wide {
		display: none;
	}
	.alc-edit-focus h2.alc--small {
		display: block;
	}
}

/*********************************************************/
/* Problem Display Panel */
/*********************************************************/

.alc-problem-panel .alc-problem-text {
	-webkit-flex: 1 0 auto;
	        flex: 1 0 auto;

	max-width: 100%;
	margin-bottom: 20px;
}

/* problem-text has color #444 from body tag */
/* the actual computation suggests opacity of 0.733, but 0.8 looked better */
.alc-problem-panel .alc-problem-text .latex,
.alc-problem-panel .alc-problem-text .latexcenter,
.alc-solution-panel .alc-problem-text .latex,
.alc-solution-panel .alc-problem-text .latexcenter {
	opacity: 0.8;
}

.alc-problem-panel .alc--bottom {
	width: 100%;
	margin-bottom: 2px;
}

.alc-problem-input-bar {
	background-color: #eee;
	padding: 8px;

	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	        flex-direction: row;
	-webkit-align-items: flex-end;
	        align-items: flex-end;
}

.alc-problem-input-right {
	-webkit-flex: 1 0 auto;
	        flex: 1 0 auto;

	display: -webkit-flex;

	display: flex;
	-webkit-flex-direction: row;
	        flex-direction: row;
}

.alc-problem-input-main {
	width: 382px;
	margin-right: 8px;

	display: -webkit-flex;

	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
}
.alc-problem-input-main .alc--matrix-row {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	        flex-direction: row;
	margin-bottom: 4px;
}
.alc-problem-input-main .alc--matrix-row:last-child {
	margin-bottom: 0;
}
.alc-problem-input-main .alc--matrix-row input {
	-webkit-flex: 1 1 0;
	        flex: 1 1 0;
	min-width: 0;
	margin-right: 4px;
}
.alc-problem-input-main .alc--matrix-row input:last-child {
	margin-right: 0;
}

.alc-problem-input-main .alc--main-input {
	border: 0;
	padding: 6px;
}

.alc-problem-input-bar .btn {
	width: 100px;
	height: 30px;
	line-height: 30px;
	text-transform: uppercase;
}
.alc-problem-input-bar .btn.btn-link {
	width: auto;
	text-transform: none;
}

.alc-problem-input-right > .btn {
	margin-right: 8px;
}
.alc-problem-input-right > .btn.alc--btn-last {
	margin-right: 0;
}

/* While processing */
.alc-problem-input-bar .alc--main-input[disabled] {
	background-color: #eee;
	font-style: italic;
	color: #1b365d;
}
.alc-problem-input-bar .aops-loader img {
	height: 30px;
	width: auto;
}

/* Responsive design */

.alc-problem-input-bar .btn.alc--small {
	display: none;
}
.alc-problem-panel .alc-problem-level span.alc--small,
.alc-solution-panel .alc-problem-level span.alc--small {
	display: none;
}

@media (max-width: 1270px) {
	.alc-problem-panel .alc-problem-text {
		/* Problem panel will have 612px of space for >640px */
		max-width: 600px;
	}
	.alc-problem-input-main {
		width: 322px;
	}
}
@media (max-width: 1020px) {
	.alc-problem-input-main {
		width: 272px;
	}
	.alc-problem-input-bar .btn {
		width: 80px;
	}
	/* Smaller level text */
	.alc-problem-panel .alc-problem-level span.alc--wide,
	.alc-solution-panel .alc-problem-level span.alc--wide {
		display: none;
	}
	.alc-problem-panel .alc-problem-level span.alc--small,
	.alc-solution-panel .alc-problem-level span.alc--small {
		display: inline;
	}
}
@media (max-width: 930px) {
	.alc-problem-input-main {
		width: 262px;
	}
	/* "Tips" instead of "Formatting Tips" */
	.alc-problem-input-bar .btn.alc--wide {
		display: none;
	}
	.alc-problem-input-bar .btn.alc--small {
		display: inline-block;
	}
}
@media (max-width: 840px) {
	.alc-problem-input-main {
		width: 50%;
		width: calc(100% - 320px);
	}
	/* Back to "Formatting Tips" */
	.alc-problem-input-bar .btn.alc--wide {
		display: inline-block;
	}
	.alc-problem-input-bar .btn.alc--small {
		display: none;
	}
}
@media (max-width: 640px) {
	.alc-problem-input-main {
		width: 50%;
		width: calc(100% - 250px);
	}
	/* Back to "Tips" */
	.alc-problem-input-bar .btn.alc--wide {
		display: none;
	}
	.alc-problem-input-bar .btn.alc--small {
		display: inline-block;
	}
}
@media (max-width: 580px) {
	/* The input bar now becomes two rows */
	.alc-problem-input-bar {
		-webkit-flex-wrap: wrap;
		        flex-wrap: wrap;
	}
	.alc-problem-input-main {
		width: 100%;
		margin-bottom: 8px;
	}
}

/*********************************************************/
/* Problem Rendered Input */
/*********************************************************/

.alc-problem-rendered-input {
	position: absolute;
	/* top set in JS */
	left: 0;
	line-height: 40px;
	min-height: 40px;
	padding: 6px 10px;
	border: 2px solid #eee;
	background-color: #eee;
	cursor: move;
}
.alc-problem-rendered-input.alc--render-errors {
	border-color: red;
}

/*********************************************************/
/* Solution Display Layout */
/*********************************************************/

.alc-solution-display {
	-webkit-flex: 1 0 auto;
	        flex: 1 0 auto;

	display: -webkit-flex;

	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
}

.alc-solution-display .alc-solution-panel {
	background-color: #fff;
	margin-bottom: 10px;
}
.alc-solution-display .alc-solution-aux-panels {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	        flex-direction: row;
	margin-bottom: 10px;
}

.alc-solution-display .alc-solution-aux-panels > div {
	-webkit-flex: 1 0 0;
	        flex: 1 0 0;
	margin: 0 10px 0 0; /* overrides aops-panel margins */
}
.alc-solution-display .alc-solution-aux-panels > div:last-child {
	margin-right: 0;
}

/* Specificity war with aops-panel... */
.aops-panel.alc-solution-reading-panel > h1 {
	margin-top: 10px;
}
.aops-panel.alc-solution-reading-panel > h1:first-child {
	margin-top: 0;
}

.alc-solution-links {
	text-align: right;
	margin-bottom: 10px;
}

.alc-modal-report-bug {
	width: 500px;
	max-width: 100%;
}
.alc-modal-report-bug textarea {
	resize: none;
	width: 100%;
	margin-bottom: 12px;
}

/* Size at which the feed hides completely */
@media (max-width: 700px) {
	.alc-solution-links .alc--discuss {
		display: none;
	}
}

/*********************************************************/
/* Solution Main Panel */
/*********************************************************/

.alc-solution-panel .alc--sub-header {
	font-size: 10pt;
	line-height: 16px;
}

/* Copies the usual rogb colors; needed for css rule precedence */
.alc-solution-panel .alc--sub-header.aops-rogb-red {
	background-color: #e2002b;
}
.alc-solution-panel .alc--sub-header.aops-rogb-orange {
	background-color: #ef7f00;
}
.alc-solution-panel .alc--sub-header.aops-rogb-green {
	background-color: #3da000;
}
.alc-solution-panel .alc--sub-header.aops-rogb-blue {
	background-color: #1496d8;
}

.alc-solution-panel .alc-solution-result-display {
	font-weight: bold;
	font-size: 12pt;
	line-height: 38px;
}

.alc-solution-panel .alc-solution-topic-source {
	margin-top: 3px;
	text-align: right;
}

.alc-solution-content {
	padding: 10px 20px;
}

.alc-solution-content .alc-problem-text {
	margin-bottom: 10px;
}

.alc-solution-content .alc-solution-box {
	background-color: #eee;
	/*color: #1b365d;*/
	margin: 0px -10px;
	padding: 6px 10px;
}

.alc-solution-content .alc-solution-box .latex,
.alc-solution-content .alc-solution-box .latexcenter {
	opacity: 0.8;
}

.alc-solution-content .alc-solution-box .alc--label {
	font-weight: bold;
	font-style: italic;
}

/* Copies the usual rogb colors */
.alc-solution-content .alc-solution-box .alc--response {
	background-color: inherit;
	font-weight: bold;
}
.alc-solution-content .alc-solution-box .alc--response.aops-rogb-red {
	color: #e2002b;
}
.alc-solution-content .alc-solution-box .alc--response.aops-rogb-orange {
	color: #ef7f00;
}
.alc-solution-content .alc-solution-box .alc--response.aops-rogb-green {
	color: #3da000;
}
.alc-solution-content .alc-solution-box .alc--response.aops-rogb-blue {
	color: #1496d8;
}

/* Responsive design */

.alc-solution-result-display span.alc--small {
	display: none;
}

@media (max-width: 930px) {
	.alc-solution-result-display span.alc--small {
		display: inline;
	}
	.alc-solution-result-display span.alc--wide {
		display: none;
	}
}

@media (max-width: 480px) {
	.alc-solution-result-display span.alc--small {
		display: none;
	}
}

/*********************************************************/
/* Solution Votes Widget */
/*********************************************************/

.alc-solution-votes-question {
	position: relative;
	padding: 4px 0;
	clear: both;
}

.alc-solution-votes-question .alc--label {
	color: #1b365d;
	font-weight: bold;
}
.alc-solution-votes-question .alc-solution-votes-widget {
	float: right;
	clear: right;
}
.alc-solution-votes-question .alc--choice-label {
	float: right;
	clear: right;
	padding-bottom: 4px;
}

.alc-solution-votes-question .alc-custom-tooltip {
	position: absolute;
	left: 0px; /* tweaked to put in good horizontal position */
	bottom: 29px; /* text height + arrow size + aesthetic nudge = 20 + 6 + 3 */
	max-width: 320px;
}
/* Speech bubble triangle - above */
.alc-solution-votes-question .alc-custom-tooltip:before {
	content: " ";
	position: absolute;
	left: 16px;
	bottom: -12px;
	width: 0px;
	height: 0px;

	z-index: 100;

	border: 6px solid transparent;
	border-top-color: #a0a0a0;
}
/* Responsive design */
@media (max-width: 1270px) {
	.alc-solution-votes-question .alc-custom-tooltip {
		max-width: 280px;
	}
}
@media (max-width: 1020px) {
	.alc-solution-votes-question .alc-custom-tooltip {
		max-width: 220px;
	}
}
@media (max-width: 930px) {
	.alc-solution-votes-question .alc-custom-tooltip {
		max-width: 180px;
	}
}
@media (max-width: 840px) {
	.alc-solution-votes-question .alc-custom-tooltip {
		max-width: 220px;
	}
}

.alc-solution-votes-widget > div {
	display: inline-block;
	margin: 0 2px;
}

.alc-solution-votes-choice:after {
	content: "A";
	font-style: normal;
	font-family: AoPS;
	font-size: 13pt;
	color: #9f9f9f;
}
.alc-solution-votes-choice.alc--hover:after {
	color: #1b365d;
}
.alc-solution-votes-choice.alc--active:after {
	color: #1b365d;
}
.alc-solution-votes-cancel {
	background-image: url("/m/alcumus/images/red-x.png");
	width: 11px;
	height: 11px;
}

/*********************************************************/
/* Report Page Layout */
/*********************************************************/

.alc-report-page {
	-webkit-flex: 1 1 auto;
	        flex: 1 1 auto;
	min-height: 0;

	display: -webkit-flex;

	display: flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
}

.aops-panel.alc-report-stats-container {
	margin-bottom: 10px;
	height: 90px;
}

.alc-report-page-bottom {
	-webkit-flex: 1 1 auto;
	        flex: 1 1 auto;
	min-height: 0;

	display: -webkit-flex;

	display: flex;
	-webkit-flex-direction: row;
	        flex-direction: row;
}

.aops-panel.alc-report-progress-table {
	-webkit-flex: 1 1 0;
	        flex: 1 1 0;
	min-width: 0;

	margin-right: 10px;
	margin-top: 0;
	margin-bottom: 0;
}

.aops-panel.alc-report-problem-table {
	-webkit-flex: 1 1 0;
	        flex: 1 1 0;
	min-width: 0;

	margin-top: 0;
	margin-bottom: 0;
}

/* Responsive design */

@media (max-width: 1270px) {
	.aops-panel.alc-report-stats-container .alc--wide {
		display: none;
	}
}
@media (max-width: 930px) {
	.aops-panel.alc-report-stats-container .alc--wide-2 {
		display: none;
	}
}
@media (max-width: 840px) {
	.aops-panel.alc-report-stats-container .alc--wide-2 {
		display: block;
	}
}
@media (max-width: 640px) {
	.aops-panel.alc-report-stats-container .alc--wide-2 {
		display: none;
	}
}
@media (max-width: 500px) {
	.aops-panel.alc-report-stats-container .alc-value {
		display: none;
	}
}

/*********************************************************/
/* Report Stats Panel */
/*********************************************************/

.alc-value {
	color: #1b365d;
	font-size: 12pt;
	font-weight: bold;
}
.alc-value .alc--label {
	color: #1b365d;
}

.alc-value.alc--bigger {
	font-size: 18pt;
}
.alc-value.alc--bigger .alc--label {
	font-size: 14pt;
}

.alc-value.alc-left {
	margin-right: 18px;
}
.alc-value.alc-right {
	margin-left: 18px;
}

/* Fudge for rating display*/
.alc-report-stats-container .alc-right:first-child {
	position: relative;
	top: -8px;
}

/*********************************************************/
/* Report Progress Table */
/*********************************************************/

.alc-report-progress-table .alc-progress-tables {
	height: 90%;
	height: calc(100% - 39px);
}

.alc-report-progress-table .aops-scroll-outer {
	height: 90%;
	height: calc(100% - 41px);
}
/* see also: focus editor scroll classes */
.alc-report-progress-table .aops-scroll-outer {
	width: 100%;
	/*width: -webkit-calc(100% - 2px);
	width: calc(100% - 2px);*/
}
.alc-report-progress-table .aops-scroll-inner {
	width: 110%;
	width: calc(100% + 20px);
}
.alc-report-progress-table .aops-scroll-content {
	width: 100%;
	width: calc(100% - 1px);
}

/*********************************************************/
/* Report Problem Table */
/*********************************************************/

.alc-report-problem-table .aops-scroll-outer {
	height: 90%;
	height: calc(100% - 45px);
}
/* see also: focus editor, progress table scroll classes */
.alc-report-problem-table .aops-scroll-outer {
	width: 100%;
	/*width: -webkit-calc(100% - 2px);
	width: calc(100% - 2px);*/
}
.alc-report-problem-table .aops-scroll-inner {
	width: 110%;
	width: calc(100% + 20px);
}
.alc-report-problem-table .aops-scroll-content {
	width: 100%;
	width: calc(100% - 1px);
}

.alc-report-problem-table .alc-row-loader {
	text-align: center;
	padding: 4px;
}

.alc-report-problem-table-row {
	padding: 6px;
	border: 1px solid white;
	background-color: #eee;
}

.alc-report-problem-table-row .alc-result {
	float: left;
	text-align: left;
	width: 22px;
}

.alc-report-problem-table-row .alc-details {
	float: left;
	width: 95%;
	width: calc(100% - 26px);
	color: #1b365d;
}
.alc-report-problem-table-row .alc-details.alc--invalid {
	font-style: italic;
}

.alc-report-problem-table-row .alc-details .alc-time {
	font-style: italic;
	font-size: 10pt;
}

/*********************************************************/
/* Profile Page Layout */
/*********************************************************/

.aops-panel.alc-profile-main-panel {
	float: left;
	width: 982px;
	margin-bottom: 10px;
	height: 484px;
}

.alc-profile-bottom-panel {
	float: left;
	clear: both;
	width: 982px;
}

/*********************************************************/
/* Profile Main Panel */
/*********************************************************/

/* Hackish, but fixes layout issues with the h1 expanding and obscuring things */
/* Weird selector is to make sure we beat .aops-panel > h1 */
.aops-panel.alc-profile-main-panel > h1 {
	margin-top: 0;
	max-width: 300px;
}

.alc-profile-main-panel .alc--private {
	margin: 10px 0;
	font-style: italic;
}

.alc-profile-main-panel .alc--avatar {
	max-width: 150px;
}
.alc-profile-main-panel .alc--avatar img {
	max-width: 100px;
	max-height: 100px;
}

/* Tiny avatar only shown at small screen sizes */
.alc-profile-main-panel .alc--tiny-avatar {
	float: left;
	max-width: 30px;
	margin-right: 5px;
}
.alc-profile-main-panel .alc--tiny-avatar img {
	max-width: 30px;
	max-height: 30px;
}

.alc-profile-main-panel .alc--divider {
	height: 1px;
	background-color: #eee;
	margin: 8px 0;

	/* Need to horizontally span the whole panel, ignoring padding */
	width: 100%;
	width: calc(100% + 30px); /* alc-profile-main-panel's left + right padding */
	position: relative;
	left: -15px; /* alc-profile-main-panel's left padding */
}

/*********************************************************/
/* Profile Rating Info */
/*********************************************************/

.alc-rating-info {
	float: right;
}
.alc-astat-info,
.alc-astat-bonus-info {
	clear: left;
}

.alc-rating-info > div,
.alc-astat-info > div,
.alc-astat-bonus-info > div {
	float: left;
	height: 32px;
	line-height: 32px;
}
.alc-rating-info.alc--large > div {
	height: 36px;
	line-height: 36px;
}

.alc-astat-info > div,
.alc-astat-bonus-info > div {
	margin-bottom: 0px;
}

.alc-astat-info .alc--info,
.alc-astat-bonus-info .alc--info {
	cursor: pointer;
	font-size: 14pt;
}

.alc-rating-info .alc--score {
	width: 48px;
	font-size: 14pt;
	font-weight: bold;
	background-color: transparent; /* Override rogb color class */
}
.alc-rating-info.alc--large .alc--score {
	font-size: 15pt;
}
.alc-rating-info .alc--score.aops-rogb-red {
	color: #e2002b;
}
.alc-rating-info .alc--score.aops-rogb-orange {
	color: #ef7f00;
}
.alc-rating-info .alc--score.aops-rogb-green {
	color: #3da000;
}
.alc-rating-info .alc--score.aops-rogb-blue {
	color: #1496d8;
}

.alc-rating-info .alc--name,
.alc-astat-info .alc--name,
.alc-astat-bonus-info .alc--name {
	font-size: 14pt;
	font-weight: bold;
	color: #1b365d;
}

.alc-rating-info .alc--name {
	width: 180px;
}
.alc-astat-info .alc--name,
.alc-astat-bonus-info .alc--name {
	width: 120px;
}
.alc-rating-info .alc-xp-display {
	width: 380px;
	height: 16px;
}
.alc-astat-bonus-info .alc-astat-bonus-bars {
	width: 280px;
	height: 24px;
	line-height: 24px;
	margin-left: 6px;
}
.alc-astat-bonus-info .alc-astat-bonus-bars > div {
	width: 12px;
}
.alc-astat-info .alc-xp-display {
	width: 268px; /* bonus bars width - left margin = 280 - 12 */
	height: 16px;
}

/*********************************************************/
/* Profile Rating Info XP Display */
/*********************************************************/

/*
See comments by .alc-xp-display for the list of size overrides needed
*/
.alc-rating-info .alc-xp-display .alc-level-emblem,
.alc-astat-info .alc-xp-display .alc-level-emblem {
	left: -17px;
	top: -11px;
	width: 33px;
	height: 33px;
}
.alc-rating-info .alc-xp-display .alc-level-emblem span,
.alc-astat-info .alc-xp-display .alc-level-emblem span {
	top: 1px;
	line-height: 33px;
	font-size: 10pt;
}
.alc-rating-info .alc-xp-display .alc--label,
.alc-astat-info .alc-xp-display .alc--label {
	line-height: 16px;
	font-size: 11pt;
	font-weight: bold;
}

.alc-rating-info.alc--large .alc-xp-display {
	height: 20px;
}
.alc-rating-info.alc--large .alc-xp-display .alc-level-emblem {
	left: -22px;
	top: -13px;
	width: 42px;
	height: 42px;
}
.alc-rating-info.alc--large .alc-xp-display .alc-level-emblem span {
	top: -1px;
	line-height: 42px;
	font-size: 11pt;
}
.alc-rating-info.alc--large .alc-xp-display .alc--label {
	line-height: 20px;
	font-size: 12pt;
	font-weight: bold;
}

/*********************************************************/
/* Profile Astat Bonus Bars */
/*********************************************************/

.alc-astat-bonus-info .alc-astat-bonus-bars > div {
	position: relative;
	top: 2px;

	display: inline-block;
	/* width set above, closer to responsive design specs */
	height: 24px;
	background-color: #eee;
	border: 1px solid #ccc;
	margin-right: 2px;
}
.alc-astat-bonus-info .alc-astat-bonus-bars > div.alc--full {
	background-color: #1496d8; /* aops-rogb-blue color */
	border: 1px solid #7fdafa; /* average of white and aops-rogb-blue */
}

/*********************************************************/
/* Profile Summary */
/*********************************************************/

.alc-profile-summary {
	float: right;
	width: 500px;
}

.alc-profile-summary .alc-problem-wheel {
	float: right;
}
.alc-profile-summary .alc--record {
	float: left;
	width: 140px;
	margin-left: 20px;
	margin-bottom: 20px;
}
.alc-profile-summary .alc--record.alc--days {
	clear: left;
}

.alc-profile-summary .alc--record {
	color: #9f9f9f;
	font-size: 12pt;
	font-weight: bold;
}
.alc-profile-summary .alc--record .alc--label {
	color: #1b365d;
	font-size: 10pt;
}
.alc-profile-summary .alc--record .alc--number {
	color: #3da000;
}

/*********************************************************/
/* Profile Problem Wheel */
/*********************************************************/

.alc-problem-wheel {
	position: relative;
}

/* Assumes margin of 8, outer radius of 72, inner radius of 48 */
.alc-problem-wheel .alc--total {
	position: absolute;
	left: 39px;
	top: 62px;

	width: 76px; /* Tweaked to get wrapping right */
	line-height: 18px;

	font-size: 12pt;
	font-weight: bold;
	color: #1b365d;
	text-align: center;
}

/*********************************************************/
/* Profile Main Panel Responsive Design */
/*********************************************************/

.alc-profile-main-panel .alc--tiny-avatar {
	display: none;
}

@media (max-width: 1270px) {
	.aops-panel.alc-profile-main-panel,
	.alc-profile-bottom-panel {
		width: 732px;
	}

	.aops-panel.alc-profile-main-panel > h1 {
		max-width: 200px;
	}

	.alc-rating-info .alc--score {
		display: none;
	}
	.alc-rating-info .alc--name {
		width: 160px;
	}
	.alc-rating-info .alc-xp-display {
		width: 280px;
	}

	.alc-astat-info .alc--name,
	.alc-astat-bonus-info .alc--name {
		width: 100px;
	}
	.alc-astat-bonus-info .alc-astat-bonus-bars {
		width: 220px;
	}
	.alc-astat-bonus-info .alc-astat-bonus-bars > div {
		width: 9px;
	}
	.alc-astat-info .alc-xp-display {
		width: 208px;
	}

	/* Half of the summary record displays disappear */
	.alc-profile-summary {
		width: 330px;
	}
	.alc-profile-summary .alc--record.alc--left {
		display: none;
	}
}
@media (max-width: 1020px) {
	.aops-panel.alc-profile-main-panel,
	.alc-profile-bottom-panel {
		width: 642px;
	}

	.aops-panel.alc-profile-main-panel > h1 {
		max-width: 180px;
	}

	.alc-rating-info .alc--name {
		width: 130px;
	}
	.alc-rating-info .alc-xp-display {
		width: 240px;
	}

	/* All of the summary record displays disappear */
	.alc-profile-summary {
		width: 160px;
	}
	.alc-profile-summary .alc--record.alc--right {
		display: none;
	}
}
@media (max-width: 930px) {
	.aops-panel.alc-profile-main-panel,
	.alc-profile-bottom-panel {
		width: 552px;
	}

	.alc-rating-info .alc--name {
		width: 110px;
	}
	.alc-rating-info .alc-xp-display {
		width: 180px;
	}
}
@media (max-width: 840px) {
	.aops-panel.alc-profile-main-panel,
	.alc-profile-bottom-panel {
		width: 100%;
		min-width: 450px;
	}

	.alc-rating-info .alc--name {
		width: 160px;
	}
	.alc-rating-info .alc-xp-display {
		width: 280px;
	}

	.alc-astat-info .alc--name,
	.alc-astat-bonus-info .alc--name {
		width: 100px;
	}

	/* Half of the summary record displays reappear */
	.alc-profile-summary {
		width: 330px;
	}
	.alc-profile-summary .alc--record.alc--right {
		display: block;
	}
}
@media (max-width: 740px) {
	.alc-rating-info .alc--name {
		width: 130px;
	}
	.alc-rating-info .alc-xp-display {
		width: 240px;
	}

	.alc-astat-info .alc--name,
	.alc-astat-bonus-info .alc--name {
		width: 100px;
	}

	/* All of the summary record displays redisappear */
	.alc-profile-summary {
		width: 160px;
	}
	.alc-profile-summary .alc--record.alc--right {
		display: none;
	}
}
@media (max-width: 640px) {
	/* Massive reorganization of whole panel to just be name + small avatar + bars. */

	.aops-panel.alc-profile-main-panel {
		height: 460px;
	}

	.aops-panel.alc-profile-main-panel > h1 {
		max-width: 300px;
	}
	.alc-profile-main-panel .alc--avatar {
		display: none;
	}
	.alc-profile-main-panel .alc--tiny-avatar {
		display: block;
	}
	.alc-rating-info {
		clear: left;
		float: left;
	}

	.alc-astat-info .alc--name,
	.alc-astat-bonus-info .alc--name {
		width: 112px;
	}
	.alc-astat-bonus-info .alc-astat-bonus-bars {
		width: 280px;
	}
	.alc-astat-bonus-info .alc-astat-bonus-bars > div {
		width: 12px;
	}
	.alc-astat-info .alc-xp-display {
		width: 268px;
	}

	.alc-profile-summary {
		display: none;
	}
}

/*********************************************************/
/* Profile Bottom Panel */
/*********************************************************/

.alc-profile-bottom-panel .alc--page-bar > .alc--page-button {
	display: inline-block;

	width: 327px; /* (panel width-2)/3 = (982-2)/3 */
	/* pixel removed from last one to make div by three work out */
	height: 48px;
	line-height: 46px;
	/* Above used to be 48px. Richard's Chrome had a font whose height got messed
	up by bolding causing the active button to be off by a pixel. Reducing the
	line-height slightly fixes this. */

	padding: 0;
	border: 0;
	margin-right: 1px;

	background-color: #1b365d;
	color: white;
	font-size: 14pt;
	text-align: center;

	cursor: pointer;
}
.alc-profile-bottom-panel .alc--page-bar > .alc--page-button:last-child {
	width: 326px;
	margin: 0;
}
.alc-profile-bottom-panel .alc--page-bar > .alc--page-button.alc--active {
	background-color: #009fad;
}

.alc-profile-bottom-panel .alc--page-bar > .alc--page-button.alc--active:hover {
	background-color: #009fad;
}

.alc-profile-bottom-panel .alc--page-bar > .alc--page-button:hover {
	background-color: #135b7b;
}

/* Responsive design */

@media (max-width: 1270px) {
	.alc-profile-bottom-panel .alc--page-bar > .alc--page-button:first-child {
		margin-left: 0px; /* to get the divisibility by three right */
	}
	.alc-profile-bottom-panel .alc--page-bar > .alc--page-button {
		width: 243px; /* (panel width-2)/3 = (732-2)/3 */
		/* pixel added to last one to make div by three work out */
	}
	.alc-profile-bottom-panel .alc--page-bar > .alc--page-button:last-child {
		width: 244px;
	}
}
@media (max-width: 1020px) {
	.alc-profile-bottom-panel .alc--page-bar > .alc--page-button {
		width: 213px; /* (panel width-2)/3 = (642-2)/3 */
		/* pixel added to last one to make div by three work out */
	}
	.alc-profile-bottom-panel .alc--page-bar > .alc--page-button:last-child {
		width: 214px;
	}
}
@media (max-width: 930px) {
	.alc-profile-bottom-panel .alc--page-bar > .alc--page-button {
		width: 183px; /* (panel width-2)/3 = (552-2)/3 */
		/* pixel added to last one to make div by three work out */
	}
	.alc-profile-bottom-panel .alc--page-bar > .alc--page-button:last-child {
		width: 184px;
	}
}
@media (max-width: 840px) {
	.alc-profile-bottom-panel .alc--page-bar > .alc--page-button {
		width: 33%;
		width: calc(33.3% - 1px);
	}
	.alc-profile-bottom-panel .alc--page-bar > .alc--page-button:last-child {
		width: 33%;
		width: calc(33.3% - 1px);
	}
}

/*********************************************************/
/* Profile Bottom Subpanel */
/*********************************************************/

.alc-profile-bottom-subpanel {
	background-color: white;
	padding: 8px 12px;
	width: 982px;
}

.alc-profile-bottom-subpanel .alc-profile-bottom-item {
	float: left;
	/* Two per column: (982 - 2*12) / 2 */
	width: 479px;
	height: 75px;
	overflow-y: hidden;
	border: 1px solid white;
	padding: 6px 10px;

	background-color: #eee;
	font-size: 11pt;
	font-weight: bold;

	cursor: pointer;
}
.alc-profile-bottom-subpanel .alc-profile-bottom-item.alc--assigned {
	background-color: #cde;
}
.alc-profile-bottom-subpanel .alc-profile-bottom-item.alc--friend {
	/* Three per column: (982 - 2*12) / 3 */
	width: 319px;
}

/* Override link underline */
.alc-profile-bottom-subpanel .alc-profile-bottom-item a:hover {
	text-decoration: none;
}

.alc-profile-bottom-subpanel .alc-profile-bottom-item .alc-quest-badge,
.alc-profile-bottom-subpanel .alc-profile-bottom-item .alc--avatar,
.alc-profile-bottom-subpanel .alc-profile-bottom-item .alc--info {
	display: inline-block;
	vertical-align: top;
}
.alc-profile-bottom-subpanel .alc-profile-bottom-item .alc-quest-badge,
.alc-profile-bottom-subpanel .alc-profile-bottom-item .alc--avatar {
	height: 50px;
	line-height: 50px;
	margin-right: 8px;
}
.alc-profile-bottom-subpanel .alc-profile-bottom-item .alc--avatar img {
	max-height: 50px;
	max-width: 50px;
}
.alc-profile-bottom-subpanel .alc-profile-bottom-item .alc--info {
	width: 370px; /* at most the item width - 86, or 479 - 86 = 393 */
}
.alc-profile-bottom-subpanel .alc-profile-bottom-item.alc--friend .alc--info {
	width: 233px;
}

.alc-profile-bottom-subpanel .alc-profile-bottom-item .alc--name {
	color: #1b365d;
}
.alc-profile-bottom-subpanel .alc-profile-bottom-item.alc--quest .alc--name {
	text-transform: uppercase;
}
.alc-profile-bottom-subpanel .alc-profile-bottom-item .alc--description,
.alc-profile-bottom-subpanel .alc-profile-bottom-item .alc--activity {
	color: #1b365d;
	font-size: 10pt;
	max-height: 42px;
	overflow-y: hidden;
}

/* Responsive design */

/* All item widths are gotten by (subpanel width - 2*12) / columnnum */
/* Info widths subtract a fixed amount from the item width */

@media (max-width: 1270px) {
	.alc-profile-bottom-subpanel {
		width: 732px;
	}
	/* Quests: two columns */
	.alc-profile-bottom-subpanel .alc-profile-bottom-item {
		width: 354px;
	}
	.alc-profile-bottom-subpanel .alc-profile-bottom-item .alc--info {
		width: 266px;
	}
	/* Friends: two columns */
	.alc-profile-bottom-subpanel .alc-profile-bottom-item.alc--friend {
		width: 354px;
	}
	.alc-profile-bottom-subpanel .alc-profile-bottom-item.alc--friend .alc--info {
		width: 266px;
	}
}
@media (max-width: 1020px) {
	.alc-profile-bottom-subpanel {
		width: 642px;
	}
	/* Quests: one column */
	.alc-profile-bottom-subpanel .alc-profile-bottom-item {
		width: 618px;
	}
	.alc-profile-bottom-subpanel .alc-profile-bottom-item .alc--info {
		width: 525px;
	}
	/* Friends: two columns */
	.alc-profile-bottom-subpanel .alc-profile-bottom-item.alc--friend {
		width: 309px;
	}
	.alc-profile-bottom-subpanel .alc-profile-bottom-item.alc--friend .alc--info {
		width: 223px;
	}
}
@media (max-width: 930px) {
	.alc-profile-bottom-subpanel {
		width: 552px;
	}
	/* Quests: one column */
	.alc-profile-bottom-subpanel .alc-profile-bottom-item {
		width: 528px;
	}
	.alc-profile-bottom-subpanel .alc-profile-bottom-item .alc--info {
		width: 435px;
	}
	/* Friends: two columns */
	.alc-profile-bottom-subpanel .alc-profile-bottom-item.alc--friend {
		width: 264px;
	}
	.alc-profile-bottom-subpanel .alc-profile-bottom-item.alc--friend .alc--info {
		width: 178px;
	}
}
@media (max-width: 840px) {
	.alc-profile-bottom-subpanel {
		width: 100%;
	}
	/* Quests: one column */
	.alc-profile-bottom-subpanel .alc-profile-bottom-item {
		width: 100%;
	}
	.alc-profile-bottom-subpanel .alc-profile-bottom-item .alc--info {
		width: 75%;
		width: calc(100% - 93px);
	}
	/* Friends: two columns */
	.alc-profile-bottom-subpanel .alc-profile-bottom-item.alc--friend {
		width: 50%;
	}
	.alc-profile-bottom-subpanel .alc-profile-bottom-item.alc--friend .alc--info {
		width: 75%;
		width: calc(100% - 86px);
	}
}
@media (max-width: 640px) {
	/* Friends: one column */
	.alc-profile-bottom-subpanel .alc-profile-bottom-item.alc--friend {
		width: 100%;
	}
}

/*********************************************************/
/* Profile Friends */
/*********************************************************/

/* All of this is from RR */

.cmty-alc-friends-message {
	/* Alcumus-specific Messages like 'excluded from friends' and such */
}

.alc-profile-bottom-subpanel .cmty-friend-box.alc-profile-bottom-item {
	float: none;
	margin: 0 0 -6px 0;
	padding: 4px 10px;
}

.alc-profile-bottom-subpanel .cmty-friend-username {
	color: #1b365d;
}

.alc-profile-bottom-subpanel .cmty-friend-message {
	font-size: 10pt;
	color: #1b365d;
}

/*********************************************************/
/* Profile Quest Details */
/*********************************************************/

/* Hacking around some ugly padding of the modal styling */
.alc-profile-quests-details {
	position: relative;
	top: -4px;
	margin-bottom: -8px;
	width: 600px;
}

.alc-profile-quests-details h1 {
	margin: -4px 0;
}
.alc-profile-quests-details .alc--description {
	padding-bottom: 8px;
	border-bottom: 1px solid #cde;
	margin: 0;

	font-size: 12pt;
	font-weight: bold;
	color: #1b365d;
}
.alc-profile-quests-details p:last-of-type {
	border-bottom: 0;
}

.alc-profile-quests-details .alc-quest-badge {
	float: right;
	margin: 5px 10px;
}
.alc-profile-quests-details span.alc--label {
	color: #1b365d;
	font-weight: bold;
}
.alc-profile-quests-details span.alc--value {
	color: #1b365d;
	font-weight: bold;
}

/* Responsive design */

@media (max-width: 640px) {
	.alc-profile-quests-details {
		width: 500px;
	}
}

/*********************************************************/
/* Hall of Fame */
/*********************************************************/

.alc-hof-container .content > div {
	display: inline-block;
	vertical-align: top;
	padding: 0 15px;
	width: 45%;
	width: calc(50% - 41px);
}

.alc-hof-container .content h3:first-child {
	margin-top: 0px;
	margin-bottom: 0px;
}

.alc-hof-entry {
	font-size: 12pt;
	line-height: 30px;
	padding: 3px 0;
}

.alc-hof-entry .alc--avatar {
	display: inline-block;
}
.alc-hof-entry .alc--avatar img {
	max-width: 30px;
	max-height: 30px;
}

/*********************************************************/
/* Help */
/*********************************************************/

.alc-help-container .content h3 {
	margin-top: 0;
	margin-bottom: 0;
}

/*********************************************************/
/* Settings */
/*********************************************************/

.alc-settings-panel {
	width: 800px;
}

.alc-settings-row {
	position: relative;
	padding: 0 18px;
	border-bottom: 1px solid #eee;
}
.alc-settings-row:last-child {
	border-bottom: 0;
}

.alc-settings-row > div {
	display: inline-block;
}

.alc-settings-row .alc--details {
	padding: 8px 0;
	height: 100%;
	width: 580px;
	vertical-align: top;
}

.alc-settings-row .alc--name {
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 8px;
}

.alc-settings-row .alc--description {
	padding-bottom: 8px;
	padding-right: 8px;
}

.alc-settings-row .alc--divider {
	height: 100%;
	background-color: #eee;
	width: 1px;
	vertical-align: top;
	position: absolute;
}

.alc-settings-row .alc--values {
	padding-left: 20px;
	width: 140px;
}
.alc-settings-row .alc--values > div {
	margin: 10px 0;
	padding-left: 4px;
}

/* Responsive design */

@media (max-width: 1270px) {
	.alc-settings-panel {
		width: 700px;
	}
	.alc-settings-row .alc--details {
		width: 480px;
	}
}
@media (max-width: 1020px) {
	.alc-settings-panel {
		width: 610px;
	}
	.alc-settings-row .alc--details {
		width: 390px;
	}
}
@media (max-width: 930px) {
	.alc-settings-panel {
		width: 520px;
	}
	.alc-settings-row .alc--details {
		width: 300px;
	}
}
@media (max-width: 840px) {
	.alc-settings-panel {
		width: 100%;
	}
	.alc-settings-row .alc--details {
		width: 50%;
		width: calc(100% - 154px);
	}
}
@media (max-width: 400px) {
	.alc-settings-row .alc--description {
		display: none;
	}
}

/*********************************************************/
/* Reset */
/*********************************************************/

.alc-reset-widgets {
	text-align: center;
}
.alc-reset-warning {
	font-weight: bold;
	color: red;
}

/*********************************************************/
/* Admin */
/*********************************************************/

.alc-impersonate-warning {
	position: fixed;
	left: 100px;
	top: 10px;
	padding: 4px;
	border: 4px solid red;
	background-color: #ffcfcf;
	color: red;
	font-weight: bold;
	z-index: 100000;
}

.alc-admin-panel .alc-admin-log {
	height: 150px;
	overflow-y: scroll;
}

.alc-admin-panel > div {
	padding: 10px 0;
	border-top: 1px solid gray;
}

.alc-admin-panel .alc-admin-misc-box > div {
	padding: 2px 0;
}

.alc-admin-panel .alc-admin-misc-box span {
	display: inline-block;
	width: 300px;
}

.alc-admin-parser-page .alc-left,
.alc-admin-parser-page .alc-right {
	width: 48%;
	margin: 4px;
}

.alc-admin-parser-page textarea {
	width: 100%;
	height: 100px;
}

.alc-admin-parser-page .alc--results {
	margin: 2px;
	border: 1px solid #ccc;
	padding: 4px;
}

.alc-parser-result-Y {
	color: #080;
	font-weight: bold;
}
.alc-parser-result-N {
	color: #f00;
}
.alc-parser-result-E {
	color: #008;
}