/* Theme Name: Bitolithic 2010 Theme URL: http:www.bitolithic.com Description: This is the main theme for bitolithic Version: v1.0 Author: Oxide Author URL: http://www.elementoda.com.br Tags: */ /************************************************************************ TABLE OF CONTENT 1. CSS RESET 2. COMMON DEFINITION 3. 4. 5. ************************************************************************/ /************************************************************************ 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;}:focus {outline: 0;}ins {text-decoration: none;}del {text-decoration: line-through;}table {border-collapse: collapse;border-spacing: 0;} /************************************************************************ COMMON DEFINITION ************************************************************************/ .clearme:after{ content: "."; display: block; visibility: hidden; clear: both; height: 0; font-size: 0.1em; line-height: 0;} html,body{ background: url(images/cz-bkg.jpg) top center repeat-x;} a{ text-decoration: none;} #header{ position: relative; width: 974px; height: 650px; margin: auto; background: url(images/cz-bkg.jpg) top center no-repeat; overflow: hidden;} #testimony{ position: absolute; top: 150px; left: 680px; width: 264px; height: 248px; background: url(images/cz-testimony.png) 0 0 no-repeat;} #iphone{ position: absolute; top: 55px; left: 360px; width: 274px; height: 489px; padding: 103px 0 0 50px; background: url(images/cz-iphone.png) 0 0 no-repeat;} #stripes-home{ position: absolute; top: 252px; left: 0; width: 380px; height: 270px; background: url(images/cz-str-home.png) 0 0 no-repeat;} #headline{ position: absolute; top: 30px; left: 30px; width: 292px; height: 107px; background: url(images/cz-headline.png) 0 0 no-repeat;} h1{ position: absolute; top: 13px; left: 780px; width: 82px; height: 82px; overflow: hidden;} h1 a{ display: block; width: 82px; height: 82px; background: url(images/cz-logo-bitolithic.png) 0 0 no-repeat; text-indent: -9999px;} ul#nav{ position: absolute; top: 95px; left: 750px; width: 220px; height: 26px; overflow: hidden;} ul#nav li{ float: left;} ul#nav li a{ text-indent: -9999px;} ul#nav li#item01{ width: 81px;} ul#nav li#item02{ width: 76px;} ul#nav li#item03{ width: 63px;} ul#nav li#item01 a{ display: block; width: 81px; height: 26px; background: url(images/cz-menu.png) 0 0 no-repeat;} ul#nav li#item01 a:hover{ display: block; width: 81px; height: 26px; background: url(images/cz-menu.png) 0 -26px no-repeat;} ul#nav li#item02 a{ display: block; width: 76px; height: 26px; background: url(images/cz-menu.png) -81px 0 no-repeat;} ul#nav li#item02 a:hover{ display: block; width: 76px; height: 26px; background: url(images/cz-menu.png) -81px -26px no-repeat;} ul#nav li#item03 a{ display: block; width: 63px; height: 26px; background: url(images/cz-menu.png) -157px 0 no-repeat;} ul#nav li#item03 a:hover{ display: block; width: 63px; height: 26px; background: url(images/cz-menu.png) -157px -26px no-repeat;} #appstore{ position: absolute; top: 455px; left: 710px; width: 202px; height: 67px; overflow: hidden;} #appstore a{ display: block; width: 202px; height: 67px; background: url(images/cz-appstore.png) 0 0 no-repeat; text-indent: -9999px;} /************************************************************************ CONTENT ************************************************************************/ #content{ position: relative; width: 974px; margin: 0 auto 30px;} #content-left{ float: left; width: 396px; overflow: hidden;} #content-logo{ width: 396px; height: 150px; background: url(images/cz-logo.png) 0 0 no-repeat;} #content-left ul{} #content-left ul li{ float: left; width: 130px; height: 130px;} #content-left ul li a{ display: block; width: 130px; height: 130px; text-indent: -9999px;} #content-left ul li#snapshot01 a{ background: url(images/cz-snapshots.jpg) 0 0 no-repeat;} #content-left ul li#snapshot02 a{ background: url(images/cz-snapshots.jpg) -130px 0 no-repeat;} #content-left ul li#snapshot03 a{ background: url(images/cz-snapshots.jpg) -260px 0 no-repeat;} #content h3{ color: #9d2014; font: bold 15px/22px "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.03em;} #content p{ margin: 0 0 15px; color: #4d4c4d; font: 13px/17px "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.03em;} #content p strong{ color: #333;} #downloads{ width: 326px; height: 276px; margin: 20px 0 10px; padding: 10px 30px 0 30px; background: url(images/cz-download-bkg.jpg) 0 0 no-repeat;} #downloads h4{ margin: 30px 0 0; color: #9d2014; font: bold 14px/16px "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.03em;} #downloads h5{ margin: 5px 0 0; padding: 0 0 0 24px; color: #4d4c4d; font: bold 12px/20px "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.03em; background: url(images/cz-download-arrow.jpg) 0 0 no-repeat;} #downloads h5 a,h5.infosFAQ a,h5.infosINST a,h5.backHome a{ color: #4d4c4d;} #downloads h5 a:hover,h5.infosFAQ a:hover,h5.infosINST a:hover,h5.backHome a:hover{ color: #aea995;} h5.infosFAQ,h5.infosINST{margin: 5px 0 0 30px; padding: 0 0 0 24px; color: #4d4c4d; font: bold 12px/20px "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.03em;} h5.backHome{margin: 5px 0 0 15px; padding: 0 0 0 24px; color: #4d4c4d; font: bold 12px/20px "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.03em;} h5.infosFAQ{ background: url(images/cz-faq.jpg) 0 0 no-repeat;} h5.infosINST{ background: url(images/cz-inst.jpg) 0 0 no-repeat;} #downloads h6{ margin: 0 0 0 25px; color: #aea995; font: bold 10px/12px "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.03em;} #downloads h6 a{ color: #aea995;} #downloads p{ margin: 0; color: #999; font: 10px/15px "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif;} .sublinks{ margin: 10px 0 10px 30px;} .sublinks a{ color: #8f8f90; font: 12px/16px "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.03em;} /************************************************************************ CONTENT DETAILS ************************************************************************/ #content-main{ float: right; position: relative; width: 560px; min-height: 700px; height:auto !important; height: 700px;} #content-main ul{ height: 60px;} #content-main ul li{ float: left; width: 280px; height: 60px; cursor: pointer; text-indent: -9999px;} #content-main ul li#main-faq{ background: url(images/cz-tabs-infos.png) 0 -60px no-repeat;} #content-main ul li#main-faq.selected{ background: url(images/cz-tabs-infos.png) 0 0 no-repeat;} #content-main ul li#main-sync{ background: url(images/cz-tabs-infos.png) -280px 0 no-repeat;} #content-main ul li#main-sync.selected{ background: url(images/cz-tabs-infos.png) -280px -60px no-repeat;} /* #content-main ul li#main-usb{ width: 187px; background: url(images/cz-tabs-infos.png) -373px 0 no-repeat;} #content-main ul li#main-usb.selected{ width: 187px; background: url(images/cz-tabs-infos.png) -373px -120px no-repeat;} */ #content-main p a{ color: #9d2014;} #content-main p a:hover{ color: #4d4c4d;} li#main-overview{ background: url(images/cz-details-tabs.png) 0 -60px no-repeat;} li#main-overview.selected{ background: url(images/cz-details-tabs.png) 0 0 no-repeat;} li#main-czsync{ background: url(images/cz-details-tabs.png) -280px 0 no-repeat;} li#main-czsync.selected{ background: url(images/cz-details-tabs.png) -280px -60px no-repeat;} #content-main-12{ width: 500px; background: url(images/cz-details-bkg-ovw.png) 0 0 no-repeat; padding: 0 30px;} #content-main-65{ width: 500px; background: url(images/cz-details-bkg-ovw.png) 0 0 no-repeat; padding: 0 30px;} #content-main-28{ display: none; width: 500px; background: url(images/cz-details-bkg-czs.png) 0 0 no-repeat; padding: 0 30px;} #content-main-70{ display: none; width: 500px; background: url(images/cz-details-bkg-czs.png) 0 0 no-repeat; padding: 0 30px;} #content-main-110{ display: none; width: 500px; background: url(images/cz-details-bkg-czs.png) 0 0 no-repeat; padding: 0 30px;} /************************************************************************ FOOTER ************************************************************************/ #footer{ clear: both; position: relative; width: 974px; margin: 0 auto 20px; color: #8f8f90; font: 12px/20px "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.03em; text-align: center;}