/* 
    Document   : contentLayers
    Created on : 08-Jan-2014, 17:35:59
    Author     : Chris
    Description:
        Purpose of the stylesheet follows.
*/

.contentLayer {
    position: absolute;
    top: 0px;
    left: 0px;
    background-repeat: no-repeat;
}

.contentLayerStart {
    position: absolute !important;

    transition: 0.5s all ease-in-out 0s !important;
    -moz-transition: 0.5s all ease-in-out 0s !important;
    -webkit-transition: 0.5s all ease-in-out 0s !important;
    -o-transition: 0.5s all ease-in-out 0s !important;
    -ms-transition: 0.5s all ease-in-out 0s !important;

    background-repeat: no-repeat;
    opacity: 0 !important;
}

.contentLayerEnd {
    top: 0px !important;
    left: 0px !important;
    transform: rotate(0deg) scale(1, 1) rotateX(0deg) rotateY(0deg) !important;
    -moz-transform: rotate(0deg) scale(1, 1) rotateX(0deg) rotateY(0deg) !important;
    -webkit-transform: rotate(0deg) scale(1, 1) rotateX(0deg) rotateY(0deg) !important;
    -o-transform: rotate(0deg) scale(1, 1) rotateX(0deg) rotateY(0deg) !important;
    -ms-transform: rotate(0deg) scale(1, 1) rotateX(0deg) rotateY(0deg) !important;
    background-repeat: no-repeat;
    opacity: 1 !important;
}

.contentLayerHidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

.contentLayerVisible {
    opacity: 1 !important;
    visibility: visible !important;
}

div.blink_me {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

@-moz-keyframes blinker {  
    0% { opacity: 0.0; }
    50% { opacity: 0.5; }
    100% { opacity: 0.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 0.0; }
    50% { opacity: 0.5; }
    100% { opacity: 0.0; }
}

@keyframes blinker {  
    0% { opacity: 0.0; }
    50% { opacity: 1.0; }
    100% { opacity: 0.0; }
}

.contentLink {
    position: absolute;
    
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-delay: 0.2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;

    -moz-animation-name: blinker;
    -moz-animation-duration: 0.6s;
    -moz-animation-delay: 0.2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;

    animation-name: blinker;
    animation-duration: 0.6s;
    animation-delay: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: 1;

    background-color: #ff0000;
    border-radius: 8px;
    opacity: 0;
    cursor: pointer;
}

.contentLink:hover {
    opacity: 0.3;
}

.contentOverlay {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}