#Header {
    background:             #6D84A2 url('img/header_middle.png') repeat-x scroll 0 0;
    border-bottom:          1px solid #2D3642;
    color:                  #FFFFFF;
    font-size:              20px;
    font-weight:            bold;
    line-height:            20px;
    margin:                 0px;
    padding:                10px;
    text-align:             center;
    text-shadow:            rgba(0, 0, 0, .6) 0px -1px 0px;
    position:               absolute;
    top:                    0px;
    left:                   0px;
    min-height:             20px !important;
    height:                 20px !important;
    max-height:             20px !important;
    overflow:               hidden;
    width:                  300px;
}

body.landscape #Header {
    width:                  460px;
}

#homeButton {
    position:               absolute;
    top:                    5px;
    left:                   6px;
    -webkit-border-image:   url('img/back_button.png') 0 4 6 13;
    border-width:           0 4px 6px 13px;

}

#homeButton:hover, #homeButton:active, #homeButton:focus {
    -webkit-border-image:   url('img/back_button_clicked.png') 0 4 6 13;
}

#PageTitle {
    white-space:            nowrap;
    overflow:               hidden;
    text-overflow:          ellipsis;
    position:               absolute;
    top:                    8px;
    left:                   65px;
    right:                  65px;
    text-shadow:            rgba(0, 0, 0, .6) 0px 1px 1px;
    text-align:             center;
}

body.landscape #PageTitle {
    left:                   95px;
    right:                  95px;
}

#Search {
    position:               absolute;
    top:                    5px;
    right:                  6px;
}

.button {
    -webkit-border-image:   url('img/button_darkgray.png') 0 12 6 12;
    border-width:           0 12px 6px 12px;
    color:                  #FFFFFF;
    font-size:              12px;
    font-weight:            bold;
    height:                 28px;
    line-height:            28px;
    padding:                0px;
    text-decoration:        none;
    text-shadow:            rgba(0, 0, 0, .6) 0px 1px 1px;
    z-index:                1;
    min-width:              40px;
    max-width:              60px;
    height:                 23px;
/* enfore trimming if the label is too long */
    white-space:            nowrap;
    overflow:               hidden;
    text-overflow:          ellipsis;
}

.button:hover,
.button:active,
.button:focus {
    -webkit-border-image:   url('img/button_darkgray_pressed.png') 0 12 6 12;
}

body.landscape .button {
    max-width:              90px;
}
