/* Site colours */
/*
    White
    =====
    #ffffff / 255,255,255   -   Default text for dark backgrounds; Menu highlight for dark backgrounds
    
    Grey
    ====
    #555555 / 085,085,085   -   Default text
    #787878 / 120,120,120   -   Shadows
    #9b9b9b / 155,155,155   -   Button detail - active
    #bebebe / 190,190,190   -   Button detail - hover/focus
    #e1e1e1 / 225,225,225   -   Button detail - default; Text on dark background (Menu; Footer)
    
    Teal
    ====
    #004b69 / 000,075,105   -   Navigation bar background if no gradient
    #005f7d / 000,095,125
    #007391 / 000,115,145   -   Base colour; Button - active; Headings
    #0087a5 / 000,135,165   -   Button - hover/focus
    #009bb9 / 000,155,185   -   Button - default; Navigation bar highlight if no gradient; Header background if no gradient
    # /     -   Section background
*/

/* Site font sizes */
/*
    Base font size: 14px
        0.75em  -   10.5px
        1.00em  -   14px
        1.25em  -   17.5px
        1.50em  -   21px
        2.00em  -   28px
        2.50em  -   35px
        4.00em  -   56px
        5.00em  -   70px
*/

/* Positioning Rules */    
    html {
        position: relative;
        min-height: 100%;
    }
    body {
        margin-bottom: 70px;
    }
    nav {
        position: relative;
    }
    header {
        position: relative;
        width: 100%;
        margin-top: 50px;
        margin-bottom: 0px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    main, aside {
        position: relative;
        margin-top: 15px;
        margin-bottom: 15px;
        padding-bottom: 45px;
    }
    /* Increase gap between columns (main and aside) */
    .row [class*='col-']:not(:last-child) {
        padding-right: 50px;
    }
    footer {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 70px;
        width: 100%;
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 0.875em;
    }
    
/* Stylistic Rules - Default */
    body {
        margin-bottom: 70px;
        font-family: Verdana, Geneva, sans-serif;
        background: #ffffff;
        color: #555555;
    }
    hr {
        margin-left: 20%;
        margin-right: 20%;
        margin-top: 40px;
        margin-bottom: 40px;
        border-color: #cce3e9;
    }
    a {
        color: #009bb9;
    }
    a:visited {
        color: #009bb9;
    }
    a:hover, a:visited:hover {
        color: #004b69;
        text-decoration: underline;
    }
    table {
        width: 100%;
        margin-top: 15px;
        margin-bottom: 30px;
    }
    table th {
        padding: 8px;
        vertical-align: middle;
        text-align: center;
        background: #004b69;
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#009bb9, endColorstr=#004b69)";  /* For IE8 & 9 */
        background: -webkit-linear-gradient(#009bb9, #004b69);
        background: -o-linear-gradient(#009bb9, #004b69);
        background: -moz-linear-gradient(#009bb9, #004b69);
        background: linear-gradient(#009bb9, #004b69);
        font-variant: small-caps;
        font-size: 1.25em;
        font-weight: normal;
        color: #e1e1e1;
    }
    table td {
        padding: 5px;
        vertical-align: top;
        text-align: center;
    }
    
/* Stylistic Rules - Brand */
    .brand, .navbar-header>.navbar-brand, .navbar-header>.navbar-brand:hover, .navbar-header>.navbar-brand:visited {
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        font-variant: small-caps;
        font-style: italic;
        color: #ffffff;
        text-shadow: 2px 2px 5px #bebebe;
    }
    
/* Stylistic Rules - Navigation Bar */
    .navbar-default, .navbar-header, .navbar-collapse, .collapse {
        background: #004b69;
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#009bb9, endColorstr=#004b69)";  /* For IE8 & 9 */
        background: -webkit-linear-gradient(#009bb9, #004b69);
        background: -o-linear-gradient(#009bb9, #004b69);
        background: -moz-linear-gradient(#009bb9, #004b69);
        background: linear-gradient(#009bb9, #004b69);
        border: none;
    }
    .navbar-default .navbar-header>.navbar-brand  {
        font-size: 1.5em;
    }
    .navbar .nav>li>a, .navbar .nav>li>a:focus {
        font-variant: small-caps;
        font-size: 1.25em;
        color: #e1e1e1;
    }
    .navbar .nav>li>a:hover, .navbar .nav>li.active>a, .navbar .nav>li.active>a:hover {
        background: #009bb9;
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#004b69, endColorstr=#009bb9)";  /* For IE8 & 9 */
        background: -webkit-linear-gradient(#004b69, #009bb9); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#004b69, #009bb9); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#004b69, #009bb9); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#004b69, #009bb9); /* Standard syntax (must be last) */
        color: #ffffff;
    }
    .navbar-default .navbar-header button, .navbar-default .navbar-header button:focus {
        background: #009bb9;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 1px rgba(0, 0, 0, 0.3); /* Chrome and Safari */
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 1px rgba(0, 0, 0, 0.3); /* Firefox 3.6 */
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 1px rgba(0, 0, 0, 0.3); /* Firefox 4.0+, Opera, IE 9 */
        -webkit-transition-duration: 0.2s;
        -moz-transition-duration: 0.2s;
        transition-duration: 0.2s;
        border: 1px solid #555555;
    }
    .navbar-default .navbar-header button .icon-bar {
        background: #e1e1e1;
    }
    .navbar-default .navbar-header button:hover {
        background: #0087a5;
    }
    .navbar-default .navbar-header button:hover .icon-bar {
        background: #bebebe;
    }
    .navbar-default .navbar-header button:active {
        background: #007391;
        -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); /* Chrome and Safari */
        -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); /* Firefox 3.6 */
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); /* Firefox 4.0+, Opera, IE 9 */
    }
    .navbar-default .navbar-header button:active .icon-bar {
        background: #9b9b9b;
    }
    
/* Stylistic Rules - Header and Headings */
    header {
        background: #009bb9;
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#009bb9, endColorstr=#004b69)";  /* For IE8 & 9 */
        background: -webkit-linear-gradient(#009bb9, #004b69); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#009bb9, #004b69); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#009bb9, #004b69); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#009bb9, #004b69); /* Standard syntax (must be last) */
        text-align: center;
    }
    h1, h2, h3, h4, h5, h6 {
        color: #007391;
    }
    header h1.page-title {
        margin: 5px;
        font-size: 4.00em;
    }
    header h1.page-tagline {
        margin: 5px;
        font-size: 2.00em;
    }
    h1.page-header {
        padding-top: 15px;
        border-bottom: 1px solid #e1e1e1;
    }

/* Stylistic Rules - Main Content */
    /*figure {
        display: block;
        max-width: 80%;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: auto;
        margin-right: auto;
    }
    figcaption {
        padding: 10px;
        font-size: 0.875em;
        color: #009bb9;
        text-align: center;
    }
    figure>img {
        display: block;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
        padding: 10px;
        -webkit-filter: drop-shadow(5px 5px 3px rgba(120, 120, 120, 0.6));
        filter: drop-shadow(5px 5px 3px rgba(120, 120, 120, 0.6));
        -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=5,Color='#e1e1e1')"; /* for IE 8 & 9 */
    /*}*/
    
/* Stylistic Rules - Side Bar */
    aside>section {
        display: -webkit-flex; /* Safari */
        -webkit-justify-content: space-around; /* Safari 6.1+ */
        display: flex;
        justify-content: space-around;
        margin-top: 45px;
        padding: 15px;
        background: #e6f1f4;
        border-radius: 10px;
    }
    .social-link {
        height: 29px;
        font-size: 29px;
        vertical-align: middle;
    }
    
/* Stylistic Rules - Footer */
    footer {
        background: #004b69;
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#004b69, endColorstr=#009bb9)";  /* For IE8 & 9 */
        background: -webkit-linear-gradient(#004b69, #009bb9); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#004b69, #009bb9); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#004b69, #009bb9); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#004b69, #009bb9); /* Standard syntax (must be last) */
        color: #e1e1e1;
        
    }
    footer a, footer a:hover {
        color: #e1e1e1;
    }
    .right {
        float: right;
        text-align: right;
        white-space: nowrap;
    }
    .clear {
        clear: both;
    }
    
/* Border Guides - See how each section of the page fits together */
    /*html {
        border: 5px solid #99ff22; // green
    }
    body {
        border: 5px solid #3300ff; // blue
    }
    .navbar {
        border: 5px solid #cc0000;  // red
    }
    header {
        border: 5px solid #ff9933; // orange
    }
    main {
        border: 5px solid #00ffff; // cyan
    }
    aside {
        border: 5px solid #ffff00; // yellow
    }
    footer {
        border: 5px solid #ff55ff; // pink
    }*/