@charset "utf-8"; /*****************************************************************/ /* Podstawowy szablon dokumentu. Definiuje kształty i rozmiary. */ /* Artur Miernik © II 2012 r. */ /*****************************************************************/ /* Ogólne sterowanie dokumentem: */ .komornik { clear: both } .policjant { clear: right } .milicjant { clear: left } .patriota { float: right } .lewus { float: left } /* Układ dokumentu: */ html, body { min-height: 100%; /* Wymuszamy maksymalną wysokość zarówno dla jak i , bo niewypełnione zawsze jest krótsze niż . */ background: #eae9e3 } html { } body { background: url(tlo-body-gora.png) repeat-x left top; text-align: center /* Umożliwiamy starym przeglądarkom centrowanie elementów blokowych. */ } #spinacz { /* Warstwa główna, zwana wrapperem, mainem etc. */ text-align: left; /* Przywraca domyślne formatowanie. Konieczne po użyciu centrowania w rodzicu, czyli w znaczniku . */ position: relative; /* Jeśli w elemencie nadrzędnym (otaczającym) ustawimy pozycjonowanie relatywne, to wszystkie zawarte w nim elementy pozycjonowane absolutnie zostaną rozmieszczone względem niego. */ width: 960px; background: #eae9e3 url(bg.png); margin: 0px auto } #spinacz .drobnica { text-align: center; color: #eae9e3; background: #787460; float: left; display: inline-block; padding: 5px; width: 950px; /* Całość, tj. 960px minus powyższy padding. */ margin-bottom: -30px; clear: both; } #spinacz .drobnica a { text-decoration: none; color: #fff; background: #64614f; padding: 5px; border-bottom: 1px dotted #eae9e3; } #spinacz .drobnica a:before { content:"\A0 " /* Niełamliwa spacja. */ } #ramka { /* zawiera #winietę, #menu i #sedno. */ } #menu { background: #9a957a url(bg.png); height: 361px; padding: 0 110px 10px; border-bottom: 6px solid #787460; } #menu li { float: left; text-align: center; width: 236px; height: 236px /* Pierwotnie dałem 246px, ale doszła obwódka. */ } #menu a { text-decoration: none; color: #fff; text-shadow: -1px -1px 0px rgba(0,0,0,.5), 10px 15px 20px rgba(0,0,0,.5), -1px -1px 2px red, 1px 1px 2px cyan, -10px 0 50px #000; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease } #menu a:hover { text-decoration: none; color: rgba(255,255,255,.8); text-shadow: -1px -1px 0px rgba(0,0,0,.5), 10px 15px 20px rgba(0,0,0,.5), -1px -1px 2px red, 1px 1px 2px cyan, -10px 0 50px #000 } #menu-Znak, #menu-Druk, #menu-Ekran { border-radius: 50%; border-top: 15px #fff solid; border-right: 10px #fff solid; border-bottom: 10px #fff solid; border-left: 15px #fff solid; -webkit-box-shadow: inset 3px 3px 10px -5px #000,3px 5px 10px -5px #403e33; -moz-box-shadow: inset 3px 3px 10px -5px #000,3px 5px 10px -5px #403e33; box-shadow: inset 3px 3px 10px -5px #000,3px 5px 10px -5px #403e33; /*behavior: url(PIE.htc); */ } #menu-Znak { background: url(menu-Znak-tlo-mono.png) no-repeat; margin-right: -12px; margin-top: 50px; } #menu-Druk { background: url(menu-Druk-tlo-2-mono.png) no-repeat; margin-top: 50px; margin-right: -12px; margin-left: -10px; } #menu-Ekran { background: url(menu-Ekran-tlo-2-mono.png) no-repeat; margin-top: 50px; margin-left: -10px; } #menu-Znak:hover { background: url(menu-Znak-tlo.png) no-repeat; margin-top: 48px; text-shadow: -1px -1px 0px rgba(0,0,0,.5), 10px 15px 20px rgba(0,0,0,.7), -2px -2px 3px red, 2px 2px 3px cyan, -10px 0 50px #000 } #menu-Druk:hover { background: url(menu-Druk-tlo-2.png) no-repeat; margin-top: 48px; text-shadow: -1px -1px 0px rgba(0,0,0,.5), 10px 15px 20px rgba(0,0,0,.7), -2px -2px 3px red, 2px 2px 3px cyan, -10px 0 50px #000 } #menu-Ekran:hover { background: url(menu-Ekran-tlo-2.png) no-repeat; margin-top: 48px; text-shadow: -1px -1px 0px rgba(0,0,0,.5), 10px 15px 20px rgba(0,0,0,.7), -2px -2px 3px red, 2px 2px 3px cyan, -10px 0 50px #000 } #winieta { /* Czyli #header. */ } #winieta .obraz-winiety { } #sedno { /* Zawiera #tresc i #marginalia-prawe. */ } #tresc { /* border-top: 1px #9a957a dotted */ /* tylko roboczo, bo zobaczyć gdzie się kończy */ } #tresc .artykul:first-of-type { border-top: 1px #fff dotted /* tylko roboczo, bo zobaczyć gdzie się kończy */ } #tresc .artykul{ /*min-height: 1200px; *//* Póki co - największa wysokość spośród łatwo dostępnych monitorów. Docelowo, powinna tu być wysokość szczytana JS z bieżącego monitora. */ padding: 100px 110px; clear: both; /*border-bottom: 1px #9a957a dotted*/ /* tylko roboczo, bo zobaczyć gdzie się kończy */ } #tresc #Znak { padding-bottom: 500px; background: url(tlo-przekladka-znak.png) no-repeat bottom right } #tresc #Druk { padding-bottom: 500px; background: url(tlo-przekladka-druk.png) no-repeat bottom right } #tresc #Ekran { padding-bottom: 500px; background: url(tlo-przekladka-ekran.png) no-repeat bottom right } #tresc .galimatias { /*border: 1px dashed #fcf9ee;*/ margin: -1px; white-space: nowrap; width: 100%; /* IE6 wymaga jakiejkolwiek długości */ overflow: hidden; -o-text-overflow: clip; text-overflow: clip /* zamiast clip może być ellipsis */ } #tresc .galimatias .obracany { display: block; float: left; position: absolute; margin-top: 300px; color: rgba(179,174,152,.8); text-shadow: 1px 1px 0 rgba(255,255,255,.33), 30px 30px 0 #dedbcf } .obracany:nth-of-type(even){ -webkit-transform: rotate(-5deg);-moz-transform: rotate(-5deg);-ms-transform: rotate(-5deg);-o-transform: rotate(-5deg);transform: rotate(-5deg); } .obracany:nth-of-type(odd){ -webkit-transform: rotate(5deg);-moz-transform: rotate(5deg);-ms-transform: rotate(5deg);-o-transform: rotate(5deg);transform: rotate(5deg); } .artykul p{ color: #9a957a; text-shadow: 2px 1px 0 #fcf9ee; margin-bottom: .5em } .artykul h1{ color: #b3ae98; text-shadow: -1px -1px 0px #9a957a, 1px 1px 0px #fff, -10px 0 70px #9a957a; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .artykul a:hover h1{ color: #fff; text-shadow: -1px -1px 0px #9a957a, -10px 0 100px #9a957a; /*background: url(tlo-trans-skosy-000.png);*/ } /* Przeskok: */ .przeskok { /* outline: red solid 1px; margin: -1px;*/ } .przeskok a{ text-decoration: none } .powrot { display: block; float: right; z-index: 1; width:70px; height:70px; margin: 13px; border: solid #fff 4px; border-radius: 50%; background: #fff url(powrot-strzalka.png) no-repeat 50% 50%; /* 50% 50% to tyle samo, co center center. */ background-size: 70%; box-shadow: 2px 2px 2px 0px #9a957a; -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg); -webkit-transition: 0.3s all ease;-moz-transition: 0.3s all ease;-ms-transition: 0.3s all ease;-o-transition: 0.3s all ease;transition: 0.3s all ease; /*behavior: url(PIE.htc);*/ } .powrot:hover{ color: #fff; width:100px; height:100px; margin: -4px; background: #fff url(powrot-strzalka-ciemna.png) no-repeat -5px -5px; /* Przesuwam o -5px, bo środek geometryczny strzałki, nie jest jej środkiem optycznym. */ background-size: 100%; border: solid #fff 6px; border-radius: 10% 50% 50% 50%; -webkit-transform: rotate(0);-moz-transform: rotate(0);-ms-transform: rotate(0);-o-transform: rotate(0);transform: rotate(0); box-shadow: /*inset 3px 3px 10px -5px #9a957a,*/ 0 0 0 3px #9a957a; /*behavior: url(PIE.htc); */ } /* Marginalia: */ #marginalia-prawe { } #marginalia-prawe .artykul{ } /* Stopka strony: */ #stopka { margin-top:-120px; padding: 130px 25px 70px 25px; background: #b3ae98; text-shadow: 0 1px 0 #787460; color: #eae9e3 } #stopka h3 { color: #fff } #stopka #stopka-lewa { float: left; width: 265px; height: 100%; margin-right: 43px; padding: 0 40px 0 0; border-right: 2px dashed #eae9e3 } #stopka #stopka-lewa ul:nth-child(2) { padding: 42.8% 0; /* Odstęp ustawiony pod FF. Opera ma mnimalnie mniejszy, a Chrome sporo większy, toteż — POSZUKAĆ PRAWIDŁOWEGO ROZWIĄZANIA! Docelowo szukać -> równych odstępów wertykalnie. */ } #stopka #stopka-prawa { float: right; width: 560px } #stopka li { display: block } #stopka li:before { color: #fff } #stopka a { color: #eae9e3 } #stopka a:hover { color: #fff } /* DODATKI: -------------------------------------------------------- */ /* Galeria Lightbox: */ .lbGallery { /*background-color: #eae9e3;*/ /*padding: 10px;*/ /*width: 520px;*/ } .lbGallery ul { list-style: none } .lbGallery ul li { display: block } .lbGallery ul img { display: block; float: left; /* Dodałem. */ width:70px; height:70px; margin: 13px; border: solid #fff 4px; border-radius: 0 25px; box-shadow: 2px 2px 2px 0px #9a957a; -webkit-transition: 0.2s all ease;-moz-transition: 0.2s all ease;-o-transition: 0.2s all ease;transition: 0.2s all ease; /*behavior: url(PIE.htc); */ } .lbGallery ul a { display: inline-block; /* Jeśli będzie cokolwiek innego, miniatury zaczną fiksować podczas przejścia (transition). */ width: 100px; height: 100px /* Skoro powyżej użyłem inline-block to tutaj wymuszam wielkość. */ } .lbGallery ul a:hover img { color: #fff; width:100px; height:100px; margin: -4px; border: solid #fff 6px; border-radius: 0 35px; box-shadow: 0 0 0 3px #9a957a; /*behavior: url(PIE.htc); */ } #lightbox-loading-link img {border-radius: 0 !important} /* Kasuję obramowanie z animacji, odziedziczone po .lbGallery ul img. */ /* Koniec galerii Lightbox */ /* Slajdolot: */ #slajdolot { background: #c9c6bb; box-shadow: 0px 10px 30px -20px #9a957a; background: -webkit-radial-gradient(top, #c9c6bb 0%, #c9c6bb 20%, #eae9e3 70%); background: -moz-radial-gradient(top, #c9c6bb 20%, #eae9e3 70%); background: -o-radial-gradient(top, #c9c6bb 0%, #c9c6bb 20%, #eae9e3 70%); background: radial-gradient(top, #c9c6bb 0%, #c9c6bb 20%, #eae9e3 70%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c6bb', endColorstr='#eae9e3',GradientType=0 ); /* Do poprawienia na owalny j.w.! */ padding-bottom: 1px; } #slajdolot .przegladarka { height: 300px; /* text-align: center; line-height: 300px */ } #slajdolot .wskaznik { z-index: 1; position: relative; /* background: #eae9e3; */ text-align: center; margin: 20px 0 } #slajdolot .wskaznik span { display: inline-block; width: 12px; height: 12px; margin: 0 2px 0 2px; text-indent: -9999em; background: rgba(255,255,255,.8); border-radius: 6px; behavior: url(PIE.htc) } #slajdolot .wskaznik span.active { background: #999966 } #slajdolot .slajd { width: 960px; height: 300px; /* background: -webkit-radial-gradient(top, #c9c6bb 0%, #c9c6bb 20%, #eae9e3 78%); background: -moz-radial-gradient(top, #c9c6bb 0%, #c9c6bb 20%, #eae9e3 78%); background: -o-radial-gradient(top, #c9c6bb 0%, #c9c6bb 20%, #eae9e3 78%); background: radial-gradient(top, #c9c6bb 0%, #c9c6bb 20%, #eae9e3 78%)*/ } #slajdolot #slajd-zajawka { background: url(slajd-tlo-rozawiatrow.svg) no-repeat } #slajdolot #slajd-zajawka blockquote { margin-left: 460px; margin-top: 10px } #slajdolot #slajd-zajawka h1 { margin-left: 450px } #slajdolot #slajd-zajawka h2 { margin-left: 460px } #slajdolot #slajd-logo { background: url(slajd-tlo-zarowka.svg) no-repeat } #slajdolot #slajd-logo h1 { margin-left: 364px; margin-top: 20px } #slajdolot #slajd-logo h2 { margin-left: 408px; margin-top: 10px } #slajdolot #slajd-logo blockquote { margin-left: 421px; margin-top: 10px } #slajdolot #slajd-dtp { background: url(slajd-tlo-kartka.png) right no-repeat } #slajdolot #slajd-dtp blockquote { margin-top: 10px } #slajdolot #slajd-dtp h1, #slajd-dtp h2, #slajd-dtp blockquote { margin-left: 15px } #slajdolot #slajd-identyfikacja { background: url(slajd-tlo-Moebius.svg) right no-repeat } #slajdolot #slajd-identyfikacja h2 { margin-top: 30px } #slajdolot #slajd-identyfikacja h2, #slajd-identyfikacja h1, #slajd-identyfikacja blockquote { margin-left: 15px } #slajdolot #slajd-infografika { background: url(slajd-tlo-ikona.svg) no-repeat } #slajdolot #slajd-infografika h1 { margin-left: 405px; margin-top: 10px } #slajdolot #slajd-infografika h2 { margin-left: 383px } #slajdolot #slajd-infografika blockquote { margin-left: 355px; margin-top: 10px } /* Koniec slajdolotu */