/* Theme Name: JeporuTheme Description: Theme based on Toolbox (An ultra-minimal HTML5 starter theme, by The Automattic Theme Team). Author: Jeporu Author URI: http://jeporu.com/ Version: 0.1 Tags: custom-menu, threaded-comments, sticky-post, microformats, rtl-language-support, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* Reset - Fim */ /* =Variáveis -------------------------------------------------------------- */ @page_width: 960px; @content_width: 683px; @secondary_width: 238px; @postside_width: 220px; @content_with_postside_width: @content_width - @postside_width - 30; @gray1: #EFEFEF; @gray2: #DADADA; @gray3: #C4C4C4; @gray4: #999999; @gray5: #686868; @gray6: #4D4D4D; @gray7: #262626; @gray8: #222; @orange1: #FAA71D; @orange2: darken(@orange1, 15%); @access_title_color: #F99D18; @access_title_bg: #F99D18 url(images/menu-title.png) no-repeat; @access_hover_color: #000; @access_current_bg: #C0C0C0 url(images/menu-over.png) no-repeat; @tecno_color: #61A4C5; @cultura_color: #FE4700; @sustent_color: #57A340; .tecno_link { color: @tecno_color; &:hover { color: darken(@tecno_color, 15%) } } .cultura_link { color: @cultura_color; &:hover { color: darken(@cultura_color, 15%) } } .sustent_link { color: @sustent_color; &:hover { color: darken(@sustent_color, 15%) } } .list-entry-title { margin: 0 0 0.6em !important; padding: 0 0 0.2em; line-height: 1.1em; border-bottom: 3px solid @gray2; a { color: @orange1 } } .font-titles { font-family: 'Humnst777CnBTRegular'; /*color: @gray5*/ } .font-text { font-family: 'Droid Sans', DroidSansRegular, DroidSans, Verdana, Tahoma, sans-serif, Sans } /* =Funções -------------------------------------------------------------- */ .border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } .box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) { @val: @x @y @blur rgba(0, 0, 0, @alpha); box-shadow: @val; -webkit-box-shadow: @val; -moz-box-shadow: @val; } .opacity (@opacity) { @opacityIE: @opacity*100; opacity: @opacity; -moz-opacity: @opacity; filter: alpha(opacity=@opacityIE); } /* =Títulos -------------------------------------------------------------- */ p, blockquote, pre, cite, code { margin: 0.8em 0; } h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, #access a, .widget-title, #content fieldset legend, /*input, textarea, select,*/ #content .entry-header .entry-title, #highlights #tabs li a, #box-pilares .overlay, .jcarousel-item p, #content.content-contato ul.network li a, .tabs li { .font-titles; text-transform: uppercase; } #content h1, #content h2, #content h3, #content h4, #content h5, #content h6, #content fieldset legend { margin: 0.9em 0 0.4em; } /* Títulos em destaque no topo das páginas */ /*body.page .entry-title, body.single .entry-type-title { font-size: 2em }*/ /* Títulos em geral */ h1, h2, h3, fieldset legend { font-size: 1.333em } /* Títulos nas widgets */ .widget h1 { font-size: 1.333em !important } .widget h2, .widget h3 { font-size: 1.333em !important } /* body.page #content h1, body.single #content h1, body.page #content h2, body.single #content h2 */ #content h1, #content h2 { font-size: 1.8em } body.page #content article.page, body.single #content article.post, body.search #content article { font-size: 1.084em } /* =Links -------------------------------------------------------------- */ a { text-decoration: none; outline-style: none; color: @orange1; } a:hover { color: @orange2 } .entry-title, .widget-title, h1 a { border-bottom: none } #content p.more { text-align: right } #content p.more a { text-decoration: underline } /* =Structure -------------------------------------------------------------- */ header, footer, nav, article, section { display: block; } body { letter-spacing: 0; margin: 0; .font-text; color: @gray6; font-size: 75%; background: #fff url(images/bg-top.png) repeat-x center top; position: relative; z-index: 100 } p { line-height: 1.3em; } #content, #content p { line-height: 1.5em; } em { font-style: italic; } strong { font-weight: bold; } #content li { margin-left: 15px; } #bgtop { position: absolute; width: 100%; height: 195px; background: url(images/top-ilustra.png) no-repeat center top; } #page { display: block; margin: 0 auto; padding: 0; width: 960px; max-width: 960px; overflow: hidden; } #main { position: relative } #primary { width: @content_width; display: inline-block; vertical-align: top; min-height: 1030px; margin: 0 0 50px @page_width - @content_width; } #secondary { display: inline-block; width: @secondary_width; margin-bottom: 50px; } #main .widget-area { overflow: hidden; position: absolute; top: 0; left: 0; } #content { margin: 0; } #colophon-wrapper { clear: both; display: block; } /* Increase the size of the content area for templates without sidebars */ .full-width #content, .image-attachment #content, .error404 #content { margin: 0; } /* Text meant only for screen readers */ .screen-reader-text, .section-heading { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } .clip { position: relative } .clip img { position: absolute; } .image { background-repeat: no-repeat; background-position: center center } .entry-content p:first-child { margin-top: 0 } .entry-content p img { margin-top: 1.2em; margin-bottom: 1.2em } /* Alignment */ .alignleft { display: inline; float: left; } .alignright { display: inline; float: right; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } .nowrap { white-space: nowrap } /* Overlay (camadas) */ .overlay { display: none; position: relative; z-index: 2; } .overlay p { float: right; text-align: right; color: #fff; margin: 1.3em 0.6em 0 auto !important; } /*.ie7, .ie8 { .overlay { display: block; z-index: -1 } }*/ /* =Elementos nos singles -------------------------------------------------------------- */ #content header, #content header { margin-bottom: 20px } #content header .entry-title, #content header .page-title { margin-top: -0.15em; line-height: 1em; color: @orange1; } body.page header .entry-title, body.page header .page-title, body.search-no-results header .entry-title { font-size: 4.462em !important; } body.single header .entry-title, body.single header .page-title { /* font-size: 2.666em !important;*/ font-size: 2.769em !important; } body.search-results { header .page-title { font-size: 3em !important } h1.entry-title { .list-entry-title } } footer.entry-meta .share li { list-style: none; margin-left: 20px; &:first-child { margin-left: 0!important } display: inline-block; font-size: 0.923em; a { display: inline-block; min-height: 16px; padding-left: 20px; line-height: 15px; background-repeat: no-repeat; background-position: left 1px; .opacity(0.8); color: @gray5; &:hover { color: @orange2; .opacity(1.0) } } &#comment a { background-image: url(images/share-comment.png) } &#facebook a { background-image: url(images/share-facebook.png) } &#twitter a { background-image: url(images/share-twitter.png) } } body.search-results article { margin: 30px 0; } /* =Header -------------------------------------------------------------- */ #site-title { font-size: 2em; font-weight: bold; margin: .67em 0; } #site-description { font-size: 1em; font-weight: normal; margin: 0 0 1em; } #branding { margin: 130px 0 20px; position: relative; z-index: 999; .branding-image { display: block; width: 100%; height: 157px; background-repeat: no-repeat; background-position: left 0; } #branding-image { background-image: url(images/top-barra.png) } #branding-image-blog { background-image: url(images/top-barra-blog.png) } } /* =Footer -------------------------------------------------------------- */ #colophon-wrapper { width: 100%; @height: 338px; @padding-top: 30px; height: @height - @padding-top; background: url(images/footer-ilustra.png) no-repeat center bottom; padding-top: @padding-top; } #colophon { position: relative; width: 930px; margin: 0 auto; height: 172px; padding: 15px; background: @gray1; border-bottom: 5px solid @gray4; color: @gray5; h3 { margin: 0 0 0.5em; color: @orange1; font-size: 1.2em; a { color: @orange1 } } #colophon-logo { display: inline-block; margin-right: 20px } .box { display: inline-block; vertical-align: top; float: none } nav { width: 305px; height: 100%; ul { margin-left: 10px } li { display: inline-block; width: 130px; margin: 0.5em 0; padding-left: 1em; font-family: 'Humnst777BTRoman'; font-size: 1.1em; background: url(images/footer-menu-list.png) no-repeat left center; &:first-child { margin-top: 0 } a { color: @gray5 } a:hover, &.current-menu-item > a, &.current-page-ancestor > a { color: darken(@gray5, 40%) } } } .depoimentos { width: 180px; height: 100%; margin: 0 35px 0 0; article { width: 100%; height: 155px; } article { width: 100%; } p.text { max-height: 8em } } #newsletter { margin-right: 10px; width: 155px; list-style: none; float: right; form { /*overflow: hidden;*/ input { margin-top: 4px } } li#field-name { margin-top: 0.9em; input { width: 141px; } } li#field-email { display: inline-block; width: 104px; vertical-align: top; margin: 0.8em 0; input { width: 98px } } li#field-submit { display: inline-block; height: 100%; margin-left: 15px; .submit { .fancy-button; padding: 0.35em 0.5em; position: relative; top: 34px } } .message { position: absolute; bottom: 4em; width: 133px } #rss a { display: block; padding-left: 22px; min-height: 16px; line-height: 1.9em; background: url(images/rede-rss-16.png) no-repeat left top; .opacity(0.8); &:hover { .opacity(1) } } } #credits { /* float: left;*/ position: absolute; right: 0; margin-top: 25px; a { display: inline-block; vertical-align: top; margin-left: 15px; &#developer img, &#design img { margin-top: 4px } } } } /* =Menu -------------------------------------------------------------- */ ul.menu li.hidden { display: none !important } #access { display: inline-block; width: 100%; background: @gray1; font-size: 1.2em; } #access ul { list-style: none; margin: 0; position: relative; } #access a { display: block; height: 15px; padding: 9px 15px 9px 30px; color: @gray5; line-height: 1.17em; border-top: 1px dotted @gray4; text-transform: uppercase; text-decoration: none; text-shadow: 1px 1px 1px @gray1; } #access li:first-child a { border-top: none } #access li:hover > a, #access ul ul :hover > a { background: @gray2; } #access li.current-menu-item > a, #access li.current-page-ancestor > a { background: @access_current_bg; color: #000; } #access ul li:hover > ul { display: block } /* =Content -------------------------------------------------------------- */ #content nav { display: block; overflow: hidden; } #content nav .nav-previous { float: left; width: 50%; } #content nav .nav-next { float: right; text-align: right; width: 50%; } #content #nav-above { display: none; } .paged #content #nav-above, .single #content #nav-above { display: block; } #nav-below { margin: 1em 0 0; } .page-link { margin: 0 0 1em; } .entry-content span.edit-link { display: block; margin-top: 20px } /* 404 page */ .error404 .widget { float: left; width: 33%; } .error404 .widget .widgettitle, .error404 .widget ul { margin-right: 1em; } .error404 .widget_tag_cloud { clear: both; float: none; width: 100%; } /* Notices */ .post .notice, .error404 #searchform { background: #eee; display: block; padding: 1em; } /* Image Attachments */ .image-attachment div.entry-meta { float: left; } .image-attachment nav { float: right; margin: 0 0 1em 0; } .image-attachment .entry-content { clear: both; } .image-attachment .entry-content .entry-attachment { background: #eee; margin: 0 0 1em; padding: 1em; text-align: center; } .image-attachment .entry-content .attachment { display: block; margin: 0 auto; text-align: center; } body.page #content, body.single #content { img, iframe, object, embed { max-width: @content_width !important } &.content-with-side { img, iframe, object, embed { max-width: @content_with_postside_width !important } } } /* =Images -------------------------------------------------------------- */ a img { border: none; } p img { margin-bottom: 0.5em; /* a small bottom margin prevents content floating under images */ } /* Resize images to fit the main content area. - Applies only to images uploaded via WordPress by targeting size-* classes. - Other images will be left alone. Use "size-auto" class to apply to other images. */ img.size-auto, img.size-full, img.size-large, img.size-medium, .attachment img, .widget-area img { max-width: 100%; /* When images are too wide for containing element, force them to fit. */ height: auto; /* Override height to match resized width for correct aspect ratio. */ } img.alignleft { margin-right: 1em; } img.alignright { margin-left: 1em; } .wp-caption { text-align: center; } .wp-caption .wp-caption-text { margin: .5em; font-style: italic } .wp-smiley { margin: 0; } .photoframe { padding: 3px; .box-shadow(0, 0, 5px, 0.4); background: #fff url(images/loading.gif) no-repeat center center; } /* =Forms -------------------------------------------------------------- */ p.warning-required { margin: 0; font-size: 0.95em; color: #999; } p.warning-required .required { color: #555; } /* Class for labelling required form items */ .required { color: #A41A20; font-weight: normal; font-size: 0.9em } .entry-content .required { margin-left: 1px } /* Vários elementos */ input[type=text], input[type=email], input[type=url], input[type=number], input[type=tel], input[type=date], input[type=file], textarea, select { margin-top: 0.1em; padding: 4px 6px; color: #666; .font-text; font-size: 1.084em; } input[type=text], input[type=email], input[type=url], input[type=number], input[type=tel], input[type=date], input[type=file], textarea { border: 1px solid @gray2; background: @gray1; } input[type=text], input[type=email], input[type=url], input[type=number], input[type=tel], input[type=date], input[type=file] { height: 20px; .fancy-input } /* Títulos */ form h2 { margin: 1.3em 0 0.9em 0 !important } .fancy-input { background: #EFEFEF url(images/input-bg.png) no-repeat left center } .fancy-button { .font-titles; text-transform: uppercase; font-size: 1.2em; color: #fff; background: #FDD329; /* Old browsers */ background: -moz-linear-gradient(top, #FDD329 0%, #F99D18 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FDD329), color-stop(100%,#F99D18)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #FDD329 0%,#F99D18 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #FDD329 0%,#F99D18 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #FDD329 0%,#F99D18 100%); /* IE10+ */ filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#FDD329', endColorstr='#F99D18',GradientType=0 )"; /* IE6-9 */ background: linear-gradient(top, #FDD329 0%,#F99D18 100%); /* W3C */ .box-shadow(0, 0, 2px, 0.2); padding: 0.4em 0.8em; border: 1px solid #E3971A; &:hover { box-shadow: 0 0 2px rgba(227, 151, 26, 0.9); -moz-box-shadow: 0 0 2px rgba(227, 151, 26, 0.9); -webkit-box-shadow: 0 0 3px rgba(227, 151, 26, 0.9) } &:active { box-shadow: inset -1px 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset -1px 1px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset -1px 1px 3px rgba(0, 0, 0, 0.2) } &.disabled { border: 1px solid @gray4; background: rgb(143,148,158); /* Old browsers */ background: -moz-linear-gradient(top, rgba(143,148,158,1) 0%, rgba(97,100,107,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,148,158,1)), color-stop(100%,rgba(97,100,107,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(143,148,158,1) 0%,rgba(97,100,107,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(143,148,158,1) 0%,rgba(97,100,107,1) 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, rgba(143,148,158,1) 0%,rgba(97,100,107,1) 100%); /* IE10+ */ filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#8f949e', endColorstr='#787C85',GradientType=0 )"; /* IE6-9 */ background: linear-gradient(top, rgba(143,148,158,1) 0%,rgba(97,100,107,1) 100%); /* W3C */ box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none } } #content { a.submit, a.button, input[type=submit], input[type=button] { .fancy-button } form { /* largura */ input[type=text], input[type=email], input[type=url], input[type=number], input[type=tel], input[type=date], input[type=file], textarea { width: 97.4% } fieldset legend { padding-bottom: 0.8em } fieldset:first-child { margin-top: 0 } label, label.normal, .counter { color: @gray6; text-align: justify } li.radio label, li.checkbox label { margin: 0.2em 0; font-weight: normal; color: #404040 } /* Entre campos */ li { margin-left: 0; list-style: none } p, li { margin-top: 15px; text-align: left !important; position: relative } /* não remover o position */ li.radio, li.checkbox { margin: 0.2em 0 } p:first-child, li:first-child { margin-top: 0 } /* Elementos específicos */ small { display: block; margin-top: 0.8em; color: #777; } input[type=checkbox], input[type=radio] { position: relative; top: 0.25em; margin-right: 0.3em; margin-left: 0 } select { width: 100% } textarea { height: 6.5em; min-width: 97.4%; max-width: 97.4%; min-height: 6.5em } /* Final do formulário */ .form-footer p, p.form-submit { text-align: right !important; margin-top: 20px !important; position: relative } /* Character Count styles */ .counter { position: absolute; right: 0; top: 0; color:#ccc } .warning { color:#600 } .missing, form .exceeded { color:#e00 !important } } } .widget-area form label { font-size: 1em } /* =Loading Ajax -------------------------------------------------------------- */ .message { display: none; width: auto; font-weight: normal; margin: 1em 0; padding: 0.4em 0.8em; background: #fff; border: 1px solid @gray2; } .message p { margin: 0; max-width: 100% } .loading { display: inline-block; float: right; position: relative; z-index: 100; background: url(images/loading.gif) no-repeat; width: 32px; height: 32px; } /* =Comments -------------------------------------------------------------- */ article.comment { display: block; } #comments { margin-top: 40px } #respond input[type=text] { display: block; } #respond textarea { display: block; } #respond .form-allowed-tags { clear: both; } #respond .form-allowed-tags code { display: block; } /* =Widgets -------------------------------------------------------------- */ .widget { display: block; margin-top: 20px; } #secondary .widget { &:first-child { margin-top: 0 } .widget-title, .widget-title a { color: #fff } .widget-title { height: 15px; padding: 9px 15px 9px 13px; background: @access_title_bg; } &#widget-twitter .widget-title { background: url(images/title-twitter.png) no-repeat 97% center, @access_title_bg; } &#widget-facebook .widget-title { background: url(images/title-facebook.png) no-repeat 96% center, @access_title_bg; } .contents { background: @gray1; /*padding: 15px;*/ } .contents p { margin: 0.8em 0 0 } .contents p:first-child { margin-top: 0 } input { width: 175px } .submit { display: block; float: right; } } /* =Widget Pesquisa -------------------------------------------------------------- */ #searchform { position: relative; input#s { width: 200px; margin: 0; padding-right: 1em; .fancy-input } .submit { position: absolute; display: block; right: 0; top: 0; width: 28px; height: 28px; background: @gray1 url(images/search-button.png) no-repeat center center; border: 0 solid @gray2; border-width: 1px 1px 1px 0; } } /* =Twitter e Facebook na Sidebar -------------------------------------------------------------- */ #widget-twitter { div.twtr-hd, div.twtr-ft { display: none } .contents { padding: 0 10px 10px } .twtr-doc { .border-radius(0) } #twtr-widget-1 .twtr-doc, #twtr-widget-1 .twtr-new-results, #twtr-widget-1 .twtr-results-inner, #twtr-widget-1 .twtr-timeline { background: @gray1 !important; a { color: @orange2 !important } } .twtr-tweet .twtr-tweet-wrap { padding: 10px 0 !important; .twtr-avatar .twtr-img, .twtr-avatar .twtr-img img { width: 30px !important } } } #widget-facebook .contents { padding: 0 0 10px 0 !important; } /* =jCarousel -------------------------------------------------------------- */ .jcarousel-direction-rtl { direction: rtl } .jcarousel-container-horizontal { width: @content_width - 42; margin-top: 20px; padding: 0 20px; background: #fff; } .jcarousel-clip-horizontal { width: 100%; } .jcarousel-item { width: 100px; /* height: 75px;*/ height: 110px; margin: 8px; overflow: hidden; .photoframe; p { margin: 0.2em 0 0 !important; line-height: 1.2em !important; height: 2.4em; overflow: hidden; } } .jcarousel-item-horizontal { margin-left: 0; margin-right: 5px } .jcarousel-direction-rtl .jcarousel-item-horizontal { margin-left: 0; margin-right: 0 } /* Horizontal Buttons */ .jcarousel-next-horizontal, .jcarousel-prev-horizontal { cursor: pointer; position: absolute; top: 0; width: 20px; height: 100%; background-image: url(images/arrows.png); background-repeat: no-repeat; .opacity(0.8); } .jcarousel-next-horizontal:hover, .jcarousel-prev-horizontal:hover { .opacity(1); } .jcarousel-prev-horizontal { left: 0; background-position: left center } .jcarousel-next-horizontal { right: 0; background-position: right center } /* =Destaques na Home -------------------------------------------------------------- */ #highlights { position: relative; width: 100%; height: 330px; max-height: 330px; overflow: hidden; margin-bottom: 20px; background: @gray1; border: 0 solid @gray4; border-width: 5px 0; li { margin: 0; list-style: none } } #highlights-caption { @padding_width: 15px; @padding_height: 10px; @width: @content_width - @padding_width*2; @height: 87px - @padding_height*2; position: absolute; width: @width; height: @height; margin-top: 248px; padding: @padding_height @padding_width; z-index: 100; overflow: hidden; background: rgba(0, 0, 0, 0.8); h3, p { width: @width - 130; overflow: hidden } h3 { margin: 0 0 0.4em; max-height: 1.2em; text-transform: uppercase } h3, h3 a { color: @orange1 } p { height: 3.2em; a { color: #fff } } } .ie7, .ie8 { #highlights-caption { background: #888 } } #highlights-nav { position: absolute; z-index: 101; right: 1.4em; font-weight: bold; font-size: 0.9em; margin: 280px 10px 0 0; } #highlights-nav a { display: inline-block; width: 29px; height: 28px; margin-left: 10px; text-align: center; line-height: 2.2em; background: url(images/destaques-0.png) no-repeat 1px center; color: @gray5; text-shadow: 1px 1px 1px @gray1; } #highlights-nav a:hover, #highlights-nav .activeSlide { background-image: url(images/destaques-1.png) } /* =Blocos -------------------------------------------------------------- */ .box { float: left; width: 221px; margin-left: 10px; &:first-child { margin-left: 0 } h2 a { color: @gray5; &:hover { color: @gray5 } } } .box-container { margin-top: 20px; &:first-child { margin-left: 0 } } /* =Características dos pilares -------------------------------------------------------------- */ #content .pilar { h2.title { position: relative; margin: 0; padding: 0.4em 0.6em 0.4em 62px; color: #fff; a { color: #fff } img { position: absolute; margin: -18px 0 0 -60px; } cursor: pointer; } &#tecnologia h2.title { background: @tecno_color } &#sustentabilidade h2.title { background: @sustent_color } &#cultura h2.title { background: @cultura_color } } /* =Pilares na Home -------------------------------------------------------------- */ #box-pilares { .box { .topics { display:block; position: relative; &:hover .overlay { display: block } h2 { margin: 0; padding: 0.4em 0.6em } h2, h2 a { color: #fff } .image { display:block; width: 100%; height: 175px; background: #fff no-repeat center top; } .overlay { width: 100%; height: 100%; top: 0; position: absolute; color: #fff; h2 { background: transparent } ul { padding: 22px 20px 15px; text-align: center; font-size: 1.3em; text-transform: lowercase } li { list-style: none; margin: 5px 0 } } } article { height: 170px; h3 { font-size: 1.4em; height: 2.4em; overflow: hidden } } /* a { color: @gray8 }*/ } .image { background-position: center top } #tecnologia { .image { background-image: url(images/pilar-tecnologia-bg.png) } .overlay { background: darken(fadeout(@tecno_color, 10%), 30%) } article h3, article h3 a { .tecno_link } } #sustentabilidade { .image { background-image: url(images/pilar-sustentabilidade-bg.png) } .overlay { background: darken(fadeout(@sustent_color, 10%), 30%) } article h3, article h3 a { .sustent_link } } #cultura { .image { background-image: url(images/pilar-cultura-bg.png) } .overlay { background: darken(fadeout(@cultura_color, 10%), 30%) } article h3, article h3 a { .cultura_link } } } /* =Multimídia na Home -------------------------------------------------------------- */ #box-multimidia { .box { height: 200px; h2 { padding-bottom: 0.4em; background: url(images/postside-border.png) no-repeat center bottom } } .contents { margin-top: 15px } #fotos { li { list-style: none; margin: 3px; display: inline-block; .border-radius(2px); .clip { width: 94px; height: 72px; img { clip: rect(0 94px 72px 0) } } .photoframe; } } #audios { li { list-style: none; display: block; margin: 0.4em 0; padding-left: 23px; min-height: 19px; background: url(images/play.png) no-repeat left 2px; } .credits { margin-top: 1.1em; min-height: 19px; a { color: @gray5; .opacity(0.8); &:hover { .opacity(1) } img { float: left; margin: 1px 7px 0 0 } } } } #videos #video-player { margin-left: 4px; width: 204px; height: 115px; .photoframe } } /* =Sidebar nos posts -------------------------------------------------------------- */ #content.content-with-side { article.page, article.post { display: inline-block } article.page, article.post, #comments { width: @content_with_postside_width } .postside { display: inline-block; float: right; width: @postside_width; height: 100%; vertical-align: top; .widget { margin: 20px 0; padding-bottom: 10px; background: url(images/postside-border.png) no-repeat center bottom; &:first-child, p:first-child { margin-top: 0 } .widget-title, .widget-title a { color: @gray5 } .widget-title { margin: 0 0 0.5em; } ul { margin-bottom: 0.4em } .more { text-align: left } } .depoimentos article { width: 185px } } } /* =Widget Depoimentos -------------------------------------------------------------- */ .depoimentos { article { padding-left: 40px; background: url(images/depoimentos-aspas.png) no-repeat left 5px; overflow: hidden; font-style: italic; p.text { margin-top: 0.2em; overflow: hidden; a { color: #000 } } p.author { padding-right: 1.5em; text-align: right; color: @orange1; } } } /* =Página "Pilares" -------------------------------------------------------------- */ .list-pilares { margin: 20px 0; h2.title { padding-left: 60px; font-size: 1.333em !important; margin: 0 0 1em !important; } .openclose { float: right; font-size: 0.85em; padding-right: 16px; background: url(images/arrows-up-down.png) no-repeat; } &.opened .openclose { background-position: right top } &.closed .openclose { background-position: right bottom } } /* =Página "Expositores" -------------------------------------------------------------- */ #widget-manuelaexpositor li { list-style: none; margin: 15px 0; padding-left: 26px; background: url(images/files-icons.png) no-repeat left top; &#gdocs { background-position: left top } &#pdf { background-position: left bottom } } /* =Página "Apoio e Patrocínio" -------------------------------------------------------------- */ #entry-content-patrocinio .depoimentos article { .box; width: 218px - 40; } /* =Páginas "Blog" e "Notícias" -------------------------------------------------------------- */ #content { .article { margin-top: 30px; &:first-child { margin-top: 0 } h2.entry-title { .list-entry-title } } &.content-noticias article { .article } &.content-blog { article { .article } #widget-quem-escreve { .clip { float: left; margin: 5px 13px 0 0; width: 70px; height: 70px; img { clip: rect(0 70px 70px 0) } .photoframe; } } ul.network li { display: inline-block; margin-left: 11px !important; &:first-child { margin-left: 0 !important } } .postside { .widget ul li { list-style: square; color: @orange1 } .widget_archive { padding-bottom: 19px !important; select { width: 100% } } } } } /* =WP-PageNavi -------------------------------------------------------------- */ .wp-pagenavi { margin-top: 30px; span, a { border-color: #E6E6E6 !important } span { color: @orange1 } span.current { background: @orange1; color: #fff } } /* =Página "Multimídia" -------------------------------------------------------------- */ #entry-content-multimidia, #entry-content-depoimentos { h2 { margin: 1.4em 0 0.4em } h2:first-child { margin-top: 0 } #video-player { margin-top: 30px; min-height: 370px; text-align: center; background: #fff url(images/loading.gif) no-repeat center center; iframe { .photoframe; } h3 { text-align: left; padding-left: 18px } } ul.carousel li { position: relative; .overlay { display: block; position: absolute; top: 3px; width: 100px; height: 75px; z-index: 9; background-color: rgba(0, 0, 0, 0.3); background-repeat: no-repeat; background-position: center center } &:hover .overlay { background-color: transparent } } ul.carousel.vimeo li .overlay { background-image: url("images/play.png") } } /* =Página "Contato" -------------------------------------------------------------- */ #content.content-contato { #formContato { li.nome, li.email { display: inline-block; width: 200px } li.email { margin-left: 23px !important } li.tipo { height: 38px; overflow: hidden; label { display: inline-block; width: 245px; .font-titles; text-transform: uppercase; font-size: 1.539em; line-height: 1.6em } select { display: inline-block; width: 183px; position: relative; margin: 0; float: right } } li.assinarboletim { margin-top: 0.4em } .loading { top: -26px; left: -65px } } ul.network li { margin: 10px 0 0; &:first-child { margin-top: 0 } a { display: block; height: 32px; overflow: hidden; padding-left: 40px; font-size: 1.25em; line-height: 2em; background-repeat: no-repeat; background-position: left center; &#twitter { background-image: url(images/rede-twitter.png) } &#facebook { background-image: url(images/rede-facebook.png) } &#orkut { background-image: url(images/rede-orkut.png) } &#vimeo { background-image: url(images/rede-vimeo.png) } &#email { background-image: url(images/rede-email.png) } } } #widget-address { margin-top: 220px } #map-title { margin: 1em 0 } #map_canvas { width: @content_with_postside_width - 2; height: 300px; .photoframe; /*background: #fff; border: 2px solid @gray2*/ } } /* =Página "Inscreva-se" -------------------------------------------------------------- */ #content #formInscricao { .warning-required { margin: 0 0 0.4em } li { display: inline-block; width: 327px; @ajuste: -39px; &.nome { width: 306px + @ajuste } &.email { width: 210px } &.telefone { width: 110px } &.nascimento { width: 104px } &.escolaridade { width: 200px } &.ocupacao { width: 326px + @ajuste } &.endereco_cidade { width: 240px + @ajuste } &.endereco_uf { width: 50px } &.sabendo { width: 250px } &.nome, &.email, &.telefone { margin-top: 0.6em } &.email, &.telefone, &.escolaridade, &.ocupacao, &.endereco_uf, &.sabendo { margin-left: 20px } &.escolaridade, &.sabendo { position: relative; left: 0.45em } } .message { margin-top: 0 } .loading { margin-top: -2em; left: -6em } } /* =Abas -------------------------------------------------------------- */ .tabgroup { margin: 2em 1em 2em 0; .tabs li { display: inline-block; margin: 0 !important; padding: 0.4em 1.5em; opacity: 0.6; -moz-opacity: 0.6; filter: alpha(opacity=60); background: #ffffff; /* old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 70%, #DCDCDC 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(70%,#f6f6f6), color-stop(100%,#DCDCDC)); /* webkit */ filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#DCDCDC',GradientType=0 )"; /* ie */ a, a:hover { color: @orange1 } &.current { background: #fff; opacity: 1.0; -moz-opacity: 1.0; filter: ~"alpha(opacity=100)"; .box-shadow(0, 2px, 2px, 0.4); a { font-weight: bold; color: @orange1 } } } .panes { position: relative; padding: 1.2em 1em 1em; min-height: 330px; background: #fff; z-index: 3; .box-shadow(0, 2px, 2px, 0.4); } } /* =Página "Programação" -------------------------------------------------------------- */ .content-programacao { div.options { margin: 1.4em 0; height: 68px; background: @gray1; &:first-child { margin-top: 50px } h2 { margin: 1.1em 0 0 0.8em !important; float: left } ul { float: left; li { display: inline-block } } &#pilares ul { margin: -8px 0 0 20px; width: 400px; li { margin-left: 40px; a { display: block; width: 86px; height: 85px; background-repeat: no-repeat; background-position: center center; .opacity (0.5); &:hover { .opacity (0.6) } &.checked { .opacity(1) } .colorTip { top: -35px } &#tecnologia { background-image: url(images/selo-tecnologia-grn.png) } &#sustentabilidade { background-image: url(images/selo-sustentabilidade-grn.png) } &#cultura { background-image: url(images/selo-cultura-grn.png) } } } } &#datas, &#locais { ul { margin: 1em 0 0 20px } li { margin: 0.4em 0.25em; a { display: block; padding: 0.4em 0.6em 0.35em; .font-titles; text-transform: uppercase; background: @gray4; color: #fff; &::after { content: '+'; float: right; margin-left: 0.6em; width: 1em; text-align: center; } box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); &.checked { background: @orange1; &::after { content: 'x'; } box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2); } } } } &#datas ul { width: 445px } &#locais { height: 98px; ul { width: 555px } } } ul#activities > li { margin: 1.4em 0; background: @gray1; padding: 1.5em; .contents { display: inline-block; width: 70%; h3 { margin-top: 0 } } nav { float: right; width: 26%; margin-top: 2.3em; ul li { margin: 0.7em 0; &:first-child { margin-top: 0 } a { display: block; width: auto; text-align: center } } } } } /* =Tooltip -------------------------------------------------------------- */ .tooltip .pointyTip { border-top-color: #fff } .tooltip .pointyTipShadow { border-top-color: #fefefe } .tooltip .colorTip { background-color: #fff; border: 1px solid #bbb; color: @gray6 } /* =Enquetes (wp-polls) -------------------------------------------------------------- */ .wp-polls { .wp-polls-ul { margin: 0 0 10px 0; li { margin: 0 !important } } .form-footer { margin: 1.8em 0 !important } }