User:Becasita/test.css

Note: After saving, you have to bypass your browser's cache to see the changes. Internet Explorer: hold down Ctrl and click the Refresh or Reload button. Firefox: hold down ⇧ Shift while clicking Reload (or press Ctrl+⇧ Shift+R). Google Chrome and Safari users can just click the Reload button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/**********************
 ** Main page stuff! **
 **********************/
 
/*****************
 * Main container.
 */
#mp { display: flex; }
/* Left/Right containers. */
.mp-left, .mp-right
{
	display: flex;
	flex-direction: column;
	margin: 0 0.2em;
}
/* Right container. */
.mp-right
{	/* Fixed max width. */
	max-width: 25em;
}
/* Header. */
.main_page-header {
	background-color: #337C97;
	color: white;
	margin: 0.75em 0 0.1em !important;
	border-radius: 0.25em;
}
.main_page-header span {
	margin: 0 0.35em;
}
/* Content. */
.main_page-content {
	padding: 0 0.6em;
}

/*************
 * Characters.
 */
#characters-info dd { display: inline-block; }
#characters-info ul {
	display: inline;
	margin: 0;
}
#characters-info li { display: inline-block; }
.characters {
	margin: auto;
	display: table;
}
.character { display: inline-block; }

/* Screens with max-width of 1000px (might need to be changed) */
@media screen and (max-width: 1000px)
{
	/* Main container. */
	#mp
	{	/* Display block, to make stuff linear, instead of side-by-side. */
		display: block;
	}
	/* Right container. */
	.mp-right
	{	/* Unset the max width limitation. */
		max-width: unset;
	}
}
@media screen and (max-width: 635px)
{
	.characters-top, .characters-bottom
	{	/* Display vertical inline, basically. */
		display: grid;
	}
}