/***********************************************************************************************************************General page layout*/

body {
    font: 15px Arial;
}

#main {
    min-height: 800px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: row;
}

#main>article {
    margin: 4px;
    padding: 5px;
    border: 1px solid #cccc33;
    border-radius: 7pt;
    /*background: #dddd88;*/
    flex: 3 1 60%;
    order: 2;
    min-width: 400px;
}

#main>nav {
    margin: 4px;
    padding: 5px;
    border: 1px solid #8888bb;
    border-radius: 7pt;
    /*background: #ccccff;*/
    flex: 1 6 10%;
    order: 1;
    /*font-size: smaller;*/
    min-width: 250px;
}

#main>aside {
    margin: 4px;
    padding: 5px;
    border: 1px solid #8888bb;
    border-radius: 7pt;
    min-width: 230px;
    max-width: 300px;
    /*background: #ccccff;*/
    flex: 1 6 30%;
    order: 3;
    /*font-size: smaller;*/
}

header,
footer {
    display: block;
    /*margin: 4px;*/
    padding: 5px;
    min-height: 100px;
    /*border: 1px solid #eebb55;
    border-radius: 7pt;
    background: #ffeebb;*/
}

p#allAboutMe {
    text-align: right;
    font: 10px Arial;
}

.squareContainer {
    display: flex;
    flex-flow: row;
    min-height: 400px;
}

.squareItem {
    margin: auto;
    width: 50%;
}


/*Sets all link text to bold when the mouse is over it*/

a:hover {
    font-weight: bold;
}

.squareContainer>img {
    /*min-width: 600px;*/
    /*width: auto;*/
    /*height: auto;*/
    max-width: 600px;
    max-height: 400px;
}


/***********************************************************************************************************************Menu layout*/

ul {
    /*list-style: square url("img/smallTooth.png");*/
    list-style: none;
}


/*this hides the small menu and the conditional code reveals it*/

#smallMenu,
#smallMenuList {
    display: none;
    background-color: white;
}


/***********************************************************************************************************************Page conditional formatting*/


/* Too narrow to support three columns */

@media all and (max-width: 990px) {
    body {
        font: 40px Arial;
    }
    #main,
    #page {
        flex-direction: column;
    }
    #main>article,
    #main>nav,
    #main>aside {
        /* Return them to document order */
        order: 0;
    }
    #main>nav,
    #main>aside,
    header,
    footer {
        min-height: 50px;
        /*max-height: 800px;*/
        min-width: 600px;
    }
    #bigMenuList {
        display: none;
    }
    #smallMenu {
        display: block;
    }
    #smallMenuList {
        position: absolute;
        border: 1px solid #cccc33;
        border-radius: 7pt;
        /*min-width: 400px;*/
        z-index: 100;
        padding-right: 20px;
    }
}


/***********************************************************************************************************************Small tweaks*/

p.heading {
    color: #00bf00;
    font-size: larger;
}

p.specialMessage {
    background-color: lightgreen;
}

a {
    color: #00bf00;
}


/***********************************************************************************************************************Contact form*/

.contactLabel {
    width: 100px;
    text-align: right;
    margin: 5px;
}

input.contactInput {
    width: 50%;
    margin: 5px;
}

textarea.contactInput {
    width: 80%;
    min-height: 100px;
    margin: 5px;
}

.contactRow {
    display: flex;
}

#sendButton {
    margin-left: 115px;
}


/***********************************************************************************************************************For the embedded map*/

.mapouter {
    overflow: hidden;
    height: 500px;
    width: 600px;
}

.gmap_canvas {
    background: none !important;
    height: 500px;
    width: 600px;
}


/***********************************************************************************************************************Page animations*/

.subSection {
    opacity: 1;
    height: 100%;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
}

.subSectionHidden {
    opacity: 0;
    height: 0px;
    /*display: none;*/
}