/* studiofabryka.pl mc, rehabilitacja-klimaszyk, 22 maja 2012 */ @import url('css/reset.css'); @import url('css/font/stylesheet.css'); @import url('fancybox/fancy.css'); // Classes, main stuff: .full { position:relative; width:100%; float:left; } .radius(@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } .transition { transition: all .3s; -o-transition: all .3s; -ms-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; } ::-moz-selection {color: #ffffff; background: #00aac9;} ::selection {color: #ffffff; background: #00aac9;} body { font-family: Tahoma, helvetica, arial, sans-serif; background: white; color:#333; } .noborder td {border:0;} .font { font-family: 'UbuntuRegular'; font-weight:normal; font-style: normal; } .font-bold { font-family: 'UbuntuLightBold'; font-weight:normal; font-style: normal; } // Basic: header, article, footer, .top, .bottom, .topInner, .bottomInner {.full; z-index:50;} .top {background: url(images/topbg.jpg) 0 0 repeat-x;} .topInner {background: url(images/topinnerbg.jpg) top no-repeat;} .bottom {background: url(images/bottombg-repeater.jpg) 0 0 repeat-x;} .bottomInner {background: url(images/bottombg.jpg) top no-repeat;} .top {min-height:300px;} .bottomInner {min-height: 167px;} .content { position: relative; margin:0 auto; width:990px; } // Header: .logo {float:left;} .slideshow { float:right; width:100%; height: 300px; margin:-2px 8px 0 0; overflow: hidden; position: relative; .slidemask { position: absolute; top:0; right:0; z-index:30; } .slides { position: absolute; top:0; right:0; width: 711px; height: 301px; overflow: hidden; z-index:20; } .pager { position: absolute; bottom:25px; right:0; z-index:40; width:711px; text-align: center; a { display:inline; padding:5px 7px; overflow: hidden; font-size:0px; background: url(images/slidepage.png) top no-repeat; } .activeSlide {background: url(images/activeslide.png) top no-repeat; } } } // Nav ul.lvl2 {display:none;} .current .lvl2 {display: block;} nav { .lvl1 { float:left; width:100%; li, a {float:left;} > li {padding:5px 0; border-bottom:1px solid #b2d5db;} > li:first-child {border-top:1px solid #b2d5db;} .lvl2 li {padding:5px 0; border-top:1px solid #b2d5db;} .lvl2 li:first-child {border-top:0;} > li > a { .font; display:block; color: #007388; font-size:15px; text-indent:3em; line-height: 2.2em; width: 237px; height: 32px; background: url(images/lvl1bg.jpg) 0 0 no-repeat; } > .current > a, .hit > a, >li > a:hover { background: url(images/lvl1hover.jpg) 0 0 no-repeat; color: white; } .lvl2 {width:213px; float:right;} .lvl2 a { .font; display:block; color: #007388; font-size:15px; text-indent:2.5em; line-height: 1.9em; width: 213px; height: 27px; background: url(images/lvl2bg.jpg) 0 0 no-repeat; } .lvl2 a:hover { background: url(images/lvl2hover.jpg) 0 0 no-repeat; color: white; } } } // Article: article {padding-top: 40px;} aside { float:left; width: 237px; } aside:first-child {margin-left:8px;} aside.baners div {float:left; width:100%; text-align: center; margin-bottom:5px;} .sections { float:left; width: 450px; margin:0 25px; } .sub .sections {width:710px; margin-right:0;} .part { float:left; display:block; position: relative; overflow: hidden; min-height:410px; width:100%; .showMore { float:left; position: absolute; bottom:0; left:0; img {float:left;} } } section { h1, h2, h3, h4, h5 { .font; color: #007388; margin: .5em 0 .2em; } h1 {font-size: 21px; margin-top:0; margin-bottom:.8em;} h2 {font-size: 19px;} h3 {font-size: 17px;} h4 {font-size: 15px;} h5 {font-size: 13px;} p, ul, ol { font-size:12px; line-height:1.4em; padding-bottom:1em; } a {color: #007388; &:hover {text-decoration: underline; color: lighten(#007388, 10%);}} ul li {list-style: square; margin-left:35px;} ol li {list-style: decimal; margin-left:40px;} } // Footer: .madeby { float:right; margin:65px 15px 0 0; strong { font-size:10px; color: #333; font-weight: normal; float:left; margin:3px; } } // Gallery: .gallery { float:left; width:100%; padding:0; margin:.5em 0; ul { margin:0 !important; padding:0 !important; width:100%; float:left; } li:first-child {margin-left:0 !important;} li { list-style:none !important; float:left; margin: 0 0 10px 10px !important; position: relative; padding:0 !important; } a { float:left; display:block; } img { float:left; display:block; max-width:228px; border:1px solid #ccc; transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } a:hover img { opacity:.8; filter:alpha(opacity=80); } } .gi { @giw: 325px; li { width: @giw; margin:0 0 15px 15px; } img {max-width:@giw;} strong { .font; float: left; width:100%; font-size:16px; color: white; margin:8px 0; text-align: center; } } // Tabels: @tborder: #ccc; table.centered { margin:0 auto; } table { border-collapse: separate; border-spacing: 2px; td, th { padding:8px; border:solid 1px @tborder; font-size:12px; p {padding-bottom: 0 !important;} } th { border:solid 1px darken(@tborder, 20%); } } .only-rows { border-collapse: collapse; border-spacing: 0; td, th { border:0; border-top:solid 1px @tborder; } th {border:0;} } .zebra { border-collapse: collapse; border-spacing: 0; td, th { border:0; border-top:solid 1px lighten(@tborder, 5%); } th {background: lighten(@tborder, 7%);} .even td { background: lighten(@tborder, 15%); } th {border:0;} } .hovered { tr:hover td { background: #01AACB; color:white; } } table.oferta { td { position: relative; text-align: center; vertical-align:top; } td span { .font; font-size:22px; color: #424242; float:left; width:100%; margin-top:30px; position: relative; z-index:20; display:block; height:30px; em { font-style: normal; font-size:16px; } } td img {margin-top:-60px;} td[colspan="3"] { span { margin:70px 0 0 480px; font-size:34px; width:auto; } img {margin-top: -100px;} } a:hover { img {opacity:.9;} span {color: #729824;} } } // Kontakt: .form { width:100% !important; float:right !important; } #contact-form { width:100%; padding-bottom:15px; } fieldset { float:left; width:60%; } fieldset:first-child { width:40%; } .subject {display:none;} label { float:left; width:100%; margin:3px 0; } label span { float:left; width:100%; font-size:12px; color: #333; padding:5px 0; } label input, textarea { float:left; width:90%; padding:3px 6px; border:1px solid #ccc; .radius(1px); background: #f8f8f8; box-shadow:inset 0 0 15px #d7d7d7; } textarea { width:96.7%; height:118px; } form #error, form #ok { display:none; float:right; padding:6px 10px; background: #ff0000; margin-right:5px; color: #fff; font-weight:bold; font-size:12px; .radius(1px); } form #ok {background: #1fac06;} .error-input { border:1px solid #ff0000; background: #ffe1e1; } button { float:right; background: #FECB3E; color: #5e4400; font-weight:bold; padding:3px 10px 4px; .radius(1px); cursor:pointer; font-size:13px; &:hover { opacity:.9; filter:alpha(opacity=90); } } .map { float:right !important; border-left: 1px dashed #ccc; border-right: 1px dashed #ccc; margin:22px 10px; padding:0 15px; width:300px !important; small { font-size:10px; color:white; a { color: white !important; &:hover {color:white !important;} } } } // News: .news { float:left; width:100%; border-top: 1px dashed #ddd; padding-top:1em; margin-bottom:1em; position: relative; .photo { max-width:120px; float:left; margin-right:1em; } small { position: absolute; top:1.9em; right:0; font-size:11px; color: #999; } h3 { float:left; width:550px; margin:0; } .more { font-size:11px; color:white; float:right; text-decoration: none; background: #006600; padding:4px 12px; .radius(3px); transition: all .2s; -o-transition: all .2s; -ms-transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; &:hover { background: #009100; padding:4px 5px 4px 19px; } } } .newsarch .first { padding-top: 0; border:0; small {top:0;} } .nophoto { h3 {width:100%;} } // Download lists .download { .plik{ display:none; color: #999; } a:hover {text-decoration: none;} } .type_text {.plik{display: inline;}} .type_icons { li {list-style: none !important; margin:4px 20px !important;} a { color: #333 !important; text-decoration: none !important; padding:1px 0 2px 23px; background: url(images/download/page_white.png) 0 0 no-repeat; &:hover {color: #006600 !important;} } // icons .pdf {background: url(images/download/acrobat.png) 0 0 no-repeat;} .swf {background: url(images/download/flash.png) 0 0 no-repeat;} .txt, .rtf {background: url(images/download/text.png) 0 0 no-repeat;} .doc, .docx, .odf, .ott, .sxw, .stw {background: url(images/download/word.png) 0 0 no-repeat;} .jpg, .jpe, .jfif, .png, .jpeg, .gif, .tif, .tiff, .ico, .bmp, .raw, .dcs {background: url(images/download/picture.png) 0 0 no-repeat;} .flv, .mov, .mpeg, .avi, .divx {background: url(images/download/movie.png) 0 0 no-repeat;} .ods, .sxc, .xls, .xlt {background: url(images/download/excel.png) 0 0 no-repeat;} .odg, .sxd, .psd {background: url(images/download/paint.png) 0 0 no-repeat;} .cdr, .ai {background: url(images/download/vector.png) 0 0 no-repeat;} .php, .html, .css, .js, .less, .asp, .c {background: url(images/download/code.png) 0 0 no-repeat;} .sql, .db, .dbf, .dbk {background: url(images/download/database.png) 0 0 no-repeat;} .zip, .tar, .gz, .gzip, .rar {background: url(images/download/zip.png) 0 0 no-repeat;} .rb {background: url(images/download/ruby.png) 0 0 no-repeat;} .as {background: url(images/download/actionscript.png) 0 0 no-repeat;} .cf {background: url(images/download/coldfusion.png) 0 0 no-repeat;} .odp, .sxi, .ppt {background: url(images/download/powerpoint.png) 0 0 no-repeat;} .iso, .nrg {background: url(images/download/dvd.png) 0 0 no-repeat;} } // Paginator: #pages-container { float:left; width:100%; #pages { float:left; width:100%; text-align: center; padding:0 !important; * { font-size:12px; display:inline; float: none !important; } a, span { padding:0 5px; } a {cursor:pointer;} } } .jPag-current {color: #999;} // sortowalna tabela: .sort tr:hover td { color: white; background: transparent; } .sort thead th { color:white; font-weight:bold; font-size:13px; text-align:left; border: 1px solid #d9c4ae; padding:3px 20px 3px 5px; background: url(images/table-unsort.gif) right no-repeat; cursor:pointer; } .sort thead th.notsorted { background: none; cursor: text; } th.headerSortUp { background-image: url(images/table-asc.gif); background-color: #fef7ed; } th.headerSortDown { background-image: url(images/table-desc.gif); background-color: #fef7ed; } table.sort { width:85%; margin:10px auto; } .sort .item0 {width:22px;} .sort .item1 {width:160px;} .sort .item2 {width:300px;} // Zoomed product layer: body.zoom {background: white;} div.zoom { width: 608px; height: 499px; padding: 17px; margin:0 auto; position: relative; } .zoom { .big {float:left;} .titles, .opis, .controls {float:right; width: 185px;} .titles { .font; color: #424242; padding: 1em 0; text-align: center; border-top: 1px solid #a0a0a0; border-bottom: 1px solid #a0a0a0; strong { font-weight: normal; font-size: 22px; } em { font-size: 15px; font-style: normal; } } .opis { margin:1em 0; font-size: 11px; color: #868686; line-height: 1.5em; } .controls { padding:.5em 0; position: absolute; bottom:17px; right:17px; border-top: 1px solid #a0a0a0; border-bottom: 1px solid #a0a0a0; li, a { float:left; } a { padding:5px 18px; .transition; &:hover {opacity:.8;} } .zoom-print { border-left: 1px solid #a0a0a0; border-right: 1px solid #a0a0a0; } } } .minislider { float:left; display:block; width:237px; height: 131px; overflow: hidden; }