body {
    background-image: url(../Images/backgrounds/body.png), url(../Images/backgrounds/body.gif);
    background-repeat: no-repeat, repeat;
    background-position: top center, top center;
    margin: 0px;

    font-size: 11pt;
    color: #fff;
    font-family: Arial;
    font-weight: 200;
}

h1, h2, h3, h4, h5, h6 {
    padding: 0px;
    margin: 0px;
}

h2 {
    font-size: 1.5em;
    color: #016390;
}

.spotlight {
    
}

header {
    border-bottom: 2px solid #0b5172;
}

footer {
    border-top: 2px solid #0b5172;
    padding: 5px;
    margin-bottom: 5px;

    font-size: smaller;
}

.mask {
    position: fixed;
    width: 110%;
    height: 110%;
    background-color: #000;
    left: 0;
    top: 0;

    display: none;
    opacity: 0.6;

    z-index: 100;
    cursor: pointer;
}

.popup {
    position: absolute;
    width: 50%;
    min-width: 300px;
    margin-left: auto;
    margin-right: auto;
    top: 20%;

    background-color: #fff;
    color: #000;
    padding: 20px;
    border: 2px solid #0b5172;
    border-radius: 5px;

    z-index: 200;
}

.close {
    float: right;
    position: relative;
    top: -15px;
    right: -12px;

    padding-top: 1px;
    padding-bottom: 0px;
    padding-right: 3px;
    padding-left: 3px;
    background-color: #0b5172;
    border-radius: 3px;
    color: #fff;
    font-weight: 900;

    cursor: pointer;
}

    .close:hover {
        background-color: #808080;
    }

nav {
    font-size: small;
}

            nav ul li a {
                color: #fff;
            }

.contactus input[type=text] {
    width: 80%;
    min-width: 340px;
}

.contactus textarea {
    width: 80%;
    min-width: 340px;
    height: 150px;
}

.database input[type=text] {
    width: 60%;
    min-width: 340px;
    margin-bottom: 3px;
}

.database textarea {
    width: 80%;
    min-width: 340px;
    height: 150px;
}

.button {
    background-color: #808080;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 4px;
    cursor: pointer;
}

    .button:hover {
        background-color: #016493;
    }

/* Links */
a {
    color: #808080;
    text-decoration: none;
}

    a:hover {
        color: #fff;
    }

@media only screen and (min-width: 724px) {
    /*This css file is for the display on pc's only.*/

    .spotlight {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    section {
        width: 100%;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        margin-bottom: 10px;
    }

    header div {
        width: 100%;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        margin-bottom: 30px;
    }

    #social {
        float: right;
        margin-top: 75px;
    }

        #social img {
            margin-left: 15px;
            border: none;
        }

    header nav {
        width: 100%;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    footer {
        
    }

        footer div {
            width: 100%;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

    /* Navigation */

    nav ul {
        margin-bottom: 0px;
        padding: 0px;
        display: inline-block;
        width: 100%;
    }

        nav ul li {
	        list-style:none;
	        margin-right:5px;
	        position:relative;
	        float:left;
        }

    nav li a {
        display:block;
	    padding-top:5px;
	    padding-bottom:5px;
	    padding-left:20px;
	    padding-right:20px;

        background: url(../Images/header/nav.gif) repeat-x top left #222123;
        font-weight: 700;
        text-transform: uppercase;
        border-radius: 3px;

        white-space: nowrap;
    }

        nav li a:hover {
            background: url(../Images/header/nav_active.gif) repeat-x top left #016493;
        }

    li ul {
        display: none;
        position: absolute;
        list-style: none;
        z-index: 10;
    }

    li:hover ul {
        display: block;
    }

    li ul li {
        margin-top: 3px;
    }

    /* Content Page Styling */

    .notice {
        background: url(../Images/misc/notice.gif) repeat-x bottom left #016390;
        padding: 20px;
        margin-bottom: 30px;
        border-radius: 5px;
        box-shadow: #000 0px 0px 5px;
        width: 260px;
    }


    .columns {
        display: table-cell;
        vertical-align: top;
        padding-right: 30px;
    }
}

@media only screen and (max-width: 724px){
    /*This css file is for the display of the website on tablets*/
    section {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    header div {
        margin-top: 40px;
        margin-bottom: 30px;
    }

    .spotlight {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    #social {
        float: right;
        margin-top: 75px;
    }

        #social img {
            margin-left: 15px;
            border: none;
        }

    /* Navigation */
    nav ul {
        list-style: none;
        margin-bottom: 3px;
        padding: 0px;
        display: inline-block;
    }

        nav ul li {
            font-weight: 700;
            text-transform: uppercase;
            border-radius: 3px;
            margin-bottom: 3px;

	        list-style:none;
	        margin-right:5px;
	        position:relative;
	        float:left;
        }

        nav li a {
            display:block;
	        padding-top:5px;
	        padding-bottom:5px;
	        padding-left:20px;
	        padding-right:20px;

            background: url(../Images/header/nav.gif) repeat-x top left #222123;
            font-weight: 700;
            text-transform: uppercase;
            border-radius: 3px;

            white-space: nowrap;
        }

        nav li a:hover {
            background: url(../Images/header/nav_active.gif) repeat-x top left #016493;
        }

            li ul {
                display: none;
                position: absolute;
                list-style: none;
                z-index: 10;
            }

            li:hover ul {
                display: block;
            }

            nav ul li:hover {
                background: url(../Images/header/nav_active.gif) repeat-x top left #016493;
            }

    /* Content Page Styling */

    .notice {
        background: url(../Images/misc/notice.gif) repeat-x bottom left #016390;
        padding: 20px;
        margin-right: 30px;
        margin-bottom: 30px;
        border-radius: 5px;
        box-shadow: #000 0px 0px 5px;
    }


    @media only screen and (min-width: 550px) {
        .columns {
            display: table-cell;
            vertical-align: top;
            padding-right: 20px;
        }
    }

    @media only screen and (max-width: 549px) {
        .columns {
            display: block;
        }

        .notice {
            margin-right: 0px;
        }

        section {
            padding: 10px;
        }
    }
}

@media only screen and (max-width: 405px){
    /*This css file is for the display of the website on phones*/
    section {
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 10px;
        width: 92%;
        max-width: 400px;
    }

    header div {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    #social {
        margin-top: 5px;
        float: right;
    }

        #social img {
            margin-right: 15px;
            border: none;
        }


    /* Navigation */
    nav ul {
        list-style: none;
        margin-bottom: 8px;
        margin-top: 8px;
        padding: 0px;
    }

        nav ul li {
            display: block;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 5px;
            padding-bottom: 7px;
            margin-bottom: 3px;
            background: url(../Images/header/nav.gif) repeat-x bottom left #016493;
            font-weight: 700;
            text-transform: uppercase;
            border-radius: 3px;
        }

            nav ul li:hover {
                background: url(../Images/header/nav_active.gif) repeat-x top left #016493;
            }

    /* Content Page Styling */

    .notice {
        background: url(../Images/misc/notice.gif) repeat-x bottom left #016390;
        padding: 10px;
        margin-bottom: 20px;
        border-radius: 5px;
        box-shadow: #000 0px 0px 5px;
        width: 92%;
    }
}