/* style classes to be used in discoverochem website pages */


:root {

	/* color palette */

	--pureLightColor:rgb(240,240,240);  /* light gray for background */
	--pureMediumColor:gray;
	--pureDarkColor:black;
	--mainLightColor:rgb(231, 206, 232); /* light purple */
	--mainDarkColor: rgb(68,0,102);    /*hsl(280, 100%, 40%); hsv (280, 100%, 80%)  dark purple same hue as light purple */
	--secondDarkColor:rgb(30, 0, 128);  /*dark blue with trace maroon */
	--complementDarkColor:rgb(0,150,146);  /* aqua green matches bot image */
	--accentLightColor:rgb(255, 180, 94); /* orange  hsl (32,63,100)   */
	--lightAccentColor:rgb(255, 226, 194);  /* lighter orange */


	/* --suggestionColor:rgb(0,134,126); */
	/* --suggestionColor:hsl(175, 70%, 40%); */


	/* text */

	--mainFontColor: var(--pureDarkColor);
	--mainFontSize:13pt;
	--largeFontSize:14pt;
	--mainFontFamily:helvetica;	
	--menuFontColor: var(--mainFontColor);
	--menuFontSize: var(--mainFornSize);
	--menuFontFamily: var(--mainFontFamily);
	--lineHeight:1.3;
	--textIndent:30px;
	--subHeadingRightMargin:10px;  /* these are the summary word(s) at the beginning of a paragraph */
	


	/* background and main container */

	--backgroundColor:var(--mainLightColor);
	--pageWidth:700px;
	--topMargin:20px;
	--sideMargins:15px;
	--bottomMargin: var(--sideMargin);


	/* subsections */

	--topSectionBackgroundColor: var(--pureLightColor);

	--topSectionHeight:103px;
	--logoTopMargin:14px;
	--logoLeftMargin:10px;
	--logoPadding:10px;
	--logoHeight:60px;

	--mottoTopMargin:28px;
	--mottoLeftMargin:45px;
	--mottoHeight:55px;

	--menuColor: var(--pureLightColor);
	/* nav bar height is controlled by the height of its buttons */
	--navButtonSidePadding:30px;
	--navButtonTopBottomPadding:7px;

	--shadow:10px 10px 15px gray;
	--aboutMenuWidth:540px;	
	--aboutMenuLeftOffset:50px;
	--aboutMenuMinHeight:120px;
	--aboutMenuPadding:30px;
	--userMenuWidth:188px;	
	--userMenuLeftOffset:506px;
	--pagesMenuWidth:530px;	
	--pagesMenuLeftOffset:50px;
	--pagesMenuBottomPadding:10px;
	--pagesMenuButtonSidePadding:20px;
	--pagesMenuButtonTopPadding:7px;
	--pagesMenuButtonBottomPadding:4px;
	--pagesMenuLinkTopPadding:6px;
	--pagesMenuLinkBottomPadding:3px;
	--missingPrereqLeftPadding:30px;
	--pagesSubmenuWidth: calc(var(--pagesMenuWidth) - 2 * var(--pagesMenuButtonSidePadding));
	--pagesMenuLinkWidth: calc(var(--pagesMenuWidth) - 5 * var(--pagesMenuButtonSidePadding));
	--pagesMenuLinkButtonWidth: calc(var(--pagesMenuWidth) - 3 * var(--pagesMenuButtonSidePadding));
	--menuIconHeight:15px;

	--contentPadding:20px;

	/* borders */
	--borderStyle:solid;
	--borderColor: var(--pureDarkColor);
	--borderWidth:3px;	
	--thinBorderWidth:1px;
	--imageBorderColor: var(--pureDarkColor);
	--borderRadius:15px;


	/* hover */
	--hovorColor:var(--accentLightColor);
	--hovorText:var(--pureDarkColor);




}





sup, sub {

	/* line spacing to enable non-overlapping suscripts and superscripts */

	vertical-align:baseline;
	position:relative;
	top:-0.4em;
}


sub {

	/* more line spacing to enable non-overlapping suscripts and superscripts */

	top:0.4em;
}

a {
	color:var(--secondDarkColor);
}

a:visited {
	color:var(--mainDarkColor);
}



body {
	background-color: var(--backgroundColor);
	margin-left: var(--sideMargins);
	margin-right:var(--sideMargins);
	font-size: var(--mainFontSize);
	font-family: var(--mainFontFamily);
	color: var(--mainFontColor);

}


div.containerDiv {
	margin:auto;
	margin-top: var(--topMargin);
	margin-bottom: var(--bottomMargin);
	width: var(--pageWidth);

}


div.topPicDiv {
	border-style: var(--borderStyle);
	border-color: var(--borderColor);
	border-width: var(--borderWidth);
	background-color: var(--topSectionBackgroundColor);	
	height: var(--topSectionHeight);

}


img.logoImg {
	display:inline-block;
	height: var(--logoHeight); 
	padding: var(--logoPadding);
	margin-left: var(--logoLeftMargin);
	margin-top: var(--logoTopMargin);
	float:left; 
 
}


img.mottoImg {
	display:inline-block; 
	height: var(--mottoHeight); 
	margin-left: var(--mottoLeftMargin);
	margin-top: var(--mottoTopMargin);

}


div.topMenuDiv {
	position:relative;
	border-left: var(--borderStyle);
	border-right: var(--borderStyle);
	border-bottom: var(--borderStyle);
	border-color: var(--borderColor);
	border-width: var(--borderWidth);
	background-color:var(--menuColor);
	padding:0px;
	color: var(--menuFontColor);
	font-size: var(--memuFontSize);
	font-family: var(--menuFontFamily);


}


a.menuLink {
	display:inline-block;
	background-color:var(--menuColor);
	padding-left: var(--navButtonSidePadding);
	padding-right: var(--navButtonSidePadding);
	padding-top: var(--navButtonTopBottomPadding);
	padding-bottom: var(--navButtonTopBottomPadding);
	color: var(--menuFontColor);
	font-size: var(--memuFontSize);
	font-family: var(--menuFontFamily);
	text-decoration:none;
}


button.menuButton {
	display:inline-block;
	border-style:none;
	border-width:0px;
	border-color: var(--borderColor);
	background-color:var(--menuColor);
	padding-left: var(--navButtonSidePadding);
	padding-right: var(--navButtonSidePadding);
	padding-top: var(--navButtonTopBottomPadding);
	padding-bottom: var(--navButtonTopBottomPadding);
	color: var(--menuFontColor);
	font-size: var(--memuFontSize);
	font-family: var(--menuFontFamily);
	text-decoration:none;
}

button.lastMenuButton {
	position:absolute;  /* right-aligns the last button */
	right:0px;
}


/* holds the dropdown menus from the navigation bar */
div.subMenusDiv {
	position:relative;
}


div.aboutDropdownMenuDiv {
	position:relative;
	left: var(--aboutMenuLeftOffset);
	min-height: var(--aboutMenuMinHeight);
	box-shadow: var(--shadow);
	border-style: var(--borderStyle);
	border-top:none;
	border-color: var(--borderColor);
	border-width: var(--borderWidth);
	padding: var(--aboutMenuPadding);
	width: var(--aboutMenuWidth);
	background-color:var(--menuColor);
	text-align:center;
}


div.userDropdownMenuDiv {
	position:relative;
	left: var(--userMenuLeftOffset);
	width: var(--userMenuWidth);
	box-shadow: var(--shadow);
	border-style: var(--borderStyle);
	border-top:none;
	background-color:var(--menuColor);
	text-align:left;
}


div.pagesDropdownMenuDiv {
	position:relative;
	left: var(--pagesMenuLeftOffset);
	border-style: var(--borderStyle);
	border-top:none;
	border-color: var(--borderColor);
	border-width: var(--borderWidth);
	padding-bottom: var(--pagesMenuBottomPadding);
	width: var(--pagesMenuWidth);
	background-color:var(--menuColor);
	text-align:left;
	box-shadow: var(--shadow);
}

/* the first level of the pages menu is buttons for each unit */
button.unitmenuButton {
	display:block;
	border-style:none;
	border-width:0px;
	border-color: var(--borderColor);
	padding-left: var(--pagesMenuButtonSidePadding);
	padding-right: var(--pagesMenuButtonSidePadding);
	padding-top: var(--pagesMenuButtonTopPadding);
	padding-bottom: var(--pagesMenuButtonBottomPadding);
	width: var(--pagesMenuWidth);
	background-color:var(--menuColor);
	color: var(--menuFontColor);
	font-size: var(--menuFontSize);
	font-family: var(--menuFontFamily);
	text-decoration:none;
	text-align:left;
}

/* each button opens a submenu space for the sections within that unit */
div.pagesDropdownUnitmenuDiv {
	border-bottom: var(--borderStyle);
	border-width: var(--thinBorderWidth);
	border-color: var(--borderColor);
	padding-left: var(--pagesMenuButtonSidePadding);
	padding-right: var(--pagesMenuButtonSidePadding);
}

/* each submenu has buttons for each section */
button.submenuButton {
	display:block;
	border-style:none;
	border-width: var(--thinBorderWidth);
	border-color: var(--borderColor);
	padding-left: var(--pagesMenuButtonSidePadding);
	padding-right: var(--pagesMenuButtonSidePadding);
	padding-top: var(--pagesMenuButtonTopPadding);
	padding-bottom: var(--pagesMenuButtonBottomPadding);
	background-color: var(--menuColor);
	color: var(--menuFontColor);
	font-size: var(--menuFontSize);
	font-family: var(--menuFontFamily);
	text-decoration:none;
	text-align:left;
	width: var(--pagesSubmenuWidth);
	
}

div.pagesDropdownSubmenuDiv {
	border-top:solid;
	border-width: var(--thinBorderWidth);
	border-color: var(--borderColor);
	margin-left: var(--pagesMenuButtonSidePadding);
	padding-right: 0px;
}

a.userMenuLink {
	display:block;
	border-style:none;
	background-color:var(--menuColor);
	padding-left:var(--pagesMenuButtonSidePadding);
	padding-right:var(--pagesMenuButtonSidePadding);
	padding-top:var(--pagesMenuLinkTopPadding);
	padding-bottom:var(--pagesMenuLinkBottomPadding);
	color: var(--menuFontColor);
	text-decoration:none;
}


a.submenuLink,
button.submenuLink {
	display:block;
	border-style:none;
	border-bottom:solid;
	border-width: var(--thinBorderWidth);
	border-color: var(--borderColor);
	background-color:var(--menuColor);
	padding-left:var(--pagesMenuButtonSidePadding);
	padding-right:var(--pagesMenuButtonSidePadding);
	padding-top: var(--pagesMenuLinkTopPadding);
	padding-bottom: var(--pagesMenuLinkBottomPadding);
	color: var(--menuFontColor);
	text-decoration:none;
	width: var(--pagesMenuLinkWidth);
}

a.currentSubmenuLink,
button.currentSubmenuLink {
	font-weight:bold;
}


button.submenuLinkMissingPrereq {

	color: var(--pureMediumColor);
	font-size: var(--fontSize);
	font-family: var(--fontFamily);
	text-align:left;
	width: var(--pagesMenuLinkButtonWidth);
}

a.submenuLinkMissingPrereq {
	color: var(--pureMediumColor);
	font-size: var(--fontSize);
	font-family: var(--fontFamily);
	text-align:left;
	
}


div.missingPrereqDropdownDiv {
	padding-left: var(--missingPrereqLeftPadding);
}

a.missingPrereqLink {
	display:block;
	color: var(--menuFontColor);
	text-decoration:none;
	padding-left:var(--missingPrereqLeftPadding);
	padding-right:var(--pagesMenuButtonSidePadding);
	padding-top: var(--pagesMenuLinkTopPadding);
	padding-bottom: var(--pagesMenuLinkBottomPadding);
}

img.menuIcon {
	height:var(--menuIconHeight);
	display:inline;
	
}


img.menuIconComplete {
	margin-left:5px;
}

img.menuIconIncomplete {
	margin-right:5px;
}

/* page content */

div.informationDiv {
	margin-top: var(--topMargin);
	border-style: var(--borderStyle);
	border-color: var(--borderColor);
	margin-bottom: var(--topMargin);
	padding: var(--contentPadding);
	background-color: var(--pureLightColor);
	line-height: var(--lineHeight);
	text-indent: var(--textIndent);
}

p.title {
	text-align:center;
	font-weight:bold;
	font-size: var(--largeFontSize);
	text-indent:0px;
}

span.subhead {
	font-weight:bold;
	margin-right: var(--subHeadingRightMargin);
}

span.vocabWord {
	font-weight:bold;
	/* text-transform:capitalize; */
	/* color:var(--mainDarkColor); */
}

img.informationImg {
	display:block;
	margin:auto;
	border-style: var(--borderStyle);
	border-color: var(--imageBorderColor);
}

img.wordcloudImg {
	display:block;
	margin:auto;
	border-style: var(--borderStyle);
	border-color: var(--imageBorderColor);
        width:640px;
}

p.bullet {
	margin-left:70px;
	text-indent:-15px;
	margin-top:5px;
	margin-bottom:8px;
	
}

button.moveOnButton {
	height:40px;
	padding-left:25px;
	padding-right:25px;
	border-width:4px;	
	font-size:14pt;
}


/* components of the bot's comments & suggestion space */

div.suggestionsDiv {
	border-radius:var(--borderRadius);
	border-style: var(--borderStyle);
	border-color:var(--complementDarkColor);
	background-color:white;
	
}

img.botImg {
	height:90px;
	border-style:none;
	float:left;
	margin-top:3px;
	margin-left:30px;
	margin-right:10px;
}

div.initialCommentsDiv {
	/* these are brief and don't extend lower than the bot image */
	text-indent:0px;
	min-height:100px;
	padding:20px;
	color: var(--complementDarkColor);
	text-align:center;

}

div.internalCommentsDiv {
	/* these are longer and are presented as a paragraph */
	min-height:100px;
	padding:20px;
	color: var(--complementDarkColor);
	text-align:left;
}


/* home page specific content */

img.questionsImg {

	width:480px;
	display:block;
	margin:auto;
	padding-top:20px;
	padding-bottom:0px;

}

div.homePageSuggestionsDiv {

	width:430px; 
	margin:auto; 
	margin-top:40px;

}


button.getStartedButton {

	display:block;
	margin:auto;
	margin-top:40px;
	margin-bottom:30px;

}

div.footerDiv {
	margin-top:20px;
	font-size:10pt;
	text-align:center;
	margin-bottom:40px;
}



/* for page questions and feedback  */

div.questionsDiv {
	border-bottom:var(--borderStyle);
	border-right:var(--borderStyle);
	border-left:var(--borderStyle);
	margin-bottom:20px;
	border-color: var(--borderColor);
	background-color:var(--pureLightColor);
	text-align:center;
	line-height: var(--lineHeight);
}

div.individualQuestionDiv {
	border-top:var(--borderStyle);
	border-color: var(--borderColor);
	padding:20px;
	text-align:left;
	text-indent:var(--textIndent);
}


div.questionTitleDiv {
	text-align:center;
	font-weight:bold;
}

img.questionImg {

	border-style: var(--borderStyle);
	border-color: var(--borderColor);
	border-width: var(--borderWidth);
	display:block;
	margin:auto;
	margin-bottom:20px;

}

div.answerDiv {

	text-indent:0px;
	/*padding-left:40px;*/
	/*border-style:solid;*/
	display: inline-block;
  	position: relative;
  	left: 50%;
  	transform: translateX(-50%);
}

p.answerChoiceP {

	text-indent:-50px;
	padding-left:50px;
	margin-top:5px;
	margin-bottom:5px;

}


form.radioForm {
	display:inline-block;
	margin:auto;
	text-align:left;
}

div.submissionDiv {
	text-align:center;
	margin-bottom:80px;
}

input.submissionButton {
	height:40px;
	padding-left:25px;
	padding-right:25px;
	border-width:4px;	
	font-size:14pt;
}


div.feedbackDiv {
	margin-bottom:20px;
	background-color:var(--pureLightColor);
	text-align:center;
	display:none;
	line-height: var(--lineHeight);
	border-style:var(--borderStyle);
	border-color:var(--complementDarkColor);
	
}

div.correctFeedbackDiv {

	padding:20px;
	display:none;
}

div.incorrectFeedbackDiv {

	padding:20px;
	display:none;
}

div.missingFeedbackDiv {

	padding:20px;
	display:none;
	
}

div.highlight {

	color:var(--complementDarkColor);
	border-color:var(--complementDarkColor);
	/*background-color:var(--lightAccentColor);*/

}

img.hintImg {
	border-style:solid;
	border-color:red;
	margin:10px;
}

div.hintDiv {
	border-style:solid;
	border-color:red;
	margin:10px;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:20px;
	padding-right:20px;
}

div.followupQuestionDiv {
	
}


/* for the search page */

div.informationDivSearchPage {

	text-align:center;
	text-indent:0px;

}


button.searchButton {


	margin-top:20px;
 
 	

}

div.suggestionsLinksDiv {
	text-indent:0px;
	padding-left:120px;
	padding-right:20px;
	padding-top:10px;
	padding-bottom:20px;
	border-style:none;
}

div.indexColumnDiv {

	border-style:solid;
	padding:20px;
	width:280px;
	float:left;
	height:240px;
	overflow-y:scroll;
	text-align:left;
}



/* hovering for all hoverable items */
a.getStartedLink:hover,
img.logoImg:hover,
a.menuLink:hover, 
a.submenuLink:hover, 
button.menuButton:hover, 
button.unitmenuButton:hover,
button.submenuButton:hover, 
button.missingPrereqButton:hover,
a.missingPrereqLink:hover, 
a.currentSubmenuLink:hover,
a.userMenuLink:hover{
	background-color: var(--hovorColor);
	color: var(--hovorText);

}

/* pointer cursor while hovering */
img.logoImg:hover {
	cursor:pointer;
}