@CHARSET "UTF-8";

.itineraire-box {

}

.itineraire-main {

}

.itineraire_bg {
    background: url("../images/itineraire_bg.png") no-repeat scroll center center transparent;
}

.iti_cadre {
    border: solid 1px #CCCCCC;
    border-radius: 4px;
    padding: 5px;
    background: #f4f0f0; /* Old browsers */
    background: -moz-linear-gradient(top, #f4f0f0 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f0f0), color-stop(100%, #ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f4f0f0 0%, #ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f4f0f0 0%, #ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f4f0f0 0%, #ffffff 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f4f0f0 0%, #ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#f4f0f0', endColorstr = '#ffffff', GradientType = 0); /* IE6-9 */
}

.itineraire-box .title {
    font-size: 2.0em;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.iti_table {
    width: 100%
}

.iti_transport {
    display: inline-block;
    font-size: 1.2em;
    font-weight: bold;
    margin-left: 5px;
    vertical-align: middle;
}

.itiUglyDate {
    display: none;
}

.iti_transport_logo {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    width: 26px;
}

#itiResult {
    display: none;
}

.iti_block {
    display: inline-table;
    width: 49%;
}

.iti_block_mobile {
    min-width: 100% !important;
}

.iti_block > * {
    margin-bottom: 10px;
    margin-top: 10px;
}

.iti_table_row {
    display: table-row;
}

.iti_table_cell {
    display: table-cell;
    width: 50%;
    padding: 5px 5px 5px 0;
}

.iti_title {
    text-transform: uppercase;
    font-size: 1.5em;
    color: #E2001A;
    margin-bottom: 10px;
}

.iti_title > div {
    display: inline;
}

.iti_type {
    font-weight: bold;
}

.iti_address {
    min-height: 30px;
    max-width: 320px;
}

.iti_address>* {
    width: 90%;
}

.iti_address > * > * {
    width: 90%;
}


.iti_address_mobile {
    max-width: none;
}

.iti_address_mobile > * {
    width: 100% !important;
}

.iti_address_mobile > * > * {
    width: 100%;
}

.iti_dateandtime {
    display:inline-block;
    margin-top: 10px;
    max-width: 295px;
}

.iti_dateandtime_mobile {
    max-width: none;
    display:block;
}

.iti_numbercombo {
    width: 80px !important;
    display: inline;
}

.iti_numbercombo_mobile {
    display: inline-block;
    width: 125px !important;
}

.iti_poscombo {
    width: 100px !important;
    display: inline;
}

.iti_poscombo_mobile {
    display: inline-block;
    width: 150px !important;
}

#itiError {
    color: red;
    text-align: center;
}

.iti_date {
    margin-top: 5px;
}

.iti_date_mobile {
    width: 100% !important;
}

.iti_time {
    margin: 5px 0;
}

.iti_time>* {
    margin-right: 5px;
}

.iti_flag {
    display: inline;
    vertical-align: middle;
}

.iti_button {
    text-align: right;
}

#itiTripResults {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    display: inline-block;
    width: 100%;
    margin-top: 30px;
}
.trip_row {
    border-bottom: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    height: 65px;

    background: #efefef; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmZWZlZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  #efefef 0%, #ffffff 29%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(29%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #efefef 0%,#ffffff 29%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #efefef 0%,#ffffff 29%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #efefef 0%,#ffffff 29%); /* IE10+ */
    background: linear-gradient(to bottom,  #efefef 0%,#ffffff 29%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}

div.trip_other_download {
    background-image : url('../images/download.png');
    background-position : 6px center;
    background-repeat: no-repeat;
    min-height: 17px;
    padding-left: 26px;
    cursor: pointer;
}



#itiMainPlan {
    page-break-before: always;
    border-radius: 0 0 4px 4px;
}

div.trip_other_download:hover {
    background-image : url('../images/download_hover.png');
}

div.trip_other_print {
    background-image: url('../images/print.png');
    background-position : 3px center;
    background-repeat: no-repeat;
    min-height: 17px;
    padding-left: 26px;
    cursor: pointer;
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

div.trip_other_print:hover {
    background-image: url('../images/print_hover.png');
}

div.trip_other_download > p, div.trip_other_print > p {
    padding-top: 6px;
    font-size: 0.8em;
}

.trip_row>* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-right: 1px solid #CCCCCC;
    display: inline-block;
    height: 100%;
    min-width: 10px;
    padding: 5px;
    vertical-align: middle;
}

.trip_row_selected {
    background: #DDDDDD;
}

.itifst_col {
    min-width: 90px;
    width: 15%;
}

.trip_nb {
    background-color: #E7E8E8;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    cursor:pointer;
}

/*.trip_nb:hover{
	background-color: #3D3D3D;
	color: #FFFFFF;
}*/

.trip_nb_selected {
    background-color: #3D3D3D;
    color: #FFFFFF;
}

.trip_nb_title {
    font-size: 0.9em;
}

.trib_nb_value {
    font-size: 1.5em;
}

.trip_time {
    width: 31%;
}

.trip_time > * {
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
}

.trip_sch_title {
    text-transform: uppercase;
    color: #E2001A;
    font-size: 0.8em;
}

.trip_sch_time {
    font-size: 1.6em;
}

.trip_other {
    border-right: medium none;
    min-width: 109px;
    padding: 0;
    width: 23%;
}

.trip_other > div {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.trip_other_block
{
    width: 77%;

}

.trip_other > .trip_other_block
{
    display: inline-table;
}

.trip_other_block > * {
    height: 50%;
}
.trip_other_block > *:hover {
    background-color: #3D3D3D;
    color: #FFFFFF;
}

.trip_other_click {
    background: url("../images/arrow.png") no-repeat center;
    width: 22%;
    border-left: 1px solid #CCCCCC;
    cursor:pointer;
}

/*.trip_other_click:hover {
	background: #3D3D3D url("../images/arrow_hover.png") no-repeat center;
	border-left: 1px solid #CCCCCC;
}*/

.trip_other_click_selected{
    background: #3D3D3D url("../images/arrow_hover.png") no-repeat center;
    border-left: 1px solid #CCCCCC;
}

.trip_other_click_opened{
    background: #3D3D3D url("../images/arrow_selected.png") no-repeat center;
    border-left: 1px solid #CCCCCC;
}

/*.trip_other_click_opened:hover {
	background: #3D3D3D url("../images/arrow_selected.png") no-repeat center;
	border-left: 1px solid #CCCCCC;
}*/


#itiMainPlan {
    border: 1px solid #CCCCCC;
    height: 500px;
}

.detailedtrip {
    display: table;
    background-color: #FFFFFF;
    width: 100%;
}
.detailedtrip > div {
    display: table-row;
    width: 100%;
    padding: 5px;
    height: 48px;
}

.detailedtrip > div > * {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-right: 1px solid #CCCCCC;
    display: table-cell;
    padding: 3px;
    vertical-align: middle;
    text-align: center;
}


.detailedtrip > div > .itifst_col {
    text-align: left;
}

.iti_maincol {
    width: 71%;
    padding: 0 !important;
}

.iti_triptable {
    display: table;
    width: 100%;
    height: 100%;
}

.iti_triptable_header {
    height: 30px !important;
    text-transform: uppercase;
}

.iti_triptable_header * {
    font-size: 1em !important;
    font-weight: normal !important;
}

.iti_triptable_header > div {
    padding: 3px;
}

.iti_triptable>div {
    display: table-row;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #CCCCCC;
}

.iti_triptable > div >div {
    display: table-cell;
    border-right: 1px solid #CCCCCC;
    vertical-align: middle;
    padding: 5px;
}

.iti_lastline {
    border-bottom: none !important;
}

.iti_depl {
    width: 85%;
    text-align: left;
}

.iti_hour {
    width: 15%;
    border-right: none !important;
    font-weight: bold;
    min-width: 46px;
    font-size: 1.1em;
}

.iti_duree {
    width: 15%;
    border-right: none !important;
    font-size: 1.2em;
    font-weight: bold;
}

.pair {
    background-color: #F6F3F3;
}

#itiSummary {
    padding: 5px;
}

#itiSummary_title {
    font-size: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
}

#itiSummary_date {
    margin-bottom: 5px;
    margin-top: 5px;
}

#itiSummary_date > div {
    display: inline-block;
    margin-right: 5px;
    font-weight: bold;
}

#itiSummary_hour {
    color: #5F5656;
}

#itiSummary_Value {
    margin-top: 25px;
}

#itiSummary_Value > div {
    display: inline-block;
    width: 49%;
    vertical-align: top;
}

.iti_modifydate {
    color: #5F5656;
    cursor: pointer;
    font-size: 0.7em;
    font-weight: bold;
    margin-left: 30px;
}

.itiSummary_valuetitle > * {
    display: inline-block;
    vertical-align: middle;
}

.itiSummary_valuetitle > div {
    color: #E2001A;
    font-size: 1.4em;
    font-weight: bold;
    text-transform: uppercase;
}

.iti_stopName {
    font-style: italic;
    font-weight: bold;
    text-transform: uppercase;
}

.iti_stopCity {
    font-size: 0.7em;
    font-style: italic;
}


/*
 * Boutons de raccourcis en dessous de la map.
 * Finalement, avec cette nouvelle version, je pourrais faire le hover, mais Ã§a demande du temps. Dommage
 */

#itiRaccourcis {
    background-image: url("../images/background.png");
    background-repeat: repeat-x;
    border: 1px solid #CCCCCC;
    border-radius: 4px 4px 4px 4px;
    margin: 30px auto 0;
    padding: 0 5px;
    text-align: center;
    width: 640px;
}

#itiRaccourcis > a {
    display: inline-block;
    width: 90px;
    height: 90px;
    cursor: pointer;
    text-align: center;
    vertical-align: top;
}

#itiRaccourcis > a + a {
    border-left: 1px solid #CCCCCC;
}

#itiRaccourcis > a > p {
    display: block;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    margin-top: -40px;
    max-width: 80px;
    text-align: center;
}


/*
 * Code Couleur des lignes, d'aprÃ¨s les donnÃ©es d'OpenData
 * background au couleur de la ligne,
 * couleur noir/blanc, en fonction du background (cf OpenData)
 * un peu de padding, pour les bords
 */

span.TRAMWAYA {
    background-color: #E10D19;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.TRAMWAYB {
    background-color: #009ee0;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.TRAMWAYC {
    background-color: #F29400;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.TRAMWAYD {
    background-color: #009933;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.TRAMWAYE {
    background-color: #9085ba;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.TRAMWAYF {
    background-color: #97BF0D;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.BUS2 {
    background-color: #E10D19;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.BUS4 {
    background-color: #CF0D1C;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.BUS6 {
    background-color: #80589C;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.BUS7 {
    background-color: #009036;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.BUS10, span.BUS70 {
    background-color: #F8B705;
    font-weight: bold;
    color: #000000;
    padding: 1px 2px;
}

span.BUS12, span.BUS22, span.BUS14, span.BUS24, span.BUS15a, span.BUS71 {
    background-color: #89CDD1;
    font-weight: bold;
    color: #000000;
    padding: 1px 2px;
}

span.BUSL1 {
    background-color: #084796;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.BUS13, span.BUS19, span.BUS31, span.BUS17, span.BUS72 {
    background-color: #F3C6DB;
    font-weight: bold;
    color: #000000;
    padding: 1px 2px;
}

span.BUS62 {
    background-color: #BDD753;
    font-weight: bold;
    color: #000000;
    padding: 1px 2px;
}

span.BUS27 {
    background-color: #9FC20F;
    font-weight: bold;
    color: #000000;
    padding: 1px 2px;
}

span.BUS29 {
    background-color: #009035;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.BUS40, span.BUS50, span.BUS30 {
    background-color: #FFDC08;
    font-weight: bold;
    color: #000000;
    padding: 1px 2px;
}

span.BUS57 {
    background-color: #EC7007;
    font-weight: bold;
    color: #000000;
    padding: 1px 2px;
}

span.BUS63 {
    background-color: #7DBBDF;
    font-weight: bold;
    color: #000000;
    padding: 1px 2px;
}

span.BUS67 {
    background-color: #6DB122;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.BUSHoltzheim, span.BUSEntzheim, span.BUSRobertsau, span.BUSKolbsheim {
    background-color: #D0AACC;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.BUSG {
    background-color: #004494;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.BUSN1 {
    background-color: #E72E58;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.BUSN2 {
    background-color: #178FCB;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.BUSN3 {
    background-color: #EDAA1D;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.BUS87, span.BUS88, span.BUS89, span.BUS55 {
    background-color: #808080;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.COACH260 {
    background-color: #E53138;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}

span.COACH270 {
    background-color: #6AB023;
    font-weight: bold;
    color: #000000;
    padding: 1px 2px;
}

span.COACH257 {
    background-color: #F5A42E;
    font-weight: bold;
    color: #000000;
    padding: 1px 2px;
}

span.LOCAL_TRAIN {
    background-color: #808080;
    font-weight: bold;
    color: #FFFFFF;
    padding: 1px 2px;
}


#itiMainPlanTitle
{
    height: 30px;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    text-transform: uppercase;
    background-color: #E7E8E8;
    border-radius: 4px 4px 0 0;
    background-image : url('../images/icon_plan.png');
    background-position : 10px center;
    background-repeat: no-repeat;
    background-size: 25px auto;
    margin-top: 30px;

}

#itiMainPlanTitle > div
{
    padding-left: 45px;
    margin-top: 7px;
}

.trib_nb_time{
    text-transform: lowercase!important;
    font-size: 10px;
}

.iti_message_warn > span p {
    background-color: #fbf3c1;
    border-color: #f9e1a9;
    color: #a0601f;
    padding:10px;
}

.iti_message_warn {
    max-width: 259px;
}

.iti_message_warn_mobile > span p {

}

.iti_message_warn_mobile {

}

.iti_calculmode {

}

.iti_transportmode {
    margin-top:5px;
}

.iti_transportmode li {
    display:inline-block;
}

.iti_calculmode_mobile {

}

.iti_transportmode_mobile {

}

.itiTransportIcon {

}

.iti_options {
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
    margin-left: 46px;
}

.iti_options_mobile {
    display:block;
    margin-left:0;
    text-align: center;
}

#itiSummary_calculmode,
#itiSummary_transportmode {
    border-left: 1px solid gray;
    font-weight: normal;
    padding-left: 8px;
}