/* * harbinger.ro * ------------- * * Made by : Viorel Mocanu * viorel.mocanu@gmail.com * */ /* GLOBALS */ html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, a, img, button, button span, button strong { border : none; background : transparent; margin : 0; padding : 0; outline : 0; } /* GENERALS */ body { background : #e2e6e9 url(../img/bg-body.png) left top repeat-x; color : #666; font-family : Arial, Helvetica, Lucida Grande, Verdana, sans-serif; font-size : 100.01%; text-align : center; } a, a:link { background : transparent; color : #ff4800; text-decoration : none; } a:active { color : #fb852b; text-decoration : none; } a:hover { color : #b73b09; text-decoration : none; } button, label, a { cursor : pointer; } ul, ol { list-style-type : none; list-style-position : outside; } h1, h2, h3, h4, h5, h6 { font-size : 1em; line-height : 1.5em; font-weight : 100; color : #444; } q, blockquote { font-style : italic; font-family : Georgia, Times New Roman, Times, serif; } legend { display : block; white-space : normal !important; } input, select, textarea { display : block; padding : 2px 3px; /* border : 1px solid #000; background : #fff !important; */ color : #808080; font-size : 12px; } input:focus, input:active, input:hover, select:focus, select:active, select:hover, textarea:focus, textarea:active, textarea:hover, input.focus, input.active, input.hover, select.focus, select.active, select.hover, textarea.focus, textarea.active, textarea.hover { /*border : 1px solid #ff4800; background : #f3f3f3 !important; */ color : #000; } input[type=radio], input[type=checkbox] { border : none; padding : 0; margin : 0; width : 14px; height : 14px; color : #000; } /* GENERAL CLASSES */ .Hidden, .hidden { display : block; text-indent : -9999px; } form .Hidden, form .hidden { display : none !important; } /* STRUCTURALS */ #wrapper { background : transparent url(../img/bg-wrapper.png) center top no-repeat; } #framework { width : 980px; margin : 0 auto; padding : 14px 0 30px 0; font-size : 12px; line-height : 18px; text-align : left; } #header { width : 910px; height : 65px; padding : 10px 35px; background : #111 url(../img/bg-header.png) center top no-repeat; } h1 { display : block; float : left; width : 345px; height : 65px; } a#branding { display : block; float : left; width : 197px; height : 65px; background : transparent url(../img/logo.png) left top no-repeat; } /* a#branding:hover { background : transparent url(../img/logo.png) left bottom no-repeat; } */ ul#meniu { display : block; float : left; width : 530px; height : 65px; padding : 0 30px 0 0; } #meniu li { display : block; float : left; height : 65px; } #meniu li#acasa { width : 103px; } #acasa a { display : block; width : 47px; height : 65px; padding : 0 30px; background : transparent url(../img/buton-acasa.png) center top no-repeat; } #acasa a:hover, #acasa.Active a { background : transparent url(../img/buton-acasa.png) center bottom no-repeat; } #meniu li#despre { width : 116px; } #despre a { display : block; width : 56px; height : 65px; padding : 0 30px; background : transparent url(../img/buton-despre.png) center top no-repeat; } #despre a:hover, #despre.Active a { background : transparent url(../img/buton-despre.png) center bottom no-repeat; } #meniu li#contact { width : 123px; } #contact a { display : block; width : 63px; height : 65px; padding : 0 30px; background : transparent url(../img/buton-contact.png) center top no-repeat; } #contact a:hover, #contact.Active a { background : transparent url(../img/buton-contact.png) center bottom no-repeat; } #features { width : 980px; height : 591px; } #main { width : 980px; height : 591px; position : relative; overflow : hidden; margin : 30px 0 0 0; background : transparent url(../img/bg-main.png) center top no-repeat; } #flowpanes { position : relative; clear : both; width : 980px; height : 481px; } #flowpanes div { display : block; float : left; width : 980px; } #flowpanes .items { width : 20000em; position : absolute; clear : both; margin : 0; padding : 0; z-index : 50; } #flowpanes .less, #flowpanes .less a { } #flowpanes div .Detalii { float : right; width : 611px; height : 451px; margin : 0 9px 0 -21px; background : transparent url(../img/bg-detalii.png) right top no-repeat; } .Detalii h2 { display : block; height : 56px; margin : 30px 60px 30px 50px; color : #1b63b5; font-size : 30px; line-height : 30px; text-indent : -9999px; } h2#protectie { background : transparent url(../img/titlu-protectie.png) left top no-repeat; } h2#eficient { background : transparent url(../img/titlu-eficient.png) left top no-repeat; } h2#forma { background : transparent url(../img/titlu-forma.png) left top no-repeat; } .Detalii h3 { display : block; height : 19px; margin : 30px 30px 30px 50px; color : #000; font-size : 18px; line-height : 18px; text-transform : uppercase; text-indent : -9999px; } h3#benzi { background : transparent url(../img/titlu-benzi.png) left top no-repeat; } h3#manusi { background : transparent url(../img/titlu-manusi.png) left top no-repeat; } h3#cablu { background : transparent url(../img/titlu-cablu.png) left top no-repeat; } .Detalii ul { display : block; margin : 30px 30px 20px 50px; } .Detalii ul li { display : block; margin : 0 0 20px 0; } .Detalii ul li strong { display : block; float : left; width : 170px; } .Detalii ul li span { display : block; float : right; width : 360px; } #flowpanes div.Pret { display : block; position : relative; width : 170px; height : 80px; margin : 0 0 0 20px; text-indent : -9999px; z-index : 100; } #ron441 { background : transparent url(../img/441ron.png) left top no-repeat; } #ron774 { background : transparent url(../img/774ron.png) left top no-repeat; } #ron396 { background : transparent url(../img/396ron.png) left top no-repeat; } a.Buton { display : block; float : left; width : 400px; height : 80px; background : transparent url(../img/buton-cumpara.png) left top no-repeat; } a.Buton:active { background : transparent url(../img/buton-cumpara.png) left bottom no-repeat; } a.Buton:hover { background : transparent url(../img/buton-cumpara.png) left center no-repeat; } #flowpanes div .Exemplificare { position : absolute; width : 380px; height : 581px; z-index : 100; } .Exemplificare img { display : block; position : relative; } ul#flowtabs { display : block; position : relative; width : 532px; height : 60px; margin : 0 10px 10px 10px; padding : 20px 29px 20px 399px; background : #28282a url(../img/bg-flowtabs.png) left top repeat-x; } #flowtabs li { display : block; float : left; width : 178px; height : 60px; } #flowtabs li#centrala { width : 176px; } #flowtabs a { display : block; width : 178px; height : 60px; } #flowtabs #centrala a { width : 176px; } a#t1 { background : transparent url(../img/sprite-butoane.png) left top no-repeat; } a#t1.Active, a#t1.Active:hover { background : transparent url(../img/sprite-butoane.png) left bottom no-repeat; } a#t1:hover { background : transparent url(../img/sprite-butoane.png) left center no-repeat; } a#t2 { background : transparent url(../img/sprite-butoane.png) center top no-repeat; } a#t2.Active, a#t2.Active:hover { background : transparent url(../img/sprite-butoane.png) center bottom no-repeat; } a#t2:hover { background : transparent url(../img/sprite-butoane.png) center center no-repeat; } a#t3 { background : transparent url(../img/sprite-butoane.png) right top no-repeat; } a#t3.Active, a#t3.Active:hover { background : transparent url(../img/sprite-butoane.png) right bottom no-repeat; } a#t3:hover { background : transparent url(../img/sprite-butoane.png) right center no-repeat; } #aside { width : 980px; height : 591px; overflow : hidden; margin : 30px 0 0 0; background : transparent url(../img/bg-aside.png) center bottom no-repeat; } #aside h2 { display : block; float : left; width : 855px; height : 30px; margin : 30px 20px 0 40px; color : #1b63b5; font-size : 30px; line-height : 30px; text-indent : -9999px; } #t-despre h2 { background : transparent url(../img/titlu-despre.png) left center no-repeat; } #t-contact h2 { background : transparent url(../img/titlu-contact.png) left center no-repeat; } #t-oferte h2 { background : transparent url(../img/titlu-oferte.png) left center no-repeat; } #t-recomandari h2 { background : transparent url(../img/titlu-recomandari.png) left center no-repeat; } #t-garantie h2 { background : transparent url(../img/titlu-garantie.png) left center no-repeat; } #t-incearca h2 { background : transparent url(../img/titlu-incearca.png) left center no-repeat; } #t-manusa-1-pentru-sac h2 { background : transparent url(../img/titlu-manusi-pentru-sac.png) left center no-repeat; } #t-manusa-2-mens-pro-black-gold h2 { background : transparent url(../img/titlu-manusi-mens-pro-black-gold.png) left center no-repeat; } #t-manusa-3-flexfit-anti-microbiene h2 { background : transparent url(../img/titlu-manusi-flexfit-anti-microbiene.png) left center no-repeat; } #t-manusa-4-classic-cu-suport-pentru-incheietura h2 { background : transparent url(../img/titlu-manusi-classic-cu-suport-pentru-incheietura.png) left center no-repeat; } #t-manusa-5-big-grip-ii-cu-suport-pentru-incheietura h2 { background : transparent url(../img/titlu-manusi-big-grip-ii-cu-suport-pentru-incheietura.png) left center no-repeat; } #t-manusa-6-womens-pro-black-pink h2 { background : transparent url(../img/titlu-manusi-womens-pro-black-pink.png) left center no-repeat; } #t-coarda-1-funie-profesionala-pentru-triceps h2 { background : transparent url(../img/titlu-corzi-funie-profesionala-pentru-triceps.png) left center no-repeat; } #t-coarda-2-cu-margele-din-plastic h2 { background : transparent url(../img/titlu-corzi-coarda-cu-margele-din-plastic.png) left center no-repeat; } #t-coarda-3-speed-rope h2 { background : transparent url(../img/titlu-corzi-speed-rope.png) left center no-repeat; } #t-coarda-4-elastica-cu-maner-super-heavy h2 { background : transparent url(../img/titlu-corzi-coarda-elastica-cu-maner-super-heavy.png) left center no-repeat; } #t-coarda-5-elastica-figure-8 h2 { background : transparent url(../img/titlu-corzi-coarda-elastica-figure-8.png) left center no-repeat; } #t-coarda-6-speed-rope-anti-microbiana h2 { background : transparent url(../img/titlu-corzi-speed-rope-anti-microbiana.png) left center no-repeat; } #t-accesr-1-saltea-pliabila h2 { background : transparent url(../img/titlu-accesorii-saltea-pliabila.png) left center no-repeat; } #t-accesr-2-centura-din-textil-pentru-agatat-greutati h2 { background : transparent url(../img/titlu-accesorii-centura-din-textil-pentru-agatat-greutati.png) left center no-repeat; } #t-accesr-3-ham-pentru-muschii-gatului h2 { background : transparent url(../img/titlu-accesorii-ham-pentru-muschii-gatului.png) left center no-repeat; } #t-accesr-4-minge-cu-greutate h2 { background : transparent url(../img/titlu-accesorii-minge-cu-greutate.png) left center no-repeat; } #t-accesr-5-balance-trainer h2 { background : transparent url(../img/titlu-accesorii-balance-trainer.png) left center no-repeat; } #t-accesr-6-chingi-de-antrenament h2 { background : transparent url(../img/titlu-accesorii-chingi-de-antrenament.png) left center no-repeat; } #aside h3 { display : block; clear : both; margin : 24px 0 9px 0; color : #000; font-weight : 900; } #aside h3 a { } #aside h3 img { display : block; } #aside p { display : block; margin : 9px 0; } a.InchideAside { display : block; float : left; width : 25px; height : 25px; margin : 33px 30px 0 0; background : transparent url(../img/buton-inchide.png) left top no-repeat; } a.InchideAside:hover { background : transparent url(../img/buton-inchide.png) left bottom no-repeat; } .ColoanaStanga { float : left; width : 420px; margin : 0 30px 30px 40px; } #t-contact .ColoanaStanga { margin : 0 30px 0 40px; } .ColoanaStanga img { display : block; margin : 20px auto 0 auto; } #map { display : block; width : 420px !important; height : 220px !important; } .ColoanaDreapta { float : right; width : 420px; margin : 0 40px 30px 30px; } #t-contact .ColoanaDreapta { margin : 0 40px 0 30px; } .ColoanaDreapta img { display : block; margin : 24px 0 0 0; } .ColoanaDreapta ul { display : block; width : 420px; margin : 0 0 20px 20px; position : relative; left : -20px; list-style-type : disc; list-style-position : outside; list-style-image: url(../img/arrow.png); } .ColoanaDreapta a.Buton { margin : 10px; } a#emailLink { display : block; float : left; width : 133px; height : 18px; margin : 0 5px 0 0; background : transparent url(../img/email-link.png) left top no-repeat; } a#emailLink:hover { background : transparent url(../img/email-link.png) left bottom no-repeat; } #emailLink em { display : block; text-indent : -9999px; } form#leadForm { display : block; } #leadForm legend { display : none !important; } #leadForm ul { margin : 0; left : 0; list-style-type : none; } #leadForm li { display : block; margin : 0 0 15px 0; } #leadForm label { display : block; float : left; width : 50px; height : 20px; padding : 0 10px 0 0; } #leadForm label:hover { color : #ff4800; } #leadForm li.Error label { color : #f00; font-weight : 900; } #leadForm input { display : block; float : left; width : 200px; } #leadForm li.Error input { border : 1px solid #f00; background : #fee !important; height : 18px; width : 204px;} #leadForm textarea { display : block; float : left; width : 204px; height : 80px; } #leadForm li.Error textarea { border : 1px solid #f00; background : #fee !important; } .FieldInfo { display : none; float : right; width : 140px; font-size : 9px; line-height : 10px; } li:hover .FieldInfo, li.hover .FieldInfo { display : block; } #leadForm li.Error .FieldInfo { display : block; color : #f00; } button#trimiteLead { display : block; width : 164px; height : 56px; margin : 0 0 0 59px; background : transparent url(../img/buton-lead.png) left top no-repeat; } button#trimiteLead:active, #leadForm button.active { background : transparent url(../img/buton-lead.png) left bottom no-repeat; } button#trimiteLead:hover, #leadForm button.hover { background : transparent url(../img/buton-lead.png) left center no-repeat; } #trimiteLead strong { display : block; text-indent : -9999px; } #framework .ColoanaDreapta #leadForm li.Proces { display : none; position : absolute; margin : -287px 0 0 280px; width : 120px; height : 173px; padding : 10px; background : #eee; border : 1px solid #ddd; font-size : 9px; line-height : 16px; color : #000; } .Proces h4 { display : block; margin : 0 0 5px 0; color : #000; font-size : 12px; line-height : 18px; font-weight : 900; } .Proces h4.Attention { color : #f00; } .Proces h4.Success { color : #0a0; } .Proces img { float : left; margin : 0 5px 0 0; } .Proces p { font-size : 9px; line-height : 12px; } ul.localFooter { display : block; clear : both; margin : 20px 40px; } #t-contact ul.localFooter { margin : -30px 40px 0 40px; } #t-despre ul.localFooter, #t-contact ul.localFooter { display : none; } .localFooter li { display : block; float : left; padding : 0 15px 0 0; margin : 0 15px 0 0; border-right : 1px solid #ddd; } .localFooter li.Last { margin : 0; padding : 0; border : none; } .localFooter li.Active a { font-weight : 900; color : #666; } ul#catalog { display : block; width : 980px; height : 255px; margin : 20px 0 0 0; } #catalog li { display : block; } #catalog h2 { display : block; width : 910px; height : 30px; margin : 0 auto; padding : 10px 35px; background : transparent url(../img/bg-box.png) center top no-repeat; font-size : 14px; line-height : 30px; font-weight : 900; } #catalog ul { display : block; margin : 20px 10px; } #catalog ul li { display : block; float : left; width : 139px; height : 185px; margin : 0 25px 0 0; background : transparent url(../img/bg-catalog.png) center 2px no-repeat; } #catalog ul li.Last { margin : 0; } #catalog ul li a { display : block; width : 139px; height : 185px; background : transparent; text-align : center; } #catalog ul li a:hover { background : #e3e5e7 url(../img/bg-catalog-a.png) left top repeat-x; } #catalog ul a .Thumb { display : block; margin : 2px; background : transparent; } #catalog ul a:hover .Thumb, #catalog ul .Active a .Thumb { margin : 0; border : 2px solid #ff4800; background : #fff; } #catalog ul a strong { display : none; margin : 9px 0 0 0; color : #666; font-weight : 100; } #catalog ul a:hover strong { display : block; } a#toateProdusele { display : block; width : 910px; height : 30px; margin : 0 auto; padding : 10px 35px; background : transparent url(../img/bg-box.png) center top no-repeat; line-height : 30px; font-weight : 900; } a#toateProdusele:hover { background : transparent url(../img/bg-box.png) center top no-repeat; } ul#concluzie { display : block; width : 960px; height : 130px; margin : 20px 10px; } #concluzie li { display : block; float : left; width : 217px; height : 130px; margin : 0 31px 0 0; } li#oferte { margin : 0 30px 0 0; } li#incearca { margin : 0; } #concluzie li a { display : block; width : 217px; height : 130px; font-size : 9px; line-height : 12px; color : #999; } #concluzie li a:hover { color : #fff; } #concluzie li a strong { display : block; height : 64px; } #concluzie li a span { display : block; width : 90px; padding : 0 0 0 10px; } #oferte a { background : transparent url(../img/buton-oferte.png) left top no-repeat; } #oferte a:hover { background : transparent url(../img/buton-oferte.png) left bottom no-repeat; } #recomandari a { background : transparent url(../img/buton-recomandari.png) left top no-repeat; } #recomandari a:hover { background : transparent url(../img/buton-recomandari.png) left bottom no-repeat; } #garantie a { background : transparent url(../img/buton-garantie.png) left top no-repeat; } #garantie a:hover { background : transparent url(../img/buton-garantie.png) left bottom no-repeat; } #incearca a { background : transparent url(../img/buton-incearca.png) left top no-repeat; } #incearca a:hover { background : transparent url(../img/buton-incearca.png) left bottom no-repeat; } #footer { width : 910px; height : 30px; margin : 0 auto; padding : 10px 35px; background : transparent url(../img/bg-box.png) center top no-repeat; } #footer p { display : block; font-size : 9px; line-height : 30px; } .Left { float : left; width : 340px; text-align : left; } .Right { float : right; width : 520px; text-align : right; } /* HACKS */ .clearfix:after, .Detalii ul li:after, #catalog ul:after, #leadForm li:after, ul.localFooter:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix,.Detalii ul li, #catalog ul, #leadForm li, ul.localFooter { display: inline-block; } html[xmlns] .clearfix, html[xmlns] .Detalii ul li, html[xmlns] #catalog ul, html[xmlns] #leadForm li, html[xmlns] ul.localFooter { display: block; } * html .clearfix, * html .Detalii ul li, * html #catalog ul, * html #leadForm li, * html ul.localFooter { height: 1%; } /* LIGHTBOX */ #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background: transparent url(../img/blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(../img/prev.gif) left 50% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(../img/next.gif) right 50% no-repeat; } /*** START : next / previous text links ***/ #nextLinkText, #prevLinkText{ color: #FF9834; font-weight:bold; text-decoration: none; } #nextLinkText{ padding-left: 20px; } #prevLinkText{ padding-right: 20px; } /*** END : next / previous text links ***/ /*** START : added padding when navbar is on top ***/ .ontop #imageData { padding-top: 5px; } /*** END : added padding when navbar is on top ***/ #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; } #imageData{ padding:0 10px; } #imageData #imageDetails{ width: 90%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; } #imageData #helpDisplay {clear: left; float: left; display: block; } #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; display: none; } #lightboxIframe { display: none; } /* SLIDER */ .container { overflow:hidden; position:relative; } .slides { position:absolute; top:0; left:0; list-style:none; padding:0; margin:0; } .slides li { position:absolute; top:0; display:none; padding:0; margin:0; } .InfoTitlu { display : none; } #main .slides, #main .container, #main .slides li { width : 600px; height : 337px; } #galerieMica .slides, #galerieMica .container, #galerieMica .slides li { width : 220px; height : 220px !important; } #galerieStire .slides, #galerieStire .container, #galerieStire .slides li { width : 220px; height : 165px !important; } /* STYLE SWITCHER */ body.small #header { overflow : hidden; }