/* style reset */
html, body, div, p, a, img, h1 {
    margin: 0;
    padding: 0;
    border: 0;
}

.rtl {
    direction: rtl;
}

/* General */
html, body {
    font-family: "Nokia Pure", "Nokia Sans", "Arial";
    font-size: 18px;
    line-height: 20px;
}
.theme-light {
    background-color: #eee;
}
.theme-dark {
    background-color: #000;
}

/* Columns */
#left-column {
    width: 320px;
    float: left;
}
.rtl #left-column {
    float: right;
}
.portrait #left-column {
    margin: 8px 0 0 20px;
}
.rtl .portrait #left-column {
    margin: 8px 20px 0 0;
}
.landscape #right-column {
    width: 320px;
    float: right;
    margin-top: 10px;
}
.rtl .landscape #right-column {
    float: left;
}

/* Show content text based on orientation */
.landscape #left-column .content,
.portrait #right-column .content {
    display: none;
}

/* Header */
#header {
    width: 320px;
    background-repeat: no-repeat;
}
.landscape #header {
    margin-top: 10px;
}
#header-top {
    width: 320px;
    overflow: hidden;
}
.theme-light #header-top {
    background-image: url(ICONS/header_light_top.png);
}
.theme-dark #header-top {
    background-image: url(ICONS/header_dark_top.png);
}

#header-bottom {
    height: 23px;
    margin-bottom: 10px;
}
.theme-light #header-bottom {
    background-image: url(ICONS/header_light_bottom.png);
}
.rtl .theme-light #header-bottom {
    background-image: url(ICONS/header_light_bottom_rtl.png);
}
.theme-dark #header-bottom {
    background-image: url(ICONS/header_dark_bottom.png);
}
.rtl .theme-dark #header-bottom {
    background-image: url(ICONS/header_dark_bottom_rtl.png);
}
h1 {
    float: left;
    width: 200px;
    font-size: 22px;
    font-weight: normal;
    line-height: 26px;
    margin: 12px 0 0 20px;
}
.rtl h1 {
    float: right;
    margin: 12px 20px 0 0;
}
.theme-light h1 {
    color: #6A6A6A;
}
.theme-dark h1 {
    color: #eee;
}
#header img {
    width: 70px;
    height: 70px;
    float: right;
    margin: 6px 20px 0 0;
}
.rtl #header img {
    float: left;
    margin: 6px 0 0 20px;
}

/* Buttons */
#buttons {
    width: 320px;
    overflow: hidden;
    padding-top: 9px;
}
.landscape #buttons {
    padding-top: 5px;
}
#button1, #button2, #button3 {
    width: 320px;
    overflow: hidden;
}
#button1, #button2, #button3 {
    margin-top: 5px;
}
#buttons img {
    float: left;
    width: 40px;
    height: 40px;
    margin: 1px 0 0 8px;
}
.rtl #buttons img {
    float: right;
    margin: 1px 8px 0 0;
}
#buttons a {
    position: relative;
    display: block;
    float: right;
    text-decoration: none;
    text-align: center;
    margin-right: 5px;
}
.rtl #buttons a {
    float: left;
    margin-right: 0;
    margin-left: 5px;
}
.theme-light #buttons a {
    color: #444;
}

#buttons .button-text {
    display: block;
    width: 237px;
    min-height: 24px;
    padding: 12px 10px 0 10px;
    background-image: url(ICONS/button_gray_top.png);
}

.button-top {
    width: 320px;
    overflow: hidden;
}
.button-bottom {
    display: block;
    width: 257px;
    height: 8px;
    background-image: url(ICONS/button_gray_bottom.png);
}
.theme-light #buttons a:hover .button-text,
.theme-light #buttons a:active .button-text {
    background-image: url(ICONS/button_selected_top.png);
    color: #fff;
}
.theme-light #buttons a:hover .button-bottom,
.theme-light #buttons a:active .button-bottom {
    background-image: url(ICONS/button_selected_bottom.png);
    color: #fff;
}
.theme-dark #buttons a {
    color: #444;
}
.theme-dark #buttons a:hover .button-text,
.theme-dark #buttons a:active .button-text {
    background-image: url(ICONS/button_blue_top.png);
    color: #fff;
}
.theme-dark #buttons a:hover .button-bottom,
.theme-dark #buttons a:active .button-bottom {
    background-image: url(ICONS/button_blue_bottom.png);
    color: #fff;
}

/* Content text */
.theme-light .content .top {
    height: 8px;
    background-image: url(ICONS/content_top_light.png);
}
.theme-light .content .text {
    color: #333;
    background-image: url(ICONS/content_bg_light.png);
    background-repeat: repeat-y;
    padding: 10px 25px;
}
.theme-light .content .bottom {
    height: 8px;
    background-image: url(ICONS/content_bottom_light.png);
}
.theme-dark .content .top {
    height: 8px;
    background-image: url(ICONS/content_top_dark.png);
}
.theme-dark .content .text {
    background-image: url(ICONS/content_bg_dark.png);
    background-repeat: repeat-y;
    padding: 5px 15px;
    color: #eee;
    padding: 10px 25px;
}
.theme-dark .content .bottom {
    height: 8px;
    background-image: url(ICONS/content_bottom_dark.png);
}