/*
Theme Name: Coffee Cream 
Theme URI: http://themes.onliniak.ct8.pl/
Author: Rafael Pszenny
Description: Coffee cream is a lightweight and responsible blog theme for WordPress written for long articles, 2G networks and laptops. Compatible with Google / Bing, HTML5, CSS3 and SVG1.1. Does not have jQuery enabled by default, theme options, headers. It integrates with Google Translate, Microsoft Translate, Yandex Translate (Beta); sharing in social media and double navigation (search in all categories and only in selected category).
Version: 1.1
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: coffee-cream
Tags: featured-images, left-sidebar, translation-ready, blog

"Modern browsers block on external CSS before painting content to the screen. This incurs additional network latency and increases the time it takes to display content to the screen. To optimize the time to render, if the external CSS resources are small, you can insert those directly into the HTML document. Inlining small CSS in this way allows the browser to proceed with rendering the page." Google Insight
*/
/* Download font from /font/ folder | Pobierz czcionkę z folderu /font/ */
@font-face {
font-family:'Raleway';
font-style:normal;
font-weight:400;
src:local(Raleway),local(Raleway-Regular),url(/wp-content/themes/coffee-cream/font/Raleway-Regular.woff2) format("woff2")
}
/* Extra CSS for mobile and desktop | Dodatkowy CSS dla urządzeń mobilnych i komputerów */
@media screen {
	/* Table | Tabele */
article table,article th,article td {
border:1px solid #000
}

dd {
border-left:thick double #000
}

dt {
font-weight:700
}
/* Bloquotes | Cytaty */
blockquote {
border-left:thick double #000;
background:lightgray;
font-style:italic;
font-family:'Gabriola',fantasy
}

blockquote:before {
content:"\201C";
font-size:300%
}

blockquote:after {
content:"\201D";
font-size:300%
}
/* Accept only correct width | Akceptuj tylko ustaloną szerokość (albo wstaw suwak) */
pre,p,div.tagcloud {
overflow:auto
}
/* Sticky post button | Wyróżnione wpisy */
.sticky::before {
content:"<?php _e('Sticky','coffee-cream'); ?>";
background-color:#e6e6fa;
border-radius:5px;
box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
border:2px solid #e6e6fa
}
/* Comments | Komentarze */
li.comment {
list-style:none;
display:table
}
/* Author comments | Komentarze autora */
li.bypostauthor::before {
content:"<?php _e('Odpowiedź autora:','coffee-cream'); ?>";
background-color:#e6e6fa;
border-radius:5px;
box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
border:2px solid #e6e6fa
}
/* Links | Linki */
a {
color:#000
}
/* Break between links in mobile menu | Odstęp między linkami w mobilnym menu */
ul,li {
line-height:1cm
}
/* Accept only correct width | Akceptuj tylko ustaloną szerokość (albo wstaw suwak) */
textarea,input {
max-width:90%
}
/* Menu */
li.menu-item {
display:block
}

ul.sub-menu {
display:none
}

html > body > div.primary-menu > ul.menu > li.menu-item:hover > ul.sub-menu {
display:block
}
/* Accept only correct width | Akceptuj tylko ustaloną szerokość (albo wstaw suwak) */
nav img {
width:auto;
border:0;
height:auto;
border-radius:0;
padding:0
}
/* Break between links in post pagination | Odstęp między linkami w archiwach */
a.page-numbers {
letter-spacing:3px;
text-decoration:none;
color:#FFC;
background-color:#3a5f0b;
margin-left:8px;
border-radius:5px
}
}
/*12" Netbook mode (basic screen size) | Tryb laptopa (podstawowa wersja strony została opracowana dla 12 calowych laptopów, a następnie w miarę możliwości jest powiększana do odpowiednich rozmiarów) */
@media screen and (min-width: 1000px) {
	/* Accept only correct width | Akceptuj tylko ustaloną szerokość (albo wstaw suwak) */
	article.comment-body{
		width:400px
	}
	
li.bypostauthor::before {
position:absolute
}
/* Search form | Wyszukiwarka (formularz z napisem szukaj) */
form.search-form {
width:450px;
padding:15px;
font-size:13px;
color:#eee;
text-align:center
}

form.search-form input {
height:20px;
background:#F0E9D7;
border:0;
font:bold 15px;
text-align:center;
border-radius:8px
}

form.search-form input:focus {
outline:0;
background:#7b93cf;
box-shadow:0 0 2px rgba(0,0,0,.8) inset;
font:bold 15px;
color:#fff;
text-align:center;
border-radius:8px
}
/* Headings font | Wybierz czcionkę dla nagłówków */
h1,h2,h3,h4,h5,h6 {
font-family:'Gabriola',fantasy
}
/* Basic desktop (cream container) | Podstawowy styl komputerowy (kremowy obszar) */
article {
font-family:'Raleway',sans-serif;
font-size:19px;
line-height:29px;
color:#333;
padding:0 1.5cm 1.5cm;
background-color:#faf7ed;
float:right;
border-radius:25px;
width:596px;
margin:40px
}
/* Basic desktop navigation (brown container) | Podstawowy styl komputerowy (wszystko poza głównym obszarem, w kolorze brązowym) */
html,aside,aside a,nav,nav a,footer a {
background-color:#2a1c01;
color:#fff;
font-family:'Comic Sans MS',cursive;
font-size:small;
line-height:21px
}

h1 {
padding-top:1.5cm
}
/* Basic width (allow only for use 1000px) | Podstawowa szerokość (pozwala przeglądarce na używanie tylko 1000px szerokości ekranu, po przekroczeniu limitu przestaje rysować kontenery, tutaj wykorzystywane do przylegania kontenera artykuł do nawigacji)  */
main {
width:1000px
}
/* Basic width navigation | Analogicznie, podstawowa szerokość nawigacji */
nav {
width:225px
}
/* Menu */
div.primary-menu {
list-style-type:none;
margin:auto;
padding:0;
overflow:auto;
background-color:#cfb77b;
border-radius:25px;
font-size:medium;
font-family:"Comic Sans MS",cursive
}

li.menu-item {
float:left
}

li.menu-item a {
display:block;
text-align:center;
padding:14px 16px;
text-decoration:none
}

li.menu-item a:hover {
background-color:#7b93cf;
color:#fff
}
/* Gallery | Galeria */
.gallery-caption {
color:#888;
font-size:12px;
margin:0 0 12px
}

div.gallery-columns-4 {
column-count:4
}
}
/* Enable gallery only for tablets| Pozwól na wyświetlenie galerii tylko tabletom */
@media screen and (min-width: 600px) {
article.format-gallery img.attachment-post-thumbnails {
float:none
}

div.gallery-columns-2 {
column-count:2
}

div.gallery-columns-3 {
column-count:3
}
}
/* 13" Notebook | Rozszerzenie dostosowujące szerokość ekranu pod 13 calowe urządzenia jak tablety, laptopy, all in one */
@media screen and (min-width:1270px) {main
	{width:100%
	}
	article{
		width : 750px
	}
}
/* 15" Notebook | Analogicznie ale do 15" (standardowych) laptopów */
@media screen and (min-width:1350px) and (max-width:1500px) { 
	main{width:1264px}
	nav{margin-left:1cm;margin-top:1cm}
	}
/* 20" Desktop | Analogicznie do 20" ekranów komputerowych */
@media screen and (min-width:1550px) { 
nav, footer, nav a { 
font : large/30px 'Comic Sans MS', cursive; 
} 
article { 
font : 24px/35px 'Raleway', sans-serif; 
line-height : 1.444; 
width : 900px; 
padding : 2cm; 
float : right; 
	margin-right:100px
}
	div.primary-menu{
		font-size:large
	}
} 
/* 23" Desktop Full HD | Dostosuj ekran z mini laptopika do porządnego ekranu Full HD */
@media screen and (min-width:1920px) { 
	h1,h2,h3,h4,h5,h6 {font-family:georgia,serif}
article { 
width : 1000px; 
padding : 5cm; 
} 
nav, footer, nav a { 
width : 500px; 
margin : 50px; 
font : larger/50px 'Georgia', serif; 
} 
	div.primary-menu{
		font-size:x-large;
			font-family:Arial,sans
	}
	}
/* 4K TV and Desktop (beta) | Hipotetyczne wyliczenia co do monitorów 4k */
	@media screen and (min-width:2500px) { 
		main{width:80%}
		article{margin : 0;font : 36px/60px 'Raleway', sans-serif;}
		 nav, footer, nav a, div.primary-menu{
			 font-size:x-large;}
} 
/* WordPress CSS | Domyślny CSS WordPressa */
@media all {
.alignnone {
margin:5px 20px 20px 0
}

.aligncenter,div.aligncenter {
display:block;
margin:5px auto
}

.alignright {
float:right;
margin:5px 0 20px 20px
}

.alignleft {
float:left;
margin:5px 20px 20px 0
}

a img.alignright {
float:right;
margin:5px 0 20px 20px
}

a img.alignnone {
margin:5px 20px 20px 0
}

a img.alignleft {
float:left;
margin:5px 20px 20px 0
}

a img.aligncenter {
display:block;
margin-left:auto;
margin-right:auto
}

.wp-caption {
background:#fff;
border:1px solid #f0f0f0;
max-width:96%;
padding:5px 3px 10px;
text-align:center
}

.wp-caption.alignnone {
margin:5px 20px 20px 0
}

.wp-caption.alignleft {
margin:5px 20px 20px 0
}

.wp-caption.alignright {
margin:5px 0 20px 20px
}

.wp-caption img {
border:0 none;
height:auto;
margin:0;
max-width:98.5%;
padding:0;
width:auto
}

.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
margin:0;
padding:0 4px 5px
}

.screen-reader-text {
clip:rect(1px,1px,1px,1px);
position:absolute!important;
white-space:nowrap;
height:1px;
width:1px;
overflow:hidden
}

.screen-reader-text:focus {
background-color:#f1f1f1;
border-radius:3px;
box-shadow:0 0 2px 2px rgba(0,0,0,0.6);
clip:auto!important;
color:#21759b;
display:block;
font-size:14px;
font-size:.875rem;
font-weight:700;
height:auto;
left:5px;
line-height:normal;
padding:15px 23px 14px;
text-decoration:none;
top:5px;
width:auto;
z-index:100000
}
/* Feature image border | Ramka wokół obrazków wyróżnionych */
img.attachment-post-thumbnails {
width:222px;
border:ridge;
padding:10px 20px;
height:200px;
border-radius:15px
}
}
/* Print mode (only article ) | Drukarka (drukuje tylko treść wpisu) */
@media print {
h1 {
text-align:center
}

a {
color:#000
}

article {
margin:0 auto
}

div#respond.comment-respond,nav,aside,.menu-menu-container,footer {
display:none
}
}
/* Mobile | Podstawowy styl dla urządzeń mobilnych */
@media screen and (max-width:999px) {
	/* Brown border | Brązowa ramka */
body {
max-width:92%;
margin:auto;
background-color:#2a1c01
}
/* And cream center | Kremowe wnętrze */
main,div.primary-menu {
background-color:#faf7ed;
padding:10px;
max-width:97%
}
/* Links break | Odstęp między linkami */
a {
line-height:1cm
}
/* SVG border | Wypełnienie ikonek SVG */
nav svg {
background:#2a1c01;
border-radius:25%
}
}
/* Block float on small smartphones | Nie pokazuj obrazka wyróżniającego po prawej na zbyt małych urządzeniach */
@media screen and (min-width:600px) {
img.attachment-post-thumbnails {
float:right
}
}