kompass/buena/style.css

@charset "UTF-8";
/**
Theme Name:   Buena
Version:      0.99.7
Theme URI:    http://lab.hanseaten-bremen.de/themes/buena/
Author:       Philipp Cordes <philipp.cordes@pfadfinden.de>
Description:  Das neue Corporate Design, jetzt auch für WordPress.
License:      Proprietary
Tags:         one-column, three-columns, responsive-layout, automatic-feed-links, post-thumbnails, featured-images, custom-menu, blue, white, yellow, editor-style
*/

/*
Farben:
 - gelb: #ffcb04 (Handbuch, manchmal T3), #ffca28 (T3)
   - Verlauf: #9f7515 bis #e1af22, #e0cb84 bis #fff (IE-Fallback)
   - blass: #fff5d9 (T3-Zebra)
 - blau: #1d4899 (Handbuch, manchmal T3), #0d52a5 (T3)
   - Markierung (T3): #b3d4fc
*/

html, body { border: 0 none; padding: 0; margin: 0; min-height: 100%; position: static; }
html { font-family: Sans-Serif; font-size: 81.3%; background: url("img/holz.jpg") #dbb97b; position: relative; }
header, hgroup, nav, footer, article { display: block; }
.h, h1, .h1, h2, .h2,  h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin: 0; font-family: IHS, Serif; font-size: 1em; font-weight: normal; font-style: normal; }
button, input, select, optgroup, option { margin: 0; font: inherit; color: inherit; }
button, input[type="button"], input[type="submit"], input[type="reset"] { cursor: pointer; }
input[type="search"] { -webkit-appearance: textfield; }
p, ul, ol, dt { line-height: 1.5; }
abbr { border-bottom: 1px dotted; }
a { color: #1d4899; }
figure, .wp-caption { margin: 0; max-width: 100%; }
figcaption, .wp-caption-text { font-style: italic; padding: 0.5em 0; }
.screen-reader-text { display: none; }
.aligncenter { margin: 0 auto; }
.alignleft { float: left; margin: 0 1em 0 0; }
.alignright { float: right; margin: 0 0 0 1em; }

::-moz-selection { background: #1d4899; color: #ffcb04; text-shadow: none; outline: 2px solid #1d4899; }
     ::selection { background: #1d4899; color: #ffcb04; text-shadow: none; outline: 2px solid #1d4899; }

/* Media object */
.media { margin: 1em 0; }
.media, .bd { overflow: hidden; _overflow: visible; }
/*.media img { display: block; }*/
/* Clearfix */
.clearfix::after,
.clearfix::before,
.media::after,
.media::before { content: " "; display: table; }
.clearfix::after,
.media::after { clear: both; }

/* Layout */
#wrap { background: url("img/klufthemd.png") no-repeat; padding: 0 0 2em; }
#footer { background: url("img/loeffel-topf.png") no-repeat 100% 100%; position: absolute; width: 100%; bottom: 0; }
#footer .wrapper { background: url("img/briefumschlag.png") no-repeat; margin: 0 0 0 240px; padding: 112px 7px 0 21px; height: 286px; width: 700px; box-sizing: border-box; }
#footer header { color: #ffcb04; text-align: center; font-size: 25px; margin: -111px 0 13px; line-height: 111px; }
#footer .widgets { padding: 0 2em 0 0; }

#left { margin: -18px -200px 0 40px; width: 160px; z-index: 30; float: left; position: relative; }
#main { overflow: hidden; padding: 0 0 286px 240px; }
@media (max-width: 960px) {
	/* Umschlag unter die Navigation umbrechen */
	#left { margin-bottom: 300px; }
	#footer .wrapper { margin-left: 0; }
}
@media (max-width: 720px) {
	#main { padding-left: 0; }
	#left { margin-right: 0; }
}

/* FIXME: Positionierung des Schattens weiter vereinfachen, auch Untertitel verlinken. */
/* FIXME: Branding umbenennen, siehe https://github.com/pfadfinden/wordpress-theme-updater/issues/13 */
#branding { min-height: 145px; padding: 0 33px 20px 240px; text-align: center; position: relative; width: 425px; margin-bottom: -27px; }
#branding::after { content: ""; display: block; position: absolute; bottom: 0; right: 0; z-index: 15; height: 143px; width: 457px; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGhlaWdodD0nMzAwJyB3aWR0aD0nNDcwJyB2aWV3Qm94PScwIDAgMzAwIDQyNScgcHJlc2VydmVBc3BlY3RSYXRpbz0neE1pbllNaW4gbWVldCc+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSd2JyB4MT0nMCcgeTE9JzAnIHgyPScwJyB5Mj0nMTQwJSc+PHN0b3Agb2Zmc2V0PScwJyBzdG9wLWNvbG9yPScjMDAwJyBzdG9wLW9wYWNpdHk9JzAuNycgLz48c3RvcCBvZmZzZXQ9JzUwJScgc3RvcC1jb2xvcj0nIzAwMCcgc3RvcC1vcGFjaXR5PScwLjQnIC8+PHN0b3Agb2Zmc2V0PSc4MCUnIHN0b3AtY29sb3I9JyMwMDAnIHN0b3Atb3BhY2l0eT0nMC4xJyAvPjxzdG9wIG9mZnNldD0nMTAwJScgc3RvcC1jb2xvcj0iIzAwMCIgc3RvcC1vcGFjaXR5PScwJyAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9J00xMCwyMDAgQzE1MCwxNzAgNDUwLDE4MCA2MTUsMTkwIEw2MDgsMDAgTDE1LDAgWicgc3R5bGU9J3N0cm9rZTpub25lOycgZmlsbD0ndXJsKCN2KSc+PC9wYXRoPjwvc3ZnPg0K") no-repeat 50% 0; }
#branding > * { margin: 0; position: relative; z-index: 20; }
.site-title { font-size: 20px; background: #ffcb04; color: #0d53a5; margin-top: auto; line-height: 115px; }
.site-title a { display: block; vertical-align: bottom; }
.site-title img { vertical-align: bottom; padding-bottom: 16px; }
.site-description { font-size: 18px; background: #0d53a5; color: #ffcb04; line-height: 30px; font-family: IHS, Serif; letter-spacing: 1px; word-spacing: 2px; }

#header .search-form { background: url("img/streichholzschachtel.png") no-repeat; position: absolute; height: 89px; left: 750px; top: 1.5em; width: 98px; padding: 25px 47px 0 35px; }
#header .search-form label { display: block; position: relative; margin: 25px 0 -50px; text-align: left; }
#header .search-field { background: transparent; border: 2px solid #ffcb04; padding: 2px; color: #fff; display: block; max-width: 100%; box-sizing: border-box; }
#header .search-submit { background: transparent; color: #ffcb04; border: 0 none; font-family: IHS, Serif; font-size: 1.4em; padding: 0; display: block; box-sizing: border-box; }
#header > nav { position: absolute; top: 0; right: 0; z-index: 9999; display: none; }/* FIXME: Workaround Branding-Doppelung */
#responsiveMenu { border: 0 none; background: transparent; height: 51px; margin: 1em; }
@media (max-width: 960px) { /* Suche ausblenden */
	#header .search-form { display: none; }
}

.nav-menu ul { list-style: none; padding: 0; margin: 0; }
.nav-menu-primary > ul { font-family: IHS, Serif; }
.nav-menu-primary > ul > .current-menu-ancestor,
.nav-menu-primary > ul > .current-menu-item { background: #e1af22 no-repeat; background-image: linear-gradient(#9f7515 0%, #e1af22 100%); border-bottom: 1px solid #9f7515; border-top: 1px solid #9f7515; margin: 0.5em 0; padding: 0.5em 0; }
.nav-menu-primary .sub-menu { display: none; }
.nav-menu-primary a { padding: 0.4em 0.5em 0.4em 1em; display: block; text-decoration: none; color: #6b5742; font-size: 1.4em; }
.nav-menu-primary li ul a { font-family: Georgia, Serif; font-size: 12px; font-style: italic; padding: 5px 5px 5px 25px; color: #000; }
.nav-menu-primary .current-menu-ancestor .sub-menu,
.nav-menu-primary .current-menu-item .sub-menu { display: block; }
.nav-menu-primary .current-menu-ancestor a { color: #000; }
.nav-menu-primary .current-menu-item > a { color: #fff; }
.nav-menu-primary a:hover,
.nav-menu-primary a:focus { color: #000; }
.nav-menu .current-menu-ancestor a:hover,
.nav-menu .current-menu-ancestor a:focus,
.nav-menu .sub-menu a:hover,
.nav-menu .sub-menu a:focus,
.nav-menu-footer a:hover,
.nav-menu-footer a:focus { text-decoration: underline; }
.nav-menu-footer { font-family: Georgia, Serif; font-style: italic; padding-left: 2em; }
.nav-menu-footer > ul { width: 323px; height: 174px; position: relative; display: flex; -webkit-flex-flow: column; flex-flow: column; -webkit-justify-content: center; justify-content: center; -webkit-align-items: stretch; align-items: stretch; }
.nav-menu-footer li { margin-bottom: 0.75em; }
.nav-menu-footer a { padding: 4px 4px 4px 25px; text-decoration: none; }

.widget_recent_entries > ul,
.widget_recent_comments > ul,
.widget_archive > ul,
.widget_categories > ul,
.widget_meta > ul { list-style: none; padding: 0; margin: 0; }

#left > .nav-menu { background: #ffcb04; color: #6b5742; padding: 10px 0 2em; }
#left > .widgets { background: rgba(56, 46, 35, 0.7); color: #ffcb04; padding: 1em 15px 15px 20px; font-size: 13px; font-style: italic; }
#left > .widgets a { color: #fff; text-decoration: none; }
#left > .widgets a:hover,
#left > .widgets a:focus { text-decoration: underline; }

/* Widgets: Basisdarstellung */
.widgets { list-style: none; padding: 0; margin: 0; font-family: Georgia, Serif; font-style: italic; }
.widget_calendar table { text-align: center; }

/* Widgets: Korrekturen für unsere Seitenleiste */
#left .widget_search form { display: flex; }
#left .widget_search form > * { border: 2px solid #ffcb04; }
#left .widget_search input { box-sizing: border-box; width: 100%; border: 0 none; background: transparent; color: #fff; text-align: center; padding: 3px 0.25em 4px; }
#left .widget_search button { color: transparent; background: url("res/lupe.svg") 50% 50% no-repeat #ffcb04; width: 31px; }

#left .widget_calendar > div { margin: 0 -15px 0 -20px; }
#left .widget_calendar > div > table { text-align: center; margin: 0 auto; }

#left .widget_pages ul { padding-left: 2em; }
#left .widget_pages > ul { list-style: none; padding: 0; }

#left > .widgets .widget { margin: 0; padding: 1em 0; }
.widgets .h-widget { color: #ffcb04; font-size: 16px; }
#left > .widgets .menu,
.widgets .widget_categories ul { list-style: none; padding: 0; }

/* Überschriften mit Bild darunter */
.h-box { position: relative; display: block; margin-bottom: 1em; text-decoration: none; }
.h-box > img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.h-box > .wrap { position: absolute; max-width: 100%; left: 0; }
.h-box > .wrap > * { display: inline; -o-box-decoration-break: clone; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.h-box-teaser { box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3); line-height: 1; display: inline-block; width: 1300px; max-width: 100%; }
.h-box-teaser > img { position: static; }
.h-box-teaser > .wrap { bottom: 1em; padding-left: 240px; }
.h-box-teaser > .wrap > * { background: rgba(56, 46, 35, 0.7); color: #ffcb04; padding: 2px 13px 4px; font-size: 52px; line-height: 78px; }
@media (max-width: 720px) {
	.h-box-teaser { margin-top: 1em; margin-left: 0; }
	.h-box-teaser > .wrap { padding-left: 1em; }
	.h-box-teaser > .wrap > * { font-size: 2em; line-height: 39px; }
}

.h-box-blaugelb { padding-top: 47.1428571%; }
.h-box-blaugelb > .wrap { bottom: 0; font-size: 18px; }
.h-box-blaugelb > .wrap > * { color: #1d4899; background: #ffcb04; padding: 3px 5px; line-height: 26px; }

.h-box-blaugelb-bildlos { padding: 0; }
.h-box-blaugelb-bildlos > .wrap { position: static; }
/**/

.container { max-width: 1020px; }
.page .container,
.single-post:not(.single-format-gallery) .container { max-width: 710px; }

.content-singular .format-gallery { background: transparent; padding: 0; margin: 0; position: relative; }
.content-singular .format-gallery .gallery { display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: space-between; align-content: space-between; -webkit-align-items: flex-start; align-items: flex-start; }
.content-singular .format-gallery .gallery-item { background: #fff; padding: 1em; margin: 0 1em 1em 0; }
.gallery-columns-1 .gallery-item { flex: 1 0 50%; }
.gallery-columns-2 .gallery-item { flex: 1 0 34%; }
.gallery-columns-3 .gallery-item { flex: 1 0 25%; }
.gallery-columns-4 .gallery-item { flex: 1 0 20%; }

.content-gallery { display: flex; position: relative; z-index: 10; -webkit-flex-wrap: wrap; flex-wrap: wrap; overflow: hidden; }
.container article,
.commentlist article,
.comment-form { padding: 1em; margin: 0 1em 1em 0; transition: width 0.5s, height 0.5s; box-sizing: border-box; }
.container article > :first-child,
.comment-form > :first-child { margin-top: 0; }
.container article > :last-child,
.comment-form > .form-submit { margin-bottom: 0; }
.content-singular > article:not(.format-gallery),
.content-gallery > article,
.commentlist article,
.comment-form { min-width: 20em; background: #fff; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); }
.content-gallery > article { flex: 1 1 25%; max-width: calc(33.333% - 1em); }
@media (max-width: 1070px) { .content-gallery > article { flex: 1 1 34%; max-width: calc(50% - 1em); } }
@media (max-width:  800px) { .content-gallery > article { flex: 1 1 50%; max-width: 100%; } }
.container > .pagination { margin-right: 1em; }

/* WordPress-Wünsche */
.sticky {}

img { max-width: 100%; height: auto; border: 0 none; vertical-align: middle; }
ul, ol { padding-left: 2em; }
dl, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, p, table { margin: 0.5em 0; }
dd, li > ol, li > ul { margin: 0; }
dt { font-weight: bold; }
blockquote, dd { padding-left: 2em; }
article > p:empty:last-child { margin: -0.5em 0 0.5em; }
article h3, article .h3, article h4, article .h4, article h5, article .h5, article h6, article .h6 { display: inline-block; background: #ffcb04; color: #1d4899; margin-bottom: 0; padding: 2px 4px; }
article h3, article .h3 { font-size: 18px; padding: 3px 5px; }
article h4, article .h4 { font-size: 16px; }
article h5, article .h5 { font-size: 14px; }
.gallery-caption {}
.bypostauthor {}
.twitter-tweet {}

/* Kommentare */
#comments, #reply-title { font-size: 2.5em; color: #fff; margin: 0.5em 0 0.25em; }
.commentlist { list-style: none; padding: 0; }
.commentlist .children { list-style: none; padding-left: 1em; }
.comment-form > p > * { vertical-align: top; }
.comment-form > p > label::after { content: ": "; }
.comment-body { position: relative; }
.comment-metadata { position: absolute; top: 1em; right: 1em; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-end; justify-content: flex-end; }
.comment-form textarea { resize: vertical; display: block; box-sizing: border-box; width: 100%; }

/* Responsive: Der komplizierte Kram. Hurra! */
@media (max-width: 720px) { /* Gestapelt anordnen */
	#main { padding-bottom: 0; }
	#wrap, #footer .wrapper { background-image: none; }
	#branding { text-align: left; width: auto; padding: 0; margin: 0; min-height: 0; }
	#branding::after { display: none; background-image: none; }
	#branding h1 { line-height: 51px; }
	#branding h2 { padding: 0 1em; }
	.site-title a { display: inline-block; }
	.site-title img { height: 51px; width: auto; padding: 13px; }
	#header > nav { display: block; }
	#left { float: none; transition: 0.5s height; margin: 0; width: auto; }
	#left, #left .widgets { display: none; }
	.show-responsive-menu #left { display: block; }
	#content, .comments { margin-left: 1em; }
	#footer { background: #c4a164; position: static; }
	#footer .wrapper { padding: 1em; height: auto; width: auto; }
	#footer header { color: #000; margin: 0; line-height: 1.5; }
	.nav-menu-footer, #footer .widgets { float: none; margin: 1em 0 0; padding: 1em; }
	.nav-menu-footer > ul { height: auto; }
}