/*------------------------------------------------------------------
[Reset Stylesheet]

Last change:	23/12/10
Assigned to:	Bruno Bertolini
Primary use:	Reset
-------------------------------------------------------------------*/

/* Micox CSS mini-lib 1.0 - 22/02/2008 - elmicox.blogspot.com */

/* padronizando propriedades pros navegadores ficarem parecidos e corrigindo alguns bugs */
* { margin: 0; padding: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; line-height: 1.1em; vertical-align: baseline }
p { margin-bottom: 0.5em; }
hr { clear: both; float: none; width: 100%; }
* html body hr { margin: -7px; display: block;}  /* os hr tem uma altura extra misteriosa no IE */
a, img { border: none; }
img { vertical-align: middle;}
fieldset { display: block; border: 2px ridge #FFF; padding: 10px; } /* fieldset n�o � block em todos */
ul, ol { margin-left: 1.5em; list-style-position: outside; }
li { vertical-align: top; line-height: 1.2em;}  /* IE: posi��o vertical do marcador no IE  e espa�o extra fantasma em lis*/
li a { zoom: 1; line-height: 1.2em; }  /* complemento do anterior */
input[type=hidden]{ display: none !important; visibility: hidden !important;} /* input hidden no FF */
button { border: 1px outset #AAA; }
legend { margin-bottom: 1.4em; } /* Fixes incorrect styling of legend in IE6 fieldsets. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, thead, tfoot { text-align: center; font-weight: bold; }
blockquote:before, blockquote:after,q:before, q:after { content: ��; }
blockquote, q { quotes: "" ""; }
pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap !important; /* FF 1999 */ white-space: -pre-wrap; /* OP 4-6 */ white-space: -o-pre-wrap; /* OP 7 */  word-wrap: break-word; /* IE 5.5+ */ }
a {text-decoration: none;}
ul {list-style: none; margin:0; padding:0;}
h1 { font-size: 250%; font-weight: normal;}
h2 { font-size: 200%; font-weight: normal;}
h3 { font-size: 150%; font-weight: normal;}
h4 { font-size: 120%; font-weight: normal;}
h5 { font-size: 110%; font-weight: normal;}
h6 { font-size: 100%; font-weight: bold;}

/* Facilib CSS mii-framwork - 06/07/2009 - brunobertolini.com */

/** reset das tags do HTML5. Não sei porque, elas ficam como elementos de linha. Estranho, mas acho que é porque os browsers ainda não renderizam direito. Mesmo assim, resolvi colocando um display:block; fácil fácil. ***/
header, section, footer, article, nav {display: block;}

/********************	NÃO ALTERAR NESSA PARTE	********************/
/*
Deixa o rodape sempre no fim ;D
--------------*/
html { height:100%; }
body { background: #FFF;height: 100%;margin: 0;padding: 0;text-align: center; }
#all { height:auto !important;/* Para browsera modernos */height:100%; /* Para o IE6 */margin: 0 auto;min-height:100%; /* Para browsera modernos */position:relative;text-align: left; }
#main:after { clear: both;content: ".";display: block;height: 0;overflow:hidden;visibility: hidden;width: 0; }
footer { bottom:0 !important;clear: both; width: 100%; }
header, #main, footer { text-align: left; }
/********************	NÃO ALTERAR NESSA PARTE	********************/

/*
Correção do bug float
---------------*/
.after:after { clear: both;content: ".";display: block;height: 0;overflow:hidden;visibility: hidden;width: 0; }

/* Import fonts */
@font-face { font-family: Dekar; src: url(/font/dekar.otf); }
@font-face { font-family: Sertig; src: url(/font/sertig.otf); }
/*
Layout
---------------*/

body {
    color: #403D36;
    font-family: Sertig, sans-serif;
    text-align: left;
    width: 8000px;
}

    header {
        background: #33312B;
        height: 50px;
        position: fixed;
        width: 100%;
        z-index: 10;
    }

        header nav {
            font-family: Dekar;
            font-size: 1em;
            left: auto;
            position: fixed;
            right: 50px;
        }

        header nav li {
            float: left;
        }
        
            header nav li a {
                color: #FFF;
                display: block;
                padding: 16px 20px 15px;
            }

            header nav li a:hover {
                background: #999;
            }

/*
pages
---------------*/

.page {
    background: url("http://brunobertolini.com/img/layout/body-bg-grid.gif");
    float: left;
    height:auto !important;/* Para browsera modernos */
    height:100%; /* Para o IE6 */
    min-height:100%; /* Para browsera modernos */
    position:relative;
    width: 2000px;
    z-index: 5;
}

.page article {
    padding: 50px 0px 0px 0px;
}

/*
Home
---------------*/

#home {
    background: #F5F5ED;
/*    background: #7AB081;*/
}

    #home article {
        padding: 135px 0px 0px 33px;
        width: 927px;
    }

        #home article h1 {
            font-size: 5em;
            line-height: 90px;
            text-transform: uppercase;
        }

            #home article p {
                font-size: 1.3em;
                margin: -4px 0px 0px 4px;
            }

            #home article a {
                color: #7AB081;
/*                color: #F5F5ED;*/
            }

/*
About
---------------*/

#about {
    background: #EBA142;
}

    #about article {
        padding: 74px 0px 0px 36px;
        width: 927px;
    }

        #about article h1 {
            font-size: 4em;
            text-transform: uppercase;
        }

        #about article p {
            font-size: 1.5em;
            line-height: 35px;
            width: 650px;
        }

        #about article a {
            color: #EEE;
        }

/*
Projects
---------------*/


#projects {
    background: #7D677F;
    color: #F5F5ED;
}

    #projects section.content {
        padding: 74px 0px 0px 36px;
        width: 927px;
    }

        #projects section.content a {
            color: #3E333F;
        }

        #projects section.content h1 {
            font-size: 4em;
            text-transform: uppercase;
        }

        #projects section.content article {
            margin: 0;
            padding: 0;
        }

        #projects section.content img.twittepaga {
            background: #fff;
            padding: 30px 30px 20px;
        }

        #projects section.content article.more {
            margin-top: 20px;
        }

            #projects section.content article p {
                font-size: 1.3em;
                float: right;
                padding: 10px;
                width: 550px;
            }

            #projects section.content article li {
                background-position: 10px 10px;
                background-repeat: no-repeat;
                font-size: 1.1em;
                padding: 10px 10px 10px 65px;
                float: left;
                width: 230px;
            }

            #projects section.content article li:hover {
                background-color: #89718B;
            }

            #projects section.content article li.cinetrine {
                background-image: url(http://a1.twimg.com/profile_images/1185540896/avatare_normal.png);
            }

            #projects section.content article li.twittelembra {
                background-image: url(http://a3.twimg.com/profile_images/263144593/TL_normal.png);
            }

            #projects section.content article li.vaichover {
                background-image: url(http://a0.twimg.com/profile_images/481541377/11-rain_normal.png);
            }
/*
Contact
---------------*/

#contact {
    background: #7AA3B0;
}

    #contact article {
        padding: 74px 0px 0px 36px;
        width: 927px;
    }

        #contact article h1 {
            font-size: 4em;
            text-transform: uppercase;
        }

        #contact article a {
            color: #FFF;
        }

        #contact article ul {
            margin-top: 20px;
        }

        #contact article li {
            font-size: 1em;
            height: 15px;
            margin: 5px;
            float: left;
            padding: 5px 10px 15px 40px;
            text-transform: uppercase;
            width: 300px;
        }

/*
Home
---------------*/

a:hover[rel="home"] { background: #F5F5ED; color: #333; }
a:hover[rel="about"] { background: #EBA142; color: #333; }
a:hover[rel="projects"] { background: #7D677F; color: #FFF; }
a:hover[rel="contact"] { background: #7AA3B0; color: #FFF; }

a[rel="home"] { color: #F5F5ED; }
a[rel="about"] { color: #EBA142; }
a[rel="projects"] { color: #7D677F; }
a[rel="contact"] { color: #7AA3B0; }

.twitter { background: url(/img/icons/twitter.png) no-repeat; }
.facebook { background: url(/img/icons/facebook.png) no-repeat; }
.linkedin { background: url(/img/icons/linkedin.png) no-repeat; }
.delicious { background: url(/img/icons/delicious.png) no-repeat; }
.tumblr { background: url(/img/icons/tumblr.png) no-repeat; }
.email { background: url(/img/icons/email.png) no-repeat; }
.youtube { background: url(/img/icons/youtube.png) no-repeat; }
.skype { background: url(/img/icons/skype.png) no-repeat; }
.msn { background: url(/img/icons/msn.png) no-repeat; }
.gtalk { background: url(/img/icons/gtalk.png) no-repeat; }
.reader { background: url(/img/icons/google.png) no-repeat; }
.github { background: url(/img/icons/github.png) no-repeat; }