/* CSS Document */
:root{
	/*variables*/
	--msgrey: rgba(210,210,210,1.00);
	--msblue: rgba(51,156,255,1.00);
}

#topmenu ul{
	/*the entire top menu*/
	position: fixed;
	left: 0;
	top: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	background-color: var(--msgrey);
	border-bottom:1px solid black;
	z-index: 10;
}
#tm_home, #tm_edit, #tm_view, #tm_print, #tm_setup, #tm_settings, #tm_help, #tm_admin, #tm_superadmin, #tm_logout, #tm_iep, #tm_beta{
	/*each menu*/
	background-color: var(--msgrey);
	border: none;
}
#tm_home a, #tm_edit a, #tm_view a, #tm_print a, #tm_setup a, #tm_settings a, #tm_help a, #tm_admin a, #tm_superadmin a, #tm_logout a, #tm_iep a, #tm_beta a{
	/*each menu link*/
	color: black;
	padding: 5px 15px;
	text-decoration: none;
	display: block;
	font-size: 12px;
}
#tm_edit_menu, #tm_view_menu, #tm_print_menu, #tm_setup_menu, #tm_settings_menu, #tm_help_menu, #tm_admin_menu, #tm_superadmin_menu, #tm_iep_menu{
	/*each submenu*/
	display: none;
	position: absolute;
	background-color: var(--msgrey);
	max-width: 200px;
	border:1px solid black;
}
#tm_edit_menu a, #tm_view_menu a, #tm_print_menu a, #tm_setup_menu a, #tm_settings_menu a, #tm_help_menu a, #tm_admin_menu a, #tm_superadmin_menu a, #tm_iep_menu_a{
	/*each submenu link*/
	color: black;
	padding: 5px 15px;
	text-decoration: none;
	display: block;
	font-size: 12px;
}

/*show submenu when hover*/
#tm_edit:hover #tm_edit_menu{display:block;}
#tm_view:hover #tm_view_menu{display:block;}
#tm_print:hover #tm_print_menu{display:block;}
#tm_setup:hover #tm_setup_menu{display:block;}
#tm_settings:hover #tm_settings_menu{display:block;}
#tm_help:hover #tm_help_menu{display:block;}
#tm_admin:hover #tm_admin_menu{display:block;}
#tm_superadmin:hover #tm_superadmin_menu{display:block;}
#tm_iep:hover #tm_iep_menu{display:block;}

/*show color changes when hover*/
#tm_home:hover{color: white; background-color: var(--msblue);}
#tm_beta:hover{color: white; background-color: var(--msblue);}
#tm_edit:hover, #tm_edit_menu a:hover, #tm_singleclass:hover, #tm_multiclass:hover, #tm_nonsubject:hover, #tm_summary:hover, #tm_everything:hover{color: white; background-color: var(--msblue);}
#tm_iep:hover, #tm_iep_menu a:hover, #tm_editiep:hover, #tm_editiepframe:hover, #tm_editiepinfo:hover, #tm_editiepprogress:hover{color: white; background-color: var(--msblue);}
#tm_view:hover, #tm_view_menu a:hover{color: white; background-color: var(--msblue);}
#tm_print:hover, #tm_print_menu a:hover, #tm_proofs:hover, #tm_cards:hover{color: white; background-color: var(--msblue);}
#tm_setup:hover, #tm_setup_menu a:hover{color: white; background-color: var(--msblue);}
#tm_settings:hover, #tm_order:hover, #tm_hiding:hover, #tm_comment:hover, #tm_term:hover, #tm_settings_menu a:hover{color: white; background-color: var(--msblue);}
#tm_help:hover, #tm_help_menu a:hover{color: white; background-color: var(--msblue);}
#tm_admin:hover, #tm_admin_menu a:hover, #tm_post:hover{color: white; background-color: var(--msblue);}
#tm_superadmin:hover, #tm_superadmin_menu a:hover{color: white; background-color: var(--msblue);}
#tm_logout:hover{color: white; background-color: var(--msblue);}


/* sub-sub menus (settings) */
#tm_order_menu, #tm_hiding_menu, #tm_comment_menu, #tm_term_menu, #tm_post_menu, #tm_proofs_menu, #tm_cards_menu, #tm_singleclass_menu, #tm_multiclass_menu, #tm_nonsubject_menu, #tm_summary_menu, #tm_everything_menu, #tm_editiep_menu, #tm_editiepframe_menu, #tm_editiepinfo_menu, #tm_editiepprogress_menu{
	/*each sub-submenu*/
	display: none;
	position: absolute;
	background-color: var(--msgrey);
	max-width: 200px;
	border:1px solid black;
	left: 100%;
	width: 200px;
	margin-top: -26px;
}

/*show subsubmenu when hover*/
#tm_order:hover #tm_order_menu{display:block;}
#tm_hiding:hover #tm_hiding_menu{display:block;}
#tm_comment:hover #tm_comment_menu{display:block;}
#tm_term:hover #tm_term_menu{display:block;}
#tm_post:hover #tm_post_menu{display:block;}
#tm_proofs:hover #tm_proofs_menu{display:block;}
#tm_cards:hover #tm_cards_menu{display:block;}
#tm_singleclass:hover #tm_singleclass_menu{display:block;}
#tm_multiclass:hover #tm_multiclass_menu{display:block;}
#tm_nonsubject:hover #tm_nonsubject_menu{display:block;}
#tm_summary:hover #tm_summary_menu{display:block;}
#tm_everything:hover #tm_everything_menu{display:block;}
#tm_editiep:hover #tm_editiep_menu{display:block;}
#tm_editiepframe:hover #tm_editiepframe_menu{display:block;}
#tm_editiepinfo:hover #tm_editiepinfo_menu{display:block;}
#tm_editiepprogress:hover #tm_editiepprogress_menu{display:block;}