html
	font-size: 1.0rem
	@media (min-width: 960px)
		font-size: 1.15rem


body, h1, h2, h3, h4, .content-column-content p, .content-column-content li, .box-masonry .box-masonry-text p
	color: var(--textcolor)

body
	background-color: var(--bglight)
	line-height: 1.7
	height: 100%

	@media (min-width: 960px)
		font-size: inherit


.rfloat 
	float: right

h1, .h1 
	font-size: 2.5rem
	font-weight: 700
	margin-bottom: 2rem

h2, .h2 
	font-size: 2rem
	font-weight: 700
	margin-top: 2rem
	margin-bottom: 2rem

h3, .h3 
	font-size: 1.7rem
	font-weight: 700
	margin-top: 2rem
	margin-bottom: 2rem

h4, .h4 
	font-size: 1.4rem
	font-weight: 700

ul, ol 
	margin-bottom: 2rem


blockquote 
	font-size: inherit
	font-style: italic
	border-left: 5px solid var(--accent)


button 
	background-color: var(--accent) !important
	color: white !important
	border-color: darkgrey !important


.small-navbar button 
	position: fixed
	z-index: 99
	margin-top: -1rem
	margin-left: 1rem


hr 
	border-top: 1px solid var(--accent)

a.internal 
	cursor: pointer


img.full 
	width: 100% !important


#csslink 
	position: absolute
	right: 0
	z-index: 99

	visibility: hidden
	@media only screen and (min-width: 1200px)
		visibility: visible

footer 
	position: fixed
	bottom: 0
	right: 0
	margin: 0
	height: 140px

	.img-responsive
		margin: 0

	visibility: hidden
	@media only screen and (min-width: 1200px)
		visibility: visible


.content-column 
	padding-left: 30px
	padding-right: 30px
	padding-top: 30px

	@media (min-width: 1200px)
		padding-left: 5rem
	
	&-content
		@media (min-width: 1200px)
			padding: 0

	div.row 
		padding-bottom: 14px


.col-lg-8
	@media (min-width: 1200px) 
		width: 72%
	

a.external
		background-image: url(/img/external.png)
		background-position: center right
		background-repeat: no-repeat
		padding-right: 13px
		border-bottom: 1px dotted #526A43

		&:hover
			text-decoration: none

.footnotes
	font-size: 0.9em
	

.content-column-content
	img 
		cursor: pointer
		border: 1px solid black
		border-radius: 5px
	.video-mask
		padding-top: 1rem
		padding-bottom: 1rem
	    width: 100%
	    border-radius: 5px
	    overflow: hidden

	a:hover 
		text-decoration: none

	a:not([href]) 
		padding-right: 0
		background-image: none

	p, li 
		text-align: justify !important


.modal-header 
	display: none


a, .box-masonry h4 a 
	color: var(--textlink)
	text-decoration: none

a:hover, .box-masonry h4 a:hover 
	color: var(--textlink)
	background-color: #d1d3bd
 

.container-fluid 
	padding-left: 0
	height: 100%


.box-masonry 
	background-color: #d9e7ac
	border: 1px solid var(--accent)

	&:hover
		box-shadow: 0 0 5px black
		.box-masonry-hover-text-header, .box-masonry-hover-center
			opacity: 1
		.box-masonry-image.with-hover-overlay:before
			opacity: 0.3
		.box-masonry-image.with-hover-icon:after
			opacity: 1

	.box-masonry-image 
		background: none
		padding-top: 10px


.img-inactive 
	display: block
	width: 100%


.img-active 
	display: none
	width: 100%


.pages
	color: var(--accent)

.pagination > .disabled > span
	background-color: var(--bgdarker)

.pagination > li > a, .pagination > li > span
	background-color: var(--bgdark)
	border: 1px solid var(--bgdarker)
	color: #333

.pagination > .active > a
	background-color: var(--bglight)
	color: #333


.categories
	color: var(--accent)

	kbd
		padding: 0.2rem 0.5rem 0.2rem 0.5rem
		background-color: var(--bgdark)
		color: var(--accent)