/* Theme Name: Dijiko DEV Theme URI: http://www.dijiko.com.br Description: This is the main theme for Dijiko DEV Version: 0.0 Forever Beta Author: Karmaredux Author URL: http://www.karmaredux.com 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/dijiko-bg.jpg) top center repeat-x;} a{ text-decoration: underline; color: #666;} /************************************************************************ HEADER ************************************************************************/ #header{ position: relative; width: 950px; height: 75px; margin: auto; padding: 10px 0 0; overflow: hidden;} h1{ width: 176px; height: 70px; margin: 0 0 0 70px;} h1 a{ display: block; width: 176px; height: 70px; background: url(images/dijiko-logo.png) 0 0 no-repeat; text-indent: -9999px;} h1 a:hover{ background: url(images/dijiko-logo-rollover.png) 0 0 no-repeat; } /* body.home h1 a{ background: url(images/dijiko-logo-rollover.png) 0 0 no-repeat; } */ ul#nav{ position: absolute; top: 7px; left: 295px; width: 504px; height: 55px;} ul#nav li{ float: left; width: 116px; height: 45px; margin: 0 10px 0 0;} ul#nav li a{ display: block; width: 116px; height: 55px; text-indent: -9999px;} li.page-item-5 a{ background: url(images/dijiko-spritePNG.png) 0 0 no-repeat;} li.page-item-5 a:hover{ background: url(images/dijiko-spritePNG.png) 0 -55px no-repeat;} #section-24 li.page-item-5 a, #section-37 li.page-item-5 a, #section-39 li.page-item-5 a, #section-344 li.page-item-5 a, li.page-item-5.current_page_item a{ background: url(images/dijiko-spritePNG.png) 0 -110px no-repeat;} li.page-item-6 a{ background: url(images/dijiko-spritePNG.png) -116px 0 no-repeat;} li.page-item-6 a:hover{ background: url(images/dijiko-spritePNG.png) -116px -55px no-repeat;} li.page-item-6.current_page_item a{ background: url(images/dijiko-spritePNG.png) -116px -110px no-repeat;} li.page-item-7 a{ background: url(images/dijiko-spritePNG.png) -232px 0 no-repeat;} li.page-item-7 a:hover{ background: url(images/dijiko-spritePNG.png) -232px -55px no-repeat;} li.page-item-7.current_page_item a{ background: url(images/dijiko-spritePNG.png) -232px -110px no-repeat;} li.page-item-9 a{ background: url(images/dijiko-spritePNG.png) -348px 0 no-repeat;} li.page-item-9 a:hover{ background: url(images/dijiko-spritePNG.png) -348px -55px no-repeat;} li.page-item-9.current_page_item a{ background: url(images/dijiko-spritePNG.png) -348px -110px no-repeat;} /************************************************************************ CONTENT ************************************************************************/ #content-wrapper{ width: 840px; margin: auto; padding: 40px 0 0;} #section-5 #content-wrapper{ background: none; padding: 0;} #blog-pages #content-wrapper{ background: url(images/dijiko-content-header.png) 0 0 no-repeat;} #section-6 #content-wrapper, #section-7 #content-wrapper, #section-9 #content-wrapper, #section-24 #content-wrapper, #section-37 #content-wrapper, #section-344 #content-wrapper, #section-39 #content-wrapper{ background: url(images/dijiko-content-header-white.png) 0 0 no-repeat;} #content-wrapper-404{ min-height: 450px; height:auto !important; height: 450px;} #content-wrapper-404 p{ color: #fe6601; font: 28px/58px Helvetica, Verdana, Arial, sans-serif; text-align: center;} #content-wrapper-404 p.big{ font: bold 100px/150px Helvetica, Verdana, Arial, sans-serif;} /************************************************************************ CONTENT MAIN ************************************************************************/ #content-main{ position: relative; width: 800px; background: url(images/dijiko-content-main.png) 0 0 repeat-y; padding: 0 20px;} #content-main-wrapper{ min-height: 330px; height:auto !important; height: 330px; background: url(images/dijiko-content-main-logo.jpg) bottom left no-repeat; padding: 0 10px; color: #666; font: 14px/20px Helvetica, Verdana, Arial, sans-serif;} .content-soutient{ position: relative; clear: both; padding: 0 0 20px; width: 740px; margin: auto; border-bottom: 1px dashed #999;} .content-soutient p img{ float: right; margin: 0 0 0 15px;} .content-soutient p{ margin: 0 0 15px;} .content-soutient ul{ list-style: disc; margin: -15px 0 20px 20px;} #classic-content{ padding: 0 20px;} .content-soutient h2,#classic-content h2{ color: #fe6601; font: 18px/24px Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.03em; margin: 20px 0 0;} #classic-content h3{ float: left; color: #2c9897; font: 14px/20px Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.03em; margin: 0 10px 0 0;} #classic-content h4{ float: left; color: #999; font: 14px/20px Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.03em;} #classic-content p{ clear: both; margin: 0 0 15px;} #section-6 #content-main, #section-7 #content-main, #section-9 #content-main, #section-24 #content-main, #section-37 #content-main, #section-39 #content-main, #section-344 #content-main{ padding: 38px 20px 0;} /************************************************************************ CONTENT MAIN LEFT ************************************************************************/ #content-main-left{ float: left; width: 550px; padding: 0 0 0 20px; } #content-main-left div.post-block{ margin: 0 0 30px;} #content-main-left h2{ color: #fe6601; font: 24px/25px Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.03em; margin: 0 0 8px;} #content-main-left p{ color: #666; font: 14px/20px Helvetica, Verdana, Arial, sans-serif; margin: 0 0 15px;} #content-main-left p a:hover{ color: #ffb17e;} #content-main-left ul.postmetadata{ margin: 10px 0 0; background: #e4f8f8; padding: 5px 15px; -moz-border-radius: 6px; -webkit-border-radius: 6px;} li.postmetadata-date{ float: left; color: #90cacf; font: 12px/20px Helvetica, Verdana, Arial, sans-serif;} li.postmetadata-infos{ float: right; color: #90cacf; font: 12px/20px Helvetica, Verdana, Arial, sans-serif;} .navigation{} .navigation-prec{} .navigation-suiv{ float: right;} .navigation-prec a,.navigation-suiv a,.navigation-backhome a{ display: block; width: 60px; height: 20px; color: #fff; font: 12px/20px Helvetica, Verdana, Arial, sans-serif; background: #fe6601; text-align: center; -moz-border-radius: 3px; -webkit-border-radius: 3px;} .navigation-backhome a{ margin: 0 0 10px;} /************************************************************************ CONTENT MAIN LEFT COMMENTS ************************************************************************/ #submit{ border: 0; width: 147px; height: 48px; background: url(images/dijiko-bt-green.png) 0 0 no-repeat; color: #fff; font: 14px/20px Helvetica, Verdana, Arial, sans-serif; padding: 0 0 5px; cursor: pointer;} #comment{ border: 0; width: 400px; background: #e4f8f8; -moz-border-radius: 8px; -webkit-border-radius: 8px; color: #6f979b; font: 12px/16px Helvetica, Verdana, Arial, sans-serif; padding: 2px;} .postmetadata small{ font: 12px/16px Helvetica, Verdana, Arial, sans-serif; color: #999;} #respond h3,h3#comments{ color: #99cc00; font: 14px/18px Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.02em; margin: 0 0 5px;} input#author,input#email,input#url{ background: #e4f8f8; border: 0; height: 18px; padding: 2px; -moz-border-radius: 4px; -webkit-border-radius: 4px; color: #6f979b;} #respond label{ font: 12px/22px Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.02em; color: #999; margin: 0 0 0 5px;} ol.commentlist{ margin: 10px 0 20px;} ol li{ margin: 0 0 5px;} .comment-body{ clear: both; margin: 0 0 10px;} .comment-author{ width: 540px; clear: both; color: #fe6601; font: 16px/20px Helvetica, Verdana, Arial, sans-serif;} .comment-author img{ float: left; margin: 3px 7px 7px 0;} .says{display: none;} .comment-meta{ display: none;} /************************************************************************ CONTENT MAIN RIGHT ************************************************************************/ #content-main-right{ float: right; width: 165px; padding: 0 15px 0; background: #e4f8f8;} #content-main-right h3{ color: #2c9897; font: 16px/22px Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.02em; margin: 0 0 5px; text-align: center} #content-main-right ul{ width: 165px;} #content-main-right ul h4{ color: #666; font: bold 13px/16px Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.02em; margin: 0 0 0 8px;} #content-main-right ul h5{ color: #666; font: 12px/14px Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.01em; margin: 0 0 5px 8px;} #nav-content-main-right div{ position: relative; width: 151px; height: 151px; padding: 7px; margin: 0 0 15px;} #content-main-right ul span{ position: absolute; top: 0; left: 0; display: block; width: 165px; height: 165px; background: url(images/dijiko-img-mask-bleu.png) 0 0 no-repeat; margin: 0 0 10px;} /************************************************************************ CONTENT FOOTER ************************************************************************/ #content-footer{ width: 840px; height: 50px; background: url(images/dijiko-content-footer.png) 0 0 no-repeat;} #section-6 #content-footer, #section-7 #content-footer, #section-9 #content-footer, #section-24 #content-footer, #section-37 #content-footer, #section-344 #content-footer, #section-39 #content-footer{ width: 840px; height: 50px; background: url(images/dijiko-content-footer-white.png) 0 0 no-repeat;} /************************************************************************ CONTENT GAMES ************************************************************************/ #content-game{ width: 820px; padding: 10px 10px 0;} ul#nav-game{ margin: 0 0 0 10px;} ul#nav-game li{ float: left; width: 239px; height: 240px; margin: 0 15px 20px;} ul#nav-game li.empty{ background: url(images/dijiko-content-bkg-games.png) 0 0 no-repeat;} ul#nav-game li div{ position: relative; padding: 7px 0 0 12px;} ul#nav-game li div span{ position: absolute; top: 0; left: 0; display: block; width: 239px; height: 240px; background: url(images/dijiko-content-bkg-games-empty.png) 0 0 no-repeat;} #demo-kiwi{ width: 668px; height: 513px; margin: 10px auto 0; padding: 23px 0 0 28px; background: url(images/dijiko-kiwitiki-bkg-demo.png) 0 0 no-repeat;} #classic-content-game-txt{ float: left; width: 290px; margin: 5px 0 0 0; padding: 0 0 0 20px;} #classic-content-game-txt p{ margin: 0 0 15px;} #games-img-xl{ float: right; width: 440px; height: 400px; padding: 15px 0 0 18px; background: url(images/dijiko-content-bkg-games-imgxl.jpg) 0 0 no-repeat; margin: 0 10px 0 0;} #games-img-xl-rea{ float: right; width: 420px; margin: 0 20px 0 0;} #games-img-xl-rea p{ margin: 0 0 7px;} #games-img-xl-rea p strong{ color: #fe6601;font: 14px/18px Helvetica, Verdana, Arial, sans-serif;} /************************************************************************ CONTENT GAMES DETAILS ************************************************************************/ #content-main-header-game{ position: absolute; top: -24px; left: 40px; width: 760px; height: 60px; margin: 0 0 10px; background: url(images/dijiko-content-main-bkg-stripe.jpg) bottom center no-repeat;} #content-main-header-game h2{ float: left; color: #fff; font: 18px/60px Helvetica, Verdana, Arial, sans-serif; letter-spacing: 0.03em;} span.icn{ display: block; float: left; width: 80px; height: 60px; margin: 0 4px 0 0; background: url(images/dijiko-icn-default.png) top center no-repeat;} #section-24 span.icn{ background: url(images/dijiko-icn-download.png) top center no-repeat;} #section-39 span.icn{ background: url(images/dijiko-icn-iphone.png) top center no-repeat;} /************************************************************************ FOOTER ************************************************************************/ #footer{ position: relative; width: 840px; height: 52px; margin: auto; color: #cfcfcf; font: 12px/16px Helvetica, Verdana, Arial, sans-serif; text-align: center;} #footer ul{ height: 52px;} #footer ul li{ float: left; width: 280px; height: 52px; line-height: 52px;} /************************************************************************ FOOTER LINKS ************************************************************************/ #footer-links ul{ height: 52px; margin: 0 0 0 30px; overflow: hidden;} #footer-links ul li{ float: left; width: 52px; height: 52px; margin: 0 10px 0 0;} #footer-links ul li a{ display: block; width: 52px; height: 52px; background: red; text-indent:-9999px;} #footer-links ul li#link01 a{ background: url(images/dijiko-spriteJPG.jpg) 0 0 no-repeat;} #footer-links ul li#link01 a:hover{ background: url(images/dijiko-spriteJPG.jpg) 0 -52px no-repeat;} #footer-links ul li#link02 a{ background: url(images/dijiko-spriteJPG.jpg) -52px 0 no-repeat;} #footer-links ul li#link02 a:hover{ background: url(images/dijiko-spriteJPG.jpg) -52px -52px no-repeat;} #footer-links ul li#link03 a{ background: url(images/dijiko-spriteJPG.jpg) -104px 0 no-repeat;} #footer-links ul li#link03 a:hover{ background: url(images/dijiko-spriteJPG.jpg) -104px -52px no-repeat;} /************************************************************************ FOOTER ILLUSTRATION ************************************************************************/ #footer-illus{ position: absolute; top: -63px; left: 700px; width: 113px; height: 115px;}