/* RESET */
*{padding:0; margin:0; outline:0;}

html, body{
    height:100%;
}
body{
    width:100%;
}

/* BOX ALL */
#box_all{
    width:80%;
    margin:0 auto;
}
* html #box_all{
    height:100%;
}



/* CLASSES */
/* CLASSE PARA COLOCAR SOMBRA E BORDA ARREDONDADA */
.box-radius-shadow{
    -o-border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow:  0px 0px 5px #C3C3C3;
    -o-box-shadow:  0px 0px 5px #C3C3C3;
    -webkit-box-shadow:  0px 0px 5px #C3C3C3;
    -moz-box-shadow:  0px 0px 5px #C3C3C3;
}
.box-radius-shadow:hover{
    box-shadow:  0px 0px 5px #595959;
    -o-box-shadow:  0px 0px 5px #595959;
    -webkit-box-shadow:  0px 0px 5px #595959;
    -moz-box-shadow:  0px 0px 5px #595959;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

/* UTILIZAR ESSA CLASSE PARA TODOS OS SPANS */
.span{
    font-family:Verdana;
    font-size:0.8em;
    letter-spacing: 2px;
}

/* TAMANHO DA CAIXA DA URL/DADOS E RESPOSTA */
.caixa{
    width:100%;
    border:1px solid #C7C7C7;
    font-size: 14px;
}

/* TODOS OS BOTÕES */
.btn{
    font-size: 0.8em;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #cccccc;
    border-bottom-color: #b3b3b3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 5px 10px;
    font-family:Verdana;
}
.btn:hover{
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

/* == FIM CLASSE == */

/* BOX TOP */
#box_top{
    width:100%;
    height:100px;
}
#box_top h1{
    font-family:'Century Gothic';
    font-size:30px;
    color:#084482;
    font-weight:normal;
    padding:30px 0px 5px 30px;
    border-bottom:1px solid #c1c1c1;
}

/* BOX BOTÃO*/
#box_botao{
    width:100%;
    height:auto;
    margin:0 auto;
    padding-bottom:20px;
}

.btnJson{
    width:30%;
    height:auto;
    display: inline-block;
    margin:0 20px 10px 0;
    background-color:#F2F2F2;
}

.btnJson:hover {
    background-color:#2E2E2E;
    color:#fff;
}

/* BOX URL */
#box_url{
    width:100%;
    margin-top:20px;
}
.url{
    /*height:70px;*/
    background-color:#E4E4E4;
    font-family:Verdana, Arial;
    font-size:0.7em;
    letter-spacing:2px;
    padding:5px;
}

/* BOX DADOS */
#box_dados{
    width:100%;
    margin-top:20px;
}
.dados{
    height:300px;
    background-color:#F8F8F8;
    font-family:Verdana, Arial;
    font-size:0.8em;
    letter-spacing:2px;
    padding:5px;
}
.dados:focus{
    border:1px solid #83BAFE;
}

.btnEnviar{
    background-color:#084482;
    color:#fff;
    margin-top:10px;
    width:10%;
    height:40px;
}

/* BOX RESPSOTA */
.box_resposta{
    width:100%;
    margin:20px 0px;
    padding-bottom:10px;
}
.resposta{
    min-height:70px;
    height:auto;
    background-color:#F0F0F0;
    padding:5px;
}
.resposta pre{
    padding:10px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    white-space: pre-wrap;
    font-family:Verdana, Arial;
    font-size:0.8em;
    /*letter-spacing:1px;*/
    line-height:22px;
}