/* ------------------------------------------- General  ----------------------------------------- */
html,body{
    margin:0;
    height:100%;
    font-family:sans-serif;
}

div{
    margin:0;
    padding:0;
}

#wrapper{
    width:100%;
    height:100%;
}

/*  -------------------------------- General -> Scrollbar --------------------------------------- */
::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-button:start:decrement{
    display:none;
}

::webkit-scrollbar-button:end:increment{
    display:none;
}

::-webkit-scrollbar-track-piece{
    -webkit-border-radius:0px;
}

::-webkit-scrollbar-thumb:vertical{
    height:50px;
    background-color:#ccc;
    border:0px;
    -webkit-border-radius:10px;
}

::-webkit-scrollbar-thumb:vertical:hover{
    background-color:#999;
}

/* ---------------------------------- GENERAL -> Button ----------------------------------------- */

.button
{
    display: inline-block;
    min-width: 54px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
    color: #999;
    font-size: 80%;
    font-weight: bold;
    height: 27px;
    padding: 0 8px;
    line-height: 27px;
    -webkit-border-radius: 2px;
    -webkit-transition: all 0.218s;
    background-color: whiteSmoke;
    background-image: -webkit-linear-gradient(top,whiteSmoke,#F1F1F1);
    float:right;
    display:inline-block;
    text-decoration:none;
}

.button:hover{
    box-shadow:0px 0px 20px #ccc;
    color: #333;
}

/* --------------------------------------   HEADER  --------------------------------------------- */

#header{
    height:70px;
    background-image:url('../img/logo.png');
    background-color:#F7F7F7;
    border-bottom: 1px solid #E5E5E5;
    background-repeat:no-repeat;
    padding-left:290px;
}

#header > input, #header > select {
    font-size:138%;
    margin-top:20px;
    width:500px;
}

#header > div{
    display:inline;
}

/* -------------------------------- HEADER -> Toolbar Buttons ----------------------------------- */

.buttonfinal{
    -webkit-border-radius: 0px 2px 2px 0px;
    margin:20px;
    margin-left:0px;
}

.buttonmiddle{
    -webkit-border-radius: 0px 0px 0px 0px;
    margin:20px;
    margin-left:0px;
    margin-right:0px;
    border-right-color: transparent;
}

.buttonbegin{
    -webkit-border-radius: 2px 0 0 2px;
    margin:20px;
    margin-right:0px;
    border-right-color: transparent;
}

/* ------------------------------------------------- NAV ---------------------------------------- */

#nav{
    width:300px;
    float:left;
    background-color:white;
    border-right: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    overflow:auto;
    position:absolute;
}

#nav > div{
    margin-left:auto;
    margin-right:auto;
    width:90%;
    margin-top:10px;
    margin-bottom:10px;
    overflow:auto;
    border:1px solid #E5E5E5;
    -webkit-transition: all 0.218s;
    -webkit-border-radius:5px;
}

#nav > div:hover{
    box-shadow:0px 0px 20px #ccc;
    background-color:#F7F7F7;
}


/* ------------------------------------- NAV -> LANGUAGE SELECTOR --------------------------------*/

#nav > #language_selector{

}

#nav > #language_selector > select{
    width:100%;
    border:none;
    color:blue;
}

/* ------------------------------- NAV -> TYPE SELECTOR ----------------------------------------- */

#nav > #type_selector {
    font-size:85%;
    max-height:100px;
}

#nav > #type_selector > .type{
    font-weight:normal;
    color:blue;
    padding:2px;
    padding-left:4px;
    -webkit-border-radius: 5px;
}

#nav > #type_selector > .type:hover{
    background-color:#F3F7fD;
    cursor:pointer;
}

#nav > #type_selector > .typeSelected{
    background-color:#EBF2FC;
    font-weight:bold;
}

#nav > #type_selector > .typeSelected:hover{
    background-color:#EBF2FC;
    cursor:pointer;
}

/* ------------------------------------------ NAV -> RESULTS ------------------------------------ */

#nav > #results{
    max-height:100%;
    /*margin: 0 auto -100px;*/
    position:initial;
    height:500px;
    font-size:70%;
}

#nav > #results > div > label{
    width:100%;
}

/* ----------------------------------- NAV -> DRAWED -------------------------------------------- */

#nav > #drawed{
    height:400px;
}

/* ----------------------------------------- MAP CANVAS ----------------------------------------- */

#map_canvas{
    width:100%;
    margin-left:301px;
    background-color:white;
    border-bottom: 1px solid #E5E5E5;
}

/* --------------------------------------------- FOOTER ----------------------------------------- */

#footer{
    height:35px;
    background-color:#F7F7F7;
    color: #666;
}

#footer > #copy{
    font-size:70%;
    padding:10px;
    float:right;
}