/* 
    Document   : main
    Created on : 11/09/2013, 15:04:20
    Author     : Administrator
    Description:
        Main stylesheet
*/

@keyframes intro-zoom {
    0% { transform:scale(1) translate(0px,0px);}
    53% { transform:scale(2.15) translate(210px,-70px); }
    100% { transform:scale(2.15) translate(210px,-70px); }
}

@keyframes intro-zoom-blur {
    0% { opacity: 1 }
    53% { opacity: 0 }
    100% { opacity: 1 }
}

@keyframes fade-out {
    0% { opacity: 1 }
    40% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes fade-in {
    0% { opacity: 0 }
    40% { opacity: 0 }
    100% { opacity: 1 }
}

@keyframes fade-out2 {
    0% { opacity: 1 }
    16% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes dissolve {
    from { opacity: 1 }
    to { opacity: 0 }
}

@keyframes simple-fade-in {
    from { opacity: 0 }
    to { opacity : 1}
}

@keyframes menu-item-hover {
    from {background-color: #f9ffe1}
    to {background-color: #e6ebd1}
}

@keyframes menu-open {
    0% { top: 471px; height: 0px }
    5% { top: 471px; height: 0px; }
    95% { top: 8px; height: 463px; }
    100% { top: 8px; height: 463px; }
}

@keyframes fade-out-hide {
    0% { opacity: 1}
    100% { opacity: 0}
}

@keyframes fade-in-out {
    0% {opacity: 0}
    50% {opacity: 1}
    100% {opacity: 0}
}

@keyframes glow-in-out {
    0% {opacity: 0}
    50% {opacity: 0.8}
    100% {opacity: 0}
}

@-webkit-keyframes intro-zoom {
    0% { -webkit-transform:scale(1) translate(0px,0px); background-image: url('images/intro-bg.jpg')  }
    53% { -webkit-transform:scale(2.15) translate(210px,-70px); background-image: url('images/intro-bg-blur.jpg') }
    100% { -webkit-transform:scale(2.15) translate(210px,-70px); background-image: url('images/intro-bg.jpg') }
}

@-webkit-keyframes intro-zoom-blur {
    0% { opacity: 1 }
    53% { opacity: 0 }
    100% { opacity: 1 }
}

@-webkit-keyframes fade-out {
    0% { opacity: 1 }
    40% { opacity: 0 }
    100% { opacity: 0 }
}

@-webkit-keyframes fade-in {
    0% { opacity: 0 }
    40% { opacity: 0 }
    100% { opacity: 1 }
}

@-webkit-keyframes fade-out2 {
    0% { opacity: 1 }
    16% { opacity: 0 }
    100% { opacity: 0 }
}

@-webkit-keyframes dissolve {
    from { opacity: 1 }
    to { opacity: 0 }
}

@-webkit-keyframes simple-fade-in {
    from { opacity: 0 }
    to { opacity : 1}
}

@-webkit-keyframes menu-item-hover {
    from {background-color: #f9ffe1}
    to {background-color: #e6ebd1}
}

@-webkit-keyframes menu-open {
    from { top: 471px; height: 0px; }
    to { top: 8px; height: 463px; }
}

@-webkit-keyframes menu-open {
    0% { top: 471px; height: 0px }
    80% { top: 8px; height: 463px; }
    100% { top: 8px; height: 463px; }
}

@-webkit-keyframes fade-out-hide {
    0% { opacity: 1}
    100% { opacity: 0}
}

@-webkit-keyframes fade-in-out {
    0% {opacity: 0}
    50% {opacity: 1}
    100% {opacity: 0}
}

@-webkit-keyframes glow-in-out {
    0% {opacity: 0}
    50% {opacity: 0.8}
    100% {opacity: 0}
}


BODY {
    margin: 0px;
}

#divIntro
{
    position: absolute;
    clip: rect(0px,920px,520px,0px)
}

#imgIntroBG
{
    position: absolute;
}

.IntroBG
{
    position: absolute;
    width: 910px;
    height: 520px;
    background-image: url('images/intro-bg.jpg');
}

.IntroBGClone
{
    position: absolute;
    width: 910px;
    height: 520px;
    background-image: url('images/intro-bg-blur.jpg');
}

.IntroBGDissolve
{
    animation: intro-zoom 3.4s ease-in;
    -webkit-animation: intro-zoom 3.4s ease-in;
    position: absolute;
    width: 910px;
    height: 520px;
}

.IntroBGFadeOut
{
    animation: intro-zoom-blur 3.4s linear;
    -webkit-animation: intro-zoom-blur 3.4s linear;
}

#imgIntroOverlay
{
    position: absolute;
}

.IntroOverlayFadeOut
{
    animation: fade-out 2.4s;
    -webkit-animation: fade-out 2.4s;
}


#divBusStation
{
    position: absolute;
    width: 910px;
    height: 520px;
    left: 0px;
    top: 0px;
    clip: rect(0px,920px,520px,0px);
}

.BusStationBG
{
    position: absolute;
    width: 910px;
    height: 520px;
    left: 0px;
    top: 0px;
}

.BusStationTitle
{
    position: absolute;
    left:337px;
    top: 12px;
    width: 233px;
    height: 54px;
    cursor: pointer;
}

.BusStationDissolve
{
    animation: dissolve 1s;
    -webkit-animation: dissolve 1s;
    opacity: 0;
}

.BusStationOverlayFadeOut
{
    animation: fade-out2 5s;
    -webkit-animation: fade-out2 5s;
}

.BusStationOverlayFadeIn
{
    animation: fade-in 1s;
    -webkit-animation: fade-in 1s;
}

.BusStationGuideClip
{
    clip: rect(0px, 707px,520px,0px);
}


#divStationInfoPopup
{
    position: absolute;
    left: 65px;
    top: 38px;
    width: 681px;
    height:349px;
    background-image: url('images/station-info-popup.png');
    background-repeat: no-repeat;
}

.aPopupClose
{
    position: absolute;
    left: 2px;
    top: 2px;
    width: 32px;
    height: 32px;
}

#imgStationInfoThumb
{
    position: absolute;
    left: 55px;
    top: 78px;
    width: 239px;
    height: 160px;
}

#divStationInfoPopupText
{
    position: absolute;
    left: 307px;
    top: 38px;
    width: 290px;
    height: 283px;
    direction:rtl;
    overflow: auto;
    padding-left: 15px;
}

.PopupTitle
{
    font: 24px Arial Bold;
    color: #974db3;
}

.PopupText
{
    font: 15px Arial;
    line-height: 22px;
    color: Black;
}

.QuizText
{
    font: 12px Arial;
    line-height: 18px;
    color: Black;
}

A.Annotation
{
    color: Green;
    text-decoration: none;
    border-bottom: 1px Dashed Green;
}

#aStationInfoQuiz
{
    position: absolute;
    left: 50px;
    top: 270px;
    width: 250px;
    height: 63px;
}

.simpleFadeIn
{
    animation: simple-fade-in 0.75s;
    -webkit-animation: simple-fade-in 0.75s;
}

.simpleFadeInQuick
{
    animation: simple-fade-in 0.35s;
    -webkit-animation: simple-fade-in 0.35s;
}

#divStationInfoSubpopup
{
    position: absolute;
    left: 48px;
    top: 27px;
    width: 253px;
    height: 302px;
    background-repeat: no-repeat;
}

#divStationInfoSubpopupText
{
    position: absolute;
    left: 10px;
    top: 68px;
    width: 225px;
    height: 220px;
    direction: rtl;
    overflow: auto;
}

UL.MultiChoiceList
{
    margin-top: 3px;
    margin-bottom: 7px;
}

UL.MultiChoiceList LI
{
    list-style-position: outside;
    padding-left: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
    cursor: pointer;
}

LI.ChoicePushed
{
    list-style-image: url('images/radio-on.jpg');
    
}

LI.Choice
{
    list-style-image: url('images/radio-off.jpg');
}

#aCheckQuiz
{
    position: absolute;
    left: 157px;
    top: 240px;
    width: 72px;
    height: 28px;
}

#divQuizFeedback
{
    position: absolute;
    left: 24px;
    top: 244px;
    width: 125px;
    height: 28px;
    vertical-align: top;
    direction: rtl;
}

#divQuizFeedback.Animated
{
    animation: simple-fade-in 0.3s;
    -webkit-animation: simple-fade-in 0.3s;
}

#imgStationsMenu
{
    position: absolute;
    left: 313px;
    top: 6px;
    z-index: 100;
}

#divStationsMenu
{
    position: absolute;
    left: 312px;
    top: 8px;
    width: 152px;
    height: 463px;
    border: 1px Solid #0f0f0e;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #f9ffe1;
    z-index: 100;
    overflow: hidden;
}

#divStationsMenu.Animated
{
    animation: menu-open 1.0s ease-in-out;
    -webkit-animation: menu-open 1.0s ease-in-out;
}

#divStationsMenu.AnimatedClose
{
    animation: menu-open 1.0s ease-in-out;
    animation-direction: reverse;
    -webkit-animation: menu-open 1.0s ease-in-out;
    -webkit-animation-direction: reverse;
}

.StationMenuItem
{
    position: absolute;
    width: 148px;
    height: 20px;
    border-bottom: 1px Solid #a2a693;
    direction: rtl;
    font: 13px Arial;
    color: Black;
    padding-right: 4px;
    padding-top: 2px;
}

.StationMenuItem:hover
{
    background-color: #e6ebd1;
    cursor: pointer;
    z-index: -10;
    animation: menu-item-hover 0.15s;
    -webkit-animation: menu-item-hover 0.15s;
}

.StationMenuItemCurrent
{    
    background-color: #78b517;
    color: #f6faf0;
}

.StationMenuItemFirst
{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.StationMenuItemCurrent:hover
{
    background-color: #78b517;
    color: #f6faf0;
}

.FadeOutHidden {
   animation: fade-out-hide 1s ease-out;
    -webkit-animation: fade-out-hide 1s ease-out;
    opacity: 0;
}

.FadeOutHiddenQuick {
   animation: fade-out-hide 0.5s ease-out;
    -webkit-animation: fade-out-hide 0.5s ease-out;
    opacity: 0;
}

.InsideGuide
{
    position: absolute;
    left: 700px;
    top: 220px;
    width: 210px;
    height: 300px;    
}

.InsideGuideGlow
{
    position: absolute;
    left: 670px;
    top: 180px;
    width: 240px;
    height: 340px;  
    opacity:0;  
}

.GuideGlowing {
    /*animation: glow-in-out 0.95s 3 ease-in-out;
    -webkit-animation: glow-in-out 0.95s 3 ease-in-out;*/
    opacity: 0.8;
}

#imgGuideTooltip {
    position: absolute;
    left: 700px;
    top: 145px;
}