/* Stylings for Gooey Software website */
body {
	margin: 0;
}

.mystikaze {
	text-align: center;
	font-size: large;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: black;
	background: radial-gradient(ellipse, rgb(85, 110, 138) 0%, rgb(9, 10, 15) 100%) !important;
}
.mystikaze a {
	color: rgb(207, 130, 255) !important;
}
.mystikaze a:hover {
	color: rgb(220, 163, 255) !important;
}

div, p, ul {
	font-family: Arial, sans-serif;
	font-size: 16px;
}

a {
	color: #4444ff;
	text-decoration: none;
}
a:hover {
	color: #0000cc;
	text-decoration: none;
}

/* Header */
#MainLogo {
	padding: 10px 40px 0 15px;
}

#MainHeader > img,
#MainHeader > a,
#MainHeader > div {
	flex: none;
}
#MainHeader {
	background-color: #ffffc0;
}
#MainHeader > div,
#MainHeader > a {
	min-width: 160px;
	padding: 0 10px 0 10px;
	color: #505050;
	font-weight: bold;
}
#MainHeader > div > span,
#MainHeader > a > span {
	text-align: center;
}
#MainHeader > a:hover span,
#MainHeader > .SelectedSection {
	color: #000000;
}

#HeaderHome {
	background-color: #c0c3ff;
	border-top: 10px solid #c0c3ff;
	border-bottom: 10px solid #c0c3ff;
	font-size: 18px;
}
a#HeaderHome:hover,
#HeaderHome.SelectedSection {
	border-bottom: 10px solid #535bff;
}
#HeaderHome.SelectedSection {
	border-top: 10px solid #535bff;
}

#HeaderAddons {
	background-color: #c0ffc4;
	border-top: 10px solid #c0ffc4;
	border-bottom: 10px solid #c0ffc4;
}
a#HeaderAddons:hover,
#HeaderAddons.SelectedSection {
	border-bottom: 10px solid #00e400;
}
#HeaderAddons.SelectedSection {
	border-top: 10px solid #00e400;
}

#HeaderJsPlugins {
	background-color: #ffc0f4;
	border-top: 10px solid #ffc0f4;
	border-bottom: 10px solid #ffc0f4;
}
a#HeaderJsPlugins:hover,
#HeaderJsPlugins.SelectedSection {
	border-bottom: 10px solid #ff42de;
}
#HeaderJsPlugins.SelectedSection {
	border-top: 10px solid #ff42de;
}

#HeaderUserscripts {
	background-color: #72fffb;
	border-top: 10px solid #72fffb;
	border-bottom: 10px solid #72fffb;
}
a#HeaderUserscripts:hover,
#HeaderUserscripts.SelectedSection {
	border-bottom: 10px solid #00c3be;
}
#HeaderUserscripts.SelectedSection {
	border-top: 10px solid #00c3be;
}

#HeaderHandyTools {
	background-color: #ffd86f;
	border-top: 10px solid #ffd86f;
	border-bottom: 10px solid #ffd86f;
}
a#HeaderHandyTools:hover,
#HeaderHandyTools.SelectedSection {
	border-bottom: 10px solid #f1b000;
}
#HeaderHandyTools.SelectedSection {
	border-top: 10px solid #f1b000;
}

/* Tables */
.PaddedCellTopTable td {
	padding-top: 8px;
}

/* Content */
#ContentNav,
#ContentNavFooter {
	flex: none;
	width: 220px;
	padding: 10px;
}

#ContentNav > div:first-child {
	margin-top: 10px !important;
}
#ContentNav div.MenuEntry {
	background-repeat: no-repeat;
	padding-left: 42px;
	margin-top: 3px;
	min-height: 32px;
	font-weight: bold;
}
#ContentNav > div.MenuEntry {
	margin-left: 10px;
}
#ContentNav div.MenuEntry > span {
	display: block;
	padding: 6px 0 4px 0;
}
#ContentNav div.BulletItem {
	padding-left: 14px !important;
}

#ContentNav .Selected {
	text-decoration: none;
	padding: 3px 0 !important;
	border-top: 1px dashed #000000;
	border-bottom: 1px dashed #000000;
	margin-top: 2px;
}

#ContentBox {
	padding: 16px 16px 16px 24px;
}
#ContentBox h1 {
	margin: 0;
}
#ContentBox h2 {
	margin: 25px 0 0 0;
}
#ContentBox p {
	margin: 8px;
}
#ContentBox pre.Commandline {
	margin: 8px;
	font-size: 16px;
	color: #ffffff;
	background-color: #000000;
}

.QuoteBox {
	padding: 5px;
	background-color: #c0ffc4;
	border: 1px solid #008000;
}

/* Images inside 'fade footer's need to be block-level elements to stop there being a gap below them, caused by their being inline elements with */
/* the image's baseline not being the same as the line's baseline. Also make sure there is no top/bottom padding; the containers must be propped up by */
/* their background images, and be EXACTLY the height of the background image. */
#MainFooter > div {
	padding-top: 0;
	padding-bottom: 0;
}
#MainFooter > div img {
	display: block;
}

/* More general stuff */
.LinkBesideHeading {
	padding-left: 15px;
	font-family: Courier New, monospace;
}
.LinkJustBesideHeading {
	padding-left: 7px;
	font-family: Courier New, monospace;
}

/* ---------- Flexbox helper classes/rules ---------- */
/* --- Use on flexbox container --- */
.Hbox {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	align-items: center;

	/* Our hbox's are always left-to-right */
	writing-mode: horizontal-tb;
	direction: ltr;
}
.Vbox {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	align-items: center;

	/* Our vbox's are always top-to-bottom */
	writing-mode: horizontal-tb;
	direction: ltr;
}

/* These classes control the positioning of items along the main axis (eg. left-right for an Hbox) */
.StartAlign {
	justify-content: flex-start;
}
.MidAlign {
	justify-content: center;
}
.EndAlign {
	justify-content: flex-end;
}

/* These classes control the positioning of items along the counter-axis (eg. top-bottom for an Hbox) */
.StartDistribute {
	align-items: flex-start;
}
.MidDistribute {
	align-items: center;
}
.EndDistribute {
	align-items: flex-end;
}
.StretchDistribute {
	align-items: stretch;
}

/* --- Use on flexbox items (only needed if flex expansion is required) --- */
.FlexExpand {
	flex: 1 1 auto;
}
.FlexExpandDouble {
	flex: 2 1 auto;
}

/* ---------- General helper classes ---------- */
.NoWrap        { white-space: nowrap; }
.YesWrap       { text-wrap: normal; word-wrap: break-word; }
.Clearer       { clear: both; height: 0; }
.ClearerLeft   { clear: left; height: 0; }
.ClearerRight  { clear: right; height: 0; }
.Mid           { vertical-align: middle; }
.Collapsed     { display: none; }
.Hidden        { visibility: hidden; }