/*
 * 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.scss";
@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
 * ======================================== */

@include 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: white;
$black: black;
$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;
	@include 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, 0.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 {
			@include box-shadow(0 5px 0 -1px $dropdown-background-color, 0 3px 0 $border-dropdown, 0 0 0 3px rgba($shadow-color, 0.075));
		}
	}
}

* {
	@include box-sizing(inherit);
}

/* Resetting box model for moo_mediabox and j_colorbox */
#mbCenter, #colorbox {
	@include box-sizing(content-box);
}

::selection {
	background: $selection-color;
	color: $white;
	@include text-shadow(none !important);
}

::-moz-selection {
	background: $selection-color;
	color: $white;
	@include 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;
	@include 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, 0.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: white;
		}
	}
}

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

/* Icon classes */
*[data-icon] {
	&:before {
		@include icon(attr(data-icon));
		font-size: 100%;
		margin-right: 4px;
	}
	&.after {
		&:before {
			content: none;
		}
		&:after {
			@include 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: -0.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 {
	@include icon("\e00c");
	top: 2px;
	margin-right: 5px;
}

.ce_accordion {
	background-color: $main-background;
	border: 1px solid $border-light;
	.accordion {
		@include clearfix;
		padding: 0 col(0.5, 13);
		> div {
			padding-bottom: 12px;
		}
	}
	.toggler {
		position: relative;
		padding: 8px col(1, 13) 8px col(0.5, 13);
		outline: none;
		color: $link-color;
		@include background-image(linear-gradient(lighten($main-background, 5%) 10%, darken($main-background, 10%) 100%));
		cursor: pointer;
		&:after {
			@include icon("\e015", 16px, 0);
			position: absolute;
			right: col(0.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;
		@include 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(0.5, 13) 8px col(1, 13);
	margin: {
		left: -1px;
		right: -1px;
	};
	border: 1px solid $confirmation;
	color: darken($confirmation, 20%);
	background-color: tint($confirmation, 40%);
	@include box-shadow(0 3px 0 -2px tint($confirmation, 60%), 0 3px 0 -1px $confirmation, 0 3px 2px rgba($shadow-color, 0.2));
	&:before {
		@include 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%);
	@include box-shadow(0 3px 0 -2px tint($information, 25%), 0 3px 0 -1px $information, 0 3px 2px rgba($shadow-color, 0.2));
	&:before {
		content: "\2139";
	}
}

.warning {
	border-color: $warning;
	color: darken($warning, 25%);
	background-color: tint($warning, 45%);
	@include box-shadow(0 3px 0 -2px tint($warning, 25%), 0 3px 0 -1px $warning, 0 3px 2px rgba($shadow-color, 0.2));
	&:before {
		content: "\e055";
	}
}

code {
	padding: 2px 5px;
	font-family: "Lucida Console", monospace;
	font-size: 14px;
	line-height: 19px;
	background-color: $ultra-light-grey;
	@include 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;
	};
	@include background-image(linear-gradient(top, $ultra-light-grey 50%, $main-background 50%));
	@include box-shadow(0 0 7px rgba($shadow-color, 0.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;
	@include 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%);
	@include border-radius(4px);
	font-size: 14px;
	font-weight: bold;
	color: $button-color;
	text-align: center;
	text-decoration: none;
	@include text-shadow(0 1px 0 rgba($white, 0.5));
	background: mix($white, $button-background-color, 25%);
	@include background(linear-gradient(top, mix($white, $button-background-color, 45%) 0, mix($white, $button-background-color, 5%) 100%));
	@include box-shadow(0 1px 0 rgba($white, 0.3) inset, 0 -1px 0 mix($white, $button-color, 20%) inset, 0 -2px 0 $button-color inset, 0 -3px 0 rgba($white, 0.1) inset, 0 1px 0 rgba($shadow-color, 0.1));
	&:hover, &:focus {
		text-decoration: none;
		@include box-shadow(0 1px 0 rgba($white, 0.3) inset, 0 -1px 0 mix($white, $button-color, 20%) inset, 0 -2px 0 $button-color inset, 0 -3px 0 rgba($white, 0.1) inset, 0 1px 0 rgba($shadow-color, 0.1), 0 1px 0 3px rgba($shadow-color, 0.075));
	}
	&:active {
		top: 2px;
		margin-bottom: 2px;
		padding-bottom: 10px;
		@include box-shadow(0 1px 0 rgba($shadow-color, 0.1) inset, 0 -3px 0 rgba($white, 0.1) inset, 0 1px 0 rgba($shadow-color, 0.1));
		@include 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%);
		@include background(linear-gradient(top, mix($white, $button-secondary-background-color, 45%) 0, mix($white, $button-secondary-background-color, 5%) 100%));
		@include box-shadow(0 1px 0 rgba($white, 0.3) inset, 0 -1px 0 mix($white, $button-secondary-color, 20%) inset, 0 -2px 0 $button-secondary-color inset, 0 -3px 0 rgba($white, 0.1) inset, 0 1px 0 rgba($shadow-color, 0.1));
		&:hover, &:focus {
			@include box-shadow(0 1px 0 rgba($white, 0.3) inset, 0 -1px 0 mix($white, $button-secondary-color, 20%) inset, 0 -2px 0 $button-secondary-color inset, 0 -3px 0 rgba($white, 0.1) inset, 0 1px 0 rgba($shadow-color, 0.1), 0 1px 0 3px rgba($shadow-color, 0.075));
		}
		&:active {
			padding-bottom: 6px;
			@include box-shadow(0 1px 0 rgba($shadow-color, 0.1) inset, 0 -3px 0 rgba($white, 0.1) inset, 0 1px 0 rgba($shadow-color, 0.1));
			@include 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 {
	@include 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;
	@include 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%);
				@include 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;
		@include border-radius(4px 4px 0 0);
		background: $dropdown-background-color;
		@include 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;
		@include border-radius(0 4px 4px 4px);
		text-align: left;
		white-space: nowrap;
		background: $dropdown-background-color;
		@include box-shadow(0 -53px 0 -50px $nav-active-color inset, 0 0 0 3px rgba($shadow-color, 0.075), 3px 6px 20px rgba($shadow-color, 0.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;
		@include 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;
	@include border-radius(4px);
	background: $main-background;
	@include box-shadow(0 0 0 3px rgba($shadow-color, 0.075));
	@include transition(width 0.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;
		@include box-shadow(none);
		&:before {
			@include icon("\e0cb", 13px);
			padding: 8px 29px 8px 8px;
		}
		&:hover, &:focus {
			color: $nav-hover-color;
		}
	}
	input {
		position: absolute;
		right: 29px;
		top: 0;
		@include appearance(none);
		width: 169px;
		height: 29px;
		padding: 0 5px;
		border: 0;
		border-right: 1px solid $border-light;
		@include border-radius(3px 0 0 3px);
		background: transparent;
		@include box-shadow(0 1px 4px rgba($shadow-color, 0.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 {
				@include 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 {
	@include clearfix;
	margin: 18px -1px;
	border: 1px solid $border-light;
	border-color: rgba($shadow-color, 0.07);
	@include border-radius(4px);
	background: $content-background-color;
	@include background-clip(padding-box);
}

#tag-line {
	overflow: hidden;
	padding: 28px col(1, 25);
	border-bottom: 1px solid $border-light;
	@include 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 {
		@include 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;
		@include 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;
		@include background(linear-gradient(top, rgba($shadow-color, 0) 0%, rgba($shadow-color, 0.1) 35%, rgba($shadow-color, 0.1) 65%, rgba($shadow-color, 0) 100%) 3px 0 no-repeat, linear-gradient(top, rgba($shadow-color, 0) 0%, rgba($shadow-color, 0.03) 35%, rgba($shadow-color, 0.03) 65%, rgba($shadow-color, 0) 100%) -1px 0 no-repeat);
	}
	&:before {
		right: auto;
		left: 100%;
		width: 50%;
		background: none;
		@include box-shadow(30px 0 100px rgba($shadow-color, 0.2));
		/* firefox renders box-shadows differently */
		-moz-box-shadow: 50px 0 100px rgba($shadow-color, 0.2);
	}
	.mod_article, .block {
		margin: 24px 0;
	}
	.eightytwenty-sidebar-right & {
		float: right;
		&:after, &:before {
			left: 0;
			@include background(linear-gradient(top, rgba($shadow-color, 0) 0%, rgba($shadow-color, 0.1) 35%, rgba($shadow-color, 0.1) 65%, rgba($shadow-color, 0) 100%) -3px 0 no-repeat, linear-gradient(top, rgba($shadow-color, 0) 0%, rgba($shadow-color, 0.03) 35%, rgba($shadow-color, 0.03) 65%, rgba($shadow-color, 0) 100%) 1px 0 no-repeat);
		}
		&:before {
			left: auto;
			right: 100%;
			@include box-shadow(-30px 0 100px rgba($shadow-color, 0.2));
			/* firefox renders box-shadows differently */
			-moz-box-shadow: -50px 0 100px rgba($shadow-color, 0.2);
		}
	}
}

.mail-form {
	position: relative;
	margin: 36px 0;
	padding: 22px col(0.5, 6);
	border: 1px solid $border-medium;
	font-size: 14px;
	background: $main-background;
	@include 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, 0.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, 0.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: 0.95;
				position: absolute;
				right: col(-1.5, 6.5);
				top: 0;
			}
			p {
				margin: 0;
			}
		}
	}
}

#home-slider {
	margin: 48px 0;
	background: $main-background;
	@include 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, 0.2));
	#tag-line & {
		@include 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;
			@include 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 {
	@include clearfix;
	position: relative;
	margin: 36px -1px;
	padding: 35px col(7, 23) 35px col(1, 23);
	border: 1px solid $border-dark;
	background: $main-background;
	@include box-shadow(0 3px 0 -2px $main-background, 0 3px 0 -1px $border-dark, 0 4px 8px rgba($shadow-color, 0.2));
	h2 {
		margin: 0;
		font-size: 24px;
		font-weight: normal;
		color: $font-color;
		@include 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;
		@include text-shadow(none);
		&:before {
			@include 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;
			@include 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;
				@include box-shadow(0 0 0 3px $main-background, 0 0 0 4px $border-dark, 0 3px 4px 4px rgba($shadow-color, 0.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;
		@include 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: 0.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;
	@include box-sizing(content-box);
	margin: 24px -10px 36px;
	padding: 9px;
	border: 1px solid $border-dark;
	background: $main-background;
	@if $show-image-border {
		@include 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, 0.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;
	@include 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, 0.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;
	@include 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, 0.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 {
		@include 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 {
			@include 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, 0.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 {
		@include 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(0.5, 13) 10px;
	border: 1px solid $border-medium;
	background: $main-background;
	@include box-shadow(0 3px 0 -2px $main-background, 0 3px 0 -1px $border-medium, 0 6px 0 -3px $main-background);
	&:before {
		@include 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;
		@include 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, 0.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;
		@include border-radius(4px);
		color: inherit;
		background: $main-background;
		@include box-shadow(2px 4px 1px -2px rgba($shadow-color, 0.15) inset);
		&:focus {
			@include box-shadow(2px 4px 1px -2px rgba($shadow-color, 0.15) inset, 0 0 0 3px rgba($shadow-color, 0.075));
			outline: none;
		}
	}
	input {
		@include appearance(none);
		&[type="checkbox"], &[type="radio"], &[type="image"] {
			margin: 0;
			padding: 0;
			border: 0;
			@include box-shadow(none);
		}
		&[type="checkbox"], &[type="radio"] {
			+ label {
				display: inline;
			}
		}
		&[type="checkbox"] {
			@include appearance(checkbox);
		}
		&[type="radio"] {
			@include appearance(radio);
			background: none;
		}
	}
	input[type="file"] {
		height: auto;
		padding: 0;
		font-size: 14px;
		@include 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;
				@include box-shadow(0 0 0 4px rgba(#87aa4a, 0.3), 0 1px 2px rgba($shadow-color, 0.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;
			@include box-shadow(0 0 0 4px rgba(#e14e4e, 0.3), 0 1px 2px rgba($shadow-color, 0.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 {
	@include 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 {
	@include clearfix;
	clear: both;
	@include 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(0.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 {
				@include icon("", 16px, 1);
				top: 3px;
				color: inherit;
			}
			&:hover:before, &:focus:before {
				@include opacity(0.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 {
		@include icon("\e0a6");
	}
	> span {
		display: none;
	}
}

.back a:before, .previous a:before, .next a:after {
	@include 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;
				@include background-image(linear-gradient($main-background 1%, #eaeaea 100%));
				@include box-shadow(1px 0 0 0 rgba(255, 255, 255, 0.9) inset, -1px 0 0 0 rgba(255, 255, 255, 0.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;
			@include 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 {
			@include 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;
			@include border-radius(100%);
			background-color: $link-color;
			border: 2px solid $main-background;
			@include 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 {
				@include 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;
		@include background-image(linear-gradient(darken($main-background, 10%), darken($main-background, 15%)));
		@include box-shadow(1px 0 0 0 rgba($main-background, 0.8) inset, -1px 0 0 0 rgba($main-background, 0.8) inset, 0 2px 2px rgba($main-background, 0.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 {
					@include box-shadow(0 0 4px rgba($shadow-color, 0.3) inset);
				}
			}
		}
		&.current {
			text-align: center;
			&:before {
				@include 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%);
		@include background-image(linear-gradient(darken($main-background, 5%) 1%, darken($main-background, 10%) 100%));
		@include box-shadow(1px 0 0 0 rgba($main-background, 0.8) inset, -1px 0 0 0 rgba($main-background, 0.8) inset);
		&.empty, &:hover {
			color: $font-color;
			background: $main-background;
		}
		&.today {
			color: $font-color !important;
			background: mix(#7f7f7f, $main-background, 40%);
			@include box-shadow(0 2px 10px rgba($shadow-color, 0.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 {
	@include 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;
		@include box-shadow(0 3px 0 -2px $main-background, 0 3px 0 -1px $border-medium, 0 3px 5px rgba($shadow-color, 0.1));
		&:after {
			@include 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 {
				@include 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 {
			@include 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;
	@include 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, 0.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;
		@include 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 {
	@include 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 {
	@include 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 {
				@include 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);
		};
		@include 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 {
		@include border-radius(0);
	}
	#tag-line {
		padding: {
			right: col(1, 15);
			left: col(1, 15);
		};
		@include 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(0.5, 15);
				left: col(0.5, 15);
			};
		}
	}
	aside#sidebar #nav-sub {
		margin: 0 col(1, 15) 24px col(1, 15);
		@include 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;
				@include box-shadow(0 1px 2px rgba($shadow-color, 0.2));
			}
		}
	}
	.eightytwenty-sidebar-right #breadcrumbs, .eightytwenty-fullwidth #breadcrumbs {
		margin: {
			right: 0;
			left: 0;
		};
	}
	#wrapper > footer {
		@include 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 {
		@include 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)))