MediaWiki:Common.css

/*glyphicons are here: https://getbootstrap.com/docs/3.3/components/#glyphicons */

/********************* COLORS *********************/
:root {
--dark: #23415F;
--medium: #97ACBF;
--medium3: #A9BBCA;
--bglight: #F2EFF1;
--bglight1: #F4F1F3;
--light: #F4D9CF;
--fontdark: #000000;
--fontlight: #fafafa;
--accentdark: #003D68;
--accent: #F2A794;
--accent1: #F5BFB1;
--panther: #FF99C9;
--tweekiblue: #265A88;
--white: #FAFAFA;
--new: #B6465F;
--newold: #953A4E;
--line: #EDFF8A;
--yes: #AFD5AA;
--warning: #703F04;
--warningbg: #FAC98E;
--warningborder: #FCB87F; 
--error: #FF521B;
}

/*show catlinks*/
/*#catlinks {display:block;}*/

/********************* TYPEFACES *********************/
/*FONT SOURCE SANS PRO */
/*@import url(https://fonts.googleapis.com/css?family=Lato);
* {font-family: 'Lato',sans-serif;}*/

@import url(https://fonts.googleapis.com/css?family=Poppins);
* {font-family: 'Poppins',sans-serif;}

/*after this, our base size to count from is about 10px (browser standard)*/
html {
	font-size: 62,5%; 
}

body,
p,
table p {
	font-size: 1.6rem;
}

body,
.navbar-default,
.navbar-brand {
	color: var(--dark);
}

/********************* LINKS *********************/

a:link { color: var(--tweekiblue); }

/* Get rid of the lock icon */
#content a.external, 
#content a.external[href^="gopher://"],
#content a.external[href^="https://"], 
.link-https {
	background: none;
	padding-right: 1px;
}

#content a.external:after, 
#content a.external[href^="gopher://"]:after,
#content a.external[href^="https://"]:after, 
.link-https:after {
	content: " \2197";
}

.btn a:link {color: var(--light);}

a.new { color: var(--new); }

a:visited { color: var(--accentdark); }
a.new:visited { color: var(--newold); }

a:hover, 
#content a.external:hover { color: var(--accentdark); background: var(--line); text-decoration:none;}

a.new:hover { color: var(--newold); }

a:active { color: var(--tweekiblue); }


/* Button */
#ca-edit-ext,
.btn a:link, 
.btn-primary a:link,
.btn-primary {color: var(--white);}

.btn.btn-primary.btn-block > b.caret {color: var(--white);}


/********************* HEADINGS *********************/
h1, h2, hr {
	color: var(--accent);
}

h1 {font-size: 5rem;}

h2 {margin-top: 30px;}

/*h1#firstHeading.firstHeading, {
	font-family: 'Lato', sans-serif;
	color: #002A4A;
}*/

/********************* MAIN PAGE / BUTTONS *********************/
/*hide page title on homepage/main page */
body.page-Main_Page.action-view h1.firstHeading, 
body.page-Main_Page.action-submit h1.firstHeading { display: none; }

.blurb {font-size: larger;}

/*.blurbsub */

button,
.mw-ui-button.mw-ui-progressive, 
.mw-ui-button.mw-ui-primary {
	background: var(--tweekiblue);
	border: 1px solid var(--tweekiblue);
	color: var(--white);
}

button:hover,
.mw-ui-button.mw-ui-progressive:hover, 
.mw-ui-button.mw-ui-primary:hover {
	background: var(--dark);
	border: 1px solid var(--dark);
	color: var(--white);
}

.mw-ui-input:focus {
    box-shadow: inset 0 0 0 2px var(--panther);
    border-color: var(--panther);
    outline: 0;
}

/* Boxen in Übersicht */
.panel-heading { 
	background-image: linear-gradient(to bottom,var(--bglight) 0,var(--bglight1) 100%); 
}

,panel-footer { 
	background-color: var(--bglight); 
}


/********************* BACKGROUND *********************/
.mw-body {border: 1px solid var(--light);}

#mw-page-base {
	background-image: linear-gradient(#ffffff 50%,#FFE9CF 100%);
	background-color: #ffffff;
}

body {background-color: var(--light);}

/*********************** HEADER/NAVBAR *********************/
/*https://css-tricks.com/snippets/css/css-box-shadow/*/
#mw-head.navbar-inner {
    background-image: linear-gradient(var(--accent1) 50%,var(--accent) 100%);
}
#mw-navigation.navbar {border-bottom-color: var(--accent); }
/*	-webkit-box-shadow: 0 4px 3px -3px var(--accentdark);
	 -moz-box-shadow: 0 4px 3px -3px var(--accentdark);
	 box-shadow: 0 4px 3px -3px var(--accentdark);*/

/********************* ERRORBOX ********************/

.errorbox {
	 color: var(--panther2);
	 background-color: var(--panther3);
	 border-color: var(--panther);
}

.warningbox {
	 color: var(--warning);
	 border-color: var(--warningborder);
	 background-color: var(--warningbg);
}

div.errormessage {color: var(--error);}

/********************* BRANDS ********************/
#mw-content-text table td.profile {font-size: larger;}

blockquote.quote {
	 border-left: 5px solid var(--accent1);
}

blockquote.quote span.quotetext {font-style: italic;}
blockquote.quote span.quotesource {font-size: small;}

/*
label.checkboxLabel {
    width: 200px;
    display: block;
    float: left;
}*/


/********************* TABLES ********************/

table.brand,
table.cert {
	max-width: 100%;
	border-collapse: separate;
	text-align: left;
	padding: 20px;
}

.brandaspect {
	border: 4px dotted var(--dark);
	border-radius: 4px;
}

/*
	background-color: var(--bglight1);
	padding-left-width: 40px;
	border: 4px solid var(--bglight1);
	margin: 1em;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
*/

.brand th,
.brand td,
.cert th,
.cert td {
	padding-bottom: 15px;
	padding-right: 15px;
}

/********************* CERTIFICATE *************************/

input {color: var(--accentdark);}

/********************* HELPBOX *************************/

div.helpbox {
	background-color: var(--bglight1); 
	padding: 15px;
	font-size: smaller;
}

/********************* CONTENT NOTEBOXES *************************/

div.box {
	background-color: var(--bglight1); 
	padding: 15px;
}

div.box.info {
	border: 1px solid blue;
	border-left-width: 5px;
}


div.box.alert {
	border: 1px solid var(--warningborder);
	background-color: var(--warningbg);
	border-left-width: 5px;
}