/* SideHustleLA.com */

/*
NOTES: Underscored items work for IE only.
*/

* { margin: 0; padding: 0; }
li { list-style-type: none; }
img { border: 0 none; }
html{ overflow-y:scroll; }

/*
Positioning
---------------------------------------
*/

	#container { width: 100%; margin-top: 0; }

    img#title { margin: 0px auto 0px auto; max-width: 100%; height: auto; display: block; justify-content: center; }

    #navcontainer { position: absolute; top: 10px; width: 100%; text-align: center; } /*right: 26px; }*/
    #navlist li { display: inline; line-height: 0.8em; padding: 10px 10px 10px 10px; }
    #navlist li a { margin: 0px auto 0px auto; }

    .content { margin: 30px 10px 10px 10px; }

    /#calendar ul { display: flex; flex-wrap: wrap; }
    /#calendar li { margin: auto; }

    #upcoming ul { display: flex; flex-direction: column; align-items: center; }
    #upcoming img {margin: auto;}

    #past ul { display: flex; flex-wrap: wrap; }
    #past li { margin: auto; }

    #promo { display: flex; flex-direction: column; align-items: center; height: 100vh;}
    #promo img {margin: auto; width: 100%}

    #media ul { display: flex; flex-wrap: wrap; }
    #media li {margin: auto; }

    img#bandmates { margin: 0px auto 0px auto; max-width: 100%; height: auto; display: block;}
    #band { margin: 0px auto -2.5em auto; }

    #songlists { display: flex; gap: 20px; flex-wrap: wrap; }

    #footer { clear: both; bottom: 0px; width: 100%; margin: 30px auto 0px auto; line-height: 2em; }
    #footer p { padding-right: 30px; }

/*
Colors (borders, backgrounds,)
---------------------------------------
*/
    body { background: #FECC54; }
    #container { background: #06474E; }
	#pageheader  { background: #FECC54; }

    #navlist li a { color: #06474E; }
    #navlist li a:hover { color: #CE00FF; }
    
    #container p { color: white; }
    #container ul li { color: white; }
    #band { background: #F6B008; }

    #calendar img { border: 2px solid #F6B008; }
    #calendar img:hover { border: 2px solid #CE00FF; }

    #promo img { border: 2px solid #F6B008; }
    #promo img:hover { border: 2px solid #CE00FF; }

    #footer { background: #FECC54; border-top: 2px solid #CE00FF; }
        #footer a { color: #06474E; }
        #footer a:hover { color: #CE00FF; }
        
/*
Images / Video
---------------------------------------
*/        
    #calendar img {width: 200px; }
    #calendar img:hover {width: 202px; }

    #calendar img.upcoming {width: 400px;}

    .video-frame { display: flex; align-items: center; justify-content: center; width: 100% }
    .vdeo-frame iframe {   width: 560px; height: 315px; margin: 20px; 
                            border: 2px solid #F6B008; }
    .video-frame iframe {   aspect-ratio: 16 / 9; width: 100%; height: 315px; margin: 20px; 
                            border: 2px solid #F6B008; }
        
/*
Text
---------------------------------------
*/
body { font-family: sans-serif; }
h1#title { color: white; font-family: sans-serif; font-weight: normal; }
    h1#title a { color: white; }
    h1#title a:hover { color: #CC0000; }
h2 { color: #F6B008;
     font-family: "Smooch", cursive; font-size: 2.8em;
     text-shadow: 1px 1px 2px #CE00FF, 0px 0px 1em #06474E, 0 0 0.2em #06474E;
 }
h3 { color: #F6B008;
     font-family: "Smooch", cursive; font-size: 3.8em;
     text-shadow: 1px 1px 2px #CE00FF, 0px 0px 1em #06474E, 0 0 0.2em #06474E;
     text-align: center;
}
h4 { color: white; font-family: "Smooch", cursive; font-size: 1.5em; }

#navlist li a { font-family: sans-serif; text-decoration: none; font-weight: 800; letter-spacing: 2px; font-size: 1em; }

li { font-size: 0.9em; }
li.decade { font-family: "Smooch", cursive; font-size: 2em; font-weight: bold; text-decoration: underline;}
#songlists ul li span {font-style: italic;}

.content p { margin: 10px; }
.content ul { margin: 10px; }
.content li { padding:5px; }

a { text-decoration: none; font-family: sans-serif; color: #F6B008;/*#8F8F8F;*/ } 
a:hover { color: #CE00FF; }

#footer  p { text-align: right; font-size: 0.8em; font-type: "New Times Roman"; color: black;}
#footer a { font-weight: bold; }