/* General styles for all menus */
.menu {
	width: 290px;
	height: 100%;
	position: fixed;
	top: 0;
	right: -290px;
	z-index: 1000;
	overflow-x: auto;
	border-left: 2px solid #605D5C;
	background: #F9F9FB;
	display: none;
	transition: .3s right linear;
}
#menu_items {
	transition: .3s right linear;
}

#menu_items.menu-open > a:not(.activeTab):not(:hover) {
	filter: brightness(0.8);
}

.menu-open {
	right: 0 !important;
}
.menu-top {
	z-index: 1002;
}
.menu-top.subMenu {
	z-index: 1003;
}
.temp-zIndex {
	z-index: 1001;
}
    
.menu h3 {
	color: #afdefa;
	font-size: 1.9em;
	padding: 20px;
	margin: 0;
	font-weight: 400;
	background: #605D5C;
}


#writing_instructions .menu {
	border-left-color: #2a609b;
}
#writing_instructions .menu h3 {
	color: white;
	background: linear-gradient(#5987bb, #2a609b);
}

#grammar_dictionary .menu {
	border-left-color: #4cac80;
}
#grammar_dictionary .menu h3 {
	color: white;
	background: linear-gradient(#77d9ac, #4cac80);
}

#student_resources .menu {
	border-left-color: #228fc3;
}
#student_resources .menu h3, #student_resources .menu h2 {
	color: white;
	background: linear-gradient(#73bcd5, #228fc3);
}

#student_help .menu {
	border-left-color: #ca8e1a;
}
#student_help .menu h3, #student_help .menu h2 {
	color: white;
	background: linear-gradient(#ddae6a, #ca8e1a);
}

#blockly_code .menu {
	border-left-color: #ad624c;
}
#blockly_code .menu h3 {
	color: white;
	background: linear-gradient(#d98e78, #ad624c);
}

.menu h2 i.fa {
	color: white;
	font-size: 16px;
	margin: 0 5px 0 12px;
}

.menu hr {
	border: solid 1px #787878;
	border-width: 1px 0 0;
	margin: 6.667px;
	margin-right:0px;
	margin-left:0px;
}

.menu h2 {
	color: #afdefa;
	font-size: 1.2em;
    padding: 8px;
	margin: 0;
	font-weight: 400;
	background: #605D5C;
    vertical-align: middle;
}

.menu h2, .menu img {
    vertical-align: middle;
}

.menu ul:nth-child(odd) {
  width: 50%;
  float: right;
  padding-top:20px;
  padding-bottom:0px;
  padding-left:25px;
  margin: 0;
}
.menu ul:nth-child(even) {
  width: 50%;
  float: left;
  padding-top:20px;
  padding-bottom:0px;
  padding-left:45px;
  margin: 0;
}

.menu ul img {
  margin: 0 auto;
  border:none;
}

.menu a:not(.back-button), .teacherInfo {
	display: block;
	color: #605D5C;
	font-size: 1.1em;
	font-weight: 500;
	border-bottom: 1px solid #DCDBDA;
	padding-top: 0.5em;
	padding-bottom: 0.3em;
	padding-left: 0.8em;
}

.menu a:not(.back-button):hover {
	background: #E8EDF8;
    color: #7A7674;
}

.menu a:not(.back-button):active {
	background: #B4DCE9;
	color: #605D5C;
}

.menu a:not(.back-button) img, .menu a:not(.back-button) span {
    vertical-align: middle; 
}

.menu-content {
	color: black;
	padding: 15px;
}
.menu .menu-content ul {
	float: none;
	width: 100%;
	padding: 0;
	margin: 25px 0;
}
.menu-content p {
	margin: 20px 0;
	text-align: left !important;
}
.menu-content h4 {
	font-size: 16px;
	text-align: left !important;
	color: black;
	line-height: 20px;
	margin: 20px 0;
}
.menu-content a {
	border: none !important;
	color: #0095ff !important;
	background: none !important;
	display: inline !important;
	padding: 0 !important;
}


.notebuttons {
	width: 100%;
	background-color: #e2e2e2;
	height: 50px;
	display: flex;
	justify-content: space-between;
}

#notes img {
	/*display: block;*/
	/*margin: 0 auto;*/
	max-width:260px;
	height:auto;
}

@media only screen and (max-width: 479px), only screen and (max-height: 385px)  {
    #notes img {
        max-width:269px;
    }

    .menu {
        width: 290px;
        right: -290px;
    }

	#pushbutton, #pushbutton2, #pushbutton3, #showCode_tab {
		width: 31px;
		height: auto;
	}
}