django-exalted/static/css/style.css

/* ========================================================================== */
/* ------------------------------- VARIABLES -------------------------------- */
/* ========================================================================== */
:root {
	--grey: #40545c;
	--orange: #e8a951;
}

/* ========================================================================== */
/* --------------------------------- LAYOUT --------------------------------- */
/* ========================================================================== */
html {
	background-color: var(--grey);
	background-image: url(../images/tiling/crackedStone.jpg);
	background-attachment: fixed;
	background-position: center;
	color: var(--grey);
}
body {
	background-color: transparent;
	padding: 0;
	margin: 0;
	color: var(--grey);
}
footer {
	background-color: var(--grey);
	margin-bottom: 0;
	padding: 16px;
}
.center {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}
.page {
	max-width: 1500px;
	margin-top: 35px;
	margin-left: auto;
	margin-right: auto;
	padding: 8px;
}
.bar {
	position: fixed;
	width: 100%;
	z-index: 1;
	top: 0;
	overflow: hidden;
	background-color: var(--grey);
}
.bar .bar-item {
	color: var(--orange);
	padding: 8px 16px;
	float: left;
	width: auto;
	border: none;
	display: block;
	outline: 0;
}
.button {
	border: none;
	display: inline-block;
	padding: 8px 16px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background-color: inherit;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
}
.show-block {
	display: block !important;
}

/* ========================================================================== */
/* ---------------------------------- GRID ---------------------------------- */
/* ========================================================================== */
.grid-wrapper {
	display: grid;
	row-gap: 8px;
	column-gap: 8px;
}
.grid-wrapper > div {
	background-image: url("../images/tiling/manuscript.jpg");
	padding: 8px;
	box-shadow:2px 2px 2px 2px rgba(0,0,0,0.16), 2px 2px 2px 2px rgba(0,0,0,0.12);
}

/* Large */
@media (min-width: 993px) {
	.hide-large {
		display: none !important;
	}
}
/* Medium */
@media (min-width: 601px) and (max-width: 992px) {
	.hide-medium {
		display: none !important;
	}
}
/* Small */
@media (max-width: 600px) {
	.hide-small {
		display: none !important;
	}
}

/* ========================================================================== */
/* -------------------------------- TOOLTIPS -------------------------------- */
/* ========================================================================== */
/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	max-width: 600px;
	background-color: var(--grey);
	color: var(--orange);
	text-align: center;
	padding: 1px 7px;
	border-style: solid;
	border-color: var(--orange);
	border-width: 1px;

	/* Position the tooltip text */
	position: absolute;
	z-index: 1;
	top: 125%;
	left: 50%;
	margin-left: -60px;

	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -7px;
	border-width: 7px;
	border-style: solid;
	border-color: transparent transparent var(--orange) transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

/* ========================================================================== */
/* -------------------------------- SHADOWS --------------------------------- */
/* ========================================================================== */
.shadow-2 {
	box-shadow:2px 2px 2px 2px rgba(0,0,0,0.16), 2px 2px 2px 2px rgba(0,0,0,0.12);
}
.shadow-4 {
	box-shadow:4px 4px 4px 4px rgba(0,0,0,0.2), 4px 4px 4px 4px rgba(0,0,0,0.19);
}

/* ========================================================================== */
/* -------------------------------- COLOURS --------------------------------- */
/* ========================================================================== */
.orange {
	color: var(--orange);
}
.grey {
	color: var(--grey);
}
.hover-orange:hover {
	background-color: var(--orange);
	color: var(--grey);
}
.hover-grey:hover {
	background-color: var(--grey);
	color: var(--orange);
}

/* ========================================================================== */
/* --------------------------- BASIC TEXT STYLES ---------------------------- */
/* ========================================================================== */
h1, h2, h3, p {
	font-family: "Marcellus SC";
	color: var(--grey);
	margin: 0;
}

h1, h2, h3 {
	font-weight: bold;
	text-align: center;
	overflow: hidden;
}
h1 {
	font-size: 32px;
}
h1:before, h1:after {
	height: 5px;
}
h2 {
	font-size: 24px;
}
h2:before, h2:after {
	height: 2px;
}
h3 {
	font-size: 18px;
}
h3:before, h3:after {
	height: 2px;
}
h1:before, h1:after, h2:before, h2:after, h3:before, h3:after {
	background-color: var(--grey);
	content: "";
	display: inline-block;
	position: relative;
	vertical-align: middle;
	width: 50%;
}
h1:before, h2:before, h3:before {
	right: 4px;
	margin-left: -50%;
}
h1:after, h2:after, h3:after {
	left: 4px;
	margin-right: -50%;
}

p {
	text-align: justify;
	padding: 2px;
	padding-left: 4px;
	padding-right: 4px;
}

/* Vertial Line */
.vl {
	background: linear-gradient(to right,
		transparent 0%,
		transparent calc(50% - 0.5px),
		#40545c calc(50% - 0.5px),
		#40545c calc(50% + 0.5px),
		transparent calc(50% + 0.5px),
		transparent 100%);
}

/* Accordions */
.accordion,.trAccordion {
	cursor: pointer;
	outline: none;
	transition: 0.4s;
}
.accordionActive {
	background-color:#40545c;
	color:#e8a951;
}
.accordionPanel,.accordionRow {
	color:#40545c;
	display: none;
	overflow: hidden;
}