html{
	font-family: Arial, Courier, Verdana, arial;
	font-size:18px;
}

@font-face {
	font-family: 'Atma';
	src: url('fonts/Atma-Regular.woff2') format('woff2'),
		url('fonts/Atma-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face{
	font-family: 'AtraiOMJ';
	src: url('AtraiOMJ.woff2') format('woff2'),
		url('AtraiOMJ.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face{
	font-family: 'Bangla';
	src: url('fonts/Bangla.woff2') format('woff2'),
		url('fonts/Bangla.woff') format('woff');
	font-style: normal;
	font-display: swap;
}

@font-face{
	font-family: 'DhakarchithiOMJ';
	src: url('DhakarchithiOMJ.woff2') format('woff2'),
		url('DhakarchithiOMJ.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@media screen and (min-width: 520px){
	html{
	font-size:20px;
	}
}

@media screen and (min-width: 900px){
	html{
	font-size:24px;
	}
}

*{
	box-sizing: border-box;
}

body{
	font-family: 'Bangla', Arial, sans-serif !important;
	margin:auto;
	background-color:#7d7;
	padding:0px;
	height:101%;
}

a{
	text-decoration:none;
	font-weight:bold;
}

a:link, a:active{
	color:#585;
}

a:visited{
	color:#484;
}

a:hover {
	color:#6b6;
}

a.facebook{
	background-color:#4267d2;
	color: white;
	padding: 8px;
	text-decoration:none;
	border-radius:10px;
}

p{
	text-indent:50px;
}

#warn{
	border:2px solid red;
	color:#f00;
	background:#ff6;
	padding:5px;
}

#header{
	background-color: #9e9;
	padding: 10px 30px 10px;
	font-size:2.2em;
	color:#fff;
	text-shadow:4px 4px 10px #000;
	white-space:nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
}

a.logo{
	text-decoration:none;
	color:#fff;
}

.subt{
	font-size:.6em;
}

/*responsive navbar*/
#stickbar{
	background-color:#373;
	box-shadow:4px 4px 10px #696;
	margin-bottom:10px;
}

.navbar{
	padding:2px;
}

.navbar a{
	display:none;
	color:#afa;
	padding:5px;
}

.navbar a:hover {
	background-color: #afa;
	color:#373;
	border-radius:10px;
}

.navbar:after{
	clear:both;
	content:"";
	display:table;
}

.navbar a.icon {
  display: block;
  float: right;
}

.navbar a.imp {
  	position:relative;
	display:inline-block;
}

.sticky{
	position:fixed;
	top:0;
	width:100%;
	box-shadow:0px 5px 3px #6b6;
	z-index:10;
	background:#373;
}

.sticky a.slogo {
	display: inline-block;
	text-shadow:3px 3px 3px #666;
	color:#fff;
	text-decoration:none;
	background:none;
}

.sticky a{
	color:#afa;
}

.sticky a:hover{
	background:#afa;
	color:#373;
}

.content{
	padding-top: 16px;
	margin:0px 5px 0px;
}

.sticky + .content {
	padding-top: 120px;
}

.alert {
	position:relative;
	top: -10px;
	right: 0px;
	padding: 0px 6px;
	border-radius: 50%;
	background: #f00;
	color: white;
	font-size:.8em;
}

.color0{
	background: #888;
	color: #eee;
}

@media screen and (min-width: 520px){
	.navbar a.simp{
		display: inline-block;
	}
}

@media screen and (min-width: 760px){
	.navbar a.mimp{
		display: inline-block;
	}
}

@media screen and (min-width: 1240px){
	.navbar a.limp{
		display: inline-block;
	}
	
	.navbar a.icon {
		display: none;
	}
}

.uimp{
	display:none;
}

.bimp{
	visibility:hidden;
}

@media screen and (min-width: 700px){
	.uimp,.bimp{
		display: inline-block;
		visibility:visible;
	}
}

@media screen and (max-width: 1240px) {
.navbar.responsive {
	position: relative;
}

.navbar.responsive a.icon {
	position: absolute;
	right: 0;
	top: 0;
}

.navbar.responsive a {
	float: none;
	display: block;
	text-align: left;
  }
}

/*--modal--*/
.floatbox{
	display:none;
	position:fixed;
	z-index:1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto; 
	background-color: rgb(0,0,0); 
	background-color: rgba(0,0,0,0.4); 
	padding-top: 60px;
}

.floatbox-content {
	margin: 5% auto 15% auto;
	max-width: 50%;
	border-radius:10px;
}

.animate {
	-webkit-animation: zoom 0.6s;
	animation: zoom 0.6s
}

@-webkit-keyframes zoom {
	from {-webkit-transform: scale(0)} 
	to {-webkit-transform: scale(1)}
}

@keyframes zoom{
	from {transform: scale(0)} 
	to {transform: scale(1)}
}

.logout {
	background-color: #fee;
	margin: 5% auto 15% auto;
	border: 3px solid #b00;
	border-radius:10px;
	width: 50%;
}

.boxlogo{
	text-align: center;
	margin: 20px 0 12px 0;
	position: relative;
}

.close{
	position: absolute;
	right: 15px;
	top: -15;
	color: #000;
	font-size: 35px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: red;
	cursor: pointer;
}

.logm {
	padding: 15px;
}

.cancel {
	width: auto;
	padding: 10px 18px;
	background-color: #f43;
}
/*--modal end--*/

button{
	background-color: #4A5;
	color:#fff;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	cursor: pointer;
	width: 100%;
	border-radius:10px;
}

/* content area starts */
.content:after {
	content: "";
	display: table;
	clear: both;
}

.mainarea,.sidearea{
	padding:5px;
	float: left;
	width:100%;
	margin:auto;
}

@media screen and (min-width: 950px) {
	.mainarea{max-width:75%;}
	.sidearea{width:25%;}
}

.bighead{
	font-family: 'DhakarchithiOMJ', Arial, sans-serif !important;
	padding:20px;
	padding-left:10px;
	background:#373;
	color:#0f0;
	font-size:1.2em;
}

.bigt{
	font-size:4em;
	color:#dfd;
	text-align:center;
}

.tophead{
	padding:3px;
	padding-left:10px;
	background:#373;
	color:#0f0;
}

.tophead a{
	color:#7f7;
	font-weight:bold;
}

.topr{
	margin-top:5px;
	margin-bottom:0px;
	border-radius:10px 10px 0px 0px;
}

.botr{
	margin-top:0px;
	margin-bottom:5px;
	border-radius:0px 0px 10px 10px;
}

.fullr{
	border-radius:10px 10px 10px 10px;
}

.cbox{
	border:2px solid #373;
	background:#373;
}

.sub{
	padding:3px;
	padding-left:10px;
	font-weight:bold;
	background:#373;
	color:#afa;
	border:2px solid #373;
	border-radius:10px 10px 0px 0px;
}

.msg{
	padding:5px;
	padding-left:10px;
	font-size:18px;
	background:#afa;
	color:#373;
	border:2px solid #373;
	border-radius:0px 0px 10px 10px;
}

.ers{
	background:#c44;
	color:#fee;
	border:2px solid #c44;
}

.erm{
	background:#fdd;
	color:#f00;
	border:2px solid #c44;
}

.center{
	text-align:center;
}

.mainrow{
	border:3px solid #373;
	padding:2px;
	padding-left:5px;
	background:#afa;
	border-radius:10px 10px 10px 10px;
}

.mainrow:after {
	content: "";
	display: table;
	clear: both;
}

.serhead{
	margin:-2px -2px 5px -5px;
	padding:5px;
	background:#dfd;
	border-bottom:1px solid #373;
	border-radius:5px 5px 0px 0px;
	font-weight:bold;
	font-size:1.4em;
}

.fade{
	font-size:.6em;
	color:#9d9; 
	float:right;
}

.eprow{
	padding:10px;
}

.epblock{
	margin:5px;
	display: inline-block;
	width:200px;
	height:268px;
	position: relative;
	float:left;
	border-radius:10px;
	background: #6c3;
	padding:4px;
	box-shadow:5px 5px 5px #7a7;
}

.epimg{
	display: block;
	width:192px;
	height:260px;
	border-radius:10px;
}

.toplay {
	position: absolute; 
	top: 0;
	left:0;
	background: #6c3;
	color: #efe; 
	width: 100%;
	transition: .5s ease;
	opacity:0;
	font-size: 1em;
	font-weight:bold;
	padding: 20px;
	text-align: center;
	border-radius:10px 10px 0px 0px;
}

.botlay {
	position: absolute; 
	left:0;
	bottom: 0; 
	background: #6c6;
	color: #fff; 
	width: 100%;
	transition: .5s ease;
	opacity:0;
	font-size: .8em;
	color: white;
	padding: 10px;
	text-align: center;
}

.epblock:hover .toplay{
  opacity: 1;
}

.epblock:hover .botlay{
  opacity: 1;
}

.label{
	position: absolute; 
	left:-6;
	top: 25%; 
	background: #f44;
	color: #fdd;
	transition: .5s ease;
	opacity:1;
	font-size: .6em;
	padding: 5px;
	border-radius:10px 0px;
}

.epblock:hover .label{
  opacity: 0;
}

.bredbox{
	margin-top:5px;
	margin-bottom:0px;
	padding-left:10px;
	background:#373;
	color:#afa;
	white-space:nowrap;
	text-overflow: ellipsis;
}

.bread{
	margin:5px;
	position:relative;
	top:-10px;
	border:2px solid #373;
	background:#cfc;
	color:#373;
	padding:5px 10px;
	border-radius:15px 0px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
}

.topicrow{
	padding:5px;
	background:#afa;
	overflow:none;
}

.topicrow :after{
	clear:both;
	display:table;
	content: "";
}

.postrow{
	padding:5px;
	background:#8d8;
	border:1px solid #373;
}

.topic{
	text-indent:50px;
	padding:5px;
	background-color: #afa;
	font-size: 1.2em;
	text-align:justify;
}

.editinfo{
	color: #555; 
	background-color: #aea;
	font-size: 16px;
	margin-top:2px;
	margin-bottom:2px;
	border-top:2px solid #686;
	border-bottom:2px solid #686;
}

.bigadd{
	font-size:4em;
	color:#bbb;
	position: absolute; 
	top: 25%;
	left:32%;
}

.editsub,.editfield,.editbut,.editimg{
	width:100%;
	text-align:left;
	padding:2px;
}

.editbut{
	text-align:center;
}

textarea{
	font-family: 'AtraiOMJ',Georgia !important;
	width: 100%;
	padding: 10px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #cfc;
	box-sizing: border-box;
	font-size:1.2em;
	background:#efe;
}

input[type=text],input[type=password],input[type=file] {
	width: 100%;
	padding: 10px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #cfc;
	box-sizing: border-box;
	font-size:1.2em;
	background:#dfd;
}

@media screen and (min-width: 580px){
.editsub,.editfield,.editbut{
	float:left;
	}
	
	.editsub{
	width:25%;
	}
	
	.editfield{
	width:70%;
	}
	
	.multi{
	width:40%;
	display:inline-block;
	}
	
	.editimg{
	max-width:48%;
	float:left;
	}
}

.preview{
	float:right;
	margin:5px;
	width:100%;
	height:auto;
	clear:both;
}

.epopt{
	margin:5px 2px;
	padding:5px 15px;
	background:#dfd;
	border-radius:15px;
	font-weight:bold;
	font-size:1.2em;
	background-image: linear-gradient(#373, yellow,red);
	white-space:nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
}

.links{
	margin:2px 0px 0px 0px;
	background-color: #9e9;
	background: repeating-linear-gradient(45deg,#afa, #696 30%, #afa 40% );
	animation: gradient 15s ease infinite;
	background-size: 400% 400%;
	padding: 5px 10px 5px;
	font-size:25px;
	transition:.5s;
}

.linfo{
	margin:10px;
	background-color: #6d6;
	padding: 10px 20px 10px;
	font-size:25px;
	border-radius:10px;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}







/*=========last old=========*/
.ialert {
	position:relative;
	top: -30px;
	right: 15px;
	padding: 1px 5px;
	border-radius: 80%;
	background: #f00;
	color: white;
	font-size:.8em;
}

.ialert.color0,.alert.color0{
	background: #888;
	color: #eee;
}

.trad{
	margin-top:5px;
	margin-bottom:0px;
	border-radius:10px 10px 0px 0px;
}

.drad{
	margin-top:0px;
	margin-bottom:5px;
	border-radius:0px 0px 10px 10px;
}

.imgbox{
	float:left;
	margin:2px;
	width:20%;
	height:260px;
	overflow: hidden;
}

.databox{
	float:left;
	width:75%;
	margin:2px;
}

img.round{
	border-radius:10px;
}

.zoom {
	transition: transform .5s; /* Animation */
	margin:auto;
}

.zoom:hover {
	transform: scale(1.2); 
}

.mgreen{
	color:#373;
}

/*flexible log box*/
.colbox{
	margin:5px;
	padding:5px;
}

.lcol,.rcol,.lcolom,.rcolom{
	padding:5px;
	width:100%;
}

.rcolom,.rcol{
	text-align:center;
}

.lcol,.lcolom{
	text-align:center;
}

.rcol,.rcolom{
	margin-top:15px;
}

.colbox:after {
	content: "";
	display: table;
	clear: both;
}



button.red{
	background-color: #FC5050;
}

.vl {
	position: absolute;
	left: 45%;
	transform: translate(-50%);
	border: 2px solid #373;
	height: 45%;
	display:none;
}

.vline {
	position: absolute;
	left: 45%;
	transform: translate(-50%);
	border: 2px solid #373;
	height: 45%;display:none;
}

.hl{
	position: relative;
	left: 45%;
	transform: translate(-50%);
	border: 2px solid #373;
	width: 50%;
}

.hline{
	position: relative;
	left: 45%;
	transform: translate(-50%);
	border: 2px solid #373;
	width: 50%;
}

.itext {
	position: absolute;
	transform: translate(-50%, -50%);
	background-color: #afa;
	border: 2px solid #373;
	border-radius: 50%;
	padding: 4px 5px;
	color:#373;
}

.hor{
	left: 50%;
}

.ver{
	top: 50%;
}

@media screen and (min-width: 600px) {
	.lcol,.lcolom{
	width: 45%;
	float:left;
	}
	.rcol,.rcolom{
	width: 50%;
	float:right;
	}
	.hl,.hline{
	display:none;
	float:left;
	}
	.vl, .vline{
	display:block;
	}
}

@media screen and (min-width: 950px) {
	.lcol,.rcol{
	width: 100%;
	display:block;
	}
	.hl{
	display:block;
	}
	.vl{
	display:none;
	}
}

.logbox{
	padding:5px;
	background:#afa;
	border:2px solid #373;
	border-radius:10px 10px 10px 10px;
}

.logbox:after {
	content: "";
	display: table;
	clear: both;
}

.righty{
	position:relative;
	top: -25px;
	right:10px;
	float:right;
	border-radius:20px;
}

.addnew{
	display:none;
}

.uimp{
	display:none;
}

@media screen and (min-width: 700px){
	.uimp{
		display: inline-block;
	}
}

@media screen and (min-width: 550px){
	.addnew{
		display: inline-block;
	}
	
	.righty{
	border-radius:10px 0px;
	}
}

.pages{
	border:2px solid #373;
	border-radius:10px;
	background:#cfc;
	padding:5px;
	position:relative;
	top: 20px;
	left:20%;
	z-index:1;
	color:#373;
	width:80%;
}

.page{
	border:1px solid #373;
	border-radius:10px;
	background:#efe;
	display:none;
}

a.impp{
	display: inline-block;
}

@media screen and (min-width: 500px){
	a.simpp{
		display: inline-block;
	}
}

@media screen and (min-width: 720px){
	a.mimpp{
		display: inline-block;
	}
}

@media screen and (min-width: 1100px){
	a.limpp{
		display: inline-block;
	}
}
.picon{
	float:left;
	background: #afa;
	border-radius:50%;
	padding:5px;
	max-height:50px;
}



.enote{
	margin:5px;
	padding:5px;
	background:#ffd;
	color:#f00;
}

.usrbox{
	padding:2px;
	text-align:left;
	width:100%;
	display:block;
}

.useavtar{
	float:left;
	margin:2px;
	margin-right:10px;
}

a.sendpm{
	display:inline;
}

.combox{
	padding:2px;
	text-align:left;
	width:100%;
	display:block;
}

.postdata{
	padding:2px;
}

@media screen and (min-width: 600px){
	.usrbox{
		width:25%;
		float:left;
		text-align:center;
		border-right:2px solid #373;
	}
	.useavtar{
	float:none;
	display:block;
	margin:auto;
	}
	a.sendpm{
	display:block;
	}
	.combox{
		width:73%;
		float:left;
		margin-left:-2px;
		border-left:2px solid #373;
	}
}

.ucon{
	padding:5px 10px;
}

.utext{
	display:none;
}

.sel{
	background:#dfd;
	padding:5px 2px;
	color:#373;
	border-radius:5px 5px 0px 0px;
}

a.sel{
	color:#373;
}

@media screen and (min-width: 1200px){
	.utext{
		display:inline-block;
	}
}

.panel{
	padding:5px;
	padding-left:10px;
	font-weight:bold;
	background:#dfd;
	color:#373;
	border:3px solid #373;
	border-top:0px;
}

table{
	border-spacing:0;
	width:100%;
	border:1px solid #373;
}

.quote{
	background-color: #dfd;/*#CCD1D1;*/
	text-align:justify;
	font-style:italic;
	border:1px dashed #444;
	padding:5px;
}

.filewarn{
	background-color: #fee;
	padding:10px;
	text-align:justify;
	font-size:.8em;
	border:2px dashed #f00;
	border-radius:10px;
	color:#f00;
}

.colc{
	width:100%;
	border:1px dotted #ddd;
	float:left;
	white-space:nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
}

@media screen and (min-width: 400px){
	.colc{
	width:50%;
	}
}

@media screen and (min-width: 600px){
	.colc{
	width:33%;
	}
}

@media screen and (min-width: 900px){
	.colc{
	width:25%;
	}
}

select{
	padding: 5px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #cfc;
	font-size:1em;
	background:#efe;	
}

.stab {
	overflow: hidden;
	padding: 0px;
}

.stab button {
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	transition: 0.3s;
	font-size: 17px;
	background:#afa;
	color:#040;
	font-weight:bold;
	margin:0;
	width:auto;
	border: 1px solid #373;
	border-radius:10px 10px 0px 0px;
}

.stab button:hover {
	background-color: #3f3;
}

.stab button.active {
	background-color: #393;
	color:#efe;
}

.tabcontent {
	display: none;
	padding: 6px 12px;
	background:#dfd;
	border:2px solid #373;
}

.currrow:hover{
	background:#ff9;
}

.messarea{
	border:2px solid #373;
	background:#8d8;
	padding:5px;
}

.messbox{
	display: block;
	margin:10px 0px;
}

.messbox:after {
  content: "";
  display: table;
  clear: both;
}

.uinfo,.umess{
	display:block;
	margin:0px;
	padding:10px;
}

.uinfo{
	background: #3c6;
	border-radius: 10px 10px 0px 0px;
	font-weight:bold;
}

.umess{
	background: #9fc;
	border-radius: 0px 0px 10px 10px;
}

.mtime{
	font-size:.8em;
	font-weight:normal;
}

.hide{
	display:block;
}

.deep{
	background: #cff;
	border-radius: 0px 0px 10px 10px;
}

hr.conv {
	border-top: 3px solid #373;
}

@media screen and (min-width: 700px) {
	.messbox{
		display: flex;
		margin:10px;
	}
	
	.uinfo,.umess{
	float: left;
	width:90%;
	}
	
	.uinfo{
	width:200px;
	border-radius: 10px 0px 0px 10px;
	}
	
	.umess{
	border-radius: 0px 10px 10px 0px;
	margin-left:0px;
	}
	
	.hide{
	display:none;
	}
	
	.deep{
	background: #cff;
	margin-left:200px;
	border-radius: 10px 10px 10px 10px;
	}
}

.mbox{
	text-align:center;
	max-width:900px;
	margin:auto;
}

.midt{
	font-size:1.5em;
	text-align:center;
}

button.tini{
	width:200px;
	margin:2px;
	padding:10px;
}

button.mini{
	width:30%;
	margin:2px;
	padding:10px;
}


/*==============old===============*/
.ads{
	margin:2px;
}

.ads .banner{
	clear:both;
}

/*common boxes------*/

.right{
	text-align:right;
}

.twinrow:after{
	content: "";
	display: table;
	clear: both;
}

.colomn{
	font-size:18px;
	font-weight:bold;
	margin:0px;
	padding:10px;
	float: left;
	width: 48%;
	padding: 10px;  
	box-sizing: border-box;
}

.colomn.centered{
	text-align:center;
	vertical-align:middle;
}

@media screen and (max-width: 600px) {
.colomn{
	width:100%;
}

}


/*login logreg forms*/
.fbreg{
	background:#44c;
	background-image: linear-gradient(to bottom,#22c,#229);
	width:auto;
	padding:10px 15px;
	border-radius:5px;
}

a.fbreg{
	color:#fff;
	text-decoration:none;
}

.container {
	padding: 15px;
}


button{
	background-color: #4CAF50;
	color:#fff;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	cursor: pointer;
	width: 100%;
	font-size:15px;
}

input[type=button]{
	width: auto;
	color:#000;
	background-color: #ded;
	padding:5px;
	border-radius:10px;
	box-shadow: 0 9px #999;
}

button:hover {
	opacity:0.8;
}

/*
button a:active{
	color:#fff;
}*/

.cancel {
	width: auto;
	padding: 10px 18px;
	background-color: #f44336;
}

@media screen and (max-width: 300px) {
.cancel {
	width: 100%;
}
}

/*tables*/


table.invisible{
	border:0px;
}

table.round{
	border-bottom:3px solid #373;
	border-radius:0px 0px 5px 5px;
}

table a{
	color:#373;
	font-weight:bolder;
}

table a:hover{
	text-decoration:underline;
	font-weight:bold;
	color:#3b3;
}

tr.grad{
	background: #afa;
	background-image: linear-gradient(#afa, #8a8);
	color:#050;
}

tr.grad:hover{
	background: #8d8;
	color:#050;
}

.unread{
	background: #afa;
	background-image: linear-gradient(#ffa, #aa8);
	color:#050;
}

td{
	border-bottom: 1px solid #373;
	padding:5px;
	overflow:hidden;
}

td.noborder{
	border-bottom: 0px;

}

td.prev{
	text-align: center;
	vertical-align:middle;
}

td.folder{
	width:80px;
}

td.data{
	vertical-align:top;
	padding:3px;
}

.stats{
	border-spacing:0;
	width:100%;
	border-left:3px solid #373;
	border-right:3px solid #373;
	font-size: 20px;
	background:#aea;
}

td.rline{
	border-right: 3px solid #373;
}

.centered{
	text-align:center;
}

.width{
	width:30%;
}

td.auth{
	padding:5px;
	border-top:3px solid #575;
	border-bottom:3px solid #575;
	background-image: linear-gradient(#373,#7d7, #373);
	color:#cfc;
	font-weight:bold;
	text-shadow:4px 4px 4px #555;
	font-size:1.2em;
}

td.auth a{
	color:#cfc;
}

.mainpost{
	font-family: verdana, arial, sans-serif;
	color: #000000;
	background-color: #dfd;
	font-size: 1.2em;
	white-space: auto;
	text-align:justify;
	padding: 4px;
}

.postarea{
	color: #000;
	background-color: #dfd;
	font-size: 1.2em;
	text-align:justify;
	padding: 2px;
	margin-bottom:2px;
}



#read{
	font-family: arial, verdana, sans-serif;
	color: #555555; 
	background-color: #ffb;
	border:2px dashed #888;
	font-size: 18px;
	margin:2px;
	padding:3px;
}

table.comments{
	border:2px solid #373;
	padding:5px;
	border-collapse: collapse;
}

table.comments tr{
	border-bottom:5px solid #373;
}

table.comments tr:nth-child(even) {background-color: #f2f2f2;}

td.author{
	background-image: radial-gradient(circle at 50% 35%, #cfc 5%, #7e7 50%, #5a5);
	color:#cfc;
	font-weight:bold;
	border-right:2px solid #373;
	text-shadow:4px 4px 4px #555;
	font-size:1.2em;
	width:20%;
	text-align:center;
	vertical-align:top;
}

td.comment{
	padding:5px;
	color:#000;
	background:#8d8;
	font-size:1.2em;
	vertical-align:top;
	text-align:justify;
}

textarea.comment{
	width:100%;
	background:#efe;
	font-size:22px;
}

.expire{
	background:#cf0;
	border-top:2px solid #373;
	border-bottom:2px solid #373;
}

/*tabbed userpanel*/
.tab{
	padding:10px;
}
.tab a{
	padding:11px 5px;
}

input.mininput{
	width:200px;
	margin:0px;
}

button.mininput{
	width:70px;
	margin:0px;
	padding:10px;
}






.read{
	font-family: arial, verdana, sans-serif;
	color: #555555; 
	border:1px dashed #888;
	font-size: 18px;
	margin:2px;
	padding:3px;
}

.unread{
	background-color: #AED6F1;
}

.read{
	background-color: #CCD1D1;
}



/*message*/
* {
  box-sizing: border-box;
}





/*message form*/
.container {
	padding:20px;
	border:3px solid #373;
	font-size: 20px;
}

.row:after{
	content: "";
	display: table;
	clear: both;
}

.lcolomn{
	float: left;
	width: 25%;
	margin-top: 6px;
}

.rcolomn{
	float: left;
	width: 75%;
	margin-top: 6px;
}

.explain{
	float: left;
	width: 100%;
	margin-top: 6px;
	font-size:.8em;
	color:#f44;
}

.mess{
	width:100%;
	height:auto;
	font-size:24px;
}

@media screen and (max-width: 540px){
	button,.lcolomn,.rcolomn,.butlink{
	width:100%;
	}
	
}