/* ----------------------------- */
/*  =     Default CSS		     */
/* ----------------------------- */

@font-face {
    font-family: 'MuseoSans500';
    src: url('../font/museosans_500-webfont.eot');
    src: local('MuseoSans500'), url('../font/museosans_500-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/*@font-face {
    font-family: 'MuseoSans500Italic';
    src: url('../font/museosans_500_italic-webfont.eot');
    src: local('MuseoSans500Italic'), url('../font/museosans_500_italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}*/
@font-face {
    font-family: 'MuseoSlab500';
    src: url('../font/museo_slab_500-webfont.eot');
    src: local('MuseoSlab500'), url('../font/museo_slab_500-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/*@font-face {
    font-family: 'MuseoSlab500Italic';
    src: url('../font/museo_slab_500italic-webfont.eot');
    src: local('MuseoSlab500Italic'), url('../font/museo_slab_500italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}*/
body {
    margin: 0;
    padding: 0;
    background: #dfe2e3;
    font: 80% "MuseoSans500", Arial, Helvetica, sans-serif;
    color: #454545;
}
header,
footer,
section,
nav,
article {
    display: block;
}
a {
    text-decoration: none;
}
a:link,
a:visited {
    color: #000;
}
a:hover,
a:focus,
a:active {
    text-decoration: underline;
}
a:focus,
a:active,
input {
    outline: none;
}
a img {
    border: none;
    vertical-align: bottom;
}
h1 {
    font-size: 3.75em;
    line-height: 0.7;
}
h2 {
    font: normal 1.4em/1 "MuseoSlab500", Arial, Helvetica, sans-serif;
}
ul, ol {
    margin: 0;
}
li {
    margin-bottom: 5px;
}
p {
    margin: 19px 0;
    font-size: 1.1em;
    line-height: 1.35;
}
em {
    font-style: italic;
}
strong {
    font-weight: bold;
    color: #363535;
}

thead {
    background-color: #ccc;
    font-weight: bold;
}
/* ----------------------------- */
/*  =     Wrapper		         */
/* ----------------------------- */

nav,
#bgBanner,
#bgSection,
#bgFooter {
    width: 80%;
    margin: 0 auto;
}

/* Inside a facebox */
#facebox .popup .content section div
{
    width: 1160px;
    margin: 0 auto;
}

#bgSection:after {
    content: "";
    display: block;
    clear: both;
}

/* ----------------------------- */
/*  =     Banner		         */
/* ----------------------------- */

header {
    background-color: #40c0e0;
    background: url(../images/wave1.png) right top no-repeat,
    url(../images/wave2.png) right 37px no-repeat,
    -webkit-gradient(linear, left bottom, left top, from(#2fa6c6), to(#4acff1));
    background: url(../images/wave1.png) right top no-repeat,
    url(../images/wave2.png) right 37px no-repeat,
    -moz-linear-gradient(center bottom, #2fa6c6, #4acff1);
    background: url(../images/wave1.png) right top no-repeat,
    url(../images/wave2.png) right 37px no-repeat,
    -o-linear-gradient(#4acff1, #2fa6c6);
    background: url(../images/wave1.png) right top no-repeat,
    url(../images/wave2.png) right 37px no-repeat,
    -ms-linear-gradient(#4acff1, #2fa6c6);
    background: url(../images/wave1.png) right top no-repeat,
    url(../images/wave2.png) right 37px no-repeat,
    linear-gradient(#4acff1, #2fa6c6);
}
header #bgBanner {
    position: relative;
}
header #bgBanner h1 {
    display: inline-block;
    position: relative;
    left: -12px;
    margin: 44px 0 18px;
}
header #bgBanner h1 span {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 85%;
    height: 100%;
}
header #bgBanner h1 a:link,
header #bgBanner h1 a:visited {
    padding-right: 51px;
    background: url(../images/speed.png) right 21px no-repeat;
    color: #fff;
    text-shadow: 1px 1px 1px #2a8ea8,
    0 0 0 #fff;
}
header #bgBanner h1 a  em {
    font-family: "MuseoSans500", Arial, Helvetica, sans-serif;
}
header #bgBanner h1 a + a:link,
header #bgBanner h1 a + a:visited {
    display: block;
    padding: 0 0 12px 34px;
    background: url(../images/graph.png) 11px 5px no-repeat;
    font-weight: normal;
    font-size: 0.38em;
    line-height: 1.7;
    color: #125e72;
    text-shadow: 1px 1px 1px #88e6ff,
    0px 0px 1px #0E4F60;
    -webkit-box-reflect: below -40px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.2)));
}
header #bgBanner h1 a:hover,
header #bgBanner h1 a:focus,
header #bgBanner h1 a:active {
    text-decoration: none;
    text-shadow: 1px 1px 2px #2a8ea8,
    0 0 20px #fff;
}
header #bgBanner h1 a:hover  em,
header #bgBanner h1 a:focus  em,
header #bgBanner h1 a:active  em {
    text-shadow: 1px 1px 2px #2a8ea8,
    30px 0px 0 rgba(255, 255, 255, 0.2),
    0 0 20px #fff;
}

/* ----------------------------- */
/*  =     Clouds		         */
/* ----------------------------- */

header img {
    position: absolute;
    z-index: 80;
    top: 28px;
    right: 53%;
    width: 91px;
    height: 51px;
}
header img + img {
    z-index: 70;
    top: 62px;
    right: 40%;
    width: 74px;
    height: 41px;
}
header img + img + img {
    z-index: 60;
    top: 12px;
    right: 15%;
    width: 74px;
    height: 42px;
}

/* ----------------------------- */
/*  =     Rocket		         */
/* ----------------------------- */

header #bgBanner #rocket {
    position: absolute;
    z-index: 90;
    top: -235px;
    left: 250px;
    width: 594px;
    height: 475px;
    background: transparent url(../images/rocket.png) left bottom no-repeat;
}
header #bgBanner #rocket:hover,
header #bgBanner #rocket:focus,
header #bgBanner #rocket:active {
    background: transparent url(../images/rocket.png) right top no-repeat;
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -o-transform: rotate(20deg);
}

/* ----------------------------- */
/*  =     Slogan		         */
/* ----------------------------- */

header #bgBanner p {
    float: right;
    margin-top: 72px;
    font: 1.4em/1 "MuseoSlab500", Arial, Helvetica, sans-serif;
    color: #a2e7f9;
    text-align: right;
    -moz-transform: rotate(-12deg);
    -webkit-transform: rotate(-12deg);
    -o-transform: rotate(-12deg);
}
header #bgBanner p span {
    display: block;
    padding: 0 85px 3px 0;
}
header #bgBanner p span + span {
    padding-right: 22px;
    color: #d0f5ff;
    -moz-transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -o-transform: rotate(3deg);
}
header #bgBanner p span + span + span {
    padding-right: 0;
    color: #edfafd;
    -moz-transform: rotate(8deg);
    -webkit-transform: rotate(8deg);
    -o-transform: rotate(8deg);
}

/* ----------------------------- */
/*  =     Navigation	         */
/* ----------------------------- */

header #bgNavigation {
    height: 45px;
    border-bottom: 1px solid #0f4f60;
    background-color: #0e5467;
    background: url(../images/sprite.png) left -35px repeat-x,
    -webkit-gradient(linear, left bottom, left top, from(#166d84), to(#0e5264));
    background: url(../images/sprite.png) left -35px repeat-x,
    -moz-linear-gradient(center bottom, #166d84, #0e5264);
    background: url(../images/sprite.png) left -35px repeat-x,
    -o-linear-gradient(#0e5264, #166d84);
    background: url(../images/sprite.png) left -35px repeat-x,
    -ms-linear-gradient(#0e5264, #166d84);
    background: url(../images/sprite.png) left -35px repeat-x,
    linear-gradient(#0e5264, #166d84);
    border-top: 1px solid #46caed;
    font-size: 1.4em;
    line-height: 1;
    -moz-box-shadow: inset 0 4px 3px #083d4b;
    -webkit-box-shadow: inset 0 4px 3px #083d4b;
    box-shadow: inset 0 4px 3px #083d4b;
}
header #bgNavigation nav {
    position: relative;
}
header #bgNavigation nav > ul {
    position: absolute;
    z-index: 100;
    top: -140px;
    /* right: 0; */
    min-width: 420px;
    padding: 154px 0 14px;
    text-align: right;
}
header #bgNavigation nav > ul > li {
    display: inline;
    position: relative;
    margin: 0;
    padding: 0;
    border-left: 2px solid #fff;
}
header #bgNavigation nav > ul > li a:link,
header #bgNavigation nav > ul > li a:visited {
    padding: 14px 16px 14px 19px;
    color: #fff;
    text-shadow: 1px 1px 0 #0a3e4c,
    0 0 0 #2abbe2;
}
header #bgNavigation nav > ul > li:first-child a,
header #bgNavigation nav > ul > li:first-child {
    padding-left: 0;
    border-left: 0;
}
header #bgNavigation nav > ul > li:last-child a,
header #bgNavigation nav > ul > li:last-child {
    padding-right: 0;
}
header #bgNavigation nav > ul > li a.selected,
header #bgNavigation nav > ul > li a:hover,
header #bgNavigation nav > ul > li a:focus,
header #bgNavigation nav > ul > li a:active {
    color: #9ae539;
    text-decoration: none;
    text-shadow: 1px 1px 0 #0a3e4c,
    1px 1px 30px #2abbe2;
}

/* ----------------------------- */
/*  =     Sub Navigation	     */
/* ----------------------------- */

header #bgNavigation nav ul li:hover ul,
header #bgNavigation nav ul li:focus ul,
header #bgNavigation nav ul li:active ul,
header #bgNavigation nav ul li a:hover + ul,
header #bgNavigation nav ul li a:focus + ul,
header #bgNavigation nav ul li a:active + ul {
    visibility: visible;
    left: 0;
    -moz-opacity: 1;
    opacity: 1;
}
header #bgNavigation nav ul li ul {
    position: absolute;
    z-index: 110;
    top: 32px;
    left: -50px;
    visibility: hidden;
    width: 140%;
    background: #0b4e60;
    font-size: 0.9em;
    line-height: 1;
    text-align: left;
    -moz-opacity: 0;
    opacity: 0;
    -moz-border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    -moz-box-shadow: inset 0 4px 3px #083d4b;
    -webkit-box-shadow: inset 0 4px 3px #083d4b;
    box-shadow: inset 0 4px 3px #083d4b;
}
header #bgNavigation nav ul li ul li{
    margin: 0;
    padding: 0;
    background: url(../images/subNav.png) 10px 12px no-repeat;
}
header #bgNavigation nav ul li ul li a:link,
header #bgNavigation nav ul li ul li a:visited {
    display: block;
    padding: 10px 10px 10px 30px;
    border: 0;
    border-top: 1px solid #0e5f75;
    border-bottom: 1px solid #084555;
    background: url(../images/sprite.png) -80px -35px no-repeat;
    color: #9ae539;
}
header #bgNavigation nav ul li ul li:first-child a {
    border-top: 0;
}
header #bgNavigation nav ul li ul li:last-child a {
    border-bottom: 0;
}
header #bgNavigation nav ul li ul li:hover,
header #bgNavigation nav ul li ul li:focus,
header #bgNavigation nav ul li ul li:active {
    background: url(../images/subNav.png) 20px 12px no-repeat;
    text-shadow: 1px 1px 0 #0a3e4c,
    1px 1px 5px #00c9ff;
}
header #bgNavigation nav ul li ul li a:hover,
header #bgNavigation nav ul li ul li a:focus,
header #bgNavigation nav ul li ul li a:active {
    padding: 10px 10px 10px 40px;
    background: url(../images/sprite.png) -40px -35px repeat-x;
}

/* ----------------------------- */
/*  =     Layout		         */
/* ----------------------------- */

section #bgSection article {
    /* float: left; */
    margin-right: 40px;
}
section #bgSection article:not([class]),
section #bgSection article.forty + article.sixty,
section #bgSection article.sixty + article.forty,
section #bgSection article.fifty + article.fifty,
section #bgSection article.thirty + article.thirty + article.thirty {
    margin-right: 0;
}
section #bgSection article:not([class]),
section #bgSection article.forty + article.sixty + article,
section #bgSection article.sixty + article.forty + article,
section #bgSection article.fifty + article.fifty + article,
section #bgSection article.thirty + article.thirty + article.thirty + article {
    clear: both;
}
section #bgSection article.thirty {
    width: 293px;
}
section #bgSection article.forty {
    width: 364px;
}
section #bgSection article.fifty {
    width: 460px;
}
section #bgSection article.sixty {
    width: 556px;
}

/* ----------------------------- */
/*  =     Content		         */
/* ----------------------------- */

section {
    padding: 24px 0 40px 0;
    border-bottom: 1px solid #ccd9dc;
    background: #f6f8f9;
}
section #bgSection article h2 {
    margin-bottom: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #e3e6e7;
    color: #3dbbdd;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #fff;
}
section #bgSection article h2 + p {
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid #fff;
}
section #bgSection article p {
    text-align: justify;
    text-shadow: 1px 1px 0 #fff;
}
section #bgSection article a {
/*    font: italic bold 0.9em "MuseoSans500", Arial, Helvetica, sans-serif; */
}
section #bgSection article a:hover,
section #bgSection article a:focus,
section #bgSection article a:active {
    color: #0f4f60;
}
section #bgSection article input[type="text"]::-webkit-input-placeholder,
section #bgSection article input[type="password"]::-webkit-input-placeholder {
    color: #bbbbbb;
}
section #bgSection article input[type="text"]:-moz-placeholder,
section #bgSection article input[type="password"]:-moz-placeholder {
    color: #bbbbbb;
}
section #bgSection article input[type="text"],
section #bgSection article input[type="email"],
section #bgSection article input[type="number"],
section #bgSection article input[type="password"],
section #bgSection article input[type="file"],
section #bgSection article select,
section #bgSection article textarea {
    padding: 6px;
    border: 3px solid #f6f8f9;
    background: #fbfbfb;
    font: 1em "MuseoSans500", Arial, Helvetica, sans-serif;
    color: #454545;
    -moz-box-shadow: inset 2px 2px 3px #afafaf;
    -webkit-box-shadow: inset 2px 2px 3px #afafaf;
    box-shadow: inset 2px 2px 3px #afafaf;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
section #bgSection article input[type="text"]:hover,
section #bgSection article input[type="password"]:hover,
section #bgSection article input[type="file"]:hover,
section #bgSection article select:hover,
section #bgSection article textarea:hover,
section #bgSection article input[type="text"]:focus,
section #bgSection article input[type="password"]:focus,
section #bgSection article input[type="file"]:focus,
section #bgSection article select:focus,
section #bgSection article textarea:focus,
section #bgSection article input[type="text"]:active,
section #bgSection article input[type="password"]:active,
section #bgSection article input[type="file"]:active,
section #bgSection article select:active,
section #bgSection article textarea:active {
    border: 3px solid #3DBBDD;
    background: #fff;
    color: #3DBBDD;
}
section #bgSection article input[type="button"],
section #bgSection article input[type="submit"],
section #bgSection article input[type="reset"] {
    cursor: pointer;
    padding: 12px;
    border: 0;
    border-top: 1px solid #ccf79d;
    vertical-align: bottom;
    background-color: #8dd73a;
    background: url(../images/button.png) left top no-repeat,
    -webkit-gradient(linear, left bottom, left top, from(#89d138), to(#9ceb43));
    background: url(../images/button.png) left top no-repeat,
    -moz-linear-gradient(center bottom, #89d138, #9ceb43);
    background: url(../images/button.png) left top no-repeat,
    -o-linear-gradient(#9ceb43, #89d138);
    background: url(../images/button.png) left top no-repeat,
    -ms-linear-gradient(#9ceb43, #89d138);
    background: url(../images/button.png) left top no-repeat,
    linear-gradient(#9ceb43, #89d138);
    font: italic bold 1.25em "MuseoSans500", Arial, Helvetica, sans-serif;
    color: #fff;
    text-transform: uppercase;
    text-shadow: -1px -1px 0 #6baf1e;
    -moz-box-shadow: 1px 1px 2px #6c6c6c;
    -webkit-box-shadow: 1px 1px 2px #6c6c6c;
    box-shadow: 1px 1px 2px #6c6c6c;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
}
section #bgSection article input[type="button"]:hover,
section #bgSection article input[type="submit"]:hover,
section #bgSection article input[type="reset"]:hover,
section #bgSection article input[type="button"]:focus,
section #bgSection article input[type="submit"]:focus,
section #bgSection article input[type="reset"]:focus,
section #bgSection article input[type="button"]:active,
section #bgSection article input[type="submit"]:active,
section #bgSection article input[type="reset"]:active {
    background-color: #8dd73a;
    background: url(../images/button.png) left top no-repeat,
    -webkit-gradient(linear, left bottom, left top, from(#9ceb43), to(#89d138));
    background: url(../images/button.png) left top no-repeat,
    -moz-linear-gradient(center bottom, #9ceb43, #89d138);
    background: url(../images/button.png) left top no-repeat,
    -o-linear-gradient(#89d138, #9ceb43);
    background: url(../images/button.png) left top no-repeat,
    -ms-linear-gradient(#89d138, #9ceb43);
    background: url(../images/button.png) left top no-repeat,
    linear-gradient(#89d138, #9ceb43);
}

/* ----------------------------- */
/*  =     Footer		         */
/* ----------------------------- */

footer {
    background-color: #dfe2e3;
    background: -webkit-gradient(linear, left bottom, left top, from(#dfe2e3), to(#eceff0));
    background: -moz-linear-gradient(center bottom, #dfe2e3, #eceff0);
    background: -o-linear-gradient(#eceff0, #dfe2e3);
    background: -ms-linear-gradient(#eceff0, #dfe2e3);
    background: linear-gradient(#eceff0, #dfe2e3);
}
footer:before {
    content: "";
    display: block;
    height: 18px;
    background: #dce5e7;
    -moz-box-shadow: 0 11px 6px #b3c1c5;
    -webkit-box-shadow: 0 11px 6px #b3c1c5;
    box-shadow: 0 11px 6px #b3c1c5;
}
footer #bgFooter {
    padding: 15px 0 30px 0;
    text-align: right;
}
footer #bgFooter a:link,
footer #bgFooter a:visited {
    display: inline-block;
    margin-right: 8px;
    font: italic bold 0.9em/1.35 "MuseoSlab500", Arial, Helvetica, sans-serif;
    color: #9fa6a8;
    text-align: right;
    text-shadow: 1px 1px 0 #fff;
}
footer #bgFooter a:hover,
footer #bgFooter a:focus,
footer #bgFooter a:active {
    color: #3dbbdd;
}

/* ----------------------------- */
/*  =     ANIMATIONS		     */
/* ----------------------------- */

@media only screen and (min-width:640px) {
    /* ----------------------------- */
    /*  =     CSS3 Transitions       */
    /* ----------------------------- */

    a:link,
    a:visited,
    header #bgBanner h1 a:link  em,
    header #bgBanner h1 a:visited  em,
    input,
    select,
    textarea,
    header #bgNavigation nav ul li ul,
    header #bgNavigation nav ul li ul li {
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
    header #bgNavigation nav ul li ul,
    header #bgNavigation nav ul li ul li {
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
    a.selected,
    a:hover,
    a:focus,
    a:active,
    header #bgBanner h1 a:hover  em,
    header #bgBanner h1 a:focus  em,
    header #bgBanner h1 a:active  em,
    input:hover,
    input:focus,
    input:active,
    select:hover,
    select:focus,
    select:active,
    textarea:hover,
    textarea:focus,
    textarea:active,
    header #bgNavigation nav ul li:hover ul,
    header #bgNavigation nav ul li:focus ul,
    header #bgNavigation nav ul li:active ul,
    header #bgNavigation nav ul li ul li:hover,
    header #bgNavigation nav ul li ul li:focus,
    header #bgNavigation nav ul li ul li:active {
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out
    }
    header #bgBanner #rocket {
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
    }
    header #bgBanner #rocket:hover,
    header #bgBanner #rocket:focus,
    header #bgBanner #rocket:active {
        -webkit-transition: all 2s ease-in;
        -moz-transition: all 2s ease-in;
        -o-transition: all 2s ease-in;
        transition: all 2s ease-in;
    }

    /* ----------------------------- */
    /*  =     CSS3 Animation         */
    /* ----------------------------- */

    header {

    }
    header img {
        -webkit-animation: cloud1 20s infinite linear;
        -moz-animation: cloud1 20s infinite linear;
        animation: cloud1 20s infinite linear;
    }
    header img + img {
        -webkit-animation: cloud2 50s infinite linear;
        -moz-animation: cloud2 50s infinite linear;
        animation: cloud2 50s infinite linear;
    }
    header img + img + img {
        -webkit-animation: cloud3 30s infinite linear;
        -moz-animation: cloud3 30s infinite linear;
        animation: cloud3 30s infinite linear;
    }
    header #bgNavigation nav ul li ul li a:hover,
    header #bgNavigation nav ul li ul li a:focus,
    header #bgNavigation nav ul li ul li a:active {
        -webkit-animation: nav 0.8s infinite linear;
        -moz-animation: nav 0.8s infinite linear;
        animation: nav 0.8s infinite linear;
    }
    @-webkit-keyframes wave {
        from {
            background: url(../images/wave1.png) 120% top no-repeat,
            url(../images/wave2.png) right 37px no-repeat;
        }
        50% {
            background: url(../images/wave1.png) 90% top no-repeat,
            url(../images/wave2.png) right 60px no-repeat;
        }
        to {
            background: url(../images/wave1.png) 120% top no-repeat,
            url(../images/wave2.png) right 37px no-repeat;
        }
    }
    @-webkit-keyframes cloud1 {
        from {
            right: 0%;
        }
        to {
            right: 100%;
        }
    }
    @-webkit-keyframes cloud2 {
        from {
            visibility: hidden;
            right: 0%;
        }
        5% {
            visibility: hidden;
            right: 0%;
        }
        to {
            visibility: visible;
            right: 100%;
        }
    }
    @-webkit-keyframes cloud3 {
        from {
            visibility: hidden;
            right: 100%;
        }
        10% {
            visibility: hidden;
            right: 100%;
        }
        to {
            visibility: visible;
            right:0%;
        }
    }
    @-webkit-keyframes nav {
        from {
            background: url(../images/sprite.png) -80px -35px repeat-x;
        }
        to {
            background: url(../images/sprite.png) -40px -35px repeat-x;
        }
    }
    @-moz-keyframes wave {
        from {
            background: url(../images/wave1.png) 120% top no-repeat,
            url(../images/wave2.png) right 37px no-repeat;
        }
        50% {
            background: url(../images/wave1.png) 90% top no-repeat,
            url(../images/wave2.png) right 60px no-repeat;
        }
        to {
            background: url(../images/wave1.png) 120% top no-repeat,
            url(../images/wave2.png) right 37px no-repeat;
        }
    }
    @-moz-keyframes cloud1 {
        from {
            right: 0%;
        }
        to {
            right: 100%;
        }
    }
    @-moz-keyframes cloud2 {
        from {
            visibility: hidden;
            right: 0%;
        }
        5% {
            visibility: hidden;
            right: 0%;
        }
        to {
            visibility: visible;
            right: 100%;
        }
    }
    @-moz-keyframes cloud3 {
        from {
            visibility: hidden;
            right: 100%;
        }
        10% {
            visibility: hidden;
            right: 100%;
        }
        to {
            visibility: visible;
            right:0%;
        }
    }
    @-moz-keyframes nav {
        from {
            background: url(../images/sprite.png) -80px -35px repeat-x;
        }
        to {
            background: url(../images/sprite.png) -40px -35px repeat-x;
        }
    }
    @keyframes wave {
        from {
            background: url(../images/wave1.png) 120% top no-repeat,
            url(../images/wave2.png) right 37px no-repeat;
        }
        50% {
            background: url(../images/wave1.png) 90% top no-repeat,
            url(../images/wave2.png) right 60px no-repeat;
        }
        to {
            background: url(../images/wave1.png) 120% top no-repeat,
            url(../images/wave2.png) right 37px no-repeat;
        }
    }
    @keyframes cloud1 {
        from {
            right: 0%;
        }
        to {
            right: 100%;
        }
    }
    @keyframes cloud2 {
        from {
            visibility: hidden;
            right: 0%;
        }
        5% {
            visibility: hidden;
            right: 0%;
        }
        to {
            visibility: visible;
            right: 100%;
        }
    }
    @keyframes cloud3 {
        from {
            visibility: hidden;
            right: 100%;
        }
        10% {
            visibility: hidden;
            right: 100%;
        }
        to {
            visibility: visible;
            right:0%;
        }
    }
    @keyframes nav {
        from {
            background: url(../images/sprite.png) -80px -35px repeat-x;
        }
        to {
            background: url(../images/sprite.png) -40px -35px repeat-x;
        }
    }
}

/* ----------------------------- */
/*  =     WEB MOBILE		     */
/* ----------------------------- */

@media only screen and (max-device-width:640px), only screen and (max-width:640px) {
    body,
    nav,
    #bgBanner,
    #bgSection,
    #bgFooter {
        width: auto;
        margin: auto;
        padding: auto;
    }
    body {
        font: 100% "MuseoSans500", Arial, Helvetica, sans-serif;
    }
    img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
        max-width: 100%;
    }
    textarea, table, td, th, code, pre, samp, p {
        word-wrap: break-word;
    }
    code, pre, samp {
        white-space: pre-line;
    }
    .mobile {
        display: none !important;
    }

    /* ----------------------------- */
    /*  =     Banner		         */
    /* ----------------------------- */

    h1 {
        font-size: 3em;
    }
    header img {
        z-index: 0;
        top: 4%;
        right: auto;
        left: 10px;
        width: 70px;
        height: 39px;
    }
    header img + img + img {
        z-index: 0;
        right: 10px;
        left: auto;
        width: 60px;
        height: 34px;
    }
    header {
        background: url(../images/wave1.png) center 17px no-repeat,
        url(../images/wave2.png) right 53px no-repeat,
        -webkit-gradient(linear, left bottom, left top, from(#2fa6c6), to(#4acff1));
        background: url(../images/wave1.png) center 17px no-repeat,
        url(../images/wave2.png) right 53px no-repeat,
        -moz-linear-gradient(center bottom, #2fa6c6, #4acff1);
        background: url(../images/wave1.png) center 17px no-repeat,
        url(../images/wave2.png) right 53px no-repeat,
        -o-linear-gradient(#4acff1, #2fa6c6);
        background: url(../images/wave1.png) center 17px no-repeat,
        url(../images/wave2.png) right 53px no-repeat,
        -ms-linear-gradient(#4acff1, #2fa6c6);
        background: url(../images/wave1.png) center 17px no-repeat,
        url(../images/wave2.png) right 53px no-repeat,
        linear-gradient(#4acff1, #2fa6c6);
    }
    header #bgBanner {
        padding: 15px 0 5px 0;
        text-align: center;
    }
    header #bgBanner h1 {
        left: 0;
        margin: 0;
        line-height: 0.6;
    }
    header #bgBanner h1 a:link,
    header #bgBanner h1 a:visited {
        padding-right: 0;
        background: none;
        text-align: center;
        color: #d6edfa;
        text-shadow: 2px 2px 1px #2a8ea8,
        0 0 0 #fff;
    }
    header #bgBanner h1 a  em {

    }
    header #bgBanner h1 a:hover  em,
    header #bgBanner h1 a:focus  em,
    header #bgBanner h1 a:active  em {
        text-shadow: 2px 2px 1px #2a8ea8,
        0px 0px 0 rgba(255, 255, 255, 0.2),
        0 0 0 #fff;
    }
    header #bgBanner h1 a + a:link,
    header #bgBanner h1 a + a:visited {
        padding: 0;
        background: url(../images/graph.png) 20px 16px no-repeat;
        font-size: 0.8em;
        line-height: 1.2;
        text-shadow: 2px 2px 1px #88e6ff,
        0px 0px 1px #0E4F60;
        -webkit-box-reflect: none;
    }

    /* ----------------------------- */
    /*  =     Navigation	         */
    /* ----------------------------- */

    header #bgNavigation {
        height: auto;
        padding: 0;
    }
    header #bgNavigation nav > ul {
        position: static;
        min-width: 0;
        padding: 0;
        text-align: center;
    }
    header #bgNavigation nav > ul > li {
        display: block;
        border-left: 0;
        border-top: 1px solid #197891;
        border-bottom: 1px solid #0b4e60;
        padding: 0;
    }
    header #bgNavigation nav > ul > li a:link,
    header #bgNavigation nav > ul > li a:visited {
        display: block;
        padding: 10px 0 10px 0;
        background: -webkit-gradient(linear, left bottom, left top, from(#0e5264), to(#166d84));
        background: -moz-linear-gradient(center bottom, #0e5264, #166d84);
        background: -o-linear-gradient(#166d84, #0e5264);
        background: -ms-linear-gradient(#166d84, #0e5264);
        background: linear-gradient(#166d84, #0e5264);
    }
    header #bgNavigation nav > ul > li:first-child a,
    header #bgNavigation nav > ul > li:first-child {
        border-top: 0;
    }
    header #bgNavigation nav > ul > li:first-child {
        border-top: 1px solid #0b4e60;
    }
    header #bgNavigation nav > ul > li:last-child a,
    header #bgNavigation nav > ul > li:last-child {
        border-bottom: 0;
        padding: 10px 0 10px 0;
    }
    header #bgNavigation nav > ul > li:last-child {
        padding: 0;
    }

    /* ----------------------------- */
    /*  =     Sub Navigation	     */
    /* ----------------------------- */

    header #bgNavigation nav ul li ul,
    header #bgNavigation nav ul li:hover ul,
    header #bgNavigation nav ul li:focus ul,
    header #bgNavigation nav ul li:active ul,
    header #bgNavigation nav ul li a:hover + ul,
    header #bgNavigation nav ul li a:focus + ul,
    header #bgNavigation nav ul li a:active + ul {
        display: none;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        -moz-opacity: 0;
        opacity: 0;
        -moz-border-radius: 0 0 0 0;
        -webkit-border-radius: 0 0 0 0;
        border-radius: 0 0 0 0;
    }
    header #bgNavigation nav ul ul:target,
    header #bgNavigation nav ul li:hover ul:target,
    header #bgNavigation nav ul li:focus ul:target,
    header #bgNavigation nav ul li:active ul:target,
    header #bgNavigation nav ul li a:hover + ul:target,
    header #bgNavigation nav ul li a:focus + ul:target,
    header #bgNavigation nav ul li a:active + ul:target {
        display: block;
        visibility: visible;
        -moz-opacity: 1;
        opacity: 1;
    }
    header #bgNavigation nav ul li ul li {
        background: url(../images/subNav.png) 10px 14px no-repeat;
    }
    header #bgNavigation nav ul li ul li a:link,
    header #bgNavigation nav ul li ul li a:visited {
        padding: 10px 5px 10px 30px;
        color: #3fd3fa;
    }
    header #bgNavigation nav ul li ul li:hover,
    header #bgNavigation nav ul li ul li:focus,
    header #bgNavigation nav ul li ul li:active {
        background: url(../images/subNav.png) 20px 14px no-repeat;
    }
    header #bgNavigation nav ul li ul li a:hover,
    header #bgNavigation nav ul li ul li a:focus,
    header #bgNavigation nav ul li ul li a:active {
        padding: 10px 5px 10px 40px;
        color: #88e6ff;
    }

    /* ----------------------------- */
    /*  =     Layout		         */
    /* ----------------------------- */

    section #bgSection article {
        clear: both;
        float: none;
        margin: 0;
    }
    section #bgSection article.thirty,
    section #bgSection article.forty,
    section #bgSection article.fifty,
    section #bgSection article.sixty	{
        width: 100%;
    }

    /* ----------------------------- */
    /*  =     Content		         */
    /* ----------------------------- */

    section {
        padding: 5px 10px 10px 10px;
        border-bottom: 1px solid #ccd9dc;
        background: #f6f8f9;
    }
    section #bgSection article h2 {
        text-align: center;
    }
    section #bgSection article input[type="text"],
    section #bgSection article input[type="password"],
    section #bgSection article input[type="file"],
    section #bgSection article select,
    section #bgSection article textarea {
        border: 3px solid #bbbbbb;
    }
    section #bgSection article input[type="button"],
    section #bgSection article input[type="submit"],
    section #bgSection article input[type="reset"] {
        padding: 6px;
        font: italic bold 1em "MuseoSans500", Arial, Helvetica, sans-serif;
    }

    /* ----------------------------- */
    /*  =     Footer		         */
    /* ----------------------------- */

    footer #bgFooter {
        overflow: hidden;
        padding: 10px;
        text-align: left;
    }
    footer #bgFooter a {
        float: left;
        margin-top: 12px;
    }
    footer #bgFooter a:link,
    footer #bgFooter a:visited {
        font: italic bold 0.7em/1 "MuseoSlab500", Arial, Helvetica, sans-serif;
    }
    footer #bgFooter img {
        float: right;
        width: 100px;
        height: 34px;
    }

    tr.onejob {
        display: -webkit-inline-box;
    }

    tr td.jobname {
        display: table-caption;
    }

    td.tdbtlogv {
        display: table-caption;
        padding: 9px;
        line-height: 36px;
        width: auto;
    }

    .proglog {
        display: inline-grid;
        width: auto;
    }
    table.tabstach {
        width: 100%;
    }

    .tabstach tr {
        display: table;
        width: 100%;
    }

    td.btstc {
        display: table-caption;
    }
}
@media only screen and (max-device-width:640px) and (max-width:640px) and (orientation:landscape) {
    body {
        -webkit-text-size-adjust: 100%;
    }


}

section #bgSection article input.btdel[type="button"], section #bgSection article input.btadd[type="button"],  section #bgSection article input.btcancel[type="button"]
,  section #bgSection article input.btval[type="button"]{
    cursor: pointer;
    padding: 3px;
    border: 0;
    border-top: 1px solid #CCF79D;
    vertical-align: bottom;
    background: url(../images/button.png) left top no-repeat,  linear-gradient(#9CEB43, #89D138);
    background: url(../images/button.png) left top no-repeat,  -webkit-gradient(linear, left bottom, left top, from(#89D138), to(#9CEB43));
    background: url(../images/button.png) left top no-repeat,  -moz-linear-gradient(center bottom, #89D138, #9CEB43);
    background: url(../images/button.png) left top no-repeat,  -o-linear-gradient(#9CEB43, #89D138);
    background: url(../images/button.png) left top no-repeat,  -ms-linear-gradient(#9CEB43, #89D138);
    background: url(../images/button.png) left top no-repeat,  linear-gradient(#9CEB43, #89D138);
    font:  9px Arial, Helvetica, sans-serif;
    color: black;
    text-shadow: 0px 0px 0 #6BAF1E;
    -moz-box-shadow: 0px 0px 0px #6c6c6c;
    -webkit-box-shadow: 0px 0px 0px #6C6C6C;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}


/* ----------------------------- */
/*  =     Statistics page		 */
/* ----------------------------- */
table.stats {
    width:100%;
    table-layout:fixed;
    border-collapse:collapse
}
table.stats, table.stats th, table.stats td {
    word-wrap:break-word;
    border:1px solid black;
    padding:2px;
}

table.display {
    margin: 20px auto;
    clear: both;
}

.filterMatches
{
    background-color: #BFFF00;
}

.disconnect {
    position: absolute;
    z-index: 100;
    top: 0px;
    right: 20px;
    padding: 154px 0 68px;
    text-align: right;
}

.disconnect a {
    color: #9ae539;
}

.croptext {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

legend {
    font-weight: bold;
}

fieldset {
    padding: 0 20px 20px 20px;
}

fieldset ul {
    margin-left: -20px;
}

caption {
    font-size:1.5em;
    text-decoration: bold;
}

.message {
    height:50px;
    width:400px;
    vertical-align:middle;
    line-height:50px;
    text-align:center;
}

.succes {
    background-color:#9EFF75;
}

.echec {
    background-color:#f00;
    color: white;
    font-weight: bold;
}

button.delete {
    cursor: pointer;
    padding: 6px 10px 3px 3px;
    border: 0;
    border-top: 1px solid #ccf79d;
    background-color: #f00;
    background: url(../images/button.png) left top no-repeat,
    -webkit-gradient(linear, left bottom, left top, from(#820000), to(#E32E1B));
    background: url(../images/button.png) left top no-repeat,
    -moz-linear-gradient(center bottom, #820000, #E32E1B);
    background: url(../images/button.png) left top no-repeat,
    -o-linear-gradient(#820000, #E32E1B);
    background: url(../images/button.png) left top no-repeat,
    -ms-linear-gradient(#820000, #E32E1B);
    background: url(../images/button.png) left top no-repeat,
    linear-gradient(#820000, #E32E1B);
    font: italic bold 0.75em "MuseoSans500", Arial, Helvetica, sans-serif;
    color: #fff;
    text-transform: uppercase;
    text-shadow: -1px -1px 0 #A50000;
    -moz-box-shadow: 1px 1px 2px #A50000;
    -webkit-box-shadow: 1px 1px 2px #A50000;
    box-shadow: 1px 1px 2px #A50000;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;

}


.mtd {
    border-right:1px solid #363636;
    border-bottom:1px solid #363636;
    text-align:center;
}


.proglog {
    max-height: 250px;
    overflow-y: auto;
    background-color: #d1d1d1;
    line-height: 1.4em;
    font-family: monospace;
    font-size: 13px;
    padding: 5px;
    line-break: anywhere;
    width:100%;
}

.sterror {
    text-align: center;
    background-color: #dd9696;
    font-weight: bold;
    padding: 5px;
}
.stwarning {
    text-align: center;
    background-color: #e9b932;
    font-weight: bold;
    padding: 5px;
}
.stfinish {
    text-align: center;
    background-color: #7fdd7f;
    font-weight: bold;
    padding: 5px;
}
.stinprogress {
    text-align: center;
    background-color: #8098e5;
    font-weight: bold;
    padding: 5px;
}

.stwaiting {
    text-align: center;
    background-color: #8098e578;
    font-weight: bold;
    padding: 5px;
}

.listProcess {
width:100%;
}

span.duree {
    float: right;
}

td.tdbtlogv {
    width: 160px;
    vertical-align: top;
}

.tabrl {
    width: 100%;
    background-color: #ede7e7;
}

.fnlt {
    max-height: 150px;
    overflow-y: auto;
    background-color: #d1d1d1;
    line-height: 1.4em;
    font-family: monospace;
    font-size: 13px;
    padding: 5px;
    display: block;
}

.sepcat {
    border: 0;
    padding: 33px 0 0 0;
}

.dvcat {
    background-color: #126176;
    color: #f6f8f9;
    font-size: 20px;
    padding: 14px;
}

.onejob td {
    border: 1px solid #b5b5d1;
    background-color: #b5b5d114;
}

.jobname {
    font-weight: bold;
    vertical-align: top;
    padding: 10px;
    font-size: 18px;
    text-align: left;
}
.logpage {
    float: left;
}

.dlr {
    margin-right: 20px;
    float: right;
}

.prefilelock {
    position: absolute;
    background-color: #dcdce5;
    text-align: left;
    display:none;
    padding:5px;

}
.lastruninfo:hover {
    cursor:pointer;
}
li:hover  > .prefilelock{
    display:block;
}

.isobs {
    background-color: #d7d7d7;
}

span.duree {
    background-color: #afafaf;
    padding: 1px 5px;
    margin: 0;
}

button.stopjob {
    background-color: #bf2e1f;
    border: 1px solid red;
    color: #FFF;
    cursor: pointer;
}

button.startjob {
    background-color: #2c832c;
    border: 1px solid green;
    color: #FFF;
    cursor: pointer;
}

button.statusjob {
    background-color: gray;
    color: #FFF;
    border: 1px solid gray;
    cursor: pointer;
}


span.duree.mid {
    background-color: #ffa500d9;
}

span.duree.high {
    background-color: #ffa500;
}



.bgredcwhite {
    background-color:red;
    color:white;
}

.bgreencwhite {
    background-color:green;
    color:white;
    padding: 0px 4px;
}

.bgredcyellow {
    background-color:red;
    color:yellow;
    padding: 2px 0px;
}


.bgredcyellow {
    background-color:red;
    color:yellow;
    padding: 2px 0px;
}



.bgorangecwhite {
    background-color:orange;
    color:white;
}


.bgyellow  {
    background-color:yellow;
    padding: 3px 8px;
    font-weight: bold;
    font-size: 14px;
}


.bggraycwhite {
    background-color:gray;
    color:white;
}


.bglgray {
    background-color:lightgray;
    color:rebeccapurple;
}

.cred {
    color:red;
}

.cgray {
    color:gray;
}

.cblue {
    color:blue;
}

.cblack {
    color:black;
}

.cgreen {
    color:green;
}

span.error {
    display: block;
}

button.btpage {
    background-color: #4acae5;
    border: 1px solid #115f73;
    margin: 0px 5px 5px 0px;
    font-size: 14px;
    font-weight: bold;
    color: #115e72;
    cursor: pointer;
}
button.btpage.active {
    color: #e3771b;
}

a.logpage {
    margin-right: 10px;
}


.horizontal li {
    display: inline-block;
    padding: 10px;
    border: 1px solid #000;
    margin: 3px;
}

li.actif {
    background-color: #dfe2e3;
}

table.tabqv {
    width: 100%;
    margin-top: 10px;
}

table.tabqv tr:first-child td {
    padding: 10px;
    background-color: #f3f3f3;;
}

table.tabqv tr td {
    border-bottom: 1px solid darkgrey;
}

.oneformeleme {
    display: inline-block;
    padding: 10px;
    width: 48%;
    border-bottom: 1px solid darkgrey;
    line-height: 35px;
}

.oneformelemevide {
    display: inline-block;
    padding: 10px;
    width: 48%;
    line-height: 35px;
}


.oneformname {
    display: inline-block;
    width: 40%;
    line-height: 24px;
}

.oneformval {
    display: inline-block;
    width: 58%;
}

.onesep {
    display: inline-block;
    padding: 10px;
    width: 100%;
    background-color: #dfe2e3;
    margin-top: 10px;
}

.tabqe {
    width: 1080px;
    margin: 0 auto;
    background-color: #FFF;
    padding: 20px;
    display: contents;
}

.onesep.bottom {
    background: initial;
    text-align: right;
}


.btannuler {
    line-height: 27px;
    color: #15629e;
    border-radius: 4px;
    border: 1px solid #c9c9c9;
    background-color: #ffffff;
    padding: 8px 13px;
    margin-right: 20px;
    font-size: 14px;
}

.btannuler:hover {
    background-color: #f3f3f3;
}
.btvalider {
    line-height: 27px;
    color: #fff;
    border-radius: 4px;
    border: 1px solid #c9c9c9;
    background-color: #0176d3;
    padding: 8px 13px;
    margin-right: 20px;
    font-size: 14px;
}
.btvalider:hover {
    background-color: #355d96;
}

.btact, .btquickaction {
    line-height: 27px;
    color: #15629e;
    border-radius: 4px;
    border: 1px solid #c9c9c9;
    background-color: #ffffff;
    padding: 8px 13px;
    margin-right: 20px;
    font-size: 14px;
}

.btact:hover, .btquickaction:hover {
    background-color: #f3f3f3;
}
.messInfoVal {
    display: inline-block;
    padding: 7px;
}

.messInfoVal.fberror {
    border: 1px solid #386BC2;
    background-color: #f188a5;
}

.messInfoVal.fbdone {
    border: 1px solid #386BC2;
    background-color: #98f188;
}

.btpage {
    line-height: 18px;
    color: #15629e;
    border-radius: 4px;
    border: 1px solid #c9c9c9;
    background-color: #ffffff;
    padding: 2px 8px;
    margin: 5px 5px 0 0;
    font-size: 14px;
    display: inline-block;
}

.btpage:hover {
    background-color: #f3f3f3;
}

.btpage.actif {
    background-color: #355d96;
    color: #FFF;
}

.resqview {
    padding: 10px 0;
    overflow-x: auto;
    background-color: #FFF;
    border: 1px solid #b3b4b5;
}

.lookupIcon {
    background-image: url(/images/lookup20.gif);
    background-position: 0 0;
    width: 20px;
    height: 20px;
    background-position: top left;
    display: inline-block;
    margin-left: 10px;
    cursor: pointer;
}
.lookupIcon:hover {
    background-position: top right;
}


a.underline {
    text-decoration: underline;
}

.quickSearch {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background-color: #dbd6d6;
    width: 500px;
    min-height: 400px;
    border-radius: 7px;
    border: 1px solid #b5acac;
}

.quickSearch.visible {
    display: block;
}

.ftop {
    padding: 10px;
}

.resultdiv {
    padding: 5px;
    max-height: 600px;
    overflow-y: scroll;
}

.closeqs {
    float: right;
    font-weight: bold;
    font-size: 20px;
    padding: 9px;
    color: #999;
    font-family: cursive;
    cursor: pointer;
}

.searchtop {
    border: 1px solid #d5cccc;
    display: inline-block;
    padding: 10px;
    float: right;
}

.mandat {
    border-right: 4px solid red;
}

.ferror {
    background-color: #ffc8c8;
}
.fberror {
    text-align: left;
    background-color: #ffc8c8;
    padding: 10px;
}

.tdbtlogv {
    float: right;
}

.erroringrp {
    background-color: #f18b3a;
}

.runingrp {
    background-color: #8098e5;
}

section #bgSection article input[type="submit"].small , a.small {
    background-color: red;
    padding: 5px;
    font-size: 12px;
    border-radius: 0;
    background: url(../images/button.png) left top no-repeat, linear-gradient(#9fc6e7, #4d5a9d);
    border: 1px solid #000;
    margin: 0 5px 5px 0;
    text-transform: initial;
    font-family: system-ui;
    font-style: inherit;
    line-height: 8px;
    color: #FFF;
    font-weight: bold;
    text-shadow: 3px 2px 0 #7c82ad;
    display: inline-block;
}

section #bgSection article input[type="button"].small {
    font: italic bold 0.8em "MuseoSans500", Arial, Helvetica, sans-serif;
    padding: 5px;
}