/* studiofabryka.pl mc, natom-logistic, 9 maj 2012 */ @import url('css/reset.css'); @import url('css/font/stylesheet.css'); @import url('fancybox/fancy.css'); // Classes, main stuff: @color1: #3c3c3e; @color2: #ec7116; @color3: #aa4901; .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: white; background: @color2;} ::selection {color: white; background: @color2;} body { font-family: Tahoma, helvetica, arial, sans-serif; background: white url(images/bg-repeater.jpg) top repeat-x; color:#333; } .top { background: url(images/bg.jpg) top no-repeat; min-height: 648px; } .noborder td {border:0;} .font { font-family: 'UbuntuRegular'; font-weight:normal; font-style: normal; } .font2 { font-family: 'UbuntuBold'; font-weight:normal; font-style: normal; } // Basic: header, article, footer, .top, .bottom {.full; z-index:50;} .content { position: relative; margin:0 auto; width:990px; } // Header: .logo { float:left; } nav { float:right; margin:35px 8px 0 0; li { float:left; padding:22px 20px; border-left: 1px solid white; border-left: 1px solid rgba(255, 255, 255, .6); border-right: 1px solid #c4c4c4; } a { .font; font-size:14px; text-transform: uppercase; color: @color1; .transition; padding:3px 0; &:hover {border-bottom:4px solid @color2;} } .current a, .hit a { .font2; border-bottom:4px solid @color2; } li:first-child {border-left:0; padding:31px 0 30px;} li.last {border-right:0; padding:31px 0 30px;} } .sub .slideshow { height: 288px; background: url(images/header-sub.jpg) 0 0 no-repeat; .slides1 { top:85px; left:22px; } .slides2 { top:55px; left:22px; } } .slideshow { float:left; width:100%; height: 378px; margin:-20px 0 0 0; overflow: hidden; position: relative; background: url(images/header.jpg) 0 0 no-repeat; .slides1, .slides2 {position: relative; z-index: 50; text-transform: uppercase;} .shadow1, .shadow2 {position: relative; z-index:20; text-transform: uppercase;} .shadow1 { top: -33px !important; left: 14px !important; h2 {color: #333 !important;} } .shadow2 { top: -53px !important; left: 14px !important; h3 {color: #333 !important;} } .slides1 { width:966px !important; height:60px; top:125px; left:12px; h2 { display:none; .font2; font-size:42px; color: white; //text-shadow: 0 0 10px #333; //text-shadow: 0 0 10px rgba(0, 0, 0, .7); margin-left:10px; padding:10px; height: 45px; } } .slides2 { width:966px !important; height:100px; top:105px; left:12px; h3 { display:none; .font2; font-size:70px; color: white; //text-shadow: 0 0 10px #333; //text-shadow: 0 0 10px rgba(0, 0, 0, .7); margin-left:30px; padding:10px; height: 81px; } } } // Article: .sections { float:left; width: 638px; margin-left:10px; } h1, aside h2 { .font2; color: @color1; font-size:22px; padding-left:25px; text-transform: uppercase; background: url(images/square.png) 0 center no-repeat; margin:.3em 0; } section > img { background: url(images/img-lbg.png) 0 center no-repeat; padding-left:11px; float:left; margin: 4px 10px 0 -11px; } aside { float:right; width:310px; margin-right:10px; img { background: url(images/img-rbg.png) right center no-repeat; padding-right:11px; float:right; margin: 0 -11px 0 10px; } h3 { font: 20px/1 Verdana, tahoma, arial, sans-serif; text-transform: uppercase; padding:10px 0 15px; } address { float:left; width:100%; font-style: normal; font-size: 13px; line-height: 20px; .left, .right {float:left; width:45%;} .right {text-align: right; width:55%;} a {color: @color1; &:hover {color: @color2;}} } .jakdojechac { float:left; width:100%; margin:10px 22px 0 0; } } section { p, ul, ol, table { font-size:12px; line-height:17px; color: @color1; padding-bottom:1em; } ul li {list-style: square outside; margin-left:35px;} ol li {list-style: decimal outside; margin-left:40px;} a {color: @color3; &:hover {color:@color2; text-decoration: underline;}} h2, h3, h4, h5 { .font; color: @color1; margin: .5em 0 .3em; } h2 {font-size: 20px;} h3 {font-size:18px;} h4 {font-size: 16px;} h5 {font-size: 14px;} } // Footer: .bottom { border-top:1px solid #ccc; margin-top:1em; padding:1em 0 3em; } .madeby { float:right; margin:0 10px 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; min-width:152px; max-width:152px; min-height: 90px; 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, 5%);} .even td { background: lighten(@tborder, 10%); } th {border:0;} } .hovered { tr:hover td { background: #c0c0c0; } } 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:360px !important; float:right !important; } #contact-form { width:100%; padding-bottom:15px; } fieldset { float:left; width:100%; } .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:70%; 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;} } } } // 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;}