/* reset -----------------------------------------------------------------------------*/ * { padding: 0; margin: 0;} *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} html, body { height: 100%;} ul li { list-style: none;} IMG { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border: 0 none;} /* layout - actavia fullheadfoot -----------------------------------------------------------------------------*/ BODY { background: #dadada url('../img/body-back.gif') center top repeat-y; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 10pt;} #wrapper { width: 100%; height: 100%; position: relative; border: 0 none; overflow: auto;} #header { width: 100%; height: 230px; min-width: 960px; position: relative; background: #6a8617 url('../img/header-jaro.jpg') center top no-repeat; z-index: 2; clear: both;} #headerin { width: 960px; height: 100%; margin: 0 auto; position: relative;} #logo { position: absolute; left: -196px; bottom: 21px; width: 190px; height: 95px; cursor: pointer; border: 0 none; background: url('../img/logo-jaro.jpg') center center no-repeat;} #menu-top, #header-img { width: 764px; position: absolute; left: 198px; border: 2px solid #fff; border-bottom: 0 none;} #menu-top { height: 52px; top: 48px; text-align: center;} #menu-top A { display: block; width: 127px; height: 50px; float: left; padding-top: 11px; color: #fff; text-decoration: none; font-weight: bold; line-height: 100%; background: #888586; transition: background .5s;} #menu-top A SPAN, #home-menu-top A SPAN {color: #ffcc00;} #menu-top A.uzsi { width: 126px;} #menu-top A.radek1 { padding-top: 17px;} #menu-top A.sudy { background: #707070;} #menu-top A:hover, #menu-top A.sudy:hover {background: #c5440b; transition: background .5s;} #menu-top A.active { background: #c5440b;} #header-img { height: 130px; bottom: 0; border-top: 0 none;} #header-img IMG { width: 100%; height: auto;} #inner { margin: -230px auto 0; min-height: 100%; width: 960px; overflow: hidden; position: relative;} #middle { margin: 230px -200px 0 0; float: left; width: 100%;} #middle:after { content: ''; clear: both; display: table;} #middlein { } #content { padding: 0 0 230px; margin-right: 200px; overflow: auto;} #menu-mobil { display: none;} #sideLeft { margin-bottom: 210px; margin-top: 230px; position: relative; z-index: 2; float: left; width: 200px; padding-right: 5px; background: #c5440b;} #l { height: 100%; position: absolute; top: 0; z-index: 1; clear: both; width: 200px; left: 0; background: #c5440b;} #footer { width: 100%; height: 210px; min-width: 960px; position: relative; background: #565656; margin-top: -210px; text-align: center; z-index: 1; border-top: 10px solid #3d3d3d;} #footerin { width: 960px; height: 100%; margin: 0 auto;} /* sideLeft -----------------------------------------------------------------------------*/ #sideLeft H1, #sideLeft H2 { margin-left: 20px; font-weight: bold; color: #ffcc00;} #sideLeft H1 { margin-top: 25px; font-size: 150%;} #sideLeft H2 { margin-top: 16px; font-size: 90%;} #sideLeft H1 A, #sideLeft H2 A {color: #ffcc00; text-decoration: none;} #sideLeft H1 A:hover, #sideLeft H2 A:hover {text-decoration: underline;} #sideLeft UL { margin-left: 20px;} #sideLeft UL LI, #sideLeft UL LI A {color: #fff; text-decoration: none; line-height: 17px; position: relative;} #sideLeft UL LI:hover { text-decoration: underline; cursor: pointer;} #sideLeft UL LI:hover UL.submenu {visibility: visible; opacity: 1; transition: opacity .5s;} #sideLeft UL.submenu { position: absolute; top: 0; left: 80px; z-index: 5; visibility: hidden; opacity: 0; transition: visibility .5s, opacity .5s;} #sideLeft UL.submenu A { display: block; padding: 1px 10px; height: 20px; white-space: nowrap; position: relative; background: rgb(100,100,100); background: rgba(100,100,100,0.8);} #sideLeft UL.submenu LI:hover {text-decoration: none;} #sideLeft UL.submenu A:hover {text-decoration: none; background: #6a8617; opacity: 1; transition: background .5s;} #sideLeft UL.submenu2 { left: 150px;} #menu-button { display: none;} /* content -----------------------------------------------------------------------------*/ #content H1, #content H2, #content H3 {margin-left: 30px; font-weight: bold; color: #c5440b; line-height: 120%;} #content H1 { margin-top: 25px; margin-bottom: 10px; font-size: 160%;} #content H2 { margin-top: 20px; margin-bottom: 10px; font-size: 120%;} #content H3 { margin-top: 13px; font-size: 100%;} #content P, #content UL, #content OL {margin: 3px 20px 7px 30px;} #content UL LI { margin: 0 0 3px 0; font-size: 100%; line-height: 110%; padding-left: 12px; background: url('../img/odrazky.gif') 0 -295px no-repeat;} #content OL LI { margin-left: 12px; padding: 5px 0 0 5px;} #sideRight { float: right; width: 220px; margin-top: 30px; padding-left: 20px;} .rightBlock, .homeBlock { padding-bottom: 15px; border: 1px solid #dadada; background: #f5f5f5;} .rightBlock { width: 200px; margin-bottom: 16px;} #rightInfo { background: #f5f5f5 url('../img/rightBlock-info-back.jpg') right bottom no-repeat;} #content .rightBlock H2, #content .homeBlock H2 {margin: 15px 0 0 20px; font-size: 140%;} #content .rightBlock UL, #content .homeBlock UL {margin: 10px 10px 15px 20px;} #content .rightBlock UL LI, #content .homeBlock UL LI {margin: 4px 0 0; padding-left: 14px; line-height: 120%; background: url('../img/odrazky.gif') 0 -92px no-repeat;} #content .rightBlock P, #content .homeBlock P {margin: 2px 10px 0 20px;} #content .rightBlock A, #content .homeBlock A, #content A .homeBlock {color: #000;} #content .rightBlock A:hover, #content .homeBlock A:hover {color: #c5440b;} #content A, .vice { color: #c5440b; text-decoration: none;} #content A:hover { text-decoration: underline;} div.tblOverflX { margin: 0 0 10px 30px; overflow-x: auto;} table { margin: 10px 0 15px 30px;} div.tblOverflX table { margin: 0;} table.kontakty { width: 710px;} table#kariera { border-collapse: collapse;} table#kariera TH, table#kariera TD {border: 1px solid #dadada; padding: 2px 6px;} table#kariera TH, table#kariera TD.nadpis {padding: 6px; font-weight: bold; background: #eee;} table#kariera TH.profese { width: 140px;} table#kariera TH.misto, .nowrap {white-space: nowrap;} table#kariera TH.moridlo { width: 155px;} P.nahoru { text-align: right;} .center { text-align: center;} .button { padding: 4px 10px; color: #fff; font-weight: bold; background: #c5440b; border: none; cursor: pointer;} .formular-tabulka { width: 310px; text-align: left;} .formular-tabulka2 { width: 490px; text-align: left;} .formular-tabulka TR TD, .formular-tabulka2 TR TD { padding: 2px;} TD.prvniSl { width: 150px;} TD.right { text-align: right;} .formular-tabulka LABEL { padding-right: 5px;} DIV.travni-smesi { width: 540px;} .obr IMG { margin: 5px 0 5px 30px; border: 0 none;} IMG.ico-pdf { margin-left: 30px;} #abc { margin: 15px 20px 15px 30px;} #abc A { display: inline-block; width: 16px; text-align: center; margin-right: 1px; font-size: 110%; font-weight: bold;} #abc A:hover, #abc A.active { background: #ccc; text-decoration: none;} I.symbol { display: inline-block; float: right; width: 62px; height: 62px; margin: 15px 0 0 10px; background-image: url('../img/symboly-jaro.png'); background-repeat: no-repeat;} .s-obiloviny { background-position: 0 0;} .s-kukurice { background-position: -70px 0;} .s-luskoviny { background-position: -140px 0;} .s-olejniny { background-position: -210px 0;} .s-picniny { background-position: -280px 0;} .s-trpark { background-position: -350px 0;} .s-trhriste { background-position: -420px 0;} .s-trkrajina { background-position: -490px 0;} .s-trspecial { background-position: -560px 0;} .s-okopaniny { background-position: -630px 0;} I.symbol-m { display: inline-block; width: 32px; height: 32px; margin: 5px 2px 0; background-image: url('../img/symboly-jaro.png'); background-repeat: no-repeat;} I.symbol-m.right { float: right; margin: 0 0 0 8px;} I.symbol-m.line { margin: 0 0 -7px 15px;} .sm-obiloviny { background-position: 0 -70px;} .sm-kukurice { background-position: -70px -70px;} .sm-luskoviny { background-position: -140px -70px;} .sm-olejniny { background-position: -210px -70px;} .sm-picniny { background-position: -280px -70px;} .sm-trpark { background-position: -350px -70px;} .sm-trhriste { background-position: -420px -70px;} .sm-trkrajina { background-position: -490px -70px;} .sm-trspecial { background-position: -560px -70px;} .sm-okopaniny { background-position: -630px -70px;} #content P.nojs { font-weight: bold; color: #c5440b; line-height: 120%; margin-top: 20px; margin-bottom: 10px; font-size: 120%;} form input.pasticka { height: 1px; width: 1px; overflow: hidden; visibility: hidden; display: none !important; } /* prechod -----------------------------------------------------------------------------*/ .blockPrechod { margin: 30px 0 0 30px; width: 235px; background: #f5f5f5; overflow: auto; float: left;} .blockPrechod.blockPrechodSiroky {width: 483px; float: none;} .blockPrechod.blockPrechodDalsi {margin-left: 12px;} .blockPrechod IMG { float: left; margin-left: 2px;} .blockPrechod IMG.prvni { margin-left: 0;} .blockPrechod IMG.dalsiRadek {margin-top: 2px;} .blockPrechod IMG.imgProfil { float: right; margin: -5px 0 -1px 10px;} .blockPrechod .sortiment { border: 1px solid #dadada; border-top: 0 none; padding: 5px 0 15px; float: left; width: 100%;} .blockPrechod .sortiment.profil {border-right: 0 none; padding-bottom: 0;} .imgOsiva { height: 80px;} .imgMerkantil { height: 165px;} .imgPrp { height: 102px;} .sortiment DIV { float: left; width: 132px;} .sortiment DIV.siroky { width: 330px;} .sortiment DIV.sirsi { width: 150px;} .sortiment DIV.sirsi2 { width: 195px;} .sortiment DIV.sirsi3 { width: 225px;} .sortiment DIV.uzsi { width: 115px;} #content .blockPrechod H1 { color: #ffcc00; background: #c5440b; height: 70px; text-align: center; padding-top: 8px; margin: 0; font-size: 130%;} #content .blockPrechod.ostatni H1 {height: 40px;} #content .blockPrechod H2 { font-size: 100%; margin: 10px 0 0 20px;} #content .blockPrechod UL { margin: 3px 0 0 20px;} #content .blockPrechod UL LI {margin-left: 0; background: none; padding: 0;} #content .blockPrechod LI A { color: #000;} #content .blockPrechod LI A:hover {color: #c5440b;} #content .blockPrechod A:hover H1 {text-decoration: underline;} #content .blockPrechod.ostatni UL LI {padding-left: 12px; margin-right: 15px; background: url('../img/odrazky.gif') 0 -295px no-repeat;} #content .blockPrechod.ostatni H3, #content .blockPrechod.ostatni P {margin-left: 20px; margin-right: 15px;} #content .blockPrechod.ostatni UL.olmix {margin: 0; color: #ffcc00; background: #6a8617; display: flex; justify-content: space-around;} #content .blockPrechod.ostatni UL.olmix LI {margin: 0; padding: 0; background: none;} #content .blockPrechod.ostatni UL.olmix LI H2 {color: #ffcc00; margin: 0 0 15px;} #content .blockPrechod.ostatni UL.olmix LI A:hover H2 {text-decoration: underline;} /* footer -----------------------------------------------------------------------------*/ .footer-block { float: left; margin: 20px 0; height: 90px; background: url('../img/cara-footer.gif') right top repeat-y;} #footer-odkazy { width: 140px;} #footer-listy { width: 360px; padding-left: 30px;} #footer-kontakt { width: 375px; padding-left: 22px;} #footer-vlajky { width: 62px; margin: 20px 0 10px 23px; position: relative;} #footer A { display: block; float: left; clear: left; color: #f07d00; margin-bottom: 5px; line-height: 120%; text-align: left; font-weight: bold; text-decoration: none;} #footer A:hover { text-decoration: underline;} #footer-kontakt P { width: 300px; height: 45px; margin: 3px 0 5px 51px; text-align: left; font-size: 180%; font-weight: bold; color: #f07d00; position: relative;} I.ico { display: inline-block; background-image: url('../img/ico-footer.gif'); background-repeat: no-repeat; position: absolute;} .tel { width: 23px; height: 45px; left: -43px; top: -5px; background-position: 0 0;} .mail { width: 35px; height: 34px; left: -49px; top: 4px; background-position: 0 -50px;} #footer #footer-kontakt A { display: inline; float: none; clear: none; line-height: 120%;} I.vlajky { background-image: url('../img/ico-footer.gif'); background-repeat: no-repeat;} .cs { display: block; width: 39px; height: 28px; background-position: -50px -50px; position: absolute; top: 13px;} .en { display: block; width: 39px; height: 28px; background-position: -50px 0; position: absolute; top: 51px;} #footer-tiraz { float: left; width: 100%;} #footer-tiraz P { color: #9c9c9c; font-weight: bold; text-align: left; line-height: 130%; margin-top: 6px;} /* homepage -----------------------------------------------------------------------------*/ #home #header { height: 560px; background-image: url('../img/header-home-jaro.jpg');} #home #headerin { padding-top: 180px;} #slider { border: 11px solid #fff; border-bottom: 0 none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; margin: -11px -11px 0;} #home #logo { width: 248px; height: 148px; position: absolute; left: auto; right: -11px; top: 0; cursor: auto; opacity: .8;} #home #inner { margin: -560px auto 0;} #home #middle { margin: 560px -0 0;} #home-menu-top { width: 960px; height: 215px; margin-top: 35px; padding: 15px 0 0 15px; text-align: center; background: #c5440b;} #home #content { margin-right: 0; padding-bottom: 210px;} #home #content #home-menu-top A {display: block; width: 141px; height: 195px; float: left; padding-top: 136px; margin-left: 12px; color: #fff; text-decoration: none; font-size: 130%; font-weight: bold; line-height: 110%; background-position: center top; background-repeat: no-repeat;} #home #content #home-menu-top A.jedenr {padding-top: 155px;} #home #content #home-menu-top A.dvar {padding-top: 145px;} #home #content #home-menu-top A:hover {text-decoration: underline;} #osiva { background-image: url('../img/home-osiva.jpg')}/*!!!asi spíš udělat jako jedno pozadí s různou polohou, ještě uvážit*/ #merkantily { background-image: url('../img/home-merkantily.jpg');} #hnojiva { background-image: url('../img/home-hnojiva.jpg');} #dbaleni { background-image: url('../img/home-dbaleni.jpg');} #smesi { background-image: url('../img/home-smesi.jpg');} #pripravky { background-image: url('../img/home-pripravky.jpg');} .home-menu-top2 { display: block; float: left; width: 312px; height: 320px; margin: 26px 0 0 12px; border: 1px solid #707070; background: #f5f5f5;} #profil { margin-left: 0; background: #f5f5f5 url('../img/home-profil-back.jpg') right bottom no-repeat;} #katalogy { background: #f5f5f5 url('../img/home-katalogy-back.jpg') right bottom no-repeat;} #content .home-menu-top2 H2 { display: block; width: 100%; height: 111px; margin: 0; text-align: center; padding-top: 72px; font-size: 140%; font-weight: bold; color: #fff; background: #707070 url('../img/home-menu-top2-ico.gif') 132px 20px no-repeat;} #content .home-menu-top2#katalogy H2 {background-position: -68px 20px;} #content .home-menu-top2#kvalita H2 {background-position: -268px 20px;} #content .home-menu-top2:hover H2 {text-decoration: underline;}/*!!!lepší by bylo udělat nějaký efekt s ikonkami*/ #home #content P { margin: 20px 20px 0; font-size: 100%; line-height: 125%; color: #000;} #home #content A:hover DIV .vice {text-decoration: underline;} .homeBlock { float: left; margin: 26px 0 0; height: 199px;} #content .homeBlock H2 { margin-top: 23px; line-height: 110%;} #content .homeBlock UL { margin-top: 15px;} #content #slechteni UL { margin-top: 0;} #dalsi-sluzby, #prodejny, #slechteni {width: 312px; margin-left: 12px; padding-right: 123px; background: #f5f5f5 url('../img/home-prodejny.jpg') right bottom no-repeat;} #dalsi-sluzby { margin-left: 0; background-image: url('../img/home-sluzby.jpg');} #slechteni { background-image: url('../img/home-jetel.jpg');} #mnozeni, #vetrov, #aktuality {width: 635px;} #aktuality { height: auto; border: 0 none; background: none;} #informace, #clanky { float: right; width: 312px; margin-left: 12px;} #informace { background: #f5f5f5 url('../img/home-info.jpg') right bottom no-repeat;} #clanky { height: auto; padding-bottom: 0;} #mnozeni IMG, #vetrov IMG { float: left; margin: 10px 0 0 21px; border: 0 none;} #home #content .homeBlock#aktuality H2 {margin: 0;} #home #content .homeBlock#aktuality UL {margin-left: 0;} #loga { border: 10px solid #3d3d3d; border-bottom: 0 none; margin: 10px 0 0 35px; float: left; clear: left;} #loga IMG { vertical-align: middle; margin: 2px 14px; border: 0 none;} #loga A:hover { text-decoration: none;} #loga A:hover#zasady, #loga A#zasady:hover {text-decoration: underline;} A:hover #mnozeni H2, A:hover #vetrov H2, A:hover #prodejny H2, A:hover #slechteni H2 {text-decoration: underline;} /* prevzato z puvodniho - upravit!!! -----------------------------------------------------------------------------*/ #content P.majitel, #content P.zastupce, #content P.opatreni, #content P.spolecny-katalog { padding: 9px 0 9px 50px; margin: 0 0 0 30px; color: #009836; background-position: left center; background-repeat: no-repeat; background-image: url("../img/ikonka-03.png");} #content P.zastupce { background-image: url("../img/ikonka-02.png");} #content P.opatreni { color: #C24006; background-image: url("../img/ikonka-04.png");} #content P.spolecny-katalog { color: #1C3981; background-image: url("../img/ikonka-01.png");} .pivo, .novinka { display: inline-block; padding: 7px 35px 7px 0; background: url("../img/ikonka-05.gif") right center no-repeat;}/*!!!nejspíš udělat přes */ .novinka { padding: 0 75px 0 0; background: url("../img/novinka.png") right center no-repeat;} .soubor-pdf, .tabulka-pdf { padding: 14px 0 14px 50px; background: url("../img/ikonka-pdf.png") left center no-repeat;} .tabulka-pdf { background: url("../img/ikonka-tabulka.png") left center no-repeat;} HR { margin: 20px 10px 20px 20px; border: 1px solid #dadada; } HR.cistic { clear: both; height: 1px; border: none; margin: -1em 0 0 0; visibility: hidden; width: 100%;} .picture-l {display: inline; float: left; margin: 0 10px 0 30px;} .picture-l2 {display: inline; float: left; margin: 5px 5px 5px 0;} .picture-l3 {display: inline; float: left; margin: 30px 0 5px 30px;} .picture-l4 {display: inline; float: left; margin: 15px 0 5px 18px; border: 1px solid #ccc;} div.tblOverflX .picture-l3 {margin-left: 0; margin-bottom: 0;} .picture-r {margin: 0 0 5px 5px; display: inline; float: right; border: 2px solid #fff; clear: both;} .float-right {display: inline; float: right; margin: 0 0 5px 10px;} .float-left {display: inline; float: left;} .right {text-align: right;} img.olmix { margin-top: 10px; width: 100%; height: auto;} table.prp { width: 460px; background: #fff;} div.tblOverflX table.prp { margin: 30px 0 0;} table.prp TR TD { width: 50%; text-align: center;} #content table.prp H1 { text-align: center; margin: 0 0 5px;} #content table.prp H2 { text-align: center; margin: 0; color: #fff; font-size: 130%; line-height: 200%; font-weight: normal;} #content table.prp H3 { text-align: center; margin: 0; color: #000; font-size: 90%; font-weight: bold;} #content table.prp P { text-align: center; margin: 0; color: #fff; font-size: 120%; line-height: 200%;} #content table.prp P A { color: #fff;} #content P.olmix { text-align: center; margin: 0; color: #fff; font-size: 140%; line-height: 300%; background: #b26400;} #content P.olmix A { color: #fff;} #content .blockPrechod P.olmix {margin: 10px 0 0;} table.prp .hnedy { background: #b26400;} table.prp .modry { background: #00a0d4;} table.prp .fialovy { background: #7b67a8;} table.prp .sedy { background: #909496;} DIV.prp-odkazy { width: 100%; margin-top: 20px; text-align: center;} DIV.prp-odkazy P { color: #444; font-size: 100%; font-weight: normal;} #content DIV.prp-odkazy A { display: block; margin: 3px auto; color: #000; font-size: 100%; font-weight: bold; text-align: center;} DIV.prp-odkazy A.certifikat-kez {height: 43px; width: 120px; background: url("../img/kez-certifikat.jpg") left center no-repeat; padding: 15px 10px 5px 40px;} .drobne-baleni-product { float: left; margin-bottom: 10px;} .drobne-baleni-product2 { float: left; width: 150px; height: auto; margin: 0 10px 10px 0; padding: 5px 0 0 0; text-align: center; background: #E8E564;} #product1 .drobne-baleni-product2:nth-child(3n+1), #product2 .drobne-baleni-product2:nth-child(4n+1) {margin-left: 30px; clear: left;} .drobne-baleni-product2 IMG { float: left; margin: 2px 0 0 0;} #katalogy-obr { float: left; margin: 15px 0 0 30px; width: 100%;} #katalogy-obr IMG { float: left; margin-right: 13px; border: 0 none;} #katalogy-obr IMG.last { margin-right: 0;} /* colorize ----------------------------------------------------------------------------- jaro - zelena: #6a8617 podzim - cervena: #c5440b footer odkazy - oranzova: #f07d00 sideLeft a nadpisy prechod - zluta: #ffcc00 !!!nejspíš vyházet z deklarací výše ty barvy - nechat je jen tady !!!stejné barvy dát na jeden řádek a pak tam jsou jeste jine barvy: .majitel, .zastupce, .opatreni, .spolecny-katalog; drobné balené ty bloky, tabulka PRP #header { background-image: url('../img/header-jaro.jpg'); background-color: #6a8617;} #logo { background-image: url('../img/logo-jaro.jpg');} #home #header { background-image: url('../img/header-home-jaro.jpg');} #home #logo { background-image: url('../img/logo-home-jaro.jpg');} #menu-top A SPAN, #home-menu-top A SPAN {color: #ffcc00;} #menu-top A:hover, #menu-top A.sudy:hover, #menu-top A.active {background: #c5440b;} #sideLeft { background: #c5440b;} #l { background: #c5440b;} #sideLeft H1, #sideLeft H2 { color: #ffcc00;} #sideLeft H1 A, #sideLeft H2 A {color: #ffcc00;} #sideLeft UL.submenu A:hover {background: #6a8617;} #content H1, #content H2, #content H3 {color: #c5440b;} #content .rightBlock A:hover, #content .homeBlock A:hover {color: #c5440b;} #content A, .vice { color: #c5440b;} #content .blockPrechod H1 { color: #ffcc00; background: #c5440b;} #content .blockPrechod LI A:hover {color: #c5440b;} !!!nevim jestli zustane!!! #content .blockPrechod.ostatni UL LI {background: url('../img/odrazky.gif') 0 -295px no-repeat;} #footer A { color: #f07d00;} #footer-kontakt P { color: #f07d00;} #home-menu-top { background: #c5440b;} #content UL LI { background-position: 0 -295px;} #content .rightBlock UL LI, #content .homeBlock UL LI {background-position: 0 -92px;} .button { background: #c5440b;} I.symbol { background-image: url('../img/symboly-podzim.png');} I.symbol-m { background-image: url('../img/symboly-podzim.png');} .majitel, .zastupce { color: #009836;} .opatreni { color: #c24006;} .spolecny-katalog { color: #1c3981;} */ /* jaro ----------------------------------------------------------------------------- #menu-top A SPAN, #home-menu-top A SPAN, #sideLeft H1, #sideLeft H2, #sideLeft H1 A, #sideLeft H2 A { color: #ffcc00;} #footer A, #footer-kontakt P {color: #f07d00;} #header { background-image: url('../img/header-jaro.jpg'); background-color: #6a8617;} #logo { background-image: url('../img/logo-jaro.jpg');} #home #header { background-image: url('../img/header-home-jaro.jpg');} #home #logo { background-image: url('../img/logo-home-jaro.jpg');} #menu-top A:hover, #menu-top A.sudy:hover, #menu-top A.active, #sideLeft UL.submenu A:hover { background: #c5440b;} #sideLeft, #l, #home-menu-top, .button {background: #6a8617;} #content H1, #content H2, #content H3, #content .rightBlock A:hover, #content .homeBlock A:hover, #content A, .vice, #content .blockPrechod LI A:hover { color: #6a8617;} #content .blockPrechod H1 { color: #ffcc00; background: #6a8617;} #content UL LI { background-position: 0 -195px;} #content .rightBlock UL LI, #content .homeBlock UL LI {background-position: 0 8px;} #content .blockPrechod.ostatni UL LI {background: url('../img/odrazky.gif') 0 -195px no-repeat;} I.symbol, I.symbol-m { background-image: url('../img/symboly-jaro.png');} */ /* podzim -----------------------------------------------------------------------------*/ #menu-top A SPAN, #home-menu-top A SPAN, #sideLeft H1, #sideLeft H2, #sideLeft H1 A, #sideLeft H2 A { color: #ffcc00;} #footer A, #footer-kontakt P {color: #f07d00;} #header { background-image: url('../img/header-podzim.jpg'); background-color: #c5440b;} #logo { background-image: url('../img/logo-podzim.jpg');} #home #header { background-image: url('../img/header-home-podzim.jpg');} #home #logo { background-image: url('../img/logo-home-podzim.jpg');} #menu-top A:hover, #menu-top A.sudy:hover, #menu-top A.active, #sideLeft UL.submenu A:hover { background: #6a8617;} #sideLeft, #l, #home-menu-top, .button {background: #c5440b;} #content H1, #content H2, #content H3, #content .rightBlock A:hover, #content .homeBlock A:hover, #content A, .vice, #content .blockPrechod LI A:hover { color: #c5440b;} #content .blockPrechod H1 { color: #ffcc00; background: #c5440b;} #content UL LI { background-position: 0 -295px;} #content .rightBlock UL LI, #content .homeBlock UL LI {background-position: 0 -92px;} #content .blockPrechod.ostatni UL LI {background: url('../img/odrazky.gif') 0 -295px no-repeat;} I.symbol, I.symbol-m { background-image: url('../img/symboly-podzim.png');} /* zima - pridavat k podzimu/jaru ----------------------------------------------------------------------------- #header { background-image: url('../img/header-zima.jpg'); background-color: #7ea8d0;} #logo { background-image: url('../img/logo-zima.jpg');} #home #header { background-image: url('../img/header-home-zima.jpg');} #home #logo { background-image: url('../img/logo-home-zima.jpg');} */ @media screen and (max-width: 960px) {/*spolecne pro "mobilni"*/ #home #header { height: auto;} #home #headerin { padding-top: 170px;} #home #logo { display: block; left: 50%; margin-left: -123px;} #content { position: relative; padding-bottom: 500px;} #sideRight { float: none; width: 100%; position: absolute; bottom: 210px;} .rightBlock { float: left; margin-right: 4%; width: 48%; height: 260px;} #rightInfo { margin-right: 0;} DIV.travni-smesi { width: 100%;} DIV.prp-odkazy { width: 100%; margin-left: 12px;} #katalogy-obr IMG { margin-bottom: 25px;} #product1 .drobne-baleni-product2:nth-child(3n+1), #product2 .drobne-baleni-product2:nth-child(4n+1) {margin-left: 0; clear: none;} #product1 .drobne-baleni-product2:nth-child(2n), #product2 .drobne-baleni-product2:nth-child(2n) {margin-right: 0;} .blockPrechod { overflow: hidden;} .blockPrechod .sortiment.profil A {display: inline-block; word-break: break-all;} #informace, #clanky { float: left;} } @media screen and (min-width: 641px) and (max-width: 960px) { #header, #footer { min-width: 640px;} #headerin, #inner, #footerin, #home-menu-top {width: 640px;} #header { height: 200px;} #home-menu-top { height: 420px;} #footer { height: 350px;} #home #content #home-menu-top A {margin-left: 45px;} #kvalita, #slechteni, #informace, #clanky {margin-left: 160px;} .footer-block { margin-left: 40px;} #footer-kontakt { margin-left: 70px;} #loga { width: 525px; margin-left: 50px;} img#iso-logo-prvni { margin-left: 65px;} img#gmp-logo { margin-left: 35px;} #menu-top, #header-img { width: 445px;} #menu-top { height: 102px; top: auto; bottom: 75px;} #menu-top A, #menu-top A.uzsi {width: 33.333333%; width: calc(100% / 3);} #header-img { height: 75px;} #logo { background-image: url('../img/logo.png');} .formular-tabulka2 { width: 410px;} #katalogy-obr IMG { margin-right: 35px;} #product1 .drobne-baleni-product2:nth-child(2n+1), #product2 .drobne-baleni-product2:nth-child(2n+1) {margin-left: 60px; margin-right: 20px; clear: left;} .blockPrechod { margin: 20px 0 0 20px;} .blockPrechod.blockPrechodSiroky {width: 420px;} .blockPrechod.blockPrechodPrvni, .blockPrechod.blockPrechodDalsi {margin-left: 112px;} .imgOsiva { height: 70px; margin-right: -5px;} .imgMerkantil { height: 144px; margin-right: -5px;} .imgPrp { height: 89px; margin-right: -5px;} .sortiment DIV { width: 125px;} .sortiment DIV.siroky { width: 291px;} .sortiment DIV.sirsi { width: 120px;} .sortiment DIV.sirsi2 { width: 172px;} .blockPrechod .sortiment.profil A {max-width: 179px;} } @media screen and (max-width: 640px) { #header, #footer { min-width: 320px;} #headerin, #inner, #footerin, #home-menu-top {width: 320px;} #home-menu-top { height: 610px;} #footer { height: 540px; margin-top: -227px;} #home #content #home-menu-top A {margin-left: 5px;} #content { margin-top: 30px; margin-right: 0; margin-left: -25px; padding-bottom: 590px;} #home #content { margin-left: 0;} #sideRight { padding-left: 25px;} #home #content { margin-top: 0;} #katalogy, #kvalita, #prodejny, #slechteni, #informace, #clanky {margin-left: 0;} .homeBlock#mnozeni { height: 345px;} .homeBlock#vetrov { height: 366px;} #mnozeni, #mnozeni, #vetrov, #loga {width: 312px;} #loga { margin-left: 0;} #loga IMG { margin: 9px 22px;} img#gmp-logo { padding: 0 10px;} img#stability-logo { padding: 0 7px; margin-left: 16px; margin-right: 10px;} img#cmssa-logo { padding: 0 0 0 2px;} img#zelena-firma-logo { padding: 0 12px; margin-left: 100px;} #sideLeft, #l { display: none;} #sideLeft { padding-bottom: 20px; margin-bottom: 0; width: 320px;}/*background doladit, aby se prehazovalo podle obdobi - nejspis dat pozadi #sideLeft v jednotlivych obdobich*/ #sideLeft UL.submenu A { height: auto; white-space: normal;} .rightBlock { height: 340px;} .footer-block { margin: 5px 0; background: none;} #footer-listy, #footer-kontakt {margin-left: 0; padding-left: 0; width: 100%;} #menu-top, #header-img { width: 320px;} #menu-top { height: 152px; left: 0; top: auto; bottom: 54px;} #menu-top A, #menu-top A.uzsi {width: 50%;} #menu-top A { background: #707070; border: 1px solid #888586;} #menu-top A.active { background: #c5440b;} #header-img { height: 54px; left: 0;} #logo { display: none;} .formular-tabulka2 { width: 320px;} #katalogy-obr IMG { margin-left: 17px; margin-right: 38px;} #product1 .drobne-baleni-product2:nth-child(2n+1), #product2 .drobne-baleni-product2:nth-child(2n+1) {margin-left: 26px; margin-right: 17px; clear: left;} .blockPrechod { margin: 20px 0 0 25px;} .blockPrechod.blockPrechodSiroky {width: 316px;} .blockPrechod.blockPrechodPrvni, .blockPrechod.blockPrechodDalsi {margin-left: 65px;} .imgOsiva { height: 52px; margin-right: -5px;} .imgMerkantil { height: 108px; margin-right: -5px;} .imgPrp { height: 67px; margin-right: -5px;} .sortiment DIV { width: 113px;} .sortiment DIV.siroky, .sortiment DIV.sirsi, .sortiment DIV.sirsi2 { width: 200px;} .blockPrechod .sortiment.profil A {max-width: 127px;} #content .blockPrechod H1 {padding-top: 10px; font-size: 110%;} #menu-mobil { color: #707070; display: block; width: 42px; height: 56px; position: absolute; right: 18px; top: 200px; z-index: 10; text-align: center; font-size: 11px; font-weight: bold; transition: all .5s;} #menu-mobil.menu-active {color: #fff; transition: all .5s;} #menu-button { display: block; width: 42px; height: 42px; border: 2px solid #fff; border-radius: 50%; background: #688816; cursor: pointer;} #menu-button-img { display: block; width: 20px; height: 22px; margin: 8px auto; background: url('../img/menu-button.gif') left top no-repeat; transition: all .5s;} #menu-button-img.menu-active {width: 17px; height: 18px; margin: 10px auto; background: url('../img/menu-button.gif') right center no-repeat; transition: all .5s;} #middle.menu-active { margin-top: 0;} #content.menu-active { margin-top: 0;} }