@media(max-width:480px) {

	#top_bar {
		position: static;
		box-shadow: 0 0 0;
		height: 40px;
		min-width: 320px
	}

	.bar-inner {
		text-align: center
	}

	.bar_main_menu {
		display: block;
		float: left
	}

	.bar_main_menu:before {
		content: '';
		display: inline-block;
		background-image: url(../img/layout/oka_icon.gif);
		background-size: 1100% 200%;
		background-position: 80% 100%;
		width: 10px;
		height: 10px;
		margin-right: 4px
	}

	.bar_main_menu:after {
		content: none
	}

	.bar_school_name {
		position: absolute;
		width: 40%;
		left: 30%;
		padding: 0;
		font-size: 1.2em;
		line-height: 2;
		text-align: center
	}

	.hierarchy {
		display: none
	}

	.bar_menu {
		position: static;
		display: block;
		float: right
	}

	.btn-drop:after {
		content: none
	}

	.btn-drop.active {
		background: #05a
	}

	.bar_menu ul {
		position: absolute;
		width: 80%;
		padding: 0;
		border-radius: 0;
		background-color: #f5f5f5;
		border: 0;
		right: -80%;
		top: 0;
		box-shadow: 0 0 0;
		z-index: 10;
		text-align: left;
		overflow: auto
	}

	.side_ctrl_btn {
		display: block
	}

	.bar_menu .hr {
		display: none
	}

	.bar_menu li a {
		position: relative;
		width: 90%;
		padding: 12px 0;
		margin: 5px 0 5px 10%;
		color: #6b6b6b;
		background-color: #fff;
		box-shadow: 0 0 6px #ddd;
		border: 1px solid #ddd;
		text-indent: 14px
	}

	.bar_menu li a:before {
		position: absolute;
		content: '';
		width: 8px;
		height: 86%;
		top: 7%;
		left: -8px;
		background-color: #ccc;
		border-radius: 3px 0 0 3px
	}

	.bar_menu li a:hover {
		color: #333;
		text-shadow: 1px 1px #fff;
		background-color: #f5f5f5
	}

}
@media(min-width:481px) and (max-width:767px) {

	#top_bar {
		position: static;
		box-shadow: 0 0 0;
		height: 40px
	}

		.bar-inner {
			text-align: center
		}

		.bar_main_menu {
			display: block;
			float: left
		}

		.bar_main_menu:before {
			content: '';
			display: inline-block;
			background-image: url(../img/layout/oka_icon.gif);
			background-size: 1100% 200%;
			background-position: 80% 100%;
			width: 10px;
			height: 10px;
			margin-right: 4px
		}

		.bar_main_menu:after {
			content: none
		}

		.bar_school_name {
			position: absolute;
			width: 50%;
			left: 25%;
			padding: 0;
			font-size: 1.2em;
			line-height: 2;
			text-align: center
		}

		.hierarchy {
			display: none
		}

		.bar_menu {
			position: static;
			display: block;
			float: right
		}

		.btn-drop:after {
			content: none
		}

		.btn-drop.active {
			background: #05a
		}

		.bar_menu ul {
			position: absolute;
			width: 60%;
			padding: 0;
			border-radius: 0;
			background-color: #f5f5f5;
			border: 0;
			right: -60%;
			top: 0;
			box-shadow: 0 0 0;
			z-index: 10;
			text-align: left;
			overflow: auto
		}

		.side_ctrl_btn {
			display: block
		}

		.bar_menu .hr {
			display: none
		}

		.bar_menu li a {
			position: relative;
			width: 95%;
			padding: 12px 0;
			margin: 5px 0 5px 5%;
			color: #6b6b6b;
			background-color: #fff;
			box-shadow: 0 0 6px #ddd;
			border: 1px solid #ddd;
			text-indent: 14px
		}

		.bar_menu li a:before {
			position: absolute;
			content: '';
			width: 8px;
			height: 86%;
			top: 7%;
			left: -8px;
			background-color: #ccc;
			border-radius: 3px 0 0 3px
		}

		.bar_menu li a:hover {
			color: #333;
			text-shadow: 1px 1px #fff;
			background-color: #f5f5f5
		}

}