@font-face{font-family:Marcellus;src:url("/chronicle/fonts/Marcellus-Regular.ttf")}

.margin-right-0 { margin-right: 0; }
.margin-right-5 { margin-right: 5px; }
.margin-right-10 { margin-right: 10px; }
.margin-right-15 { margin-right: 15px; }
.margin-right-20 { margin-right: 20px; }
.margin-right-25 { margin-right: 25px; }
.margin-right-30 { margin-right: 30px; }

.margin-left-0 { margin-left: 0; }
.margin-left-5 { margin-left: 5px; }
.margin-left-10 { margin-left: 10px; }
.margin-left-15 { margin-left: 15px; }
.margin-left-20 { margin-left: 20px; }
.margin-left-25 { margin-left: 25px; }
.margin-left-30 { margin-left: 30px; }

.margin-top-0 { margin-top: 0; }
.margin-top-5 { margin-top: 5px; }
.margin-top-10 { margin-top: 10px; }
.margin-top-15 { margin-top: 15px; }
.margin-top-20 { margin-top: 20px; }
.margin-top-25 { margin-top: 25px; }
.margin-top-30 { margin-top: 30px; }

.margin-bottom-0 { margin-bottom: 0; }
.margin-bottom-5 { margin-bottom: 5px; }
.margin-bottom-10 { margin-bottom: 10px; }
.margin-bottom-15 { margin-bottom: 15px; }
.margin-bottom-20 { margin-bottom: 20px; }
.margin-bottom-25 { margin-bottom: 25px; }
.margin-bottom-30 { margin-bottom: 30px; }

/* ==========================================================================
   Silkroad: Chronicle theme
   Dark parchment-on-obsidian palette with gold/bronze accents, matching the
   "Silkroad: Chronicle" key art (near-black backdrops, engraved gold type).
   ========================================================================== */

:root {
	--blue: #007bff;
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #dc3545;
	--orange: #fd7e14;
	--yellow: #ffc107;
	--green: #28a745;
	--teal: #20c997;
	--cyan: #17a2b8;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #343a40;

	/* Chronicle palette */
	--gold: #c9a648;
	--gold-light: #f0d78c;
	--gold-dark: #8a6d2f;
	--bronze: #7a5f22;
	--ink: #0b0906;
	--panel: #171310;
	--panel-alt: #1f1a14;
	--parchment: #e8e1d3;
	--parchment-muted: #a99c85;

	--primary: var(--gold);
	--primary-hover: var(--gold-light);
	--primary-hover-border: var(--gold);
	--secondary: var(--bronze);
	--success: #28a745;
	--info: #17a2b8;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #343a40;
	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

html, body {
	background-color: var(--ink);
	color: var(--parchment);
	font-family: Marcellus, Georgia, "Times New Roman", serif;
}

body {
	background: radial-gradient(ellipse at top, #211a10 0%, var(--ink) 55%, #000 100%) fixed;
}

a {
	color: var(--gold-light);
}
a:hover, a:focus {
	color: var(--gold);
}

h1, h2, h3, h4, h5, h6,
.tagline-home, .page-header {
	font-family: 'Cinzel', Marcellus, Georgia, serif;
	font-weight: 700;
	letter-spacing: .5px;
	color: var(--gold-light);
	background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Fallback for browsers without background-clip: text support */
@supports not (-webkit-background-clip: text) {
	h1, h2, h3, h4, h5, h6,
	.tagline-home, .page-header {
		color: var(--gold);
		-webkit-text-fill-color: initial;
	}
}

.page-header {
	border-bottom: 1px solid var(--bronze);
}

.custom-seperator img {
	filter: sepia(1) saturate(3) hue-rotate(5deg) brightness(0.9);
	opacity: .8;
}

/* Header / hero */
.template-header, .template-header-home {
	background: linear-gradient(180deg, rgba(11,9,6,.15) 0%, rgba(11,9,6,.55) 100%), url(/chronicle/images/hero-cover.jpg) 50% 50% no-repeat scroll!important;
	background-size: cover !important;
	-o-background-size: cover;
	background-color: var(--ink);
	height: 720px;
	border-bottom: 2px solid var(--bronze);
	box-shadow: 0 6px 24px rgba(0,0,0,.6);
}

/* Navbar */
.navbar,
.navbar-inverse {
	background: transparent !important;
	border-bottom: 1px solid rgba(122,95,34,.6);
}
.navbar-nav > li > a {
	text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6);
}
.navbar .navbar-brand img,
img#branding, #phoneBranding img {
	height: 52px !important;
	width: 149px !important;
	max-width: 220px;
	object-fit: contain;
	object-position: left center;
	padding-top: 0 !important;
	margin: 0 10px !important;
}
.navbar-nav > li > a {
	font-family: 'Cinzel', Marcellus, serif;
	color: var(--parchment) !important;
	letter-spacing: .5px;
	transition: color .2s ease;
	position: relative;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
	color: var(--gold-light) !important;
	background: transparent !important;
}
.navbar-nav > li.active > a {
	color: var(--gold) !important;
	border-bottom: 1px solid var(--gold);
}
.navbar-toggle {
	border-color: var(--bronze);
}
.navbar-toggle .icon-bar {
	background-color: var(--gold);
}

/* Sidebar nav (legacy) */
.sidebar-nav .navbar-default {
	background-color: unset;
	border-color: var(--bronze);
}
.sidebar-nav .navbar-nav>li>a {
	padding-top: 10px!important;
	padding-bottom: 10px!important;
	color: var(--parchment);
}
.sidebar-nav .nav>li>a {
	padding: 10px 50px;
}
.sidebar-nav .navbar-default .navbar-nav>.active>a, .sidebar-nav .navbar-default .navbar-nav>.active>a:focus, .sidebar-nav .navbar-default .navbar-nav>.active>a:hover {
	color: var(--gold);
	background-color: unset;
}

/* Content panels */
.posts {
	background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
	border: 1px solid var(--bronze);
	border-radius: 4px;
	padding: 20px 24px;
	margin-bottom: 24px;
	box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.news-content {
	color: var(--parchment);
}
.news-content, .posts, .posts p {
	color: var(--parchment);
}

.sidebar {
	color: var(--parchment);
}
.sidebar h3 {
	margin-top: 0;
}
.sidebar hr {
	border-top: 1px solid var(--bronze);
}
.sidebar .discord,
.sidebar > div {
	background: var(--panel);
	border: 1px solid var(--bronze);
	border-radius: 4px;
	padding: 6px;
}
.discord {
	height: 300px;
}

/* Thumbnails / download cards */
.thumbnail {
	background: var(--panel);
	border: 1px solid var(--bronze);
	color: var(--parchment);
}
.thumbnail .caption h3 {
	font-size: 20px;
}

/* Tables */
.table {
	color: var(--parchment);
	background: var(--panel);
	border: 1px solid var(--bronze);
}
.table > thead > tr > th {
	font-family: 'Cinzel', Marcellus, serif;
	color: var(--gold);
	background: var(--panel-alt);
	border-bottom: 2px solid var(--bronze);
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > thead > tr > th {
	border-color: var(--bronze);
}
.table-responsive.downloads,
.table-responsive.center-block {
	border: 1px solid var(--bronze);
	border-radius: 4px;
	background: var(--panel);
	padding: 10px;
}
.table-hover > tbody > tr:hover,
.clickable-row_new:hover {
	background-color: rgba(201,166,72,.12) !important;
	cursor: pointer;
}

/* Buttons */
.btn-primary {
	background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 60%, var(--gold-dark) 100%);
	border-color: var(--bronze);
	color: #201808;
	font-family: 'Cinzel', Marcellus, serif;
	text-shadow: none;
}
.btn-primary:hover,
.btn-primary:focus {
	background: linear-gradient(180deg, #fbe7ad 0%, var(--gold-light) 60%, var(--gold) 100%);
	border-color: var(--gold);
	color: #201808;
}

.btn-info, .btn-default, .btn-secondary {
	background: var(--panel-alt);
	border: 1px solid var(--bronze);
	color: var(--gold-light);
	font-family: 'Cinzel', Marcellus, serif;
	text-shadow: none;
}
.btn-info:hover, .btn-info:focus,
.btn-default:hover, .btn-default:focus,
.btn-secondary:hover, .btn-secondary:focus {
	background: var(--bronze);
	border-color: var(--gold);
	color: var(--gold-light);
}

/* Forms */
.form-control {
	background-color: var(--panel);
	border: 1px solid var(--bronze);
	color: var(--parchment);
}
.form-control:focus {
	border-color: var(--gold);
	box-shadow: 0 0 0 .2rem rgba(201,166,72,.25);
	background-color: var(--panel);
	color: var(--parchment);
}
label {
	color: var(--parchment-muted);
}

/* Footer */
footer {
	color: var(--parchment-muted);
	border-top: 1px solid var(--bronze);
	padding-top: 10px;
}
footer hr {
	border-top: 1px solid var(--bronze);
}
footer a {
	color: var(--gold);
}
footer a:hover {
	color: var(--gold-light);
}

/* Pagination */
.pagination > li > a,
.pagination > li > span {
	color: var(--gold-light);
	background-color: var(--panel);
	border: 1px solid var(--bronze);
}
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
	color: var(--ink);
	background-color: var(--gold-light);
	border-color: var(--gold);
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
	color: #201808;
	background-color: var(--gold);
	border-color: var(--gold);
}
.pagination > .disabled > a,
.pagination > .disabled > a:focus,
.pagination > .disabled > a:hover,
.pagination > .disabled > span,
.pagination > .disabled > span:focus,
.pagination > .disabled > span:hover {
	color: var(--parchment-muted);
	background-color: var(--panel-alt);
	border-color: var(--bronze);
}

/* Scrollbar accent (Webkit) */
::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	background: var(--ink);
}
::-webkit-scrollbar-thumb {
	background: var(--bronze);
	border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--gold);
}