/*Original layout created by Katherine Amoresano, Jocelyn Chan, and Zach Taylor. This code can be reused and modified in an educational setting and then published and provided to internal and external clients as long as this attribution and use restriction is left in the code*/

/****************************************** CSS for homepage ******************************************/

.intro {
    margin: 15px auto 0;
    line-height: 30px;
    width: 90%;
}

.intro p {
    width: 100%;
}

/* This is the style for the heading on homepage*/
.Title {
	width: 90%;
	font-size: 215%;
	font-weight: 900;
    text-align: center;
    color: white;
    padding-left: 15%;
}



/* Styling for large pic on the homepage*/
.homepage-pic {
	display: block;
	margin-left: auto;
	margin-right: auto;
    margin-top: 30px;
}


/****************************************** CSS for homepage ******************************************/

.intraLink {
    text-decoration: none;
    padding: 7px 50px;
    background-color: #8c00ff;
    font-size: 20px;
    border-radius: 4px;
    border: 3px solid #8c00ff;
    display: inline-block;
    color: white;
}

/* the order of visted first, then hover is important
    If hover is first, visted will overpower it and hover wouldnt do anything for visted links*/
.intraLink:visited {
    color: white;
}

.intraLink:hover {
    border: 3px solid #8c00ff;
    color: #8c00ff
}



h2 {
    margin-top: 5%;
    text-decoration: none;
    font-size: 30px;
	width: 90%;            /* ++JC - Added Width to Prevent Longer titles from spilling over.*/
}

.credit {
	font-size: 16px;
	font-style: italic;
	text-align: center;
	margin-left: 50px;
}

.miniquestion {
    margin-top: 50px;
}

button.collapsible {
    background-color: #B374B4;
    /*background-color: #8F00B3; 
    color: white;*/
    color: #460130;
    cursor: pointer;
    padding: 18px;
    width: 90%;
    border: none;
    text-align: left;
    font-size: 18px;
}

button.collapsible.active, button.collapsible:hover {
    background-color: #54123F;
	color: white;
	/*border: 3px solid #8F00B3;*/
}

.collapsibleContent {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1d9fa;
    text-align: left;
}

.collapsibleContent.display {
    display: block;
}

.topLayer, .bottomLayer{
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    margin: 0;
}

.linkSection {               
    scroll-margin-top: 110px;
}

.ui-icon {
    background-image: url(jquery/images/ui-icons_ffffff_256x240.png)
}


/****************************************** CSS for about us ******************************************/

.disclaimer {
    border-style:solid;
    border-color: black;
    padding: 18px;
}



/****************************************** CSS for Key Terms ******************************************/
/* AE - added styling for the description list- 3/21/22*/
dt {
    font-weight: bold;
}
dd {
  padding-right: 15px;
  margin-right: 20px;
  margin-left: 0;
  
}
/* *************************************************** CSS FOR FISCAL SPONSORSHIP **************************/

.subsec {
    padding-bottom: 14px;
}

/****************************************** CSS for Navigation ******************************************/

.sidenav {
    height: 100%;
    width: 15%;
    position: fixed; /* Stays in place on scroll */
    z-index: 1; /* Stay on top */
    top: 100px; /* Stay at the top */
    background-color: #B029FF;
    clear: both;
    overflow-x: hidden; /* Disables horizontal scroll */
}

/** Nav menu links **/
.sidenav a {
    padding: 12px 8px 12px 16px;  /* ++JC Slightly reduced bottom padding (3rd #) and top padding (1st #) from 20px to 15px. */
    text-decoration: none;
    font-size: 25px;
    display: block;
    color: white;
}
.sidenav a:visited {
    color: white;
}
.sidenav a:hover {
    color: #B029FF;
}


.mobileNav {
    display: none;
}

/* ss- HOME HEADER NAV BUTTONS*/
.homeNav {
    text-decoration: none;
    padding: 12px 6px;
    background-color: #fdc0fd;
    font-size: 30px;
    border-radius: 4px;
    border: 3px solid #fdc0fd;
    display: inline-block;
    color: #8c00ff;
}

/*****************************************   CSS FOR INTERVIEW PAGE ************************************************************/

.InterVid{                          /* ==JC This controls the frame for the video tag. */
	width: 90%;
	display: block;
	margin-bottom: 50px;
	margin-top: 50px;

	
}


.InterAud{            /* ++JC This class controls the audio interview player. */
	width: 90%;
	height: 100px;
}



.TransLink{         /* ++JC This class centers  and stylizes (Bold)the transcript link to match the frame thats there */
	text-align: center;
	width: 50%;
	margin: auto;
}


/****************************************** CSS for every page ******************************************/

main {
    margin: 100px 3% 150px 16%;
    padding: 10px;
    line-height: 30px;
}

#homeMain {
    margin: 0;
    padding: 0;
}

body{
    background-color: #f1d9fa;
    margin: 0 0 120px;
    font-family: sans-serif;
    color: black;
}

html {
    position: relative;
    min-height: 100%;
}

* {
    box-sizing: border-box;
}


a, a:visited {
    color: #6500B8;
    background-color: transparent;
}

.mobileNav a:hover, a:hover, a:active {
    color: #7B00E0;
    background-color: white;
    opacity: 0.9;
}

header {
    width: 100%;
    height: 100px;
    background-color: #8b01db;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}

.logo {
    max-width: 100%;
    max-height: 100%;
    height: 100px;
    width: auto;
    position: fixed;
    top: 0;
    left: 0;
    color: white;
}

h1 {
    text-align: center;
    margin-top: 5px;
    font-size: 75px;
}



/*ss- changed the width to fit new text added and enlarged text for better visability*/
#totopbutton {
    background-color: #8400D1;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 20px;
    line-height: 30px;
    width: 80px;
    bottom: 160px;
    right: 10px;
    position: fixed;
    opacity: 0.9;
}
#totopbutton:hover {
    background-color: #ffffff;
	color: #8F00B3;
    border: #6500B8 solid 2px;

}

p {
    font-size: 18px;
    width: 90%;
}

li {
    font-size: 18px;
    width: 90%;
}

.skipMain a{
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 5;
    background-color: white;
    padding: 10px;
}

.skipMain a:focus, .skipMain a:active {
    top: 0px;
}


/****************************************** CSS for footer ******************************************/


footer {
    position: absolute;
    width: 100%;
    bottom: 0px;
    background-color: #7300D1; /* ==JC Changed "#a200ff" to "#7300D1" for proper contrast ratio - 2/22/22 */
    text-align: center;
    z-index: 2;
    padding-top: 1%;
    color: white;
}

footer a {
    width: 150px;
    text-decoration:none;
    margin: 0 60px;
    padding: 6px 20px;
    background-color:#FFFFFF; /* ==JC Changed "#fdc0fd" to "#FFFFFF" for proper contrast ratio - 2/22/22 */
    font-size: 19px;
    border-radius:5px;
}

/* ss- removed padding since it would cover the additional content from the side nav when scrolling down to the bottom*/
.footDisclaim {
    width: 100%;
}


.short-text { display: none;}
/****************************************** Desktops, Even larger screens ******************************************/
@media screen and (max-width: 1400px) {
   #totopbutton{   /* AE Added JC's Media Query here for Spacing between the button and content. - 3/22/22 */
		bottom: 120px;
		right: 4px;
		border: 0px;
		width: 60px;
		font-size: 16px;
	}

	.short-text { display: none; }

    .homepage-pic {
        height: auto;
        margin-top: 50px;
        
  }

}

/* ss- added for fiscal page intralink buttons*/
.intraLink {
        padding: 7px 10px;
    }


/****************************************** Desktops, large screens ******************************************/
@media screen and (max-width: 1201px) {
    .sidenav a {
        font-size: 20px;
    }

    h1 {
        margin: 0;
        font-size: 60px;
        padding-top: 10px;
    }

    .Title {
        margin: 0;
        font-size: 175%;
        padding-top: 10px;
    }
	
	#totopbutton{   /* AE Added JC's Media Query here for Spacing between the button and content. - 3/22/22 */
		bottom: 120px;
		right: 4px;
		border: 0px;
		width: 60px;
		font-size: 16px;
	}
	
	.short-text { display: none; }


}


/* ss- added for fiscal page intralink buttons*/
@media screen and (max-width: 1100px) {
	
.intraLink {
        padding: 7px 8px; /* ##JC */
    }
	
	#totopbutton{   /* AE Added JS's Media Query here for Spacing between the button and content. - 3/22/22 */
		bottom: 120px;
		right: 4px;
		border: 0px;
		width: 60px;
		font-size: 16px;
	}

	.full-text { display: none; }
	.short-text { display: inline-block; }

}


/****************************************** small screens, laptops ******************************************/
@media screen and (max-width: 1024px) {
    .sidenav {
        display: none;
    }

    main {
        margin: 100px 3% 0 3%;
    }

    footer a {
        margin: 0 20px;
        padding: 5px 20px;
        font-size: 16px;
    }

    footer {
        margin-top: 100px;
        position: absolute;
    }

    .logo {
        position: absolute;
    }


    /* Style the navigation menu */
    .mobileNav {
        display: block;
        overflow: hidden;
        background-color: #a200ff;
        position: absolute;
        top: 10%;
        right: 0px;
        background: rgb(26, 188, 156, 0);
        padding-right: 30px;
    }

    /* Hide the links inside the navigation menu (except for logo/home) */
    .mobileNav #myLinks {
        display: none;
        overflow: hidden;
        background: #a200ff;
        z-index: 2;
    }

    /* Style navigation menu links */
    .mobileNav a {
        color: white;
        padding: 10px;
        text-decoration: none;
        font-size: 16px;
        display: block;
        text-align: center;
    }

    #bars span {
        display: block;
        width: 35px;
        height: 5px;
        background-color: black;
        margin: 6px 0;
    }

    #bars {
        float: right;
        padding: 1.5em 1em;
        background-color: transparent;
        border: none;
    }


    /* Style the active link (or home/logo) */
    .active {
        margin-top: -10px;
    }

    .intraLink {
        padding: 7px 6px; /* ##JC */
    }

    h1 {
        font-size: 50px;
        padding-left: 1em;
    }

    .Title {
        margin: 0;
        font-size: 150%;
        padding-top: 10px;
    }
	

    
    
}

/* ss- added for fiscal page intralink buttons*/
@media screen and (max-width: 845px) {
    .intraLink {
        padding: 7px 0px;
    }
	
    .homepage-pic {
	  width: 70%;
    }
}

/****************************************** iPads, Tablets ******************************************/
@media screen and (max-width: 800px) {
    h1 {
        font-size: 38px;
        padding-top: 3%;
        padding-left: 1em;
    }

    .Title{
        font-size: 125%;
        padding-top: 3%;
    }

    .logo {
        width: 25%;;
        z-index: 2;
        float: left;
    }


    main {
        margin: 100px 5% 0 5%;
    }

    .intraLink {
        padding: 7px 0px;
		font-size: 16px;
    }
	


#totopbutton{  
		bottom: 120px;
		right: 4px;
		border: 0px;
		width: 55px;
		font-size: 16px;
	}
	
	
}

/* ss- added for fiscal page intralink buttons*/
@media screen and (max-width: 720px) {
	.intraLink {
        padding: 7px 0px;        /*##JC */
		border: none;
    }

	
	.credit {
	font-size: 16px;
	font-style: italic;
	text-align: center;
	margin-left: 25px;
}
	
	#totopbutton{  
		bottom: 120px;
		right: 4px;
		border: 0px;
		width: 57px;
		font-size: 16px;
	}

}

/****************************************** mobile devices ******************************************/
@media screen and (max-width: 650px) {
    .topLayer, .bottomLayer{
        padding: 0;
        display: block;
        margin: 0;
    }

    .intraLink {
        text-align: center;
        display: block;
        margin: 5px 0;
		font-size: 20px; /* ##JC */
    }

	.collapsibleContent.display{
		overflow: unset; /* ##JC Double check that this doesn't mess with anything else */
	}
	
    main {
        margin: 100px 8% 0 8%;
    }

    h1 {
        font-size: 30px;
        padding: 1em 1em;  
        width: 80%;
    }

    .Title {
        font-size: 115%;
        padding: 1em 1em;
        width: 80%;
    }

    footer a {
        width: 75px;
        text-decoration: none;
        margin: 0 10px;             /* ==JC Added 10px of top margin to buttons to help with spacing */
        padding: 0px 5px;           /* ==JC Reduced padding to reduce space taken up */
        background-color: #e0e0de;
        font-size: 14.3px;          /* ==JC reduced font size to reduce space */
        border-radius: 4px;
        border: 3px solid #e0e0de;
    }
	
	
	.footDisclaim {
    width: 85%;
	margin: auto;
	margin-top: 10px;
}

    .logo {
        display: none;
    }
	
	
	
	#totopbutton{   /* ==JC Added Media Query for Spacing between this button and content. - 2/28/22 */
		bottom: 120px;
		right: 4px;
		border: 0px;
		width: 60px;
		font-size: 16px;
	}
	
	.InterVid{                          /* ++JC Media Quiery for Interview Video Frame*/
	width: 100%;
	margin-left: -5%;
	display: block;
	margin-bottom: 50px;
	margin-top: 50px;

	
}

.InterAud{            /* ++JC This media query controls the audio interview player. */
	width: 100%;
	margin-left: -5%;
}


}



/****************************************** even smaller mobile devices ******************************************/
@media screen and (max-width: 550px) { /* SHAN added so that TOP text goes away for smaller screens*/
	.short-text { display: inline-block; }
	.full-text { display: none; }
	
	#totopbutton{  
		bottom: 120px;
		right: 0.5px;
		border: 0px;
		width: 40px;
		font-size: 16px;
	}
	
	dd {
	  margin-right: 5px;
	  margin-left: 0;
}
}



@media screen and (max-width: 400px) {

    .Title {
        font-size: 100%;
        padding: 0.5em 1em;
        width: 80%;
    }
	
		#totopbutton{   /* ++JC Added Another Media Query for TotopButton. Stumped here... */
		bottom: 120px;
		right: 0.5px;
		border: 0px;
		width: 40px;
		font-size: 16px;
	}
	

	
	.InterVid{                          /* ++JC This media query controls the frame for the video tag. */
	width: 100%;
	margin-left: -5%;

	}
	
	.TransLink{
		width: 100%;
	}
	
	.homepage-pic {
	  width: 90%;
	  margin-bottom: 50px;
    }


/* .disclaimer {
    padding-right: 0px;
} */

/* ss- removed the extra padding for lists on all pages, if not, there isnt enough space for text */
    ul {
        padding: 0;
        /* margin-left: 0px;
        margin-right: 5px; */
    }

    ol {
        padding: 0;
    }


}