/*********************************************************************
    Fonts
*********************************************************************/
@import "fonts/Quicksand-fontfacekit/stylesheet.css";


/*********************************************************************
    All, simple CSS reset
*********************************************************************/
* {
    margin: 0;
    padding: 0;
}


/*********************************************************************
    Body
*********************************************************************/
body {
    position: relative;
    background: url("images/gui/bg_tile_stripes_w_grain.png") 0 0 repeat;
}


.bodyCnt {
    position: relative;
    width: 1000px;
    /*height: 1000px;*/
    margin: auto;
    /*opacity: 0.0;*/
    /*outline: 1px dotted red;*/
}


/*********************************************************************
    Links
*********************************************************************/
@-webkit-keyframes TextLinkFX {
      0% { color: hsl(59, 100%, 50%); text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.5), 0 0 3px hsla(0, 0%, 100%, 1.0); }
     33% { color: hsl(60, 59%, 80%); text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.5), 0 0 3px hsla(0, 0%, 0%, 0.0); }
     66% { color: hsl(59, 100%, 50%); text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.5), 0 0 3px hsla(0, 0%, 100%, 1.0); }
    100% { color: hsl(60, 59%, 80%); text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.5), 0 0 3px hsla(0, 0%, 0%, 0.0); }
}


.link {
    /*float: left;*/    /* shake animation will not work otherwise */

    color: hsl(60, 59%, 80%);
    text-decoration: none;

    /*text-shadow: 0 1px 1px hsla(0, 0%, 0%, 1.0);*/

    /*-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 100%,
                               from(hsla(0, 0%, 100%, 1.0)),
                                 to(hsla(0, 0%, 100%, 0.35)));*/

    /*-webkit-transform-origin: 50% 50%;*/
}

    .link:hover {
        -webkit-animation-name: TextLinkFX;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-timing-function: linear;
    }


/*********************************************************************
    Text
*********************************************************************/
.comment {
    color: hsl(90, 59%, 80%);
}

.styledText {
    color: white;
    font: normal normal normal 13px/120% QuicksandBold, Arial, sans-serif;
    text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.5);
}

.pageHeader {
    /* for the bottom border line fx */
    position: relative;
    left: -10px;
    padding: 0 0 5px 9px;
    color: hsl(0, 0%, 100%);
    font: normal normal normal 20px/120% QuicksandBold, Arial, sans-serif;
    text-shadow: 0 2px 2px hsla(0, 0%, 0%, 0.7);
    margin-bottom: 20px;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.75);
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 100% 0,
                            from(hsla(0, 0%, 0%, 0.0)),
                              to(hsla(0, 0%, 0%, 0.0)),
                      color-stop(0.015, hsla(0, 0%, 0%, 1.0)),
                      color-stop(0.4, hsla(0, 0%, 0%, 1.0)),
                      color-stop(0.5, hsla(0, 0%, 0%, 0.0)) );
    /*outline: 1px dotted red;*/
}

    .pageHeader.clearMarginBottom { margin-bottom: 0; }

.markedHeader {
    position: relative;
    left: -6px;
    color: hsl(210, 100%, 85%);
    letter-spacing: 2px;
    padding: 2px 6px 1px 6px;
    border-radius: 10px 0;
    background: -webkit-gradient(linear, 0 0, 100% 0,
                      color-stop(0.0, hsla(0, 0%, 0%, 0.0)),
                      color-stop(0.065, hsla(0, 0%, 0%, 0.1)),
                      color-stop(0.9, hsla(0, 0%, 0%, 0.1)),
                      color-stop(1.0, hsla(0, 0%, 0%, 0.0)));
    /*outline: 1px dotted red;*/
}

    .markedHeader.marginLeftMatchListDot { margin-left: 8px; }


/*********************************************************************
    Formatting Styles
*********************************************************************/
.inlineBlock { display: inline-block; }

.floatLeft { float: left; }
.floatClear { clear: both; }

.marginLeft5px { margin-left: 5px; }

.marginBottom20px { margin-bottom: 20px; }
.marginBottom10px { margin-bottom: 10px; }
.marginBottom5px { margin-bottom: 5px; }

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

    li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    li:before {
        content: "";
        padding: 0 0 0 0;
    }


/*********************************************************************
    Components
*********************************************************************/

/* Icon 22x22 + Text */
.componentIconAndText_Icon {
    position: absolute;
    left: 0;
    top: 0;
}

.componentIconAndText_Text {
    position: relative;
    padding: 0 0 0 30px;
}

.componentIconAndText_Text_VCentered {
    position: relative;
    padding: 5px 0 0 30px;
}

.component_Tweet_GooglePlus1 {
    position: relative;
    padding: 5px 0 2px 0;
}
    .googlePlus1ButtonVAlign {
        position: relative;
        top: -2px;
    }


/*********************************************************************
    Boxes
*********************************************************************/
.boxShadow {
    -webkit-box-shadow: 0px 0px 20px 1px hsla(0, 0%, 0%, 0.7);
    -moz-box-shadow: 0px 0px 20px 1px hsla(0, 0%, 0%, 0.7);
    box-shadow: 0px 0px 20px 1px hsla(0, 0%, 0%, 0.7);
}


/*********************************************************************
    Logos
*********************************************************************/
.masBadge {
    width: 165px;
    height: 40px;
    background: url("images/logos/Available_on_the_Mac_App_Store_Badge_US-UK_165x40_0824.png") no-repeat;
}


/*********************************************************************
    Software's
*********************************************************************/
.menuEclipse2 {
    /* in line placement */
    position: relative;
    left: -20px;

    width: 128px;
    height: 128px;
    background: url("images/icons/software/menu_eclipse_2.png") no-repeat;
}

/*.xSelectSimilar {
    *//* in line placement *//*
    position: relative;
    left: -20px;

    width: 128px;
    height: 128px;
    background: url("images/icons/software/xselect_similar.png") no-repeat;
}*/

.jQueryKeyframe {
    /* in line placement */
    position: relative;
    left: -20px;

    width: 128px;
    height: 128px;
    background: url("images/icons/software/time_frame.png") no-repeat;
}

.jQueryMoveToBezierCurve {
    /* in line placement */
    /*position: relative;*/
    /*left: -20px;*/

    width: 128px;
    height: 128px;
    background: url("images/icons/software/bezier.png") no-repeat;
}

.xhrLogger {
    /* in line placement */
    /*position: relative;*/
    /*left: -20px;*/

    width: 128px;
    height: 128px;
    background: url("images/icons/software/xhr_logger.png") no-repeat;
}


/*********************************************************************
    Icons
*********************************************************************/
.noIcon {
    width: 24px;
    height: 24px;
}

.calendar {
    width: 24px;
    height: 24px;
    background: url("images/icons/web/calendar.png") no-repeat;
    opacity: 0.7;
}

.email {
    width: 24px;
    height: 24px;
    background: url("images/icons/web/email.png") no-repeat;
}

.globe {
    width: 24px;
    height: 24px;
    background: url("images/icons/web/globe.png") no-repeat;
}

.helpBook {
    width: 24px;
    height: 24px;
    background: url("images/icons/web/help_book.png") no-repeat;
}

.facebook {
    width: 24px;
    height: 24px;
    background: url("images/logos/facebook.png") no-repeat;
}

.arrowRightSmall {
    width: 24px;
    height: 24px;
    background: url("images/icons/web/arrowRight.png") 0 0 no-repeat;
}

.arrowRightBig {
    width: 64px;
    height: 64px;
    background: url("images/icons/web/arrowRightBig.png") 0 0 no-repeat;
}

.arrowDownSmall {
    width: 24px;
    height: 24px;
    background: url("images/icons/web/arrowDown.png") 0 0 no-repeat;
}

.note {
    width: 24px;
    height: 24px;
    background: url("images/icons/web/note.png") no-repeat;
}

.warning {
    width: 16px;
    height: 16px;
    background: url("images/icons/web/warning.png") no-repeat;
}


/*********************************************************************
    Background effects
*********************************************************************/
@-webkit-keyframes LightsAndShadows-Keyframes {
    0% { opacity: 0.0; }
    5% { opacity: 0.5; }
    10% { opacity: 0.1; }
    20% { opacity: 0.5; }
    25% { opacity: 1.0; }
    40% { opacity: 0.0; }
    100% { opacity: 1.0; }
}


.gradientRadialFXTop {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: -webkit-gradient(linear, left top, right top,
                       color-stop(0%, hsla(200, 20%, 10%, 0.7)),
                       color-stop(30%, hsla(0, 0%, 0%, 0.3)),
                      color-stop(50%, hsla(0, 0%, 0%, 0.3)),
                     color-stop(100%, hsla(0, 0%, 0%, 0.7)));
}
    .gradientRadialFXTop.lightsAndShadows {
        opacity: 1.0;
        -webkit-animation-name: LightsAndShadows-Keyframes;
        -webkit-animation-duration: 1s;
        -webkit-animation-timing-function: ease;
    }


.gradientFXBottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 1.0;
    background: -webkit-gradient(linear, left top, left bottom,
                      color-stop(0%, hsla(0, 0%, 0%, 0.0)),
                      color-stop(70%, hsla(260, 50%, 10%, 0.6)),
                      color-stop(100%, hsla(260, 20%, 10%, 1.0)));
}
    .gradientFXBottom.lighter { opacity: 0.5; }


/*********************************************************************
    Left column
*********************************************************************/
.leftColumnCnt {
    position: absolute;
    left: 10px;
    top: 0;
    width: 156px;
    height: 1000px;

    /*outline: 1px dotted red;*/
}

    .logo {
        position: absolute;
        left: 0;
        top: 20px;
        width: 213px;
        height: 67px;
        background: url("images/logos/xybernic_logo.png") 0 0 no-repeat;

        /*outline: 1px dotted red;*/
    }

    /*
        Menu
    */
    .mainMenuCnt {
        position: absolute;
        right: 0;
        top: 100px;
        width: 156px;
        -webkit-perspective: 400;
        -webkit-transform-style: preserve-3d;

        /*outline: 1px dotted yellow;*/
    }
        .mainMenuCnt .item {
            float: right;
            clear: both;
            cursor: pointer;

            /*outline: 1px dotted red;*/
        }
            .mainMenuCnt .item div {
                color: hsl(0, 0%, 100%);
                font: normal normal normal 20px/120% QuicksandBook, Arial, sans-serif;
                text-align: right;
                padding: 14px 0 10px 0;
                text-shadow: 0 2px 2px hsl(0, 0%, 0%);
                -webkit-transform: rotateY(0deg);
                -webkit-transition: all 0.3s ease;

                /*outline: 1px dotted red;*/
            }
            .mainMenuCnt .item:hover div,
            .mainMenuCnt .item div.open {
                color: hsl(0, 0%, 0%);
                text-shadow: 0 2px 5px hsl(0, 0%, 0%);
                -webkit-transform: rotateY(35deg) translate(-30px, 0px);
                -webkit-transition: all 0.3s ease;
            }


        .subItemCnt {
            float: right;
            height: 0;            /* animated */
            padding-bottom: 0;    /* animated */
            overflow: hidden;

            /*outline: 1px dotted blue;*/
        }

            .subItemCnt .subItem {
                float: right;
                clear: both;
                text-align: right;
                white-space: nowrap;
                cursor: pointer;

                /*outline: 1px dotted green;*/
            }

                @-webkit-keyframes ShakeSubMenuItem {
                      0% { -webkit-transform: rotateZ(0deg); }
                     20% { -webkit-transform: rotateZ(-2deg); }
                     40% { -webkit-transform: rotateZ(2deg); }
                     60% { -webkit-transform: rotateZ(-1deg); }
                     80% { -webkit-transform: rotateZ(1deg); }
                    100% { -webkit-transform: rotateZ(0deg); }
                }

                @-webkit-keyframes ShakeMoreSubMenuItem {
                      0% { -webkit-transform: rotateZ(0deg); }
                     10% { -webkit-transform: rotateZ(-2deg); }
                     20% { -webkit-transform: rotateZ(2deg); }
                     30% { -webkit-transform: rotateZ(-2deg); }
                     40% { -webkit-transform: rotateZ(2deg); }
                     50% { -webkit-transform: rotateZ(-2deg); }
                     60% { -webkit-transform: rotateZ(2deg); }
                     70% { -webkit-transform: rotateZ(-1deg); }
                     80% { -webkit-transform: rotateZ(1deg); }
                     90% { -webkit-transform: rotateZ(-1deg); }
                    100% { -webkit-transform: rotateZ(0deg); }
                }

                .subItemCnt .subItem div {
                    color: hsl(0, 0%, 100%);
                    font: normal normal normal 12px/120% QuicksandBold, Arial, sans-serif;
                    text-shadow: 0 1px 2px hsl(0, 0%, 0%);
                    padding: 5px 0 5px 0;
                    -webkit-transform-origin: 100% 50%;
                    /*outline: 1px dotted green;*/
                }

                    .subItemCnt .subItem:hover div {
                        -webkit-transform-origin: 100% 50%;
                        -webkit-animation-name: ShakeSubMenuItem;
                        -webkit-animation-duration: 0.5s;
                        -webkit-animation-timing-function: ease;
                    }

                    .subItemCnt .subItem.ShakeMoreSubMenuItem div {
                        -webkit-transform-origin: 100% 50%;
                        -webkit-animation-name: ShakeMoreSubMenuItem;
                        -webkit-animation-duration: 1.0s;
                        -webkit-animation-timing-function: ease;
                    }

                    .subItemCnt .subItem.highlighted div {
                        color: hsl(210, 100%, 85%);
                        -webkit-transition: all 0.15s linear;
                    }


        /*.mainMenuCnt .separator {
            float: right;
            clear: both;
            width: 156px;
            height: 1px;
            background-image: url("images/gui/h_line_separator.gif");
            background-position: 0 0;    *//* x is dynamic *//*
            background-repeat: repeat-x;
        }*/


    /*
        Unsupported browser warning
    */
    #unsupportedBrowserWarning {
        position: absolute;
        left: 0;
        top: 300px;
        width: 600px;
        height: 200px;
        padding: 10px;
        border-radius: 15px 15px;
        border: 2px solid hsl(0, 100%, 90%);
        background-color: hsl(0, 100%, 50%);
        display: none;
    }


    /*
        Footer
    */
    .footerCnt {
        position: absolute;
        right: 6px;
        top: 400px;
        padding: 10px 5px 8px 10px;
        opacity: 0.2;
        -webkit-transition: all 0.5s ease-out;
    }
        .footerCnt:hover {
            opacity: 1.0;
            -webkit-transition: all 0.5s ease-out;
        }
        .footerCnt .border {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border: 2px solid hsl(214, 100%, 90%);
            border-radius: 15px 15px;
            -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 100%,
                                    from(hsla(0, 0%, 0%, 0.7)),
                                      to(hsla(0, 0%, 0%, 0.7)),
                         color-stop(0.2, hsla(0, 0%, 0%, 0.2)),
                         color-stop(0.6, hsla(0, 0%, 0%, 0.0)) );
        }
        .footerCnt .gradient {
            position: absolute;
            left: 2px;
            top: 2px;
            width: 100%;
            height: 100%;
            border-radius: 13px 13px;
            background-color: hsl(215, 53%, 68%);
            -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 100%,
                                from(hsla(0, 100%, 50%, 0.3)),
                                  to(hsla(0, 100%, 50%, 0.1)),
                     color-stop(0.5, hsla(0, 100%, 50%, 0.1)) );
        }
        .footerCnt .content {
            color: hsl(0, 0%, 100%);
            font-family: Arial, sans-serif;
            font-size: 10px;
            text-align: center;
            white-space: nowrap;
            text-shadow: none;
        }


    .bulb {
        position: absolute;
        left: 5px;
        bottom: 2px;
        opacity: 0.5;
        -webkit-transition: all 0.5s ease;
        cursor: pointer;
    }
        .bulb:hover {
            opacity: 1.0;
            -webkit-transition: all 0.5s ease;
        }
        .bulb img { -webkit-transition: all 0.5s ease; }
        .bulb:hover img {
            -webkit-transform: scale(5.81);
            -webkit-transition: all 0.5s ease;
        }


    .iconShock {
        position: absolute;
        left: 25px;
        bottom: -30px;
    }
        .iconShock > a {
            font-size: 10px;
        }


/*********************************************************************
    Page already loaded column
*********************************************************************/
.pageAlreadyLoadedCnt {
    position: absolute;
    left:  167px;
    top: 10px;
    opacity: 0.0;
}


/*********************************************************************
    Right column
*********************************************************************/
.rightColumnCnt {
    position: absolute;
    left: 250px;
    top: 0;
    width: 750px;
    height: 1000px;
    -webkit-perspective: 1000;
    -webkit-transform-style: preserve-3d;

    /*outline: 1px dotted blue;*/
}


    @-webkit-keyframes RenderingViewFadeIn
    {
        from { opacity: 0.0; -webkit-transform: rotateY(-70deg); }
          to { opacity: 1.0; -webkit-transform: rotateY(0deg); }
    }

    @-webkit-keyframes RenderingViewFadeOut
    {
        from { opacity: 1.0; -webkit-transform: rotateY(0deg); }
          to { opacity: 0.0; -webkit-transform: rotateY(45deg); }
    }


    #renderingView {
        position: absolute;
        left: 0;
        top: 30px;
        width: 750px;
        /*height: 100%;*/
        /*opacity: 0.0;*/

        /*outline: 1px dotted yellow;*/
    }

        #renderingView.fadeIn {
            -webkit-transform-origin: 25% 50%;

            -webkit-animation-name: RenderingViewFadeIn;
            -webkit-animation-duration: 0.5s;
            -webkit-animation-timing-function: ease-out;

            opacity: 1.0;
        }

        #renderingView.fadeOut {
            -webkit-transform-origin: 0% 50%;

            -webkit-animation-name: RenderingViewFadeOut;
            -webkit-animation-duration: 0.2s;
            -webkit-animation-timing-function: linear;

            opacity: 0.0;
        }

        #renderingView.fadeOutState { opacity: 0.0; }


/*********************************************************************
    Error page
*********************************************************************/
@-webkit-keyframes rotate4Ever {
    from { -webkit-transform: rotateZ(0deg); }
      to { -webkit-transform: rotateZ(360deg); }
}

.rotate4Ever {
    -webkit-animation-name: rotate4Ever;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}


@-webkit-keyframes rotate4EverBackwards {
    from { -webkit-transform: rotateZ(360deg); }
      to { -webkit-transform: rotateZ(0deg); }
}

.rotate4EverBackwards {
    -webkit-animation-name: rotate4EverBackwards;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}


.errorPageCnt { /* placeholder */ }

    .errorPageCnt .spaceShip {
        position: absolute;
        left: 20px;
        top: 170px;
        width: 128px;
        height: 128px;
        background: url("images/icons/error/spaceship.png");
    }

    .errorPageCnt .astronaut {
        position: absolute;
        left: 170px;
        top: 300px;
        width: 128px;
        height: 128px;
        background: url("images/icons/error/astronaut.png");
    }

    .errorPageCnt .satellite {
        position: absolute;
        left: 300px;
        top: 150px;
        width: 128px;
        height: 128px;
        background: url("images/icons/error/satellite.png");
    }


/*********************************************************************
    AJAX loading spinner
*********************************************************************/
.loadingSpinner {
    position: absolute;
    left: 475px;
    top: 10px;
    width: 50px;
    height: 50px;
    background: url("images/gui/spinner.png");

    opacity: 0.0;
    -webkit-transition: opacity 0.250s linear;
}

    .loadingSpinner.visible {
        opacity: 1.0;
        -webkit-transition: opacity 0.250s linear;
    }

    .loadingSpinner.rotate {
        -webkit-animation-name: rotate4Ever;
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
    }

