@media only screen and (max-width : 320px) {
	#container_chat, #menu_container_inside, #inner_header {
		width:98%;
		padding-left:1%;
		padding-right:1%;
	}
	.panelone {
		width:100%;
		margin-right:-100%;
		box-shadow:none;
	}
	.paneltwo {
		width:100%;
		margin-right:-100%;
		box-shadow:none;
	}
	.panelthree {
		width:100%;
	}
}
@media only screen and (min-width : 321px) and (max-width : 479px) {
	#container_chat, #menu_container_inside, #inner_header {
		width:98%;
		padding-left:1%;
		padding-right:1%;
		border:none;
	}
	.panelone {
		width:320px;
		margin-right:-320px;
	}
	.paneltwo {
		width:100%;
		margin-right:-100%;
	}
	.panelthree {
		width:320px;
	}
}
@media only screen and (min-width : 480px) and (max-width : 768px) {/*--- tablet portrait ---*/
	#container_chat, #menu_container_inside, #inner_header {
		width:98%;
		padding-left:1%;
		padding-right:1%;
		border:none;
	}
	.panelone {
		width:320px;
		margin-right:-320px;
	}
	.paneltwo {
		width:75%;
		margin-right:-75%;
	}
	.panelthree {
		width:320px;
	}
}
@media only screen and (min-width : 768px) and (max-width : 1024px) {/*--- tablet landscape ---*/
	#container_chat, #menu_container_inside, #inner_header{
		width:98%;
		padding-left:1%;
		padding-right:1%;
		border:none;
	}
	.panelone {
		width:320px;
		margin-right:-320px;
	}
	.paneltwo {
		width:500px;
		margin-right:-500px;
	}
	.panelthree {
		width:320px;
	}
}
@media only screen and (min-width : 1025px) and (max-width : 1099px) {/*--- tablet landscape ---*/
	#container_chat, #menu_container_inside, #inner_header {
		width:65%;
		float:left;
	}
	.panelone {
		width:32%;
		margin-right:-32%;
	}
	.paneltwo {
		width:500px;
		margin-right:-500px;
	}
	.panelthree {
		width:32%;
	}
}
@media only screen and (min-width : 1100px) and (max-width : 1224px) {/*--- tablet landscape ---*/
	#container_chat, #menu_container_inside, #inner_header {
		width:750px;
		float:right;
		margin-right:340px;
	}
	.panelone {
		width:320px;
		margin-right:-320px;
	}
	.paneltwo {
		width:500px;
		margin-right:-500px;
	}
	.panelthree {
		width:320px;
	}
}
@media only screen and (min-width : 1225px) and (max-width : 1300px) {/*--- pc small screen---*/
	#container_chat, #menu_container_inside, #inner_header {
		width:770px;
		float:left;
		margin-left:125px;
	}
	.panelone {
		width:320px;
		margin-right:-320px;
	}
	.paneltwo {
		width:500px;
		margin-right:-500px;
	}
	.panelthree {
		width:320px;
	}
}
@media only screen and (min-width : 1301px) and (max-width : 1440px) {/*--- pc small screen---*/
	#container_chat, #menu_container_inside, #inner_header {
		width:820px;
		float:right;
		margin-right:340px;
	}
	.panelone {
		width:320px;
		margin-right:-320px;
	}
	.paneltwo {
		width:500px;
		margin-right:-500px;
	}
	.panelthree {
		width:320px;
	}
}
@media only screen and (min-width : 1441px) and (max-width : 1540px) {

	#container_chat, #menu_container_inside, #inner_header {
		width:900px;
		float:right;
		margin-right:340px;
	}
	.panelone {
		width:320px;
		margin-right:-320px;
	}
	.paneltwo {
		width:500px;
		margin-right:-500px;
	}
	.panelthree {
		width:320px;
	}
	
}
@media only screen and (min-width : 1541px) and (max-width : 1880px) {

	#container_chat, #menu_container_inside, #inner_header {
		width:900px;
	}
	.panelone {
		width:320px;
		margin-right:-320px;
	}
	.paneltwo {
		width:600px;
		margin-right:-600px;
	}
	.panelthree {
		width:320px;
	}
	
}

@media only screen and (min-width : 1880px) {
	#container_chat, #menu_container_inside, #inner_header {
		width:1000px;
		margin:0 auto;
	}
	.panelone {
		width:400px;
		margin-right:-400px;
	}
	.paneltwo {
		width:600px;
		margin-right:-600px;
	}
	.panelthree {
		width:400px;
	}
	
}
@media screen and (max-width:360px){
	#container_login, #container_kicked, #inner_header {
		width:100%;
		height:100%;
		min-width:300px;
		z-index:15;
		top:0;
		left:0;
		margin:0 auto;
		padding:0;
		box-shadow:none;
		border:none;
	}
	#header_login {
		margin-top:20px;
	}
}
@media screen and (max-height:360px){
	#container_login, #container_kicked, #inner_header {
		width:100%;
		height:100%;
		z-index:15;
		top:0;
		left:0;
		margin:0 auto;
		padding:0;
		box-shadow:none;
		border:none;
	}
	#main_emoticon {
		border:none !important;
	}
}
@media screen and (max-height:480px){
	#main_emoticon {
		border:none !important;
	}
	#room_topic {
		display:none;
	}
}
@media screen and (max-height:600px){
	#private_chat ul {
		height:200px;
	}
	.panelthree {
		padding-bottom:12px;
	}
}
@media screen and (max-width:480px){
	.hide_mobile {
		display:none;
	}
	.addon_button, .test_button, .other_panels {
		margin-right:3px;
	}
}
@media only screen and (max-device-width: 1024px) and (max-device-height: 768px) {
	#show_chat li, #show_private li {
		font-size:1.2em;
	}
}
@media screen and (max-width:1024px){
	.panelone, .paneltwo {
		box-shadow:none;
	}
	#header {
		height:40px;
	}
	#inner_header {
		width:95%;
	}
	#container_chat {
		border-radius:0px;
	}
	#login_button, #register_button, #recovery_button, #newpass_button, #back_login, #guest_button, #guest_ok, .forgot_password, #login_welcome, .fbl_button, #login_register, #login_login  {
		font-size:1.2em !important;
	}
}
@media screen and (max-width:480px){
	.private_friend .hide_private_title {
		display:none;
	}	
	#header {
		height:30px;
	}
}
@media screen and (max-width:660px){
	#container_login {
		width:100%;
		max-width:100%;
		margin:0 auto;
		top:0;
		left:0;
		min-height:100%;
		height:auto;
		padding:0;
		padding-bottom:50px;
		border:none;
	}
	#header_login, #content_login, #content_kicked {
		width:86%;
		max-width:320px;
	}
	#content_login_right, #content_login_left, #fsubmit_control, #fsubmit_rules {
		width:100%;
		float:none;
		margin:0 auto;
		display:block;
	}
	#login_welcome {
		margin-top:30px;
	}
}

@media screen and (max-height:360px){
	#container_login {
		width:100%;
		max-width:100%;
		margin:0 auto;
		top:0;
		left:0;
		min-height:100%;
		height:auto;
		padding:0;
		padding-bottom:50px;
		border:none;
	}
	#header_login, #content_login {
		width:86%;
		max-width:320px;
	}
	#content_login_right, #content_login_left, #fsubmit_control, #fsubmit_rules {
		width:100%;
		float:none;
		margin:0 auto;
		display:block;
	}
	#login_welcome {
		margin-top:30px;
	}
}
@media screen and (max-height:650px){
	#header {
		display:none !important;
	}
}