/*
   New Perspectives on HTML, CSS, and JavaScript
   Final Project
   Filename: TEAMstyles.css

   This file contains styles used in the TEAM-TZ website.

   Supporting files: tanzanian-flag.jpg
*/


/* Set background of entire page. Doing so at HTML level improves position in browsers.
   Set the position to cover the background so it is fixed.*/
html {
    background: url("tanzanian-flag.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;    
}

/* Set the default font style and color. The body width is set with the margins set to auto
   to make the page more dynamic.*/
body {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    width: 1000px;
    margin: 0px auto 0px auto;
}

/* Using percentage for log class width allows it to follow body changes.*/
.logo {
    width: 100%;
}

/* Navigation styles*/
nav {
    text-align: center;
    font-weight: bold;    
}

nav li {
    display: inline;
    font-style: none;
    font-size: 20px;
    margin-right: 20px;
}

nav li a {
    color: rgba(30,104,225,1);
    text-decoration: none;
}

nav li a:hover {
    color: white;
}

/* The following text-shadow styles create the "neon" effect when a nav link is currently being accessed.
   Note the current class, which is assigned to the nav link in each respective .htm file.*/
nav li a.current {
    color: blue;
    text-decoration: underline;
    text-shadow: 0 0 10px lightblue,
                   0 0 20px lightblue,
                   0 0 30px lightblue,
                   0 0 40px lightblue,
                   0 0 70px blueviolet,
                   0 0 80px blueviolet,
                   0 0 100px blueviolet,
                   0 0 150px blueviolet;
}

/* Section and article styles. */
section {
    background-color: black;
    border: rgba(0,150,0,0.8) 1px solid;
}

article {
    background-color: black;
    padding: 10px;
}

article h2 {
    text-align: center;
}

article h3 {
    text-align: center;
}

article h5 a {
    color: lightblue;
}

article p a {
    color: lightblue;
}

/* Board photo styles to allow them to keep original dimensions, with max settings. */
article.boardList img {
    float: left;
    margin-right: 10px;
    clear: both;
    max-width: 150px;
    max-height: 200px;
    width: auto;
    height: auto;
}

article.boardList p {
    margin-left: 0px;
    overflow: auto;
    display: block;    
}

article.articleCenter {
    text-align: center;
    margin-bottom: 50px;
}

/* Donate button is customized to match website colors. */
.donateButton {
    background-color: rgba(0,150,0,1);
    border-radius: 3px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    height: 44px;
    width: 200px;
}

/* Table styles. */
table {
    border: white 2px solid;
    border-collapse: collapse;
    margin-bottom: 50px;
}

table th {
    text-align: left;
    text-decoration: underline;
}

table td {
    border: white 1px solid;
}

/* Footer styles. */
footer {
    background-color: black;
    clear: both;
    padding-top: 20px;
    text-align: center;
}