/**
 * 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
 - Homepage elements
 - Content styles
 - Form styles
 - Footer styles
 - No image-main
 - Module styles (Search, FAQ, News, Events, Comments)
 - Media queries
 - Grid (design + production helper)
 * ========================================


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

@import "mixins.sass"
@import "compass/css3/opacity"
@import "compass/css3/images"
@import "compass/css3/border-radius"
@import "compass/css3/box-shadow"
@import "compass/css3/text-shadow"
@import "compass/css3/transition"
@import "compass/css3/box-sizing"
@import "compass/css3/transform"
@import "compass/css3/font-face"
@import "compass/css3/columns"
@import "compass/css3/appearance"
@import "compass/css3/background-clip"


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

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


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

$logo-width:                129px
$logo-top:                  15px
$logo-left-cols:            1

// Widths
$max-width:                 1100px

// Font
$font-family:               "PT Sans"
$font-size:                 16px
$line-height:               1.5

$fluid-content-images:      true
$content-image-cols:        6
$show-image-border:         true


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

// Colorset
$white:                     #ffffff
$black:                     #000000
$light-black:               #3b3737
$grey:                      #787878
$dark-grey:                 #464749
$medium-grey:               mix($white, $grey, 30%)
$light-grey:                #dadada
$ultra-light-grey:          mix($white, $light-grey, 50%)
$dark-white:                mix($white, $light-grey, 85%)
$blue:                      #33b5e5
$dark-blue:                 #125e7d
$green:                     #99cc00
$dark-green:                #669900
$orange:                    #f6831c
$loud-red:                  #f62b1c

// Content colors
$selection-color:           $blue
$font-color:                $dark-grey
$font-color-light:          $grey
$footer-color:              $dark-grey
$headline-color:            $dark-grey
$sub-headline-color:        $dark-grey
$highlight-color:           $blue
$confirmation:              $green
$information:               $blue
$warning:                   $loud-red
$event-box-color:           $green
$news-box-color:            $blue

// Links & Navigation
$link-color:                $blue
$nav-main-color:            $light-black
$nav-color:                 $light-black
$nav-color-light:           $grey
$nav-hover-color:           $blue
$nav-active-color:          $blue
$nav-footer-color:          $white

// Border
$border-light:              $ultra-light-grey
$border-medium:             $light-grey
$border-dark:               $medium-grey
$border-dropdown:           $light-grey

// Shadows
$shadow-color:              $black
$shadow-color-headline:     $white

// Backgrounds
$background-image:            none
$background-repeat:           no-repeat
$background-position:         50% 0
$background-attachment:       scroll
$background-size:             auto
$main-background:             $white
$background-color:            $white
$header-background-color:     $white
$dropdown-background-color:   $white
$content-background-color:    $dark-white
$footer-background-color:     $white
$nav-footer-background-color: $dark-grey


// Buttons
$button-color:                       $dark-blue
$button-background-color:            $blue
$button-secondary-color:             mix($black, $green, 40%)
$button-secondary-background-color:  $green


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

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

body
	font: #{$font-size}/#{$line-height} $font-family, sans-serif
	color: $font-color
	background: $background-color $background-image $background-position $background-repeat $background-attachment
	background-size: $background-size
	/* You may want to copy the styles you choose to use and delete the rest
	&.background-variation-1
		background: image-url("bg-photo.jpg")
		background-attachment: fixed
		background-size: cover
	&.background-variation-2
		background: image-url("bg-sky.jpg") 50% 0 no-repeat
	&.background-variation-3
		background: image-url("bg-light-grey.png")
		#wrapper > header, #wrapper > footer
			border: 1px solid $border-light
			border-color: rgba($shadow-color, .13)
	&.background-variation-4
		background: image-url("bg-abstract.jpg") 50% 0 no-repeat
		#wrapper > header
			background-color: transparent
		/* Just to show how it looks without #nav-header, if you don't need it, you should remove it from the HTML markup
		#nav-header
			display: none
		/* Make shadow transparent. It's usually full-color to prevent the tiny overlap in the edges.
		#nav-main > ul > li.submenu:before
			+box-shadow(0 5px 0 -1px $dropdown-background-color, 0 3px 0 $border-dropdown, 0 0 0 3px rgba($shadow-color, .075))

*
	+box-sizing(inherit)

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

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

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

table
	width: 100%
	border: 1px solid $border-dark
	border-collapse: collapse
	text-align: left
	background: $main-background
	+box-shadow(0 3px 0 -2px $main-background, 0 3px 0 -1px $border-dark, 0 6px 0 -3px $main-background, 0 6px 0 -2px $border-dark, 0 5px 5px rgba($shadow-color, .2))
	th
		padding: 10px 8px
		text-align: left
	td
		padding: 6px 8px
		color: $font-color-light
	td, td img
		vertical-align: top
	tbody tr
		&:nth-child(odd)
			background-color: darken($content-background-color, 5%)
		&:hover
			background-color: $content-background-color
	tfoot
		tr
			background-color: darken($content-background-color, 30%)
		td
			color: #fff

a
	color: $link-color
	text-decoration: none
	&:hover, &:focus
		text-decoration: underline
	&:hover, &:active
		outline: 0
	&.external-link:after
		+icon(" \e151", 75%)
		top: 1px
		margin-left: .2em
		color: $grey

/* Icon classes
*[data-icon]
	&:before
		+icon(attr(data-icon))
		font-size: 100%
		margin-right: 4px
	&.after
		&:before
			content: none
		&:after
			+icon(attr(data-icon))
			font-size: 80%
			margin-left: 4px
li[data-icon]:before
	top: 0
	font-size: 80%

.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: 12px 0 0 20px
	float: right
	a
		margin-left: 2px
		border: 0 !important
	img
		border: 0 !important

.image_container
	&.float_left
		margin-right: 20px
	&.float_right
		margin-left: 20px
	a
		border: 0

.mime_icon
	margin-bottom: -.25em

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

.ce_toplink, .toplink
	margin: 24px 0
	a
		display: block
		width: 100%

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

.ce_accordion
	background-color: $main-background
	border: 1px solid $border-light
	.accordion
		+clearfix
		padding: 0 col(.5, 13)
		> div
			padding-bottom: 12px
	.toggler
		position: relative
		padding: 8px col(1, 13) 8px col(.5, 13)
		outline: none
		color: $link-color
		+background-image(linear-gradient(lighten($main-background, 5%) 10%, darken($main-background, 10%) 100%))
		cursor: pointer
		&:after
			+icon("\e015", 16px, 0)
			position: absolute
			right: col(.5, 13)
			top: 50%
			display: none
		&.ui-accordion-header-active, &:hover
			background: $main-background
			&:after
				display: block
	hr:after
		background-color: $main-background !important

.mejs__controls button
	&, &:hover, &:focus, &:active
		top: auto
		+box-shadow(none)

hr
	height: 1px
	overflow: visible
	margin: 24px 0 23px
	border: 0
	text-align: center
	background: $border-medium
	clear: both

.confirmation, .information, .warning
	position: relative
	display: block
	padding: 8px col(.5, 13) 8px col(1, 13)
	margin:
		left: -1px
		right: -1px
	border: 1px solid $confirmation
	color: darken($confirmation, 20%)
	background-color: tint($confirmation, 40%)
	+box-shadow(0 3px 0 -2px tint($confirmation, 60%), 0 3px 0 -1px $confirmation, 0 3px 2px rgba($shadow-color, .2))
	&:before
		+icon("\e044", 24px)
		position: absolute
		left: 0
		top: 8px
		width: col(1, 13)
		text-align: center
.information
	border-color: $information
	color: darken($information, 25%)
	background-color: tint($information, 38%)
	+box-shadow(0 3px 0 -2px tint($information, 25%), 0 3px 0 -1px $information, 0 3px 2px rgba($shadow-color, .2))
	&:before
		content: "\2139"
.warning
	border-color: $warning
	color: darken($warning, 25%)
	background-color: tint($warning, 45%)
	+box-shadow(0 3px 0 -2px tint($warning, 25%), 0 3px 0 -1px $warning, 0 3px 2px rgba($shadow-color, .2))
	&:before
		content: "\e055"
code
	padding: 2px 5px
	font-family: "Lucida Console", monospace
	font-size: 14px
	line-height: 19px
	background-color: $ultra-light-grey
	+border-radius(3px)
pre
	margin: 24px 0
	padding: 0 6px
	display: block
	overflow: auto
	font-family: "Lucida Console", monospace
	font-size: 14px
	line-height: 24px
	background:
		size: 100% 48px
		repeat: repeat-y
		color: $ultra-light-grey
	+background-image(linear-gradient(top, $ultra-light-grey 50%, $main-background 50%))
	+box-shadow(0 0 7px rgba($shadow-color, .2) inset)
	code
		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: 10px 20px 12px 20px
	border: 1px solid
	border-color: mix($white, $button-color, 40%) mix($white, $button-color, 30%) mix($white, $button-color, 20%) mix($white, $button-color, 30%)
	+border-radius(4px)
	font-size: 14px
	font-weight: bold
	color: $button-color
	text-align: center
	text-decoration: none
	+text-shadow(0 1px 0 rgba($white, .5))
	background: mix($white, $button-background-color, 25%)
	+background(linear-gradient(top, mix($white, $button-background-color, 45%) 0, mix($white, $button-background-color, 5%) 100%))
	+box-shadow(0 1px 0 rgba($white, .3) inset, 0 -1px 0 mix($white, $button-color, 20%) inset, 0 -2px 0 $button-color inset, 0 -3px 0 rgba($white, .1) inset, 0 1px 0 rgba($shadow-color, .1))
	&:hover, &:focus
		text-decoration: none
		+box-shadow(0 1px 0 rgba($white, .3) inset, 0 -1px 0 mix($white, $button-color, 20%) inset, 0 -2px 0 $button-color inset, 0 -3px 0 rgba($white, .1) inset, 0 1px 0 rgba($shadow-color, .1), 0 1px 0 3px rgba($shadow-color, .075))
	&:active
		top: 2px
		margin-bottom: 2px
		padding-bottom: 10px
		+box-shadow(0 1px 0 rgba($shadow-color, .1) inset, 0 -3px 0 rgba($white, .1) inset, 0 1px 0 rgba($shadow-color, .1))
		+background(linear-gradient(top, mix($white, $button-background-color, 5%) 0, mix($white, $button-background-color, 45%) 100%))
	&.button-secondary
		padding:
			top: 6px
			bottom: 8px
		border-color: mix($white, $button-secondary-color, 40%) mix($white, $button-secondary-color, 30%) mix($white, $button-secondary-color, 20%) mix($white, $button-secondary-color, 30%)
		color: $button-secondary-color
		background: mix($white, $button-secondary-background-color, 25%)
		+background(linear-gradient(top, mix($white, $button-secondary-background-color, 45%) 0, mix($white, $button-secondary-background-color, 5%) 100%))
		+box-shadow(0 1px 0 rgba($white, .3) inset, 0 -1px 0 mix($white, $button-secondary-color, 20%) inset, 0 -2px 0 $button-secondary-color inset, 0 -3px 0 rgba($white, .1) inset, 0 1px 0 rgba($shadow-color, .1))
		&:hover, &:focus
			+box-shadow(0 1px 0 rgba($white, .3) inset, 0 -1px 0 mix($white, $button-secondary-color, 20%) inset, 0 -2px 0 $button-secondary-color inset, 0 -3px 0 rgba($white, .1) inset, 0 1px 0 rgba($shadow-color, .1), 0 1px 0 3px rgba($shadow-color, .075))
		&:active
			padding-bottom: 6px
			+box-shadow(0 1px 0 rgba($shadow-color, .1) inset, 0 -3px 0 rgba($white, .1) inset, 0 1px 0 rgba($shadow-color, .1))
			+background(linear-gradient(top, mix($white, $button-secondary-background-color, 5%) 0, mix($white, $button-secondary-background-color, 45%) 100%))

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

/* Main wrapper
#wrapper
	+clearfix
	position: relative
	max-width: $max-width
	margin: 0 auto
	padding: 18px 0 0 0


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

#wrapper > header
	position: relative
	z-index: 10
	+border-radius(3px)
	background: $header-background-color
	margin-bottom: 18px
	padding: 15px col(1, 25)

#logo
	float: left
	margin: $logo-top 0 0 col($logo-left-cols - 1, 23)
	h1, h2
		margin: 0
	a
		display: block
	img
		display: block
		width: $logo-width
		height: auto
	h2
		font: italic 12px/1.5 Georgia, serif
		color: $font-color-light

#nav-main
	margin: 49px col(2, 23) 0 0
	font-size: 14px
	text-align: right
	.no-nav-search &
		margin-right: 0
	ul
		display: inline
		margin: 0
		padding: 0
	li
		position: relative
		display: inline-block
		margin:
			right: -16px
			left: 26px
	> ul
		> li
			&:hover
				z-index: 4
			> a
				position: relative
				display: block
				z-index: 3
				padding: 8px 16px 12px 16px
				/* to avoid a gap between item and dropdown
				margin-bottom: -4px
				font-weight: bold
				color: $nav-main-color
				text-decoration: none
				&:hover, &:focus
					color: $nav-hover-color
			&.new > a:after, i
				position: absolute
				left: 16px
				top: -9px
				padding: 2px
				font: 9px/1 Arial, sans-serif
				text-transform: uppercase
				color: $white
				border: 1px solid $highlight-color
				border-bottom-color: darken($highlight-color, 7%)
				+border-radius(3px)
				background: $highlight-color
			&.new > a:after
				content: "new"
	> ul > li.active > a, > ul > li.trail > a
		color: $nav-active-color
	> ul > li.submenu:before
		content: ""
		position: absolute
		left: 0
		top: 0
		display: none
		z-index: 2
		width: 100%
		height: 100%
		border: 1px solid $border-dropdown
		border-bottom: 0
		+border-radius(4px 4px 0 0)
		background: $dropdown-background-color
		+box-shadow(0 5px 0 -1px $dropdown-background-color, 0 3px 0 $border-dropdown, 0 0 0 3px mix($shadow-color, $header-background-color, 7.5%))
	> ul > li > ul
		position: absolute
		left: 0
		top: 100%
		display: none
		z-index: 1
		min-width: 130%
		margin-top: 4px
		padding: 5px 15px 10px 15px
		border: 1px solid $border-dropdown
		+border-radius(0 4px 4px 4px)
		text-align: left
		white-space: nowrap
		background: $dropdown-background-color
		+box-shadow(0 -53px 0 -50px $nav-active-color inset, 0 0 0 3px rgba($shadow-color, .075), 3px 6px 20px rgba($shadow-color, .1))
		li
			display: block
			margin: 0
		a
			position: relative
			display: block
			padding: 8px 10px 8px 0
			border-top: 1px solid $border-light
			color: $nav-color
			text-decoration: none
			&:hover, &:focus
				color: $nav-hover-color
		a:hover, a:focus, li.active > a, li.trail > a
			&:before, &:after
				content: ""
				position: absolute
				left: -15px
				top: 11px
				border: 7px solid transparent
				border:
					right: 0
					left-color: $border-dropdown
			&:after
				left: -16px
				top: 12px
				border-width: 6px
				border-right-width: 0
				border-left-color: $border-light
		li:first-child > a
			border-top: 0
		ul
			a
				margin-left: 10px
			a:hover, a:focus, li.active > a, li.trail > a
				&:before, &:after
					content: none
		ul ul a
			margin-left: 20px
	> ul > li:hover > ul
		display: block
	> ul > li.submenu:hover:before
		/* change generated content to avoid IE8 ghost pseudo elements
		content: " "
		display: block
	> ul > li:last-child > ul, > ul > li.last > ul
		left: auto
		right: -2px
		+border-radius(4px 0 4px 4px)

#nav-search
	position: absolute
	right: col(1, 25)
	top: 66px
	z-index: 3
	width: 31px
	height: 31px
	overflow: hidden
	border: 1px solid $border-medium
	+border-radius(4px)
	background: $main-background
	+box-shadow(0 0 0 3px rgba($shadow-color, .075))
	+transition(width .2s ease-out)
	&:hover, &.focus
		width: 200px
	button
		position: absolute
		top: 0
		right: 0
		width: 29px
		height: 29px
		overflow: hidden
		margin: 0
		padding: 0
		border: 0
		font-size: 0
		color: $nav-color
		white-space: nowrap
		background: transparent
		+box-shadow(none)
		&:before
			+icon("\e0cb", 13px)
			padding: 8px 29px 8px 8px
		&:hover, &:focus
			color: $nav-hover-color
	input
		position: absolute
		right: 29px
		top: 0
		+appearance(none)
		width: 169px
		height: 29px
		padding: 0 5px
		border: 0
		border-right: 1px solid $border-light
		+border-radius(3px 0 0 3px)
		background: transparent
		+box-shadow(0 1px 4px rgba($shadow-color, .1) inset)

#nav-main-mobile, #nav-main-mobile_styled
	/* Hide mobile navigation <select> by default
	display: none

#nav-language
	position: absolute
	right: 0
	top: 8px
	font-size: 12px
	line-height: 15px
	color: $nav-color-light
	b
		color: $nav-color
	a
		color: $nav-color-light

#nav-header
	position: absolute
	right: col(1, 25)
	top: 15px
	color: $font-color-light
	white-space: nowrap
	ul, li
		margin: 0
		padding: 0
		display: inline
	li
		margin: 0 0 0 6px
	a
		color: inherit
		&[data-icon]
			display: inline-block
			width: 17px
			margin-right: -1px
			font-size: 0
			line-height: 0
			color: $main-background
			&:before
				+icon("", 16px, 1)
				color: $font-color-light
		&:hover, &:focus
			&.icon-facebook:before
				color: #3b5997
			&.icon-twitter:before
				color: #0199d1
			&.icon-googleplus:before
				color: #474848
			&.icon-pinterest:before
				color: #ca2027

#content-wrapper
	+clearfix
	margin: 18px -1px
	border: 1px solid $border-light
	border-color: rgba($shadow-color, .07)
	+border-radius(4px)
	background: $content-background-color
	+background-clip(padding-box)

#tag-line
	overflow: hidden
	padding: 28px col(1, 25)
	border-bottom: 1px solid $border-light
	+border-radius(4px 4px 0 0)
	background: $content-background-color
	h1, h2, h3
		margin: 0
		font-weight: normal
	h1, h2
		font-size: 24px
	h3
		font-size: 16px
		color: $font-color-light
	.image_container
		+box-shadow(none)
		margin: 0
		padding: 0
		border: 0
		background: none
	img
		display: block
		width: col(25.06, 23)
		height: auto
		margin: 28px col(-1.03, 23) -28px col(-1.03, 23)
	.ce_image:first-child img
		margin-top: -28px
		+border-radius(4px 4px 0 0)

aside#sidebar
	position: relative
	float: left
	width: col(8, 25)
	margin: 12px 0 24px
	padding: 0 col(1, 25)
	font-size: 14px
	z-index: 1
	overflow: hidden
	&:after, &:before
		content: ""
		position: absolute
		right: 0
		top: 72px
		bottom: 85px
		z-index: -1
		width: 4px
		+background(linear-gradient(top, rgba($shadow-color, 0) 0%, rgba($shadow-color, .10) 35%, rgba($shadow-color, .10) 65%, rgba($shadow-color, 0) 100%) 3px 0 no-repeat, linear-gradient(top, rgba($shadow-color, 0) 0%, rgba($shadow-color, .03) 35%, rgba($shadow-color, .03) 65%, rgba($shadow-color, 0) 100%) -1px 0 no-repeat)
	&:before
		right: auto
		left: 100%
		width: 50%
		background: none
		+box-shadow(30px 0 100px rgba($shadow-color, .2))
		/* firefox renders box-shadows differently
		-moz-box-shadow: 50px 0 100px rgba($shadow-color, .2)
	.mod_article, .block
		margin: 24px 0
	.eightytwenty-sidebar-right &
		float: right
		&:after, &:before
			left: 0
			+background(linear-gradient(top, rgba($shadow-color, 0) 0%, rgba($shadow-color, .10) 35%, rgba($shadow-color, .10) 65%, rgba($shadow-color, 0) 100%) -3px 0 no-repeat, linear-gradient(top, rgba($shadow-color, 0) 0%, rgba($shadow-color, .03) 35%, rgba($shadow-color, .03) 65%, rgba($shadow-color, 0) 100%) 1px 0 no-repeat)
		&:before
			left: auto
			right: 100%
			+box-shadow(-30px 0 100px rgba($shadow-color, .2))
			/* firefox renders box-shadows differently
			-moz-box-shadow: -50px 0 100px rgba($shadow-color, .2)

.mail-form
	position: relative
	margin: 36px 0
	padding: 22px col(.5, 6)
	border: 1px solid $border-medium
	font-size: 14px
	background: $main-background
	+box-shadow(0 3px 0 -2px $main-background, 0 3px 0 -1px $border-medium, 0 6px 0 -3px $main-background, 0 6px 0 -2px $border-medium, 0 5px 5px rgba($shadow-color, .1))
	&:before, &:after
		content: ""
		position: absolute
		top: -1px
		left: -1px
		width: 100%
		height: 4px
		padding: 0 1px
		background: inline-image("mail-form-border.png")
	&:after
		top: auto
		bottom: -1px
	form
		margin: 0 !important
	h3
		margin: 0 !important
			bottom: 12px
		color: $font-color !important
		font-size: 16px !important
		font-weight: normal
	h4
		margin: 0 0 12px 0 !important
		font-size: 12px !important
		font-weight: normal
		color: $font-color-light
	h3 + h4
		margin-top: -6px
	p, .widget
		margin: 4px 0
	textarea
		min-height: 80px
		max-height: 300px
	label
		font-size: 12px
	button
		margin-top: 6px

aside#sidebar #nav-sub
	margin: 64px 0 48px
	h3
		display: inline
		margin: 0
		a
			padding: 8px 0
			display: block
			font-size: 12px
			font-weight: bold
			color: $nav-active-color
			text-decoration: none
	ul
		margin: 0
		padding: 0
	> ul
		margin: 0 col(-1, 6)
		padding: 0
		li
			display: inline
		a
			display: block
			margin-right: 1px
			padding: 5px col(1, 8)
			border:
				top: 1px solid $main-background
				top: 1px solid rgba($main-background, .5)
				bottom: 1px solid $border-light
			font-size: 14px
			color: $nav-color
			text-decoration: none
			&:hover, &:focus
				border-top-color: $nav-hover-color
				color: $white
				background: $nav-hover-color
		> li:first-child a
			border-top: 0
		ul a
			padding-left: col(1.5, 8)
		ul ul a
			padding-left: col(2, 8)
		li.active > a, li.trail > a
			font-weight: bold

#breadcrumbs
	margin: 0 0 24px 0
	padding: 0 0 6px 0
	border-bottom: 1px dotted $border-medium
	font-size: 12px
	color: $font-color-light
	a, b
		margin: 0 2px
	a
		text-decoration: none
		&:hover, &:focus
			text-decoration: underline
	b
		font-weight: inherit
	.eightytwenty-sidebar-right &
		margin:
			right: col(-1, 13)
			left: col(-1, 13)
	.eightytwenty-fullwidth &
		margin:
			right: col(-1, 21)
			left: col(-1, 21)

/* ===========================================
 * Homepage elements
 * ========================================

.eightytwenty-home
	section#content
		float: none
		width: auto
		margin:
			right: col(1, 25)
			left: col(1, 25)
	#content
		blockquote
			float: right
			width: col(7, 23)
			margin: 3px col(1.5, 23) 36px col(1.5, 23)
			font-size: 24px
			text-align: right
			color: $grey
			&:before
				content: none
			&:after
				content: "“"
				font-size: 132px
				color: $highlight-color
				line-height: .95
				position: absolute
				right: col(-1.5, 6.5)
				top: 0
			p
				margin: 0

#home-slider
	margin: 48px 0
	background: $main-background
	+box-shadow(0 0 0 9px $main-background, 0 0 0 10px $border-dark, 0 3px 0 8px $main-background, 0 3px 0 9px $border-dark, 0 6px 0 7px $main-background, 0 6px 0 8px $border-dark, 0 9px 0 6px $main-background, 0 9px 0 7px $border-dark, 0 12px 10px 5px rgba($shadow-color, .2))
	#tag-line &
		+box-shadow(none)
	.rsts-nav ul
		margin: 0
		padding: 0

.teaser-boxes-text, #content .teaser-boxes-text
	margin: 48px col(-1, 23) 36px
	padding: 40px 0 0 0
	border-top: 1px dotted $border-medium
	font-size: 0
	.box
		position: relative
		display: inline-block
		width: col(5, 25)
		margin: 0 0 40px col(1, 25)
		font-size: 14px
		text-align: center
		vertical-align: top
		h3
			margin: 0 0 120px 0
			color: $headline-color
			font-size: 16px
			+text-shadow(none)
		&:before
			position: absolute
			top: 36px
			left: 0
			width: 100%
			font-size: 90px
			color: $headline-color
			text-align: center
		p
			margin: 20px 0
.highlight-box, #content .highlight-box
	+clearfix
	position: relative
	margin: 36px -1px
	padding: 35px col(7, 23) 35px col(1, 23)
	border: 1px solid $border-dark
	background: $main-background
	+box-shadow(0 3px 0 -2px $main-background, 0 3px 0 -1px $border-dark, 0 4px 8px rgba($shadow-color, .2))
	h2
		margin: 0
		font-size: 24px
		font-weight: normal
		color: $font-color
		+text-shadow(none)
	h3
		margin: 0
		font-size: 16px
		font-weight: normal
		color: $font-color-light
	.button
		position: absolute
		right: col(1, 23)
		top: 50%
		margin-top: -22px
		&:active
			margin-top: -20px
		&:before
			top: 2px
			margin-right: 8px
			font-size: 18px
.article-boxes, #content .article-boxes
	margin: 36px 0
	> h1, > h2, > h3
		margin: 0
		border-bottom: 1px dotted $border-dark
		font-size: 24px
		font-weight: normal
		color: $font-color
		+text-shadow(none)
		&:before
			+icon("\e037", 24px)
			margin-right: 10px
			color: $font-color-light
	article
		position: relative
		min-height: 88px
		margin: 16px 0 0 0
		padding: 0 0 0 col(3, 23)
		h3
			margin: 0
			font-size: 16px
			line-height: 24px
			font-weight: bold
			color: $font-color
			+text-shadow(none)
			a
				color: $font-color
				&:hover
					color: $link-color
			i
				position: absolute
				left: 0
				width: col(2, 23)
				height: 80px
				padding-top: 11px
				font-size: 21px
				font-weight: normal
				font-style: normal
				line-height: 1
				color: $main-background
				text-align: center
				text-transform: uppercase
				background: $news-box-color
				+box-shadow(0 0 0 3px $main-background, 0 0 0 4px $border-dark, 0 3px 4px 4px rgba($shadow-color, .1))
				&:after
					content: ""
					position: absolute
					right: 0
					bottom: 0
					border-top: 10px solid mix($black, $news-box-color, 40%)
					border-right: 10px solid $main-background
				b
					display: block
					font-size: 36px
					font-weight: bold
					letter-spacing: -2px
		p
			margin: 0
.news-boxes, #content .news-boxes
	float: left
	width: col(13, 23)
	> h1:before, > h2:before, > h3:before
		content: "\e0dd"
	article
		padding-left: col(3, 13)
		h3 i
			width: col(2, 13)
.event-boxes, #content .event-boxes
	float: left
	width: col(9, 23)
	margin-left: col(1, 23)
	/* for rounding failures
	margin-right: -1%
	article
		padding-left: col(3, 9)
		h3 i
			width: col(2, 9)
			background: $event-box-color
			&:after
				border-top-color: mix($black, $event-box-color, 40%)
		p a
			display: block
		p i
			font-size: 12px
			font-style: normal
			text-transform: uppercase


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

section#content
	float: right
	width: col(13, 25)
	margin: 36px col(2, 25) 36px 0
	.eightytwenty-fullwidth &
		float: none
		width: auto
		margin:
			left: col(2, 25)
			right: col(2, 25)
	.eightytwenty-sidebar-right &
		float: left
		margin:
			right: 0
			left: col(2, 25)
#content
	p, ul, ol, table, blockquote, form, fieldset
		margin: 24px 0
	h1
		margin: 36px 0 24px 0
		font-size: 36px
		line-height: 48px
		color: $headline-color
		+text-shadow(0 2px 0 $shadow-color-headline)
	h2
		margin: 12px 0
		font-size: 24px
		color: $sub-headline-color
	h3
		margin: 12px 0
		font-size: 18px
	h4
		margin: 12px 0
		font:
			size: 16px
			weight: bold
	h5, h6
		margin: 12px 0
		font:
			size: 16px
			variant: small-caps
			weight: normal
		letter-spacing: 1px
		text-transform: uppercase
		word-spacing: 2px
	h6
		color: $font-color-light
	h2, h3, h4, h5, h6
		+ p, +ul, +ol, +table, +figure, +blockquote
			margin-top: 0
	section, article
		h1, h2, h3, h4, h5, h6, p, ul, ol, table, blockquote
			margin: 12px 0
	ul, ol
		padding-left: 21px
		li[data-icon]
			list-style: none
			&:before
				left: -21px
				width: 0
	ul
		list-style: disc
		ul
			margin-top: 0
	ol
		list-style: decimal
		ol, ul
			margin-top: 0
		ol
			list-style: upper-alpha
			ol
				list-style: lower-roman
				ol
					list-style: lower-alpha
	blockquote
		position: relative
		margin-left: col(1.5, 13)
		font-size: 21px
		p
			margin: 12px 0
		&:before
			content: "“"
			font-size: 132px
			color: $highlight-color
			line-height: .95
			position: absolute
			top: 0
			left: -60px
		small, i, em, cite
			font-size: 16px
			font-style: normal
			color: $font-color-light
			&:before
				/* non breaking space to avoid line breaks after dash
				content: "–\a0"
	img
		max-width: 100%
		height: auto
	table
		margin-bottom: 36px

.image_container
	position: relative
	+box-sizing(content-box)
	margin: 24px -10px 36px
	padding: 9px
	border: 1px solid $border-dark
	background: $main-background
	@if $show-image-border
		+box-shadow(0 3px 0 -2px $main-background, 0 3px 0 -1px $border-dark, 0 6px 0 -3px $main-background, 0 6px 0 -2px $border-dark, 0 9px 0 -4px $main-background, 0 9px 0 -3px $border-dark, 0 8px 8px rgba($shadow-color, .2))
.image_container
	img
		display: block
		width: 100%
		height: auto
	figcaption, .caption
		padding: 6px 0 0
		width: 100% !important
		font-size: 14px
.image_container.float_right, .image_container.float_left
	float: right
	@if $fluid-content-images
		width: col($content-image-cols, 13) !important
	margin: 0 -10px 20px 20px
	.eightytwenty-home &, .eightytwenty-fullwidth &
		@if $fluid-content-images
			width: col(9, 23) !important
	.no-resize &, &.no-resize
		&, .eightytwenty-home &, .eightytwenty-fullwidth &
			width: auto !important

.image_container.float_left
	float: left
	margin: 0 25px 20px -10px

.image_container:not(.float_right):not(.float_left)
	.no-resize &, &.no-resize
		display: inline-block
		vertical-align: top
		width: auto
		max-width: 100%
		img
			width: auto
			max-width: 100%

.ce_youtube-wrapper, .ce_vimeo-wrapper
	margin: 24px 0 36px
	position: relative
	padding-bottom: 56.25%
	height: 0
	overflow: hidden
	+box-shadow(0 0 0 9px $main-background, 0 0 0 10px $border-dark, 0 3px 0 8px $main-background, 0 3px 0 9px $border-dark, 0 6px 0 7px $main-background, 0 6px 0 8px $border-dark, 0 12px 10px 5px rgba($shadow-color, .2))
	iframe, object, embed
		position: absolute
		top: 0
		left: 0
		width: 100%
		height: 100%
.mejs__video, .mejs__audio
	&:not(.mejs__container-fullscreen)
		margin: 24px 0
		background: transparent
.ce_player .mejs__video:not(.mejs__container-fullscreen)
	margin-bottom: 36px
	+box-shadow(0 0 0 9px $main-background, 0 0 0 10px $border-dark, 0 3px 0 8px $main-background, 0 3px 0 9px $border-dark, 0 6px 0 7px $main-background, 0 6px 0 8px $border-dark, 0 12px 10px 5px rgba($shadow-color, .2))

.ce_gallery
	@for $cols from 1 through 12
		> ul.cols_#{$cols} > li
			width: ((100% - (($cols + 1) * 1.5%)) / $cols)
	&.no-resize > ul > li
		width: auto
	> ul
		+clearfix
		margin: 0 !important
		padding: 0 0 1.5% 0 !important
		list-style: none !important
		border: 1px solid $border-dark
		background: $main-background
		@if $show-image-border
			+box-shadow(0 3px 0 -2px $main-background, 0 3px 0 -1px $border-dark, 0 6px 0 -3px $main-background, 0 6px 0 -2px $border-dark, 0 5px 5px rgba($shadow-color, .2))
		> li
			float: left
			width: 31.3333%
			margin: 1.5% 0 0 1.5%
			&.col_first
				clear: left
	#sidebar &
		@for $cols from 1 through 12
			> ul.cols_#{$cols} > li
				width: ((100% - (($cols + 1) * 3%)) / $cols)
		&.no-resize > ul > li
			width: auto
		> ul
			padding-bottom: 3% !important
			> li
				width: 45.5%
				margin:
					top: 3%
					left: 3%
	.image_container
		+box-shadow(none)
		margin: 0
		padding: 0
		border: 0

#content .ce_imageslider img
	max-width: none

.enclosure, .ce_downloads
	position: relative
	margin: 24px 0
	padding: 7px col(.5, 13) 10px
	border: 1px solid $border-medium
	background: $main-background
	+box-shadow(0 3px 0 -2px $main-background, 0 3px 0 -1px $border-medium, 0 6px 0 -3px $main-background)
	&:before
		+icon("\e06d", 36px, 0)
		position: absolute
		top: 50%
		right: col(1, 25)
		color: $link-color
		cursor: default
	p, h1, h2, h3, h4, h5, h6, ul
		margin: 6px 0 !important
	ul
		list-style: none !important
		padding: 0 !important

aside#sidebar
	h1, h2, h3, h4
		margin: 24px 0 12px
		font-size: 12px
		text-transform: uppercase
		color: $headline-color
	h3, h4
		color: $font-color-light
	p, ul, ol, table, blockquote, fieldset, form
		margin: 12px 0
	ul, ol
		padding: 0
		list-style-type: none
	table
		margin-bottom: 24px
		border-color: $border-medium
		+box-shadow(0 3px 0 -2px $main-background, 0 3px 0 -1px $border-medium, 0 6px 0 -3px $main-background, 0 6px 0 -2px $border-medium, 0 5px 5px rgba($shadow-color, .1))
	.mod_article, .block
		margin: 24px 0


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

form
	.widget
		margin: 12px 0
	label
		display: block
		margin-bottom: 4px
	input, textarea
		padding: 5px 10px
		border: 1px solid $border-dark
		+border-radius(4px)
		color: inherit
		background: $main-background
		+box-shadow(2px 4px 1px -2px rgba($shadow-color, .15) inset)
		&:focus
			+box-shadow(2px 4px 1px -2px rgba($shadow-color, .15) inset, 0 0 0 3px rgba($shadow-color, .075))
			outline: none
	input
		+appearance(none)
		&[type="checkbox"], &[type="radio"], &[type="image"]
			margin: 0
			padding: 0
			border: 0
			+box-shadow(none)
		&[type="checkbox"], &[type="radio"]
			+ label
				display: inline
		&[type="checkbox"]
			+appearance(checkbox)
		&[type="radio"]
			+appearance(radio)
			background: none
	input[type="file"]
		height: auto
		padding: 0
		font-size: 14px
		+box-shadow(none)
	button, input[type="submit"]
		margin: 12px 0
		&:active
			margin-bottom: 14px
	select
		font-size: 13px
	textarea
		resize: vertical
		padding:
			top: 10px
			bottom: 10px
	fieldset
		p
			margin: 0 !important
		label:after,
			content: "\A"
			white-space: pre
	.valid
		input, textarea
			&, &:hover
				border-color: #87aa4a
				+box-shadow(0 0 0 4px rgba(#87aa4a, .3), 0 1px 2px rgba($shadow-color, .15) inset)
	span.mandatory
		margin-left: 2px
		font-size: 18px
		color: $warning
	.invalid input, .invalid textarea, input.error, textarea.error
		&, &:hover, &:focus
			border-color: #e14e4e
			+box-shadow(0 0 0 4px rgba(#e14e4e, .3), 0 1px 2px rgba($shadow-color, .15) inset)
	b.error, p.error
		margin: 0
		color: $warning
	.explanation, .captcha_text
		font-size: 12px
		margin: -10px 0 24px
		color: $font-color-light
		p
			margin: 0 !important
	.captcha_text
		display: block
		margin-top: 6px
		color: $link-color
		font-size: inherit
		font-style: italic
	.styled_select
		font-family: $font-family, sans-serif
		font-size: 14px

#content form
	p.error
		margin: 0
	input
		&[type="text"], &[type="password"], &[type="email"]
			width: col(8, 13)
	textarea
		width: 100%

aside#sidebar form
	input, textarea, button
		width: 100%
	input
		&[type="checkbox"], &[type="radio"], &[type="image"]
			width: auto
			height: auto


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

#wrapper > footer
	+border-radius(3px)
	font-size: 14px
	background: $footer-background-color
	.footer-column
		float: left
		width: col(7, 25)
		margin: 30px 0 30px col(1, 25)
		h1, h2, h3
			font-size: 14px
			font-weight: bold
			margin: 0 0 15px
		ul, ol, p
			margin: 15px 0
		ul, ol
			list-style: none
			padding-left: 0
	.footer-column-1
		width: col(9, 25)
		li
			margin-bottom: 6px
			a b
				display: inline-block
				margin-right: 4px
				padding: 0 3px
				font-weight: inherit
				line-height: 1.3
				text-decoration: none
				color: $white
				background-color: $link-color
	.footer-column-2
		width: col(5, 25)

#nav-footer-wrap
	+clearfix
	clear: both
	+border-radius(3px 3px 0 0)
	color: $nav-color
	background: $nav-footer-background-color
	a
		color: inherit

#nav-footer
	float: left
	width: col(12, 25)
	margin: 15px 0 15px col(1, 25)
	ul, li
		display: inline
		margin: 0
		padding: 0
	a
		margin-right: col(.5, 15)
		font-weight: bold
		color: $nav-footer-color
		text-decoration: none
		&:hover, &:focus
			text-decoration: underline
		&:after
			color: $nav-footer-color

#footer-info
	float: right
	margin: 15px col(1, 25) 15px 0
	color: $nav-footer-color
	ul, li, p, nav
		display: inline
		margin: 0
		padding: 0
	a
		margin-right: 5px
		&[data-icon]
			display: inline-block
			width: 17px
			font-size: 0
			line-height: 0
			color: inherit
			&:before
				+icon("", 16px, 1)
				top: 3px
				color: inherit
			&:hover:before, &:focus:before
				+opacity(.6)
	.rocksolid-copyright
		margin: 0 0 0 5px
		color: mix($nav-footer-background-color, $nav-footer-color, 40%)




/* ===========================================
 * 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: 60px
	padding: 12px 20px 12px 80px
	border-top: 1px solid $border-medium
	z-index: 99
	background-color: $main-background
	box-shadow: 0 -2px 5px rgba($shadow-color, 0.1)
	@media screen and (max-width: 900px)
		position: relative
	@media screen and (max-width: 599px)
		display: block
		padding-left: 20px
	&:before
		position: absolute
		top: 50%
		margin-top: -18px
		left: 30px
		font-size: 36px
		color: $highlight-color
		@media screen and (max-width: 900px)
			top: 24px
			margin-top: 0
		@media screen and (max-width: 599px)
			position: static
	h1, h2, h3,
		font-size: 14px
		margin: 6px 0
	p
		font-size: 13px
		margin: 6px 0

.fixed-note-column
	display: table-cell
	vertical-align: middle
	padding: 0 10px
	&:last-child
		text-align: right
		@media screen and (max-width: 900px)
			text-align: left
	@media screen and (max-width: 900px)
		display: block
		margin: 12px 0
		padding: 0

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

.fixed-note-button
	margin: 0

.fixed-note-closed
	position: fixed
	right: 30px
	bottom: 0
	z-index: 99
	padding: 8px 12px
	color: $button-color
	text-decoration: none
	background: $button-background-color
	box-shadow: 0 -2px 5px rgba($shadow-color, 0.1)
	@media screen and (max-width: 1240px)
		right: 0
	@media screen and (max-width: 900px)
		position: absolute
		top: 12px
		right: auto
		bottom: auto
		left: col(0.5, 15)
		margin-left: -16px
		padding: 4px 12px
	@media screen and (max-width: 599px)
		margin-left: 0
		left: 0
		top: 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", 12px)
	top: -1px
	margin-right: 6px
	vertical-align: middle
.next a:after
	content: "\e019"
	margin-right: 0
	margin-left: 6px
.pagination
	> 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($main-background 1%, #eaeaea 100%))
				+box-shadow(1px 0 0 0 rgba(255, 255, 255, .9) inset, -1px 0 0 0 rgba(255, 255, 255, .9) inset)

/* Search
section#content .mod_search
	margin: 24px 0
	.widget
		display: inline
	form
		input
			&[type="search"]
				width: 74%
				margin: 0
				padding: 8px 10px
		button, input
			&[type="submit"]
				width: 25%
				margin-left: 0
				margin-right: -2%
				padding-bottom: 10px
				&:active
					padding-bottom: 8px
	h3 span.relevance
		float: right
		font-size: 14px
	.header
		padding-bottom: 6px
		border-bottom: 1px solid $border-medium
		color: $font-color-light
	.highlight
		padding: 0 5px
		font-weight: bold
		background: mix($main-background, $link-color, 60%)
	.url
		padding-bottom: 24px
		border-bottom: 1px dotted $border-medium
		color: $font-color-light
		&:before
			margin-right: 5px
			+icon("\e0b5", 16px, 1)
			top: 1px
		.filesize
			display: inline-block
			font-size: 12px

/* FAQ
.mod_faqpage section
	padding-left: col(1.5,13)
	margin: 48px 0
	h3
		border-bottom: 0 !important
		&:before
			+icon("\e0eb", 16px)
			height: 27px
			width: 36px
			padding-top: 9px
			margin-right: 20px
			margin-left: -60px
			text-align: center
			vertical-align: middle
			color: $main-background
			+border-radius(100%)
			background-color: $link-color
			border: 2px solid $main-background
			+box-shadow(0 0 0 3px $border-light)
.mod_faqpage, .mod_faqreader
	.info
		font-size: 12px
		color: $font-color-light
.mod_faqlist
	ul
		list-style-type: none !important
		li
			padding: 6px 0
			&:before
				+icon("\e048", 15px, 1)
				margin-right: 5px
				color: $link-color

/* News
.mod_newslist, .mod_newsarchive
	.info
		margin-bottom: 0 !important
	.info + h2
		margin-top: 0 !important
	.more
		margin-top: -12px !important
	> .layout_short, > .layout_latest
		margin-bottom: 24px
		border-bottom: 1px solid $border-light
	> .layout_latest
		.info
			color: $font-color-light
		.image_container
			margin-top: 12px !important
			margin-bottom: 12px !important
	footer &
		li
			margin-bottom: 6px

#content .layout_full
	.info
		margin-top: -24px
		color: $font-color-light

/* Events
.mod_calendar
	table
		border-collapse: separate
	th
		background: $dark-white
		+background-image(linear-gradient(darken($main-background, 10%), darken($main-background, 15%)))
		+box-shadow(1px 0 0 0 rgba($main-background, .8) inset, -1px 0 0 0 rgba($main-background, .8) inset, 0 2px 2px rgba($main-background, .8))
		border-bottom: 1px solid $border-medium
		&.previous, &.next
			padding: 0
			a
				padding: 11px 16px
				display: block
				text-decoration: none
				&:hover, &:focus
					color: darken($nav-hover-color, 20%)
				&:after, &:before
					display: none
				&:active
					+box-shadow(0 0 4px rgba($shadow-color, .3) inset)
		&.current
			text-align: center
			&:before
				+icon("\e037", 16px)
				margin-right: 6px
		&.next
			text-align: right
		&.label
			font-size: 12px
			text-align: center
			text-transform: uppercase
			border-bottom: 2px solid $border-light !important
	td
		width: col(1, 7)
		background: darken($main-background, 5%)
		+background-image(linear-gradient(darken($main-background, 5%) 1%, darken($main-background, 10%) 100%))
		+box-shadow(1px 0 0 0 rgba($main-background, .8) inset, -1px 0 0 0 rgba($main-background, .8) inset)
		&.empty, &:hover
			color: $font-color
			background: $main-background
		&.today
			color: $font-color !important
			background: mix(#7f7f7f, $main-background, 40%)
			+box-shadow(0 2px 10px rgba($shadow-color, .6) inset)
			a
				color: $main-background !important
				&:hover
					border-color: #969696 !important
	tbody tr
		&:hover
			background-color: #eaeaea !important
	.event
		font-size: 12px
	.minicalendar
		td
			padding: 3px
			text-align: center

.mod_eventreader .info, .mod_eventlist .header
	font-weight: bold
.mod_eventlist .event h2
	margin-top: 0 !important
.mod_eventreader .info time:before, .mod_eventlist .header:before
	+icon("\e037", 15px, 1)
	margin-right: 4px

/* Comments
.ce_comments
	border-top: 1px solid $border-medium
	margin-top: 36px
	.comment_default
		position: relative
		padding: 24px col(1, 13)
		margin-bottom: 24px
		border: 1px solid $border-medium
		background-color: $main-background
		+box-shadow(0 3px 0 -2px $main-background, 0 3px 0 -1px $border-medium, 0 3px 5px rgba($shadow-color, .1))
		&:after
			+icon("\e137", 36px, 1)
			color: $ultra-light-grey
			position: absolute
			top: 16px
			right: col(1, 13)
			margin-right: 6px
			z-index: 1
		.info
			position: relative
			display: inline
			z-index: 2
			border-bottom: 1px solid $border-medium
			a
				text-decoration: none
			.date
				display: inline-block
				font-weight: normal
				color: $font-color-light
				&:before
					display: none
		.comment
			font-size: 14px
			position: relative
			z-index: 2
		.reply
			padding-left: col(1, 13)
			.info:before
				+icon("\e042", 18px, 1)
				color: $highlight-color
				position: absolute
				top: 3px
				left: -24px
	.form
		margin-top: 36px
	form
		input, #content & input
			&[type="text"], &[type="password"], &[type="email"], &[type="url"]
				width: col(7,13)
				float: right
		label
			float: left
			margin-top: 3px
		fieldset
			margin: 0 !important
			border: 0
			label
				float: none
				margin-left: 5px
		.widget
			position: relative
			clear: both
			float: left
			width: 100%
			margin: 12px 0
		.captcha_text
			display: inline

/* Sitemap */
#content .mod_sitemap
	ul
		padding-left: 0
		list-style-type: none
		li
			border-top: 1px solid $border-medium
			&:first-child, &.first
				border: 0
			li
				padding: 3px 24px
				font-size: 14px
				border-color: $border-light
			li.submenu
				border: 0
				ul
					margin: 0
	> ul > li
		padding: 6px 0
		&:before
			+icon("\e083")
			margin-right: 8px
			color: $link-color

/* Login */
.mod_login
	padding: 0 5%
	border: 1px solid $border-dark
	text-align: center
	background-color: $main-background
	+box-shadow(0 3px 0 -2px $main-background, 0 3px 0 -1px $border-dark, 0 6px 0 -3px $main-background, 0 6px 0 -2px $border-dark, 0 5px 5px rgba($shadow-color, .2))
	h2
		padding-bottom: 6px
		border-bottom: 1px solid $border-medium
	input
		width: 80% !important
	table
		margin-bottom: 0 !important
		background: none !important
		border: 0 !important
		+box-shadow(none !important)
		tr
			background-color: transparent !important

/* Newsletter */
#content .mod_nl_list
	ul
		padding-left: 0
		list-style-type: none
		li
			padding: 3px 0
			border-top: 1px solid $border-medium
			&:first-child, &.first
				border: 0


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

/* ColorBox Close Button Reset */
#cboxClose, #cboxPrevious, #cboxNext
	+box-shadow(none)


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

#content .rsts-main, #sidebar .rsts-main
	ul
		margin: 0
		padding: 0
	.image_container
		margin-left: 0
		margin-right: 0
		&.float_left
			margin-left: 0
			margin-right: 20px
		&.float_right
			margin-right: 0
			margin-left: 20px
#tag-line
	.rsts-main
		width: col(25, 23)
		margin: 28px col(-1, 23) -28px col(-1, 23)
		&:first-child
			margin-top: -28px
			img
				+border-radius(4px 4px 0 0)
	.rsts-main img
		width: 100%
		height: auto
		margin: 0


/* ===========================================
 * Media queries
 * ========================================

/* Wrapper max-width (viewport width 1100px and below)
@media screen and (max-width: 1100px)
	#content-wrapper
		/* removing right and left border to avoid horizontal scrollbar
		border:
			right: 0
			left: 0
		margin:
			right: 0
			left: 0

/* Tablet portrait format (viewport width 900px and below)
@media screen and (max-width: 900px)
	#wrapper > header
		padding:
			right: col(1, 15)
			left: col(1, 15)
		+border-radius(0)
	#nav-header
		right: col(1, 15)
	#nav-main
		clear: both
		margin: 0 0 0 -40px
		padding-top: 15px
		text-align: left
	#nav-search
		right: col(1, 15)
		top: 60px
		width: 200px
	#content-wrapper
		+border-radius(0)
	#tag-line
		padding:
			right: col(1, 15)
			left: col(1, 15)
		+border-radius(0)
		img
			width: col(15, 13)
			margin:
				right: col(-1, 13)
				left: col(-1, 13)
	section#content,
	.eightytwenty-home section#content,
	.eightytwenty-fullwidth section#content,
	.eightytwenty-sidebar-right section#content
		float: none
		width: auto
		margin:
			right: col(1, 15)
			left: col(1, 15)
	.eightytwenty-home #content
		blockquote
			width: col(4, 13)
			margin:
				right: col(1, 13)
				left: col(1, 13)
			&:after
				font-size: 35px
				right: col(-1, 4)
	.teaser-boxes-text, #content .teaser-boxes-text
		margin:
			right: col(-1, 13)
			left: col(-1, 13)
		.box
			width: col(6, 15)
			margin-left: col(1, 15)
	.highlight-box, #content .highlight-box
		text-align: center
		padding:
			right: col(1, 13)
			left: col(1, 13)
		.button
			position: relative
			right: auto
			top: auto
			width: auto
			margin-top: 20px
			&:active
				margin-top: 20px
				top: 2px
	.article-boxes, #content .article-boxes
		article
			padding-left: col(3, 13)
			h3 i
				width: col(2, 13)
	.news-boxes, #content .news-boxes
		float: none
		width: auto
		article
			padding-left: col(3, 13)
			h3 i
				width: col(2, 13)
	.event-boxes, #content .event-boxes
		float: none
		width: auto
		margin:
			right: 0
			left: 0
		article
			padding-left: col(3, 13)
			h3 i
				width: col(2, 13)
	.image_container.float_right, .image_container.float_left
		.eightytwenty-home &, .eightytwenty-fullwidth &
			@if $fluid-content-images
				width: col(6, 13)
			margin: 0 -10px 10px 15px
	.image_container.float_left
		.eightytwenty-home &, .eightytwenty-fullwidth &
			margin: 0 15px 10px -10px
	aside#sidebar, .eightytwenty-sidebar-right aside#sidebar
		clear: both
		float: none
		width: auto
		padding: 24px 0
		&:after, &:before
			content: none
	aside#sidebar
		.mod_article > .block, .mod_form, .mod_subscribe
			float: left
			width: col(6, 15)
			margin: 24px 0 0 col(1, 15)
		.mail-form
			padding:
				right: col(.5, 15)
				left: col(.5, 15)
	aside#sidebar #nav-sub
		margin: 0 col(1, 15) 24px col(1, 15)
		+clearfix
		> ul
			> li
				display: inline-block
				margin: 0 5px 10px 0
				vertical-align: top
			margin: 0
			a, ul a, ul ul a
				padding: 5px 10px
				border: 0
				background: $main-background
				+box-shadow(0 1px 2px rgba($shadow-color, .2))
	.eightytwenty-sidebar-right #breadcrumbs, .eightytwenty-fullwidth #breadcrumbs
		margin:
			right: 0
			left: 0
	#wrapper > footer
		+border-radius(0)
		.footer-column
			width: col(6, 15)
			margin-left: col(1, 15)
		.footer-column-1
			width: col(6, 15)
		.footer-column-2
			width: col(6, 15)
		.footer-column-3
			width: col(13, 15)
			margin-top: 0
	#nav-footer-wrap
		+border-radius(0)
	#nav-footer
		float: none
		width: auto
		margin:
			right: col(1, 15)
			left: col(1, 15)
	#footer-info
		float: none
		margin:
			right: col(1, 15)
			left: col(1, 15)

/* Mobile (viewport width 599px and below)
@media screen and (max-width: 599px)
	.confirmation, .information, .warning
		padding:
			right: col(1, 13)
			left: col(2, 13)
		&:before
			width: col(2, 13)
	#wrapper > header
		text-align: center
	#logo
		float: none
		margin-top: 0
		margin-left: 0
		img
			margin:
				right: auto
				left: auto
	#nav-main
		display: none
	#nav-main-mobile
		display: block
		width: 100%
		margin: 20px 0
		font-size: 16px
	#nav-search
		position: relative
		right: auto
		top: auto
		margin: 20px 0
		width: 100% !important
		input
			right: 0
			width: 100%
			padding-right: 30px
	#nav-header
		position: static
	#nav-sub
		display: none
	.eightytwenty-home #content
		blockquote
			width: col(11, 13)
			margin:
				right: col(2, 13)
				left: 0
			&:after
				font-size: 30px
				right: col(-2, 11)
	.teaser-boxes-text, #content .teaser-boxes-text
		.box
			width: col(13, 15)
	.article-boxes, #content .article-boxes,
	.news-boxes, #content .news-boxes,
	.event-boxes, #content .event-boxes
		article
			padding-left: col(4, 13)
			h3 i
				width: col(3, 13)
	aside#sidebar
		.mod_article > .block, .mod_form, .mod_subscribe
			float: none
			width: col(13, 15)
		.mail-form
			padding:
				right: col(1, 15)
				left: col(1, 15)
	#content
		h1
			font-size: 24px
		h2
			font-size: 20px

	#content form
		input
			&[type="text"], &[type="password"], &[type="email"]
				width: 100%

	.image_container.float_right, .image_container.float_left
		float: none
		@if $fluid-content-images
			width: 100% !important
		margin: 15px -10px
		.eightytwenty-home &, .eightytwenty-fullwidth &
			@if $fluid-content-images
				width: 100% !important
		.no-resize &, &.no-resize
			&, .eightytwenty-home &, .eightytwenty-fullwidth &
				width: auto !important

	#wrapper > footer
		.footer-column, .footer-column-1, .footer-column-2, .footer-column-3
			float: none
			width: col(13, 15)

	.ce_gallery.ce_gallery, #sidebar .ce_gallery.ce_gallery
		> ul
			/* doubled class for specificity
			padding: 1.5% 1.5% 3% !important
			> li
				display: inline-block
				float: none
				width: auto
				margin: 1.5%

	.ce_comments
		.comment_default
			&:after
				content: none
		form
			input, #content & input
				&[type="text"], &[type="password"], &[type="email"], &[type="url"]
					width: 100%
					float: none
			label
				float: none

// ===========================================
 * Grid (design + production helper)
 * ========================================
//
	html #wrapper: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, 25), rgba(red,0) col(1, 25), rgba(red,0) col(2, 25), rgba(red,1) col(2, 25), rgba(red,1) col(3, 25), rgba(red,0) col(3, 25), rgba(red,0) col(4, 25), rgba(red,1) col(4, 25), rgba(red,1) col(5, 25), rgba(red,0) col(5, 25), rgba(red,0) col(6, 25), rgba(red,1) col(6, 25), rgba(red,1) col(7, 25), rgba(red,0) col(7, 25), rgba(red,0) col(8, 25), rgba(red,1) col(8, 25), rgba(red,1) col(9, 25), rgba(red,0) col(9, 25), rgba(red,0) col(10, 25), rgba(red,1) col(10, 25), rgba(red,1) col(11, 25), rgba(red,0) col(11, 25), rgba(red,0) col(12, 25), rgba(red,1) col(12, 25), rgba(red,1) col(13, 25), rgba(red,0) col(13, 25), rgba(red,0) col(14, 25), rgba(red,1) col(14, 25), rgba(red,1) col(15, 25), rgba(red,0) col(15, 25), rgba(red,0) col(16, 25), rgba(red,1) col(16, 25), rgba(red,1) col(17, 25), rgba(red,0) col(17, 25), rgba(red,0) col(18, 25), rgba(red,1) col(18, 25), rgba(red,1) col(19, 25), rgba(red,0) col(19, 25), rgba(red,0) col(20, 25), rgba(red,1) col(20, 25), rgba(red,1) col(21, 25), rgba(red,0) col(21, 25), rgba(red,0) col(22, 25), rgba(red,1) col(22, 25), rgba(red,1) col(23, 25), rgba(red,0) col(23, 25), rgba(red,0) col(24, 25), rgba(red,1) col(24, 25)))
		opacity: .1
	html:hover #wrapper:before
		visibility: hidden
	@media screen and (max-width: 900px)
		html #wrapper:before
			+background-image(linear-gradient(left, rgba(red,1) col(1, 15), rgba(red,0) col(1, 15), rgba(red,0) col(2, 15), rgba(red,1) col(2, 15), rgba(red,1) col(3, 15), rgba(red,0) col(3, 15), rgba(red,0) col(4, 15), rgba(red,1) col(4, 15), rgba(red,1) col(5, 15), rgba(red,0) col(5, 15), rgba(red,0) col(6, 15), rgba(red,1) col(6, 15), rgba(red,1) col(7, 15), rgba(red,0) col(7, 15), rgba(red,0) col(8, 15), rgba(red,1) col(8, 15), rgba(red,1) col(9, 15), rgba(red,0) col(9, 15), rgba(red,0) col(10, 15), rgba(red,1) col(10, 15), rgba(red,1) col(11, 15), rgba(red,0) col(11, 15), rgba(red,0) col(12, 15), rgba(red,1) col(12, 15), rgba(red,1) col(13, 15), rgba(red,0) col(13, 15), rgba(red,0) col(14, 15), rgba(red,1) col(14, 15)))