Template:Articlenav/style.css

/******************************
**
**	LEVEL 1: ArticleNav
**
*******************************/
.articleNav{
	background:#D1DEEB;
	margin: 0 -1.5em 1.5em;
}

/*	Dark mode bg */
html.skin-citizen-dark .articleNav, body.wgl-darkmode .articleNav {
	background: #14212e;
}

.articleNavLinks{
	display:flex;
	flex-direction:row;
}

.articleNavLinks .ms-Icon{
	font-size: 1.1em;
	vertical-align: middle;
}

@media (max-width:720px){
	.articleNavLinks{
		flex-direction:column;
	}
}

.mainLink a, .walkthroughLink a, .galleryLink a, .transcriptLink a, .archiveLink a, .journalLink a{
	transition: 0.2s ease-in-out;
}

.mainNavCard .mainLink a, .walkthroughNavCard .walkthroughLink a, .galleryNavCard .galleryLink a, 
.transcriptNavCard .transcriptLink a, .archiveNavCard, .archiveLink a, .journalNavCard .journalLink a{
	background: #06305B;
	border-top: 2px solid #44deff;
	color: #FFFFFF;
}

.mainLink a:hover, .walkthroughLink a:hover, .galleryLink a:hover, .transcriptLink a:hover, 
.archiveLink a:hover, .journalLink a:hover{
	background:#4171A0;
	border-top: 2px solid #44deff;
	color: #FFFFFF;
}

.articleNav .card{
	display:flex;
}

.articleNavLinks .card{
	height: 100%;
}

.articleNav .mainCard{
	display: flex;
	justify-content: center;
	align-items: center;
}

.articleNav .mainCard a {
    padding: .7em;
}

.articleNav .articleNavLinks .mainCard a{
	flex:1;
}

.articleNav .mainCard a:hover, .articleNav .secondaryLink a:hover{
	text-decoration:none;
}

/******************************
**
**	LEVEL 2: General
**
*******************************/
.secondaryLink{
	padding:0.35em 0;
}
.walkthroughNavCard .walkthroughLink a, .transcriptNavCard .transcriptLink a{
	font-weight:600;
}

.pathNavCard{
	padding:0.35em 0.7em;
}

.pathNavCard .card{
	border-radius: 4px;
}

.pathNavCard .card .mainCard{
	justify-content: flex-start;
}

.pageNavCard{
	padding:0.35em 0.35em;
	display:flex;
}

.pageNavCard .card{
	flex:1;
	margin: 0 0.35em;
	border-radius:4px;
}

/******************************
**
**	LEVEL 2: Walkthrough
**
*******************************/
.walkthroughNavCard .walkthroughLink a, .walkthroughNav {
	background: #202C3D;
}

.walkthroughNav a{
	color: #B2C6F0;
}

.walkthroughNav .card{
	background:#384D6B;
}

.walkthroughNavCard .walkthroughLink a, .walkthroughNav .pathNavCard, .walkthroughNav .pageNavCard {
	color:#FFFFFF;
}

.walkthroughNavCard .secondaryLink a.new{
	color: #ef2c00;
}

/******************************
**
**	LEVEL 2: Transcript
**
*******************************/
.transcriptNavCard .transcriptLink a{
	color:#000000;
}

.transcriptNavCard .transcriptLink a, .transcriptNav {
	background:#B6A988;
}

.transcriptNav .card{
	background:#FFECBE;
}

/******************************
**
**	THEME: DARK MODE
**
*******************************/
html.skin-citizen-dark .transcriptNavCard .transcriptLink a, body.wgl-darkmode .transcriptNavCard .transcriptLink a, 
html.skin-citizen-dark .transcriptNav, body.wgl-darkmode .transcriptNav {
	background: #463C34;
}

html.skin-citizen-dark .transcriptNav .card, body.wgl-darkmode .transcriptNav .card{
	background: #927D6C;
}

/******************************
**
**	NEW
**
*******************************/
body .mw-body #firstHeading {
	text-align: center;
	position: absolute;
	z-index: 99;
	width: 100%;
	margin: 0;
	color: #FFFFFF;
	text-shadow: 0 0 7px #000000;
}

.navHead{
	margin: -1.3em -1.5em 0;
	height: 19.8em;
	overflow: hidden;
	z-index: -1;
	display: flex;
	align-items: center;
}

.navHead img{
	width: 100%;
	height: auto;
}

.hasNavHeadImg .articleNavLinks{
	position: absolute;
	margin: -4.3em 1.5em 0;
	background: #D1DEEB;
	background: rgba(209, 222, 235, 0.6);
}

.hasNavHeadImg.transcriptNavCard .articleNavLinks, .hasNavHeadImg.walkthroughNavCard .articleNavLinks{
	margin: -3.3em 1.5em 0;
}