/** HEADER.CSS REPLACE AT UPLOAD **/
@import url(http://fonts.googleapis.com/css?family=Lato:300);

#header{
    width:100%;
    height:50px;
    background-color:rgba(255,255,255,0.7);
    box-shadow:0 0 0 1px rgba(100,100,100,0.1);
    font-family:'Lato', Helvetica, Arial, sans-serif;
    color:#000;
    position:relative;
    z-index:999;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
}

#headerCircle{
    height:14px;
    width:14px;
    position:absolute;
    top:18px;
    left:27px;
    border-radius:16px;
    border:1px solid black;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
}

#headerTitle{
    height:50px;
    line-height:50px;
    font-size:14pt;
    margin:0 5px 0 55px;
    display:inline-block;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
}

.menuItem{
    display:inline-block;
    padding:0 15px;
    color:#000;
    font-size:12pt;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
}

#menu{
    display:inline-block;
    margin-left:30px;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
}

#menu a{
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
}
/***************************************************/

html{height:100%}

body{
    margin:0;
    padding:0;
    background:rgba(185, 255, 255, 0.3);
    font-family:"Lato", Helvetica, Arial, sans-serif;
    font-weight:300;
    height:100%;
}

#planner{
    background-color:rgba(255,255,255,0.7);
    box-shadow:0 0 0 1px rgba(100,100,100,0.1);
    position:absolute;
    top:75px;
    left:25px;
    padding:15px;
    border-radius:5px;
}

.input-area{
    margin:10px;
}

.label{
    display:inline-block;
    width:100px;
    height:30px;
    line-height:30px;
}

#datetime-label{
    display:inline-block;
    width:100px;
    height:30px;
    line-height:30px;
}

.input-container{
    display:inline-block;
    box-shadow:0 0 1px rgba(100,100,100,0.4);
    padding-right:5px;
}

.destination{
    outline:none;
    border:none;
    padding:0;
    background:none;
    vertical-align:middle;
    font-family:"Lato", Helvetica, Arial, sans-serif;
    font-size:12pt;
    display:inline-block;
    height:30px;
    line-height:30px;
    margin-left:5px;
    width:280px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
    .datenation{width:100px}
    .timenation{width:70px}
    .timepickernation{
        width:30px;
        box-shadow:0 0 1px rgba(100,100,100,0.4);
        text-align:center;
        margin:0;
    }

.input-image{
    display:inline-block;
    height:20px;
    width:20px;
    margin-left:10px;
    vertical-align:middle;
}

.lexico-container{
    background:#FFF;
    position:absolute;
    max-height:400px;
    overflow:auto;
    box-shadow:0 0 1px rgba(100,100,100,0.4);
    left:153px;
    z-index:99;
    outline:none;
}

#depart-lexico-container{
    top:133px;
}

#arrive-lexico-container{
    top:175px;
}

.lexico-item{
    height:40px;
    line-height:40px;
    border-bottom:1px solid rgba(100,100,100,0.2);
    padding-left:5px;
    padding-right:20px;
    cursor:pointer;
}

.lexico-item:hover, #calendar-table tbody .day td:hover, .date-advance:hover{
    background:rgba(255,231,231,0.5);
    transition:0.05s;
}

.lexico-noresults{ color:rgba(100,100,100,0.4) }

#journey-container{
    position:relative;
    height:calc(100% - 285px);
    margin-top:145px;
}

#journey{
    position:absolute;
    top:50%;
    margin-top:-40px;
    margin-left:100px;
}

.journey-object{
    width:80px;
    height:80px;
    border-radius:80px;
    -webkit-animation:pop 0.5s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:cubic-bezier(0.55, 0.09, 0.68, 0.53);
    -webkit-transform:scale(0,0);
    display:inline-block;
    background-size:40px;
    background-position:center;
    background-repeat:no-repeat;
    margin-left:-5px;
    position:relative;
    z-index:2;
}

    .journey-destination{
        background-color:#5BD14B;
        background-image:url('assets/check.png');
    }
    .journey-public_transport{
        background-color:#DB4453;
        background-image:url('assets/train.png');
    }
    .journey-transfer{
        background-color:#F6CC33;
        background-image:url('assets/stick2.png');
    }
    .journey-waiting{
        background-color:#5681FF;
        background-image:url('assets/waiting.png');
    }
    .journey-crow_fly{
        background-color:#F6CC33;
        background-image:url('assets/stick2.png');
    }

    @-webkit-keyframes pop{
        0%{-webkit-transform:scale(0,0)}
        85%{-webkit-transform:scale(1.2,1.2)}
        100%{-webkit-transform:scale(1,1)}
    }

    .journey-object-leave{
        -webkit-animation:imap 0.5s;
        -webkit-animation-fill-mode:forwards;
        -webkit-animation-timing-function:cubic-bezier(0.55, 0.09, 0.68, 0.53);
        -webkit-transform:scale(1,1);
    }

    @-webkit-keyframes imap{
        0%{-webkit-transform:scale(1,1)}
        15%{-webkit-transform:scale(1.2,1.2)}
        100%{-webkit-transform:scale(0,0)}
    }

.journey-trail{
    height:30px;
    background-size:30px;
    display:inline-block;
    vertical-align:25px;
    margin-left:-5px;
    -webkit-animation:fadeIn 0.5s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:cubic-bezier(0.55, 0.09, 0.68, 0.53);
    -webkit-transform:scale(0,0);
}

    .journey-trail-public_transport{background-image:url('assets/track.png');}
    .journey-trail-waiting{background-image:url('assets/dash.png');}
    .journey-trail-transfer{background-image:url('assets/prints.png');}
    .journey-trail-crow_fly{background-image:url('assets/prints.png');}

    @-webkit-keyframes fadeIn{
        0%{-webkit-transform:scale(0.95,0.95);opacity:0;}
        85%{-webkit-transform:scale(1.05,1.05);}
        100%{-webkit-transform:scale(1,1);opacity:1;}
    }
    @-webkit-keyframes fadeOut{
        0%{-webkit-transform:scale(1,1);opacity:1;}
        15%{-webkit-transform:scale(1.05,1.05);}
        100%{-webkit-transform:scale(0.95,0.95);opacity:0;}
    }

.journey-top-tidbit{
    margin-left:-100px;
    vertical-align:90px;
    width:81px;
    padding-left:19px;
    text-align:center;
    display:inline-block;
    -webkit-animation:fadeIn 0.5s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:cubic-bezier(0.55, 0.09, 0.68, 0.53);
    -webkit-transform:scale(0,0);
}
.journey-bottom-tidbit{
    margin-left:-100px;
    vertical-align:-90px;
    width:81px;
    padding-left:19px;
    text-align:center;
    display:inline-block;
    -webkit-animation:fadeIn 0.5s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:cubic-bezier(0.55, 0.09, 0.68, 0.53);
    -webkit-transform:scale(0,0);
}
    .journey-tidbit-public_transport{color:#DB4453}
    .journey-tidbit-waiting{color:#5681FF}
    .journey-tidbit-transfer{color:#F6CC33}
    .journey-tidbit-crow_fly{color:#F6CC33}
    .journey-tidbit-destination{color:#5BD14B}

    .journey-trail-leave{
        -webkit-animation:fadeOut 0.5s;
        -webkit-animation-fill-mode:forwards;
        -webkit-animation-timing-function:cubic-bezier(0.55, 0.09, 0.68, 0.53);
        -webkit-transform:scale(1,1);
    }

.button {
    background:rgba(100,100,100,0.2);
    border-radius:5px;
    padding:10px 0;
    text-align:center;
    width:150px;
    color:#FFF;
    font-size:10pt;
    cursor:default;
    transition:0.3s;
}

#calculate{
    display:inline-block;
}

#calculate-loader{
    vertical-align:middle;
    margin-left:10px;
    opacity:0;
    transition:0.3s;
}

#no-journey{
    display:inline-block;
    opacity:0;
    color:#DB4453;
    cursor:default;
    margin-left:5px;
    transition:0.5s;
}

#calendar-container{
    background:#FFF;
    position:absolute;
    box-shadow:0 0 1px rgba(100,100,100,0.4);
    top:216px;
    left:153px;
    z-index:99;
    display:none;
    outline:none;
}

#calendar-table, #timepicker-table{
    border-collapse:collapse;
    text-align:center;
    table-layout:fixed;
}

#calendar-table tbody tr td{
    width:30px;
    height:30px;
    line-height:30px;
    cursor:pointer;
}

#calendar-dates-container tr td{ border:1px solid rgba(100,100,100,0.2) }

.greyed-out{
    color:rgba(100,100,100,0.5);
}

.date-advance{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor:pointer;
}
#date-input-container{
    margin-right:20px;
}

#timepicker-container{
    background:#FFF;
    position:absolute;
    box-shadow:0 0 1px rgba(100,100,100,0.4);
    top:216px;
    left:319px;
    z-index:99;
    display:none;
    outline:none;
}

#timepicker-table tbody tr td{
    width:40px;
    height:30px;
    line-height:30px;
}

#journey-info {
    height:182px;
    width:calc(100% - 580px);
    padding:15px;
    position:absolute;
    top:75px;
    left:550px;
    opacity:0;
    transition:0.5s;
}

#journey-title{
    font-size:20pt;
    font-weight:400;
}

#journey-duration:before{
    content:"This journey will take approximately ";
    color:rgba(100,100,100,0.6);
}

#journey-duration{
    padding:10px 0;
}