/* common */

body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Helveticaneue-Light', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans GB', 'Hiragino Kaku Gothic Pro';
    -webkit-font-smoothing: antialiased;
}

h4 {
    margin: 0 auto 10px 0;
    font-size: 168%;
    font-weight: normal;
/*    color: #008cd1;*/
}

p {
    margin: 0 auto;
    font-size: 100%;
    color: #000;
    max-width: 539px;
    text-align: left;
    letter-spacing: 1px;
    line-height: 1.3;
    font-weight: 300;
}

.close-button {
    position: absolute;
    width: 13px;
    height: 13px;
    margin-top:9px;
    margin-left: 9px;
    display: block;
    z-index: 100;
    background-image: url(images/close_button.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.close-button:hover {
    background-image: url(images/close_button_click.png);
}

.wrapper {
    position: relative;
    width: 600px;
    height: 430px;
/*    background-color: #ECECEC;*/
}

.inner-container {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 600px;
    height: 430px;
}

.guide {
    width: 600px;
    height: 430px;
    background-color: #FFF;
}

.guide-description {
    position: absolute;
    width: 600px;
    text-align: center;
    color: #4C4C4C;
    top: 23px;
    cursor: default;
}

.guide-description  h1 {
    margin: 0 auto;
    font-size: 95%;
    font-weight: bolder;
    /*font-family:simhei;*/
}

.guide-description h3 {
    margin: 10px auto 0 auto;
    font-size: 82%;
    font-weight: lighter;
    width: 500px;
}

/* slide 1 */
/*.photos-app-icon {
    position: absolute;
    top: 124px;
    left: 217px;
    width: 166px;
    height: 165px;
    background-image: url(images/photos_app_icon.png);
}

#photos-app-name {
    position: absolute;
    top: 300px;
    width: 600px;
    text-align: center;
    color: #4C4C4C;
    font-size: 123%;
    cursor: default;
}*/
.photos-menuview-image {
    position: absolute;
    top: 106px;
    left: 26px;
    width: 569px;
    height: 226px;
}

.photos-menuview-image.en {
    background-image: url(images/en/photos_menu_view.png);
}

.photos-menuview-image.de {
    background-image: url(images/de/photos_menu_view.png);
}

.photos-menuview-image.es {
    background-image: url(images/es/photos_menu_view.png);
}

.photos-menuview-image.fr {
    background-image: url(images/fr/photos_menu_view.png);
}

.photos-menuview-image.ja {
    background-image: url(images/ja/photos_menu_view.png);
}

.photos-menuview-image.it {
    background-image: url(images/it/photos_menu_view.png);
}

.photos-menuview-image.ko {
    background-image: url(images/ko/photos_menu_view.png);
}

.photos-menuview-image.nl {
    background-image: url(images/nl/photos_menu_view.png);
}

.photos-menuview-image.zh-Hans {
    background-image: url(images/zh-Hans/photos_menu_view.png);
}

.photos-menuview-image.zh-Hant {
    background-image: url(images/zh-Hant/photos_menu_view.png);
}

/* slide 2 */
.photos-sidebar-image {
    position: absolute;
    top: 78px;
    left: 30px;
    width: 270px;
    height: 275px;
}

.photos-sidebar-image.en {
    background-image: url(images/en/photos_sidebar.png);
    width: 505px;
    height: 263px;
}

.photos-sidebar-image.de {
    background-image: url(images/de/photos_sidebar.png);
    width: 505px;
    height: 263px;
}

.photos-sidebar-image.es {
    background-image: url(images/es/photos_sidebar.png);
    width: 505px;
    height: 263px;
}

.photos-sidebar-image.fr {
    background-image: url(images/fr/photos_sidebar.png);
    width: 513px;
    height: 270px;
}

.photos-sidebar-image.ja {
    background-image: url(images/ja/photos_sidebar.png);
    width: 505px;
    height: 263px;
}

.photos-sidebar-image.it {
    background-image: url(images/it/photos_sidebar.png);
    width: 505px;
    height: 263px;
}

.photos-sidebar-image.ko {
    background-image: url(images/ko/photos_sidebar.png);
    width: 505px;
    height: 263px;
}

.photos-sidebar-image.nl {
    background-image: url(images/nl/photos_sidebar.png);
    width: 505px;
    height: 263px;
}

.photos-sidebar-image.zh-Hant {
    background-image: url(images/zh-Hant/photos_sidebar.png);
    width: 505px;
    height: 263px;
}

.photos-sidebar-image.zh-Hans {
    background-image: url(images/zh-Hans/photos_sidebar.png);
    width: 505px;
    height: 263px;
}

.guide-setting-items {
    width: 160px;
    margin: 0 auto;
    position: absolute;
    top: 316px;
    z-index: 100;
    left: 81px;
    font-size: 100%;
    text-align: left;
    line-height: 24px;
}

.guide-setting-items.hide {
    display: none;
}

.checkbox {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url(images/checkbox.png);
    background-size: 100% 100%;
    vertical-align: text-bottom;
    -webkit-transition:background-image 0.3s ease 0;
    transition:background-image 0.3s ease 0;
}

.checkbox-checked .checkbox {
    background-image: url(images/checkbox_checked.png);
}

.guide-setting-item {
    cursor: default;
    margin-top: 13px;
}

.guide-setting-item-content {
    font-size: 88%;
    font-weight: lighter;
}

/* slide 3 */
.menu-delete-photos-image {
    position: absolute;
    top: 100px;
    left: 81px;
    width: 440px;
    height: 242px;
    background-size: 100% 100%;
}

.menu-delete-photos-image.en {
    background-image: url(images/en/menu_delete_photos.png);
    width: 440px;
    height: 242px;
}

.menu-delete-photos-image.de {
    background-image: url(images/de/menu_delete_photos.png);
    width: 440px;
    height: 242px;
}

.menu-delete-photos-image.es {
    background-image: url(images/es/menu_delete_photos.png);
    width: 440px;
    height: 242px;
}

.menu-delete-photos-image.fr {
    background-image: url(images/fr/menu_delete_photos.png);
    width: 440px;
    height: 242px;
}

.menu-delete-photos-image.ja {
    background-image: url(images/ja/menu_delete_photos.png);
    width: 440px;
    height: 242px;
}

.menu-delete-photos-image.it {
    background-image: url(images/it/menu_delete_photos.png);
    width: 431px;
    height: 242px;
}

.menu-delete-photos-image.ko {
    background-image: url(images/ko/menu_delete_photos.png);
    width: 370px;
    height: 242px;
}

.menu-delete-photos-image.nl {
    background-image: url(images/nl/menu_delete_photos.png);
    width: 375px;
    height: 242px;
}

.menu-delete-photos-image.zh-Hant {
    background-image: url(images/zh-Hant/menu_delete_photos.png);
    width: 440px;
    height: 242px;
}

.menu-delete-photos-image.zh-Hans {
    background-image: url(images/zh-Hans/menu_delete_photos.png);
    width: 440px;
    height: 242px;
}

/* slides control */

.slidesjs-pagination {
    padding-left: 264px;
    padding-top: 0px;
    float: left;
    list-style: none;
}

.slidesjs-pagination li {
    float: left;
    margin: 0 10px;
}

.slidesjs-pagination li a {
    display: block; 
    width: 11px;
    height: 3px;
    padding-top: 9px;
    background-image: url(images/pagination_unselected.png);
    background-repeat: no-repeat;
    float: left;
    overflow: hidden;
}

.slidesjs-pagination li a.active, 
.slidesjs-pagination li a:hover.active { 
    background-image: url(images/pagination_selected.png);
}
.slidesjs-pagination li a:hover { 
    background-image: url(images/pagination_selected.png);
}

.slidesjs-next {
    position: absolute;
    margin: auto;
    bottom: 24px;
    right: 0px;
    left: 0px;
    width: 200px;
    height: 37px;
    z-index: 100;
    background-image: url(images/action_button.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #FFF;
    text-decoration : none;
    text-align: center;
}

.slidesjs-next.hide {
    display: none;
}

.action-button {
    position: absolute;
    margin: auto;
    bottom: 24px;
    left: 0px;
    right: 0px;
    width: 200px;
    height: 37px;
    z-index: 100;
    background-image: url(images/action_button.png);
    background-repeat: no-repeat;
    color: #FFF;
    text-decoration : none;
    text-align: center;
}

.action-button.hide {
    display: none;
}

.action-button-content {
    position: absolute;
    right: 0px;
    top: -4px;
    width: 200px;
    line-height: 37px;
    display: inline-block;
    padding: 2px;
    font-size: 100%;
}

.slidesjs-next .action-button-content {
    width: 200;
}

.fr.action-button-content {
    font-size: 100%;
}

.de.action-button-content {
    font-size: 100%;
}

.es.action-button-content {
    font-size: 100%;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
    .close-button {
        background-image: url(images/close_button@2x.png);
        background-size: 100% 100%;
    }
    
    .close-button:hover {
        background-image: url(images/close_button_click@2x.png);
        background-size: 100% 100%;
    }

    .slidesjs-pagination li a {
        background-image: url(images/pagination_unselected@2x.png);
        background-size: 100% 100%;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
        background-image: url(images/pagination_selected@2x.png);
        background-size: 100% 100%;
    }
    .slidesjs-pagination li a:hover {
        background-image: url(images/pagination_selected@2x.png);
        background-size: 100% 100%;
    }

    .slidesjs-next {
        background-image: url(images/action_button@2x.png);
        background-size: 100% 100%;
    }

    .action-button {
        background-image: url(images/action_button@2x.png);
        background-size: 100% 100%;
    }

    /* slide 1 */
    .photos-menuview-image.en {
        background-image: url(images/en/photos_menu_view@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-menuview-image.de {
        background-image: url(images/de/photos_menu_view@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-menuview-image.es {
        background-image: url(images/es/photos_menu_view@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-menuview-image.fr {
        background-image: url(images/fr/photos_menu_view@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-menuview-image.ja {
        background-image: url(images/ja/photos_menu_view@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-menuview-image.it {
        background-image: url(images/it/photos_menu_view@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-menuview-image.ko {
        background-image: url(images/ko/photos_menu_view@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-menuview-image.nl {
        background-image: url(images/nl/photos_menu_view@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-menuview-image.zh-Hans {
        background-image: url(images/zh-Hans/photos_menu_view@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-menuview-image.zh-Hant {
        background-image: url(images/zh-Hant/photos_menu_view@2x.png);
        background-size: 100% 100%;
    }

    /* slide 2 */
    .photos-sidebar-image.en {
        background-image: url(images/en/photos_sidebar@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-sidebar-image.de {
        background-image: url(images/de/photos_sidebar@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-sidebar-image.es {
        background-image: url(images/es/photos_sidebar@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-sidebar-image.fr {
        background-image: url(images/fr/photos_sidebar@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-sidebar-image.ja {
        background-image: url(images/ja/photos_sidebar@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-sidebar-image.it {
        background-image: url(images/it/photos_sidebar@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-sidebar-image.ko {
        background-image: url(images/ko/photos_sidebar@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-sidebar-image.nl {
        background-image: url(images/nl/photos_sidebar@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-sidebar-image.zh-Hant {
        background-image: url(images/zh-Hant/photos_sidebar@2x.png);
        background-size: 100% 100%;
    }
    
    .photos-sidebar-image.zh-Hans {
        background-image: url(images/zh-Hans/photos_sidebar@2x.png);
        background-size: 100% 100%;
    }

    /* slide 3 */
    .menu-delete-photos-image.en {
        background-image: url(images/en/menu_delete_photos@2x.png);
        background-size: 100% 100%;
    }
    
    .menu-delete-photos-image.de {
        background-image: url(images/de/menu_delete_photos@2x.png);
        background-size: 100% 100%;
    }
    
    .menu-delete-photos-image.es {
        background-image: url(images/es/menu_delete_photos@2x.png);
        background-size: 100% 100%;
    }
    
    .menu-delete-photos-image.fr {
        background-image: url(images/fr/menu_delete_photos@2x.png);
        background-size: 100% 100%;
    }
    
    .menu-delete-photos-image.ja {
        background-image: url(images/ja/menu_delete_photos@2x.png);
        background-size: 100% 100%;
    }
    
    .menu-delete-photos-image.it {
        background-image: url(images/it/menu_delete_photos@2x.png);
        background-size: 100% 100%;
    }
    
    .menu-delete-photos-image.ko {
        background-image: url(images/ko/menu_delete_photos@2x.png);
        background-size: 100% 100%;
    }
    
    .menu-delete-photos-image.nl {
        background-image: url(images/nl/menu_delete_photos@2x.png);
        background-size: 100% 100%;
    }
    
    .menu-delete-photos-image.zh-Hant {
        background-image: url(images/zh-Hant/menu_delete_photos@2x.png);
        background-size: 100% 100%;
    }
    
    .menu-delete-photos-image.zh-Hans {
        background-image: url(images/zh-Hans/menu_delete_photos@2x.png);
        background-size: 100% 100%;
    }

    .checkbox {
        background-image: url(images/checkbox@2x.png);
        background-size: 100% 100%;
    }
    
    .checkbox-checked .checkbox {
        background-image: url(images/checkbox_checked@2x.png);
        background-size: 100% 100%;
    }
}
