body {
	font-family: sans-serif;
}

#addCommentContainer{
	position: absolute !important;
	bottom:51px;
	width:980px !important;
	border:1px solid #c3c3c3 !important;
	
}

.comment,
#addCommentContainer{
	
	/* Syling the comments and the comment form container */
	
	padding:12px;
	width:100%;
	margin: 0 auto;
	position:relative;
	background-color:#fcfcfc;
	border:1px solid white;
	color:#888;
	margin-bottom:25px;
	
	/* CSS3 rounded corners and drop shadows 
	
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;*/

	-moz-box-shadow:2px 2px 0 #c2c2c2;
	-webkit-box-shadow:2px 2px 0 #c2c2c2;
	box-shadow:2px 2px 0 #c2c2c2;
}

.comment .avatar{

	/*
	/	The avatar is positioned absolutely, 
	/	and offset outside the comment div
	/*/

	height:50px;
	left:-70px;
	position:absolute;
	width:50px;
	background:url('img/default_avatar.gif') no-repeat #fcfcfc;
	
	/* Centering it vertically: */
	
	margin-top:-25px;
	top:50%;

	-moz-box-shadow:1px 1px 0 #c2c2c2;
	-webkit-box-shadow:1px 1px 0 #c2c2c2;
	box-shadow:1px 1px 0 #c2c2c2;
}

.comment .avatar img{
	/*display:block;*/
}

.comment .name{
	font-size:20px;
	padding-bottom:10px;
	color:#ccc;
}

.comment .date{
	font-size:10px;
	padding:6px 0;
	position:absolute;
	right:15px;
	top:10px;
	color:#bbb;
}

.comment p,
#addCommentContainer p{
	font-size:18px;
	line-height:1.5;
	overflow-x:hidden;
}

#addCommentContainer input[type=text],
#addCommentContainer textarea{

	/* Styling the inputs */
	border:1px solid #ccc;
	height:42px;
	padding:14px;
	margin:5px 0 5px 10px;
	font-size:12px;
	float: left;
	color:#555;
	font-family:Arial, Helvetica, sans-serif;
}

#addCommentContainer textarea{
	width:70%;
	margin-right: 10px
}

.textarea {
	width:66%!important;
}

label{
	font-size:10px;
}

label span.error{
	color:red;
	right:-10px;
}

#submit{
	
	/* The submit button */
	
	background-color:#06678D;
	border:1px solid #40A2D4;
	color:#FFFFFF;
	cursor:pointer;
	font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
	font-size:14px;
	font-weight:bold;
	padding:11px;
	height:42px;
	margin-top:5px;
}

#submit:hover{
	background-color:#fff;
	border-color:#52b1e2;
	color:#06678D;
}

/* The styles below are only necessary for the styling of the demo page: */

#main{
	margin:0 auto;
	width:980px;
	padding-top:20px;
	overflow:scroll;

}

a img{
	border:none;
}

@media screen and (max-width: 980px){
	#main, #addCommentContainer{width:800px !important;}
}

@media screen and (max-width: 880px){
	#main, #addCommentContainer{width:95% !important;}
	#addCommentContainer{left:30px;}
}

@media screen and (max-width: 813px){
	.textarea{width: 60%!important;}
}

@media screen and (max-width: 813px){
	.textarea{width: 60%!important;}
}
@media screen and (max-width: 696px){
	#addCommentContainer{width:90% !important; left:35px;}
	.textarea{width: 50%!important;}
}

@media screen and (max-width: 595px){
	.textarea{width: 40%!important;}
}

@media screen and (max-width: 500px){
	#addCommentContainer{width:88% !important; left:30px;}
	.textarea{width: 55%!important;}
	#submit {width:100%;}
}

@media screen and (max-width: 496px){
	#addCommentContainer{left:24px;}
	#addCommentContainer input[type=text]{width:43%;}
	.textarea{width: 43%!important;}
}