2756 lines
54 KiB
SCSS
2756 lines
54 KiB
SCSS
/*
|
|
* Main Stylesheet
|
|
*
|
|
* @copyright Copyright (c) 2012 rocksolidthemes.com
|
|
* @license https://rocksolidthemes.com/agb No free usage allowed
|
|
*/
|
|
|
|
/* ===========================================
|
|
* # Index: The structure of this stylesheet
|
|
*
|
|
* - Imports (SASS only)
|
|
* - Fonts
|
|
* - Basic settings (SASS only)
|
|
* - Colors (SASS only)
|
|
* - General styles
|
|
* - Button styles
|
|
* - Wrapper Elements
|
|
* - Elements in order of appearance in HTML
|
|
* - Content styles
|
|
* - Sidebar styles
|
|
* - Form styles
|
|
* - Content elements
|
|
* - Slider styles
|
|
* - Module styles (Search, FAQ, News, Events, Comments)
|
|
* - Footer styles
|
|
* - Media queries
|
|
* - Grid (design + production helper)
|
|
* ======================================== */
|
|
|
|
// ===========================================
|
|
// Imports (Mixins)
|
|
// ========================================
|
|
|
|
@import "mixins.scss";
|
|
|
|
/* ===========================================
|
|
* 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);
|
|
|
|
@font-face {
|
|
font-family: "Source Sans Pro";
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
src: url("../fonts/source-sans-pro-400.woff2") format("woff2");
|
|
}
|
|
|
|
|
|
@font-face {
|
|
font-family: "Source Sans Pro";
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
src: url("../fonts/source-sans-pro-600.woff2") format("woff2");
|
|
}
|
|
|
|
|
|
@font-face {
|
|
font-family: "Source Sans Pro";
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
src: url("../fonts/source-sans-pro-400italic.woff2") format("woff2");
|
|
}
|
|
|
|
|
|
@font-face {
|
|
font-family: "Source Sans Pro";
|
|
font-weight: 600;
|
|
font-style: italic;
|
|
src: url("../fonts/source-sans-pro-600italic.woff2") format("woff2");
|
|
}
|
|
|
|
|
|
// ===========================================
|
|
// Basic settings
|
|
// ========================================
|
|
|
|
$logo-height: 120px !default;
|
|
$logo-top: 42px !default;
|
|
$logo-left: 0 !default;
|
|
$logo-bottom: 30px !default;
|
|
$logo-background-color: white !default;
|
|
$logo-background-transparent: false !default;
|
|
|
|
// Widths
|
|
$max-width: 1122px !default;
|
|
|
|
// Font
|
|
$font-family: "Source Sans Pro", sans-serif !default;
|
|
$font-size: 18px !default;
|
|
$font-size-mobile: 15px !default;
|
|
$line-height: 1.5 !default;
|
|
|
|
$headline-size-1: 1.8em !default;
|
|
$headline-size-2: 1.5em !default;
|
|
$headline-size-3: 1.2em !default;
|
|
$headline-size-4: 1.1em !default;
|
|
$headline-size-5: 1em !default;
|
|
$headline-size-6: 0.9em !default;
|
|
|
|
$fluid-content-images: true !default;
|
|
$content-image-cols: 7 !default;
|
|
|
|
// responsive break points
|
|
$breakpoint-desktop: $max-width !default;
|
|
$breakpoint-tablet: 900px !default;
|
|
$breakpoint-mobile: 599px !default;
|
|
$breakpoint-mobile-portrait: 399px !default;
|
|
|
|
// ===========================================
|
|
// Colors
|
|
// ========================================
|
|
|
|
// Colorset
|
|
$white: white !default;
|
|
$black: black !default;
|
|
$light-black: #343434 !default;
|
|
$grey: #b1b1b1 !default;
|
|
$dark-grey: #636363 !default;
|
|
$light-grey: #e8e8e8 !default;
|
|
$medium-grey: #dedede !default;
|
|
$ultra-light-grey: #f6f6f6 !default;
|
|
$blue: #0788ca !default;
|
|
$dark-blue: #3d566e !default;
|
|
$green: #7eba28 !default;
|
|
$red: #de5959 !default;
|
|
$loud-red: #e52f2f !default;
|
|
|
|
// Content colors
|
|
$highlight-color: $blue !default;
|
|
$headline-color: $dark-blue !default;
|
|
$block-headline-color: $headline-color !default;
|
|
$highlight-headline-color: $dark-blue !default;
|
|
$font-color: $light-black !default;
|
|
$font-color-light: mix($grey, $dark-grey) !default;
|
|
$footer-color: mix($grey, $dark-grey) !default;
|
|
$confirmation: $green !default;
|
|
$information: $blue !default;
|
|
$warning: $loud-red !default;
|
|
$selection-color: $dark-blue !default;
|
|
|
|
// Links & Navigation
|
|
$link-color: $blue !default;
|
|
$nav-color: $dark-grey !default;
|
|
$nav-hover-color: $dark-blue !default;
|
|
$nav-active-color: $dark-grey !default;
|
|
|
|
// Border
|
|
$border-light: $light-grey !default;
|
|
$border-medium: $medium-grey !default;
|
|
|
|
// Shadows
|
|
$shadow-color: $black !default;
|
|
|
|
// Backgrounds
|
|
$boxed-layout: true !default;
|
|
$background-image: none !default;
|
|
$background-repeat: no-repeat !default;
|
|
$background-position: 50% 0 !default;
|
|
$background-attachment: scroll !default;
|
|
$background-size: auto !default;
|
|
$background-color: $white !default;
|
|
$main-background: $white !default;
|
|
$page-background: $white !default;
|
|
$nav-background-color: $ultra-light-grey !default;
|
|
|
|
// Buttons
|
|
$button-color: $white !default;
|
|
$button-background-color: $dark-blue !default;
|
|
|
|
/* ===========================================
|
|
* General styles
|
|
* ======================================== */
|
|
|
|
#{":root"} {
|
|
#{-(-safe-area-left)}: 0px;
|
|
#{-(-safe-area-right)}: 0px;
|
|
#{-(-safe-area-top)}: 0px;
|
|
#{-(-safe-area-bottom)}: 0px;
|
|
@supports (padding: calc(constant(safe-area-inset-left, 0px) / 1.5)) {
|
|
/* Non-standard iOS 11.1 syntax */
|
|
#{-(-safe-area-left)}: calc(constant(safe-area-inset-left, 0px) / 1.5);
|
|
#{-(-safe-area-right)}: calc(constant(safe-area-inset-right, 0px) / 1.5);
|
|
#{-(-safe-area-top)}: constant(safe-area-inset-top, 0px);
|
|
#{-(-safe-area-bottom)}: constant(safe-area-inset-bottom, 0px);
|
|
}
|
|
@supports (padding: calc(max(0px, env(safe-area-inset-left, 0px) - 14px))) and (padding: calc(max(0px, 1px))) {
|
|
/* W3C standard and iOS 11.2 syntax */
|
|
#{-(-safe-area-left)}: calc(max(0px, env(safe-area-inset-left, 0px) - 14px));
|
|
#{-(-safe-area-right)}: calc(max(0px, env(safe-area-inset-right, 0px) - 14px));
|
|
#{-(-safe-area-top)}: env(safe-area-inset-top, 0px);
|
|
#{-(-safe-area-bottom)}: env(safe-area-inset-bottom, 0px);
|
|
}
|
|
}
|
|
|
|
html {
|
|
position: relative;
|
|
@include box-sizing(border-box);
|
|
-webkit-tap-highlight-color: $link-color;
|
|
}
|
|
|
|
body {
|
|
font: #{$font-size}/#{$line-height} $font-family;
|
|
color: $font-color;
|
|
background: $background-color $background-image $background-position $background-repeat $background-attachment;
|
|
background-size: $background-size;
|
|
@include mediaquery(mobile) {
|
|
font-size: $font-size-mobile;
|
|
}
|
|
}
|
|
|
|
* {
|
|
@include box-sizing(inherit);
|
|
}
|
|
|
|
.rs-columns {
|
|
clear: both;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 100%;
|
|
> h1, > h2, > h3 {
|
|
@extend %block-headline;
|
|
}
|
|
}
|
|
|
|
.rs-column {
|
|
float: left;
|
|
width: 100%;
|
|
margin-top: col(1, 16);
|
|
margin-right: col(1, 16);
|
|
&.-large-first {
|
|
clear: left;
|
|
}
|
|
&.-large-last {
|
|
margin-right: -5px;
|
|
}
|
|
&.-large-first-row {
|
|
margin-top: 0;
|
|
}
|
|
@include column-classes(1 / 16, 6, large);
|
|
.opensauce-fullwidth & {
|
|
margin-top: col(1, 26);
|
|
margin-right: col(1, 26);
|
|
&.-large-last {
|
|
margin-right: -5px;
|
|
}
|
|
&.-large-first-row {
|
|
margin-top: 0;
|
|
}
|
|
@include column-classes(1 / 26, 6, large);
|
|
}
|
|
@include mediaquery(tablet) {
|
|
&, .opensauce-fullwidth & {
|
|
margin-top: col(1, 16);
|
|
margin-right: col(1, 16);
|
|
&.-large-first {
|
|
clear: none;
|
|
}
|
|
&.-large-last {
|
|
margin-right: col(1, 16);
|
|
}
|
|
&.-large-first-row {
|
|
margin-top: col(1, 16);
|
|
}
|
|
&.-medium-first {
|
|
clear: left;
|
|
}
|
|
&.-medium-last {
|
|
margin-right: -5px;
|
|
}
|
|
&.-medium-first-row {
|
|
margin-top: 0;
|
|
}
|
|
@include column-classes(1 / 16, 6, medium);
|
|
}
|
|
}
|
|
|
|
@include mediaquery(mobile) {
|
|
&, .opensauce-fullwidth & {
|
|
margin-right: col(1, 16);
|
|
&.-medium-first {
|
|
clear: none;
|
|
}
|
|
&.-medium-last {
|
|
margin-right: col(1, 16);
|
|
}
|
|
&.-medium-first-row {
|
|
margin-top: col(1, 16);
|
|
}
|
|
&.-small-first {
|
|
clear: left;
|
|
}
|
|
&.-small-last {
|
|
margin-right: -5px;
|
|
}
|
|
&.-small-first-row {
|
|
margin-top: 0;
|
|
}
|
|
@include column-classes(1 / 16, 6, small);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Resetting box model for moo_mediabox and j_colorbox */
|
|
#mbCenter, #colorbox {
|
|
@include box-sizing(content-box);
|
|
}
|
|
|
|
::selection {
|
|
background: $selection-color;
|
|
color: $main-background;
|
|
@include text-shadow(none !important);
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: $selection-color;
|
|
color: $main-background;
|
|
@include text-shadow(none !important);
|
|
}
|
|
|
|
button, input, select, textarea {
|
|
font-family: inherit;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
border: 1px solid $border-medium;
|
|
@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
|
|
th, td {
|
|
border: 1px solid $border-light;
|
|
}
|
|
th {
|
|
padding: em(6) em(10);
|
|
font-weight: 600;
|
|
text-align: left;
|
|
background: rgba($shadow-color, 0.02);
|
|
}
|
|
td {
|
|
padding: em(6) em(10);
|
|
}
|
|
}
|
|
|
|
strong, b {
|
|
font-weight: 600;
|
|
}
|
|
|
|
a {
|
|
color: $link-color;
|
|
text-decoration: none;
|
|
&:hover, &:focus {
|
|
text-decoration: underline;
|
|
}
|
|
&:hover, &:active {
|
|
outline: 0;
|
|
}
|
|
&.external-link:after {
|
|
@include icon("\e151", em(13));
|
|
margin-left: em(4);
|
|
}
|
|
}
|
|
|
|
/* Icon attribute */
|
|
*[data-icon] {
|
|
&:before {
|
|
@include icon(attr(data-icon));
|
|
margin-right: em(4);
|
|
}
|
|
&.after {
|
|
&:before {
|
|
content: none;
|
|
}
|
|
&:after {
|
|
@include icon(attr(data-icon));
|
|
margin-left: em(4);
|
|
}
|
|
}
|
|
}
|
|
|
|
.clear {
|
|
clear: both;
|
|
}
|
|
|
|
.invisible {
|
|
position: absolute;
|
|
height: 1px !important;
|
|
width: 1px !important;
|
|
clip: rect(0 0 0 0);
|
|
margin: -1px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
border: 0;
|
|
}
|
|
|
|
.syndication {
|
|
margin: em(12) 0 0 em(20);
|
|
float: right;
|
|
a {
|
|
margin-left: em(2);
|
|
}
|
|
}
|
|
|
|
.mime_icon {
|
|
margin-bottom: -0.25em;
|
|
}
|
|
|
|
.download-element {
|
|
padding-top: 0;
|
|
padding-right: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.ce_toplink, .toplink {
|
|
margin: em(24) 0;
|
|
a {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.ce_toplink > a:before, .toplink > a:before {
|
|
@include icon("\e00c");
|
|
margin-right: em(5);
|
|
}
|
|
|
|
/* Style for dlh_googlemaps (if you don't use the plugin, you might want to delete this) */
|
|
.dlh_googlemap {
|
|
@include box-sizing(content-box);
|
|
}
|
|
|
|
.main-content, .sidebar {
|
|
.dlh_googlemap {
|
|
/* Setting the maps max-width to 100% is best practice, since it becomes fluid that way */
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.main-content .dlh_googlemap img {
|
|
max-width: none;
|
|
}
|
|
|
|
hr {
|
|
clear: both;
|
|
height: 1px;
|
|
overflow: visible;
|
|
margin: em(24) 0;
|
|
border: 0;
|
|
background: $border-medium;
|
|
}
|
|
|
|
.confirmation {
|
|
color: $confirmation;
|
|
}
|
|
|
|
.information {
|
|
color: $information;
|
|
}
|
|
|
|
.warning {
|
|
color: $warning;
|
|
}
|
|
|
|
p, div, span {
|
|
&.confirmation, &.information, &.warning {
|
|
position: relative;
|
|
display: block;
|
|
margin: em(27) 0;
|
|
padding: em(50) col(1, 16) em(20);
|
|
border: 1px solid $border-medium;
|
|
@include border-radius(1.5px);
|
|
@if lightness($main-background) < 50% {
|
|
color: lighten($confirmation, 25%);
|
|
}
|
|
@else {
|
|
color: darken($confirmation, 25%);
|
|
}
|
|
background: $main-background;
|
|
@include background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)));
|
|
@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
|
|
&:before {
|
|
@include icon("\e044", em(14));
|
|
position: absolute;
|
|
top: -1px;
|
|
right: -1px;
|
|
left: -1px;
|
|
padding: em(8, 14) em(20, 14);
|
|
color: $main-background;
|
|
text-align: right;
|
|
background: $confirmation;
|
|
}
|
|
}
|
|
&.information {
|
|
@if lightness($main-background) < 50% {
|
|
color: lighten($information, 25%);
|
|
}
|
|
@else {
|
|
color: darken($information, 25%);
|
|
}
|
|
&:before {
|
|
content: "\e0a6";
|
|
background: $information;
|
|
}
|
|
}
|
|
&.warning {
|
|
@if lightness($main-background) < 50% {
|
|
color: lighten($warning, 25%);
|
|
}
|
|
@else {
|
|
color: darken($warning, 25%);
|
|
}
|
|
&:before {
|
|
content: "\e144";
|
|
background: $warning;
|
|
}
|
|
}
|
|
}
|
|
|
|
p.drop-cap:first-letter, span.drop-cap {
|
|
float: left;
|
|
margin: em(5, 60) em(6, 60) em(-10, 60) em(-3, 60);
|
|
font-size: em(60);
|
|
font-weight: 600;
|
|
line-height: 0.7;
|
|
color: $headline-color;
|
|
}
|
|
|
|
p.drop-cap:first-letter {
|
|
/* IE8 and IE9 calculate em's from the parent element */
|
|
margin: em(5) em(6) em(-10) em(-3) unquote("\0/");
|
|
}
|
|
|
|
code {
|
|
padding: em(2, 14) em(5, 14);
|
|
font-family: "Lucida Console", monospace;
|
|
font-size: em(14);
|
|
@include line-height(19, 14);
|
|
background-color: $border-light;
|
|
@include border-radius(3px);
|
|
}
|
|
|
|
pre {
|
|
margin: em(24, 14) 0;
|
|
padding: 0 em(6, 14);
|
|
display: block;
|
|
overflow: auto;
|
|
font-family: "Lucida Console", monospace;
|
|
font-size: em(14);
|
|
@include line-height(24, 14);
|
|
background: $border-light;
|
|
.hljs,
|
|
code {
|
|
font-size: em(14, 14);
|
|
padding: 0;
|
|
line-height: inherit;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
* Button styles
|
|
* ======================================== */
|
|
|
|
button, .button, input[type="submit"], input[type="reset"], input[type="button"] {
|
|
position: relative;
|
|
@include appearance(none);
|
|
display: inline-block;
|
|
padding: em(10) em(27);
|
|
border: 1px solid;
|
|
border-color: darken($button-background-color, 5%) darken($button-background-color, 10%) darken($button-background-color, 15%);
|
|
@include border-radius(1.5px);
|
|
color: $button-color;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
@include text-shadow(1px 1px 0 darken($button-background-color, 10%));
|
|
background: $button-background-color;
|
|
@include background(linear-gradient(lighten($button-background-color, 3%), darken($button-background-color, 3%)));
|
|
@include box-shadow(0 0 8px rgba($shadow-color, 0.1), inset 1px 1px tint($button-background-color, 30%), inset -1px 0 tint($button-background-color, 30%));
|
|
&:hover, &:focus {
|
|
border-color: darken($button-background-color, 10%) darken($button-background-color, 15%) darken($button-background-color, 20%);
|
|
@include background-image(linear-gradient(lighten($button-background-color, 6%), darken($button-background-color, 6%)));
|
|
@include box-shadow(0 0 8px rgba($shadow-color, 0.2), inset 1px 1px tint($button-background-color, 30%), inset -1px 0 tint($button-background-color, 30%));
|
|
}
|
|
&:active {
|
|
@include background-image(linear-gradient(lighten($button-background-color, 1%), darken($button-background-color, 1%)));
|
|
@include box-shadow(0 0 8px rgba($shadow-color, 0), inset 1px 1px tint($button-background-color, 30%), inset -1px 0 tint($button-background-color, 30%));
|
|
}
|
|
#colorbox & {
|
|
/* Fix colorbox close button */
|
|
@include box-shadow(none);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
* Wrapper Elements
|
|
* ======================================== */
|
|
|
|
.page {
|
|
@include clearfix;
|
|
position: relative;
|
|
max-width: $max-width;
|
|
margin: 0 auto;
|
|
padding-top: var(-(-safe-area-top));
|
|
padding-bottom: var(-(-safe-area-bottom));
|
|
background: $page-background;
|
|
@if $boxed-layout {
|
|
border: solid $border-medium;
|
|
border-width: 0 1px;
|
|
@include box-shadow(0 0 5px rgba($shadow-color, 0.2));
|
|
}
|
|
@include mediaquery(desktop) {
|
|
padding-right: var(-(-safe-area-right));
|
|
padding-left: var(-(-safe-area-left));
|
|
@if $boxed-layout {
|
|
border: 0;
|
|
@include box-shadow(none);
|
|
}
|
|
}
|
|
|
|
.opensauce-not-boxed & {
|
|
@if $boxed-layout {
|
|
padding-right: 1px;
|
|
padding-left: 1px;
|
|
border: 0;
|
|
@include box-shadow(none);
|
|
}
|
|
@include mediaquery(desktop) {
|
|
@if $boxed-layout {
|
|
padding-right: var(-(-safe-area-right));
|
|
padding-left: var(-(-safe-area-left));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
* Elements in order of appearance in HTML
|
|
* ======================================== */
|
|
|
|
.page-header {
|
|
position: relative;
|
|
margin: 0 col(1, 28);
|
|
@include mediaquery(tablet) {
|
|
margin-right: col(1, 18);
|
|
margin-left: col(1, 18);
|
|
}
|
|
|
|
@include mediaquery(mobile) {
|
|
@include clearfix;
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
position: absolute;
|
|
top: -3px;
|
|
left: -2px;
|
|
z-index: 99;
|
|
margin: $logo-top 0 $logo-bottom $logo-left;
|
|
padding: 2px 10px 10px 2px;
|
|
font-size: inherit;
|
|
@if not $logo-background-transparent {
|
|
background: $logo-background-color;
|
|
}
|
|
@include border-radius(3px);
|
|
@include mediaquery(mobile) {
|
|
position: static;
|
|
margin-left: 0;
|
|
margin-bottom: 12px;
|
|
padding: 0;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
}
|
|
img {
|
|
display: block;
|
|
width: auto;
|
|
height: $logo-height;
|
|
@include mediaquery(mobile) {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-navigation {
|
|
position: absolute;
|
|
top: em(14, 12);
|
|
right: 0;
|
|
z-index: 1;
|
|
font-size: em(12);
|
|
letter-spacing: em(1, 12);
|
|
color: $link-color;
|
|
text-transform: uppercase;
|
|
@include mediaquery(mobile) {
|
|
position: static;
|
|
text-align: center;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: inline;
|
|
}
|
|
li {
|
|
display: inline;
|
|
&:before {
|
|
content: " • ";
|
|
margin: 0 em(2, 12);
|
|
}
|
|
&:first-child:before {
|
|
content: none;
|
|
}
|
|
}
|
|
a {
|
|
color: inherit;
|
|
&:hover, &:focus {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tag-line {
|
|
padding-bottom: em(10);
|
|
.logo ~ & {
|
|
min-height: $logo-height + $logo-top + $logo-bottom;
|
|
@include mediaquery(mobile) {
|
|
min-height: 0;
|
|
}
|
|
}
|
|
.ce_text {
|
|
padding: em(65, 16) 0 em(30, 16) col(9, 26);
|
|
font-size: em(16);
|
|
color: $font-color-light;
|
|
@include mediaquery(mobile) {
|
|
padding: em(16, 16) 0;
|
|
text-align: center;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
blockquote {
|
|
margin: 0;
|
|
font-size: em(28, 16);
|
|
color: $headline-color;
|
|
}
|
|
}
|
|
.image_container {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: auto;
|
|
border: 0;
|
|
@include box-shadow(none);
|
|
background: none;
|
|
}
|
|
.ce_image {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
.ce_image img, .rsts-main {
|
|
clear: both;
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
margin: em(40) 0 em(20);
|
|
@include mediaquery(mobile) {
|
|
margin: em(20, 15) 0 em(15, 15);
|
|
}
|
|
}
|
|
.rsts-main {
|
|
float: left;
|
|
@include mediaquery(mobile) {
|
|
float: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-navigation-wrapper {
|
|
position: relative;
|
|
clear: both;
|
|
border: 1px solid $border-medium;
|
|
background: $nav-background-color;
|
|
@include background(linear-gradient(lighten($nav-background-color, 2%), darken($nav-background-color, 2%)));
|
|
@include box-shadow(0 1px 3px rgba($shadow-color, 0.1), inset 0 0 0 1px rgba($main-background, 0.5));
|
|
}
|
|
|
|
.main-navigation {
|
|
/* clearfix */
|
|
overflow: hidden;
|
|
margin-right: em(64);
|
|
font-size: em(16);
|
|
font-weight: 600;
|
|
color: $nav-color;
|
|
@include mediaquery(tablet) {
|
|
margin-right: 0;
|
|
font-size: em(15);
|
|
}
|
|
|
|
@include mediaquery(mobile) {
|
|
display: none;
|
|
}
|
|
|
|
ul, li {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: inline;
|
|
}
|
|
a, li > strong, li > span {
|
|
float: left;
|
|
padding: em(12, 16) em(22, 16);
|
|
border-left: 1px solid $border-medium;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
@include box-shadow(inset 1px 0 rgba($main-background, 0.5));
|
|
&.trail, &.active {
|
|
color: $nav-active-color;
|
|
background: lighten($nav-background-color, 3%);
|
|
}
|
|
&.home {
|
|
overflow: hidden;
|
|
text-indent: -99em;
|
|
line-height: 0;
|
|
&:after {
|
|
@include icon("\2302", em(12, 16));
|
|
@include line-height(24, 12);
|
|
display: block;
|
|
}
|
|
&.trail, &.active {
|
|
color: inherit;
|
|
background: none;
|
|
}
|
|
}
|
|
}
|
|
a:hover, a:focus {
|
|
color: $nav-hover-color;
|
|
background: darken($nav-background-color, 3%);
|
|
}
|
|
li:first-child {
|
|
> a, > strong, > span {
|
|
border-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sub-navigation {
|
|
/* clearfix */
|
|
overflow: hidden;
|
|
padding-bottom: em(10, 16);
|
|
border: 1px solid $border-medium;
|
|
border-top: 0;
|
|
@include border-radius(0 0 4px 4px);
|
|
font-size: em(16);
|
|
color: $nav-color;
|
|
@include box-shadow(0 1px 3px rgba($shadow-color, 0.1));
|
|
@include mediaquery(tablet) {
|
|
font-size: em(14);
|
|
}
|
|
|
|
@include mediaquery(mobile) {
|
|
display: none;
|
|
}
|
|
|
|
ul, li {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: inline;
|
|
}
|
|
a, li > strong, li > span {
|
|
float: left;
|
|
margin: 0 em(-10, 16) em(-10, 16) em(10, 16);
|
|
padding: em(12, 16) em(10, 16);
|
|
color: inherit;
|
|
@include box-shadow(inset -1px 0 rgba($main-background, 0.5));
|
|
&.trail, &.active {
|
|
font-weight: 600;
|
|
color: $nav-active-color;
|
|
background: lighten($nav-background-color, 2%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-navigation-mobile {
|
|
/* Hide mobile navigation <select> by default */
|
|
display: none;
|
|
@include mediaquery(mobile) {
|
|
display: block;
|
|
width: col(14, 16);
|
|
margin: em(12, 15) 0 em(12, 15) col(1, 16);
|
|
}
|
|
}
|
|
|
|
.main-navigation-search {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-left: 1px solid $border-medium;
|
|
background: $nav-background-color;
|
|
@include background(linear-gradient(lighten($nav-background-color, 2%), darken($nav-background-color, 2%)));
|
|
@include box-shadow(inset 1px 0 rgba($main-background, 0.5), inset 0 0 0 1px rgba($main-background, 0.5));
|
|
@include mediaquery(tablet) {
|
|
position: relative;
|
|
height: em(49);
|
|
border-bottom: 1px solid $border-medium;
|
|
border-left: 0;
|
|
}
|
|
|
|
input {
|
|
float: right;
|
|
width: em(164, 16);
|
|
margin: em(9, 16) em(64, 16) 0 em(-165, 16);
|
|
padding-top: em(4, 16);
|
|
padding-bottom: em(3, 16);
|
|
border: 1px solid $border-medium;
|
|
font-size: em(16);
|
|
@include box-shadow(none);
|
|
@include transition(margin-left 0.2s ease-out);
|
|
}
|
|
&:hover input, input:hover, input:focus {
|
|
margin-left: em(22, 16);
|
|
}
|
|
button {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: em(64);
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: em(14) 0;
|
|
border: 0;
|
|
color: $nav-color;
|
|
text-align: left;
|
|
text-indent: -99em;
|
|
@include text-shadow(none);
|
|
line-height: 0;
|
|
background: none;
|
|
@include box-shadow(none);
|
|
&:after {
|
|
@include icon("\e0cb", em(20));
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
&:hover, &:focus {
|
|
color: $nav-hover-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-wrapper {
|
|
@include clearfix;
|
|
}
|
|
|
|
/* ===========================================
|
|
* Content styles
|
|
* ======================================== */
|
|
|
|
.main-content {
|
|
float: left;
|
|
width: col(16, 28);
|
|
margin: em(12) 0 0 col(1, 28);
|
|
@include mediaquery(tablet) {
|
|
float: none;
|
|
width: auto;
|
|
margin-right: col(1, 18);
|
|
margin-left: col(1, 18);
|
|
}
|
|
|
|
.opensauce-fullwidth & {
|
|
float: none;
|
|
width: auto;
|
|
margin-left: col(1, 28);
|
|
margin-right: col(1, 28);
|
|
@include mediaquery(tablet) {
|
|
margin-right: col(1, 18);
|
|
margin-left: col(1, 18);
|
|
}
|
|
}
|
|
.opensauce-sidebar-left & {
|
|
float: right;
|
|
margin-right: col(1, 28);
|
|
margin-left: 0;
|
|
@include mediaquery(tablet) {
|
|
float: none;
|
|
margin-right: col(1, 18);
|
|
margin-left: col(1, 18);
|
|
}
|
|
}
|
|
p, ul, ol, table, form, fieldset {
|
|
margin-top: em(24);
|
|
margin-bottom: em(24);
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-top: 0.75em;
|
|
margin-bottom: 0.3em;
|
|
font-weight: normal;
|
|
line-height: 1.3;
|
|
}
|
|
h1 {
|
|
font-size: $headline-size-1;
|
|
font-weight: bold;
|
|
color: $headline-color;
|
|
}
|
|
h2 {
|
|
font-size: $headline-size-2;
|
|
}
|
|
h1 + h2 {
|
|
margin-top: 0.3em;
|
|
}
|
|
h3 {
|
|
font-size: $headline-size-3;
|
|
}
|
|
h4 {
|
|
font-size: $headline-size-4;
|
|
}
|
|
h5 {
|
|
font-size: $headline-size-5;
|
|
}
|
|
h6 {
|
|
font-size: $headline-size-6;
|
|
letter-spacing: em(1, 16);
|
|
color: $font-color-light;
|
|
text-transform: uppercase;
|
|
}
|
|
ul, ol {
|
|
padding-left: em(16);
|
|
li[data-icon] {
|
|
list-style: none;
|
|
&:before {
|
|
left: em(-21);
|
|
width: 0;
|
|
}
|
|
}
|
|
}
|
|
ul {
|
|
list-style: disc;
|
|
ul {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
ol {
|
|
padding-left: em(20);
|
|
list-style: decimal;
|
|
ol, ul {
|
|
margin-top: 0;
|
|
}
|
|
ol {
|
|
padding-left: em(24);
|
|
list-style: upper-alpha;
|
|
ol {
|
|
list-style: lower-roman;
|
|
ol {
|
|
list-style: lower-alpha;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
blockquote {
|
|
position: relative;
|
|
margin: em(24) 0 em(24) col(1.5, 16);
|
|
color: $headline-color;
|
|
@include mediaquery(mobile) {
|
|
margin-left: col(2.5, 16);
|
|
}
|
|
|
|
small, i, em {
|
|
color: $font-color-light;
|
|
}
|
|
&:before {
|
|
content: "\201c";
|
|
position: absolute;
|
|
top: 0;
|
|
left: col(-1.5, 16);
|
|
margin: em(36, 84) 0 0 em(-4, 84);
|
|
font-size: em(84);
|
|
font-weight: bold;
|
|
line-height: 0;
|
|
color: $highlight-color;
|
|
@include mediaquery(mobile) {
|
|
left: col(-2.5, 16);
|
|
margin-left: em(-8, 84);
|
|
}
|
|
}
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
.rsts-main {
|
|
margin: 24px 0;
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
* Sidebar styles
|
|
* ======================================== */
|
|
|
|
.sidebar {
|
|
position: relative;
|
|
float: right;
|
|
width: col(9, 28);
|
|
margin: em(40) col(1, 28) 0 0;
|
|
@include mediaquery(tablet) {
|
|
float: none;
|
|
clear: both;
|
|
width: auto;
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
@include mediaquery(mobile) {
|
|
margin-right: col(1, 18);
|
|
margin-left: col(1, 18);
|
|
}
|
|
|
|
.opensauce-sidebar-left & {
|
|
float: left;
|
|
margin-right: 0;
|
|
margin-left: col(1, 28);
|
|
@include mediaquery(tablet) {
|
|
float: none;
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
@include mediaquery(mobile) {
|
|
margin-right: col(1, 18);
|
|
margin-left: col(1, 18);
|
|
}
|
|
}
|
|
h1, h2, h3 {
|
|
margin: em(28, 14) 0 0;
|
|
padding: 0 0 em(6, 14);
|
|
border-bottom: 1px solid $border-light;
|
|
font-size: em(14);
|
|
font-weight: 600;
|
|
letter-spacing: em(1, 14);
|
|
color: $font-color-light;
|
|
text-transform: uppercase;
|
|
}
|
|
p, ul, ol, table, blockquote, fieldset, form {
|
|
margin: em(16) 0;
|
|
}
|
|
ul, ol {
|
|
padding: 0;
|
|
list-style-type: none;
|
|
}
|
|
> .block {
|
|
margin: em(20) 0;
|
|
@include mediaquery(tablet) {
|
|
float: left;
|
|
width: col(7.5, 18);
|
|
margin-left: col(1, 18);
|
|
}
|
|
|
|
@include mediaquery(mobile) {
|
|
float: none;
|
|
width: auto;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
.ce_youtube-wrapper, .ce_vimeo-wrapper {
|
|
margin: em(12) 0;
|
|
}
|
|
}
|
|
|
|
.sidebar-news {
|
|
.layout_latest {
|
|
position: relative;
|
|
margin: em(24) 0;
|
|
padding-left: em(50);
|
|
&:before {
|
|
@include icon("\e06b", em(16));
|
|
position: absolute;
|
|
top: em(5, 16);
|
|
left: 0;
|
|
padding: em(8, 16);
|
|
color: $main-background;
|
|
background: $link-color;
|
|
}
|
|
}
|
|
.image_container {
|
|
display: none;
|
|
}
|
|
.info {
|
|
margin: 0;
|
|
font-size: em(14);
|
|
color: $font-color-light;
|
|
}
|
|
h2 {
|
|
margin: 0 0 em(4, 16);
|
|
padding: 0;
|
|
border: 0;
|
|
font-size: em(16);
|
|
@include line-height(21, 16);
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
}
|
|
.ce_text,
|
|
.teaser {
|
|
font-size: em(14);
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
.more {
|
|
margin: em(4, 14) 0;
|
|
font-size: em(14);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
* Form styles
|
|
* ======================================== */
|
|
|
|
form {
|
|
h1, h2, h3, h4, h5, h6 {
|
|
clear: both;
|
|
}
|
|
.widget {
|
|
position: relative;
|
|
clear: both;
|
|
}
|
|
p b.error, p.error {
|
|
display: block;
|
|
margin: 0;
|
|
color: $warning;
|
|
}
|
|
}
|
|
|
|
input, textarea {
|
|
padding: em(9) em(10) em(8);
|
|
line-height: normal;
|
|
border: 1px solid $border-medium;
|
|
border-bottom-color: darken($border-medium, 4%);
|
|
@include border-radius(1.5px);
|
|
color: inherit;
|
|
background: shade($main-background, 1%);
|
|
@include box-shadow(0 0 6px rgba($shadow-color, 0.1), inset 0 1px $main-background);
|
|
.valid & {
|
|
border-color: $green;
|
|
}
|
|
.invalid &, &.error {
|
|
border-color: $warning;
|
|
}
|
|
&::-webkit-input-placeholder {
|
|
/* multiple rules, because user agents are required to ignore a rule with an unknown selector */
|
|
color: $grey;
|
|
}
|
|
&:-moz-placeholder {
|
|
color: $grey;
|
|
}
|
|
&:-ms-input-placeholder {
|
|
color: $grey;
|
|
}
|
|
&::placeholder {
|
|
color: $grey;
|
|
}
|
|
&:hover {
|
|
border-color: darken($border-medium, 4%) darken($border-medium, 4%) darken($border-medium, 9%);
|
|
@include box-shadow(0 0 6px rgba($shadow-color, 0.05), inset 0 1px $main-background);
|
|
}
|
|
&:focus {
|
|
border-color: $highlight-color $highlight-color darken($highlight-color, 4%);
|
|
}
|
|
}
|
|
|
|
input {
|
|
&[type="text"], &[type="search"], &[type="email"] {
|
|
outline: none;
|
|
}
|
|
&[type="checkbox"], &[type="radio"], &[type="image"] {
|
|
width: auto !important;
|
|
height: auto !important;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
@include box-shadow(none);
|
|
}
|
|
&[type="checkbox"] {
|
|
vertical-align: middle;
|
|
@include appearance(checkbox);
|
|
}
|
|
&[type="radio"] {
|
|
vertical-align: middle;
|
|
@include appearance(radio);
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
input[type="file"] {
|
|
padding: 0;
|
|
height: auto;
|
|
}
|
|
|
|
button, input[type="submit"] {
|
|
margin-top: em(18);
|
|
}
|
|
|
|
textarea {
|
|
height: 200px;
|
|
resize: vertical;
|
|
line-height: 1.5;
|
|
outline: none;
|
|
}
|
|
|
|
fieldset {
|
|
margin: em(18) 0;
|
|
border: 1px solid $border-medium;
|
|
legend {
|
|
padding: 0 em(5);
|
|
}
|
|
+ br {
|
|
/* Kill <br> that Contao injects */
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.main-content {
|
|
form {
|
|
.widget {
|
|
margin-top: em(18);
|
|
margin-bottom: em(18);
|
|
}
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: em(1, 16);
|
|
font-size: em(16);
|
|
.mandatory {
|
|
margin-left: em(2);
|
|
color: $highlight-color;
|
|
}
|
|
}
|
|
input[type="checkbox"] + label {
|
|
display: inline;
|
|
}
|
|
fieldset {
|
|
p {
|
|
margin: 0;
|
|
}
|
|
p b.error, p.error {
|
|
float: none;
|
|
width: auto;
|
|
margin: em(8, 16) 0;
|
|
}
|
|
label {
|
|
display: inline;
|
|
margin: 0;
|
|
&:after {
|
|
/* add line break after label */
|
|
content: "\A";
|
|
white-space: pre;
|
|
}
|
|
}
|
|
}
|
|
input, textarea, select, fieldset {
|
|
width: col(12, 16);
|
|
@include mediaquery(mobile) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
input[type="submit"] {
|
|
width: auto;
|
|
@include mediaquery(mobile) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.explanation, .captcha_text {
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.explanation {
|
|
font-size: em(14);
|
|
margin: em(-12, 14) 0 em(24, 14);
|
|
color: $font-color-light;
|
|
}
|
|
|
|
.captcha_text {
|
|
display: block;
|
|
label & {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
.sidebar form {
|
|
input, textarea, select, fieldset, button {
|
|
width: 100%;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: em(1, 16);
|
|
font-size: em(16);
|
|
}
|
|
input {
|
|
&[type="checkbox"], &[type="radio"], &[type="image"] {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
* Content elements
|
|
* ======================================== */
|
|
|
|
%block-headline {
|
|
margin: 0 0 em(16, 18);
|
|
padding-bottom: em(6, 18);
|
|
border-bottom: 1px solid $border-light;
|
|
font-size: em(18);
|
|
font-weight: normal;
|
|
letter-spacing: em(1, 18);
|
|
color: $block-headline-color;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.teaser-boxes {
|
|
margin: em(40) 0;
|
|
/* clearfix */
|
|
overflow: hidden;
|
|
> h1, > h2, > h3 {
|
|
@extend %block-headline;
|
|
}
|
|
}
|
|
|
|
.teaser-boxes-item {
|
|
font-size: em(16);
|
|
color: $font-color-light;
|
|
&:hover, &:focus {
|
|
text-decoration: none;
|
|
}
|
|
h3 {
|
|
margin: 0;
|
|
font-size: em(21, 16);
|
|
color: $highlight-headline-color;
|
|
}
|
|
p {
|
|
margin: em(8, 16) 0 0;
|
|
}
|
|
}
|
|
|
|
.teaser-boxes-item-image {
|
|
position: relative;
|
|
margin: 0 0 em(16, 16);
|
|
a:hover &, a:focus & {
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba($main-background, 0.3);
|
|
}
|
|
&:after {
|
|
@include icon("\e019", em(8, 16));
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
padding: em(6, 8);
|
|
color: $main-background;
|
|
text-align: center;
|
|
background: $link-color;
|
|
}
|
|
}
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.icon-boxes {
|
|
@extend .teaser-boxes;
|
|
}
|
|
|
|
.icon-boxes-item {
|
|
font-size: em(16);
|
|
color: $font-color-light;
|
|
&:hover, &:focus {
|
|
text-decoration: none;
|
|
}
|
|
&[data-icon]:before {
|
|
margin: 0 0 em(12, 24) 0;
|
|
padding: em(12, 24);
|
|
border: 1px solid $border-medium;
|
|
font-size: em(24, 16);
|
|
color: $highlight-color;
|
|
@include background(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)));
|
|
@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
|
|
@if lightness($page-background) < lightness(#474747) {
|
|
@include background(linear-gradient(rgba($shadow-color, 0.6), rgba($shadow-color, 0.8)));
|
|
@include box-shadow(none);
|
|
}
|
|
}
|
|
h3 {
|
|
margin: 0;
|
|
font-size: em(21, 16);
|
|
color: $highlight-headline-color;
|
|
}
|
|
p {
|
|
margin: em(8, 16) 0 0;
|
|
}
|
|
}
|
|
|
|
.icon-boxes-item-link {
|
|
font-size: em(14, 16);
|
|
letter-spacing: em(1, 14);
|
|
color: $link-color;
|
|
text-transform: uppercase;
|
|
a:hover &, a:focus & {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.news-boxes {
|
|
@extend .teaser-boxes;
|
|
}
|
|
|
|
.news-boxes-item {
|
|
font-size: em(14);
|
|
color: $font-color-light;
|
|
h3 {
|
|
margin: 0;
|
|
font-size: em(24, 14);
|
|
@include line-height(32, 24);
|
|
font-weight: normal;
|
|
a {
|
|
color: $highlight-headline-color;
|
|
}
|
|
}
|
|
p {
|
|
margin: em(4, 14) 0 0;
|
|
}
|
|
.news-boxes-item-info {
|
|
margin: 0;
|
|
letter-spacing: em(1, 14);
|
|
text-transform: uppercase;
|
|
}
|
|
.news-boxes-item-more {
|
|
margin-top: em(8, 14);
|
|
letter-spacing: em(1, 14);
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
.testimonial {
|
|
margin: em(27, 24) 0;
|
|
font-size: em(24);
|
|
@include mediaquery(mobile) {
|
|
font-size: em(15, 15);
|
|
}
|
|
|
|
.sidebar & {
|
|
font-size: em(18);
|
|
@include mediaquery(mobile) {
|
|
font-size: em(15, 15);
|
|
}
|
|
}
|
|
.rsts-main & {
|
|
margin: 0;
|
|
}
|
|
p {
|
|
margin: em(12, 24) 0;
|
|
color: $headline-color;
|
|
}
|
|
}
|
|
|
|
.testimonial-author {
|
|
padding-right: em(50, 18);
|
|
font-size: em(18, 24);
|
|
color: $font-color-light;
|
|
.sidebar & {
|
|
padding-right: em(50, 14);
|
|
font-size: em(14, 18);
|
|
}
|
|
@include mediaquery(mobile) {
|
|
padding-right: em(50, 14);
|
|
font-size: em(14, 15);
|
|
}
|
|
|
|
img {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: auto;
|
|
height: em(40, 18);
|
|
margin: 0 em(6, 18) 0 0;
|
|
}
|
|
small {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
|
|
.newsletter-box {
|
|
padding: em(24) col(1, 16);
|
|
border: 1px solid darken($highlight-color, 10%);
|
|
@include border-radius(1.5px);
|
|
color: $main-background;
|
|
background: $highlight-color;
|
|
@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
|
|
.sidebar & {
|
|
padding-right: col(1, 9);
|
|
padding-left: col(1, 9);
|
|
@include mediaquery(tablet) {
|
|
padding-right: col(1, 18);
|
|
padding-left: col(1, 18);
|
|
}
|
|
|
|
@include mediaquery(mobile) {
|
|
padding-right: col(1, 16);
|
|
padding-left: col(1, 16);
|
|
}
|
|
}
|
|
.sidebar .block + & {
|
|
margin-top: em(32);
|
|
}
|
|
&:before {
|
|
content: "";
|
|
float: right;
|
|
width: em(96);
|
|
height: em(100);
|
|
margin-left: em(14);
|
|
background: image-url("newsletter-bg.png") 50% 50% no-repeat;
|
|
background-size: 100% 100%;
|
|
@include hidpi {
|
|
background-image: image-url("newsletter-bg-x2.png");
|
|
}
|
|
}
|
|
h1, h2, h3, h4 {
|
|
padding: 0;
|
|
border: 0;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
}
|
|
h1, h2, h3 {
|
|
margin: em(-4, 24) 0 0;
|
|
font-size: em(24);
|
|
font-weight: normal;
|
|
@include line-height(27, 24);
|
|
color: inherit;
|
|
}
|
|
h4 {
|
|
margin: 0;
|
|
font-size: em(18);
|
|
font-weight: normal;
|
|
color: mix($main-background, $highlight-color, 70%);
|
|
}
|
|
form {
|
|
margin: 0;
|
|
}
|
|
.formbody {
|
|
position: relative;
|
|
width: em(330);
|
|
max-width: 100%;
|
|
margin: em(12) 0 0;
|
|
.widget {
|
|
clear: none;
|
|
margin: 0;
|
|
}
|
|
input {
|
|
display: block;
|
|
width: 100%;
|
|
padding-right: em(48);
|
|
border-color: darken($button-background-color, 10%);
|
|
color: $font-color;
|
|
}
|
|
button {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: auto;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
padding: em(13);
|
|
@include border-radius(0 1.5px 1.5px 0);
|
|
line-height: 0;
|
|
text-align: left;
|
|
text-indent: -99em;
|
|
&:after {
|
|
@include icon("\e0ce", em(14));
|
|
display: block;
|
|
}
|
|
}
|
|
.error {
|
|
@if lightness($highlight-color) < 40% {
|
|
color: lighten($warning, 20%);
|
|
}
|
|
@else {
|
|
color: darken($warning, 20%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-links {
|
|
font-size: em(16);
|
|
h1, h2, h3 {
|
|
font-size: em(14, 16);
|
|
font-weight: 600;
|
|
letter-spacing: em(1, 14);
|
|
color: $font-color-light;
|
|
text-transform: uppercase;
|
|
}
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
li {
|
|
list-style: none;
|
|
display: inline;
|
|
}
|
|
a {
|
|
display: block;
|
|
padding: em(4, 16) 0;
|
|
border-bottom: 1px solid $border-medium;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
&:before {
|
|
@include icon("\e019", em(6, 16));
|
|
top: em(-2, 6);
|
|
margin-right: em(10, 6);
|
|
padding: em(4, 6);
|
|
border: 1px solid $border-medium;
|
|
@include border-radius(1.5px);
|
|
color: $link-color;
|
|
}
|
|
&[data-icon]:before {
|
|
content: attr(data-icon);
|
|
top: 0;
|
|
border: 0;
|
|
margin-right: em(10, 15);
|
|
padding: 0;
|
|
font-size: em(15, 16);
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-links-label {
|
|
color: $font-color;
|
|
a:hover &, a:focus & {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.author-box {
|
|
h1, h2, h3 {
|
|
margin: em(28, 14) 0 em(14, 14);
|
|
padding: 0 0 em(6, 14);
|
|
border-bottom: 1px solid $border-light;
|
|
font-size: em(14);
|
|
font-weight: 600;
|
|
letter-spacing: em(1, 14);
|
|
color: $font-color-light;
|
|
text-transform: uppercase;
|
|
}
|
|
img {
|
|
float: right;
|
|
margin: 0 0 em(10) em(18);
|
|
}
|
|
p {
|
|
margin: em(14, 16) 0;
|
|
font-size: em(16);
|
|
}
|
|
}
|
|
|
|
.author-box-links {
|
|
margin: em(14, 14) 0;
|
|
padding: 0;
|
|
font-size: em(14);
|
|
letter-spacing: em(1, 14);
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
li {
|
|
display: inline;
|
|
list-style: none;
|
|
}
|
|
a {
|
|
display: inline-block;
|
|
margin: em(5, 14) em(3, 14) em(4, 14);
|
|
padding: em(8, 14) em(20, 14);
|
|
border: 1px solid $border-medium;
|
|
@include border-radius(3px);
|
|
@include background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)));
|
|
@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
|
|
&:hover, &:focus {
|
|
border-color: darken($border-medium, 9%);
|
|
text-decoration: none;
|
|
@include box-shadow(0 0 5px rgba($shadow-color, 0.2));
|
|
}
|
|
}
|
|
}
|
|
|
|
.image_container {
|
|
position: relative;
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
padding: em(10);
|
|
border: 1px solid $border-medium;
|
|
@include border-radius(1.5px);
|
|
background: $main-background;
|
|
@include background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)));
|
|
@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
|
|
&.no-border, .no-border & {
|
|
border: 0;
|
|
@include box-shadow(none);
|
|
background: none;
|
|
}
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
a {
|
|
position: relative;
|
|
display: block;
|
|
&:hover, &:focus {
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba($main-background, 0.3);
|
|
}
|
|
&:after {
|
|
@include icon("\e0cb", em(10));
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
padding: em(5, 10);
|
|
color: $main-background;
|
|
text-align: center;
|
|
background: $link-color;
|
|
}
|
|
}
|
|
}
|
|
figcaption, .caption {
|
|
/* overwrite elements style attribute */
|
|
width: 100% !important;
|
|
padding: em(4, 14) 0 0;
|
|
font-size: em(14);
|
|
color: $font-color-light;
|
|
}
|
|
}
|
|
|
|
.image_container.float_right, .image_container.float_left {
|
|
float: right;
|
|
@if $fluid-content-images {
|
|
width: col($content-image-cols, 16) !important;
|
|
}
|
|
margin: em(8) 0 em(16) col(1, 16);
|
|
@include mediaquery(mobile) {
|
|
margin-left: 0;
|
|
float: none !important;
|
|
@if $fluid-content-images {
|
|
width: auto !important;
|
|
}
|
|
}
|
|
|
|
.opensauce-fullwidth & {
|
|
margin: em(8) 0 em(16) col(1, 26);
|
|
@if $fluid-content-images {
|
|
width: col($content-image-cols, 26) !important;
|
|
}
|
|
@include mediaquery(tablet) {
|
|
margin-left: col(1, 16);
|
|
@if $fluid-content-images {
|
|
width: col($content-image-cols, 16) !important;
|
|
}
|
|
}
|
|
|
|
@include mediaquery(mobile) {
|
|
margin-left: 0;
|
|
@if $fluid-content-images {
|
|
width: auto !important;
|
|
}
|
|
}
|
|
}
|
|
.no-resize &, &.no-resize {
|
|
&, .opensauce-fullwidth & {
|
|
@if $fluid-content-images {
|
|
width: auto !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.image_container.float_left {
|
|
float: left;
|
|
margin: em(8) col(1, 16) em(16) 0;
|
|
@include mediaquery(mobile) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.opensauce-fullwidth & {
|
|
margin: em(8) col(1, 26) em(16) 0;
|
|
@include mediaquery(tablet) {
|
|
margin-right: col(1, 16);
|
|
}
|
|
|
|
@include mediaquery(mobile) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.image_container:not(.float_right):not(.float_left) {
|
|
.no-resize &, &.no-resize {
|
|
img {
|
|
width: auto;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ce_youtube-wrapper, .ce_vimeo-wrapper {
|
|
position: relative;
|
|
/* ratio 16 to 9 */
|
|
margin: em(24) 0;
|
|
padding-bottom: 56.25%;
|
|
height: 0;
|
|
overflow: hidden;
|
|
iframe, object, embed {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.mejs__video, .mejs__audio {
|
|
&:not(.mejs__container-fullscreen) {
|
|
margin: em(20) 0;
|
|
video {
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
button {
|
|
@include appearance(button);
|
|
border-radius: 0;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
.video_container video,
|
|
.audio_container audio {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.video_container video {
|
|
height: auto;
|
|
}
|
|
|
|
.video_container {
|
|
margin: em(20) 0;
|
|
iframe {
|
|
border: 0;
|
|
}
|
|
.responsive {
|
|
position: relative;
|
|
padding-bottom: 9 / 16 * 100%;
|
|
&.ratio-169 {
|
|
padding-bottom: 9 / 16 * 100%;
|
|
}
|
|
&.ratio-1610 {
|
|
padding-bottom: 10 / 16 * 100%;
|
|
}
|
|
&.ratio-219 {
|
|
padding-bottom: 9 / 21 * 100%;
|
|
}
|
|
&.ratio-43 {
|
|
padding-bottom: 3 / 4 * 100%;
|
|
}
|
|
&.ratio-32 {
|
|
padding-bottom: 2 / 3 * 100%;
|
|
}
|
|
iframe,
|
|
img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ce_gallery {
|
|
@for $cols from 1 through 12 {
|
|
> ul.cols_#{$cols} > li {
|
|
width: (100% - ($cols - 1) * 1.5%) / $cols;
|
|
}
|
|
}
|
|
@include mediaquery(mobile) {
|
|
/* doubled class for specificity */
|
|
&.ce_gallery > ul > li {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
&.no-resize > ul > li {
|
|
width: auto;
|
|
}
|
|
> ul {
|
|
@include clearfix;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
list-style: none !important;
|
|
> li {
|
|
float: left;
|
|
width: 23.875%;
|
|
margin: 1.5% 0 0 1.5%;
|
|
@include mediaquery(mobile) {
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
&.col_first {
|
|
clear: left;
|
|
margin-left: 0;
|
|
}
|
|
&.col_last {
|
|
/* for rounding failures */
|
|
margin-right: -1%;
|
|
}
|
|
> .image_container {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.enclosure, .ce_downloads {
|
|
margin: em(27, 16) 0;
|
|
padding: em(20, 16) em(30, 16);
|
|
border: 1px solid $border-medium;
|
|
@include border-radius(1.5px);
|
|
font-size: em(16);
|
|
background: $main-background;
|
|
@include background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)));
|
|
@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin: em(-21, 12) em(-31, 12) em(20, 12);
|
|
padding: em(8, 12) em(20, 12);
|
|
font-size: em(12, 16);
|
|
font-weight: 600;
|
|
letter-spacing: em(1, 12);
|
|
color: $main-background;
|
|
text-transform: uppercase;
|
|
background: $headline-color;
|
|
&:before {
|
|
@include icon("\e06d", em(14, 12));
|
|
top: em(1, 14);
|
|
float: right;
|
|
}
|
|
}
|
|
ul, p {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
}
|
|
|
|
.ce_accordion {
|
|
.accordion {
|
|
@include clearfix;
|
|
}
|
|
.toggler {
|
|
padding: em(6, 18) 0;
|
|
border-bottom: 1px solid $border-medium;
|
|
outline: none;
|
|
font-size: em(18);
|
|
color: $link-color;
|
|
cursor: pointer;
|
|
&:before {
|
|
@include icon("\e009", em(14, 18));
|
|
top: em(6, 14);
|
|
float: right;
|
|
color: $main-background;
|
|
background: $link-color;
|
|
}
|
|
&:hover {
|
|
text-decoration: underline;
|
|
&:before {
|
|
font-size: em(18, 18);
|
|
top: em(4, 18);
|
|
left: em(2, 18);
|
|
}
|
|
}
|
|
&.ui-accordion-header-active {
|
|
&:before {
|
|
content: "\e00c";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
* Slider styles
|
|
* ======================================== */
|
|
|
|
.rsts-skin-testimonials {
|
|
&.rsts-main {
|
|
position: relative;
|
|
margin: em(27) 0;
|
|
}
|
|
.rsts-header {
|
|
border-bottom: 1px solid $border-light;
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin: 0;
|
|
padding: em(2, 14) 0 em(9, 14);
|
|
font-size: em(14);
|
|
font-weight: 600;
|
|
color: $font-color-light;
|
|
letter-spacing: em(1, 14);
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
.rsts-prev, .rsts-next {
|
|
position: absolute;
|
|
right: em(24);
|
|
bottom: em(12);
|
|
overflow: hidden;
|
|
text-indent: -99em;
|
|
line-height: 0;
|
|
.sidebar & {
|
|
bottom: em(6);
|
|
}
|
|
&:after {
|
|
@include icon("\e018", em(8));
|
|
display: block;
|
|
padding: em(6, 8);
|
|
color: $main-background;
|
|
background: $link-color;
|
|
}
|
|
}
|
|
.rsts-next {
|
|
right: 0;
|
|
&:after {
|
|
content: "\e019";
|
|
}
|
|
}
|
|
.rsts-nav {
|
|
position: absolute;
|
|
right: -5px;
|
|
top: 2px;
|
|
line-height: 0;
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
li {
|
|
display: inline;
|
|
}
|
|
a {
|
|
float: left;
|
|
width: 17px;
|
|
height: 17px;
|
|
overflow: hidden;
|
|
outline: none;
|
|
padding: 5px;
|
|
text-indent: -99em;
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
width: 7px;
|
|
height: 7px;
|
|
@include border-radius(100%);
|
|
background: $border-medium;
|
|
@include opacity(0.8);
|
|
}
|
|
&:hover, &.active {
|
|
&:after {
|
|
@include opacity(1);
|
|
width: 11px;
|
|
height: 11px;
|
|
margin: -2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.rsts-nav-prev, .rsts-nav-next {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.rsts-skin-light {
|
|
.rsts-nav {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
* Module styles (Search, FAQ, News, Events, Comments, Sitemap etc.)
|
|
* ======================================== */
|
|
|
|
.fixed-note {
|
|
position: fixed;
|
|
display: table;
|
|
top: auto;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
min-height: em(60);
|
|
padding: em(12) em(20) em(12) em(80);
|
|
padding-right: calc(#{em(20)} + var(--safe-area-right));
|
|
padding-bottom: calc(#{em(12)} + var(--safe-area-bottom));
|
|
padding-left: calc(#{em(80)} + var(--safe-area-left));
|
|
border-top: 1px solid $border-medium;
|
|
z-index: 99;
|
|
background-color: $main-background;
|
|
box-shadow: 0 -2px 5px rgba($shadow-color, 0.1);
|
|
@include mediaquery(tablet) {
|
|
position: relative;
|
|
padding-top: calc(#{em(12)} + var(--safe-area-top));
|
|
padding-bottom: em(12);
|
|
}
|
|
|
|
@include mediaquery(mobile) {
|
|
display: block;
|
|
padding-left: em(20);
|
|
padding-left: calc(#{em(20)} + var(--safe-area-left));
|
|
}
|
|
|
|
&:before {
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-top: em(-18, 36);
|
|
left: em(30, 36);
|
|
left: calc(#{em(30, 36)} + var(--safe-area-left));
|
|
font-size: em(36);
|
|
color: $highlight-color;
|
|
@include mediaquery(tablet) {
|
|
top: em(24, 36);
|
|
margin-top: 0;
|
|
}
|
|
|
|
@include mediaquery(mobile) {
|
|
position: static;
|
|
}
|
|
}
|
|
h1, h2, h3, {
|
|
font-size: em(15);
|
|
margin: em(6, 15) 0;
|
|
}
|
|
p {
|
|
font-size: em(14);
|
|
margin: em(6, 14) 0;
|
|
@include mediaquery(mobile) {
|
|
font-size: em(16);
|
|
}
|
|
}
|
|
}
|
|
|
|
.fixed-note-column {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
padding: 0 em(10);
|
|
&:last-child {
|
|
text-align: right;
|
|
@include mediaquery(tablet) {
|
|
text-align: left;
|
|
}
|
|
}
|
|
@include mediaquery(tablet) {
|
|
display: block;
|
|
margin: em(12) 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.fixed-note-link, .fixed-note-button {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.fixed-note-button {
|
|
margin: 0;
|
|
}
|
|
|
|
.fixed-note-closed {
|
|
position: fixed;
|
|
right: em(30);
|
|
right: calc(#{em(30)} + var(--safe-area-right));
|
|
bottom: 0;
|
|
bottom: var(-(-safe-area-bottom));
|
|
z-index: 99;
|
|
padding: em(8) em(12);
|
|
color: $button-color;
|
|
text-decoration: none;
|
|
background: $button-background-color;
|
|
box-shadow: 0 -2px 5px rgba($shadow-color, 0.1);
|
|
@include mediaquery(desktop) {
|
|
right: 0;
|
|
right: var(-(-safe-area-right));
|
|
}
|
|
|
|
@include mediaquery(tablet) {
|
|
position: absolute;
|
|
top: em(12);
|
|
top: calc(#{em(12)} + var(--safe-area-top));
|
|
right: 50%;
|
|
bottom: auto;
|
|
margin-right: em(-16);
|
|
padding: em(4) em(12);
|
|
}
|
|
|
|
@include mediaquery(mobile) {
|
|
right: em(12);
|
|
right: calc(#{em(12)} + var(--safe-area-right));
|
|
margin-right: 0;
|
|
}
|
|
|
|
&:hover, &:focus {
|
|
background-color: darken($button-background-color, 10%);
|
|
}
|
|
&:before {
|
|
@include icon("\e0a6");
|
|
}
|
|
> span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.back a:before, .previous a:before, .next a:after {
|
|
@include icon("\e018", em(12));
|
|
top: em(-2, 12);
|
|
margin-right: em(6, 12);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.next a:after {
|
|
content: "\e019";
|
|
margin-right: 0;
|
|
margin-left: em(6, 12);
|
|
}
|
|
|
|
.pagination {
|
|
clear: both;
|
|
> p {
|
|
text-align: center;
|
|
}
|
|
ul {
|
|
list-style-type: none !important;
|
|
text-align: center;
|
|
}
|
|
li {
|
|
display: inline-block;
|
|
a, strong, span {
|
|
padding: 4px 12px;
|
|
background-color: $main-background;
|
|
}
|
|
.current, .active {
|
|
border-bottom: 1px solid $border-light;
|
|
@include background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)));
|
|
}
|
|
}
|
|
}
|
|
|
|
.news-image-teaser {
|
|
position: relative;
|
|
margin: em(36) 0;
|
|
padding: 0 0 0 col(2, 16);
|
|
@include mediaquery(mobile) {
|
|
padding-left: 0;
|
|
}
|
|
|
|
&.-no-date {
|
|
padding-left: 0;
|
|
}
|
|
h2 {
|
|
margin: 0 0 em(8, 32);
|
|
padding: 0 0 em(10, 32);
|
|
border-bottom: 1px solid $border-medium;
|
|
font-size: em(32);
|
|
font-weight: normal;
|
|
@include line-height(38, 32);
|
|
color: $headline-color;
|
|
@include mediaquery(mobile) {
|
|
margin-right: col(3, 16);
|
|
}
|
|
}
|
|
time {
|
|
position: absolute;
|
|
top: em(7, 36);
|
|
left: 0;
|
|
width: col(1.5, 16);
|
|
border: 1px solid $border-medium;
|
|
font-size: em(36);
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
color: $font-color-light;
|
|
text-align: center;
|
|
background: $main-background;
|
|
@include background-image(linear-gradient(rgba($shadow-color, 0) 50%, rgba($shadow-color, 0.02)));
|
|
@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
|
|
@include mediaquery(mobile) {
|
|
left: auto;
|
|
right: 0;
|
|
width: col(2.5, 16);
|
|
}
|
|
|
|
&:before {
|
|
@include icon("\e06b", em(25, 36));
|
|
display: block;
|
|
margin: -1px -1px em(2, 25) -1px;
|
|
padding: em(18, 25) 0;
|
|
color: $main-background;
|
|
background: $highlight-color;
|
|
}
|
|
b {
|
|
display: block;
|
|
margin: em(-4, 21) 0 em(5, 21);
|
|
font-size: em(21, 36);
|
|
font-weight: inherit;
|
|
text-transform: uppercase;
|
|
}
|
|
i {
|
|
display: none;
|
|
}
|
|
}
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
p {
|
|
margin: em(12) 0;
|
|
color: $font-color-light;
|
|
}
|
|
.news-image-teaser-info {
|
|
margin: em(8, 14) 0 em(14, 14);
|
|
font-size: em(14);
|
|
color: inherit;
|
|
}
|
|
.news-image-teaser-more {
|
|
font-size: em(16);
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
.mod_calendar {
|
|
th {
|
|
&.previous, &.next {
|
|
a {
|
|
&:after, &:before {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
&.current {
|
|
border-right: 0;
|
|
border-left: 0;
|
|
text-align: center;
|
|
&:before {
|
|
@include icon("\e037", 16px);
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
&.previous {
|
|
border-right: 0;
|
|
}
|
|
&.next {
|
|
border-left: 0;
|
|
text-align: right;
|
|
}
|
|
&.label {
|
|
font-size: em(12);
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
letter-spacing: em(1, 14);
|
|
}
|
|
}
|
|
td {
|
|
vertical-align: top;
|
|
width: col(1, 7);
|
|
&.today {
|
|
font-weight: 600;
|
|
background-color: $border-medium;
|
|
}
|
|
}
|
|
.event {
|
|
font-size: em(12);
|
|
}
|
|
.minicalendar {
|
|
td {
|
|
padding: em(3);
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mod_eventlist {
|
|
.event > h2 {
|
|
margin-top: 0;
|
|
font-size: em(28);
|
|
}
|
|
}
|
|
|
|
.mod_faqlist {
|
|
ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
li {
|
|
&:before {
|
|
@include icon("\e0f7");
|
|
margin-right: em(8);
|
|
}
|
|
}
|
|
}
|
|
|
|
.mod_faqreader {
|
|
.info {
|
|
font-size: em(14);
|
|
color: $font-color-light;
|
|
}
|
|
}
|
|
|
|
.mod_newsletterlist {
|
|
ul {
|
|
padding-left: 0;
|
|
list-style-type: none;
|
|
li {
|
|
padding: em(5) 0;
|
|
border-top: 1px solid $border-medium;
|
|
&:first-child, &.first {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mod_search {
|
|
margin: em(27) 0;
|
|
.widget {
|
|
display: inline;
|
|
}
|
|
form {
|
|
input {
|
|
vertical-align: middle;
|
|
&[type="search"] {
|
|
width: col(11.9, 16);
|
|
margin: 0;
|
|
padding-top: em(11);
|
|
padding-bottom: em(9);
|
|
}
|
|
}
|
|
button, input {
|
|
&[type="submit"] {
|
|
width: col(4, 16);
|
|
margin: 0 -2% 0 0;
|
|
}
|
|
}
|
|
}
|
|
.relevance {
|
|
float: right;
|
|
margin-top: em(10, 14);
|
|
font-size: em(14, 24);
|
|
}
|
|
.header {
|
|
padding-bottom: em(5);
|
|
border-bottom: 1px solid $border-medium;
|
|
color: $font-color-light;
|
|
}
|
|
.highlight {
|
|
padding: 0 em(4);
|
|
font-weight: 600;
|
|
background: mix($main-background, $link-color, 80%);
|
|
}
|
|
.url {
|
|
padding-bottom: em(20, 14);
|
|
border-bottom: 1px dotted $border-medium;
|
|
font-size: em(14);
|
|
color: $font-color-light;
|
|
&:before {
|
|
@include icon("\e0b5");
|
|
margin-right: em(5, 14);
|
|
}
|
|
.filesize {
|
|
font-size: em(12, 14);
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment_default {
|
|
margin: em(27, 16) 0;
|
|
padding: em(20, 16) col(1, 16) 0;
|
|
border: 1px solid $border-medium;
|
|
@include border-radius(1.5px);
|
|
font-size: em(16);
|
|
background: $main-background;
|
|
@include background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)));
|
|
@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
|
|
.info {
|
|
margin-top: 0;
|
|
border-bottom: 1px solid $border-medium;
|
|
}
|
|
.reply {
|
|
margin-left: col(1, 15);
|
|
.info {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ce_comments {
|
|
.form {
|
|
margin-top: em(60);
|
|
.widget {
|
|
margin-top: em(24);
|
|
}
|
|
}
|
|
}
|
|
|
|
.mod_sitemap {
|
|
ul {
|
|
padding-left: 0;
|
|
list-style-type: none;
|
|
li {
|
|
li {
|
|
padding: em(3, 16) 0 em(3, 16) em(28, 16);
|
|
font-size: em(16);
|
|
}
|
|
li.submenu {
|
|
ul {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> ul > li {
|
|
&:before {
|
|
@include icon("\e083");
|
|
margin-right: em(10);
|
|
color: $link-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
* Footer styles
|
|
* ======================================== */
|
|
|
|
.page-footer {
|
|
clear: both;
|
|
margin: 0 col(1, 28);
|
|
@include mediaquery(tablet) {
|
|
margin-right: col(1, 18);
|
|
margin-left: col(1, 18);
|
|
}
|
|
}
|
|
|
|
.footer-navigation-wrapper {
|
|
/* clearfix */
|
|
overflow: hidden;
|
|
margin: em(40, 12) 0 0;
|
|
padding: em(22, 12) 0;
|
|
border-top: 1px solid $border-medium;
|
|
font-size: em(12);
|
|
font-weight: 600;
|
|
color: $footer-color;
|
|
text-transform: uppercase;
|
|
@include mediaquery(mobile) {
|
|
font-size: em(12, 15);
|
|
}
|
|
}
|
|
|
|
.footer-navigation {
|
|
float: left;
|
|
@include mediaquery(tablet) {
|
|
float: none;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
li {
|
|
display: inline;
|
|
&:after {
|
|
content: " ";
|
|
}
|
|
}
|
|
a, li > strong, li > span {
|
|
margin-right: em(18, 12);
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.footer-info {
|
|
float: right;
|
|
font-weight: normal;
|
|
@include mediaquery(tablet) {
|
|
margin-top: em(12, 12);
|
|
float: none;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
a {
|
|
color: inherit;
|
|
}
|
|
.rocksolid-copyright {
|
|
font-style: normal;
|
|
color: mix($main-background, $font-color-light, 40%);
|
|
&:before {
|
|
content: "\2022";
|
|
display: inline-block;
|
|
margin: 0 em(8, 12);
|
|
color: $font-color-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ===========================================
|
|
// Grid (design + production helper)
|
|
// ========================================
|
|
|
|
//html .page:before
|
|
// content: ""
|
|
// position: absolute
|
|
// display: block
|
|
// top: 0
|
|
// left: 0
|
|
// width: 100%
|
|
// height: 6000px
|
|
// z-index: 9999
|
|
// pointer-events: none
|
|
// +background-image(linear-gradient(left, rgba(red,1) col(1, 28), rgba(red,0) col(1, 28), rgba(red,0) col(2, 28), rgba(red,1) col(2, 28), rgba(red,1) col(3, 28), rgba(red,0) col(3, 28), rgba(red,0) col(4, 28), rgba(red,1) col(4, 28), rgba(red,1) col(5, 28), rgba(red,0) col(5, 28), rgba(red,0) col(6, 28), rgba(red,1) col(6, 28), rgba(red,1) col(7, 28), rgba(red,0) col(7, 28), rgba(red,0) col(8, 28), rgba(red,1) col(8, 28), rgba(red,1) col(9, 28), rgba(red,0) col(9, 28), rgba(red,0) col(10, 28), rgba(red,1) col(10, 28), rgba(red,1) col(11, 28), rgba(red,0) col(11, 28), rgba(red,0) col(12, 28), rgba(red,1) col(12, 28), rgba(red,1) col(13, 28), rgba(red,0) col(13, 28), rgba(red,0) col(14, 28), rgba(red,1) col(14, 28), rgba(red,1) col(15, 28), rgba(red,0) col(15, 28), rgba(red,0) col(16, 28), rgba(red,1) col(16, 28), rgba(red,1) col(17, 28), rgba(red,0) col(17, 28), rgba(red,0) col(18, 28), rgba(red,1) col(18, 28), rgba(red,1) col(19, 28), rgba(red,0) col(19, 28), rgba(red,0) col(20, 28), rgba(red,1) col(20, 28), rgba(red,1) col(21, 28), rgba(red,0) col(21, 28), rgba(red,0) col(22, 28), rgba(red,1) col(22, 28), rgba(red,1) col(23, 28), rgba(red,0) col(23, 28), rgba(red,0) col(24, 28), rgba(red,1) col(24, 28), rgba(red,1) col(25, 28), rgba(red,0) col(25, 28), rgba(red,0) col(26, 28), rgba(red,1) col(26, 28), rgba(red,1) col(27, 28), rgba(red,0) col(27, 28)))
|
|
// opacity: .1
|
|
// +mediaquery(tablet)
|
|
// +background-image(linear-gradient(left, rgba(red,1) col(1, 18), rgba(red,0) col(1, 18), rgba(red,0) col(2, 18), rgba(red,1) col(2, 18), rgba(red,1) col(3, 18), rgba(red,0) col(3, 18), rgba(red,0) col(4, 18), rgba(red,1) col(4, 18), rgba(red,1) col(5, 18), rgba(red,0) col(5, 18), rgba(red,0) col(6, 18), rgba(red,1) col(6, 18), rgba(red,1) col(7, 18), rgba(red,0) col(7, 18), rgba(red,0) col(8, 18), rgba(red,1) col(8, 18), rgba(red,1) col(9, 18), rgba(red,0) col(9, 18), rgba(red,0) col(10, 18), rgba(red,1) col(10, 18), rgba(red,1) col(11, 18), rgba(red,0) col(11, 18), rgba(red,0) col(12, 18), rgba(red,1) col(12, 18), rgba(red,1) col(13, 18), rgba(red,0) col(13, 18), rgba(red,0) col(14, 18), rgba(red,1) col(14, 18), rgba(red,1) col(15, 18), rgba(red,0) col(15, 18), rgba(red,0) col(16, 18), rgba(red,1) col(16, 18), rgba(red,1) col(17, 18), rgba(red,0) col(17, 18)))
|
|
//html:hover .page:before
|
|
// visibility: hidden
|