vanilla-theme-fancy-gms/design/custom.css

/*
	TABLE OF CONTENTS										^TOC
	-	-	-	-	-	-	-	-	-	-	-	-	-	-

	Vanilla's HTML is a mess to me--doing my best to work
	round it >:(

	TAGS
	(so you can jump to sections :)

	^TOC	.	.	.	Table of Contents / top
	^GENERAL	.	.	General rules
		^HACKX	.	.	Horrible hacks
	^LAYOUT	.	.	.
		^HEADER	.	.	Header
		^MAIN	.	.	Main content area
		^PANEL	.	.	Side panel
		^FOOTER	.	.	Page footer
	^PAGES	.	.	.
		^CATS	.	.	Main / front page
		^POSTS	.	.	Discussion threads
		^SEARCH	.	.	Search results page
		^PROFILE	.	User profile page
		^LOGIN	.	.	Log-in pop-up

	-	-	-	-	-	-	-	-	-	-	-	-	-	-

	STYLE NOTES

	Colours:
	red		#ed1c24
	pink	#ffaec9
	yellow	#fff200
	grey	#f0f0f0

	Sizes:
	regular	1em
	small	0.7em


	General	-	-	-	-	-	-	-	-	-	-	-	-	^GENERAL
*/

a:link {
	color:blue;
	text-decoration:underline;
}
a:visited {
	color:purple;
	text-decoration:underline dashed;
}
a:hover {
	color:#ed1c24;
	text-decoration:none;
}

body {
	background-color:white;
	display:grid;
	font-size:1em;
	font-family:sans-serif;
	grid-template-columns:repeat(4, 1fr);
	grid-gap:1em;
	grid-template-areas:
		"main	main	main	panel"
		"footer	footer	footer	footer";
}

h1 {
	background-color:#ffaec9;
	border:1px solid #ffaec9;
	font-size:1em;
	line-height:1;
	padding:0.5em 1em 0.2em;
}

hr {
	border:none;
	border-top:1px solid #ffaec9;
	margin:1.5em 0;
}

input[type="email"],
input[type="password"],
input[type="text"],
select,
textarea {
	background-color:#f0f0f0;
	border:1px solid #ffaec9;
	font-size:1em;
	margin:0;
	padding:0;
}

mark { background-color:#fff200; }

pre,code { tab-size:4; }

.Button {
	background-color:#ffaec9;
	border:1px solid #fff200;
	font-size:1em;
	padding:0.8em 1em;
}

.Button:hover,
.BigButton:hover {
	border-color:#fff200;
	border-radius:0;
	color:#ed1c24;
}

.BigButton {
	border-left:none;
	border-right:none;
}

a.NewDiscussion::before {
	content:"☞ ";
}

a.NewDiscussion::after {
	content:" ☜";
}

/*
	Hackx	-	-	-	-	-	-	-	-	-	-	-	-	^HACKX
*/

/*	Hides that pointless gender enquiry and display	*/
li.Gender { display:none !important; }

/*	Hides forum title in categories list, because I have it
	in the header*/
main > h1.H.HomepageTitle { display:none; }

/*	Hides extraneous date on categories page	*/
span.MItem.LastCommentDate { display:none; }

/*	All pages	-	-	-	-	-	-	-	-	-	-	-	^LAYOUT

	Header	-	-	-	-	-	-	-	-	-	-	-	-	^HEADER
*/

header {
	background-color:#ffaec9;
	border-bottom:1px solid #fff200;
	box-shadow:0 1px 4px rgba(0,0,0,0.3);
	padding:0 1em;
	position:fixed;
	top:0;
	width:100%;
	z-index:11;
}

header a:visited {
	color:blue;
	text-decoration:underline dashed;
}

header > h1 {
	border:none;
	font-size:1em;
	margin-top:0.4em;
	padding:0;
}

header > img {
	float:left;
	height:3em;
	margin-left:-0.3em;
	margin-right:0.5em;
	margin-top:0.1em;
}

header > nav {
	font-size:0.7em;
}

header > nav > ul li {
	display:inline;
}

/*
	Main content area	-	-	-	-	-	-	-	-	-	^MAIN
*/

main {
	grid-area:main;
	margin-top:4em;
	padding:0 1em;
}

main > nav > p {
	font-size:0.7em;
	margin:0;
}

/*
	Panel on the right	-	-	-	-	-	-	-	-	-	^PANEL
 */

aside {
	border:1px solid #ffaec9;
	grid-area:panel;
	margin-right:1em;
	margin-top:8em;
}

/*	Little numbers	*/
aside .Aside {
	float:right;
}

aside .Count {
	background-color:#ffaec9;
	border-radius:0;
	text-decoration:none;
	font-size:0.7em;
	margin-left:0.5em;
	padding:0.2em 0.5em;
}

aside #Panel .FilterMenu li,
aside .PanelInfo li,
aside #Panel .FilterMenu li:first-child,
aside .PanelInfo li:first-child {
	border:none;
}

aside .TagCloud li {
	border:none;
}

/*	Search area	*/
aside form > div {
    background-color:#ffaec9;
}

aside input#Form_Search,
aside input#Form_Go {
	padding:0.8em 1em;
}
aside input#Form_Search {
	border:0;
	box-shadow:inset 0 1px 4px rgba(0,0,0,0.3);
	width:100%;
}
aside input#Form_Go {
	display:none;
	/*border-color:#ffaec9;
	font-size:HACK;*/
}

aside .BoxFilter.BoxDiscussionFilter,
aside .Box.BoxCategories,
aside .Box {
    padding: 0.5em 1em;
}

/*
	Footer	-	-	-	-	-	-	-	-	-	-	-	-	^FOOT
*/

footer {
	border-top:1px solid #ffaec9;
	font-size:0.7em;
	grid-area:footer;
	text-align:center;
}
footer > ul li {
	display:inline;
}
footer > ul li::before {
	content:"| ";
}
footer > ul li:first-child::before {
	content:"";
}

/*	Pages	-	-	-	-	-	-	-	-	-	-	-	-	^PAGES

	Categories / landing page	-	-	-	-	-	-	-	^CATS
*/

main ul.CategoryList a.Title {
	font-size:1em;
}

/*	Overwrite red categories having grey bg	*/
main ul.CategoryList .Item.Read {
	background:none;
}

main ul.CategoryList .Item.Unread .Title::after{
	content:url("new.gif");
	padding-left:0.5em;
}

main ul.CategoryList li.Item {
	padding:1em;
}

main ul.CategoryList li.Depth2 {
	border-left-style:dashed;
	margin-left:+1em;
}



/*
	Post threads-	-	-	-	-	-	-	-	-	-	-	^POSTS
*/

/*	Thread title	*/
div.Discussion .PageTitle h1 {
	background-color:#fff200;
	font-size:1em;
	margin-bottom:-1px;
	margin-top:0.5em;
}

/*	Posts	*/
main .Item,
main .DataList .Item/*, .NarrowList .Item*/ {
	border:1px solid #ffaec9;
	font-size:1em;
	padding:0;
	margin-top:-1px;
}

/*	Author info.	*/
div.Item-Header.DiscussionHeader,
div.Item-Header.CommentHeader {
	background-color:#ffaec9;
	height:3em;
	margin:0;
}
.Item .Author a {
	font-size:1em;
}

/*	Author avatar	*/
.Author .PhotoWrap {
	margin:0;
	margin-right:1em;
}
.ProfilePhoto,
.ProfilePhotoMedium {
	height:3em;
	width:3em;
}

/*	Post date, etc. line	*/
.Meta.DiscussionMeta {
	margin-top:-0.5em;
}

h2.CommentHeading,
span.Back {
	display:none;
}

/*	Post content	*/
main div.Item-Body {
	padding:1em;
}

blockquote.Quote,
blockquote.UserQuote {
	padding:1em;
	border: 1px solid #ffaec9;
	border-left: 3px double #ffaec9;
}

/*	Post entry field	*/
textarea.TextBox {
	min-height:10em !important;
	padding:1em;
}
.textarea-autosize {
	resize:vertical !important;
}

/*
	Search results page	-	-	-	-	-	-	-	-	-	^SEARCH
*/



/*
	Profile	-	-	-	-	-	-	-	-	-	-	-	-	^PROFILE
 */

.ProfilePhotoLarge {
	width:100%;
}

/*
	Login pop-up	-	-	-	-	-	-	-	-	-	-	^LOGIN
 */

.MultipleEntryMethods .Methods {
	padding:1em;
}


a.Close {
    margin:0.5em;
}

.Border {
	background:rgba(82, 82, 82, 0.7);
	padding:0;
}

/*input#Form_SignIn {
	background-color:;
	border:;
	color:;
	font-size:;
}*/