/* CSS */
/* Daniel Bryant */
/* While learning some html and css, I was thankful to have access to tutorials from w3schools, so wanted to give them a shout out here */

<style type="text/css">
		@page { margin-right: 1.25in; margin-top: 1in; margin-bottom: 1in }
		p { margin-bottom: 0.1in; direction: ltr; color: #000000; line-height: 120%; orphans: 2; widows: 2 }
		p.western { font-family: "Times New Roman", serif; font-size: 12pt; so-language: en-US }
		p.cjk { font-family: "ＭＳ 明朝", serif; font-size: 12pt }
		p.ctl { font-family: "Times New Roman", serif; font-size: 12pt; so-language: ar-SA }
	</style>

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

	div.main{
		margin-top: 8px;
		/*margin-bottom: 100px;*/
		margin-right: 8px;
		margin-left: 8px;
		min-height:100%;

	}
	
	h1, p {
		color: black;
		font-family: "Times New Roman", Times, serif;	
	}

	p {
		font-size: 1.10em; /* 1em is normal. em units allow people to resize */
		/*text-indent: 40px;*/ /*for paragraph indent*/
	}

} /* end small screen defs for now */

html {
	
	margin:0;
	padding:0;
	height:100%;
}

body {
	background-color: white;
	margin:0; /* makes it so top navigation bar does not have white around it */
	padding:0;	
	height:100%;
	min-height:100%;
}


/* ---- for nav bar, class="horzmenu" -- maybe not the most elegant, but it works! ---- */
ul.horzmenu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden; /* this is very important! */
	background-color: #000044; /* color of bar all the way across */
}

ul.horzmenu li {
	float: left;
}

ul.horzmenu li a { /* only applies to a in li in ul.horzmenu*/
	display: block; /* as opposed to inline or inline-block*/
	font-family: "Times New Roman", Times, serif;
	font-size: 1.15em;
	padding: 16px; /* this gives the buttons their size */
	color: white;
	text-align: center;
	text-decoration: none;
	/* background-color: #000044; */  /* color of menu items -- make it same as bar all the way across */
}

ul.bottombar li a { /* for the bar at the bottom */
	/* display: block; */ /* as opposed to inline */
	/* font-family: "Times New Roman", Times, serif; */
	/* font-size: 1.15em; */
	padding: 8px; /* override the earlier 16px definition */
	/* position:fixed; */
	/* bottom:0; */
	/* color: white; */
	/* text-align: center; */
}

ul.bottombar li a.small{
	font-size: .75em;
	/* vertical-align: middle; */
	/*  display: block; */ /* as opposed to inline or inline-block*/
	/*  font-family: "Times New Roman", Times, serif; */
	/*  position: absolute; */
	padding: 12px; 
	/* vertical-align: center; */
	/*  color: white; */
	/*  text-align: right; */
	/*  text-decoration: none; */
}

#thebottombar {
	position:relative;
	bottom:0;
	width:100%;
	height:2em;
	font-size: .7em;
}

ul.horzmenu li a:hover:not(.active) {
	background-color: #0033cc; /* color of bar on hover over not-active item*/
	/*color: #000044;*/
}

/*
ul.horzmenu li.dropdown {
 	display: block;
} */

ul.horzmenu li a.active {
	background-color: #0033cc; /* color of active item */
}

/* set list items of class "right" to float right */
ul.horzmenu li.right {
	float:right;
}

ul.horzmenu li.dropdown div.dropdown-menu {
	display: none;
	position: absolute;
	background-color: #000044; /* same color as menu */
	max-width: 100%;
	box-shadow: 0px 8px 16px 0px #000044;
}


/* could also generalize with: ".horzmenu .dropdown .dropdown-menu a" */
ul.horzmenu li.dropdown div.dropdown-menu a {
	color:white;
	text-align: left;
	text-decoration: none;
	display: block; /* change this to inline-block to make the dropdown menu run width-wise */	
}

/* color of item in dropdown on hover */
ul.horzmenu li.dropdown div.dropdown-menu a:hover {
	background-color: #0033cc;
}

/* makes the drop-down button stay a different color when you scroll over the items in the drop-down menu */
/* when you hover over any item in the list with "dropdown" class, you will change the a item with "dropdownbutton" class (it is defined within the list). */
/* could also write as .dropdown:hover .dropdownbutton and be fine */
/* works because it applies to the button with class "dropdownbutton" subordinate to only that particular li with class "dropdown" */
li.dropdown:hover a.dropdownbutton {
	background-color: #0033cc;
}


.closer {
	display: none;
}


/* ------------------------------------------------------------------------------------ */

@media only screen and (max-width: 475px){
	ul.horzmenu li {float:none;} /* turn off float for small screen */
	ul.horzmenu li.right {float:none;} /* turn off float for small screen */


	div.main { /* recall you are in the small screen settings right now! */
		margin-top: 10px;
		/*margin-bottom: 100px;*/
		margin-right: 10px;
		margin-left: 10px;
		max-width:525px; /*max-width better than width because can resize down*/
		min-height:100%;
		/*box-shadow: 0 4px 8px 0;*/
	}
	/*for putting a div, fixed anywhere on page. tag includes class="title" (arbitary name of class; illustrative)*/
	div.title {
		position:fixed;
		top:0;
		left:0;
		outline:3px solid #777777;
		width:100%;
		background-color:white;
		/*padding-left: 20px;*/ /* note margin-left would pull the outline with it */
	}


	h1, p {
		color: black;
		font-family: "Times New Roman", Times, serif;
		/*font-variant: small-caps;*/ /*Makes it all caps with big caps to start sentences*/	
	}

	p {
		font-size: 1.10em; /* 1em is normal. em units allow people to resize */
		/*text-indent: 40px;*/ /*If you want an indent at first line of paragraph*/

		line-height: 1.3;
		
		/*letter-spacing:3px;*/
		/*word-spacing:10px;*/
	}

	p.sub{
		font-size: 0.90em;
		display:inline; <!-- this avoids the new line with the p -->
	}

	p.bigh{
		font-size: 2.10em;
		display:inline; <!-- this avoids the new line with the p -->
	}

	p.divider{
		text-align:center;
	}


	/* this is what actually causes the dropdown effect; above, display is set to none; now when display is set to block, the menu will appear (in the right place because above position is set to absolute) */
	ul.horzmenu li.dropdown:hover div.dropdown-menu {
		display: block;
		
	}

	/* Do, change behavior for mobile screen! Toggle on hover?*/
	/* just make it so it's not a drop-down on mobile */
		

	/* note the tilde for siblings */
	ul.horzmenu li.dropdown:hover ~ li.closer {
		display: block;
		position:absolute;
		right:1px;
		background-color:#ffffff; /* background is of li */
	}

	ul.horzmenu li.dropdown:hover ~ li a.closer {
		color: #000044; /* text is of a */
		font-size:.7em;
	}

		
	
	

} /* end @media */




/* for computer screen (anything bigger than value specified below) */
@media only screen and (min-width: 475px) {


	/* this is what actually causes the dropdown effect; above, display is set to none; now when display is set to block, the menu will appear (in the right place because above position is set to absolute */
	ul.horzmenu li.dropdown:hover div.dropdown-menu {
		display:block;
	}

	div.main {
		margin-top: 30px;
		/*margin-bottom: 100px;*/
		margin-right: 100px;
		margin-left: 100px;
		max-width:625px; /*max-width better than width because can resize down*/
		min-height:100%;
		/*box-shadow: 0 4px 8px 0;*/
	}

	/*for putting a div, fixed anywhere on page. tag includes class="title" (arbitary name of class; illustrative)*/
	div.title {
		position:fixed;
		top:0;
		left:0;
		outline:3px solid #777777;
		width:100%;
		background-color:white;
		padding-left: 20px; /* note margin-left would pull the outline with it */
	}


	h1, p {
		color: black;
		font-family: "Times New Roman", Times, serif;
		/*font-variant: small-caps;*/ /*Makes it all caps with big caps to start sentences*/	
	}

	p {
		font-size: 1.10em; /* 1em is normal. em units allow people to resize */
		/*text-indent: 40px;*/ /*If you want an indent at first line of paragraph*/

		line-height: 1.3;
		
		/*letter-spacing:3px;*/
		/*word-spacing:10px;*/
	}
	p.divider{
		text-align:center;
	}
	p.sub{
		font-size: 0.90em;
		display:inline; <!-- this avoids the new line with the p -->
	}

	p.bigh{
		font-size: 2.10em;
		display:inline; <!-- this avoids the new line with the p -->
	}

	/*for class attribute. In html, anything with class="hidden" in tag*/
	.hidden {

		visibility:hidden;

	}

	a.maintext:link {
		color:#000044;
		text-decoration: none; /*means no underline*/
	}

	a.maintext:visited {
		color:#0033cc;
		text-decoration: none; /*means no underline*/
	}

	a.maintext:hover {
		color:#0033cc;
		text-decoration: none; /*means no underline*/
	}

	a.maintext:active {
		color:#0033cc;
		text-decoration: none; /*means no underline*/
	}


	.leftcol {
	width:40%;
	float:left;
	padding:0px;
	}

	.rightcol{
	width:55%;
	float:left;
	padding-left:5%;
	font-size: .85em;
	}

	.row:after {
	content: "";
	display: table;
	clear: both;
	}

	#resumeleft{
	list-style-type:none;
	margin:0;
	padding:0;
	}

	

	
	
}

/* change the color of the title across devices */
a.title{
	color: black;
	text-decoration: none;
}