/*
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@author			Jacques Baars <j@w3d.co.za>
*
*	@notice			This is the property of W3Designs, W3Development, W3D,
*					it is illegal to use this source code without the required permission,
*					contact j@w3d.co.za for further advice or permissions.
*
*	@license		Copyright (c) 2016 W3Designs (PTY) Ltd. (http://www.w3d.co.za)
*
*	@source			core.css
*	
*	@conception		<07 December 2021>
*	@updated		<26 November 2025>
*	@version		<5.11.26>
*/

/* ------------- STATUS:ROOT ------------- */

:root{
	--maintenanceBgColor: #377EB6;
	--maintenanceBgColor2: #266597;
	
	--suspendedBgColor: #AF0202;
	--suspendedBgColor2: #880000;
	
	--unavailableBgColor: #111;
	--unavailableBgColor2: #000;
	
	--riskBgColor: #F16F08;
	--riskBgColor2: #E86803;
}

/* ------------- DOCUMENT ------------- */

/* HTML */
html{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font: 100% Calibri, Verdana, Arial, Helvetica, sans-serif;
}

/* Body */
body{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

/* Body */
body.m{
	background: var(--maintenanceBgColor);
	background: linear-gradient(135deg, var(--maintenanceBgColor) 0%, var(--maintenanceBgColor) 75%, var(--maintenanceBgColor2) 75%, var(--maintenanceBgColor2) 100%);
}

/* Body */
body.s{
	background: var(--suspendedBgColor);
	background: linear-gradient(135deg, var(--suspendedBgColor) 0%, var(--suspendedBgColor) 75%, var(--suspendedBgColor2) 75%, var(--suspendedBgColor2) 100%);
}

/* Body */
body.u{
	background: var(--unavailableBgColor);
	background: linear-gradient(135deg, var(--unavailableBgColor) 0%, var(--unavailableBgColor) 75%, var(--unavailableBgColor2) 75%, var(--unavailableBgColor2) 100%);
}

/* Body */
body.r{
	background: var(--riskBgColor);
	background: linear-gradient(135deg, var(--riskBgColor) 0%, var(--riskBgColor) 75%, var(--riskBgColor2) 75%, var(--riskBgColor2) 100%);
}

/* Headings */
h1, h2, h3, h4, h5, h6{
	margin: 0;
	padding: 0;
}

/* H2 */
h2{
	letter-spacing: 1px;
}

/* Links */
a{text-decoration: none;}
a:link{color: #fff;}
a:visited{color: #fff;}
a:active{color: #fff;}
a:hover{color: #fff;}

/* Status */
#status{
	width: 100%;
	height: 100%;
	text-align: center;
	position: relative;
}

	#status h1{
		color: #fff;
		font-size: 600%;
		padding: 15% 0 0;
	}

	#status h2{
		color: #fff;
		font-size: 400%;
	}

	#status .description{
		color: #fff;
		font-size: 200%;
	}

	#status.m h1,
	#status.m h2{
		text-shadow: 4px 4px 0 var(--maintenanceBgColor2);
	}

	#status.s h1,
	#status.s h2{
		text-shadow: 4px 4px 0 var(--suspendedBgColor2);
	}

	#status.u h1,
	#status.u h2{
		text-shadow: 4px 4px 0 var(--unavailableBgColor2);
	}

	#status.r h1,
	#status.r h2,
	#status.r .description{
		text-shadow: 4px 4px 0 var(--riskBgColor2);
	}

/* 1380px */
@media screen and (max-width: 1380px){
	#status h1{
		font-size: 500%;
		padding: 20% 0 0;
	}

	#status h2{
		font-size: 300%;
	}
}

/* 600px */
@media screen and (max-width: 600px){
	#status h1{
		font-size: 400%;
		padding: 40% 0 0;
	}

	#status h2{
		font-size: 200%;
	}
}