/* Common Styles ****************************************/
@media only screen and (max-width: 1024px){
	header section:nth-child(1) {width:100%;}
	main section:nth-child(1) {width:100%;}
	.password-label {
		width:100%;}
	.password-box {
		width:100%;}
	.password-box div:nth-child(1){
		width:auto;
		max-width:90%;
		display:inline-block;
		position:relative;}
	#password {
		max-width:100%;}
	#toggle_password {
		position:absolute; 
		right:5px; 
		top:4px;
		padding:0px;}
}
@media only screen and (max-width: 880px){
	header {height:80px;}
	header .logo {width:auto; height:60px; float:none; margin-left:20px; margin-top:8px;}
	header .logo2 {width:auto; height:60px; float:none; margin-left:20px; margin-top:8px;}
	header .tagline {display:none;}
	header section:nth-child(2) {right:65px; top:17px;}
	header section:nth-child(2) span:nth-child(1) {font-size:0.9em;}
	.point_updown {margin-top:6px;}
}
@media only screen and (max-width: 480px){
	.student_name {display:none;}
	header section:nth-child(2) {width:100%; left:0px;}
	.edit_logout_link {position:absolute; right:65px; font-size:1.2em;}
	#edit_logout_box {width:90%; left:5%; right:auto; top:50px;}
	#other_courses{width:86%; margin-left:7%;}
	#onhold-info-box .contents {width:100% !important; height:100%; margin-top:0px !important;}
	#onhold-info-box .contents .header {height:60px !important; line-height:25px !important;}
	#onhold-info-box .contents .header .title {width:80%; margin-top:5px; text-align:left;}
	#onhold-info-box .contents .header .close-onhold-info {margin-top:15px;}
}
@media only screen and (max-width: 340px){
	header section:nth-child(2) {width:100%; right:0px;}
	.edit_logout_link {right:65px !important;}
	#edit_logout_box {width:100%;}
	.student_name {position:absolute; right:24px;}
	.point_updown {position:absolute; right:10px;}
}
@media only screen and (max-width: 320px){
	header {width:320px;}
	footer {width:320px;}
	main section:nth-child(1) {width:320px;}
}
/********************************************************/

/* Content's Border Shadow Styles ***********************/

@media only screen and (max-width: 1024px){
	#contents_box {border-radius:0px;}
	.shadow_border {display:none;}
}
@media only screen and (max-width: 880px){
	#container {margin-top:26px;}
}
/********************************************************/

/* Navigation Bar Styles ********************************/
@media only screen and (max-width: 1024px){
	#nav_bar div:nth-child(2) button {padding-left:15px; padding-right:15px;}
}
@media only screen and (max-width: 940px){
	#nav_bar div:nth-child(2) button {padding-left:10px; padding-right:10px;}
}
@media only screen and (max-width: 880px){
	#min_nav {display:block;}
	#nav_bar {width:200px; height:100%; position:fixed; padding:0px; top:0px; right:0px; display:none; z-index:900; overflow:auto;}
	#nav_bar div:nth-child(1) {display:block;}
	#nav_bar div:nth-child(2) {width:100%; right:0px; z-index:9999;}
	#nav_bar div:nth-child(2) button {width:90%; height:50px; margin-left:10px; text-align:right; color:#fff; font-size:1em; background:none; border-radius:0px;}
	#nav_bar div:nth-child(2) button:nth-child(1) {margin-top:65px;}
	#nav_bar div:nth-child(2) button:hover {background:#00baff;}
	#hide_min_nav {display:block;}
	#cal_license{visibility: hidden;}
}
/********************************************************/

/* Page Title Styles *****************************************/
@media only screen and (max-width: 880px){
	.page_content h2 {margin-top:-20px; font-size:1.2em; display: inline-block !important;}
	.page_content h3 {margin-top:-20px; font-size:1.1em;}
}
@media only screen and (max-width: 480px){
	.page_title_bar {padding-top:5px; padding-bottom:5px;}
	.page_title {font-size:18px;}
}	
@media only screen and (max-width: 320px){
	.page_title_bar {width:300px;}
}
/*************************************************************/

/* Task Box Styles *******************************************/
@media only screen and (max-width: 840px){
	.taskbox {width:100%; height:100%; position:fixed; margin:auto;}
}
/*************************************************************/

/* Idle Timeout Styles ***************************************/
@media only screen and (max-width: 840px){
	#idletimeout_msg {width:100%; height:100%; margin-top:0px; opacity:0.9; filter:alpha(opacity=90);}
}
/*************************************************************/