@import url('lib/css/reset.css');
@import url('lib/css/helpers.css');

@import url(http://fonts.googleapis.com/css?family=Droid+Serif:regular,bold);

body{
background:#000 url(img/bg.jpg) 50% top no-repeat;
font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;
font-size:1em;
}

h1,h2,h3,h4,h5,h6{
font-family:'Droid Serif', 'Times New Roman', 'Georgia', serif;
font-weight:700;
}

h1{font-size:4em;}
h2{font-size:2.2em;}
h3{font-size:1.8em;}
h4{font-size:1.6em;}
h5{font-size:1.4em;}
h6{font-size:1.2em;}

::selection {
    background: #333;
    color: #fff;
}

a,
a:visited{
color:#ffb71b;
text-decoration:none;
}

a:hover{
color:#c68d13;
}

#content{position:relative;}

object{
position:absolute;
top:-10px;
right:0;
}

#content p,
#hora-absurda li{
font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;
display:block;
background:#fff;
color:#555;
font-size:1.4em;
padding:0 20px 3px 3px;
margin:10px 0 0 0;
}

#content{
margin:10px auto 0;
width:856px;
}

#bg{
display:none;
}

#bg img{
position:absolute;
left:0;
min-width:936px;
opacity:.75;
top:0;
width:100%;
z-index:-1;
}

#branding{
//background:rgba(250, 250, 250, 1);
padding:.75em;
}

#branding h1 strong.rel{
background:#fff;
font-weight:700;
padding:0 20px 0 3px;
}

#branding h1{
transform:rotate(-1deg);
-moz-transform:rotate(-1deg);
-webkit-transform:rotate(-1deg);
}

#content img{
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
}

#branding img{
box-shadow:1px 1px 3px #999;
-moz-box-shadow:1px 1px 3px #999;
-webkit-box-shadow:1px 1px 3px #999;

transform:rotate(2deg);
-moz-transform:rotate(2deg);
-webkit-transform:rotate(2deg);
}

#branding div{width:580px;}

#branding .lineone{
padding:0 5px 1px 10px;
width:545px;
z-index:2;

-moz-transform:rotate(1deg);
-webkit-transform:rotate(1deg);
}

#branding .linetwo{
margin:4px 0 0;
padding:5px 3px 0;

box-shadow:1px 1px 4px #333;
-moz-box-shadow:1px 1px 4px #333;
-webkit-box-shadow:1px 1px 4px #333;
}

#branding .linethree{
margin:2px 0 0;
width:200px;
}

#branding .linetwo,
#branding .linethree{
z-index:1;

-moz-transform:rotate(-1deg);
-webkit-transform:rotate(-1deg);
}

#branding ul.social{
display:block;
list-style:none;
position:relative;
width:338px;
}

#branding ul.social img{
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;

border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
}

#branding ul.social li{
display:block;
float:left;
position:absolute;
height:48px;
margin:0 5px;
width:48px;
}

ul.social .fn a span{
background:#fff;

}

.fn.email{
top:-20px;
left:-10px;

transform:rotate(-1deg);
-moz-transform:rotate(-1deg);
-webkit-transform:rotate(-1deg);
}

.fn.myspace{
top:-20px;
left:58px;
transform:rotate(2deg);
-moz-transform:rotate(2deg);
-webkit-transform:rotate(2deg);
}

.fn.twitter{
top:-17px;
left:116px;

transform:rotate(-1deg);
-moz-transform:rotate(-1deg);
-webkit-transform:rotate(-1deg);
}

.fn.youtube{
top:-18px;
left:174px;

transform:rotate(-2deg);
-moz-transform:rotate(-2deg);
-webkit-transform:rotate(-2deg);
}

.fn.facebook span{visibility:hidden;}
.fn.orkut span{
position:absolute;
top:-10px;
left:19px;

transform:rotate(-1deg);
-moz-transform:rotate(-1deg);
-webkit-transform:rotate(-1deg);
}

.fn.orkut{
top:-16px;
left:232px;

transform:rotate(3deg);
-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
}

.fn.facebook{
top:-20px;
left:290px;

transform:rotate(-2deg);
-moz-transform:rotate(-2deg);
-webkit-transform:rotate(-2deg);
}

#hora-absurda{
margin-top:50px;
width:720px;
}

#hora-absurda img{
box-shadow:1px 1px 3px #555;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;

transform:rotate(-1deg);
-moz-transform:rotate(-1deg);
-webkit-transform:rotate(-1deg);
}

#hora-absurda .text{
width:400px;
}

#hora-absurda h2{
background:#fff;
font-size:1.9em;
padding:7px 0 0 20px;
margin-left:20px;
width:340px;

box-shadow:1px 1px 3px #777;
-moz-box-shadow:1px 1px 3px #777;
-webkit-box-shadow:1px 1px 3px #777;

transform:rotate(1deg);
-moz-transforma:rotate(1deg);
-webkit-transform:rotate(1deg);
}

#hora-absurda h2.h2two{
width:250px;
margin:5px 0 0 50px;

transform:rotate(-1deg);
-moz-transforma:rotate(-1deg);
-webkit-transform:rotate(-1deg);
}



#hora-absurda li{
display:block;
}

#hora-absurda ul li ul{
list-style-type:disc;
margin-left:15px;
}

#hora-absurda li h3{
font-size:1.4em;
}

#hora-absurda li ul li{
font-size:.6em;
}

#hora-absurda .lineone{
padding:0 2px 4px 2px;
width:230px;

transform:rotate(-1deg);
-moz-transforma:rotate(-1deg);
-webkit-transform:rotate(-1deg);
}

#hora-absurda .linetwo{
background:transparent;
margin:0 0 10px;
padding:5px 0 0 4px;
width:380px;
}

#hora-absurda h3{
background:#fff;
margin-top:5px;
}

#hora-absurda .linetwo li{
margin:4px;
}

#hora-absurda .linetwo li.linefour{
background:#fff;
width:310px;
}

#hora-absurda .linetwo li.two{
width:360px;
}

#hora-absurda .linetwo li.three{
width:340px;
}

#hora-absurda .linetwo li.four{
width:210px;
}

#hora-absurda .linethree{
background:transparent;
margin-top:2px;
padding:0 2px 4px 2px;
width:300px;

transform:rotate(-1deg);
-moz-transforma:rotate(-1deg);
-webkit-transform:rotate(-1deg);
}

#hora-absurda .linethree li{
margin-top:10px;
width:300px;

transform:rotate(1deg);
-moz-transforma:rotate(1deg);
-webkit-transform:rotate(1deg);
}

#hora-absurda .linefour{
background:transparent;
margin-top:0;
padding:0 2px 4px 2px;
width:365px;

transform:rotate(-1deg);
-moz-transforma:rotate(-1deg);
-webkit-transform:rotate(-1deg);
}

#hora-absurda .linefour li{
margin-top:5px;
width:200px;

transform:rotate(1deg);
-moz-transforma:rotate(1deg);
-webkit-transform:rotate(1deg);
}

#hora-absurda .linefive{
background:transparent;
margin-top:3px;
padding:0 2px 4px 2px;
width:370px;
}

#hora-absurda .linefive li{
margin-top:6px;
width:320px;

transform:rotate(1deg);
-moz-transforma:rotate(1deg);
-webkit-transform:rotate(1deg);
}

#hora-absurda .linesix{
margin:10px 0;
padding:5px 2px 0 2px;
width:450px;

transform:rotate(1deg);
-moz-transforma:rotate(1deg);
-webkit-transform:rotate(1deg);
}

#hora-absurda .lineseven{
margin-top:5px;
padding:0 2px 4px 2px;
width:380px;
}

#hora-absurda .lineeight{
margin-top:0;
padding:0 2px 4px 2px;
width:400px;

transform:rotate(1deg);
-moz-transforma:rotate(1deg);
-webkit-transform:rotate(1deg);
}

#ie #hora-absurda .lineone             {margin-left:0;}

#ie #hora-absurda .linetwo             {margin-left:5px;}
#ie #hora-absurda .linetwo li.linefour {margin-left:3px;}
#ie #hora-absurda .linetwo li.two      {margin-left:2px;}
#ie #hora-absurda .linetwo li.three    {margin-left:5px;}
#ie #hora-absurda .linetwo li.four     {margin-left:1px;}

#ie #hora-absurda .linethree           {margin-left:2px;}
#ie #hora-absurda .linethree li        {}

#ie #hora-absurda .linefour            {margin-left:4px;}
#ie #hora-absurda .linefour li         {}

#ie #hora-absurda .linefive            {margin-left:1px;}
#ie #hora-absurda .linefive li         {}

#ie #hora-absurda .linesix             {margin-left:5px;}
#ie #hora-absurda .lineseven           {margin-left:3px;}
#ie #hora-absurda .lineeight           {margin-left:7px;}

#poesias{
padding:40px 0 0 135px;
width:425px;
}

#poesias h2{
background:#fff;
width:650px;
margin-bottom: 20px;

transform:rotate(-2deg);
-moz-transforma:rotate(-2deg);
-webkit-transform:rotate(-2deg);
}

#poesias p{
width:310px;
}

#lancamento {
    display: none;
    
    width: 100%;
    height: 100%;
    
    position: fixed;
    top: 0;
    left: 0;
    
    background: rgba(0, 0, 0, .5);
}

#lancamento span {
    position: absolute;
    
    top: 10px;
    left: 50%;
    
    width: 550px;
    margin-left: -320px;
    
    text-align: center;
    
    background: #fff;
    
    transform:rotate(1deg);
    -moz-transforma:rotate(1deg);
    -webkit-transform:rotate(1deg);
}

#lancamento img {
    position: absolute;
    top: 50%;
    left: 50%;
    
    margin: -275px 0 0 -320px;
}