body {

        margin: 0;

}



#pagewrap {

        width: 320px;

        height: 480px;

        background-image: -webkit-gradient(linear, left top, left bottom, from(black), to(#1e1e1e), color-stop(0.1, #525252));

        z-index: 0;

}




#Wallpaper {

        position: absolute;

        left: 0px;

    top: 0px;

        width: 320px;

        height: 480px;

        z-index: 1;

}

#Dock {

        position: absolute;

        left: 0px;

    top: 400px;

        width: 320px;

        height: 80px;

        z-index: 12;
}

@-webkit-keyframes logo_animation {



        0% {-webkit-transform:translateX(-0px);}



        50% {-webkit-transform:translateX(-440px);}



        100% {-webkit-transform:translateX(-0px);}



}







#Logo {



        position: absolute;



        -webkit-transform:translateX(-35px);



    top: 25px;

    left: 25px;


        width: 808px;



        height: 361px;



        background-color: transparent;



        -webkit-animation-name: logo_animation;



    -webkit-animation-duration: 35s;



        -webkit-animation-iteration-count: infinite;



        -webkit-animation-timing-function: ease-in-out;



    -webkit-animation-delay: 1s;



        overflow: hidden;



        z-index: 2;



}



#image_base {

        position: absolute;

        left: 10px;

    top: 45px;

        width: 320px;

        height: 214px;

        z-index: 6;

}



#image_area {

        position: absolute;

        left: 14px;

    top: 47px;

        width: 300px;

        height: 147px;

        z-index: 7;

        background-color: transparent;

        opacity: 1.0;

        overflow: hidden;

}



@-webkit-keyframes image_custom1_Animation {

        0% {opacity: 0.0;}
        0.5% {opacity: 1.0;}
        1% {opacity: 0.0;}
        1.5% {opacity: 1.0;}
        10% {opacity: 1.0;}
        19% {opacity: 1.0;}
        19.5% {opacity: 0.0;}
        19.9% {opacity: 1.0;}
        20% {opacity: 0.0;}
        100% {opacity: 0.0;}
}



#image_custom1 {

        position: absolute;

        left: 0px;

    top: 0px;

        width: 295px;

        height: 177px;

        background-color: transparent;

        opacity: 0.0;

        -webkit-animation-name:      image_custom1_Animation;

        -webkit-animation-duration: 30s;

        -webkit-animation-iteration-count: infinite;

        -webkit-animation-timing-function: linear;

        z-index: 7;

        overflow: hidden;

}

@-webkit-keyframes image_custom2_Animation {

        0% {opacity: 0.0;}
        19.9% {opacity: 0.0;}
        20% {opacity: 1.0;}
        20.5% {opacity: 0.0;}
        21% {opacity: 1.0;}
        38.5% {opacity: 1.0;}
        39% {opacity: 0.0;}
        39.5% {opacity: 1.0;}
        40% {opacity: 0.0;}
        100% {opacity: 0.0;}
}


#image_custom2 {

        position: absolute;

        left: 0px;

    top: 0px;

        width: 295px;

        height: 177px;

        background-color: transparent;

        opacity: 0.0;

        -webkit-animation-name: image_custom2_Animation;

        -webkit-animation-duration: 30s;

        -webkit-animation-iteration-count: infinite;

        -webkit-animation-timing-function: linear;

        z-index: 7;

        overflow: hidden;

}


@-webkit-keyframes image_custom3_Animation {

        0% {opacity: 0.0;}
        39.9% {opacity: 0.0;}
        40% {opacity: 1.0;}
        40.5% {opacity: 0.0;}
        41% {opacity: 1.0;}
        58.5% {opacity: 1.0;}
        59% {opacity: 0.0;}
        59.5% {opacity: 1.0;}
        60% {opacity: 0.0;}
        100% {opacity: 0.0;}
}


#image_custom3 {

        position: absolute;

        left: 0px;

    top: 0px;

        width: 295px;

        height: 177px;

        background-color: transparent;

        opacity: 0.0;

        -webkit-animation-name: image_custom3_Animation;

        -webkit-animation-duration: 30s;

        -webkit-animation-iteration-count: infinite;

        -webkit-animation-timing-function: linear;

         z-index: 7;

        overflow: hidden;

}


@-webkit-keyframes image_custom4_Animation {

        0% {opacity: 0.0;}
        59.9% {opacity: 0.0;}
        60% {opacity: 1.0;}
        60.5% {opacity: 0.0;}
        61% {opacity: 1.0;}
        78.5% {opacity: 1.0;}
        79% {opacity: 0.0;}
        79.5% {opacity: 1.0;}
        80% {opacity: 0.0;}
        100% {opacity: 0.0;}
}

#image_custom4 {

        position: absolute;

        left: 0px;

    top: 0px;

        width: 295px;

        height: 177px;

        background-color: transparent;

        opacity: 0.0;

        -webkit-animation-name: image_custom4_Animation;

        -webkit-animation-duration: 30s;

        -webkit-animation-iteration-count: infinite;

        -webkit-animation-timing-function: linear;

        z-index: 7;

        overflow: hidden;

}


@-webkit-keyframes image_custom5_Animation {

        0% {opacity: 0.0;}
        79.9% {opacity: 0.0;}
        80% {opacity: 1.0;}
        80.5% {opacity: 0.0;}
        81% {opacity: 1.0;}
        98.5% {opacity: 1.0;}
        99% {opacity: 0.0;}
        99.5% {opacity: 1.0;}
        100% {opacity: 0.0;}
}

#image_custom5 {

        position: absolute;

        left: 0px;

    top: 0px;

        width: 295px;

        height: 177px;

        background-color: transparent;

        opacity: 0.0;

        -webkit-animation-name: image_custom5_Animation;

        -webkit-animation-duration: 30s;

        -webkit-animation-iteration-count: infinite;

        -webkit-animation-timing-function: linear;

        z-index: 7;

        overflow: hidden;

}



#image_overlay {

        position: absolute;

        left: 10px;

    top: 45px;

        width: 300px;

        height: 187px;

        z-index: 9;

}





@-webkit-keyframes cal_animation {

        0% {opacity:0.0;}

        16% {opacity:0.0;}

        25% {opacity:0.5;}

        33% {opacity:1.0;}

        67% {opacity:1.0;}

        75% {opacity:0.5;}

        84% {opacity:0.0;}

        100% {opacity:0.0;}

}



#calendarbar {

        text-align: right;

        font: 24px "Helvetica";

        color: red;

        opacity: 0.8;

    text-shadow: 0px 0px 5px red;
                 0px 0px 5px red;

        position: absolute;

        width: 202px;

        height: 52px;

        left: 105px;

        top: 20px;

        word-spacing: 0px;

        background-color: transparent;

        -webkit-animation-name: cal_animation;

    -webkit-animation-duration: 10s;

        -webkit-animation-iteration-count: infinite;

        -webkit-animation-timing-function: linear;

        overflow: hidden;

        z-index: 10;

}



@-webkit-keyframes time_animation {

        0% {opacity:1.0;}

        16% {opacity:0.8;}

        25% {opacity:0.0;}

        33% {opacity:0.0;}

        67% {opacity:0.0;}

        75% {opacity:0.0;}

        84% {opacity:0.8;}

        100% {opacity:1.0;}

}



#clock {

        text-align: right;

        font: 24px "Helvetica";

        color: red;

        opacity: 0.8;

    text-shadow: 0px 0px 5px red;
                 0px 0px 5px red;

        position: absolute;

        width: 110px;

        height: 52px;

        left: 207px;

        top: 20px;

        word-spacing: -2px;

        background-color: transparent;

        background-color: transparent;

        -webkit-animation-name: time_animation;

    -webkit-animation-duration: 10s;

        -webkit-animation-iteration-count: infinite;

        -webkit-animation-timing-function: linear;

        overflow: hidden;

        z-index: 10;

}



#clock #minutes {

        position: absolute;

        text-align: left;

        width: 55px;

        height: 52px;

        left: 57px;

        top: 0px;

}



#clock #hours {

        position: absolute;

        text-align: right;

        width: 55px;

        height: 52px;

        top: 0px;

        left: 0px;

}


#Flyer_Anim {

        position: absolute;

        text-align: right;

        width: 400px;

        height: 28px;

        top: 23px;

        left: 0px;

        z-index: 11;

        -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(0.25, black), color-stop(0.75, black), to(transparent));

        overflow: hidden;

}



@-webkit-keyframes Flyer_Animation {

        0% {opacity: 0.0;-webkit-transform:translateX(-50px);}

        25% {opacity: 0.7;-webkit-transform:translateX(0px);}

        50% {opacity: 1.0;-webkit-transform:translateX(50px);}

        75% {opacity: 0.7;-webkit-transform:translateX(100px);}

        100% {opacity: 0.0;-webkit-transform:translateX(150px);}
}



#Flyer {

        position: absolute;

        text-align: right;

        width: 75px;

        height: 28px;

        -webkit-animation-name: Flyer_Animation;

        -webkit-animation-duration: 5s;

        -webkit-animation-iteration-count: infinite;

        -webkit-animation-timing-function: linear;

        top: 0px;

        left: 0px;

        z-index: 11;

}