.hidden {
    display: none;
}

#chatwrapper {
    width: 800px;
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

#leave-room {
    margin-bottom: 10px;
    float: right;
}

#user-container {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

#main-container {
    max-width: 800px;
    margin: 0 auto;
}

#title {
	background: #FFF;
    width: 100%;
	line-height: 20px;
	height: 20px;
	font-weight: bold;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
    overflow-y: scroll;
}

#users {
	background: #FFF;
    height: 300px;
    height: 50px;
    width: 200px;
    width: 100%;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
    overflow-y: scroll;
}

#messages {
	background: #FFF;
    height: 200px;
    width: 480px;
    width: 100%;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
    overflow-y: scroll;
}

#msg-container {
    padding: 0px;
}

#single {
	height: auto;
}

.singlebox {
	width: 260px;
	height: 240px;
	float: left;
}

.single-user {
	background: #FFF;
    height: auto;
    width: 100%;
    border: 1px solid #ccc;
	font-weight: bold;
    padding: 2px;
    text-align: left;
    overflow-y: none;
}

.single-message {
	background: #FFF;
    height: 100px;
    width: 100%;
    border: 1px solid #ccc;
    padding: 5px;
    text-align: left;
    overflow-y: scroll;
}

.single-msg-container {
    padding: 0px;
    width: 100%;
}

#msg {
	background: #FFF;
    width: 400px;
}

.user {
    font-weight: bold;
}

.msg {
    margin-bottom: 10px;
    overflow: hidden;
}

.time {
    float: right;
    color: #939393;
    font-size: 13px;
}

.details {
    margin-top: 20px;
}
.fl { float: left; }
.fr { float: right; }
.center { margin: 0 auto; text-align: center; }
.cb { clear: both; }
.well { background: #FFF; width: 80%; margin: 0 auto; clear: both; }
.w300 { width: 300px; }
.nolink { text-decoration: none; }

body { max-width: 1920px; margin: 0 auto; }
body { background: #000 url(/server/img/bg_paper.jpg) repeat top center; background-size: cover1; width: auto; min-height: 960px; }
body { background: #000 url(/server/img/Pleiades_384a.jpg) repeat top center; background-size: cover1; width: auto; min-height: 960px; }

@media (min-width: 20em) {      /*  20 em =  320 px */
	body { max-width: 384px; margin: 0 auto; background: url(/server/img/Pleiades_384a.jpg) repeat top center; background-size: cover; width: 100%; min-height: 320px; }
}
@media (min-width: 24em) {      /*  24 em =  384 px */
	body { max-width: 768px; margin: 0 auto; background: url(/server/img/Pleiades_768a.jpg) repeat top center; background-size: cover; width: 100%; min-height: 384px; }
}
@media (min-width: 48em) {      /*  48 em =  768 px */
	body { max-width: 880px; margin: 0 auto; background: url(/server/img/Pleiades_768a.jpg) repeat top center; background-size: cover; width: 100%; min-height: 450px; }
}
@media (min-width: 55em) {      /*  55 em =  880 px */
	body { max-width: 960px; margin: 0 auto; background: url(/server/img/Pleiades_960a.jpg) repeat top center; background-size: cover; width: 100%; min-height: 768px; }
}
@media (min-width: 60em) {      /*  60 em =  960 px */
	body { max-width: 1280px; margin: 0 auto; background: url(/server/img/Pleiades_1280a.jpg) repeat top center; background-size: cover; width: 100%; min-height: 800px; }
}
@media (min-width: 80em) {      /*  80 em = 1280 px */
	body { max-width: 1920px; margin: 0 auto; background: url(/server/img/Pleiades_1920a.jpg) repeat top center; background-size: cover; width: 100%; min-height: 960px; }
}