/*
//////////////////////////
Orientation Help
//////////////////////////
*/

.CSiteSpritesheet
{
    background-image: url("../resources/generic/site_spritesheet.png");
    background-size: 144px 298px;
}

.COrientationLayer
{
    position: fixed;

    display: none;

    left:0px;
    top:0px;

    width:100%;
    height:100%;

    z-index: 600;

    background-color: #ffffff;
}

.COrientationPhone
{
    position: absolute;

    left:50%;
    margin-left:-72px;
    top:50%;
    margin-top:-44px;

    width:144px;
    height:82px;

    background-position: 0px 0px;

    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease;
    -moz-animation-name: ae_OrientationPhone_Animation;
    -moz-animation-duration: 6.0s;
    -moz-animation-delay: 0.0s;

    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -webkit-animation-name: ae_OrientationPhone_Animation;
    -webkit-animation-duration: 6.0s;
    -webkit-animation-delay: 0.0s;

    animation-iteration-count: infinite;
    animation-timing-function: ease;
    animation-name: ae_OrientationPhone_Animation;
    animation-duration: 6.0s;
    animation-delay: 0.0s;
}

.COrientationCross
{
    position: absolute;

    left:50%;
    margin-left:-36px;
    top:50%;
    margin-top:-38px;

    width:72px;
    height:72px;

    background-position: 0px -82px;

    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease;
    -moz-animation-name: ae_OrientationCross_Animation;
    -moz-animation-duration: 6.0s;
    -moz-animation-delay: 0.0s;

    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -webkit-animation-name: ae_OrientationCross_Animation;
    -webkit-animation-duration: 6.0s;
    -webkit-animation-delay: 0.0s;

    animation-iteration-count: infinite;
    animation-timing-function: ease;
    animation-name: ae_OrientationCross_Animation;
    animation-duration: 6.0s;
    animation-delay: 0.0s;
}

.COrientationCheckmark
{
    position: absolute;

    left:50%;
    margin-left:-36px;
    top:50%;
    margin-top:-36px;

    width:72px;
    height:72px;

    background-position: -72px -82px;

    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease;
    -moz-animation-name: ae_OrientationCheckmark_Animation;
    -moz-animation-duration: 6.0s;
    -moz-animation-delay: 0.0s;

    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -webkit-animation-name: ae_OrientationCheckmark_Animation;
    -webkit-animation-duration: 6.0s;
    -webkit-animation-delay: 0.0s;

    animation-iteration-count: infinite;
    animation-timing-function: ease;
    animation-name: ae_OrientationCheckmark_Animation;
    animation-duration: 6.0s;
    animation-delay: 0.0s;
}




@-moz-keyframes ae_OrientationPhone_Animation {
    0% 		{ opacity: 1; -moz-transform: rotate(0deg);}
    30% 	{ opacity: 1; -moz-transform: rotate(0deg);}
    50% 	{ opacity: 1; -moz-transform: rotate(90deg);}
    80% 	{ opacity: 1; -moz-transform: rotate(90deg);}
    100% 	{ opacity: 1; -moz-transform: rotate(0deg);}
}

@-webkit-keyframes ae_OrientationPhone_Animation {
    0% 		{ opacity: 1; -webkit-transform: rotate(0deg);}
    30% 	{ opacity: 1; -webkit-transform: rotate(0deg);}
    50% 	{ opacity: 1; -webkit-transform: rotate(90deg);}
    80% 	{ opacity: 1; -webkit-transform: rotate(90deg);}
    100% 	{ opacity: 1; -webkit-transform: rotate(0deg);}
}
@keyframes ae_OrientationPhone_Animation {
    0% 		{ opacity: 1; transform: rotate(0deg);}
    30% 	{ opacity: 1; transform: rotate(0deg);}
    50% 	{ opacity: 1; transform: rotate(90deg);}
    80% 	{ opacity: 1; transform: rotate(90deg);}
    100% 	{ opacity: 1; transform: rotate(0deg);}
}

/***/
@-moz-keyframes ae_OrientationCross_Animation {
    0% 		{ opacity: 0; -moz-transform: scale(0);}
    10% 	{ opacity: 1; -moz-transform: scale(1);}
    30% 	{ opacity: 1; -moz-transform: scale(1);}
    40% 	{ opacity: 0; -moz-transform: scale(0);}
    100% 	{ opacity: 0; -moz-transform: scale(0);}
}

@-webkit-keyframes ae_OrientationCross_Animation {
    0% 		{ opacity: 0; -webkit-transform: scale(0);}
    10% 	{ opacity: 1; -webkit-transform: scale(1);}
    30% 	{ opacity: 1; -webkit-transform: scale(1);}
    40% 	{ opacity: 0; -webkit-transform: scale(0);}
    100% 	{ opacity: 0; -webkit-transform: scale(0);}
}
@keyframes ae_OrientationCross_Animation {
    0% 		{ opacity: 0; transform: scale(0);}
    10% 	{ opacity: 1; transform: scale(1);}
    30% 	{ opacity: 1; transform: scale(1);}
    40% 	{ opacity: 0; transform: scale(0);}
    100% 	{ opacity: 0; transform: scale(0);}
}

/***/

@-moz-keyframes ae_OrientationCheckmark_Animation {
    0% 		{ opacity: 0; -moz-transform: scale(0);}
    40% 	{ opacity: 0; -moz-transform: scale(0);}
    50% 	{ opacity: 1; -moz-transform: scale(1);}
    80% 	{ opacity: 1; -moz-transform: scale(1);}
    90% 	{ opacity: 0; -moz-transform: scale(0);}
    100% 	{ opacity: 0; -moz-transform: scale(0);}
}

@-webkit-keyframes ae_OrientationCheckmark_Animation {
    0% 		{ opacity: 0; -webkit-transform: scale(0);}
    40% 	{ opacity: 0; -webkit-transform: scale(0);}
    50% 	{ opacity: 1; -webkit-transform: scale(1);}
    80% 	{ opacity: 1; -webkit-transform: scale(1);}
    90% 	{ opacity: 0; -webkit-transform: scale(0);}
    100% 	{ opacity: 0; -webkit-transform: scale(0);}
}
@keyframes ae_OrientationCheckmark_Animation {
    0% 		{ opacity: 0; transform: scale(0);}
    40% 	{ opacity: 0; transform: scale(0);}
    50% 	{ opacity: 1; transform: scale(1);}
    80% 	{ opacity: 1; transform: scale(1);}
    90% 	{ opacity: 0; transform: scale(0);}
    100% 	{ opacity: 0; transform: scale(0);}
}

@media only screen
and (min-device-width: 320px)
and (max-device-width: 1023px)
and (orientation: landscape)
{
    .COrientationLayer
    {
        display: inline;
    }
}