/************************************************\ » Main Layout - Screen -------------------------------------------------- // CSS V.2.12 (26/01/2011) - Graphic effects added: transparency box // CSS V.2.11 (21/12/2010) - Some code reorganized // CSS V.2.10 (06/12/2010) - Added Graphic Effects tab - Optimized Code // CSS V.2.00 (16/08/2010) - Added Eric Meyer's CSS reset v1.0 - Added basic structural layout templates - Corrected mainmenu dropdown template - Added rounded Corners to graphic objects // CSS V.1.00 (01/02/2010) - basic css template created -------------------------------------------------- By Epoch Multimédia 2010 \************************************************/ /************************************************\ » RESET \************************************************/ /* Eric Meyer's CSS reset v1.0 | 20080212 http://meyerweb.com/eric/tools/css/reset/ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /************************************************\ » GLOBAL PARAMETERS \************************************************/ body, html { height: 100%; } body { background-color: #FFF; behavior: url("temas/clientside/csshover3.htc"); /* IE6 png fix */ text-align: center; } img, div, input { behavior: url("temas/clientside/iepngfix.htc") } /* IE6 png fix */ a img { border: none } p, h1, h2, h3, h4, h5, hr, ul, form, fieldset, table { clear: both; margin-bottom: 15px; } ul { list-style: none;} legend { display: none; } fieldset { border: none } /************************************************\ » TYPE \************************************************/ /* Shared ****************************************/ body, textarea, input { font: 14px Arial, Helvetica, sans-serif } /* Colors ****************************************/ a, .btn:hover, #header li li:hover a { color: #000 } .alert.confirm, #header li li a { color: #333 } body, #subFooter, .btn { color: #666 } #footer, #actions, .btn.dark, #web .intro p.ptf , label, .valida { color: #888 } .error { color: #F00; } .confirm { color: #690; } #web .servicos { color: #CCC } .alert.error, #header a, #header h2, .btn.dark:hover, input[type="submit"], #web .servicos h4 #web .servicos li strong { color: #FFF; } /* Size ******************************************/ #header #headline h2 { font-size: 60px; } h1 { font-size: 28px } h2 { font-size: 22px } h3 { font-size: 20px } h4 { font-size: 16px } h5 { font-size: 14px } small, #header a, #subFooter, .btn, #contact .team p, #web .intro p.ptf, #web .servicos.sep ul, #contact .contacts .error { font-size: 12px; } #footer, .note, #actions { font-size: 11px; } /* Variations ************************************/ h1, h2, h3, #header li li a, #about #contact .btn, #contact .team h5 { font-weight: normal } #header a, .btn, label, .valida { font-weight: bold } a, .btn:hover, #header a:hover { text-decoration: none } a:hover { text-decoration: underline } a[target="_blank"]:before, a[target="new"]:before { } /* links on new windows */ #header #headline h2 { font-family: 'PT Sans', sans-serif; } /************************************************\ » STRUCTURAL LAYOUT \************************************************/ /* Main *****************************************/ #container, #header .wrapper, #footer .wrapper { margin: 0 auto; text-align: left; } .wrapper { clear: both; overflow: auto } #headline { position: relative } /* Width ****************************************/ #container, #header .wrapper, #footer .wrapper { width: 940px; } #header, #footer { width: 100%; } /* 2 Col */ .wrapper.twoCol .content { float: left; width: 550px; } .wrapper.twoCol .sidebar { float: right; width: 300px; } /* same width */ .wrapper.twoCol.sameWidth .content { float: left; width: 410px; } .wrapper.twoCol.sameWidth .sidebar { float: ; width: 410px; } /* 3 Col */ .wrapper.threeCol .content { float: left; margin-right: 20px; width: 290px; } .wrapper.threeCol .sidebar { float: left; width: 260px; } .wrapper.threeCol.box .content { width: 270px; } .wrapper.threeCol .content.box { width: 260px; margin-right: 40px; } .wrapper.threeCol.box .sidebar { width: 240px; } .wrapper.threeCol .sidebar.box { width: 260px; } /* 4 Col */ .wrapper.fourCol .content, .wrapper.fourCol .sidebar { float: left; margin-right: 20px; width: 195px } /************************************************\ » GRAPHIC LAYOUT \************************************************/ /* Shared ***************************************/ /* Global */ body { background-color: #F0F0F0 } #container { margin-top: -60px; } .floater { background-color: #FFF; float: left; width: 940px; } .wrapper { margin-bottom: 15px; overflow: auto; } .wrapper.sep { margin-bottom: 30px; } /* Objects */ input[type="text"], input[type="email"], input[type="submit"], textarea, select { background: #F0F0F0 url(../gfx/layout/input_bg.gif); border: none; padding: 4px 0; } input[type="submit"] { cursor: pointer; padding: 6px 8px; } .btn { background: #D8D8D8 url(../gfx/layout/obj_btn_BG.jpg) repeat-x; display: inline-block; padding: 6px 10px; cursor: pointer } .btn.dark, input[type="submit"] { background: #333 url(../gfx/layout/obj_btnDark_BG.png) repeat-x} input.btn { padding: 2px 10px } a[target="_blank"], a[target="new"] { background: url(../gfx/layout/icon_externalLnk.png) right no-repeat; padding-right: 10px;} /* links on new windows */ .sep { border-bottom: dotted 1px #CCC; padding-bottom: 15px; } li.sep { margin-bottom: 15px; } .icon { display: inline-block; overflow: hidden; text-indent: -10000px } .icon#linkedin { background: url(../gfx/layout/sprites.png) -28px -28px no-repeat; height: 60px; width: 50px; } .icon#ptf { background: url(../gfx/layout/sprites.png) -124px -28px no-repeat; height: 60px; width: 50px; } .icon#doc { background: url(../gfx/layout/sprites.png) -228px -28px no-repeat; height: 60px; width: 50px; } .icon#checked { background: url(../gfx/layout/sprites.png) -661px -58px no-repeat; height: 18px; width: 15px; } .icon#arrowRight{ background: url(../gfx/layout/sprites.png) -622px -58px no-repeat; height: 18px; width: 15px; } .icon#moreInfo { background: url(../gfx/layout/sprites.png) -416px -36px no-repeat; height: 26px; width: 68px; } .icon#topo { background: url(../gfx/layout/sprites.png) -526px -42px no-repeat; height: 16px; width: 50px; } .icon#lightDoc { background: url(../gfx/layout/sprites.png) -14px -92px no-repeat; height: 70px; width: 70px; } .icon#lightUser { background: url(../gfx/layout/sprites.png) -114px -92px no-repeat; height: 70px; width: 70px; } .icon#darkDoc { background: url(../gfx/layout/sprites.png) -212px -185px no-repeat; height: 80px; width: 80px; } .icon#darkClock { background: url(../gfx/layout/sprites.png) -510px -185px no-repeat; height: 80px; width: 80px; } .icon#darkUser { background: url(../gfx/layout/sprites.png) -610px -185px no-repeat; height: 80px; width: 80px; } .icon#darkScript { background: url(../gfx/layout/sprites.png) -310px -185px no-repeat; height: 80px; width: 80px; } .icon#darkGraph { background: url(../gfx/layout/sprites.png) -110px -185px no-repeat; height: 80px; width: 80px; } .icon#darkWorld { background: url(../gfx/layout/sprites.png) -410px -185px no-repeat; height: 80px; width: 80px; } .icon#darkZoom { background: url(../gfx/layout/sprites.png) -8px -185px no-repeat; height: 80px; width: 80px; } .icon#smallLinkedin { background: url(../gfx/layout/sprites.png) -622px -138px no-repeat; height: 18px; width: 18px; } .icon#smallEmail { background: url(../gfx/layout/sprites.png) -662px -98px no-repeat; height: 18px; width: 18px; } .icon#smallBlog { background: url(../gfx/layout/sprites.png) -622px -98px no-repeat; height: 18px; width: 18px; } .icon#smallTwitter { background: url(../gfx/layout/sprites.png) -662px -138px no-repeat; height: 18px; width: 18px; } .icon#smallPtf { background: url(../gfx/layout/sprites.png) -325px -18px no-repeat; height: 58px; width: 50px; } /* Header ***************************************/ #header { padding-bottom: 44px; } #header h1 { float: left; } #header h1 img { display: none } #header h1 a { background: url(../gfx/layout/header_logo.png) no-repeat; display: block; height: 43px; margin: 10px 0 0 12px; overflow: hidden; text-indent: -10000px; width:179px } #header ul { float: right; clear: none; margin: 20px 10px 0 0 ; } #header #menuBar { background: url(../gfx/layout/header_mainmenu_BG.png) no-repeat; height: 55px; position: absolute; top: 30px; width: 940px; z-index: 5000; } #header #headline h2 { height: 59px; padding-bottom: 75px; } #header #headline { padding-top: 128px; width: 940px; } #header #menuBar, #header .wrapper { overflow: visible; } /* Header for Home */ #home #header { background: url(../gfx/layout/header_BG_home.jpg) } #home #header #headline { background: url(../gfx/layout/header_headline_BG_home.png) no-repeat; } #home #header #headline h2, #home #header #headline h3 { clear: none;} #home #header #headline h2 { background: url(../gfx/layout/header_headline_home_imgSig.png) no-repeat; height: 263px; margin-left: 240px; overflow: hidden; padding-bottom: 0; text-indent: -5000px; width: 460px; } #home #header #headline h3 { position: absolute; top: 200px } #home #header #headline h3 a:hover img { visibility: hidden } #home #header #headline h3 a { display: block; height: 56px; overflow: hidden; width: 234px } #home #header #headline h3.web { right: 10px; } #home #header #headline h3.web a { background: url(../gfx/layout/header_headline_home_imgWebHover.png) no-repeat; } #home #header #headline h3.ti { left: 10px; } #home #header #headline h3.ti a { background: url(../gfx/layout/header_headline_home_imgTIHover.png) no-repeat; } /* Header for About */ #about #header { background: url(../gfx/layout/header_BG_sobre.jpg) } #about #header #headline { background: url(../gfx/layout/header_headline_BG_about.png) 250px 0px no-repeat; } /* #about.apresenta #header #headline h2 { background: url(../gfx/layout/header_title_aboutApresenta.png) no-repeat; } #about.grupo #header #headline h2 { background: url(../gfx/layout/header_title_aboutGrupo.png) no-repeat; } #about.recruta #header #headline h2 { background: url(../gfx/layout/header_title_aboutRecruta.png) no-repeat; }*/ /* Header for Web */ #web #header { background: url(../gfx/layout/header_BG_web.jpg) } #web #header #headline { background: url(../gfx/layout/header_headline_BG_web.png) no-repeat; } /* Header for TI */ #ti #header { background: url(../gfx/layout/header_BG_ti.jpg) } #ti #header #headline { background: url(../gfx/layout/header_headline_BG_ti.png) no-repeat; } /* #ti #header #headline h2 { background: url(../gfx/layout/header_title_aboutApresenta.png) no-repeat; } */ /* Header for Clients */ #clients #header { background: url(../gfx/layout/header_BG_clientes.jpg) } #clients #header #headline { background: url(../gfx/layout/header_headline_BG_clients.png) no-repeat; } /* Header for Contacts */ #contact #header { background: url(../gfx/layout/header_BG_contactos.jpg) } #contact #header #headline { background: url(../gfx/layout/header_headline_BG_contacts.png) no-repeat; } /* Main Menu */ * html #mainmenu a:hover { visibility:visible } /* hack para IE6 */ #mainmenu { float: left; z-index: 90; } #mainmenu a { display: block; height: 38px; } #mainmenu ul { list-style-type: none; } #mainmenu li { float: left; height: 38px; /* define height for IE */ margin: 0 15px; position: relative; } #mainmenu li ul { background: #FFF; display: none; left: -10px; position: absolute; top: 14px; width: 150px; } /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */ #mainmenu li>ul { top: 15px; left: -10px; width: 150px; } #mainmenu li li { border-top: dotted 1px #999; float: none; height: auto; margin: 0; width: 150px; } #mainmenu li:hover ul, #mainmenu li.over ul { display: block; } /* lists nested under hovered list items */ #mainmenu li li:hover, #mainmenu li li.over { background-color: #F1F1F1; } #mainmenu li li a { padding: 12px; height: auto; } /* Content **************************************/ .spacer { padding: 30px 30px 0 30px; } .box { background-color: #F0F0F0; margin-bottom: 15px; } .box.card { background: #F0F0F0 url(../gfx/layout/content_box_card.png) 5px 5px no-repeat; border-bottom: solid 1px #CCC; border-right: solid 1px #CCC } .box .spacer { padding: 20px 20px 0 20px } #actions { border-bottom: dotted 1px #CCC; padding: 15px 30px; position: relative } #actions p, #actions ul { margin-bottom: 0px } #container .wrapper p { line-height: 140%} /* Home */ #home #intro .content { background: url(../gfx/content/home_web.jpg) 240px -8px no-repeat; border-left: dotted 2px #999; float: right; padding-left: 28px; } #home #intro .sidebar { background: url(../gfx/content/home_ti.jpg) 0px -30px no-repeat; float: left; } #home #intro.wrapper { margin-bottom: 30px; } #home #intro p { width: 200px } #home #intro .sidebar p { float: right; text-align: right } #home .btn { margin: 30px 0 0 0; } #home #actions { border-bottom: none; margin-top: -10px; } #home #actions p { display: none; } /* About */ #about #contentBody .sidebar li { margin-bottom: 8px; } #about #contentBody .sidebar li .icon#checked { float: left; margin: 0 5px 0 0 } #about #organo { text-align: center } #about .icon#lightDoc, #about .icon#lightUser { float: left; margin-bottom: 15px; } #about #contact h4 { clear: none; float:left; margin: 15px 0 0 8px; width: 200px; } #about #contact .btn { display: block; margin-top: 15px; text-align: center } /* Web */ #web .intro { overflow: visible; } #web .intro .content { width: 300px } #web .intro .sidebar { margin-top: -35px; width: 550px } #web .intro .screen { background: url(../gfx/layout/web_monitor.png) no-repeat; margin-top: -10px; padding: 26px 0 0 32px ; height: 400px; } #web .intro .screen .sizer { height: 266px; width: 480px; } #web .intro p.ptf { margin: 0 0 0 220px; overflow: hidden; padding-top: 24px; position: relative } #web .intro p.ptf .icon#smallPtf { position: absolute; bottom: -24px } #web .intro p.ptf a:hover .icon#smallPtf { bottom: -18px } #web .servicos { background: #222 url(../gfx/layout/header_BG_web.jpg) } #web .servicos.sep { border-top: dotted 1px #CCC; padding-top: 30px; border-bottom: 0; padding-bottom: 0 } #web .servicos li { position: relative; padding-left: 26px; } #web .servicos li .icon { position: absolute; left: 4px;} #web .process { margin-bottom: 30px;} #web .process li { float: left; margin-bottom: 20px; padding-right: 40px; width: 135px; } #web .process .icon { display: block; margin-bottom: 8px; } /* TI */ #ti.apresenta #payMethod .icon, #ti.apresenta #contentBody .icon, #ti.servicos #contentBody .icon { float: left; } #ti.apresenta #contentBody li, #ti.servicos #contentBody li { clear: both; margin-bottom: 15px; } #ti.apresenta #contentBody .icon { margin-right: 5px } #ti.apresenta #payMethod h5, #ti.apresenta #payMethod p { clear: none; float:right; width: 120px; } #ti.apresenta #payMethod h5 { margin-bottom: 0px; } #ti.apresenta #payMethod .box {height: 180px; } #ti.servicos #contentBody .icon { margin-right: 5px; } #ti.servicos #listServ { margin-bottom: 0; } #ti.servicos #listServ .content { margin-bottom: 40px; position: relative } #ti.servicos #listServ p, #ti.servicos #listServ ul { margin-bottom:0; padding-bottom: 15px; } #ti.servicos #listServ #checked {float: left; margin-right: 4px; } #ti.servicos #listServ #moreInfo, #ti.servicos #listServ #topo { position: absolute } #ti.servicos #listServ #moreInfo { right: 0; top: 14px; } #ti.servicos #listServ #topo { left: 50%; bottom: -28px; } #ti.servicos #listServ #moreInfo { margin-right: 15px; } #ti.servicos #listServ li { clear: both; margin-bottom: 8px; } /* Clientes */ #clients .testimonials .box img { float: left; margin: 4px 16px 4px 4px } #clients .testimonials .box div div { float: left; width: 180px; } #clients .testimonials .box h4 { margin-bottom: 0px;} #clients .listClients p { text-align: right; } /* Contactos */ #contact .team img { float: left; margin: 0 16px 0 0 } #contact .team h4 { margin-bottom: 0 } #contact .team div div div { float: left; width: 210px; } #contact .contacts iframe { margin-bottom: 20px; } #contact .contacts label { display: block; float: left; margin-top: 6px; width: 60px; } #contact .contacts input[type="text"], #contact .contacts input[type="email"] { width: 240px;} #contact .contacts input[type="submit"] { position: absolute; top: 5px; right: 5px; } #contact .contacts textarea { height: 80px; width: 300px; } #contact .contacts input[type="text"]#validacao { width: 40px } #contact .contacts .emailCopy { background-color: #F0F0F0; padding: 10px; position: relative; width: 280px; } /* Footers **************************************/ /* Sub-Footer */ #subFooter { background: #FFF url(../gfx/layout/footer_sub_BG.gif) repeat-x; float: left; padding: 40px 30px 25px 30px; } #subFooter.wrapper { margin-bottom: 0 } #subFooter p { padding-right: 50px;} #subFooter .icon { float: left; } /* Footer */ #footer { background-color: #333; float: left; padding: 30px 0 0 0 } #footer .content.news { text-align: center } #footer .sidebar { float: right; height: 100px; position: relative; overflow: hidden } #footer .sidebar .logo { overflow: hidden; text-indent: -5000px; float: right; display: block; padding: 0;} #footer .sidebar .ms { background: url(../gfx/layout/footer_logoMS.png); height: 33px; width: 95px; } #footer .sidebar .vcvs { background: url(../gfx/layout/footer_logoViceVersa.gif) no-repeat; height: 33px; width: 160px; } #footer .sidebar .bms { background: url(../gfx/layout/footer_logoBoostMyShop100.png) no-repeat; height: 100px; width: 100px; margin-top: 10px; } #footer .btn { margin-top: 12px; } /*#footer .sidebar .fixa{ width:249px; height: 171px; position: absolute; bottom: 0px; left:900px; overflow: hidden;}*/ #footer .sidebar .suporte{ width:225px; margin-top:30px; margin-right:-112px; padding: 10px; border-radius: 10px; border:solid 2px #999; text-align: center; padding-bottom: 30px; position: fixed; bottom: -131px; background-color: #333; right: 50%; box-shadow: 0px 0px 20px #111; } #footer .sidebar .suporte a{ color: #999; font-weight: bold; font-size:14px; text-decoration: underline;} #footer .sidebar .suporte h4{ cursor: pointer;} /************************************************\ » GRAPHIC EFFECTS \************************************************/ /* Rounded corners ******************************/ .btn, .floater, #mainmenu li ul { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; } .btn, .box, input[type="submit"], #footer input, #contact .contacts .emailCopy { border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; } .floater { border-top-left-radius: 15px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; border-top-right-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 15px; } #mainmenu ul, #mainmenu ul li.last { border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; } /* Transparency *********************************/ #null:hover, #mainmenu li li a, .icon#topo:hover,#footer .sidebar .bms:hover, #home #header #headline h2 { filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1; } #mainmenu a:hover, #mainmenu li:hover a, #mainmenu li.selected a { filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7; } #header #headline h2 { filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; } .box #checked, #footer .sidebar .bms, .icon#topo { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } /* Drop Shadows *********************************/ .btn { box-shadow: 0px 2px 3px #666; -moz-box-shadow: 0px 2px 3px #666; -webkit-box-shadow: 0px 2px 3px #999; /* filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=155, Color='#999999'); --> For IE 5.5 - 7 */ /* -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=155, Color='#999999')"; --> For IE 8 */ } .null { box-shadow: 0px 1px 3px #333; -moz-box-shadow: 0px 1px 3px #333; -webkit-box-shadow: 0px 1px 3px #333; /* filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=155, Color='#333333'); --> For IE 5.5 - 7 */ /* -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=155, Color='#333333')"; --> For IE 8 */ } .floater, #mainmenu ul { box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #999; -webkit-box-shadow: 0px 0px 10px #000; /* filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=0, Color='#999999'); --> For IE 5.5 - 7 */ /* -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=0, Color='#999999')"; --> For IE 8 */ } /* Transparency box *****************************/ #NULL { background: rgb(0, 0, 0); /*--> Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.6); /*--> RGBa with 0.6 opacity */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /*--> For IE 5.5 - 7*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /*--> For IE 8*/ } /* Text Shadows *********************************/ #null{ text-shadow: 0px 1px 0px #FFF; /* filter: dropshadow(color=#FFFFFF,offX=0,offY=1); Though it works with IE, it conflits with other parameters... BEWARE! */ } #header h2, #web .servicos { text-shadow: 2px 0px 10px #000; } /************************************************\ » NOTIFICATIONS \************************************************/ .alert { padding: 5px 8px; } .alert.error { background-color: #F00} .alert.confirm { background-color: #9C0; width: 290px} /************************************************\ » VARIATIONS \************************************************/ .hide { display: none } .R { float: right; } .L { float: left; } /* largura de colunas prédefinidas */ .colS { width: 30% } .colM { width: 49% } /* IE... */ .colL { width: 70% } .colXL { width: 100% } /************************************************\ » API's CSS \************************************************/ /* Addthis social links *************************/ .addthis_toolbox.addthis_default_style { position: absolute; right: 0px; top: 12px; } #home .addthis_toolbox.addthis_default_style { position: absolute; right: 300px; top: -5px; } /* Lightbox *************************************/ /** * jQuery lightBox plugin * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/) * and adapted to me for use like a plugin from jQuery. * @name jquery-lightbox-0.5.css * @author Leandro Vieira Pinho - http://leandrovieira.com * @version 0.5 * @date April 11, 2008 * @category jQuery plugin * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com) * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin */ #jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; } #jquery-lightbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } #jquery-lightbox a img { border: none; } #lightbox-container-image-box { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #lightbox-container-image { padding: 10px; } #lightbox-loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #lightbox-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #lightbox-container-image-box > #lightbox-nav { left: 0; } #lightbox-nav a { outline: none;} #lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height: 100%; zoom: 1; display: block; } #lightbox-nav-btnPrev { left: 0; float: left; } #lightbox-nav-btnNext { right: 0; float: right; } #lightbox-container-image-data-box { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 0 10px 0; } #lightbox-container-image-data { padding: 0 10px; color: #666; } #lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left; } #lightbox-image-details-caption { font-weight: bold; } #lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1.0em; } #lightbox-secNav-btnClose { width: 66px; float: right; padding-bottom: 0.7em; }