/*----------------- CSS File For the Path of Light Yoga Site V5 --------------*/
/* For this chapter, I'm adding some things like making th navbar always be at*/
/* the top of the screen, making text multiple columns, paralax scrolling, etc.*/

/* NOTE: if confused about anything, see the hands-on activities for the chapter!*/

*{

/* This here makes it so that every elements width/heigh includes the padding and margins*/
/* By default, the width/heigh is only the content, not the padding/margin (this undo's that)*/
        box-sizing: border-box;

}


body
{

        color:#40407A;
        background-color: #40407A;
        font-family: Verdana, Arial, sans-serif;
        max-width: 1600px;
        min-width: 900px;
        margin: 0;

}


header
{

        background-color: #80CBC4;
        background-image: url(sunrise.jpg);
        background-color: #40407A;
        color: #FFFFFF;
        background-size: 100% 100%;
        
        margin-top:50px;


}


header a
{

        text-decoration: none;

}

header a:link
{

        color:#FFFFFF;

}


header a:visited
{

        color:#FFFFFF;

}


header a:hover
{

        color: #EDF5F5;

}


h2
{

        margin: 0;

}


footer
{

        font-style: italic;
        text-align: center;
        font-size: 0.80em;


/* This clears right float                                                               */
        
        clear: right;

}


nav
{

        
        background-color: white;
        
        margin: 0;
        padding-top: 0.5em;
        padding-bottom: 1em;
        padding-right: 1em;
        font-weight: bold;
        text-align: right;
        width: 100%;
        height: 50px;
        
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;

}


nav a
{
        
        text-decoration: none;

}


nav ul
{

        list-style-type: none; 
        
        margin: 0;
        padding-right: 2em;
        font-size: 1.23em;

}


nav li
{

        padding-left: 2em;

/* "display:inline" simply states that for this given element, don't start on a new line */
/*  and base the elements size on the content it holds                                   */

        display: inline;

}


nav a:link 
{ 
            
        color: #3F2860; 
        
}


nav a:visited 
{ 
            
        color: #497777; 
        
}


nav a:hover 
{ 
            
        color: #A26100; 
        
}


li, dd 
{

        font-size: 90%;

}


#wrapper
{

/*NOTE: These two lines (the margins) center the contents that have this ID              */
        margin-right:auto;
        margin-left:auto;

        
        width: 80%;
        background-color: #F5F5F5;
        padding: 2em;

}


/* NOTE: "50vh" means that you're setting the contents to be 50% of the viewports height      */
/*(aka 50% the height of your browsers window)                                                */

.home
{

        height: 50vh;
        padding-top: 6em;
        padding-left: 8em;
        font-size: 120%;
        min-height: 300px;

}


.content
{

        height: 250px;
        padding-top: 2em;
        padding-left: 8em;
        padding-bottom: 2em;

}


.OneThird
{

        float: left;
        
        width: 33%;
        padding-left: 2em;
        padding-right: 2em;

}


.OneHalf
{

        float: left;
        
        width: 50%;
        padding-left: 2em;
        padding-right: 2em;

}


#mathero
{

        height: 300px;
        background-image: url(yogamat.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;

        clear: both;

}


#loungehero
{
   
        height: 300px;
        background-image: url(yogalounge.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;

        clear: both;

}