/*
 * Standard CSS
 */

/***********************************************************
 * Special Formatting Classes
 */

/* This is used to display certain sections of the page only
 * in a browser which doesn't understand CSS (because a non-CSS browser
 * won't hide the content
 */
.noncssbrowser {
    display: none;
}

/***********************************************************
 * Standard elements
 */

body {
    margin:0% 5%;
    padding: 0;
    font-family: Comic Sans MS, Arial, Helvetica, sans-serif;
    background-image: url('/images/bg.bmp');
}

img {
    border: none;
}

/***********************************************************
 * Layout classes
 */

/* HEADER */
.header {
    float: none;
    width: 100%;
    border-bottom: thin solid black;
    margin-bottom: 8px;
}

.header .headerlogo {
    float: left;
    width: 15%;
}

.header .headertext {
    color: #3100B5;
}

.header .headertextleft {
    color: #3100B5;
    float: left;
    width: 50%;
}

.header .headertextright {
    color: #3100B5;
    float: right;
    width: 50%;
}

.header .headertext h1 {
    font-size: x-large;
    text-align: right;
    margin-left: auto;
    margin-right: 0;
}

.header .headertext h2 {
    font-size: large;
    text-align: right;
    margin-left: auto;
    margin-right: 0;
}

.header .headertext h3 {
    font-size: small;
    text-align: right;
    margin-left: auto;
    margin-right: 0;
}

/* ANNOUNCEMENTS */
.announcement {
    float: left;
    width: 100%;
    padding: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: thin solid black;
    background-color: #3100B5;
    margin-bottom: 20px;
    text-align: center;
}

.announcement p {
    width: 100%;
    color: white;
    text-align: center;
    padding: 0px;
    margin: 0px;
}

.announcement a {
    color: white;
}

/* CONTENT */
.content {
    float: left;
    width: 100%;
    font-size: medium;
    font-weight: normal;
  /*  overflow: scroll; */
}

.content .contentmenu {
    float: none;
    width: 100%;
}

.content .contentmenucentre {
    clear: both;
    width: 100%;
    text-align:center;
}

.content .contentmenucentre a {
    clear: both;
    width: 100%;
    background-color: #5273F7;
    color: white;
    text-decoration: none;
    padding: 5px;
    margin-bottom: 10px;
    margin-right: 10px;
}


.content .contentmenu a {
    clear: both;
    width: 100%;
    background-color: #3100B5;
    color: white;
    text-decoration: none;
    padding: 5px;
    margin-bottom: 8px;
    margin-right: 10px;
}

.content .contentmenuleft {
    float: left;
    width: 15%;
    margin-right: 10px;
    border-right: thin solid black;
    padding: 5px;
    font-weight: bold;
}

.content .contentmenuleft p {
    float: left;
    clear: both;
    width: 100%;
    padding: 5px;
    margin-bottom: 10px;
    font-size: small;
    font-weight: bold;
    text-align: center;
    background-color: #3100B5;
    border: thin solid black;
}

.content .contentmenuleft a {
    float: left;
    clear: both;
    width: 90%;
    background-color: #3100B5;
    color: brown;
    text-decoration: none;
    padding: 5px;
    margin-bottom: 8px;
    margin-right: 10px;
}

.content .contentmenuleft a:hover {
    background-color: #82A3F7;
}

.content .contentmenuright {
    float: right;
    width: 15%;
}

.content .contentmenuright p {
    float: right;
    width: 100%;
    padding: 5px;
    margin-bottom: 10px;
    font-size: small;
    font-weight: bold;
    text-align: center;
    background-color: #5273F7;
    border: thin solid black;
}

.content .contentmenuright a {
    float: right;
    clear: both;
    width: 100%;
    background-color: #5273F7;
    color: white;
    text-decoration: none;
    padding: 5px;
    margin-bottom: 10px;
}

.content .contentmenuright a:hover {
    background-color: #82A3F7;
}

.content .contentdata {
/*    margin-left: 20%;  */
/*    margin-right: 20%; */
    margin-bottom: 0px;
    overflow: auto;
}

.content .contentdata h1 {
    font-size: x-large;
    color: #3100B5;
}

.content .contentdata h2 {
    font-size: large;
    color: #3100B5;
}

.content .contentdata dt {
    font-weight: bold;
}

/* .content .contentdata img {
    width: 100%;
    margin: 10px;
 }
*/
.content .contentdata .photo {
    float: left;
    width: 70%;
    border-top: thin solid gray;
    margin-right: 10px;
    margin-bottom: 10px;
}

.content .contentdata .photo h1 {
    font-size: medium;
    font-weight: bold;
}

.content .contentdataright {
    float: right;
/*    clear: both; */
/*    width: 100%; */

/*    margin-left: 10%; */
/*    margin-right: 10%;  */
/*    margin-bottom: 0px; */
}


/* CREDITS */
.credits {
    float: left;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: small;
}

.credits .creditsleft {
    float: left;
}

.credits .creditsright {
    float: right;
}

/* FOOTER */
.footer {
    float: left;
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-size: small;
    border: thin solid gray;
}

.footer p {
    text-align: center;
    margin: 0px;
    padding: 0px;
}