style.css

/*
 Theme Name:   punktoinfo
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  punkto.info podcasting theme
 Author:       Johannes Mueller
 Author URI:   http://punkto.info
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  punktoinfo
*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400,400italic,600italic&subset=latin,latin-ext);
@import url("genericons/genericons.css");

@import url('style-twentythirteen.css');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  font-family: "Open Sans";
  font-size: 14px;
  line-height: 1.5;
}

table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}

h1 {
	font-size: x-large;
	margin: 33px 0;
}

h2 {
	font-size: larger;
	margin: 25px 0;
}

h3 {
	font-size: large;
	margin: 22px 0;
}

em {
    font-style: italic;
    font-size: 100%;
}

.color-primary-0 { color: #924F00 }	/* Main Primary color */
.color-primary-1 { color: #DF7900 }
.color-primary-2 { color: #B66300 }
.color-primary-3 { color: #693900 }
.color-primary-4 { color: #3A1F00 }

.color-secondary-1-0 { color: #926A00 }	/* Main Secondary color (1) */
.color-secondary-1-1 { color: #DFA200 }
.color-secondary-1-2 { color: #B68500 }
.color-secondary-1-3 { color: #694D00 }
.color-secondary-1-4 { color: #3A2A00 }

.color-secondary-2-0 { color: #922100 }	/* Main Secondary color (2) */
.color-secondary-2-1 { color: #DF3200 }
.color-secondary-2-2 { color: #B62900 }
.color-secondary-2-3 { color: #691800 }
.color-secondary-2-4 { color: #3A0D00 }

a {
    text-decoration: none;
}

a:link {
    color: #3A1F00;
}

a:visited {
    color: #926A00;
}

a:hover {
    color: #B62900;
    text-decoration: none;
}

a:active {
    color: #DF3200;
}



/* Colors */

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	background: #3A1F00;
	color: #fff;
	border: none;
}


button:hover,
button:focus,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus {
	background: #B62900; /* Old browsers */
	outline: none;
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
    background: #DF7900; /* Old browsers */
    border: none;
}


#page {
    overflow-x: hidden;
}

.comment-author .fn,
.comment-author .url,
.comment-reply-link,
.comment-reply-login {
	color: #3A1F00;
}

.comment-meta a:hover {
	color: #B62900;
}

.comment-respond {
	background-color: white;
	padding: 30px 0;
}

.comment-reply-title {
	font: 300 normal 28px "Open Sans", Helvetica, sans-serif;
}

.comment-form .required {
    color: #DF3200;
}

.widget {
    background-color: #3A1F00;
	font-size: 14px;
	-webkit-hyphens: auto;
	-moz-hyphens:    auto;
	-ms-hyphens:     auto;
	hyphens:         auto;
	margin: 0 0 24px;
	padding: 20px;
	word-wrap: break-word;
}

.widget .widget-title {
	font: 300 normal 20px "Open Sans", Helvetica, sans-serif;
	margin: 0 0 10px;
}




/*
#wrapper {
    display: block;
    width:90%;
    margin:0px auto;
}
*/

.site-header {
    text-align: center;
}

.site-header .home-link {
    min-height: 0px;
    padding: 0px;
    width: 100%;
}

.search-field:focus {
    border-top: 2px solid #3A1F00;
}

.contact-button-bar {
    height: 36px;
    width: 100%;
    background-color: #3A1F00;
    padding: 0px;
    position: fixed;
    z-index: 100;
}

#contact-button-container {
    float: right;
    height: inherit;
}

ul#contact-buttons {
    margin: 0;
    padding: 0px;
    width: 100%;
    height: 32px;
    list-style-type: none;
    list-style: none;
    display: flex;
}

a.contact-button, .feed-menu > a {
    width: 36px;
    height: 36px;
    display: block;
    background-size: 36px, 36px;
}

.feed-menu {
    position: relative;
    display: inline-block;
}

.feed-menu > a {
        background-image: url('/wp-content/themes/punktoinfo/images/feed-blanka.svg');
}

.feed-menu > a:hover {
        background-image: url('/wp-content/themes/punktoinfo/images/feed-inversa.svg');
}

.feed-menu > ul {
    display: none;
    position: absolute;
    right: 0;
    list-style: none;
    background: #3A1F00;
    color: black;
    padding: 5px;
}

a.feed-menu-item {
    color: white;
    font-size: small;
}


a.feed-menu-item:hover {
    color: #3A1F00;
    background: white;
}

.feed-menu:hover > ul {
    display: block;
}

a.podlove-subscribe-button-subscribeButton {
    height: 36px;
    width: 120px;
    display: block;
    background-size: 120px 36px;
    box-sizing: border-box;
}

a.podlove-subscribe-button-subscribeButton {
    font-weight: bold;
    font-size: 24px;
    color: white;
    background-color: #922100;
    background-repeat: no-repeat;
    padding: 0px 6px;
    margin-right: 0px;
}

a.podlove-subscribe-button-subscribeButton:hover {
    background-color: #B62900;
}

a.podlove-subscribe-button-subscribeButton:active {
    background-color: #DF3200;
}

.nav-menu li a {
	color: #3A1F00;
	font-size: 15px;
	display: block;
	line-height: 1;
	padding: 15px 20px;
	text-decoration: none;
}

.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
    background-color: #3A1F00;
	color: #fff;
}


.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
	color: #B62900;
	font-style: normal;
	font-weight: bold;
}

.menu-icon {
	display: none;
	padding: 8px 10px 0px 15px;
	font-size: 18px;
}

@media screen and (max-width: 650px) {
	.nav-menu li:not(:first-child) {
		display: none;
	}
	.menu-icon {
		display: block;
		float: left;
	}
}

@media screen and (max-width: 650px) {
	.nav-menu.unfold {
		position: relative;
	}
	.nav-menu.unfold .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.nav-menu.unfold li {
		float: none;
		display: block;
		text-align: left
	}
}

img.title-image {
    width: 90%;
    max-width: 800px;
    margin-top: 56px;
    margin-bottom: 20px;
}


.navbar {
    background-color: #fff;
    margin: 0 auto;
    width: 100%;
    max-width: none;
    text-align: center;
    border-top: 2px solid #3A1F00;
    border-bottom: 2px solid #3A1F00;
    margin-bottom: 1.5em;
}

#site-navigation {
    width: 100%;
    margin: auto;
    text-align: left;
    max-width: 800px;
}

.navigation .nav-previous {
	float: left;
}

.navigation .nav-next {
	float: right;
}

.paging-navigation .nav-links {
    margin: 0 auto;
    width: 100%;
}


.paging-navigation .nav-next {
	padding: 13px 0;
}

.paging-navigation a {
	font-size: 22px;
}

.paging-navigation .meta-nav {
	display: inline-block;
	font-size: 26px;
}


.paging-navigation .nav-next .meta-nav {
	margin-left: 10px;
}


.post-navigation {
	background-color: #fff;
	color: #ca3c08;
	font-size: 20px;
	font-style: italic;
	font-weight: 300;
	padding: 20px 0;
}

.post-navigation .nav-links {
	margin: 0 auto;
	max-width: 1040px;
}

.sidebar .post-navigation .nav-links {
	padding: 0 376px 0 60px;
}

.post-navigation a[rel="next"] {
	float: right;
	text-align: right;
}




/* Content */

.hentry {
	padding: 0px 0; */
}

.entry-header,
.entry-content,
.entry-summary,
.entry-meta {
    margin: 0 auto;
    max-width: 100%;
	width: 100%;
}

.entry-meta .date a:before {
	content: "\f305";
}

.site-content {
    max-width: 800px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
    text-align: left;
}

.site-content h1 {
    font-weight: bold;
    font-size: x-large;
    margin-bottom: .25em;
    margin-top: 1em;
}

.site-content h2 {
    font-weight: bold;
    font-size: large;
    margin-bottom: .5em;
    margin-top: 1em;
}

.page-content {
	margin: 0 auto;
	padding: 40px 0;
	width: 100%;
	max-width: 100%;
}



/* Podcast stuff */

.episode-tile {
    display: inline-block;
    margin: 10px;
}

img.episode-tile-image {
    opacity: 1.;
    transition: opacity 0.25s;
}

img.episode-tile-image:hover {
    opacity: .7;
}

.podlove-contributors-table {
    margin-top: 1em;
    width: 100%;
}

.podlove-contributors-table td {
    padding: 5px;
}

.tags-links {
    font-style: italic;
}

.tags-links a:first-child:before {
	content: "\f302";
	position: relative;
	top: -1px;
}

#random-episodes {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

@media screen and (max-width: 686px) {
    #random-episodes {
	width: 100%
    }
}

#featured-episode {
    margin-bottom: 24px;
    text-align: center;
    vertical-align: middle;
    position: relative;
}

@media (min-width: 480px) {
    #featured-episode {
	    padding: 144px 0;
    }
}

#featured-episode-background {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    content : "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity : 0.4;
    z-index: -1;
}

#featured-episode-player {
    width: 70%;
    margin: 0 auto;
}

@media screen and (max-width: 699px) {
    #featured-episode-player {
	width: 481px;
    }
}

@media screen and (max-width: 480px) {
    #featured-episode-player {
	width: 100%;
    }
}

#featured_episode_foreground {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.prev-button {
    position: absolute;
    width: 80px;
    top: 50%;
    left: 0;
}

.prev-button-image, .next-button-image {
    transition: opacity 0.25s, margin 0.25s;
    opacity: 0.6;
}

.prev-button-image:hover {
    margin-right: 6px;
    opacity: 1.0;
}

.next-button-image:hover {
    margin-left: 6px;
    opacity: 1.0;
}

.next-button {
    position: absolute;
    width: 80px;
    height: 120px;
    display: block;
    top: 50%;
    right: 0;
}


.site-footer {
    margin-top: 1em;
    margin-bottom: 0px;
    padding-top: 1em;
    background-color: #444;
    color: #ccc;
    font-size: 12px;
    text-align: center;
    vertical-align: top;
}

.site-footer a {
    text-decoration: none;
}

.site-footer a:link {
    color: #eee;
}

.site-footer a:visited {
    color: #999;
}

.site-footer a:hover {
    color: #fff;
}

.site-footer a:active {
    color: #777;
}


.site-footer th, caption {
    color: #bbb;
}

.site-footer td {
    color: #bbb;
}

.footer-logo {
    display: inline-block;
    vertical-align:top;
    width: 15%;
}

img.footer-logo {
    width: 100%;
}

a.calendar-highlight:link {
    color: #DFA200;
}

a.calendar-highlight:hover {
    color: #DF3200;
}

a.calendar-highlight:visited {
    color: #B68500;
}

a.calendar-highlight:active {
    color: #B62900;
}

td#next {
    text-align:right;
    padding-right: 2em;
}

.site-footer h2 {
    text-transform: uppercase;
    font-size: 12px;
    color: #bbb;
}

.site-footer ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.site-footer .widget {
	width: 100%
}


.footer-elements {
    display: inline-block;
    width: 80%;
    margin: 0px auto;
}

.footer-element {
    display: inline-block;
    text-align: left;
    width: 24%;
    vertical-align: top;
}

#tag_cloud-2 {
    width: 48%;
}

.footer-element .widgettitle {
    margin: 0;
}

.site-info {
    color: #eee;
    margin: 12px;
    text-align: left;
    font-size: 8pt;
    max-width: 100%;
    padding-bottom: 6px;
    padding-top: 30px;
    margin-top: 0;
    margin-bottom: 0;
}

.site-info img {
    vertical-align: middle;
}

.page-title,
.archive-header {
    background-color: white;
}

.page-title,
.archive-title,
.archive-meta {
	font: 300 normal 30px "Open Sans", Helvetica, sans-serif;
}

tr.archive-episode-row {
    display: table-row;
    border-top: 1px solid lightgray;
}

tr.archive-episode-row:hover {
    background: #EDEBE8;
}

.archive-episode-row .episode-icon {
    text-align: left;
}
.archive-episode-row .episode-title {
    color: #0199CA;
    font-size: larger !important;
    font-weight: bold !important;
}
.archive-episode-row .episode-meta {
    font-weight: bold !important;
}
.archive-episode-row div.episode-contributor-names {
    display: inline-block;
}
.archive-episode-row div.episode-contributor-avatars {
    display: inline-block;
    margin-bottom: 4pt;
    margin-right: 4pt;
}
.archive-episode-row div.episode-meta {
    vertical-align: baseline;
}
.archive-episode-row img.tiny-icon {
    vertical-align: -10%;
}
.archive-episode-row td {
    vertical-align: top;
    padding: 32px 8px 32px 0px;
}

td.archive-episode-description {
    width: 50%;
}

.episode-contributor-avatars > img {
    width: 48px;
    height: 48px;
}
.archive-episode-icon img {
    width: 96px;
}

.comments-title,
.comment-list,
.comment-reply-title,
.must-log-in,
.comment-respond .comment-form,
.comment-respond iframe {
    width: 100%;
    max-width: 100%;
}