*{

	margin:0;
	padding:0;
}
body{
	font-family: Arial;
	font-size: 15px;
	line-height:1.5em;
    background: #f4f4f4;

}

#container {
    background:#156699;
    margin: 5px auto;
	overflow:auto;
	width: 30%;
	min-height: 130px;
	float: right;
}

header h1 {
	color:#ffffff;
	font-size: 22px;
	padding:15px 0 10px 10px;
	border-bottom: 1px solid #ffffff;
}
#shouts {
	width:90%;
	background: #f4f4f4;
	height:400px;
	margin: 20px auto;
	overflow: auto; 
}

.shout {
list-style: none;
padding:8px;
border-bottom: 1px #cccccc dotted;
}

.shout span{
	color: #aaaaaa;

}
#input {
	width: 90%;
	min-height:80px;
	margin:auto;
	padding:0;
}
#input input[type='text']{
	height:30px;
	width:98%;
	padding:3px;
    margin-bottom: 20px;
    border: #666666 solid 1px;

}
#input .shout-btn{
	background: yellow;
	padding: 20px;
    margin-bottom: 30px;
    width: 100%;
    margin: 10px auto;

}
@media only screen and (max-width: 768px){
	#input input[type = 'text']{
		width:98%;
	}
	.panel{
		
		width:400px;
	}
	#container {
     background:#156699;
	margin: 5px auto;
	overflow:auto;
	width: 60%;
	min-height: 130px;
	float:none;
	 
}
}
.error{
	background:red;
	color: #ffffff;
	padding: 5px;
	margin-bottom: 20px;
}

