/**
 * @file liferea.css  Liferea rendering stylesheet
 *
 * Copyright (C) 2004-2020 Lars Windolf <lars.windolf@gmx.de>
 * Copyright (C) 2004 delusional <delusional@dx13.co.uk>
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License along
 * with this program; if not, write to the Free Software Foundation, Inc.,
 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
 */

/*

   Font Definitions:
   =================

   No style definition should set absolute font sizes,
   font families or line heigth and spacing. This is to allow a GNOME
   preference controlled default font size.

   Color Definitions:
   ==================

   To allow using GTK theme colors the following key words
   will be replaced with the corresponding GTK theme color values:

   GTK-COLOR-FG
   GTK-COLOR-BG
   GTK-COLOR-LIGHT
   GTK-COLOR-DARK
   GTK-COLOR-MID
   GTK-COLOR-BASE
   GTK-COLOR-TEXT
   GTK-COLOR-NORMAL-LINK
   GTK-COLOR-VISITED-LINK
 */

body {
	background: #GTK-COLOR-BASE;
	color: #GTK-COLOR-TEXT;
	padding:0;
	margin:0;
}

blockquote {
        border-left: 3px solid #GTK-COLOR-DARK;
        background: #GTK-COLOR-BG;
        padding: 6px;
        font-style: italic;
        margin: 5px 20px;
	clear:both;
}

a {
	color: #GTK-COLOR-NORMAL-LINK;
}

a:visited {
	color: #GTK-COLOR-VISITED-LINK;
}

dd {
	padding-left: 30px;
}

section, div.content svg, div.content * img {
	max-width: 100%;
	height: auto !important;
}

figure, iframe {
	max-width: 100%;
	box-sizing: border-box;

	/* Note: object-fit would be best practice here, but it fails
	   on embedded Youtube videos (pushing the embed iframe far
	   to the right with the controls being not in the place
	   visually shown) */
}

div.content * img {
	border:0;
	margin:2px;
}

div.content img.thumbnail {
	border:0;
	margin-right:12px;
}

img.gravatar {
	/* gravatars have align="left" so we need proper margin */
	margin-right:12px;
}

#map img {
	/* OpenStreeMap map tiles must have no border */
	border:0px;
	margin:0px;
}

/* styles for the item description (currently also used for
   the feed description) */
table.itemhead, table.feedhead {
	margin:0;
	width:100%;
	border:0;
	border-bottom: 2px solid #GTK-COLOR-DARK;
	clear:both;
	color:#GTK-COLOR-TEXT;
}

.itemhead, .feedhead {
	background-color: #GTK-COLOR-MID;
}

table.itemhead * a.itemhead {
	text-decoration:none;
	color:#GTK-COLOR-TEXT;
	font-weight:bold;
}

table.itemhead * td {
	padding-top: 4px;
}

td.head_favicon {
	width: 20px;
	padding-left: 10px;
	vertical-align: middle;
}

td.head_title {
	padding:2px 5px;
	width: 100%;
	vertical-align: middle;
}

table.headmeta {
	background:#GTK-COLOR-BG;
	width:100%;
	border:0;
	border-bottom:#GTK-COLOR-MID solid 1px;
	margin:0;
}

table.headmeta td {
	padding:1px 6px 1px 12px;
	font-size:0.9em;
}

.hidden {
	visibility:hidden;
	display:none;
}

.author, .categories, .source {
        padding:0;
	margin-left:0;
        margin-right:12px;
}

.date {
	white-space:nowrap;
	text-align:right;
	padding-right:5px;
}

div.content, div.item_comments {
	padding:0px 6px 0px 12px;
}

div.comment {
	border:1px solid #GTK-COLOR-DARK;
	margin-bottom:5px;
}

div.comment_body {
	padding-left:6px;
	padding-right:6px;
}

div.comment_title {
	padding-left:6px;
	padding-right:6px;
	font-weight:bold;
	background:#GTK-COLOR-BG;
}

a.favicon {
	text-decoration:none;
}

a.favicon img {
	width:16px;
	border:0;
	margin:0;
	padding:0;
}

/* style for the feed fetch error box at the beginning
   of the feed description and for item comment feeds */
#errors {
	border:0;
	border-bottom:1px solid black;
	margin:12px 24px;
	padding:12px;
	background:#ffa;
	color:black;
	border:1px solid #GTK-COLOR-DARK;
}

#errors ul {
	list-style-type: none;
	padding-inline-start: 15px;
}

#errors * li {
	padding:1px;
}

pre.errorOutput {
	margin:10px 15px;
	padding:5px;
	border:2px solid #GTK-COLOR-DARK;
	background:#GTK-COLOR-LIGHT;
	overflow:auto;
}

del {
	text-decoration: line-through;
}

ins {
	text-decoration: underline;
}

/* namespace specific styles */

.slash {
	background:#60A080;
	padding-left:5px;
	padding-right:5px;
}

.slashSection, .slashDepartment {
	padding-right:2px;
	color:black;
}

.slashValue {
	padding-right:6px;
	color:white;
	font-weight:bold;
}

div.photoheader {
	margin:10px 0;
	padding-left:10px;
	padding-right:10px;
	background-color:#GTK-COLOR-DARK;
	color:#GTK-COLOR-TEXT;
}

.video-embed {
	position: relative;
	max-width: 700px;
	width: 100%;
	margin-bottom: 10px;
}

.video-embed .thumb {
	max-width: 700px;
	width: 100%;
}

.video-embed .play-btn {
	position: absolute;
	max-width: 700px;
	width: 100px;
	height: 100px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.video-embed .play-btn svg {
	transition: all .3s ease;
	fill: #fff;
}

.video-embed .play-btn:hover svg,
.video-embed .play-btn:focus svg {
	cursor: pointer;
	fill: #ddd;
}
