/**
 * Main Stylesheet
 *
 * @copyright Copyright (c) 2012 rocksolidthemes.com
 * @license   https://rocksolidthemes.com/agb   No free usage allowed
 */


/* ===========================================
 # Index: The structure of this stylesheet
 *
 - Imports (SASS only)
 - Fonts
 - Basic settings (SASS only)
 - Colors (SASS only)
 - General styles
 - Button styles
 - Wrapper Elements
 - Elements in order of appearance in HTML
 - Content styles
 - Sidebar styles
 - Form styles
 - Content elements
 - Slider styles
 - Module styles (Search, FAQ, News, Events, Comments)
 - Footer styles
 - Media queries
 - Grid (design + production helper)
 * ========================================


// ===========================================
 * Imports (Mixins)
 * ========================================

@import "mixins.sass"


/* ===========================================
 * Fonts
 * ========================================

+font-face("RockSolid Icons", font-files("rocksolid-icons.woff", woff, "rocksolid-icons.ttf", truetype, "rocksolid-icons.svg", svg), "rocksolid-icons.eot", normal, normal)

@font-face
	font-family: 'Source Sans Pro'
	font-weight: 400
	font-style: normal
	src: url('../fonts/source-sans-pro-400.woff2') format('woff2')

@font-face
	font-family: 'Source Sans Pro'
	font-weight: 600
	font-style: normal
	src: url('../fonts/source-sans-pro-600.woff2') format('woff2')

@font-face
	font-family: 'Source Sans Pro'
	font-weight: 400
	font-style: italic
	src: url('../fonts/source-sans-pro-400italic.woff2') format('woff2')

@font-face
	font-family: 'Source Sans Pro'
	font-weight: 600
	font-style: italic
	src: url('../fonts/source-sans-pro-600italic.woff2') format('woff2')


// ===========================================
 * Basic settings
 * ========================================

$logo-height:                120px                          !default
$logo-top:                   42px                           !default
$logo-left:                  0                              !default
$logo-bottom:                30px                           !default
$logo-background-color:      #ffffff                        !default
$logo-background-transparent: false                         !default

// Widths
$max-width:                  1122px                         !default

// Font
$font-family:                "Source Sans Pro", sans-serif  !default
$font-size:                  18px                           !default
$font-size-mobile:           15px                           !default
$line-height:                1.5                            !default

$headline-size-1:             1.8em                         !default
$headline-size-2:             1.5em                         !default
$headline-size-3:             1.2em                         !default
$headline-size-4:             1.1em                         !default
$headline-size-5:             1em                           !default
$headline-size-6:             0.9em                         !default

$fluid-content-images:       true                           !default
$content-image-cols:         7                              !default

// responsive break points
$breakpoint-desktop:         $max-width                     !default
$breakpoint-tablet:          900px                          !default
$breakpoint-mobile:          599px                          !default
$breakpoint-mobile-portrait: 399px                          !default


// ===========================================
 * Colors
 * ========================================

// Colorset
$white:                     #ffffff !default
$black:                     #000000 !default
$light-black:               #343434 !default
$grey:                      #b1b1b1 !default
$dark-grey:                 #636363 !default
$light-grey:                #e8e8e8 !default
$medium-grey:               #dedede !default
$ultra-light-grey:          #f6f6f6 !default
$blue:                      #0788ca !default
$dark-blue:                 #3d566e !default
$green:                     #7eba28 !default
$red:                       #de5959 !default
$loud-red:                  #e52f2f !default

// Content colors
$highlight-color:           $blue                    !default
$headline-color:            $dark-blue               !default
$block-headline-color:      $headline-color          !default
$highlight-headline-color:  $dark-blue               !default
$font-color:                $light-black             !default
$font-color-light:          mix($grey, $dark-grey)   !default
$footer-color:              mix($grey, $dark-grey)   !default
$confirmation:              $green                   !default
$information:               $blue                    !default
$warning:                   $loud-red                !default
$selection-color:           $dark-blue               !default

// Links & Navigation
$link-color:                $blue                    !default
$nav-color:                 $dark-grey               !default
$nav-hover-color:           $dark-blue               !default
$nav-active-color:          $dark-grey               !default

// Border
$border-light:              $light-grey              !default
$border-medium:             $medium-grey             !default

// Shadows
$shadow-color:              $black                   !default

// Backgrounds
$boxed-layout:              true                     !default
$background-image:          none                     !default
$background-repeat:         no-repeat                !default
$background-position:       50% 0                    !default
$background-attachment:     scroll                   !default
$background-size:           auto                     !default
$background-color:          $white                   !default
$main-background:           $white                   !default
$page-background:           $white                   !default
$nav-background-color:      $ultra-light-grey        !default

// Buttons
$button-color:              $white                   !default
$button-background-color:   $dark-blue               !default


/* ===========================================
 * General styles
 * ========================================

#{":root"}
	#{--safe-area-left}: 0px
	#{--safe-area-right}: 0px
	#{--safe-area-top}: 0px
	#{--safe-area-bottom}: 0px

	@supports (padding: calc(constant(safe-area-inset-left, 0px) / 1.5))
		/* Non-standard iOS 11.1 syntax
		#{--safe-area-left}: calc(constant(safe-area-inset-left, 0px) / 1.5)
		#{--safe-area-right}: calc(constant(safe-area-inset-right, 0px) / 1.5)
		#{--safe-area-top}: constant(safe-area-inset-top, 0px)
		#{--safe-area-bottom}: constant(safe-area-inset-bottom, 0px)

	@supports (padding: calc(max(0px, env(safe-area-inset-left, 0px) - 14px))) and (padding: calc(max(0px, 1px)))
		/* W3C standard and iOS 11.2 syntax
		#{--safe-area-left}: calc(max(0px, env(safe-area-inset-left, 0px) - 14px))
		#{--safe-area-right}: calc(max(0px, env(safe-area-inset-right, 0px) - 14px))
		#{--safe-area-top}: env(safe-area-inset-top, 0px)
		#{--safe-area-bottom}: env(safe-area-inset-bottom, 0px)

html
	position: relative
	+box-sizing(border-box)
	-webkit-tap-highlight-color: $link-color

body
	font: #{$font-size}/#{$line-height} $font-family
	color: $font-color
	background: $background-color $background-image $background-position $background-repeat $background-attachment
	background-size: $background-size
	+mediaquery(mobile)
		font-size: $font-size-mobile

*
	+box-sizing(inherit)

.rs-columns
	clear: both
	display: inline-block
	vertical-align: top
	width: 100%
	> h1, > h2, > h3
		@extend %block-headline

.rs-column
	float: left
	width: 100%
	margin-top: col(1, 16)
	margin-right: col(1, 16)
	&.-large-first
		clear: left
	&.-large-last
		margin-right: -5px
	&.-large-first-row
		margin-top: 0
	+column-classes((1 / 16), 6, large)
	.opensauce-fullwidth &
		margin-top: col(1, 26)
		margin-right: col(1, 26)
		&.-large-last
			margin-right: -5px
		&.-large-first-row
			margin-top: 0
		+column-classes((1 / 26), 6, large)
	+mediaquery(tablet)
		&, .opensauce-fullwidth &
			margin-top: col(1, 16)
			margin-right: col(1, 16)
			&.-large-first
				clear: none
			&.-large-last
				margin-right: col(1, 16)
			&.-large-first-row
				margin-top: col(1, 16)
			&.-medium-first
				clear: left
			&.-medium-last
				margin-right: -5px
			&.-medium-first-row
				margin-top: 0
			+column-classes((1 / 16), 6, medium)
	+mediaquery(mobile)
		&, .opensauce-fullwidth &
			margin-right: col(1, 16)
			&.-medium-first
				clear: none
			&.-medium-last
				margin-right: col(1, 16)
			&.-medium-first-row
				margin-top: col(1, 16)
			&.-small-first
				clear: left
			&.-small-last
				margin-right: -5px
			&.-small-first-row
				margin-top: 0
			+column-classes((1 / 16), 6, small)



/* Resetting box model for moo_mediabox and j_colorbox
#mbCenter, #colorbox
	+box-sizing(content-box)

::selection
	background: $selection-color
	color: $main-background
	+text-shadow(none !important)
::-moz-selection
	background: $selection-color
	color: $main-background
	+text-shadow(none !important)

button, input, select, textarea
	font-family: inherit

table
	width: 100%
	border-collapse: collapse
	border: 1px solid $border-medium
	+box-shadow(0 0 5px rgba($shadow-color, 0.1))
	th, td
		border: 1px solid $border-light
	th
		padding: em(6) em(10)
		font-weight: 600
		text-align: left
		background: rgba($shadow-color, 0.02)
	td
		padding: em(6) em(10)

strong, b
	font-weight: 600

a
	color: $link-color
	text-decoration: none
	&:hover, &:focus
		text-decoration: underline
	&:hover, &:active
		outline: 0
	&.external-link:after
		+icon("\e151", em(13))
		margin-left: em(4)

/* Icon attribute
*[data-icon]
	&:before
		+icon(attr(data-icon))
		margin-right: em(4)
	&.after
		&:before
			content: none
		&:after
			+icon(attr(data-icon))
			margin-left: em(4)

.clear
	clear: both

.invisible
	position: absolute
	height: 1px !important
	width: 1px !important
	clip: rect(0 0 0 0)
	margin: -1px
	padding: 0
	overflow: hidden
	border: 0

.syndication
	margin: em(12) 0 0 em(20)
	float: right
	a
		margin-left: em(2)

.mime_icon
	margin-bottom: -.25em

.download-element
	padding-top: 0
	padding-right: 0
	padding-bottom: 0

.ce_toplink, .toplink
	margin: em(24) 0
	a
		display: block
		width: 100%

.ce_toplink > a:before, .toplink > a:before
	+icon("\e00c")
	margin-right: em(5)

/* Style for dlh_googlemaps (if you don't use the plugin, you might want to delete this)
.dlh_googlemap
	+box-sizing(content-box)
.main-content, .sidebar
	.dlh_googlemap
		/* Setting the maps max-width to 100% is best practice, since it becomes fluid that way
		max-width: 100%
.main-content .dlh_googlemap img
	max-width: none

hr
	clear: both
	height: 1px
	overflow: visible
	margin: em(24) 0
	border: 0
	background: $border-medium

.confirmation
	color: $confirmation
.information
	color: $information
.warning
	color: $warning
p, div, span
	&.confirmation, &.information, &.warning
		position: relative
		display: block
		margin: em(27) 0
		padding: em(50) col(1, 16) em(20)
		border: 1px solid $border-medium
		+border-radius(1.5px)
		@if lightness($main-background) < 50%
			color: lighten($confirmation, 25%)
		@else
			color: darken($confirmation, 25%)
		background: $main-background
		+background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)))
		+box-shadow(0 0 5px rgba($shadow-color, 0.1))
		&:before
			+icon("\e044", em(14))
			position: absolute
			top: -1px
			right: -1px
			left: -1px
			padding: em(8, 14) em(20, 14)
			color: $main-background
			text-align: right
			background: $confirmation
	&.information
		@if lightness($main-background) < 50%
			color: lighten($information, 25%)
		@else
			color: darken($information, 25%)
		&:before
			content: "\e0a6"
			background: $information
	&.warning
		@if lightness($main-background) < 50%
			color: lighten($warning, 25%)
		@else
			color: darken($warning, 25%)
		&:before
			content: "\e144"
			background: $warning

p.drop-cap:first-letter, span.drop-cap
	float: left
	margin: em(5, 60) em(6, 60) em(-10, 60) em(-3, 60)
	font-size: em(60)
	font-weight: 600
	line-height: 0.7
	color: $headline-color
p.drop-cap:first-letter
	/* IE8 and IE9 calculate em's from the parent element
	margin: em(5) em(6) em(-10) em(-3) unquote("\0/")

code
	padding: em(2, 14) em(5, 14)
	font-family: "Lucida Console", monospace
	font-size: em(14)
	+line-height(19, 14)
	background-color: $border-light
	+border-radius(3px)

pre
	margin: em(24, 14) 0
	padding: 0 em(6, 14)
	display: block
	overflow: auto
	font-family: "Lucida Console", monospace
	font-size: em(14)
	+line-height(24, 14)
	background: $border-light
	.hljs,
	code
		font-size: em(14, 14)
		padding: 0
		line-height: inherit
		background-color: transparent


/* ===========================================
 * Button styles
 * ========================================

button, .button, input[type="submit"], input[type="reset"], input[type="button"]
	position: relative
	+appearance(none)
	display: inline-block
	padding: em(10) em(27)
	border: 1px solid
	border-color: darken($button-background-color, 5%) darken($button-background-color, 10%) darken($button-background-color, 15%)
	+border-radius(1.5px)
	color: $button-color
	text-align: center
	text-decoration: none
	+text-shadow(1px 1px 0 darken($button-background-color, 10%))
	background: $button-background-color
	+background(linear-gradient(lighten($button-background-color, 3%), darken($button-background-color, 3%)))
	+box-shadow(0 0 8px rgba($shadow-color, 0.1), inset 1px 1px tint($button-background-color, 30%), inset -1px 0 tint($button-background-color, 30%))
	&:hover, &:focus
		border-color: darken($button-background-color, 10%) darken($button-background-color, 15%) darken($button-background-color, 20%)
		+background-image(linear-gradient(lighten($button-background-color, 6%), darken($button-background-color, 6%)))
		+box-shadow(0 0 8px rgba($shadow-color, 0.2), inset 1px 1px tint($button-background-color, 30%), inset -1px 0 tint($button-background-color, 30%))
	&:active
		+background-image(linear-gradient(lighten($button-background-color, 1%), darken($button-background-color, 1%)))
		+box-shadow(0 0 8px rgba($shadow-color, 0), inset 1px 1px tint($button-background-color, 30%), inset -1px 0 tint($button-background-color, 30%))
	#colorbox &
		/* Fix colorbox close button
		+box-shadow(none)


/* ===========================================
 * Wrapper Elements
 * ========================================

.page
	+clearfix
	position: relative
	max-width: $max-width
	margin: 0 auto
	padding-top: var(--safe-area-top)
	padding-bottom: var(--safe-area-bottom)
	background: $page-background
	@if $boxed-layout
		border: solid $border-medium
		border-width: 0 1px
		+box-shadow(0 0 5px rgba($shadow-color, 0.2))
	+mediaquery(desktop)
		padding-right: var(--safe-area-right)
		padding-left: var(--safe-area-left)
		@if $boxed-layout
			border: 0
			+box-shadow(none)
	.opensauce-not-boxed &
		@if $boxed-layout
			padding-right: 1px
			padding-left: 1px
			border: 0
			+box-shadow(none)
		+mediaquery(desktop)
			@if $boxed-layout
				padding-right: var(--safe-area-right)
				padding-left: var(--safe-area-left)



/* ===========================================
 * Elements in order of appearance in HTML
 * ========================================

.page-header
	position: relative
	margin: 0 col(1, 28)
	+mediaquery(tablet)
		margin-right: col(1, 18)
		margin-left: col(1, 18)
	+mediaquery(mobile)
		+clearfix

.logo
	position: absolute
	top: -3px
	left: -2px
	z-index: 99
	margin: $logo-top 0 $logo-bottom $logo-left
	padding: 2px 10px 10px 2px
	font-size: inherit
	@if not $logo-background-transparent
		background: $logo-background-color
	+border-radius(3px)
	+mediaquery(mobile)
		position: static
		margin-left: 0
		margin-bottom: 12px
		padding: 0
	a
		display: block
	img
		display: block
		width: auto
		height: $logo-height
		+mediaquery(mobile)
			margin: 0 auto

.header-navigation
	position: absolute
	top: em(14, 12)
	right: 0
	z-index: 1
	font-size: em(12)
	letter-spacing: em(1, 12)
	color: $link-color
	text-transform: uppercase
	+mediaquery(mobile)
		position: static
		text-align: center
	ul
		margin: 0
		padding: 0
		display: inline
	li
		display: inline
		&:before
			content: " • "
			margin: 0 em(2, 12)
		&:first-child:before
			content: none
	a
		color: inherit
		&:hover, &:focus
			text-decoration: underline

.tag-line
	padding-bottom: em(10)
	.logo ~ &
		min-height: ($logo-height + $logo-top + $logo-bottom)
		+mediaquery(mobile)
			min-height: 0
	.ce_text
		padding: em(65, 16) 0 em(30, 16) col(9, 26)
		font-size: em(16)
		color: $font-color-light
		+mediaquery(mobile)
			padding: em(16, 16) 0
			text-align: center
		p
			margin: 0
		blockquote
			margin: 0
			font-size: em(28, 16)
			color: $headline-color
	.image_container
		margin: 0
		padding: 0
		width: auto
		border: 0
		+box-shadow(none)
		background: none
	.ce_image
		display: inline-block
		width: 100%
	.ce_image img, .rsts-main
		clear: both
		display: block
		width: 100%
		height: auto
		margin: em(40) 0 em(20)
		+mediaquery(mobile)
			margin: em(20, 15) 0 em(15, 15)
	.rsts-main
		float: left
		+mediaquery(mobile)
			float: none

.main-navigation-wrapper
	position: relative
	clear: both
	border: 1px solid $border-medium
	background: $nav-background-color
	+background(linear-gradient(lighten($nav-background-color, 2%), darken($nav-background-color, 2%)))
	+box-shadow(0 1px 3px rgba($shadow-color, 0.1), inset 0 0 0 1px rgba($main-background, 0.5))

.main-navigation
	/* clearfix
	overflow: hidden
	margin-right: em(64)
	font-size: em(16)
	font-weight: 600
	color: $nav-color
	+mediaquery(tablet)
		margin-right: 0
		font-size: em(15)
	+mediaquery(mobile)
		display: none
	ul, li
		margin: 0
		padding: 0
		display: inline
	a, li > strong, li > span
		float: left
		padding: em(12, 16) em(22, 16)
		border-left: 1px solid $border-medium
		color: inherit
		text-decoration: none
		+box-shadow(inset 1px 0 rgba($main-background, 0.5))
		&.trail, &.active
			color: $nav-active-color
			background: lighten($nav-background-color, 3%)
		&.home
			overflow: hidden
			text-indent: -99em
			line-height: 0
			&:after
				+icon("\2302", em(12, 16))
				+line-height(24, 12)
				display: block
			&.trail, &.active
				color: inherit
				background: none
	a:hover, a:focus
		color: $nav-hover-color
		background: darken($nav-background-color, 3%)
	li:first-child
		> a, > strong, > span
			border-left: 0

.sub-navigation
	/* clearfix
	overflow: hidden
	padding-bottom: em(10, 16)
	border: 1px solid $border-medium
	border-top: 0
	+border-radius(0 0 4px 4px)
	font-size: em(16)
	color: $nav-color
	+box-shadow(0 1px 3px rgba($shadow-color, 0.1))
	+mediaquery(tablet)
		font-size: em(14)
	+mediaquery(mobile)
		display: none
	ul, li
		margin: 0
		padding: 0
		display: inline
	a, li > strong, li > span
		float: left
		margin: 0 em(-10, 16) em(-10, 16) em(10, 16)
		padding: em(12, 16) em(10, 16)
		color: inherit
		+box-shadow(inset -1px 0 rgba($main-background, 0.5))
		&.trail, &.active
			font-weight: 600
			color: $nav-active-color
			background: lighten($nav-background-color, 2%)

.main-navigation-mobile
	/* Hide mobile navigation <select> by default
	display: none
	+mediaquery(mobile)
		display: block
		width: col(14, 16)
		margin: em(12, 15) 0 em(12, 15) col(1, 16)

.main-navigation-search
	position: absolute
	top: 0
	right: 0
	height: 100%
	overflow: hidden
	border-left: 1px solid $border-medium
	background: $nav-background-color
	+background(linear-gradient(lighten($nav-background-color, 2%), darken($nav-background-color, 2%)))
	+box-shadow(inset 1px 0 rgba($main-background, 0.5), inset 0 0 0 1px rgba($main-background, 0.5))
	+mediaquery(tablet)
		position: relative
		height: em(49)
		border-bottom: 1px solid $border-medium
		border-left: 0
	input
		float: right
		width: em(164, 16)
		margin: em(9, 16) em(64, 16) 0 em(-165, 16)
		padding-top: em(4, 16)
		padding-bottom: em(3, 16)
		border: 1px solid $border-medium
		font-size: em(16)
		+box-shadow(none)
		+transition(margin-left 0.2s ease-out)
	&:hover input, input:hover, input:focus
		margin-left: em(22, 16)
	button
		position: absolute
		top: 0
		right: 0
		width: em(64)
		height: 100%
		margin: 0
		padding: em(14) 0
		border: 0
		color: $nav-color
		text-align: left
		text-indent: -99em
		+text-shadow(none)
		line-height: 0
		background: none
		+box-shadow(none)
		&:after
			+icon("\e0cb", em(20))
			display: block
			text-align: center
		&:hover, &:focus
			color: $nav-hover-color

.content-wrapper
	+clearfix


/* ===========================================
 * Content styles
 * ========================================

.main-content
	float: left
	width: col(16, 28)
	margin: em(12) 0 0 col(1, 28)
	+mediaquery(tablet)
		float: none
		width: auto
		margin-right: col(1, 18)
		margin-left: col(1, 18)
	.opensauce-fullwidth &
		float: none
		width: auto
		margin-left: col(1, 28)
		margin-right: col(1, 28)
		+mediaquery(tablet)
			margin-right: col(1, 18)
			margin-left: col(1, 18)
	.opensauce-sidebar-left &
		float: right
		margin-right: col(1, 28)
		margin-left: 0
		+mediaquery(tablet)
			float: none
			margin-right: col(1, 18)
			margin-left: col(1, 18)
	p, ul, ol, table, form, fieldset
		margin-top: em(24)
		margin-bottom: em(24)
	h1, h2, h3, h4, h5, h6
		margin-top: 0.75em
		margin-bottom: 0.3em
		font-weight: normal
		line-height: 1.3
	h1
		font-size: $headline-size-1
		font-weight: bold
		color: $headline-color
	h2
		font-size: $headline-size-2
	h1 + h2
		margin-top: 0.3em
	h3
		font-size: $headline-size-3
	h4
		font-size: $headline-size-4
	h5
		font-size: $headline-size-5
	h6
		font-size: $headline-size-6
		letter-spacing: em(1, 16)
		color: $font-color-light
		text-transform: uppercase
	ul, ol
		padding-left: em(16)
		li[data-icon]
			list-style: none
			&:before
				left: em(-21)
				width: 0
	ul
		list-style: disc
		ul
			margin-top: 0
	ol
		padding-left: em(20)
		list-style: decimal
		ol, ul
			margin-top: 0
		ol
			padding-left: em(24)
			list-style: upper-alpha
			ol
				list-style: lower-roman
				ol
					list-style: lower-alpha
	blockquote
		position: relative
		margin: em(24) 0 em(24) col(1.5, 16)
		color: $headline-color
		+mediaquery(mobile)
			margin-left: col(2.5, 16)
		small, i, em
			color: $font-color-light
		&:before
			content: "\201c"
			position: absolute
			top: 0
			left: col(-1.5, 16)
			margin: em(36, 84) 0 0 em(-4, 84)
			font-size: em(84)
			font-weight: bold
			line-height: 0
			color: $highlight-color
			+mediaquery(mobile)
				left: col(-2.5, 16)
				margin-left: em(-8, 84)
	img
		max-width: 100%
		height: auto
	.rsts-main
		margin: 24px 0

/* ===========================================
 * Sidebar styles
 * ========================================

.sidebar
	position: relative
	float: right
	width: col(9, 28)
	margin: em(40) col(1, 28) 0 0
	+mediaquery(tablet)
		float: none
		clear: both
		width: auto
		margin-right: 0
		margin-left: 0
	+mediaquery(mobile)
		margin-right: col(1, 18)
		margin-left: col(1, 18)
	.opensauce-sidebar-left &
		float: left
		margin-right: 0
		margin-left: col(1, 28)
		+mediaquery(tablet)
			float: none
			margin-right: 0
			margin-left: 0
		+mediaquery(mobile)
			margin-right: col(1, 18)
			margin-left: col(1, 18)
	h1, h2, h3
		margin: em(28, 14) 0 0
		padding: 0 0 em(6, 14)
		border-bottom: 1px solid $border-light
		font-size: em(14)
		font-weight: 600
		letter-spacing: em(1, 14)
		color: $font-color-light
		text-transform: uppercase
	p, ul, ol, table, blockquote, fieldset, form
		margin: em(16) 0
	ul, ol
		padding: 0
		list-style-type: none
	> .block
		margin: em(20) 0
		+mediaquery(tablet)
			float: left
			width: col(7.5, 18)
			margin-left: col(1, 18)
		+mediaquery(mobile)
			float: none
			width: auto
			margin-left: 0
	.ce_youtube-wrapper, .ce_vimeo-wrapper
		margin: em(12) 0

.sidebar-news
	.layout_latest
		position: relative
		margin: em(24) 0
		padding-left: em(50)
		&:before
			+icon("\e06b", em(16))
			position: absolute
			top: em(5, 16)
			left: 0
			padding: em(8, 16)
			color: $main-background
			background: $link-color
	.image_container
		display: none
	.info
		margin: 0
		font-size: em(14)
		color: $font-color-light
	h2
		margin: 0 0 em(4, 16)
		padding: 0
		border: 0
		font-size: em(16)
		+line-height(21, 16)
		letter-spacing: normal
		text-transform: none
	.ce_text,
	.teaser
		font-size: em(14)
		p
			margin: 0
	.more
		margin: em(4, 14) 0
		font-size: em(14)


/* ===========================================
 * Form styles
 * ========================================

form
	h1, h2, h3, h4, h5, h6
		clear: both
	.widget
		position: relative
		clear: both
	p b.error, p.error
		display: block
		margin: 0
		color: $warning

input, textarea
	padding: em(9) em(10) em(8)
	line-height: normal
	border: 1px solid $border-medium
	border-bottom-color: darken($border-medium, 4%)
	+border-radius(1.5px)
	color: inherit
	background: shade($main-background, 1%)
	+box-shadow(0 0 6px rgba($shadow-color, 0.1), inset 0 1px $main-background)
	.valid &
		border-color: $green
	.invalid &, &.error
		border-color: $warning
	&::-webkit-input-placeholder
		/* multiple rules, because user agents are required to ignore a rule with an unknown selector
		color: $grey
	&:-moz-placeholder
		color: $grey
	&:-ms-input-placeholder
		color: $grey
	&::placeholder
		color: $grey
	&:hover
		border-color: darken($border-medium, 4%) darken($border-medium, 4%) darken($border-medium, 9%)
		+box-shadow(0 0 6px rgba($shadow-color, 0.05), inset 0 1px $main-background)
	&:focus
		border-color: $highlight-color $highlight-color darken($highlight-color, 4%)

input
	&[type="text"], &[type="search"], &[type="email"]
		outline: none
	&[type="checkbox"], &[type="radio"], &[type="image"]
		width: auto !important
		height: auto !important
		margin: 0
		padding: 0
		border: 0
		+box-shadow(none)
	&[type="checkbox"]
		vertical-align: middle
		+appearance(checkbox)
	&[type="radio"]
		vertical-align: middle
		+appearance(radio)
		background: none

input[type="file"]
	padding: 0
	height: auto

button, input[type="submit"]
	margin-top: em(18)

textarea
	height: 200px
	resize: vertical
	line-height: 1.5
	outline: none

fieldset
	margin: em(18) 0
	border: 1px solid $border-medium
	legend
		padding: 0 em(5)
	+ br
		/* Kill <br> that Contao injects
		display: none

.main-content
	form
		.widget
			margin-top: em(18)
			margin-bottom: em(18)
	label
		display: block
		margin-bottom: em(1, 16)
		font-size: em(16)
		.mandatory
			margin-left: em(2)
			color: $highlight-color
	input[type="checkbox"] + label
		display: inline
	fieldset
		p
			margin: 0
		p b.error, p.error
			float: none
			width: auto
			margin: em(8, 16) 0
		label
			display: inline
			margin: 0
			&:after
				/* add line break after label
				content: "\A"
				white-space: pre
	input, textarea, select, fieldset
		width: col(12, 16)
		+mediaquery(mobile)
			width: 100%
	input[type="submit"]
		width: auto
		+mediaquery(mobile)
			width: 100%

.explanation, .captcha_text
	p
		margin: 0
.explanation
	font-size: em(14)
	margin: em(-12, 14) 0 em(24, 14)
	color: $font-color-light
.captcha_text
	display: block
	label &
		display: inline

.sidebar form
	input, textarea, select, fieldset, button
		width: 100%
	label
		display: block
		margin-bottom: em(1, 16)
		font-size: em(16)
	input
		&[type="checkbox"], &[type="radio"], &[type="image"]
			width: auto


/* ===========================================
 * Content elements
 * ========================================

%block-headline
	margin: 0 0 em(16, 18)
	padding-bottom: em(6, 18)
	border-bottom: 1px solid $border-light
	font-size: em(18)
	font-weight: normal
	letter-spacing: em(1, 18)
	color: $block-headline-color
	text-transform: uppercase

.teaser-boxes
	margin: em(40) 0
	/* clearfix
	overflow: hidden
	> h1, > h2, > h3
		@extend %block-headline

.teaser-boxes-item
	font-size: em(16)
	color: $font-color-light
	&:hover, &:focus
		text-decoration: none
	h3
		margin: 0
		font-size: em(21, 16)
		color: $highlight-headline-color
	p
		margin: em(8, 16) 0 0

.teaser-boxes-item-image
	position: relative
	margin: 0 0 em(16, 16)
	a:hover &, a:focus &
		&:before
			content: ""
			position: absolute
			top: 0
			left: 0
			z-index: 1
			width: 100%
			height: 100%
			background: rgba($main-background, 0.3)
		&:after
			+icon("\e019", em(8, 16))
			position: absolute
			right: 0
			bottom: 0
			z-index: 2
			padding: em(6, 8)
			color: $main-background
			text-align: center
			background: $link-color
	img
		display: block
		width: 100%
		height: auto

.icon-boxes
	@extend .teaser-boxes

.icon-boxes-item
	font-size: em(16)
	color: $font-color-light
	&:hover, &:focus
		text-decoration: none
	&[data-icon]:before
		margin: 0 0 em(12, 24) 0
		padding: em(12, 24)
		border: 1px solid $border-medium
		font-size: em(24, 16)
		color: $highlight-color
		+background(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)))
		+box-shadow(0 0 5px rgba($shadow-color, 0.1))
		@if lightness($page-background) < lightness(#474747)
			+background(linear-gradient(rgba($shadow-color, 0.6), rgba($shadow-color, 0.8)))
			+box-shadow(none)
	h3
		margin: 0
		font-size: em(21, 16)
		color: $highlight-headline-color
	p
		margin: em(8, 16) 0 0

.icon-boxes-item-link
	font-size: em(14, 16)
	letter-spacing: em(1, 14)
	color: $link-color
	text-transform: uppercase
	a:hover &, a:focus &
		text-decoration: underline

.news-boxes
	@extend .teaser-boxes

.news-boxes-item
	font-size: em(14)
	color: $font-color-light
	h3
		margin: 0
		font-size: em(24, 14)
		+line-height(32, 24)
		font-weight: normal
		a
			color: $highlight-headline-color
	p
		margin: em(4, 14) 0 0
	.news-boxes-item-info
		margin: 0
		letter-spacing: em(1, 14)
		text-transform: uppercase
	.news-boxes-item-more
		margin-top: em(8, 14)
		letter-spacing: em(1, 14)
		text-transform: uppercase

.testimonial
	margin: em(27, 24) 0
	font-size: em(24)
	+mediaquery(mobile)
		font-size: em(15, 15)
	.sidebar &
		font-size: em(18)
		+mediaquery(mobile)
			font-size: em(15, 15)
	.rsts-main &
		margin: 0
	p
		margin: em(12, 24) 0
		color: $headline-color

.testimonial-author
	padding-right: em(50, 18)
	font-size: em(18, 24)
	color: $font-color-light
	.sidebar &
		padding-right: em(50, 14)
		font-size: em(14, 18)
	+mediaquery(mobile)
		padding-right: em(50, 14)
		font-size: em(14, 15)
	img
		display: inline-block
		vertical-align: middle
		width: auto
		height: em(40, 18)
		margin: 0 em(6, 18) 0 0
	small
		font-size: inherit

.newsletter-box
	padding: em(24) col(1, 16)
	border: 1px solid darken($highlight-color, 10%)
	+border-radius(1.5px)
	color: $main-background
	background: $highlight-color
	+box-shadow(0 0 5px rgba($shadow-color, 0.1))
	.sidebar &
		padding-right: col(1, 9)
		padding-left: col(1, 9)
		+mediaquery(tablet)
			padding-right: col(1, 18)
			padding-left: col(1, 18)
		+mediaquery(mobile)
			padding-right: col(1, 16)
			padding-left: col(1, 16)
	.sidebar .block + &
		margin-top: em(32)
	&:before
		content: ""
		float: right
		width: em(96)
		height: em(100)
		margin-left: em(14)
		background: image-url("newsletter-bg.png") 50% 50% no-repeat
		background-size: 100% 100%
		+hidpi
			background-image: image-url("newsletter-bg-x2.png")
	h1, h2, h3, h4
		padding: 0
		border: 0
		letter-spacing: normal
		text-transform: none
	h1, h2, h3
		margin: em(-4, 24) 0 0
		font-size: em(24)
		font-weight: normal
		+line-height(27, 24)
		color: inherit
	h4
		margin: 0
		font-size: em(18)
		font-weight: normal
		color: mix($main-background, $highlight-color, 70%)
	form
		margin: 0
	.formbody
		position: relative
		width: em(330)
		max-width: 100%
		margin: em(12) 0 0
		.widget
			clear: none
			margin: 0
		input
			display: block
			width: 100%
			padding-right: em(48)
			border-color: darken($button-background-color, 10%)
			color: $font-color
		button
			position: absolute
			right: 0
			bottom: 0
			width: auto
			overflow: hidden
			margin: 0
			padding: em(13)
			+border-radius(0 1.5px 1.5px 0)
			line-height: 0
			text-align: left
			text-indent: -99em
			&:after
				+icon("\e0ce", em(14))
				display: block
		.error
			@if lightness($highlight-color) < 40%
				color: lighten($warning, 20%)
			@else
				color: darken($warning, 20%)

.icon-links
	font-size: em(16)
	h1, h2, h3
		font-size: em(14, 16)
		font-weight: 600
		letter-spacing: em(1, 14)
		color: $font-color-light
		text-transform: uppercase
	ul
		margin: 0
		padding: 0
	li
		list-style: none
		display: inline
	a
		display: block
		padding: em(4, 16) 0
		border-bottom: 1px solid $border-medium
		color: inherit
		text-decoration: none
		&:before
			+icon("\e019", em(6, 16))
			top: em(-2, 6)
			margin-right: em(10, 6)
			padding: em(4, 6)
			border: 1px solid $border-medium
			+border-radius(1.5px)
			color: $link-color
		&[data-icon]:before
			content: attr(data-icon)
			top: 0
			border: 0
			margin-right: em(10, 15)
			padding: 0
			font-size: em(15, 16)
			color: inherit

.icon-links-label
	color: $font-color
	a:hover &, a:focus &
		text-decoration: underline

.author-box
	h1, h2, h3
		margin: em(28, 14) 0 em(14, 14)
		padding: 0 0 em(6, 14)
		border-bottom: 1px solid $border-light
		font-size: em(14)
		font-weight: 600
		letter-spacing: em(1, 14)
		color: $font-color-light
		text-transform: uppercase
	img
		float: right
		margin: 0 0 em(10) em(18)
	p
		margin: em(14, 16) 0
		font-size: em(16)

.author-box-links
	margin: em(14, 14) 0
	padding: 0
	font-size: em(14)
	letter-spacing: em(1, 14)
	text-align: center
	text-transform: uppercase
	li
		display: inline
		list-style: none
	a
		display: inline-block
		margin: em(5, 14) em(3, 14) em(4, 14)
		padding: em(8, 14) em(20, 14)
		border: 1px solid $border-medium
		+border-radius(3px)
		+background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)))
		+box-shadow(0 0 5px rgba($shadow-color, 0.1))
		&:hover, &:focus
			border-color: darken($border-medium, 9%)
			text-decoration: none
			+box-shadow(0 0 5px rgba($shadow-color, 0.2))

.image_container
	position: relative
	display: inline-block
	max-width: 100%
	padding: em(10)
	border: 1px solid $border-medium
	+border-radius(1.5px)
	background: $main-background
	+background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)))
	+box-shadow(0 0 5px rgba($shadow-color, 0.1))
	&.no-border, .no-border &
		border: 0
		+box-shadow(none)
		background: none
	img
		display: block
		width: 100%
		height: auto
	a
		position: relative
		display: block
		&:hover, &:focus
			&:before
				content: ""
				position: absolute
				top: 0
				left: 0
				z-index: 1
				width: 100%
				height: 100%
				background: rgba($main-background, 0.3)
			&:after
				+icon("\e0cb", em(10))
				position: absolute
				right: 0
				bottom: 0
				z-index: 2
				padding: em(5, 10)
				color: $main-background
				text-align: center
				background: $link-color
	figcaption, .caption
		/* overwrite elements style attribute
		width: 100% !important
		padding: em(4, 14) 0 0
		font-size: em(14)
		color: $font-color-light

.image_container.float_right, .image_container.float_left
	float: right
	@if $fluid-content-images
		width: col($content-image-cols, 16) !important
	margin: em(8) 0 em(16) col(1, 16)
	+mediaquery(mobile)
		margin-left: 0
		float: none !important
		@if $fluid-content-images
			width: auto !important
	.opensauce-fullwidth &
		margin: em(8) 0 em(16) col(1, 26)
		@if $fluid-content-images
			width: col($content-image-cols, 26) !important
		+mediaquery(tablet)
			margin-left: col(1, 16)
			@if $fluid-content-images
				width: col($content-image-cols, 16) !important
		+mediaquery(mobile)
			margin-left: 0
			@if $fluid-content-images
				width: auto !important
	.no-resize &, &.no-resize
		&, .opensauce-fullwidth &
			@if $fluid-content-images
				width: auto !important


.image_container.float_left
	float: left
	margin: em(8) col(1, 16) em(16) 0
	+mediaquery(mobile)
		margin-right: 0
	.opensauce-fullwidth &
		margin: em(8) col(1, 26) em(16) 0
		+mediaquery(tablet)
			margin-right: col(1, 16)
		+mediaquery(mobile)
			margin-right: 0

.image_container:not(.float_right):not(.float_left)
	.no-resize &, &.no-resize
		img
			width: auto
			max-width: 100%

.ce_youtube-wrapper, .ce_vimeo-wrapper
	position: relative
	/* ratio 16 to 9
	margin: em(24) 0
	padding-bottom: 56.25%
	height: 0
	overflow: hidden
	iframe, object, embed
		position: absolute
		top: 0
		left: 0
		width: 100%
		height: 100%
.mejs__video, .mejs__audio
	&:not(.mejs__container-fullscreen)
		margin: em(20) 0
		video
			object-fit: cover
	button
		+appearance(button)
		border-radius: 0
		box-shadow: none !important

.video_container video,
.audio_container audio
	display: block
	width: 100%
.video_container video
	height: auto

.video_container
	margin: em(20) 0
	iframe
		border: 0
	.responsive
		position: relative
		padding-bottom: (9 / 16 * 100%)
		&.ratio-169
			padding-bottom: (9 / 16 * 100%)
		&.ratio-1610
			padding-bottom: (10 / 16 * 100%)
		&.ratio-219
			padding-bottom: (9 / 21 * 100%)
		&.ratio-43
			padding-bottom: (3 / 4 * 100%)
		&.ratio-32
			padding-bottom: (2 / 3 * 100%)
		iframe,
		img
			position: absolute
			top: 0
			left: 0
			width: 100%
			height: 100%
			object-fit: cover

.ce_gallery
	@for $cols from 1 through 12
		> ul.cols_#{$cols} > li
			width: ((100% - (($cols - 1) * 1.5%)) / $cols)
	+mediaquery(mobile)
		/* doubled class for specificity
		&.ce_gallery > ul > li
			width: auto
	&.no-resize > ul > li
		width: auto
	> ul
		+clearfix
		margin: 0 !important
		padding: 0 !important
		list-style: none !important
		> li
			float: left
			width: 23.875%
			margin: 1.5% 0 0 1.5%
			+mediaquery(mobile)
				margin-right: 0
				margin-left: 0
			&.col_first
				clear: left
				margin-left: 0
			&.col_last
				/* for rounding failures
				margin-right: -1%
			> .image_container
				width: 100%
	img
		width: 100%
		height: auto

.enclosure, .ce_downloads
	margin: em(27, 16) 0
	padding: em(20, 16) em(30, 16)
	border: 1px solid $border-medium
	+border-radius(1.5px)
	font-size: em(16)
	background: $main-background
	+background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)))
	+box-shadow(0 0 5px rgba($shadow-color, 0.1))
	h1, h2, h3, h4, h5, h6
		margin: em(-21, 12) em(-31, 12) em(20, 12)
		padding: em(8, 12) em(20, 12)
		font-size: em(12, 16)
		font-weight: 600
		letter-spacing: em(1, 12)
		color: $main-background
		text-transform: uppercase
		background: $headline-color
		&:before
			+icon("\e06d", em(14, 12))
			top: em(1, 14)
			float: right
	ul, p
		margin: 0
		padding: 0
		list-style: none

.ce_accordion
	.accordion
		+clearfix
	.toggler
		padding: em(6, 18) 0
		border-bottom: 1px solid $border-medium
		outline: none
		font-size: em(18)
		color: $link-color
		cursor: pointer
		&:before
			+icon("\e009", em(14, 18))
			top: em(6, 14)
			float: right
			color: $main-background
			background: $link-color
		&:hover
			text-decoration: underline
			&:before
				font-size: em(18, 18)
				top: em(4, 18)
				left: em(2, 18)
		&.ui-accordion-header-active
			&:before
				content: "\e00c"


/* ===========================================
 * Slider styles
 * ========================================

.rsts-skin-testimonials

	&.rsts-main
		position: relative
		margin: em(27) 0

	.rsts-header
		border-bottom: 1px solid $border-light
		h1, h2, h3, h4, h5, h6
			margin: 0
			padding: em(2, 14) 0 em(9, 14)
			font-size: em(14)
			font-weight: 600
			color: $font-color-light
			letter-spacing: em(1, 14)
			text-transform: uppercase

	.rsts-prev, .rsts-next
		position: absolute
		right: em(24)
		bottom: em(12)
		overflow: hidden
		text-indent: -99em
		line-height: 0
		.sidebar &
			bottom: em(6)
		&:after
			+icon("\e018", em(8))
			display: block
			padding: em(6, 8)
			color: $main-background
			background: $link-color

	.rsts-next
		right: 0
		&:after
			content: "\e019"

	.rsts-nav
		position: absolute
		right: -5px
		top: 2px
		line-height: 0
		ul
			margin: 0
			padding: 0
		li
			display: inline
		a
			float: left
			width: 17px
			height: 17px
			overflow: hidden
			outline: none
			padding: 5px
			text-indent: -99em
			&:after
				content: ""
				display: block
				width: 7px
				height: 7px
				+border-radius(100%)
				background: $border-medium
				+opacity(0.8)
			&:hover, &.active
				&:after
					+opacity(1)
					width: 11px
					height: 11px
					margin: -2px
	.rsts-nav-prev, .rsts-nav-next
		display: none !important

.rsts-skin-light

	.rsts-nav
		position: absolute
		bottom: 20px
		margin: 0
		width: 100%


/* ===========================================
 * Module styles (Search, FAQ, News, Events, Comments, Sitemap etc.)
 * ========================================

.fixed-note
	position: fixed
	display: table
	top: auto
	right: 0
	bottom: 0
	left: 0
	width: 100%
	min-height: em(60)
	padding: em(12) em(20) em(12) em(80)
	padding-right: calc(#{em(20)} + var(--safe-area-right))
	padding-bottom: calc(#{em(12)} + var(--safe-area-bottom))
	padding-left: calc(#{em(80)} + var(--safe-area-left))
	border-top: 1px solid $border-medium
	z-index: 99
	background-color: $main-background
	box-shadow: 0 -2px 5px rgba($shadow-color, 0.1)
	+mediaquery(tablet)
		position: relative
		padding-top: calc(#{em(12)} + var(--safe-area-top))
		padding-bottom: em(12)
	+mediaquery(mobile)
		display: block
		padding-left: em(20)
		padding-left: calc(#{em(20)} + var(--safe-area-left))
	&:before
		position: absolute
		top: 50%
		margin-top: em(-18, 36)
		left: em(30, 36)
		left: calc(#{em(30, 36)} + var(--safe-area-left))
		font-size: em(36)
		color: $highlight-color
		+mediaquery(tablet)
			top: em(24, 36)
			margin-top: 0
		+mediaquery(mobile)
			position: static
	h1, h2, h3,
		font-size: em(15)
		margin: em(6, 15) 0
	p
		font-size: em(14)
		margin: em(6, 14) 0
		+mediaquery(mobile)
			font-size: em(16)

.fixed-note-column
	display: table-cell
	vertical-align: middle
	padding: 0 em(10)
	&:last-child
		text-align: right
		+mediaquery(tablet)
			text-align: left
	+mediaquery(tablet)
		display: block
		margin: em(12) 0
		padding: 0

.fixed-note-link, .fixed-note-button
	white-space: nowrap

.fixed-note-button
	margin: 0

.fixed-note-closed
	position: fixed
	right: em(30)
	right: calc(#{em(30)} + var(--safe-area-right))
	bottom: 0
	bottom: var(--safe-area-bottom)
	z-index: 99
	padding: em(8) em(12)
	color: $button-color
	text-decoration: none
	background: $button-background-color
	box-shadow: 0 -2px 5px rgba($shadow-color, 0.1)
	+mediaquery(desktop)
		right: 0
		right: var(--safe-area-right)
	+mediaquery(tablet)
		position: absolute
		top: em(12)
		top: calc(#{em(12)} + var(--safe-area-top))
		right: 50%
		bottom: auto
		margin-right: em(-16)
		padding: em(4) em(12)
	+mediaquery(mobile)
		right: em(12)
		right: calc(#{em(12)} + var(--safe-area-right))
		margin-right: 0
	&:hover, &:focus
		background-color: darken($button-background-color, 10%)
	&:before
		+icon("\e0a6")
	> span
		display: none

.back a:before, .previous a:before, .next a:after
	+icon("\e018", em(12))
	top: em(-2, 12)
	margin-right: em(6, 12)
	vertical-align: middle

.next a:after
	content: "\e019"
	margin-right: 0
	margin-left: em(6, 12)

.pagination
	clear: both
	> p
		text-align: center
	ul
		list-style-type: none !important
		text-align: center
	li
		display: inline-block
		a, strong, span
			padding: 4px 12px
			background-color: $main-background
		.current, .active
			border-bottom: 1px solid $border-light
			+background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)))

.news-image-teaser
	position: relative
	margin: em(36) 0
	padding: 0 0 0 col(2, 16)
	+mediaquery(mobile)
		padding-left: 0
	&.-no-date
		padding-left: 0
	h2
		margin: 0 0 em(8, 32)
		padding: 0 0 em(10, 32)
		border-bottom: 1px solid $border-medium
		font-size: em(32)
		font-weight: normal
		+line-height(38, 32)
		color: $headline-color
		+mediaquery(mobile)
			margin-right: col(3, 16)
	time
		position: absolute
		top: em(7, 36)
		left: 0
		width: col(1.5, 16)
		border: 1px solid $border-medium
		font-size: em(36)
		font-weight: 600
		line-height: 1
		color: $font-color-light
		text-align: center
		background: $main-background
		+background-image(linear-gradient(rgba($shadow-color, 0) 50%, rgba($shadow-color, 0.02)))
		+box-shadow(0 0 5px rgba($shadow-color, 0.1))
		+mediaquery(mobile)
			left: auto
			right: 0
			width: col(2.5, 16)
		&:before
			+icon("\e06b", em(25, 36))
			display: block
			margin: -1px -1px em(2, 25) -1px
			padding: em(18, 25) 0
			color: $main-background
			background: $highlight-color
		b
			display: block
			margin: em(-4, 21) 0 em(5, 21)
			font-size: em(21, 36)
			font-weight: inherit
			text-transform: uppercase
		i
			display: none
	img
		display: block
		width: 100%
		height: auto
	p
		margin: em(12) 0
		color: $font-color-light
	.news-image-teaser-info
		margin: em(8, 14) 0 em(14, 14)
		font-size: em(14)
		color: inherit
	.news-image-teaser-more
		font-size: em(16)
		text-transform: uppercase

.mod_calendar
	th
		&.previous, &.next
			a
				&:after, &:before
					display: none
		&.current
			border-right: 0
			border-left: 0
			text-align: center
			&:before
				+icon("\e037", 16px)
				margin-right: 6px
		&.previous
			border-right: 0
		&.next
			border-left: 0
			text-align: right
		&.label
			font-size: em(12)
			text-align: center
			text-transform: uppercase
			letter-spacing: em(1, 14)
	td
		vertical-align: top
		width: col(1, 7)
		&.today
			font-weight: 600
			background-color: $border-medium
	.event
		font-size: em(12)
	.minicalendar
		td
			padding: em(3)
			text-align: center

.mod_eventlist
	.event > h2
		margin-top: 0
		font-size: em(28)

.mod_faqlist
	ul
		list-style: none
		padding-left: 0
	li
		&:before
			+icon("\e0f7")
			margin-right: em(8)

.mod_faqreader
	.info
		font-size: em(14)
		color: $font-color-light

.mod_newsletterlist
	ul
		padding-left: 0
		list-style-type: none
		li
			padding: em(5) 0
			border-top: 1px solid $border-medium
			&:first-child, &.first
				border-top: 0

.mod_search
	margin: em(27) 0
	.widget
		display: inline
	form
		input
			vertical-align: middle
			&[type="search"]
				width: col(11.9, 16)
				margin: 0
				padding-top: em(11)
				padding-bottom: em(9)
		button, input
			&[type="submit"]
				width: col(4, 16)
				margin: 0 -2% 0 0
	.relevance
		float: right
		margin-top: em(10, 14)
		font-size: em(14, 24)
	.header
		padding-bottom: em(5)
		border-bottom: 1px solid $border-medium
		color: $font-color-light
	.highlight
		padding: 0 em(4)
		font-weight: 600
		background: mix($main-background, $link-color, 80%)
	.url
		padding-bottom: em(20, 14)
		border-bottom: 1px dotted $border-medium
		font-size: em(14)
		color: $font-color-light
		&:before
			+icon("\e0b5")
			margin-right: em(5, 14)
		.filesize
			font-size: em(12, 14)

.comment_default
	margin: em(27, 16) 0
	padding: em(20, 16) col(1, 16) 0
	border: 1px solid $border-medium
	+border-radius(1.5px)
	font-size: em(16)
	background: $main-background
	+background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)))
	+box-shadow(0 0 5px rgba($shadow-color, 0.1))
	.info
		margin-top: 0
		border-bottom: 1px solid $border-medium
	.reply
		margin-left: col(1, 15)
		.info
			font-weight: 600

.ce_comments
	.form
		margin-top: em(60)
		.widget
			margin-top: em(24)

.mod_sitemap
	ul
		padding-left: 0
		list-style-type: none
		li
			li
				padding: em(3, 16) 0 em(3, 16) em(28, 16)
				font-size: em(16)
			li.submenu
				ul
					margin: 0
	> ul > li
		&:before
			+icon("\e083")
			margin-right: em(10)
			color: $link-color


/* ===========================================
 * Footer styles
 * ========================================

.page-footer
	clear: both
	margin: 0 col(1, 28)
	+mediaquery(tablet)
		margin-right: col(1, 18)
		margin-left: col(1, 18)

.footer-navigation-wrapper
	/* clearfix
	overflow: hidden
	margin: em(40, 12) 0 0
	padding: em(22, 12) 0
	border-top: 1px solid $border-medium
	font-size: em(12)
	font-weight: 600
	color: $footer-color
	text-transform: uppercase
	+mediaquery(mobile)
		font-size: em(12, 15)

.footer-navigation
	float: left
	+mediaquery(tablet)
		float: none
	ul
		margin: 0
		padding: 0
	li
		display: inline
		&:after
			content: " "
	a, li > strong, li > span
		margin-right: em(18, 12)
		color: inherit

.footer-info
	float: right
	font-weight: normal
	+mediaquery(tablet)
		margin-top: em(12, 12)
		float: none
	p
		margin: 0
	a
		color: inherit
	.rocksolid-copyright
		font-style: normal
		color: mix($main-background, $font-color-light, 40%)
		&:before
			content: "\2022"
			display: inline-block
			margin: 0 em(8, 12)
			color: $font-color-light

// ===========================================
 * Grid (design + production helper)
 * ========================================

//html .page:before
//	content: ""
//	position: absolute
//	display: block
//	top: 0
//	left: 0
//	width: 100%
//	height: 6000px
//	z-index: 9999
//	pointer-events: none
//	+background-image(linear-gradient(left, rgba(red,1) col(1, 28), rgba(red,0) col(1, 28), rgba(red,0) col(2, 28), rgba(red,1) col(2, 28), rgba(red,1) col(3, 28), rgba(red,0) col(3, 28), rgba(red,0) col(4, 28), rgba(red,1) col(4, 28), rgba(red,1) col(5, 28), rgba(red,0) col(5, 28), rgba(red,0) col(6, 28), rgba(red,1) col(6, 28), rgba(red,1) col(7, 28), rgba(red,0) col(7, 28), rgba(red,0) col(8, 28), rgba(red,1) col(8, 28), rgba(red,1) col(9, 28), rgba(red,0) col(9, 28), rgba(red,0) col(10, 28), rgba(red,1) col(10, 28), rgba(red,1) col(11, 28), rgba(red,0) col(11, 28), rgba(red,0) col(12, 28), rgba(red,1) col(12, 28), rgba(red,1) col(13, 28), rgba(red,0) col(13, 28), rgba(red,0) col(14, 28), rgba(red,1) col(14, 28), rgba(red,1) col(15, 28), rgba(red,0) col(15, 28), rgba(red,0) col(16, 28), rgba(red,1) col(16, 28), rgba(red,1) col(17, 28), rgba(red,0) col(17, 28), rgba(red,0) col(18, 28), rgba(red,1) col(18, 28), rgba(red,1) col(19, 28), rgba(red,0) col(19, 28), rgba(red,0) col(20, 28), rgba(red,1) col(20, 28), rgba(red,1) col(21, 28), rgba(red,0) col(21, 28), rgba(red,0) col(22, 28), rgba(red,1) col(22, 28), rgba(red,1) col(23, 28), rgba(red,0) col(23, 28), rgba(red,0) col(24, 28), rgba(red,1) col(24, 28), rgba(red,1) col(25, 28), rgba(red,0) col(25, 28), rgba(red,0) col(26, 28), rgba(red,1) col(26, 28), rgba(red,1) col(27, 28), rgba(red,0) col(27, 28)))
//	opacity: .1
//	+mediaquery(tablet)
//		+background-image(linear-gradient(left, rgba(red,1) col(1, 18), rgba(red,0) col(1, 18), rgba(red,0) col(2, 18), rgba(red,1) col(2, 18), rgba(red,1) col(3, 18), rgba(red,0) col(3, 18), rgba(red,0) col(4, 18), rgba(red,1) col(4, 18), rgba(red,1) col(5, 18), rgba(red,0) col(5, 18), rgba(red,0) col(6, 18), rgba(red,1) col(6, 18), rgba(red,1) col(7, 18), rgba(red,0) col(7, 18), rgba(red,0) col(8, 18), rgba(red,1) col(8, 18), rgba(red,1) col(9, 18), rgba(red,0) col(9, 18), rgba(red,0) col(10, 18), rgba(red,1) col(10, 18), rgba(red,1) col(11, 18), rgba(red,0) col(11, 18), rgba(red,0) col(12, 18), rgba(red,1) col(12, 18), rgba(red,1) col(13, 18), rgba(red,0) col(13, 18), rgba(red,0) col(14, 18), rgba(red,1) col(14, 18), rgba(red,1) col(15, 18), rgba(red,0) col(15, 18), rgba(red,0) col(16, 18), rgba(red,1) col(16, 18), rgba(red,1) col(17, 18), rgba(red,0) col(17, 18)))
//html:hover .page:before
//	visibility: hidden