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