backchannel.css

*{
	-webkitk-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	width: 100%;
	color: rgba(25,25,25,1);
	margin:0px;
}
textarea.reply {
	margin: 1%;
	width: 98%;
}
#infoheader{
	padding-left: 1%;
	padding-right: 1%;
}
html, body{
	height:100%;
	background: 
			linear-gradient(45deg, 
			rgba(255, 255, 240, 1) 20%, 
			rgba(255,255,225,0.1) 20%, 
			rgba(255,255,225,0.1) 40%, 
			rgba(255, 255, 240, 1) 40%,
			rgba(255,255,225,0.1) 60%, 
			rgba(255, 255, 240, 1) 60%,
			rgba(255, 255, 240, 1) 80%, 
			rgba(255,255,225,0.1) 80%), 

			linear-gradient(135deg,  
			rgba(250, 250, 250, .5) 25%,
			rgba(255,225,225,.01) 25%,
			rgba(250, 250, 250, .5) 50%,
			rgba(255,225,225,.01) 50%,
			rgba(255,225,225,.01) 75%,			
			rgba(250, 250, 250, .5) 75%,
			rgba(255,225,225,.01) 100%,			
			rgba(250, 250, 250, .5) 100%);
	background-size: 4px 3px;
	font-family:"Trebuchet MS","Helvetica",sans-serif;	
}
#content{
	height:90%;
}
header,footer{
	height:5%;
}
#welcomeMessage{
	float:right;
	width: auto;
}
footer{
	text-align:right;
}
footer>img{
	float:right;
	height:80%;
	width:auto;
}
#login{
	width:100%;
	height: 90%;
	text-align:center;
	padding:10%;
	font-size:1.5em;
}
#login input{
	width:50%;
	display:block;
	margin:auto;
}
/*
** Columns
*/
section{
	height:100%;
	width:20%;
	float:left;
	position:relative;	
}
#posts{
	padding-top:30px;
	width:60%;
}
/*
** Left Column
*/
.nav {
	background-color:rgba(255,255,240,.75);
	border-bottom: solid 1px black;
	padding-left:5%;
}

.nav >div{
	padding-left:5%;
}

#unfinishedInfo{
	position:absolute;
	left:0px;
	top:0px;
	height:100%;
	padding:5%;
	background-color: rgba(255,236,208,1);
}

/*
** Center Column
*/
#backchannel{
	height:85%;
	overflow-y:scroll;
	background-color:rgba(255,255,255,.75);
}
#filter{
	background-color:rgba(200,200,200,1);
	height:30px;
	position:absolute;
	top:0;
	left:0;
}
#filter>fieldset{
	padding: 0%;	
	height:100%;
	text-align: center;
}
#filter>fieldset>label{
	text-align: center;
	padding:0px;
	width:20%;
	min-width:90px;
	margin-left:1%;
	margin-right:1%;
	display:inline-block;
}
#filter>fieldset>label>input{
	width:auto;
	vertical-align:middle;
	margin-left:5%;
	display:inline;
}
/*
* posts
*/
.backchannelPost, .backchannelReply{
	background-color: rgba(250,230,200,.75);
	font-size:80%;
	box-shadow: 0px 1px rgba(0,0,0,.8);
	position:relative;
	overflow:hidden;
	word-wrap: break-word;
}
.backchannelReply{
	background-color:rgba(250,250,250,.75);	
}
.question{
	background-color:rgba(100,100,200,.75);
}
.resource{
	background-color:rgba(100,200,100,.75);
}
.post_info{
	float:left;
	width:20%;
	height:100%;
	margin-right:2%;
	padding-left:1%;
	padding-right:1%;
	box-shadow: 1px 0px 0px rgba(0,0,0,.25),0px 1px 0px rgba(0,0,0,.25);
	text-align:center;
}
.post_name{
	font-style:italic;
	vertical-align:top;
	float:left;
}
time{
	font-size:60%;
	color:rgba(0,0,0,.8);
}
.post_message{
	width:75%;
	height:auto;
	overflow:hidden;
}
.post_actions{
	text-align:right;
	float:right;
	clear:both;
	width:auto;
	padding-right: 1%;
	padding-bottom: 1%;
}
.replies{
	font-size:120%;
	float:left;
	clear:both;
}
/*
* submit area
*/
#newPost{
	height:15%;
}
#newPost>form{
	height:100%;
	position: relative;
	padding: 1%;
}
#tags{
	float:left;
	width:20%;
	height:75%;
	position: relative;
	top:12.5%;
}
#resourceTag,#questionTag{
	height:45%;
	margin-bottom:5%;
}
#resourceTag,#questionTag,.submitPost{
	background-color:rgba(200,200,200,.75);
	border:solid 1px rgba(100,100,100,1);
	box-shadow: 1px 1px rgba(0,0,0,1);
	border-radius:5px;
	text-align:center;
	-ms-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.submitPost{
	float:left;
	width:18%;
	top: 30%;
	position:absolute;
	font-weight: bold;
	font-size: 80%;
	height:40%;
	margin-bottom:5%;
}
textarea{
	overflow:auto;
	resize:none;
}
#postArea{
	height:100%;
	width:55%;
	margin-left:2.5%;
	margin-right:2.5%;
	float:left;
}
/*
** Right Column
*/
header, #usersChat, #newPost, #ribbon, #backchannel, #chat{
	border:solid 1px rgba(25,25,25,1);
}

#users{
	height:50%;
}

#users>ul{
	list-style-type: none;
	padding:0px;
	
}
#users li{
	padding-left:10%;
}

#chat{
	height:50%;
	overflow:hidden;
	position:relative;
}

.activeChat{
	background-color: rgba(255,236,208,1);
	border:solid black 1px;
	height:100%;
	position:absolute;
	left:0%;
	top:0%;
	z-index:1;
}

.inactiveChat{
	z-index:0;
	height:8%;
	position:relative;
}

.chatHead{
	position:relative;
	background-color:rgba(200,200,200,1);
	height:auto;
}

.chatBody{
	padding:.5%;
	overflow-y:auto;
	height:80%;
}

.chatInput{
	height:9.5%;
}

.chatText{
	padding:2.5%;
	background-color:rgba(255,255,255,.75);
	border: solid rgba(0,0,0,.25) 1px;
	border-radius:10px;
	box-shadow: 1px 1px 1px rgba(0,0,0,.75);
	clear:both;
	word-wrap: break-word;
	width:auto;
	max-width:80%;
	font-size:75%;
}

.chatReply>.chatText{
	margin-left:5%;
	margin-right:auto;
	float:left;
}

.chatPost>.chatText{
	float:right;
	margin-left:auto;
	margin-right:5%;
	
}


.chatReply>.chatName{
	float:left;
	width:100%;
}

.chatPost>.chatName{
	float:right;
	text-align:right;
	width:100%;
}

.closeChat{
	position:absolute;
	top:0px;
	right:0px;
	border:solid #000 1px;
	text-align:center;
	border-radius:2px;
	font-size:75%;
	padding-right:1%;
	padding-left:1%;
	width:auto;
}

/*
* clickables
*/
.chatHead:hover, li:hover, #ribbon>div:hover,.question:hover, .resource:hover, .submitPost:hover, #resourceTag:hover, #questionTag:hover{
	background-color:rgba(225,225,225,.75);
	cursor:pointer;
}
#onlineTA{
	font-weight: bold;
}
#onlineTA>li:hover{
	background-color:rgba(100,100,200,.75);
}