// out: false
@import "../shared/styles.less";
@import "./styles/lib.less";

@text-shadow-color: @accent-color; //@accent-fgcolor1;
@point-anim-duration: 2s; //1s;
@clock-font-size: @font-size * 1.5;

body, html {
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    overflow: hidden;
}

.container {
    //width: 960px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;

    //background: @main-color;

    .clock {
        //width: 800px;
        width: 100%;
        margin: 0 auto;
        //padding: 30px;
        //border: 1px solid #333;
        color: @header-fgcolor;


        #date {
            //display: none;
            position: absolute;
            font-family: @font-family;
            //font-size: @font-size;
            //font-size: 10em;
            font-size: @clock-font-size;
            text-align: center;
            text-shadow: 0 0 5px @text-shadow-color;
            width: 100%;
            height: 100%;
            opacity: 0.0;
        }

        ul {
            //width: 800px;
            width: 100%;
            margin: 0 auto;
            padding: 0px;
            list-style: none;
            text-align: center;
            display: inline-block;
            

            li {
                display: inline;
                //font-size: 10em;
                font-size: @clock-font-size;
                text-align: center;
                font-family: @font-family;
                text-shadow: 0 0 5px @text-shadow-color;

                &.point {
                    position: relative;
                    animation: mymove @point-anim-duration ease infinite;
                    -webkit-animation: mymove @point-anim-duration ease infinite;
                    padding-left: 10px;
                    padding-right: 10px;

                    text-shadow: 0 0 20px @text-shadow-color;
                }
            }
        }
    }

    .color-mixin;
}

@keyframes mymove {
    0% {
        opacity: 1.0;
        //text-shadow: 0 0 20px @text-shadow-color;
    }

    50% {
        opacity: 0;
        text-shadow: none;
    }

    100% {
        opacity: 1.0;
        //text-shadow: 0 0 20px @text-shadow-color;
    }
}

@keyframes mymove2 {
    0% {
        opacity: 1.0;
        text-shadow: 0 0 5px @text-shadow-color;
    }

    100% {
        opacity: 0;
        text-shadow: none;
    }
}

@keyframes mymove3 {
    0% {
        opacity: 0;
        text-shadow: none;
    }

    100% {
        opacity: 1.0;
        text-shadow: 0 0 5px @text-shadow-color;
    }
}
