/* @import url(http://fonts.googleapis.com/css?family=Dosis); */

html {
    height: 100%;
}
body {
    background: black;
    margin: 0;
    font-family: 'Dosis', Verdana;
    font-size: 10px;
}
p {
    width: 350px;
    margin: 40px auto;
    color: white;
    text-align: center;
}
a {
    text-decoration: none;
}
button {
    cursor: pointer;
}
#big_daddy {
    background: url("../img/bg.jpg") no-repeat 0 -10px;
    width: 1200px;
    margin: 0 auto;
    text-align: center;
}

#container, #networks {
    height: 100%;
    width: 900px;
    margin: 0 auto;
    text-align: center;
    padding-top: 25px;
    margin-bottom: 20px;
}

#networks {
    width: 237px;
    height: 65px;
    padding: 0px;
    background: url("../img/08.png") no-repeat 0 28px;
    background-size: 237px 38px;
    overflow: hidden;
    text-align: left;
    position: relative;
}
#networks article {
    margin: 0 auto;
    margin-top: 10px;
    text-align: center;
}
#networks div {
    display: inline-block;
    background: url("../img/00.png") no-repeat -4px 36px;
    margin: 0 1px;
    background-size: 115%;
}
#networks div.over {
    background: none;
}
#networks div.shadow {
    background: none;
    position: relative;
    top: -7px;
    left: -1px;
    z-index: 2;
}
#menu, #contact_form {
    height: 100%;
    width: 600px;
    margin: 0 auto;
    text-align: center;
}
#contact_form {
    width: 500px;
    text-align: left;
}
.text {
    background: white;
    border-radius: 5px;
    padding: 2px 5px;
    height: 22px;
    position: relative;
    margin-top: 10px;
}
.text label {
    width: 100px; 
    display: inline-block
}
.text input, .text textarea {
    border: 1px solid #0D56A6;
    background: #000020;
    position: absolute;
    height: 18px;
    color: white;
    border-radius: 5px;
    width: 387px;
}
.text.area {
    height: 155px;
}
.text textarea {
    margin-top: 4px;
    height: 115px;
    width: 485px;
    resize: none; 
    position: relative;
}
form #b_submit {
    margin-top: 10px; 
    color: #04275C; 
    border-radius: 10px; 
    border: 1px solid; 
    background: white;
    padding-top: 4px;
}
form #b_submit:hover {
    color: blue;
}
form #b_sending {
    margin-top: 10px; 
    color: #000020; 
    border-radius: 10px; 
    border: 1px solid; 
    background: #000020;
    padding-top: 4px;
    display: none;
}
#contact_me {
    overflow: hidden;
    float: left; 
    width: 335px;
    opacity: 0;
    visibility: hidden;
}
#contact_me.shown, #about_me.shown {
    margin-bottom: 50px;
    width: 600px;
    opacity: 1;
    visibility: visible;
}
#contact_me.small {
    width: 10px;
}

#menu img {
    opacity: 0.9;
    margin: 0 3px;
}
#menu a:hover img {
    opacity: 1;
}
#menu #home_link {
    display: none;
}

#about_me {
    overflow: hidden;
    float: right; 
    opacity: 0;
    visibility: hidden;
    width: 10px;
}
#about_me.shown {
    margin-right: 50px;
}
#about_box {
    height: 316px;
    background: #000020;
    border: 3px solid white;
    border-radius: 10px;
    padding: 5px;
}
#about_box div {
    overflow-y: scroll; 
    overflow-x: hidden;
    height: 315px;
    padding-top: 5px;
}

/* Efectos */
#networks div img,
#contact_me, #about_me {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
    border: none;
}
#networks div a:hover > img {
    -webkit-transform: translate(0,-10px);
    -moz-transform: translate(0,-10px);
    -o-transform: translate(0,-10px);
    -ms-transform: translate(0,-10px);
    transform: translate(0,-10px);
}
#networks div a:hover + br + div img {
    -webkit-transform: translate(0,10px);
    -moz-transform: translate(0,10px);
    -o-transform: translate(0,10px);
    -ms-transform: translate(0,10px);
    transform: translate(0,10px);
}

/* Estilos scroll */
::-webkit-scrollbar {
    width: 7px;
}
::-webkit-scrollbar-track {
    background: #000020;
    margin: 5px;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 5px;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb:hover {
    background: #AAA;
}
::-webkit-scrollbar-thumb:active {
    background: #888;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}