/* style dla strony ... index.html ... na kodach responsive-web-designe ... - wymiary w procentach i px */
/* K O M P U T E R Y */
* {padding:0;margin:0;}
html
{
width: 100%;
height: 100%;
}
body
{
font-family: serif, Arial, Helvetica, Sans-serif;
font-size: 14px;
/* line-height: 1.5; */
font-weight: 400;
color: #434343;
/* background: #FFF; */ }
.container
{
width: 90%;
max-width: 1050px;
margin: 0 auto;
background-color: gainsboro; /* #ffffff; */
}
header
{
margin: 25px 0;
background-color: gray;
}
/* header img {width:100%;} */
header img { /* Logo firmy */
position: relative;
top: 2.4px;
width: 260px;
height: 122px; /* 85 */
margin-bottom: -37px;
background-color: gray; /* red 000000 */
float: left;
}
/* KONTAKT - Dopisalem */
table.kontakt {
position: relative;
width: 100%; /* 750 */
height: 30px;
left: 0px;
font-family: Georgia;
font-size: 14px;
font-weight: bold;
top: ; /* -30 -10 */
margin-bottom: -30px;
background-color: yellow;
padding-left: 5px;
padding-right: 5px;
}
td.email {
position: relative;
/* left:; 5 10 */
}
td.email a:hover {
position: relative;
color: red !important;
text-decoration: underline !important;
background-color: lime;
}
td.email a:active {
position: relative;
color: blue !important;
text-decoration: underline !important;
background-color: aqua;
}
td a.questbook:hover{
position: relative;
background-color: #ffffff !important;
color: #000000 !important;
}
td.telephon {
position: relative;
/* right:; -25 / -13*/
}
/* /KONTAKT */
aside
{
float:left;
margin: 30px 0 10px;
}
aside nav ul
{list-style: none;
}
aside nav ul li
{
margin-bottom: 1px;
}
aside nav ul li a
{display: block;
text-decoration: none;
color: #000;
background: #FFC000;
padding: 8px 20px;
}
aside nav ul li a:hover
{
background: #212121;
color: #FFF;
}
#main
{
float: righ t;
margin: 0 0 25px;
}
footer
{
clear: both;
color: #FFF;
background: #ffffff; /* #121212 */
padding: 15px 0 15px 30px;
margin: 0 0 40px; /* 30*/
height: 100px; /* dopisalem */
}
/*------------------- W S Z Y S T K I E M O B I L N E P O C Z A T E K ------------------------------ */
@media (min-width: 800px) {
aside
{
width: 30%;
}
#main
{
width: 99%; /* 65% */
}
#postit /* dopisalem - dotyczy popupka ale bez ponizszego LOGO ...#postit1... */
{
position: relative;
width: 95% !important;
right: 22.4% !important;
}
#postit1 /* dopisalem -- dotyczy tylko logo w popupek ...#postit... */
{
position: relative;
width: 100% !important;
}
}
/* HTC POZIOM I PION
- ale w pionie nie ustawia jednoczesnie tak jak w poziomie w chcianym miejscu ponizsze menu ... MENU - MOBILE ... z jego wyskakujacym okienkiem i nie da sie ustawic jego rozmiarow szerokosci. W poziomie jest wszystko w porzadku. W pionie sa te same kody, ale dla mwdiow ... @media screen and (max-width: 599px) ...
*/
@media (max-width: 800px)
{
aside, #main
{
width: 100%;
}
/* HTC pion i poziom */
.wespeak /* dopisale - ustala rozmiar czcionki w tekscie ...We speak English & Polish pod slajdami na stronie glownej NR - 2 ...index.html... */
{
position: relative;
font-size: 19px;
text-align: center !important;
word-spacing: -3.3px !important;
top: -4px !important;
}
/* HTC poziom */
#postit /* dopisalem - dotyczy popupka ale bez ponizszego LOGO ...#postit1... */
{
position: absolute; /* relative */
top: 64px !important;
width: 85.5% !important; /* tutaj chyba nie dziala */
left: 5% !important; /* 32px */
padding-right: 20% !important; /* 67px - rozeszrza prawa strone pop-upka czyli zwieksza jego szeroksc, bo inaczej nie mozna go poszerzyc, nawet poprzez ... width ... jak wyzej */
z-index: 205 !important;
}
/* HTC pion i poziom */
#postit1 /* dopisalem -- dotyczy tylko logo w popupek ...#postit... */
{
position: relative;
width: 100% !important;
}
/* HTC poziom */
/* Personal Counter - cz.1/3 - dotyczy licznika odwiedzin w pop-upku */
#count{
position: relative;
width: 129% !important;
margin-bottom: 10px !important;
}
/* HTC poziom */
.reminderalarm /* dotyczy licznika czasu pozostalego do zalozonej daty - w pop-upku pod licznikiem odwiedzin */
{
position: relative;
width: 126.5% !important;
left: -2px !important;
}
/* HTC poziom */
.liczeniedni1 /* liczy dni istnienia srewisu, ale nie strony ...www... */
{
position: relative;
width: 129% !important;
height: auto !important;
margin-top: 15px !important;
margin-bottom: 10px !important;
}
/* HTC poziom */
.liczeniedni2 /* liczy dni istnienia strony ...wwww... ale nie serwisu */
{
position: relative;
width: 129% !important;
height: auto !important;
margin-top: 15p x !important;
margin-bottom: 15px !important;
}
/* HTC poziom */
#kalinform /* formatuje pole daty z komentarzem w pop-upku na stronie ... index.html ... */
{
position: relative;
width: 119% !important;
margin-top: -2px !important;
margin-botto m: 12px !important;
height: auto !important;
left: -1% !important; /* 2px */
padding-lef t: -30% !important;
padding-top: 4px !important;
padding-botto m: 42px !important;
text-align: center !important;
border: 1px white soli d !important;
}
/* HTC poziom */
#socialicons img /* formatuje ozdobny krzyzyk do zamykania pop-upka na stronie ... index,html ... */
{
position: relative;
lef t: 65px !important;
right: 475px !important;
top: 2px !important;
}
/* HTC poziom */
.opis1 /* formatuje pierwsza czesc opisu w pop-upku miedzy napisem REMINDER i podpisem SMART na stronie ... index.html ... */
{
position: relative;
width: 125.8% !important;
}
/* HTC poziom */
.opis /* formatuje druga cześć opisu w pop-upku przy obarzu LOGO na stronie ... index.html ... */
{
position: relative;
width: 125.8% !important;
}
/* HTC poziom */
.css3droppanel /* formatuje brazowa linie otwierania kurtyny w pop-upku na stronie ... index.html ... */
{
position: relative;
width: 129% !important;
}
/* HTC poziom */
#ciekawostkiokna /* formatuje pole ... SELECT ... w ... CIEKAWOSTKI ... w pop-upku na stronie ... index.html ... */
{
position: relative;
left: 125px !important;
top: 25px !important;
}
/* HTC poziom */
#clockanalog /* formatuje zegar analogowy w pop-upku na stronie ... index.html ... - gdy jest wyswietlany */
{
position: absolute;
left: 36.5% !important;
top: 18% !important;
}
/* HTC poziom */
#clockdigital /* formatuje zegar cyfrowy w pop-upku na stronie ... index.html ... - gdy jest wyswietlany */
{
position: relative;
left: 38.5% !important;
top: 35px !important;
margin-bottom: 20px !important;
}
/* ------------------------ MENU - MOBILE - HTC POZIOM ----------------------------------- */
/* 3D flip menu cz.1/3 - formatuje wszystkie ...Menu-mobile... oprocz strony ...index.html... Jet to dla HTC pion i poziom, ale w pionie nie ustawia tutaj w tej samej pozycji MENU - MOBILE i jego otwieranego wyskakujacego okienka tak samo jak w poziomie czyli tutaj.
Author: Dynamic Drive
Using CSS3 transform, this menu flips the traditional menu around, or on its y-axis to be exact. When the user clicks on the menu anchor, it flips over to reveal a drop down menu. The menu degrades well in IE9 and IE8, resorting to a drop down menu activated by JavaScript in the later. Flippin' cool! */
/* Dziala w HTC poziom i pion. W poziomie czyli TUTAJ mozna wszystko ustawic, ale w pionie nie ustawia dokladnie Menu Mobile na chcianym miejscu i otwierane okno z Menu Mobile. Wszystko inne w pionie w HTC jest tutaj tak samo jak w HTC poziom. Te dwie rzeczy z HTC pion sa zapisane w tych samych kodach co tutaj, ale dla medium ... @media screen and {width-max: 599px}.... ponizej */
body { /* webkit adjacent sibling bug fix */
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {padding:0;}
to {padding:0;}
}
div.nav{
position: relative; /* dotyczy menu przed kliknieciem */
background-color: yello w; /* dopisalem */
/* width: 330px; */ /* dopisalem */
/* top: 209px !important; - -37px - dopisalem - podnosi cale MENU-MOBILE przed kliknieciem i otwarciem - -37px gdy jest nad klawiszami w gornej komorce tabeli */
z-index: 40 !important; /* dopisalem - ustawia cale menu po otwarciu po kliknieciu i chyba przed kliknieciem */
-webkit-perspective: 1000px;
perspective: 1000px;
left: -200px !important; /* przesuwa pole z napisem ...MOBILE - MENU ... */
}
div.nav input{
display: none;
}
div.nav label.mainlabel, div.nav div.menuflip{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out; /* transition speed etc */
}
div.nav label.mainlabel{ /* menu anchor text style - napis MOBILE-MENU menu przed kliknieciem*/
width: 275px !important; /* width of anchor text - pole z tytulem ... MOBILE - MENU ... */
/* height: 17p x !important; */ /* dopisalem - wysokosc menu przed kliknieciem */
font-size: 35px !important;
font-weight: bold !important;
font-family: Wide Latin, serif, Tahoma !important; /* 20px Tahoma */
color: maroon; /* dopisalem */
position: relative;
top: -8px; /* 0 - podnosi do gory sam napis MENU-MOBILE przed otwarciem */
/* left: -1270px !important; - -5px - dopisalem - przesuwa w lewo cale menu przed otwarciem - -5px gdy jest nad klawiszami w gornej komorce tabeli */
display: block;
padding-top: 15p x !important; /* dopisalem - dla ustawienia poza tabela z klawiszami Munu glownego */
padding-bottom: 25p x !important; /* dopisalem - dla ustawienia poza tabela z klawiszami Munu glownego */
padding-left: 35p x !important; /* 34px - add left padding to make room for icon - odleglosc kolka od napisu MOBILE-MENU */
/* padding-right: 5px !important; - dopisalem - oleglosc napisu ...MOBILE-MENU... od prawej krawedzi jego pola */
cursor: pointer;
background-color: yellow; /* dopisalem */
outline: 2px #000000 dotted; /* dopisalem */
}
div.nav label.mainlabel:before{ /* menu anchor icon - kolko menu przed kliknieciem kolo napisu - MOBILE-MENU*/
content: '';
position: absolute;
left: 5px !important; /* odleglosc kolka od lewej krawedzi przy napisie - MOBILE-MENU */
top: 2px !important;
width: 24px !important;
height: 24px !important;
border: 7px ridge green; /* 7px solid darkgreen; - rozmiar, styl, kolor kolka */
-webkit-box-shadow: inset 0 0 2px gray, 0 0 5px gray;
box-shadow: inset 0 0 2px gray, 0 0 5px gray;
border-radius: 30px;
}
div.nav div.menuflip{ /* DIV that flips over to reveal main menu - pole menu otwarte po kliknieciu*/
position: absolute;
margin: 0;
top: -1px; /* 0 - podnosi cale menu po otwarciu po kliknieciu */
padding: 4px;
background: white;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
width: 300px !important; /* 200px - szerokosc pola menu po jego otwaciu po kliknieciu */
border: 4px solid gray !important; /* 1px */
-webkit-box-shadow: 2px 2px 15px #B5B5B5;
box-shadow: 2px 2px 15px #B5B5B5;
border-radius: 10px;
background: #eee;
left: 360px !important; /* - dopisalem i ustawia to calosc otwartego menu po jego kliknieciu, lewo/prawo */
}
div.nav div.menuflip h4 /* napis SITE NAVIGATION pola menu otwartego po kliknieciu */
{
margin: 0;
margin-bottom: 4px !important;
font-size: 30px !important; /* 20px */
font-family: serif; /* dopisalem */
color: maroon; /* dopisalem */
font-weight: bold !important; /* dopisalem */
text-decoration: underline; /* dopisalem */
/* border-bottom: 2px red solid; - dopisalem */
padding: 4px 0 0 6px;
text-align: left; /* dopisalem */
}
div.nav div.menuflip ul /* lista z linkami do stron pola menu otwartego po kliknieciu */
{
list-style: none;
margin-top: 3px !important;
padding: 0;
font-family: serif !important; /* dopisalem */
font-size: 20px !important; /* dopisalem */
font-weight: bold !important; /* dopisalem */
text-align: left; /* dopisalem */
}
div.nav div.menuflip ul li{
border-bottom: 2px inset gray !important; /* kreski poziome oddzielajace linki w otwartym polu menu */
}
div.nav div.menuflip ul li:last-of-type{
border-bottom: none !important; /* wylacza ostatnia kreske pod ostatnim linkiem w otwartym polu menu */
}
div.nav div.menuflip ul li:hover{
border-bottom-color: transparent; /* nadaje animacje kreskom dzielacym linki w otwartym menu */
}
div.nav div.menuflip ul li a /* linki pola menu otwartego po kliknieciu */
{
display: block;
background-color: lim e !important;
color: blue;
text-decoration: none;
padding-top: 7px !important; /* dopisalem */
padding-bottom: 7px !important; /* dopisalem */
border-radius: 10px 0 10px;
-webkit-transition: none;
transition: none;
}
div.nav div.menuflip ul li a:hover /* linki pola menu otwartego po kliknieciu, po najechaniu kursorem */
{
background: #515151;
color: white;
}
div.nav div.menuflip label.close /* close button */
{
position: absolute;
right: 8px !important;
top: 8px !important;
padding-top: 15px !important;
display: inline-block !important;
text-align: center;
line-height: 1px !important;
color: red !important;
z-index: 1000 !important;
cursor: pointer !important;
border: 5px fuchsia ridge !important;
border-radius: 50px !important;
-webkit-box-shadow: 0 0 5px gray !important;
box-shadow: 0 0 5px gray !important;
width: 40px !important;
height: 20px !important;
background: yellow !important;
font-size: 40px !important;
font-weight: bold !important;
font-family: Wide Latin, serif, Tahoma !important;
}
div.nav input:checked ~ label.mainlabel{
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
div.nav input:checked ~ div.menuflip{
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.close:hover /* do zmiany kolorow w ..Close... w ...Site menu... - dopisalem calosc */
{
position: relative;
margin-right: -3px !important;
margin-top: -7px !important;
color: yellow !important;
background-color: red !important;
font-weight: bold !important;
padding: 3px !important;
border: 5px fuchsia ridge;
}
/*
}
*/
/* --- KONIEC ... MENU - NOBILE ... w poziomie i nie do konca w pionie ale tylko dla MOBILE-MENU jak opisane powyzej ---------------- */
/* HTC pion i poziom */
#fly /* formatuje ...FLY LETTER.. */
{
position: relative;
font-siz e: 16px !important; /* tutaj nie dziala - wielkosc liter jest chyba z kodow komputera */
top: 2px !important;
}
/* HTC pion */
#lewy /* formatuje lewy obrazek kolo napisu ...ZAPRASZAMY... na stronie ... index.html ... */
{
left: 8px !important; /*8px lub 3% - dla HTC pion */
position: relative;
width: 60px !important;
height: 70px !important;
margin-right: 23px !important;
}
/* HTC pion */
#zaproszenie /* formatuje napis ... ZAPRASZAMY ... na stronie ... index.html ... */
{
position: relative;
font-size: 18px !important;
}
/* HTC pion */
#prawy /* formatuje prawy obrazek kolo napisu ...ZAPRASZAMY... na stronie ... index.html ... */
{
position: relative;
width: 60px !important;
height: 70px !important;
margin-left: 10px !important;
}
/* HTC pion i poziom */
#ikonapajaczek /* ukryte - formatuje ikone PAJACZEK na stronie ... index.html ... */
{
display: none;
position: relative;
width: 119% !important;
height: 15px !important;
right: 62px !important;
}
/* HTC pion i poziom */
#stopka /* formatuje stopke na stronie ... index.html ... */
{
position: relative;
padding-bottom: 20px !important;
margin-top: 97px !important;
}
/* HTC pion */
.anima1 /* formatuje blok pod ... animowane przyciski ... na stronie ... index.html ... */
{
position: relative;
left: -317px !important; /* -317px / -88.5% */
}
/* HTC pion i poziom */
.anima /* formatuje to co sie wyswietla w ... animowanych przyciskach ... na stronie ... index.html ... */
{
position: relative;
font-size: 13px !important;
}
/* HTC pion i poziom */
.widget /* formatuje ikone ... THUMBTACK ... na stronie ... index.html ... */
{
position: relative;
top: -15px !important;
width: 200px !important;
}
}
/* -------------- HTC pion i poziom - ciag dalszy ale dla innych mediow ----------------------------- */
/* HTC pion i poziom */
@media (max-width: 1000px) /* może być tez najmniej ... max: 760px ... - ta rozdzielczosc jest tylko do formatowania tego co sie nie da sformatowac dla tego samego urzadzenia zarowno w pionie jak i w poziomie */
{
/* HTC pion i poziom - ciag dalszy ale dla innych mediow */
.figurewlodek1 /* ukrywa menu do zmiany tylko kolorow tla */
{
position: relative;
visibility: hidden !important;
display: none !important;
}
/* HTC pion i poziom */
.figurewlodek /* ukrywa menu do zmiany obrazkow i kolorow tla */
{
position: relative;
visibility: hidden !important;
display: none !important;
}
}
/* HTC poziom */
@media (max-width: 1023px) /* ta rozdzielczosc jest tylko do formatowania tego co sie nie da sformatowac dla tego samego urzadzenia zarowno w pionie jak i w poziomie */
{
/* HTC poziom */
#lewy /* formatuje lewy obrazek kolo napisu ...ZAPRASZAMY... na stronie ... index.html ... */
{
left: 130px !important; /*8px lub 3% - dla HTC pion */
position: relative;
width: 60px !important;
height: 70px !important;
margin-right: 150px !important;
}
/* HTC poziom */
#zaproszenie /* formatuje napis ... ZAPRASZAMY ... na stronie ... index.html ... */
{
position: relative;
font-size: 18px !important;
}
/* HTC poziom */
#prawy /* formatuje prawy obrazek kolo napisu ...ZAPRASZAMY... na stronie ... index.html ... */
{
position: relative;
width: 60px !important;
height: 70px !important;
margin-left: 10px !important;
}
/* HTC poziom */
.anima1 /* formatuje blok pod ... animowane przyciski ... na stronie ... index.html ... */
{
position: relative;
left: -177px !important; /* -317px / -88.5%- dla HTC pion */
}
}
/* /////////////////////////// HTC PION - poczatek - w tym dla MENU - MOBILE PION /////////////////////////// */
/* Kody dla MENU-MOBILE dzialaja jednoczesnie w HTC poziom i pion, ale te same kody co ponizej, dla pionu nie ustawiaja jednoczesnie tak dokladnie jak w poziomie pozycji i wymiarow Menu Mobile i jego otwieranego okna z linkami przy kodach ... @media (max-width: 800px) ... Przy tych kodach jak ponizej ... @media screen and (max-width: 599px)... sa spelniane ustawienia pozycji i gabarytow Menu Mobile dla ... HTC pion ... i jego otwieranego okna */
@media screen and (max-width: 599px) /* to dziala dobrze tylko w HTC pion */
/* @media {width-max: 599px} - tez dobrze dziala w HTC pion */
{
/* HTC pion */
#lewy /* formatuje lewy obrazek kolo napisu ...ZAPRASZAMY... na stronie ... index.html ... */
{
left: 8px !important; /*8px lub 3% - dla HTC pion */
position: relative;
width: 60px !important;
height: 70px !important;
margin-right: 23px !important;
}
/* HTC pion */
#zaproszenie /* formatuje napis ... ZAPRASZAMY ... na stronie ... index.html ... */
{
position: relative;
font-size: 18px !important;
}
/* HTC pion */
#prawy /* formatuje prawy obrazek kolo napisu ...ZAPRASZAMY... na stronie ... index.html ... */
{
position: relative;
width: 60px !important;
height: 70px !important;
margin-left: 10px !important;
}
/* HTC pion */
.anima1 /* formatuje blok pod ... animowane przyciski ... na stronie ... index.html ... */
{
position: relative;
left: -317px !important; /* -317px / -88.5% */
}
/* HTC pion */
h2#fly /* Fly letter */
{
position: relative;
font-size: 16px !important;
}
/* HTC pion */
#postit /* pop-upek */
{
position: relative;
left: 5% !important; /* 20px */
widt h: 100% !important; /* nie dziala ani tak ani w pikselach tak jak przy MENU-MOBILE szerokosc */
padding-right: 18.6% !important; /* 67px - rozeszrza prawa strone pop-upka czyli zwieksza jego szeroksc, bo inaczej nie mozna go poszerzyc, nawet poprzez ... width ... jak wyzej */
}
/* HTC pion */
.reminderalarm /* dotyczy licznika czasu pozostalego do zalozonej daty - w pop-upku pod licznikiem odwiedzin */
{
position: relative;
width: 121.8% !important;
left: -2px !important;
}
/* HTC pion */
#kalinform /* formatuje pole daty z komentarzem w pop-upku na stronie ... index.html ... */
{
position: relative;
width: 108% !important;
margin-top: -2px !important;
margin-botto m: 12px !important;
height: auto !important;
left: -1% !important; /* 2px */
padding-lef t: -30% !important;
padding-top: 4px !important;
padding-botto m: 42px !important;
text-align: center !important;
border: 1px white soli d !important;
}
/* HTC pion */
#socialicons img /* formatuje ozdobny krzyzyk do zamykania pop-upka na stronie ... index,html ... */
{
position: relative !important;
lef t: 65px !important;
right: 726px !important;
top: 2px !important;
}
/* HTC pion */
#count /* formatuje pole licznika odwiedzin w pop-upku na stronie ... index.html ... */
{
position: relative;
width: 125.8% !important;
}
/* HTC pion */
.liczeniedni1 /* liczenie dni od daty powstania SMART w pop-upku na stronie ... index.html ... */
{
position: relative;
width: 125.8% !important;
}
/* HTC pion */
.liczeniedni2 /* liczenie dni od daty powstania strony ... www ... SMART w pop-upku na stronie ... index.html ... */
{
position: relative;
width: 125.8% !important;
}
/* HTC pion */
.opis1 /* formatuje pierwsza czesc opisu w pop-upku miedzy napisem REMINDER i podpisem SMART na stronie ... index.html ... */
{
position: relative;
width: 125.8% !important;
}
/* HTC pion */
.opis /* formatuje druga cześć opisu w pop-upku przy obarzu LOGO na stronie ... index.html ... */
{
position: relative;
width: 125.8% !important;
}
.css3droppanel
{
position: relative;
width: 125.8% !important;
}
/* HTC pion */
#ciekawostkiokna /* formatuje pole ... SELECT ... w ... CIEKAWOSTKI ... w pop-upku na stronie ... index.html ... */
{
position: relative;
left: 0px !important;
top: 25px !important;
width: 125% !important;
}
/* HTC pion */
.kasowanie /* formatuje przycisk ... RESET ... pola ... SELECT ... w ... CIEKAWOSTKI ... w pop-upku na stronie ... index.html ... */
{
position: relative;
margin-top: 15px !important;
}
/* HTC pion */
#clockanalog /* formatuje zegar analogowy w pop-upku na stronie ... index.html ... - gdy jest wyswietlany */
{
position: absolute;
left: 26% !important;
top: 15% !important;
}
/* HTC pion */
#clockdigital /* formatuje zegar cyfrowy w pop-upku na stronie ... index.html ... - gdy jest wyswietlany */
{
position: relative;
left: 17% !important;
top: 35px !important;
margin-bottom: 20px !important;
}
/* ------------ Poczatek ...MENU - MOBILE... - DLA HTC PION na kodach z HTC poziom ------------ */
/* 3D flip menu cz.1/3 - formatuje wszystkie ...Menu-mobile... oprocz strony ...index.html... i tutaj jest tylko dla HTC pion, do tego co nie jest formatowane dokladnie z taich samych kdow dla HTC poziom ...
Author: Dynamic Drive
Using CSS3 transform, this menu flips the traditional menu around, or on its y-axis to be exact. When the user clicks on the menu anchor, it flips over to reveal a drop down menu. The menu degrades well in IE9 and IE8, resorting to a drop down menu activated by JavaScript in the later. Flippin' cool! */
/* To dziala w HTC poziom i pion. W poziomie dla mediow ... @media (max-width: 800px).../powyzej/ mozna wszystko ustawic, ale tam w pionie nie ustawia dokladnie Menu Mobile na chcianym miejscu i otwierane okno z Menu Mobile. Wszystko inne tam dla pionu jest tak samo jak w HTC poziom. Te dwie rzeczy z HTC pion sa zapisane w ponizszych kodach dla powyzszego ...@media screen and (max-width: 599px)... To dziala dobrze w calosci tylko w HTC poziom dla mediow ....@media (max-width: 800px, jak powyzej. */
body { /* webkit adjacent sibling bug fix */
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {padding:0;}
to {padding:0;}
}
div.nav{
position: absolute; /* dotyczy menu przed kliknieciem */
background-color: re d; /* dopisalem */
width: 220px !important; /* dopisalem */
top: 0px !important; /* -37px - dopisalem - podnosi cale MENU-MOBILE przed kliknieciem i otwarciem - -37px gdy jest nad klawiszami w gornej komorce tabeli */
z-index: 12 !important; /* dopisalem - ustawia cale menu po otwarciu po kliknieciu i chyba przed kliknieciem */
-webkit-perspective: 1000px;
perspective: 1000px;
left: 98px !important; /* przesuwa pole z napisem ...MOBILE - MENU ... - tutaj to jest tylko dla: HTC pion */
}
div.nav input{
display: none;
}
div.nav label.mainlabel, div.nav div.menuflip{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out; /* transition speed etc */
}
div.nav label.mainlabel#mainlabel_ie /* menu anchor text style - napis MOBILE-MENU menu przed kliknieciem*/
{
width: 210px !important; /* width of anchor text - pole z tytulem ... MOBILE - MENU ... */
font-size: 26px !important; /* tutaj to jest tylko dla: HTC pion */
font-weight: bold !important;
font-family: Wide Latin, serif, Tahoma !important; /* 20px Tahoma */
color: maroon; /* dopisalem */
position: relative;
margin-left: 59px !important; /* dopisalem - lewy margines pola pod napisem MOBILE-MENU - ale jakos dziwnie przesuwa kolko w prawo na napis */
top: -7px; /* 0 - podnosi do gory sam napis MENU-MOBILE przed otwarciem -- dziala tylko w: HTC pion */
left: -60px !important;
display: block;
padding-top: 5px !important; /* dopisalem - dla ustawienia poza tabela z klawiszami Munu glownego */
padding-bottom: 5px !important; /* dopisalem - dla ustawienia poza tabela z klawiszami Munu glownego */
/* padding-left: 0px !important; */ /* 34px - add left padding to make room for icon - odleglosc kolka od napisu MOBILE-MENU */
cursor: pointer;
background-color: yellow; /* dopisalem */
outline: 2px #000000 dotted; /* dopisalem */
}
div.nav label.mainlabel:before{ /* menu anchor icon - kolko menu przed kliknieciem kolo napisu - MOBILE-MENU*/
content: '';
position: absolute;
left: 1px !important; /* tutaj to jest tylko dla: HTC pion */ /* odleglosc kolka od lewej krawedzi przy napisie - MOBILE-MENU */
top: 6px !important; /* tutaj to jest tylko dla: HTC pion */
width: 14px !important; /* tutaj to jest tylko dla: HTC pion */
height: 14px !important; /* tutaj to jest tylko dla: HTC pion */
border: 7px ridge green; /* 7px solid darkgreen; - rozmiar, styl, kolor kolka */
-webkit-box-shadow: inset 0 0 2px gray, 0 0 5px gray;
box-shadow: inset 0 0 2px gray, 0 0 5px gray;
border-radius: 30px;
}
div.nav div.menuflip{ /* DIV that flips over to reveal main menu - pole menu otwarte po kliknieciu*/
position: absolute;
margin: 0;
top: -1px; /* 0 - podnosi cale menu po otwarciu po kliknieciu */
padding: 4px;
background: white;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
width: 300px !important; /* 200px - szerokosc pola menu po jego otwaciu po kliknieciu */
border: 4px solid gray !important; /* 1px */
-webkit-box-shadow: 2px 2px 15px #B5B5B5;
box-shadow: 2px 2px 15px #B5B5B5;
border-radius: 10px;
background: #eee;
left: -94px !important; /* - dopisalem i ustawia to calosc otwartego menu po jego kliknieciu, lewo/prawo -- tutaj dziala tylko w: HTC pion */
}
div.nav div.menuflip h4 /* napis SITE NAVIGATION pola menu otwartego po kliknieciu */
{
margin: 0;
margin-bottom: 4px !important;
font-size: 30px !important; /* 20px */
font-family: serif; /* dopisalem */
color: maroon; /* dopisalem */
font-weight: bold !important; /* dopisalem */
text-decoration: underline; /* dopisalem */
/* border-bottom: 2px red solid; - dopisalem */
padding: 4px 0 0 6px;
text-align: left; /* dopisalem */
}
div.nav div.menuflip ul /* lista z linkami do stron pola menu otwartego po kliknieciu */
{
list-style: none;
margin-top: 3px !important;
padding: 0;
font-family: serif !important; /* dopisalem */
font-size: 20px !important; /* dopisalem */
font-weight: bold !important; /* dopisalem */
text-align: left; /* dopisalem */
}
div.nav div.menuflip ul li{
border-bottom: 2px inset gray !important; /* kreski poziome oddzielajace linki w otwartym polu menu */
}
div.nav div.menuflip ul li:last-of-type{
border-bottom: none !important; /* wylacza ostatnia kreske pod ostatnim linkiem w otwartym polu menu */
}
div.nav div.menuflip ul li:hover{
border-bottom-color: transparent; /* nadaje animacje kreskom dzielacym linki w otwartym menu */
}
div.nav div.menuflip ul li a /* linki pola menu otwartego po kliknieciu */
{
display: block;
background-color: lim e !important;
color: blue;
text-decoration: none;
padding-top: 7px !important; /* dopisalem */
padding-bottom: 7px !important; /* dopisalem */
border-radius: 10px 0 10px;
-webkit-transition: none;
transition: none;
}
div.nav div.menuflip ul li a:hover /* linki pola menu otwartego po kliknieciu, po najechaniu kursorem */
{
background: #515151;
color: white;
}
div.nav div.menuflip label.close /* close button */
{
position: absolute;
right: 8px !important;
top: 8px !important;
padding-top: 15px !important;
display: inline-block !important;
text-align: center;
line-height: 1px !important;
color: red !important;
z-index: 1000 !important;
cursor: pointer !important;
border: 5px fuchsia ridge !important;
border-radius: 50px !important;
-webkit-box-shadow: 0 0 5px gray !important;
box-shadow: 0 0 5px gray !important;
width: 40px !important;
height: 20px !important;
background: yellow !important;
font-size: 40px !important;
font-weight: bold !important;
font-family: Wide Latin, serif, Tahoma !important;
}
div.nav input:checked ~ label.mainlabel{
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
div.nav input:checked ~ div.menuflip{
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.close:hover /* do zmiany kolorow w ..Close... w ...Site menu... - dopisalem calosc */
{
position: relative;
margin-right: -3px !important;
margin-top: -7px !important;
color: yellow !important;
background-color: red !important;
font-weight: bold !important;
padding: 3px !important;
border: 5px fuchsia ridge;
}
}
/* ---------------------------------- KONIEC MENU NOBILNYCH dla HTC pion ------------------------- */