/* sets only layout-specific CSS rules i.e. no borders, colors and changes to 
   margins and paddings are to be avoided. Just positional rules. */

body {
    padding: 0;
    margin: 0;
}

body>table {
    width: 100%;
    border-collapse: collapse;
}

#leftPane {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 270px;
    /* border-right: 1px solid gray; */
}

#rightPane {
    position: absolute;
    top: 5px;
    left: 271px;
    right: 0;
    bottom: 0;
}

td {
    padding: 0;
    margin: 0;
    vertical-align: top;
}

#mainPanel {

}

#brandingPanel {
    padding: 5px;
    border: 1px solid gray;
    margin-bottom: 5px;
}

#inputPanel {
}

#actionTabbedPane {

}

#showStreetCheckBox, 
#showCityCheckBox, 
#showStateCheckBox,
#showAbsTimeCheckBox,
#showAbsDistanceCheckBox,
#showRelTimeCheckBox,
#showRelDistanceCheckBox {
    display: block;
}

#displayPane {}

#waypointPane {
    margin-top: 5px;
}

#routeSummary {
    padding: 5px;
    border: 1px solid gray;
    margin-top: 5px;
}

#routeToolBar {
    padding: 5px;
    border: 1px solid gray;
    margin-top: 5px;
}

#routeToolBar .Button {
    display: block;
}

#routeToolBar .Button input {
    width: 100%;
}
    
#leftPaneContent {
    padding: 5px;
}

#linkPane {
    padding: 5px;
    margin-top: 5px;
}

#displayStackPane {
    height: 95%;
}

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

#displayActionsPane {

}

#aboutPane {
    width: 450px;
    margin: auto;
    padding: 30px;
}

#aboutPane, #aboutPane * {
    font-size: 14px;
}

.destinationLabel {
    margin-left: 5px;
    padding: 2px;
    color: black;
    background-color: rgb(225,225,225);
    border: 1px solid black;
    opacity: 0.7;
}