/* =Reset */

* {margin: 0; padding: 0; list-style: none; font-size: 100%; font-weight: inherit; font-style: inherit; outline: none; border: none; vertical-align: baseline; text-decoration: none;}


/* =General */

body {background: url(../img/bg_body.jpg) repeat-x 0 0 #efecd7; font: 12px 'lucida grande', 'lucida sans unicode', verdana, sans-serif;}

html, body {height: 100%}

strong, strong a {font-weight: bold;}
em, em a {font-style: italic;}

h1 {text-indent: -9999px; width: 354px; margin: 0 auto 11px auto; padding-top: 178px;}

    h1 a {display: block; height: 48px; width: 354px; background: url(../img/playstop.png) 0 100%;}

        h1 a:hover {background-position: 2px 0;}

h3 {display: block; padding: 0 20px; height: 60px;}

    h3, h3 a {color: #ff462f; font: bold italic 24px/55px georgia, serif;}

        h3 a:hover {color: #ff6a51;}

        h3 span, h3 span a {font-style: italic; font-weight: normal; font-size: 14px; color: #999;}

h4, .about-me #posts h4 {font: italic 24px/24px georgia, serif;}

h5, #posts .share h5 {font: italic 16px/22px georgia, serif;}

h6, h6 a {font-size: 14px; font-weight: bold; color: #666; padding-bottom: 3px;}

    h6 a:hover {color: #000;}

h3,
#navbar ul,
#box-blog .rss a,
#box-twitter h3,
#interna #cse-search-box #q,
blockquote,
#sidebar .rss a {background-color: rgba(0, 0, 0, .05) !important;}

h4,
h4 a,
.about-me #posts h4,
#posts h5,
#posts h5 a,
#box-jujuqui .saiba-mais a,
#twitter_update_list li a,
#box-blog p a,
#comments .comment-meta strong a,
#comment-reply-label a,
.folio-credits a {color: #29a;}

h4 a:hover,
#posts h5 a:hover,
#box-jujuqui .saiba-mais a:hover,
#twitter_update_list li a:hover,
#box-blog p a:hover,
#comments .comment-meta strong a:hover,
#comment-reply-label a:hover,
.folio-credits a:hover {color: #16bbcd;}

#posts h4 a:hover,
.image-grid h5 a:hover,
#resume li a:hover,
#comments .reply a:hover {color: #444;}

h5,
h5 a,
#box-blog .leia-mais a,
#posts p a,
#boxes #with-what li a,
.image-grid li span a,
.article-content li a,
.live-work a {color: #f06;}

h5 a:hover,
#box-blog .leia-mais a:hover,
#posts p a:hover,
#boxes #with-what li a:hover,
.image-grid li span a:hover,
.article-content li a:hover,
.live-work a:hover {color: #ff4f86;}

article {display: block; height: 100%; overflow: hidden; clear: both; padding: 0 0 20px 2px;}

.caption {font: italic 11px/20px georgia, serif; color: #666; text-align: center; display: block;}


/* =Structure > =Header */

header {background: url(../img/bg_pixel.png) no-repeat 0 0; width: 840px; margin: auto; display: block; position: relative;}

    #language-switch {position: absolute; right: 10px; bottom: 140px; z-index: 1000;}

        #language-switch p {text-indent: -9999px; font-size: 0; line-height: 0;}

            #language-switch p a {display: block; width: 103px; height: 11px; background-position: 100% 0; background-repeat: no-repeat;}

                #language-switch p a:hover {background-position: 100% 100%;}

                #language-switch .flag-pt a {background-image: url(../img/flag_pt.png);}
                #language-switch .flag-en a {background-image: url(../img/flag_en.png);}

    #cse-search-box {float: right; margin-right: 10px; width: 240px;}

        #cse-search-box #q {float: left; width: 150px; height: 50px; padding: 0 20px; font: italic 16px georgia, serif; color: #fff; background-color: rgba(0, 0, 0, .1);}

        #cse-search-box #submit {float: right; width: 50px; height: 50px; text-indent: -9999px; background: url(../img/lupa.png) no-repeat 50% 50%; background-color: rgba(0, 0, 0, .15);}

            #cse-search-box #submit:hover {background-color: rgba(0, 0, 0, .20); cursor: pointer;}

    #navbar ul {background: url(../img/bg_navbar.png) no-repeat 127px 0; width: 820px; height: 80px; margin: auto; clear: both;}

        #navbar li {float: left; height: 49px; background-repeat: no-repeat; background-position: 0 16px; padding-top: 16px; margin: 0 30px}

            #navbar li a {display: block; height: 64px; padding-left: 58px; font: 22px/28px georgia, serif; color: #222;}

                #navbar li a:hover {color: #158; background: url(../img/bg_navbar_over.png) repeat-x 0 100%;}

    #navbar #nav-portfolio {width: 142px;}
    #navbar #nav-blog {width: 138px;}
    #navbar #nav-jujuqui {width: 156px;} #navbar #nav-jujuqui a {padding-left: 48px;}
    #navbar #nav-contato {width: 134px;}

    #nav-portfolio {background-image: url(../img/nav_portfolio.png);}
    #nav-blog {background-image: url(../img/nav_blog.png);}
    #nav-jujuqui {background-image: url(../img/nav_jujuqui.png);}
    #nav-contato {background-image: url(../img/nav_contato.png);}

    .navbar-en #nav-portfolio {background-image: url(../img/en_nav_portfolio.png);}
    .navbar-en #nav-blog {background-image: url(../img/en_nav_blog.png);}
    .navbar-en #nav-jujuqui {background-image: url(../img/en_nav_jujuqui.png);}
    .navbar-en #nav-contato {background-image: url(../img/en_nav_contato.png);}


/* =Structure > =Content */

#content {width: 820px; margin: auto; height: 100%; overflow: hidden; padding: 20px 0 30px 0; clear: both;}

    #content p {color: #333; line-height: 20px; font-size: 13px; padding-top: 10px;}


/* =Structure > =Footer */

footer {width: 100%; height: 104px; background: url(../img/bg_footer.png) repeat-x 0 100%; position: absolute; bottom: 0;}

    #footer-inner {width: 820px; margin: auto; background: url(../img/bg_footer_inner.png) no-repeat 50% 0; height: 104px;}

        #footer-inner p {float: left; margin-top: 45px;}

            #footer-inner p a {color: #eeebd6; font-size: 11px;}

                #footer-inner p a:hover {color: #057;}

    #footer-inner ul {float: right; width: 178px; height: 41px; background: url(../img/bg_powered.png) no-repeat 0 0; margin-top: 27px; padding-top: 8px;}

        #footer-inner li {float: left; text-indent: -9999px; font-size: 0; line-height: 0; padding: 0 0 0 20px;}

    #footer-inner a {display: block; background-position: 0 0; background-repeat: no-repeat;}

       #footer-inner a:hover {background-position: 0 100%;}

    #footer-inner #movable-type a {background-image: url(../img/movable_type.png); width: 70px; height: 33px;}
    #footer-inner #pre-lude a {background-image: url(../img/pre_lude.png); width: 68px; height: 28px;}


/* =Sections */

section {display: block;}

    #section-inner {background: url(../img/bg_header.jpg) no-repeat 50% 0; width: 960px; margin: auto; padding-bottom: 104px !important;}

#home, #interna {min-height: 100%; position: relative;}


/* =Sections > =Home */

#home {background: url(../img/bg_pixel_stripes.png) repeat-x 0 0; margin: auto;}


/* =Home > =Box-Jujuqui */

#box-jujuqui {width: 360px; float: left;}

    #box-jujuqui p {padding-top: 15px;}

    #box-jujuqui .saiba-mais {padding-top: 8px; line-height: 0;}

        #box-jujuqui .saiba-mais a {font: italic 18px/17px georgia, serif;}


/* =Home > =Box-Portfolio */

#box-portfolio {float: right; width: 440px; height: 220px; background: #333; position: relative;}

    #box-portfolio p {position: absolute; z-index: 1000; bottom: 0; right: 0; text-indent: -9999px;}

    #box-portfolio a {display: block; background: url(../img/bt_portfolio.png) no-repeat 0 0; width: 440px; height: 220px;}

        #box-portfolio a:hover {background-position: 0 100%;}

    .slider-en a {background-image: url(../img/en_bt_portfolio.png) !important;}

    #controller, #prevNext {display: none;}

    #box-portfolio #slider {position: absolute; top: 0; left: 0; width: 440px; height: 220px;}


/* =Home > =Box-Blog */

#box-blog {float: left; clear: left; width: 560px; height: 100%; overflow: hidden; margin-top: 20px;}

    #box-blog h3 {float: left; width: 460px;}

    #box-blog .rss {float: right; width: 60px; padding: 0; font-size: 0; line-height: 0; text-indent: -9999px;}

        #box-blog .rss a {width: 60px; height: 60px; display: block; background: url(../img/bt_rss.png) no-repeat 10px 10px;}

            #box-blog .rss a:hover {background-color: rgba(0, 0, 0, .1) !important;}

    #box-blog article {padding: 17px 0 0 0;}

         #box-blog article .caption,
         #box-blog article h5 {display: none;}

         #box-blog article div {float: right; width: 380px;}

    #box-blog figure {width: 160px; height: 160px; float: left; padding: 3px 20px 0 0;}

    #box-blog .leia-mais {background: url(../img/cmm_mensagem.png) no-repeat 0 0; padding: 0 0 0 20px; line-height: normal; margin-top: 13px;}

        #box-blog .leia-mais a {font-size: 12px; font-weight: bold;}


/* =Home > =Box-Twitter */

#box-twitter {float: right; width: 240px; background: url(../img/bg_twitter_patinha.png) no-repeat 184px 60px; margin-top: 10px;}

    #box-twitter h3 {background: url(../img/bg_h3_twitter.png) no-repeat 0 0;}

    #twitter_update_list {padding: 20px 20px 0 20px; height: 100px; vertical-align: middle; display: table-cell;}

        #twitter_update_list li {font: italic 12px georgia, serif; width: 200px;}

            #twitter_update_list li span {clear: both; display: block; font: 10px/20px 'lucida grande', 'lucida sans unicode', verdana, sans-serif; color: #666; text-align: right;}

    #twitter-info {background: url(../img/bg_twitter_info.png) no-repeat 70px 0 #4bc; height: 60px;}

        .avatar-twitter {float: left; background: url(http://api.twitter.com/1/users/profile_image/jujuqui?size=bigger) -6px -6px; width: 60px; height: 60px;}

            .avatar-twitter img {display: none;}

        #jujuqui-twitter {float: left; width: 100px; padding: 9px 0 0 30px;}

            #jujuqui-twitter p {font: italic 12px/14px georgia, serif; padding: 0; color: #444;}

            #jujuqui-twitter a {font-weight: bold; color: #000;}

                #jujuqui-twitter a:hover {color: #efecd7;}

        .follow-me {text-indent: -9999px; font-size: 0; line-height: 0; float: right; width: 50px; height: 25px; padding: 0 !important;}

            .follow-me a {display: block; width: 50px; height: 25px; background: url(../img/bt_sigame.png) no-repeat 0 0;}

                .follow-me a:hover {background-position: 0 100%;}


/* =Section > =Search Results */

#google-search #section-inner, #google-search #content {padding-bottom: 0 !important;}

#cse-search-results {width: 100%; padding: 10px 0 0 0;}

#google-search footer {position: static; display: block; clear: both;}


/* =Section > =Internas */

#interna {background: url(../img/bg_interna_top.png) repeat-x 0 0, url(../img/bg_body_interna.jpg) repeat-x 0 0 #efecd7;}


/* =Section > =Internas > =Structure */

#interna #section-inner {background: none; padding: 0;}


/* =Section > =Internas > =Header */

#interna header {background: none; height: 100%; overflow: hidden; width: 820px;}

    #interna h1 {margin: 0 0 20px 0; padding: 0; float: left; clear: left;}

        #interna h1 a {background: url(../img/playstop.png) 0 0;}

            #interna h1 a:hover {background-position: 0 100%;}

    #interna header h3 {width: 500px; float: left;}

    #interna #language-switch {width: 16px; margin: 90px 0 10px 0; position: static;}

        #interna #language-switch a {width: 16px;}
        
    #menu {float: right; width: 290px; margin: 0 0 0 0; position: relative;}

        #interna #navbar ul {height: 49px; clear: none; background-image: none; background-color: transparent !important; margin: 0;}

            #interna #navbar li {text-indent: -9999px; font-size: 0; line-height: 0; margin: 0 0 0 10px; padding: 0 0 0 30px; background-position: 14px 0; width: 36px; height: 49px;}

                #interna #navbar #nav-portfolio {height: 44px; margin: 0;}
                #interna #navbar #nav-jujuqui {width: 32px;}

                #interna #navbar li a {padding: 0; background: none;}

        #interna #box {position: absolute; left: 0; top: 50px; z-index: 200; background-color: rgba(0, 0, 0, .3); padding: 7px 10px;}

            #interna #box .head {color: #f0ebd7; white-space: nowrap; font-size: 11px;}

    #interna #sec-title {clear: both; height: 100%; overflow: hidden;}

    #interna #cse-search-box {width: 260px; margin: 0;}

        #interna #cse-search-box #q {width: 160px; height: 60px; color: #158;}

        #interna #cse-search-box #submit {width: 60px; height: 60px; background-color: rgba(0, 0, 0, .1);}

            #interna #cse-search-box #submit:hover {background-color: rgba(0, 0, 0, .15);}


/* =Section > =Internas > =Content */

#interna #content {width: 840px; padding: 0;}


/* =Section > =Internas > =Portfolio */

.selecione {float: left; padding: 20px 0 20px 10px;}

.splitter {float: right; width: 402px; height: 27px; padding: 20px 10px 0 0;}

.splitter li {height: 27px;}

    .splitter ul li {float: left !important; text-indent: -9999px; font-size: 0; line-height: 0; margin: 0 0 0 1px;}

        .splitter ul li a {display: block; height: 27px; background-color: #d7d4c1; background-position: 0 0; background-repeat: no-repeat; width: 66px;}

            .splitter ul .selected-0 a,
            .splitter ul .selected-1 a,
            .splitter ul .selected-2 a,
            .splitter ul .selected-3 a,
            .splitter ul .selected-4 a,
            .splitter ul .selected-5 a {background-color: #fa0;}

            .splitter #li-todos a {background-image: url(../img/li_todos.png);}
            .splitter #li-web a {background-image: url(../img/li_webdesign.png);}
            .splitter #li-ilust a {background-image: url(../img/li_ilustracao.png);}
            .splitter #li-print a {background-image: url(../img/li_impressos.png);}
            .splitter #li-sound a {background-image: url(../img/li_soundesign.png);}
            .splitter #li-outros a {background-image: url(../img/li_outros.png);}

            .splitter #li-todos-en a {background-image: url(../img/li_todos_en.png);}
            .splitter #li-ilust-en a {background-image: url(../img/li_ilustracao_en.png);}
            .splitter #li-print-en a {background-image: url(../img/li_impressos_en.png);}
            .splitter #li-outros-en a {background-image: url(../img/li_outros_en.png);}
            
            .splitter ul li a:hover {background-position: 0 100%; background-color: #f06;}

.image-grid {height: 100%; overflow: hidden; clear: both;}

    .image-grid .web,
    .image-grid .ilu,
    .image-grid .imp,
    .image-grid .som,
    .image-grid .out {float: left; margin: 0 10px 20px 10px; width: 260px; height: 287px;}

    .image-grid h5 {padding: 7px 0 3px 0; font-size: 20px; color: #000;}

    .image-grid li span {color: #333; display: block; line-height: 20px;}

    .image-grid figure {background-position: 0 0; background-repeat: no-repeat; width: 260px; height: 200px; text-indent: -9999px; display: block;}

        .image-grid figure img {display: block;}

    .image-grid li div {position: relative;}

        .image-grid li div a {width: 260px; height: 200px; display: block;}
        
        .image-grid li div span {width: 260px; height: 200px; display: block; text-indent: -9999px; font-size: 0; line-height: 0;}

            .image-grid li div span:hover {background: url(../img/bt_screenshots.png) no-repeat 100% 100%; background-color: rgba(0, 0, 0, .5);}

        .image-grid li div .img-hidden {position: absolute; top: 0; left: 0; visibility: hidden;}

#content .folio-credits {font: italic 11px georgia, serif; color: #666; text-align: center; padding-bottom: 20px;}


/* =Section > =Internas > =Blog */

#posts {float: left; width: 540px; padding: 0 0 0 10px;}
.wide {float: none !important; width: 820px !important;}

    #posts h4, #posts h5, #posts h6 {margin-top: 20px;}
    #posts h4, #posts h4 a, .erro-404 h4 {font-size: 36px; line-height: 37px; color: #000;}
    #posts h5, #posts h5 a {font-size: 24px;}

    #posts .meta {border-bottom: 1px solid #e3decc; padding-bottom: 8px; margin-bottom: 5px; height: 100%; overflow: hidden;}

        #posts .meta .info {font-size: 11px; line-height: 14px; padding-top: 14px; color: #888; float: left;}

    #posts .meta .info a,
    #posts .tags li a,
    #comments .comment-date a {color: #666;}

        #posts .meta .info a:hover,
        #posts .tags li a:hover {color: #000; background-color: transparent !important;}

    #posts .meta .info .data {background: url(../img/ico_calendario.png) no-repeat 0 0; padding-left: 18px; color: #888; float: left;}

    #posts .meta .info strong a {background: url(../img/ico_comments.png) no-repeat 0 0; padding: 0 0 1px 18px; float: left;}

    #posts .meta .info ul {background: url(../img/ico_categoria.png) no-repeat 0 0; padding-left: 15px; height: 14px; float: left;}

        #posts .meta .info ul li {color: #888; float: left; margin-left: 3px;}

    #posts .meta .facebook-like {float: left; height: 19px; position: relative; padding: 13px 0 0 3px;}

        #posts .meta .facebook-like span {font-size: 11px; color: #888;}

        #posts .meta .facebook-like iframe {position: absolute; top: 0; left: 11px; border: none; width: 100px; overflow: hidden; height: 20px; float: left; padding-top: 10px;}

    .article-content ul, .article-content ol {margin-top: 17px;}

        .article-content li {color: #333; line-height: 20px; font-size: 13px;}

            .article-content ul li {list-style-type: square; margin-left: 15px;}

            .article-content ol li {list-style-type: decimal; margin-left: 22px;}

            .article-content .abc li {list-style-type: upper-alpha;}

    .videobox {padding-top: 10px;}

    blockquote {padding: 17px 20px; display: block; color: #666; font-size: 12px; line-height: 20px; margin: 5px 0;}

    blockquote p {color: #666 !important; font-size: 12px !important; line-height: 20px !important; padding: 0 !important;}

    .mt-image-none {display: block; clear: both;}
    .mt-image-center {text-align: center; margin: auto; display: block;}
    .mt-image-left {float: left; padding-right: 10px;}
    .mt-image-right {float: right; padding-left: 10px;}

    .continue {margin-top: 10px;}

        .continue a {font: italic 16px georgia, serif;}

    .post-meta {height: 100%; overflow: hidden; margin-top: 20px;}

        .post-meta ul {margin-top: 0;}

        .post-meta div {float: left; width: 380px;}

        .post-meta .soundtrack {background: url(../img/ico_last.png) no-repeat 0 0; padding: 0 0 2px 20px !important;}

            .post-meta .soundtrack a {font-size: 12px;}

        .post-meta .tags {background: url(../img/ico_tags.png) no-repeat 0 0; padding-left: 20px; display: inline-block;}

            .post-meta .tags li {display: inline; margin: 0; color: #aaa; line-height: normal;}

            .post-meta .tags li a {font-size: 12px;}

        .post-meta .share {float: right; width: 150px; height: 100%; overflow: hidden;}

            .post-meta .share li {float: left; text-indent: -9999px; font-size: 0; line-height: 0; margin-left: 10px;}

            .post-meta .share li a {display: block; width: 40px; height: 40px;}

            .post-meta .share .soc-twitter a {background-image: url(../img/soc_twitter_40.png);}
            .post-meta .share .soc-facebook a {background-image: url(../img/soc_facebook_40.png);}
            .post-meta .share .soc-delicious a {background-image: url(../img/soc_delicious_40.png);}
            .post-meta .share .soc-orkut {background-image: url(../img/soc_orkut_40.png); display: block; width: 40px; height: 40px; cursor: pointer;}
            
    .content-nav, .content-nav a {font-size: 14px; font-weight: bold; color: #666;}

        .content-nav a:hover {color: #000;}

    .posts-nav, #pagination {margin-top: 20px; overflow: hidden; height: 100%;}

        .posts-nav li, #pagination li {width: 240px; min-height: 40px;}

            .posts-nav a, #pagination li a {display: table-cell; vertical-align: middle; width: 220px; height: 26px; color: #666;}

                .posts-nav a:hover, #pagination li a:hover {color: #29a;}

        .posts-nav .posts-nav-left, #pagination .next-page {float: left; text-align: left;}

            .posts-nav .posts-nav-left a, #pagination .next-page a {background: url(../img/arrow_left.png) 0 50% no-repeat; padding-left: 25px;}

                .posts-nav .posts-nav-left a:hover, #pagination .next-page a:hover {background-image: url(../img/arrow_left_over.png);}

        .posts-nav .posts-nav-right, #pagination .prev-page {float: right; text-align: right;}

            .posts-nav .posts-nav-right a, #pagination .prev-page a {background: url(../img/arrow_right.png) 100% 50% no-repeat; padding-right: 20px;}

    #pagination .prev-page, #pagination .prev-page a {width: 140px;}

        .posts-nav .posts-nav-right a:hover, #pagination .prev-page a:hover {background-image: url(../img/arrow_right_over.png);}

    #comments {padding-top: 20px;}

        #comments .comment {margin: 20px 0 30px 0; height: 100%; overflow: hidden;}

            #comments .gravatar {width: 60px; height: 60px; float: left;}

            #comments .box-comment {float: right; width: 445px; background: url(../img/bg_balloon_comment.png) no-repeat 0 20px; padding-left: 20px;}

                #comments .comment-meta {padding: 0; line-height: 10px; color: #999;}

                    #comments .comment-date a:hover {background: none !important; color: #000;}

                    #comments .reply a {color: #000;}

                    #comments .replying-to {font-style: italic;}

                #comments .balloon-comment {padding: 5px 20px 18px 20px; margin-top: 10px; background-color: #e2dfcc !important;}

                    #comments .balloon-comment p {color: #555; font-size: 12px;}

                #comments .author-comment .box-comment {background-image: url(../img/bg_balloon_author_comment.png);}
                #comments .author-comment .comment-meta strong a {color: #f06;}
                #comments .author-comment .comment-meta strong a:hover {color: #ff4f86;}
                #comments .author-comment .balloon-comment {background-color: #fff !important;}
                #comments .author-comment .balloon-comment p {color: #333;}

    #comments-form {height: 100%; overflow: hidden; padding-top: 10px; line-height: 0; font-size: 0;}

        #comments-form .comment-form-options {display: block; height: 100%; overflow: hidden;}

            #comments-form .comment-form-options div {float: left; font-size: 11px; color: #999;}

                #comments-form .comment-form-options label {color: #666;}

                #comments-form .data {float: left;}
                
                #comments-form input,
                #comments-form textarea {font-family: 'lucida grande', 'lucida sans unicode', verdana, sans-serif;}

                    #comments-form .data input {width: 157px; display: block; margin-top: 10px; font-size: 12px; background-color: #d7d4c1 !important; background-repeat: no-repeat; padding: 6px 10px 6px 32px; color: #555;}

                        #comment-author {background-image: url(../img/cmm_nome.png); background-position: 10px 7px;}
                        #comment-email {background-image: url(../img/cmm_email.png); background-position: 10px 8px;}
                        #comment-url {background-image: url(../img/cmm_website.png); background-position: 10px 10px;}
                        #comment-text {background-image: url(../img/cmm_mensagem.png); background-position: 10px 10px;}

                #comments-form .message {margin-top: 10px; float: right; width: 330px; font-size: 0; line-height: 0; background-color: #d7d4c1;}

                    #comments-form .message div {text-align: right;}

                        #comment-text {width: 290px; height: 64px; background-color: #d7d4c1; background-repeat: no-repeat; padding: 10px 10px 2px 30px; font-size: 12px; color: #555;}

                #comment-submit {background: #f06; color: #efecd7; padding: 5px 20px; font-size: 12px;}

                    #comment-submit:hover {background: #fc0; color: #000; cursor: pointer;}

    #archives-list ul {height: 100%; overflow: hidden; margin-top: 10px;}

        #archives-list ul li {display: inline; color: #cbc8b6; font-size: 13px;}

            #archives-list ul li a {color: #444;}

                #archives-list ul li a:hover {color: #000;}


/* =Section > =Internas > =Blog > =Sidebar */

#sidebar {float: right; width: 260px; margin: 20px 10px 0 0;}

    #sidebar .rss {background: url(../img/bt_rss.png) no-repeat 10px 10px;}
    
    #sidebar .rss a {background: url(../img/rss_text.png) no-repeat 60px 35px; height: 50px; padding: 10px 0 0 60px; display: block; color: #666;}

        #sidebar .rss a:hover {background-color: rgba(0, 0, 0, .1) !important; color: #f06;}

    #sidebar h4 {margin: 20px 0 5px 0;}

    #sidebar li {color: #cdc9b9; list-style-type: square; margin-left: 16px; line-height: 20px; font-size: 12px;}

        #sidebar li a {color: #666;}

            #sidebar li a:hover {color: #000;}

    #sidebar .tag-cloud {text-align: center;}

        #sidebar .tag-cloud li {margin: 0 2px; list-style-type: none; display: inline;}

            #sidebar .tag-cloud .rank-1 {font-size: 28px;}
            #sidebar .tag-cloud .rank-2 {font-size: 24px;}
            #sidebar .tag-cloud .rank-3 {font-size: 20px;}
            #sidebar .tag-cloud .rank-4 {font-size: 18px;}
            #sidebar .tag-cloud .rank-5 {font-size: 16px;}
            #sidebar .tag-cloud .rank-6 {font-size: 14px;}
            #sidebar .tag-cloud .rank-7 {font-size: 12px;}
            #sidebar .tag-cloud .rank-8 {font-size: 11px;}
            #sidebar .tag-cloud .rank-9 {font-size: 10px;}
            #sidebar .tag-cloud .rank-10 {font-size: 9px;}


/* =Section > =Internas > =About */

.about-me {background: url(../img/bg_jujuqui.jpg) no-repeat 475px 0;}

    #posts .intro {font: italic 18px/22px georgia, serif; color: #000; text-align: right; padding-top: 15px;}
    
    #boxes {clear: both; padding: 10px 0 20px 0; height: 100%; overflow: hidden;}

        #boxes div {padding: 20px; background-color: rgba(0, 0, 0, .1); float: left; margin: 0 10px; height: 120px;}

            .about-me #boxes h5 {padding: 0; line-height: 16px; padding-bottom: 10px;}

            #boxes #what {width: 110px;}

            #boxes #with-what, #boxes #resume {width: 150px;}

                #boxes #what li, #boxes #with-what li {list-style-type: square; margin-left: 14px; line-height: 19px; color: #666;}

            #resume ul {height: 20px; margin-bottom: 10px; }

                #resume li {float: left;}

                    #resume li a {color: #000;}

            #boxes #social-networking {width: 210px; padding: 10px; height: 140px;}

                #boxes #social-networking li {text-indent: -9999px; float: left; font-size: 0; line-height: 0; margin: 10px;}

                    #boxes #social-networking li a {width: 50px; height: 50px; display: block; background-position: 0 0; background-repeat: no-repeat;}

                        #social-networking .soc-twitter a {background-image: url(../img/soc_twitter.png);}
                        #social-networking .soc-facebook a {background-image: url(../img/soc_facebook.png);}
                        #social-networking .soc-linkedin a {background-image: url(../img/soc_linkedin.png);}
                        #social-networking .soc-flickr a {background-image: url(../img/soc_flickr.png);}
                        #social-networking .soc-delicious a {background-image: url(../img/soc_delicious.png);}
                        #social-networking .soc-lastfm a {background-image: url(../img/soc_lastfm.png);}


/* =Section > =Internas > =Contact */

.req {color: #f06; font-weight: bold; font-size: 14px;}

.sidebar-contato h4 {margin: 0  0 10px 0 !important; font-size: 23px;}

#calendario {border-collapse: collapse; width: 100%; margin-bottom: 5px;}

    #calendario th, #calendario td {padding: 8px 10px 7px 11px; text-align: center; color: #666; border: 1px solid #efecd7;}

    #calendario th {background-color: #d6d3c1; font-size: 14px; font-weight: bold;}

    #calendario td {background-color: #e2dfcc; font-size: 12px;}

    #calendario .s {background: #393;}
    #calendario .n {background: #ff462f;}

.sidebar-contato li {list-style-type: none !important; margin: 0 !important;}

.availability {height: 100%; overflow: hidden; margin-bottom: 30px;}

    .availability li {padding-left: 14px; float: left; margin-right: 20px !important; color: #999 !important; font: italic 11px georgia, serif; background-position: 1px 5px; background-repeat: no-repeat;}

        .availability #available {background-image: url(../img/available.png);}
        .availability #not-available {background-image: url(../img/available_not.png);}
    
.other-ways li {color: #666 !important; padding: 0 0 5px 20px; line-height: normal !important;}

    .other-ways .mail-way {background: url(../img/cmm_email.png) no-repeat 0 2px;}
    .other-ways .msn-way {background: url(../img/ico_msn.png) no-repeat 0 0;}
    .other-ways .skype-way {background: url(../img/ico_skype.png) no-repeat 0 0;}
    
.live-work {font: italic 11px georgia, serif !important; color: #666 !important;}
    
    
/* =Section > 404 */

.erro-404 {width: 820px !important; padding-bottom: 50px !important;}

    .erro-404 span {display: block; clear: both; text-indent: -9999px; font-size: 0; line-height: 0; height: 9px; background-repeat: no-repeat; background-position: 100% 0; margin: 10px 0 0 0;}

        .erro-404 .se-perdeu {background-image: url(../img/txt_seperdeu.png);}
        .erro-404 .se-perdeu-en {background-image: url(../img/en_txt_seperdeu.png);}
    
    .erro-404 h2 {font-size: 0; line-height: 0; text-indent: -9999px; background: url(../img/404.png) no-repeat 0 0; width: 420px; height: 177px; float: left; margin-right: 20px;}
    
    .erro-404 h4 {margin-top: 60px;}
    
    .erro-404 p {font: italic 22px georgia, serif !important; color: #666 !important;}


/* Mobile */

@media screen and (max-width:320px) {

header, #interna header, #section-inner, #footer-inner, #navbar ul, #interna #content, #posts, #navbar li a, #sidebar  {width: 100%; margin: 0;}
#language-switch, #box, .head, #home #content, .selecione, .splitter, .image-grid span, .image-grid h5, .image-grid h6, .posts-nav, .article-content object, .syntaxhighlighter, #comments .gravatar {display: none !important;}

#home, #interna {background: url(../img/bg_interna_top.png) repeat-x 0 0, url(../img/bg_body_interna.jpg) repeat-x 0 0 #efecd7;}

header {background: none; height: 100%; overflow: hidden;}

h1,
#interna h1 {margin: 110px auto 20px auto; width: 178px; padding: 0; float: none; clear: both;}
h1 a,
#interna h1 a {background: url(../img/playstop_m.png) 0 0 no-repeat; width: 178px; height: 92px;}

#sec-title h3,
#interna #sec-title h3 {width: auto; float: none; margin: 20px 0;}

#cse-search-box {margin: 15px 0 !important; float: none; width: 100%; height: 60px;}
#interna #cse-search-box {margin: 0 !important; float: none; width: 100%; height: 60px;}
#cse-search-box div {padding: 0 20px;}
#cse-search-box #q {width: 60%; height: 60px; color: #158; background-color: rgba(0, 0, 0, .05);}
#cse-search-box #submit {width: 20%; height: 60px; background-color: rgba(0, 0, 0, .1);}

#navbar {background: none; float: none;}
#navbar ul {height: auto; clear: both; background-image: none; background-color: transparent !important;}

#home #navbar li {margin: 0 0 0 20px; padding-bottom: 15px; float: none;}
#interna #navbar li {margin: 0;}

#cse-search-results {width: 100%;}
#cse-search-results iframe {margin: 0 20px; max-width: 280px;}

.image-grid {padding: 10px 0;}
.image-grid li {height: 200px !important; float: none; margin: 10px 0 !important; width: 100% !important;}
.image-grid li div {margin: auto !important; width: 260px;}

#posts {float: none; padding: 0;}

#posts .meta .info {color: #efecd7; font-size: 0;}
#posts .meta span,
#posts .meta ul,
#posts .meta strong {float: none; display: block; clear: both; margin: 2px 0; font-size: 11px;}

#posts .meta .facebook-like {float: none; padding: 0; display: block; clear: both;}
#posts .meta .facebook-like span {font-size: 0; line-height: 0;}
#posts .meta .facebook-like iframe {position: absolute; top: -10px; left: 0; float: none;}

.article-content img {max-width: 275px !important;}

#posts h5 {padding-left: 20px;}
#posts .article-content h5 {padding-left: 0;}
#posts article {padding: 0 20px 20px 20px;}
#posts article h4,
#posts article h4 a {font-size: 28px; line-height: 30px;}

.post-meta div,
.post-meta .share {float: none; display: block; clear: both;}
.post-meta .share {margin-top: 20px;}

.posts-nav, #pagination {width: 87%; padding: 0 20px 20px 20px;}
.posts-nav li, #pagination li {width: 37%;}
.posts-nav a, #pagination li a {width: 37%;}

#comments .box-comment {width: 100%; padding-left: 0; background: none; float: none;}
#comments-form .data {float: none; display: block; clear: both;}
#comments-form .data input {width: 100%;}
#comments-form .message {float: none; width: 100%; display: block; clear: both; margin-top: 10px;}
#comment-text {width: 100%; padding: 10px 10px 0 30px;}

#boxes div {margin: 0 auto 20px auto; float: none;}

#sidebar {padding-bottom: 20px;}
#sidebar h4 {margin: 20px 0 5px 20px;}
#sidebar ul {margin-left: 20px;}

.tag-cloud {width: 100%; text-align: left !important;}
.tag-cloud li {margin: 0;}

.sidebar-contato {width: 100%; padding: 20px 0 0 0 !important;}
.sidebar-contato h4 {padding-left: 20px;}
.sidebar-contato table {margin: 0 20px; width: 87%;}

footer {position: relative;}
#footer-inner, #section-inner {background: none; height: auto;}
#footer-inner p {float: none; margin: 0 0 0 20px;}
#footer-inner p a {color: #057;}
#footer-inner ul {float: none; margin: 0; position: absolute; bottom: 28px; left: 0;}

}