/* Intranet stylesheets  */

/* Reset all margin and padding */
* {
    margin: 0;
    padding: 0;
}

/* Top nav bar
    Inline block to make it a horizontal list
    Gradient color from darkblue on left to red on right

*/
#topban {
    background: #0000FF; /* Old browsers */
    background: -moz-linear-gradient(left, #0000FF 0%, #FF0000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0000FF), color-stop(100%,#FF0000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #0000FF 0%,#FF0000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #0000FF 0%,#FF0000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #0000FF 0%,#FF0000 100%); /* IE10+ */
    background: linear-gradient(to right, #0000FF 0%,#FF0000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000FF', endColorstr='#FF0000',GradientType=1 ); /* IE6-9 */
    height: 40px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    border-bottom: 1px solid #000;
}
.container {
    width: 100%;
    margin: 0 auto;
}
#topban ul {
    list-style: none;
    display: inline-block;
    margin: 0 auto;
    padding: 0;
}
#topban ul li {
    display: inline-block;
    margin: 0 10px;
    padding: 0;
}
#topban ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    padding: 5px 5px;
    display: block;
}
#topban ul li a:hover {
    background: #fff;
    color: #000;
}




/* Main banner */
#mainban {
    background: rgb(163, 87, 87);
    height: 200px;
    width: 60%;
    margin: 0 auto;
    margin-top: 25px;
    position: relative;
    top: 40px;
    left: 0;
    z-index: 99;
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%    Navigation bar %%%%%%%%%%%%%%%%%%%%%%%%%%%   */

#nav {
    background: rgb(38, 172, 138);
    height: 60px;
    width: 50%;
    margin: 0 auto;
    margin-top: 50px;
    position: relative;
    left: 0;
    z-index: 99;

}
#nav ul {
    list-style: none;
    display: inline-block;
    margin: 0 auto;
    padding: 0;
}
#nav ul li {
    display: inline-block;
    margin: 0 10px;
    padding: 0;
}
#nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    padding: 5px 5px;
    display: block;
}
#nav ul li a:hover {
    background: #fff;
    color: #000;
}

/* Main content area */

#mainIndex {
    background: rgb(156, 188, 235);
    height: 500px;
    width: 100%;
    margin: 0 auto;
    margin-top: 50px;
    position: relative;
    left: 0;
    z-index: 99;
}

/* Footer Stick on the bottom */
#footer {
    background: rgb(190, 147, 147);
    height: 50px;
    width: 100%;
    margin: 0 auto;
    margin-top: 50px;
    position: fixed;
    left: 0;
    z-index: 99;
    bottom: 0;
}

#footer ul {
    list-style: none;
    display: inline-block;
    margin: 0 auto;
    padding: 0;
}

#footer ul li {
    display: inline-block;
    margin: 0 10px;
    padding: 0;
}

#footer ul li a {
    color: rgb(85, 15, 15);
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    padding: 5px 5px;
    display: block;
}

#footer ul li a:hover {
    background: rgb(248, 101, 101);
    color: rgb(143, 112, 112);
}