/* Fonts, fonts... */
@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);

/* Reset de leve e afins. */
*{border: 0; list-style: none; margin: 0; outline: none; padding: 0; font-family: 'Quicksand', Arial, sans-serif;}
html, body{height: 100%}

body{
    background: url(../images/bg.jpg) center center #060812;
}
.hide{
    display: none;
}
.show{
    display: block;
    z-index: 9999;
}

/* Ao que interessa... */
#pages{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -400px;
    height: 555px;
    width: 800px;
}
#pages h1{
    height: 68px;
    width: 526px;
    position: relative;
    font-size: 1px;
    cursor: pointer;
    opacity:0;
}
#pages .twitter{
    background: url(../images/twitter.png) no-repeat;
    bottom:52px;
    display:block;
    font-size:36px;
    height:32px;
    letter-spacing:1px;
    line-height:28px;
    overflow: hidden;
    position:absolute;
    right:3px;
    text-align:right;
    text-decoration: none;
    width:273px;
    z-index: 10;
}
#pages .twitter span{
    opacity: 0;
}
.page{
    position: absolute;
    top: 68px;
    height: 432px;
    width: 800px;
    color: #fff;
}

/* Bg Color Pages */
#pages{
    /*background: url(../images/bg_page_black.png) no-repeat 0 89px;*/
}
#pages .home{
    background: url(../images/bg_page_white.png) no-repeat bottom center;
}
#pages .meueu{
    background: url(../images/bg_page_yellow.png) no-repeat bottom center;
}
#pages .meustrabalhos{
    background: url(../images/bg_page_blue.png) no-repeat bottom center;
}
#pages .minhascoisas{
    background: url(../images/bg_page_green.png) no-repeat bottom center;
}
#pages .minhascoisas a{
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    padding: 1px 2px;
}
#pages .meuscontatos{
    background: url(../images/bg_page_pink.png) no-repeat bottom center;
}
#pages .meuscontatos iframe{
    left: 22px;
    position: absolute;
    top: 44px;
    -moz-border-radius:5px;
    border-radius:5px;
    -webkit-border-radius:5px;
}
#pages .meuscontatos .other_contacts{
    position: absolute;
    top: 44px;
    left: 400px;
    line-height: 50px;
    text-align: left;
}
#pages .meuscontatos .other_contacts li{
    list-style: disc inside;
    color: #000;
    padding: 2px 0 2px 10px;
}
#pages .meuscontatos .other_contacts li a{
    color: #000;
}

#pages #page01, #pages #page02, #pages #page04, #pages #page05{
    line-height: 411px;
    text-align: center;
}

/* Menu */
ul#nav{
    width: 100%;
    text-align: left;
    position: absolute;
    bottom: 0;
}
ul#nav, ul#nav li{
    height: 55px;
    line-height: 55px;
}
ul#nav li{
    overflow: hidden;
    display: inline-block;
    position: relative;
    cursor: pointer;
    color: #fff;
    height:19px;
    line-height:19px;
    margin: 16px 7px 17px 23px;
}
ul#nav li a{
    color: #fff;
    display: inline-block;
    float: left;
    font-size: 27px;
    text-decoration: none;
}
ul#nav li b{
    color: #000;
    font-weight:400;
    letter-spacing: -1px;
}
ul#nav li.meueu b,
ul#nav li.meueu a:hover{
    background: #f2e406;
    color: #000;
}
ul#nav li.meustrabalhos b,
ul#nav li.meustrabalhos a:hover{
    background: #0686f2;
    color: #000;
}
ul#nav li.minhascoisas b,
ul#nav li.minhascoisas a:hover{
    background: #07ea27;
    color: #000;
}
ul#nav li.meuscontatos b,
ul#nav li.meuscontatos a:hover{
    background: #ef1366;
    color: #000;
}

/* Pages */
.content{
    width: 757px;
    height: 316px;
    position: absolute;
    top: 43px;
    left: 25px;
}
h2{
    font-size: 32px;
    font-weight: 400;
    text-decoration:none;
    color:#FFF;
    margin: 0 0 10px;
}
.column{
    display: inline-block;
    float: left;
}
#pages .meustrabalhos .content li{
    list-style: disc inside;
    padding: 2px 0 2px 10px;
}
#pages .meustrabalhos .content li a{
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    padding: 5px 10px 5px 5px;;
    z-index: 10;
    font-weight: 300;
}
#pages .meustrabalhos .content .more li a{
    color: #076dc3;
}
#pages .meustrabalhos .content li.tit{
    font-weight: 700;
    font-size: 15px;
    list-style: none;
    color: #000;
}
#pages .meustrabalhos .content li a:hover,
#pages .meustrabalhos .content li a.active{
    color: #fff;
    z-index: 20;
    background: #000;
    -moz-border-radius: 0 5px 5px 0;
}
#pages .meustrabalhos .content li a strong{
    font-size: 15px;
    font-weight: 400;
    color: #fff;
}