/* CSS for Narrow Viewport (Mobile/Smartphone View) */



@media (max-width: 768px) {
	
	#header {
		width: 100%;
		height: 100px;
		background-color: #d3d3d3;
		box-shadow: 0 0 5px #000;
	}
	
	.a img {
		outline : none;
		}
		
	.img {
		border: 0;
	}
	
	#logo01 {
		float: left;
		display: block;
		clear: both;
	}
	
	#logo02 {
		display: none;
	}
	
	
	#drop_icon {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: -78px;
		margin-left: 1em;
		border: none;
	}
	
	#chinese {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: -78px;
		margin-left: 5em;
		border: none;
	}
		
	#home {
	  	float: left;
		display: inline-block;
		position: relative;
		margin-top: 10px;
		margin-left: -7em;
		border: none;
	}
	
	#books {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: 10px;
		margin-left: -3em;
		border: none;
	}
	
	#video {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: 10px;
		margin-left: 1em;
		border: none;
	}
		
	#bm {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: 10px;
		margin-left: 1em;
		border: none;
		display: none;
	}
	
	#charts {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: 10px;
		margin-left: 1em;
		border: none;
	}
		
	a {
		text-decoration: none; 
		}
	
	#content {
		display: block;
		width: 100%;
		font-size: 100%;
	}
	
	#main {
		float: left;
		display: block;
		line-height: 1.25em;
		font-family: Calibri, sans-serif;
		width: 90%;
		height: auto;
		padding-left: 5%;
		padding-right: 5%;	
	}
	
	#left {
		float: left;
		display: block;
		line-height: 1.25em;
		font-family: Calibri, sans-serif;
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
	}
	
	#center {
		float: left;
		display: block;
		line-height: 1.25em;
		font-family: Calibri, sans-serif;
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
	}
	
	#right {
		display: none;
	}
	
	#footer {
		float: left;
		display: block;
	}
	
}


@media (max-width: 720px) {
	
	#header {
		width: 100%;
		height: 100px;
		background-color: #d3d3d3;
		box-shadow: 0 0 5px #000;
	}
	
	.a img {
		outline : none;
		}
		
	.img {
		border: 0;
	}
	
	#logo01 {
		float: left;
		display: block;
		clear: both;
	}
	
	#logo02 {
		display: none;
	}
	
	
	#drop_icon {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: -78px;
		margin-left: 1em;
		border: none;
	}
	
	#chinese {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: -78px;
		margin-left: 5em;
		border: none;
	}
		
	#home {
	  	float: left;
		display: inline-block;
		position: relative;
		margin-top: 10px;
		margin-left: -7em;
		border: none;
	}
	
	#books {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: 10px;
		margin-left: -3em;
		border: none;
	}
	
	#video {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: 10px;
		margin-left: 1em;
		border: none;
	}
		
	#bm {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: 10px;
		margin-left: 1em;
		border: none;
		display: none;
	}
	
	#charts {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: 10px;
		margin-left: 1em;
		border: none;
	}
		
	a {
		text-decoration: none; 
		}
	
	#content {
		display: block;
		width: 100%;
		font-size: 100%;
	}
	
	#main {
		float: left;
		display: block;
		line-height: 1.25em;
		font-family: Calibri, sans-serif;
		width: 90%;
		height: auto;
		padding-left: 5%;
		padding-right: 5%;	
	}
	
	#left {
		float: left;
		display: block;
		line-height: 1.25em;
		font-family: Calibri, sans-serif;
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
	}
	
	#center {
		float: left;
		display: block;
		line-height: 1.25em;
		font-family: Calibri, sans-serif;
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
	}
	
	#right {
		display: none;
	}
	
	#footer {
		float: left;
		display: block;
	}
	
}


@media (max-width: 360px) {
	
	#header {
		width: 100%;
		height: 100px;
		background-color: #d3d3d3;
		box-shadow: 0 0 5px #000;
	}
	
	.a img {
		outline : none;
		}
		
	.img {
		border: 0;
	}
	
	#logo01 {
		float: left;
		display: block;
		clear: both;
	}
	
	#logo02 {
		display: none;
	}
	
	#drop_icon {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: -78px;
		margin-left: 1em;
		border: none;
	}
	
	#chinese {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: -78px;
		margin-left: 5em;
		border: none;
	}
	
	#home {
	  	float: left;
		display: inline-block;
		position: relative;
		margin-top: 10px;
		margin-left: -11.25em;
		border: none;
	}

	#books {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: 10px;
		margin-left: -7.25em;
		border: none;
	}
	
	#video {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: 10px;
		margin-left: -3em;
		border: none;
	}
	
	#bm {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: 10px;
		margin-left: 0.3em;
		border: none;
		display: none;
	}
	
	#charts {
		float: left;
		display: inline-block;
		position: relative;
		margin-top: 10px;
		margin-left: 1em;
		border: none;
	}
	
	a {
		text-decoration: none; 
		}
	
	#content {
		display: block;
		width: 100%;
		font-size: 100%;
	}
	
	#main {
		float: left;
		display: block;
		line-height: 1.25em;
		font-family: Calibri, sans-serif;
		width: 90%;
		height: auto;
		padding-left: 5%;
		padding-right: 5%;	
	}
	
	#left {
		float: left;
		display: block;
		line-height: 1.25em;
		font-family: Calibri, sans-serif;
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
	}
	
	#center {
		float: left;
		display: block;
		line-height: 1.25em;
		font-family: Calibri, sans-serif;
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
	}
	
	#right {
		display: none;
	}
	
	#footer {
		float: left;
		display: block;
	}
	
}