/*- This stylesheet is made specialy for spsdigital.com -*/ /*- Copyright 2007 Lukáš Hroch. All rights reserved. -*/ /*- Basics -*/ html, body, div, p, li, ul, form, h1, h2, h3, h4, h5, h6, table, td, th { margin: 0; padding: 0; list-style: none; } body { font: normal 62.8%/1.4 Verdana, 'Helvetica CE', lucida, sans-serif; background: #eaeaea; } a { color: #fb0000; } a:hover { color: #000 !important; text-decoration: underline !important; } a img { border:0; } input, select, textarea { font-family: Arial, lucida, sans-serif; font-size: 1em;} input, textarea { border: 1px solid #ccc; padding: 3px 0;} textarea { height: 7em; } button { vertical-align: middle; margin: 0; padding: 0; background: none; border: none; } table { border-collapse: collapse; } h1 { font-size: 1.65em; color: #ff0000; margin-bottom: 20px; background: url('/images/ico-bul-h-big.gif') 0 .55em no-repeat; padding-left: 16px; _height:1px; } h2 { font-size: 1.55em; color: #ff0000; margin-bottom: 10px; background: url('/images/ico-bul-h-big.gif') 0 .55em no-repeat; padding-left: 16px; _height:1px; } h3 { font-size: 1.27em; color: #eb4000; margin-bottom: 10px; background: url('/images/ico-bul-h-small.gif') 0 .6em no-repeat; padding-left: 10px; _height:1px; } h4 { font-size: 1.27em; color: #eb4000; } h5 { font-size: 1em; margin-bottom: 5px; background: url('/images/ico-bul-arrow-red-big.gif') 0 .4em no-repeat; padding-left: 16px; _height:1px; } h6 { font-size: 1em; } /*- Basic layout -*/ #view { } #head { zoverflow: hidden; background: url('/images/bg-header.png') repeat-x; height: 149px; position: relative; z-index: 999; } #content { font-size: 1.1em; position: relative; z-index: 1; } #foot { font-size: 1.1em; clear: both; } .holder { position: relative; width: 900px; margin: 0 auto; } #head .holder { position: relative; z-index: 999; } #content .holder { background: #fff; padding-top: 12px; position: relative; z-index: 1; } #foot .holder { background: #fff; } #main { padding: 0 15px; } /*- Main hacks -*/ .holder:after, .cols:after, .item:after, .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } * html .holder, * html .clearfix { height:1%; } .clearfix { display:block; } .holder, .cols, .item, .clearfix { =min-height: 1px; } /*- Main blocks -*/ #logos { height: 71px; padding: 22px 15px 0 23px; } #logos .fl { padding-top: 5px; } #infobar { height: 21px; border-right: 1px solid #000; } #menubar { height: 35px; font-size: 1.1em; border-right: 1px solid #000; } #infobar, #infobar a { color: #ccc; } #infobar a:hover { color: #fff !important; } #infobar p { float: right; line-height: 21px; } #infobar .langSwitch { padding: 0 17px 0 12px ; border-left: 1px solid #000; } #infobar .email { padding: 0 8px 0 21px; background: url('/images/ico-infobar-email.gif') 0 50% no-repeat; _height:1px; } #infobar .phone { padding: 0 21px 0 17px; background: url('/images/ico-infobar-phone.gif') 0 50% no-repeat; _height:1px; } #menubar li { float: left; height: 100%; } #menubar li a { _float: left; color: #fff; display: block; height: 100%; padding: 0 0 0 15px; line-height: 35px; } #menubar li a span { display: block; _display: inline-block; padding: 0 15px 0 0; } #menubar li a span span { background: url('/images/ico-bul-arrow-white-full.gif') 100% 50% no-repeat; padding: 0 15px 0 0; } #menubar li.active a { background: url('/images/menu-tab-left.png') 0 100% no-repeat; color: #000; text-decoration: none; } #menubar li.active span { background: url('/images/menu-tab-right.png') 100% 100% no-repeat; } #menubar li.active span span { background: url('/images/ico-bul-arrow-black-full.gif') 100% 50% no-repeat; } #menubar li a:hover { background: url('/images/menu-tab-left-over.png') 0 100% no-repeat; } #menubar li a:hover span { background: url('/images/menu-tab-right-over.png') 100% 100% no-repeat; } #menubar li a:hover span span { background: url('/images/ico-bul-arrow-black-full.gif') 100% 50% no-repeat; } #menubar .products { width: 105px; height: 35px; _position: relative; } #user { float: right; width: 328px; } #user form { float: left; width: 251px; line-height: 30px; } #user input { width: 91px; height: 16px; _position: relative; _top: 4px; padding: 4px 1px 2px; border: 1px solid #999; background: #333; color: #ccc; } #user button { _top: 1px; _position: relative; } #user ul { float: right; width: 60px; } #user li { background: url('/images/ico-bul-arrow-white-full.gif') 0 50% no-repeat; float: none; padding-left: 7px; _height:1px; } #user li a { line-height: 15px; padding: 0; } #user a:hover { background: none; color: #fb0000 !important; } #user #userVipTab, #user #vipTab { float: left; width: 180px; padding: 0 30px; line-height: 35px; _height:1px; } #user #userTab a, #user #userVipTab a, #user #vipTab a { color: #fff; } #user #userTab { float: left; width: 205px; padding: 0 5px 0 30px; line-height: 35px; _height:1px; } #user #userTab .fr, #user #userVipTab .fr { width: 55px; } #user a:hover { background: none !important; } #userTab:hover { background: url('/images/menu-tab-user-over.png') 0 100% no-repeat; } #vipTab:hover { background: url('/images/menu-tab-vip-over.png') 0 100% no-repeat; } #userVipTab:hover { background: url('/images/menu-tab-uservip-over.png') 0 100% no-repeat; } #userTab:hover a, #userVipTab:hover a, #vipTab:hover a { color: #000 !important; } .active #userVipTab a, .active #userTab a, .active #vipTab a { color: #000 !important; } .active #userTab { background: #fff url('/images/menu-tab-user.png') 0 100% no-repeat; } .active #vipTab { background: #fff url('/images/menu-tab-vip.png') 0 100% no-repeat; } .active #userVipTab { background: #fff url('/images/menu-tab-uservip.png') 0 100% no-repeat; } #navpath { width: 880px; margin: 0 auto 20px; background: url('/images/bg-navpath-top.gif') 0 0 no-repeat; line-height: 15px; padding-top: 8px; _height:1px; } #navpath .in { background: url('/images/bg-navpath-bot.gif') 0 100% no-repeat; padding: 0 17px 10px; _height:1px; } #navpath a { color: #666; } #navpath span { background: url('/images/ico-bul-arrow-red-big.gif') 50% 50% no-repeat; padding: 0 10px 0 0; _height:1px; } #foot, #foot a { color: #999; } #footmenu { padding: 50px 31px 0; margin: 0 0 5px; } #footmenu li { float: left; padding-right: 30px; } #sosumi { margin: 0 10px; padding: 0 21px 40px; min-height: 31px; line-height: 31px; background: url('/images/bg-footer.png') 0 0 repeat-x; } /*- Main classes -*/ .fr { float: right !important; } .fl { float: left !important; } .clear { clear: both !important; } .right { text-align: right !important; } .left { text-align: left !important; } .center { text-align: center !important; } .last { margin-right: 0 !important; margin-bottom: 0 !important; } .small { font-size: .91em; } .light { color: #666; } .hidden { display: none; } .ico { padding-left: 20px; background: 0 50% no-repeat; } .ico2 { padding-right: 20px; background: 100% 50% no-repeat; } .cols2 .col1 { width: 395px; float: left; margin-right: 15px; _display: inline; } .cols2 .col2 { width: 460px; float: right; _display: inline; } .cols2modi .col1 { float: left; width: 320px; margin: 0; padding-right: 10px; _display: inline; } .cols2modi .col2 { float: right; margin-left: -1px; width: 520px; padding-left: 19px; _display: inline; } .cols3 .col1 { width: 280px !important; float: left; margin-right: 15px; _display: inline; } .cols3 .col2 { width: 280px !important; float: left; _display: inline; } .cols3 .col3 { width: 280px !important; float: right; _display: inline; } .cols3modi .col1 { width: 210px; float: left; margin-left: 40px;_display: inline; } /* margin-right: 55px; */ .cols3modi .col2 { width: 210px; float: left; _display: inline; } .cols3modi .col3 { width: 210px; float: right; margin-right: 40px; _display: inline; } .colsFifty .col1 { width: 49% !important; float: left; _display: inline; margin: 0; } .colsFifty .col2 { width: 49% !important; float: right; _display: inline; } .brands .cols3modi .clearfix { margin-bottom: 30px; =width: 100%; } .more { text-align: right; } .more a { padding-left: 10px; background: url('/images/ico-bul-arrow-red.gif') 0 .45em no-repeat; _height:1px; } .paging { text-align: right; } .list li { padding-left: 10px; background: url('/images/ico-bul-sq-red.gif') 0 .55em no-repeat; _height:1px; } .noticeErr { border: 1px solid #eb4000; padding: 2px 10px 4px; background: #fff; margin-bottom: 10px; } .noticeErr li { background: url('/images/ico-bul-arrow-red.gif') 0 .5em no-repeat; padding-left: 10px; } .noticeOk { border: 1px solid #0067a4; padding: 2px 10px 4px; background: #fff; margin-bottom: 10px; } .noticeOk li { background: url('/images/ico-bul-arrow-grey.gif') 0 .5em no-repeat; padding-left: 10px; } .seeMore { margin: -5px 25px 10px 0; position: relative;} /*- Boxes -*/ .box { margin: 0 0 10px 0; padding: 0 10px; } .boxStrong { border: 1px solid #eee9df; background: #f6f3ee; padding: 8px; } .boxStrong .img { width: 260px; height: 210px; overflow: hidden; margin-bottom: 15px; } .boxStrong .descr { margin-bottom: 15px; } .boxStrong .more { margin-bottom: 5px; } .boxNews .info { margin: 0 0 5px 10px; padding-left: 10px; background: url('/images/ico-bul-arrow-grey.gif') 0 .45em no-repeat; color: #999; _height:1px; } .boxNews .descr { margin: 0 0 15px 10px; } .boxNews .img { margin: 0 -10px 0 10px; width: 260px; height: 100px; overflow: hidden; } .boxItems .item { border-bottom: 1px solid #ddd3bf; padding: 0 10px 15px 10px; margin-bottom: 15px; _height: 1px; position: relative; } .boxItems .item .img { float: left; width: 80px; height: 80px; overflow: hidden; } .boxItems .item .descr { float: right; width: 150px; padding-bottom: 25px; } .boxItems .item .descr p { margin: -0.4em 0 5px; } .boxItems .last { border: none;} .boxItems .item .category a { color: #000 !important; } .boxSPSNew { margin-bottom: 20px; position: relative; } .boxSPSNew span { position: absolute; right: 5px; top: 0; width: 92px; height: 92px; background: url('/images/sps-new-star.png'); } .en .boxSPSNew span { background: url('/images/sps-new-star-en.png'); } .ca .boxSPSNew span { background: url('/images/sps-new-star-ca.png'); } .boxRounded { background: url('/images/bg-box-rounded-top.png') 0 0 no-repeat; padding: 0; margin-bottom: 20px; width: 266px; _height:1px; } .boxRounded .in, .boxRounded form { background: url('/images/bg-box-rounded-bottom.png') 0 100% no-repeat; padding: 10px 13px 15px 13px; _height:1px; } .boxRounded p { margin-bottom: 10px; } .boxRounded .line { position: relative; margin-left: 50px; margin-bottom: 10px; line-height: 2.2; } .boxRounded label { position: absolute; left: -50px; width: 50px; } .boxRounded .submit { text-align: right; margin-bottom: 0; padding-right: 0; } .boxRounded .line input { width: 98%; } .boxImg { border: 1px solid #eee9df; background: #f6f3ee; padding: 10px 10px 0 10px; } .boxImg p { padding: 5px 0; } .boxBrand { margin-bottom: 30px; } .boxBrand .img { min-height: 80px; _height: 80px; margin-bottom: 10px; text-align: center; } .boxBrand .descr { margin-bottom: 10px; } .boxBrand .link { text-align: right; font-weight: bold; } .boxContacts { background: url('/images/bg-contacts.png') 0 0 no-repeat; font-family: 'Arial CE', Arial, 'Helvetica CE', lucida, sans-serif; width: 302px; height: 216px; line-height: 30px; padding-top: 2px;} .boxContacts p { margin: 0 !important; font-size: 1.6em; } .boxContacts p.l { font-size: 1.5em; } .boxContacts .line { padding: 10px 5px 0 60px; } .boxDownload { padding: 0 17px 20px; } .boxDownload h5 { padding: 0; background: none; font-size: 1.15em; margin-bottom: 15px; } .boxDownload .item { margin: 0 20px 20px 10px; float: left; text-align: center; } .boxDownload .item .img { margin-bottom: 10px; min-height: 97px; _height: 97px; width: 130px; } .boxDownload .item230 .img { width: 230px; } .boxDownload .item p a { padding-left: 20px; background: url('/images/ico-bul-sqarrow-red-down.gif') 0 50% no-repeat; _height:1px; } .boxDownload .list ul { padding-right: 20px; } .boxDownload .list li { padding-left: 26px; line-height: 20px; } .boxDownload .list .icoFILE { background: url('/images/ico/file.png') 0 50% no-repeat; _height:1px; } .boxDownload .list .icoDOC { background: url('/images/ico/doc.gif') 0 50% no-repeat; _height:1px; } .boxDownload .list .icoXLS { background: url('/images/ico/xls.gif') 0 50% no-repeat; _height:1px; } .boxDownload .list .icoPDF { background: url('/images/ico/pdf.gif') 0 50% no-repeat; _height:1px; } .boxDownload .list .icoZIP { background: url('/images/ico/zip.gif') 0 50% no-repeat; _height:1px; } .boxDownload .list .icoRAR { background: url('/images/ico/rar.gif') 0 50% no-repeat; _height:1px; } .boxDownload .list .icoPPT { background: url('/images/ico/ppt.gif') 0 50% no-repeat; _height:1px; } .boxDownload .list .icoPS { background: url('/images/ico/ps.gif') 0 50% no-repeat; _height:1px; } .boxDownload .list .icoMP3 { background: url('/images/ico/mp3.gif') 0 50% no-repeat; _height:1px; } .boxDownload .list .icoPSD { background: url('/images/ico/psd.gif') 0 50% no-repeat; _height:1px; } .boxDownload .list .icoGIF { background: url('/images/ico/gif.gif') 0 50% no-repeat; _height:1px; } .boxDownload .list .icoPNG { background: url('/images/ico/png.gif') 0 50% no-repeat; _height:1px; } .boxDownload .list .icoTIF { background: url('/images/ico/tif.gif') 0 50% no-repeat; _height:1px; } .boxDownload .list .icoTXT { background: url('/images/ico/txt.gif') 0 50% no-repeat; _height:1px; } .boxCategoryLinks { margin: 0 0 20px 16px; border-bottom: 1px solid #ccc; padding-bottom: 15px; } .boxCategoryLinks li { margin-bottom: 2px; } .boxCategoryLinks li a { padding-left: 20px; background: url('/images/ico-bul-sqarrow-red-down.gif') 0 50% no-repeat; _height:1px; } #product .boxCategoryLinks { border-bottom: none; margin: 0; padding: 0; } .boxMoreProducts li { margin-bottom: 3px; } #sqPromo { padding: 0;} .levels { border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 20px; padding-left: 16px;} .levels ul { margin-left: 16px; } .levels a { color: #000; } .levels a:hover { color: #fb0000 !important; } .levels .col1 { width: auto; margin-right: 60px; } .levels .col2 { width: auto; float: left; margin-right: 60px; } .text h3 { margin-bottom: 5px; } .text p { margin-bottom: 15px; } .text .tBox { margin: 0 0 20px 11px; } .text .tBox p { margin-bottom: 0; } .dList p { position: relative; margin-left: 10em; } .dList p strong { display: block; position: absolute; left: -10em; width: 9.5em; text-align: right;} .dListTable th { text-align: left; padding: 0 5px 3px 0; vertical-align: top; } .dListTable td { text-align: left; padding: 0 0 3px 0; vertical-align: bottom; } .downloadsList li { background: url('/images/ico-bul-arrow-red-down.png') 0 .55em no-repeat; padding-left: 11px; } .formBox { /*- base idea for formBox by Jakub "Kvezt" Španihel -*/ } .formBox .clearfix { position: relative; line-height: 2.1; margin-bottom: 5px; } .formBox .lab { float: left; width: 25%; text-align: right; font-weight: bold; } .formBox .cont { float: right; width: 74%; } .formBox input { width: 99%; } .formBox textarea { width: 99%; height: 7em; } .formBox .clean { width: auto !important; border: none !important; padding: 0 !important; margin: 0 !important; _height:1px; } .formBox .submit { text-align: right; margin-bottom: 10px; padding-right: 1%; } .formBox p { line-height: 1.4; padding-top: .4em; } /*- in-page blocks -*/ #product { clear: both; } #product .col1 { width: 370px; padding-bottom: 20px;} #product .col2 { width: 470px; } #product .col1 .img { text-align: right; } #products { clear: both; } #products .cols { margin-bottom: 10px; border-bottom: 1px solid #ccc; } #products .last { border-bottom: none; } #products h3 { font-size: 1.27em; font-weight: normal; margin-bottom: 20px; } #products .item { border: none; background: #F8F6F2;padding-top: 10px; padding-bottom: 10px; } #hp #products .item { border-bottom: 1px solid #ddd3bf; background: none; padding-top: 0; padding-bottom: 15px; } #products .item .info { float: right; padding-top: 5px; margin-top: 10px; position: absolute; bottom: 5px; right: 10px;} #products .item .info a { color: #fff; text-decoration: none; display: block; width: 68px; height: 15px; padding: 0 5px 0 20px; background: #919191 url('/images/bg-plus-greybg.gif') 0 0 no-repeat;} #products .item .info a:hover { text-decoration: none !important; color: #fff !important; background-color: #666;} #userInfo .col1 { border-right: 1px solid #ddd3bf; width: 320px; margin: 0; padding-right: 10px;} #userInfo .col2 { border-left: 1px solid #ddd3bf; margin-left: -1px; width: 520px; padding-left: 19px; } #userInfo table { width: 100%; border-collapse: collapse; margin-bottom: 15px;} #userInfo table td { padding: 2px 0; } #userInfo table .count { padding-right: 5px; } #userInfo table .count, #userInfo table .count input { width: 2.5em; } #userInfo table .name, #userInfo table .actions { border-bottom: 1px solid #ddd3bf; padding-left: 5px; } #userInfo table .actions { text-align: right; } #userInfo table .actions input { padding: 0; } #userInfo table .name a { color: #000; } #userInfo table input.alt { background: #eb3f00; } #contact .col1 { padding-left: 18px; width: 302px; } #contact .col2 { margin-left: 0 !important; padding: 0;} #contact h3 { color: #000; background: none; padding: 0; font-size: 1.4em; } #contact .text { margin-bottom: 35px; } #contact .text p { font-size: 1.2em; line-height: 1.8; }