/************************************/
/* Main CSS file for NuMath website */
/************************************/


/* Import style definitions to enable using Computer Modern fonts */
/* @import url("../fonts/cmun-serif/cmun-serif.css"); */


/****************/
/***** Body *****/
/****************/

	body{
		background-color:#fff;
		color:#000;
/* 		font-family:"Computer Modern Serif"; */
		font-family:"Times New Roman";
		font-size:16px;
		line-height:1.6em;
		margin:0px;
		padding:0px;
		box-sizing: border-box;

	/* An annoying hack to push the footer down to the bottom of the page */
	/* Reference: https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b */
		display: flex;
		min-height: 100vh;
		flex-direction: column;
	}
	body a{
		color:#045;
	}
	body a:hover{
		color:#03a;
	}
	body a:active{
		color:#900;
	}


/******************/
/***** Header *****/
/******************/

	#main-header{
		display:flex;
		flex-direction: row;
		align-items:center;
		background-color:#2f224a;
		color:#fff;
		width:auto;
	}

	#logo{
		display:inline;
		padding:12px 20px 12px 20px;
		width:140px;
		user-select:none;
		font-size:24px;
	}
	#logo a{
		color:#fff;
		text-decoration:none;
	}

	#navbar{
		display:inline;
		flex:1;
	}
	#navbar ul{
		padding:0;
		margin-top:0em;
		margin-bottom:0em;
		list-style:none;
	}

	#navbar li{
		display:inline-block;
	}

	#navbar a{
		color:#ccc;
		text-decoration:none;
		font-size:16px;
		padding-left:11px;
		padding-right:11px;
		padding-top:18px;
		padding-bottom:18px;
	}

	#navbar a:hover{
		background-color:#3f6666;
		color:#fff;
	}	
	
	.user-widget{
		display:inline;
		font-size:12px;
		margin-right:20px;
	}
	.widget-button a{
		margin-left:10px;
		padding:8px;
		background-color:#3f325a;
		color:#ccc;
		text-decoration:none;
		border:1px solid #666;
		border-radius:5px;
		color:#ddd;
		text-decoration:none;
		border-radius:3px;
	}
	/* *** TODO: unify user-widget and profile-dropdown, clean up definitions, id's, class names etc */
	.widget-button a:visited{
		color:#ddd;
	}
	.widget-button a:hover{
		background-color:#3f6666;
		color:#fff;
	}
	.widget-button a:active{
		background-color:#3f6666;
		color:#fff;
	}
	
	#profile-div {
		background:url("../images/profile.svg");
	}
	#profile-div2{
		background:url("../images/profile-highlighted.svg");
	}


	#profile-dropdown{
		position:absolute;
		right:-4px;
		background-color:#2f224a;
		border:1px solid #aaa;
		box-shadow: 2px 4px 10px;
	}
	#profile-dropdown div{
	/* 	display:inline; */
		margin:10px 10px 10px 10px;
		padding:2px;
		background-color:#3f325a;
		text-align:center;
	}
	#prof-dropdown-buttons{
		list-style:none;
		padding:0px;
		margin:0px;
	}
	#prof-dropdown-buttons li{
		margin-bottom:0.6em;
		width:100px;
		text-align:center;
	}	
	#profile-dropdown a{
		width:60%;
		padding-top:4px;
		padding-bottom:4px;
	}
	
/* 
	#profile-dropdown a{
		text-decoration:none;
		font-size:12px;
		color:#ccc;
	}
	#profile-dropdown a:hover{
		color:#fff;
		padding:10px;
	}
	#profile-dropdown a:active{
		color:#f00;
	}
 */

	#nav-dropdown{
		position:absolute;
		background-color:#2f224a;
		border:1px solid #aaa;
		box-shadow: 2px 4px 10px;
	}

	#nav-dropdown ul{
		list-style:none;
		padding:0px;
		margin:0px;
	}

	#nav-dropdown li{
		color:black;
		text-align:left;
		padding-left:12px;
		padding-right:20px;
		border-bottom:1px solid #aaa;
	}

	#nav-dropdown a{
		display:inline-block;
		text-decoration:none;
		line-height:2.0em;
		padding-left:12px;
		margin-left:-12px;
		width:100%
	}
	#nav-dropdown a:link{
		color:#ccc;
	}
	#nav-dropdown a:visited{
		color:#ccc;
	}
	#nav-dropdown a:hover{
		color:white;
	}
	#nav-dropdown a:active{
		color:#ccc;
	}

	#navitem-currentpage{
		text-decoration:underline;
	}



/*******************/
/***** Content *****/
/*******************/

	#content{
		flex:1;
		margin-top:0px;
		margin-bottom:30px;
		text-align:left;
		
		padding-left:6%;
		padding-right:6%;
		margin-left:1%;
		margin-right:1%;		
	}

	#content h1{
		color:#000;
		font-size:24px;
		line-height:1.6em;
		padding-top:30px;
	}
	#content h2{
		color:#000;
		font-size:18px;
		line-height:1.6em;
		padding-top:30px;
	}

	#content ol{
/* 		line-height:1.2em; */
	}

	#content li{
		margin-top:0.5em;
		margin-bottom:0.5em;
	}
	#content pre{
		background-color:#eee;
	}



/******************/
/***** Footer *****/
/******************/

	#main-footer{
		display:flex;
		flex-direction: row;
		padding-left:20px;
		padding-right:20px;
		padding-top:3px;
		padding-bottom:3px;
		background-color:#eee;
		font-size:12px;
		color:#444;
	}
	#footer-left{
		flex:1;
		display:inline;
	}
	#footer-right{
		display:inline;
	}