/*@import url(http://fonts.googleapis.com/css?family=roboto);*/
@import url('MenuStyle.css');

text-align: center; body {
    background: #212121;
    font-size: 22px;
    line-height: 32px;
    color: #ffffff;
    margin: 0;
    padding: 0;
    word-wrap: break-word !important;
    font-family: 'roboto', sans-serif;
}

/*h1 {
    font-size: 60px;
    color: #FFF;
}*/

/*h3 {
    font-size: 30px;
    line-height: 34px;
    text-align: center;
    color: #FFF;
}*/

    /*h3 a {
        color: #FFF;
    }*/

a {
    color: #FFF;
}

/*h1 {
    margin-top: 100px;
    text-align: center;
    font-size: 60px;
    line-height: 70px;
    font-family: 'roboto', sans-serif;
}*/

#container {
    margin: 0 auto;
    max-width: 890px;
}

/*p {
    text-align: center;
}*/

.toggle, [id^=drop] {
    display: none;
}

nav {
    margin: 0;
    padding: 0;
    /*background: #39b1cc;
    background: -moz-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #51bbd2), color-stop(100%, #2d97af));
    background: -webkit-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
    background: -o-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
    background: -ms-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
    background: linear-gradient(to bottom, #51bbd2 0%, #2d97af 100%);*/

background: #7a94ff; /* Old browsers */
background: -moz-linear-gradient(top, #7a94ff 0%, #18227a 13%, #18227a 13%, #090a2d 47%, #18227a 88%, #7a94ff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #7a94ff 0%,#18227a 13%,#18227a 13%,#090a2d 47%,#18227a 88%,#7a94ff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #7a94ff 0%,#18227a 13%,#18227a 13%,#090a2d 47%,#18227a 88%,#7a94ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a94ff', endColorstr='#7a94ff',GradientType=0 ); /* IE6-9 */


    border: 0.1px solid #fff;
}

#logo {
    display: block;
    padding: 0 30px;
    float: left;
    font-size: 20px;
    line-height: 60px;
}

nav:after {
    content: "";
    display: table;
    clear: both;
}

nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}

    nav ul li {
        z-index:50;
        margin: 0px;
        display: inline-block;
        float: left;


        /*background: #39b1cc;
        background: -moz-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #51bbd2), color-stop(100%, #2d97af));
        background: -webkit-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
        background: -o-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
        background: -ms-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
        background: linear-gradient(to bottom, #51bbd2 0%, #2d97af 100%);*/

background: #7a94ff; /* Old browsers */
background: -moz-linear-gradient(top, #7a94ff 0%, #18227a 13%, #18227a 13%, #090a2d 47%, #18227a 88%, #7a94ff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #7a94ff 0%,#18227a 13%,#18227a 13%,#090a2d 47%,#18227a 88%,#7a94ff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #7a94ff 0%,#18227a 13%,#18227a 13%,#090a2d 47%,#18227a 88%,#7a94ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a94ff', endColorstr='#7a94ff',GradientType=0 ); /* IE6-9 */


        border: 0.1px solid #fff;
    }

nav a {
    display: block;
    padding: 0 20px;
    color: #FFF;
    font-size: 15px;
    line-height: 45px;
    text-decoration: none;
}

nav ul li ul li:hover {
    background: #000000;
}

nav a:hover {
    color: #FFF;

            background: #39b1cc;
        background: -moz-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #51bbd2), color-stop(100%, #2d97af));
        background: -webkit-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
        background: -o-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
        background: -ms-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
        background: linear-gradient(to bottom, #51bbd2 0%, #2d97af 100%);



    /*background: rgba(224,192,197,1);
    background: -moz-linear-gradient(top, rgba(224,192,197,1) 0%, rgba(210,75,90,1) 27%, rgba(176,60,74,1) 47%, rgba(186,39,55,1) 68%, rgba(241,142,153,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(224,192,197,1)), color-stop(27%, rgba(210,75,90,1)), color-stop(47%, rgba(176,60,74,1)), color-stop(68%, rgba(186,39,55,1)), color-stop(100%, rgba(241,142,153,1)));
    background: -webkit-linear-gradient(top, rgba(224,192,197,1) 0%, rgba(210,75,90,1) 27%, rgba(176,60,74,1) 47%, rgba(186,39,55,1) 68%, rgba(241,142,153,1) 100%);
    background: -o-linear-gradient(top, rgba(224,192,197,1) 0%, rgba(210,75,90,1) 27%, rgba(176,60,74,1) 47%, rgba(186,39,55,1) 68%, rgba(241,142,153,1) 100%);
    background: -ms-linear-gradient(top, rgba(224,192,197,1) 0%, rgba(210,75,90,1) 27%, rgba(176,60,74,1) 47%, rgba(186,39,55,1) 68%, rgba(241,142,153,1) 100%);
    background: linear-gradient(to bottom, rgba(224,192,197,1) 0%, rgba(210,75,90,1) 27%, rgba(176,60,74,1) 47%, rgba(186,39,55,1) 68%, rgba(241,142,153,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0c0c5', endColorstr='#f18e99', GradientType=0 );*/



}

nav ul ul {
    display: none;
    position: absolute;
    top: 45px;
}

nav ul li:hover > ul {
    display: inherit;
}

nav ul ul li {
    width: 170px;
    float: none;
    display: list-item;
    position: relative;
}

nav ul ul ul li {
    position: relative;
    top: -46px;
    left: 201px;
}

li > a:after {
    content: ' +';
}

li > a:only-child:after {
    content: '';
}


/* Media Queries
        --------------------------------------------- */

@media all and (max-width : 768px) {

    #logo {
        display: block;
        padding: 0;
        width: 100%;
        text-align: center;
        float: none;
    }

    nav {
        margin: 0;
    }

    .toggle + a,
    .menu {
        display: none;
    }

    .toggle {
        display: block;
        background-color: #254441;
        padding: 0 20px;
        color: #FFF;
        font-size: 20px;
        line-height: 30px;
        text-decoration: none;
        border: none;
    }

        .toggle:hover {
            background-color: #000000;
        }

    [id^=drop]:checked + ul {
        display: block;
    }

    nav ul li {
        display: block;
        width: 100%;
    }

    nav ul ul .toggle,
    nav ul ul a {
        padding: 0 40px;
    }

    nav ul ul ul a {
        padding: 0 80px;
    }

    nav a:hover,
    nav ul ul ul a {
        background-color: #000000;
    }

    nav ul li ul li .toggle,
    nav ul ul a {
        background-color: #212121;
    }

    nav ul ul {
        float: none;
        position: static;
        color: #ffffff;
    }

        nav ul ul li:hover > ul,
        nav ul li:hover > ul {
            display: none;
        }

        nav ul ul li {
            display: block;
            width: 100%;
        }

        nav ul ul ul li {
            position: static;
        }
}

@media all and (max-width : 330px) {

    nav ul li {
        display: block;
        width: 94%;
    }
}


 nav ul li ul li a {
        width: 200px; 
    }
  nav ul li ul li {
        width: 200px;
    }


#site-name {
    font-size: 24px;
    font-weight: bold;
    text-shadow: -1px -1px 10px #333, 1px -1px 10px #333, -1px 1px 10px #333, 1px 1px 10px #333;
    margin-top: 0px;
    margin-left: 200px;
}

#site-name, #slogan {
    display: block;
}

#slogan {
    font-size: 1.2vw;
    text-shadow: -1px -1px 10px #333, 1px -1px 10px #333, -1px 1px 10px #333, 1px 1px 10px #333;
}

#site-name a:link, #site-name a:visited, #site-name a:hover, #site-name a:active {
    text-decoration: none;
}

#site-name a, #slogan {
    color: #FFFFFF;
}

#site-name a {
    outline: 0 none;
}

#system-name {
    font-size: 18.4px;
    font-weight: bold;
    text-shadow: -1px -1px 10px #333, 1px -1px 10px #333, -1px 1px 10px #333, 1px 1px 10px #333;
    /*margin-top: 10px;*/
    margin-left: 180px;
}

#system-name, #slogan {
    display: block;
}

#slogan {
    font-size: 1.2vw;
    text-shadow: -1px -1px 10px #333, 1px -1px 10px #333, -1px 1px 10px #333, 1px 1px 10px #333;
}

#system-name a:link, #system-name a:visited, #system-name a:hover, #system-name a:active {
    text-decoration: none;
}

#system-name a, #slogan {
    color: #f9ff00;
}

#system-name a {
    outline: 0 none;
}

/*#language-selection-button {
    margin-top: -45px;
    margin-right: 20px;
    display: block;
    float: right;
}*/

#language-selection-button {
    margin-top: -30px;
    margin-right: 110px;
    display: block;
    float: right;
}

#Login {
    margin-top: -30px;
    margin-right: 10px;
    display: block;
    float: right;
}

#LogOut {
    margin-top: -50px;
    margin-right: 10px;
    display: block;
    float: right;
}


#Welcome-User {
    margin-top: -80px;
    margin-right: 101px;
    display: block;
    float: right;
}