/*
Theme Name: WTDCC
Theme URI:
Author: Adam Rumbelow
Author URI:
Description: WTDCC
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: wtdcc
Text Domain: wtdcc

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


body {
    background-color: #00008b;
    color: white;
}

.flex_heading{
    display: flex;
}

.flex_main{
    display: flex;
}

.flex_rightsidebar{
    display: flex;
    alignment: right;
    align-self: right;
}

.heading {
    align-content: center;
    vertical-align: top;
    alignment: center;
    border: 0;
    padding: 0;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

.textcenter{
    text-align: center;
}

.textmiddle{
    vertical-align: top;
}

.backgroundwhite{
    background-color: white;
}

.headingimg{
    max-width: 900px;
    width: 100%;
    height: auto;
}

.mainmenu{
    background-color: black;
    color: white;
    font-weight: bold;
}


.button {
    border: 2px solid #f5c306;
    background-color: #000040;
    color: #f5c306;
    padding: 15px 32px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 10px;
    width: 125px;
    height: 120px;
    text-align: center;
    vertical-align: middle;
}

.button:hover {
    border: 2px solid #000040;
    background-color: #f5c306;
    color: #000040;
    padding: 15px 32px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 10px;
    width: 125px;
    height: 120px;
}

.sponsorslogo {
    width: 100%;
    background-color: white;
    border: 2px solid #f5c306;
    padding: 0px;
    max-width: 350px;
    height: auto;
}

.tdwidth250 {
    max-width: 250px;
}

.rightpadding{
    padding-right: 5px;
}

.newsarea {
    border: 2px solid #f5c306;
    height: 375px;
}

.eventarea {
    border: 2px solid #f5c306;
    height: 375px;
}

.sponsorsarea {
    border: 2px solid #f5c306;
    height: 150px;
}



#header-menu {
    height: 32px; /* set to the height you want your menu to be */
    margin: 0 0 10px; /* just to give some spacing */
    background-color: #F5C306;
    border-style: solid;
    border-width: 1px;
    border-color: #f5c306;
}

#header-menu ul {
    margin: 0; padding: 0; /* only needed if you have not done a CSS reset */ }

#header-menu li {
    display: block;
    float: left;
    line-height: 30px; /* this should be the same as your #header-menu height */
    vertical-align: middle;

    height: 30px; /* this should be the same as your #header-menu height */
    margin: 0;
    padding: 0; /* only needed if you don't have a reset */
    position: relative; /* this is needed in order to position sub menus */
}

#header-menu li a {
    display: block;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;

    padding: 0 10px;
    background: #F5C306;
    float: left;
    color: #00008b;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: #f5c306;
}

#header-menu .current-menu-item a, #header-menu .current_page_item a, #header-menu a:hover {
    background: #00008b;
    float: left;
    display: block;
    color: #F5C306;
    font-size: 14px;
    font-weight: bold;
}


#header-menu ul ul { /* this targets all sub menus */
    display: none; /* hide all sub menus from view */
    position: absolute; top: 30px; /* this should be the same height as the top level menu -- height + padding + borders */ }

#header-menu ul ul li { /* this targets all submenu items */
    float: none; /* overwriting our float up above */
    width: 200px; /* set to the width you want your sub menus to be. This needs to match the value we set below */ }

#header-menu ul ul li a { /* target all sub menu item links */
    padding: 5px 10px; /* give our sub menu links a nice button feel */ }

#header-menu ul li:hover > ul {
    display: block; /* show sub menus when hovering over a parent */
}

#header-menu ul ul li ul { /* target all second, third, and deeper level sub menus */
    left: 200px; /* this needs to match the sub menu width set above -- width + padding + borders */
    top: 0; /* this ensures the sub menu starts in line with its parent item */ }


@media screen and (max-width: 600px) {
    #header-menu{
        visibility: hidden;
        display: none;
    }

    #mobile-menu{
        display: block;
        visibility: visible;
    }
}

@media screen and (min-width: 601px) {
    #header-menu{
        display: block;
        visibility: visible;
    }

    #mobile-menu{
        display: none;
        visibility: hidden;
    }

}

@media only screen and (max-width: 600px) {
    header, main{ width:90%}

    /* mobile menu */
    #mobile-menu{ display: block }

    #menu-icon {
        width: 40px;
        height: 40px;
        display: block;
        background: #7AD03A ;
        float: left;
        margin-top: 10px;
        text-indent:-9999px
    }

    nav ul, nav:active ul {

        display: none;
        position: relative;
        padding: 20px;
        background: #7AD03A;
        right: 0px;
        top: 35px;
        width: 50%;
        border-radius: 4px 0 4px 4px;

    }

    nav li {
        list-style-type:none;
        text-align: center;
        width: 100%;
        padding: 10px 0;
        margin: 0;
    }

    nav li a{ color:#fff !important; text-decoration:none !important; display:block}
    nav:hover ul { display: block; }

}