* {
	margin:0;
	padding:0;}
a {
	cursor:pointer;}
body {
	font:12px arial;}

#container {
	float:left;
	width:100%;
	min-width:20px;}

header {
	position:relative;
	width:100%;
	height:44px;
    padding-top:2px;
	background:url(../img/header-bg.png) repeat-x;}
    
#header-white{
    background:url(../img/header-white.png) repeat-x;
    height:42px;
    margin:0 4px 0;
    border-left:solid 1px rgba(255,255,255,0.1);
    border-right:solid 1px rgba(255,255,255,0.1);
}    
    
#logo{
    background:url(../img/header.png) no-repeat;
    width:150px;
    height:40px;
    display:block;
    background-size:150px 40px;
    margin-top:4px;
    float:left;
    margin-left:5px;
}

	
	
#mbtn {
	position:absolute;
	right:10px; top:0;
	width:60px;
	height:100%;
	cursor:pointer;
	background:url(../img/nav-trigger.png) no-repeat left center}
	#mbtn.active {
		background-position:right center;}

#content {
	position:relative;}
		
	#nav {
		z-index:4;
		position:absolute;
		left:0;top:0;
		width:100%;
		display:none;
		-moz-box-shadow: 0 0 5px 5px #888;
		-webkit-box-shadow: 0 0 5px 5px#888;
		box-shadow: 0 0 5px 5px #888;}
		#nav li {
			position:relative;}
			#nav li a {
				display:block;
				background:#f5f5f5;
				border-bottom:1px solid #e9e9e9;
				color:#444;
				font-size:14px;
				font-weight:bold;
				line-height:43px;
				text-indent:22px;
				text-decoration:none;}
				#nav li a span {
					position:absolute;
					right:24px;
					top:50%;
					width:13px;
					height:18px;
					margin-top:-9px;
					display:block;
					background:url(../img/nav-arrow.png) no-repeat left top}
		#nav li.active a {
				color:#2255a5;}
			#nav li.active a span {
				background-position:left bottom;}
				
	#rooms {
		padding:10px 6px;}
		.room {
			cursor:pointer;
			display:block;
			position:relative;
			float:left;
			margin:4px;
			overflow:hidden;
			color:#323030;
			font-size:16px;
			font-weight:bold;}
			.room img {
			     position:absolute;
                 top:0px;
                 bottom:0px;
                 left:0px;
                 right:0px;
				width:100%;}
			.room .bar {
				position:absolute;
				left:0; bottom:0;
				width:100%;}
				.room .bar-bg {
					position:absolute;
					left:0;top:0;
					width:100%;
					height:100%;
					background:#FFF;
					opacity:0.7;}
				.room .bar-inner {
					z-index:2;
					position:relative;
					text-indent:10px;
					line-height:40px;
					background:url(../img/room-arrow.png) no-repeat right center}
		.room.loaded {
			display:block;}				

        .room .room-wrapper{
            width:100%;
            padding:  75% 0 0;
            position:relative;
            
        }


		#nickForm input {
			width:100%;
			padding:5px;
			margin-top:4px;
			border:1px solid #000;}

    .room.ad .banner-wrap{
        width:100%;
        background:#c9c9c9;
        padding:  75% 0 0;
        position:relative;
        
    }
    
    .room.ad img, .room.ad embed, .room.ad object, .room.ad iframe{
        max-width:100%!important;
        max-height:100%!important;
        position:absolute;
        top:0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin: auto;
    }


@media (max-width:350px){
	//body{background:#444;}
	header {
		background-position:10% center;}
	.room {
		width:98%;
		margin:1%;}
}
@media (min-width:280px) and (max-width:600px){
	//body{background:#F00;}
	#mbtn {
		right:0;}
	.room {
		width:48%;
		margin:1%;}
    .room.ad{
        width:98%;
        max-height:250px;
    }
    
    .room.ad img, .room.ad embed, .room.ad object, .room.ad iframe{
        margin:0 auto;
    }
}

@media (min-width:600px) and (max-width:900px){
	//body{background:#00f;}
	.room {
		width:31%;
		margin:1%;}
}

@media (min-width:900px) and (max-width:1500px){
	//body{background:#000;}
	.room {
		width:23%;
		margin:1%;}
}

@media (min-width:1500px){
	//body{background:#0F0;}
	.room {
		width:16%;
		margin:0.33%;}
}

    .room.ad img, .room.ad embed, .room.ad object, .room.ad iframe{
        max-height:240px;
        width:300px;
    }
@media (min-width:600px){
	#nav li a {
		font-size:20px;
		line-height:50px;}
	div.jqi {
		font-size:16px;}
		div.jqi .jqititle {
			font-size:22px;
			line-height:25px;}
		div.jqi .jqiclose,
		div.jqi .jqiclose:hover {
			font-size:22px;
			top:3px;right:3px;}
		div.jqi .jqibuttons button {
			font-size:16px;}
	#nickForm input {
		padding:8px;
		margin-top:8px;
		font-size:16px;}
}