@charset "UTF-8";
/* CSS Document */


/* TABLON
---------------------------------------------------------------------------------------------*/
body.tablon #main .main-block .formulario {
	height: 134px;
	padding: 0;
	margin: 0 0 15px 0;
}
body.tablon #main .main-block form .form-item {
	width: 660px;
	height: 100px;
	margin: 0;
	padding: 0;
}
body.tablon #main .main-block form .text-input textarea {
	float: none;
	width: 648px;
}

body.tablon #main .main-block form .botones {
	width: 650px;
	height: 34px;
	margin: -2px 0 0 10px;
}
body.tablon #main .main-block form .botones a {
	display: block;
	float: left;
	height: 24px;
	margin: 0 5px 0 0;
	padding: 5px;
	text-align: left;
	font-size: 13px;
	font-weight: 500;
	line-height: 24px;
	transition:0.1s all; -moz-transition:0.1s all; -webkit-transition:0.1s all; -ms-transition:0.1s all; -o-transition:0.1s all;
	background-color: rgba(152,140,126,0);
	border-radius:0 0 4px 4px; -moz-border-radius:0 0 4px 4px; -webkit-border-radius:0 0 4px 4px; -ms-border-radius:0 0 4px 4px; -o-border-radius:0 0 4px 4px;
}
body.tablon #main .main-block .formulario .botones a img.icon.rojo {
	float: left;
	width: 24px;
	height: 24px;
	margin: 0 4px 0 0;
}
body.tablon #main .main-block .formulario .botones a.active,
body.tablon #main .main-block .formulario .botones a:hover { color:#654; background-color:rgba(212,178,136,0.5); }

body.tablon #main .main-block .formulario .botones a.active img.icon.rojo,
body.tablon #main .main-block .formulario .botones a:hover img.icon.rojo { background:#654 url('../images/bg-marron.png'); background-size:100% 100%; }

body.tablon #main .main-block .formulario .botones a.no-disponible { opacity:0.4; }
body.tablon #main .main-block .formulario .botones a.no-disponible:hover { color:inherit; background-color:transparent; }

body.tablon #main .main-block .formulario .botones input {
	float: right;
	width: 150px;
	height: 30px;
	line-height: 30px;
	margin: 4px 0 0 0;
	font-size: 16px;
}


/* Mensaje a amigo */
body.tablon #pop-body .content {
	width: 660px;
	height: 340px;
	overflow-x: hidden;
	overflow-y: scroll;
}
body.tablon #pop-body .avatar {
	overflow: hidden;
	position: relative;
	display: block;
	float: left;
	width: 150px;
	height: 150px;
	margin: 0 10px 10px 0;
	border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px;
}
body.tablon #pop-body .avatar img {
	display: block;
	width: 150px;
	height: 150px;
	opacity: 1;
	transition:0.3s all; -moz-transition:0.3s all; -webkit-transition:0.3s all; -ms-transition:0.3s all; -o-transition:0.3s all;
}
body.tablon #pop-body .avatar .data {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 140px;
	padding: 5px;
	color: #FFF;
	background-color: rgba(102,85,68,0.7);
	transition:0.3s all; -moz-transition:0.3s all; -webkit-transition:0.3s all; -ms-transition:0.3s all; -o-transition:0.3s all;
}
body.tablon #pop-body .avatar .data .nombre {
	display: block;
	margin: 0 0 4px 0;
	font-size: 13px;
	line-height: 14px;
}
body.tablon #pop-body .avatar .data .escuela {
	display: block;
	font-size: 11px;
	line-height: 12px;
}

body.tablon #pop-body .avatar:hover>img { opacity:0.5; }
body.tablon #pop-body .avatar:hover>.data { background-color:rgba(152,140,126,0.7); }


/* Listado grupos */
body.tablon #main .main-block .content .paginacion { margin:10px 0 0 0; }

body.tablon #main .main-block .content .mensaje-wrap {
	overflow: hidden;
	clear: both;
	width: 640px;
	height: 48px;
	padding: 10px;
	margin: 0 0 2px 0;
	background-image: url('../images/bg-crema.png');
	background-size: 100% 100%;
	border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -ms-border-radius:4px;
}
body.tablon #main .main-block .content .mensaje-wrap:last-child { margin:0; }

body.tablon #main .main-block .content .mensaje-wrap a { color:#654; }
body.tablon #main .main-block .content .mensaje-wrap a:hover { color:#1786b5; }

body.tablon #main .main-block .content .mensaje-wrap .avatar {
	float: left;
	width: 40px;
	height: 40px;
	margin: 0 7px 0 0;
}
body.tablon #main .main-block .content .mensaje-wrap .avatar img {
	width: 40px;
	height: 40px;
	border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -ms-border-radius:4px;
	box-shadow: 0 1px 4px #CBA; -moz-box-shadow: 0 1px 6px #654; -webkit-box-shadow: 0 1px 6px #654; -ms-box-shadow: 0 1px 6px #654;
}

body.tablon #main .main-block .content .mensaje-wrap .nombre {
	overflow: hidden;
	float: left;
	width: 380px;
	font-size: 14px;
	font-weight: 300;
	color: #987;
	line-height: 18px;
}
body.tablon #main .main-block .content .mensaje-wrap .nombre a {
	font-size: 16px;
	font-weight: 500;
	color: #654;
}

body.tablon #main .main-block .content .mensaje-wrap .tiempo {
	float: right;
	width: 210px;
	font-size: 11px;
	color: #987;
	line-height: 18px;
	text-align: right;
}
body.tablon #main .main-block .content .mensaje-wrap .tiempo .alerta {
	display: block;
	float: right;
	width: 16px;
	height: 16px;
	margin: -2px -2px 0 6px;
	font-size: 9px;
	font-weight: 500;
	color: #FFF;
	line-height: 16px;
	text-align: center;
	border: 1px solid #FFF;
	background: transparent url('../images/header-alerts.png') no-repeat center center;
	border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px;
	box-shadow: 0 1px 5px #987; -moz-box-shadow: 0 1px 5px #987; -webkit-box-shadow: 0 1px 5px #987; -ms-box-shadow: 0 1px 5px #987;
}

body.tablon #main .main-block .content .mensaje-wrap .mensaje {
	overflow: hidden;
	float: left;
	width: 593px;
	height: 28px;
	margin: 2px 0 0 0;
	font-size: 13px;
	font-weight: 300;
	line-height: 14px;
}


/* Mensajes */
body.tablon.mensajes #main .main-block .content .mensaje-wrap {
	width: 660px;
	height: auto;
	margin: 0;
	padding: 10px 0;
	background-image: none;
	border-bottom: 1px solid #e1d4bd;
	border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; -ms-border-radius:0;
}
body.tablon.mensajes #main .main-block .content .mensaje-wrap:first-child { padding-top:0; }
body.tablon.mensajes #main .main-block .content .mensaje-wrap:last-child { padding-bottom:0; border:none; }

body.tablon.mensajes #main .main-block .content .mensaje-wrap .nombre {
	width:320px;
	font-size: 16px;
	font-weight: 500;
	color: #654;
}

body.tablon.mensajes #main .main-block .content .mensaje-wrap .tiempo { width:280px; }
body.tablon.mensajes #main .main-block .content .mensaje-wrap .tiempo .nivel {
	width: 75px;
	display: inline-block;
	margin-bottom: -3px;
}
body.tablon #main .main-block .content .mensaje-wrap .tiempo .nivel img { display:block; float:left; }

body.tablon.mensajes #main .main-block .content .mensaje-wrap .mensaje { width:613px; height:auto; margin-top:5px; }
body.tablon.mensajes #main .main-block .content .mensaje-wrap .mensaje p { margin:0 0 5px 0; }
body.tablon.mensajes #main .main-block .content .mensaje-wrap .mensaje p:last-child { margin:0; }