/* GENERAL */
html, body{ height: 100% }
body{ background: #F5F5F5; font-size: 15px; color: #333 }
a{ text-decoration: none }
a:focus{ outline: 0 }
body, a, input, select, textarea{ color: #333 }
h1, h2, h3, h4{ font-weight: 100 }
.clft{ clear: left }
.clb{ clear: both }
.oculto { display: none }

#mensaje_general{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	max-width: 400px;
	height: 15px;
	margin: auto;
	background: #fff;
	border: 1px solid;
	border-top: 0;
	border-radius: 5px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	padding: 3px 10px;
	text-align: center;
	font-size: 0.8em;
	z-index: 100;
}
.red{ color: red }
.green{ color: green }

/* LOGIN */
#login{
	position: absolute;
	left: 50%;
	top: 50%;
    background: #fff;
    width: 310px;
    height: 210px;
    margin-left: -175px;
    margin-top: -125px;
    padding: 20px;
    border: 1px solid #E5E5E5;
    border-radius: 5px 5px 5px 5px;
    text-align: center
}
#login h1{ margin: 0 0 5px; font-weight: 100; font-size: 2em }
#login h2{ margin: 0 0 10px; font-size: 1em }
#login input{ width: 70%; margin: 5px 10%; padding: 6px; border: 1px solid #ccc; border-radius: 8px 8px 8px 8px }
#login .enviar{
    background: #e9e9e9;
    width: 100px;
    margin: 12px 0 0;
    padding: 3px;
    border-color: #aaa;
    font-size: 1.1em;
    color: #999;
    border-radius: 8px 8px 8px 8px;
    border-style: solid;
    border-width: 1px;
}
#login .enviar:hover{ cursor: pointer; background: #eee; color: #777 }

/* HEADER */
#header{ position: relative; float: right; width: 85%; margin-right: 1% }
#header .info{ position: relative; float: left; margin: 15px 0 0 0 }
#header .info h1{ float: left; margin: 0 0 5px; padding-right: 20px; font-size: 2em; border-right: 2px solid #999 }
#header .info .desc{ float: left; height: 18px; margin: 10px 12px; opacity: 0.6 }
#header .info .desc:hover{ opacity: 1 }
#header .info p, #header .info ul{ position: absolute; left: 0; bottom: -30px }
#header .info p{ display: none; min-width: 300px; font-size: 0.9em; font-weight: 100; }
#header .info ul{ width: 300px; top: 7px; left: 185px; margin: 0; padding: 0; list-style: none; font-size: 1.1em }
#header .info ul li{ float: left; margin: 0 8px 0 2px }
#header .info ul img{ height: 16px; margin-right: 2px; vertical-align: middle }
#header .info ul .form{ display: none; opacity: 0.5 }
#header .info ul .cancel:hover{ color: red; opacity: 1 }
#header .info ul .submit:hover{ color: green; opacity: 1 }
#header .info ul .submit{ margin-left: 5px }
#header .now{ float: right; margin: 6px 10px; text-align: right; font-size: 0.9em }

.button, .toolbar a, .gallery-img .save, .gallery-img .del{ opacity: 0.6 }
.button:hover, .toolbar a:hover, .gallery-img .save:hover, .gallery-img .del:hover{ opacity: 1 }

/* LATERAL */
#menu, #menu ul{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 11%;
	border-right: 2px solid #ccc;
	margin: 0 5px;
	padding: 10px 0 0;
	list-style: none;
	text-align: center;
	text-transform: uppercase;
	font: normal 0.6em Verdana
}
#menu img{ display: block; margin: 0 auto 10px; width: 40px; opacity: 0.6 }
#menu li{ position: relative; z-index: 10; margin: 10px 0; padding: 12px 0; border-radius: 10px }
#menu li:hover img, #menu li.active img{ opacity: 1 }
#menu li ul{ background: #f5f5f5; position: absolute; left: 0; top: 0; margin: 0; font-size: 1em; opacity: 0; border-radius: 40px }

/* PRINCIPAL */
#content{ float: right; overflow: auto; overflow-x: hidden; height: 420px; width: 85%; margin: 20px 1% 20px 0; padding-left: 1px; font-size: 0.8em }
#content a img, #content table img{ opacity: 0.6 }
#content a img:hover, #content table img:hover{ opacity: 1 }

#main{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 500px; width: 1000px; margin: auto; padding: 20px;
	background: #fff; border: 2px solid #ccc; border-radius: 10px; overflow: hidden }
#main .filtroFecha{ position: absolute; right: 20px; top: 16px }
#main .fecha_cal{ width: 80px }
#main .act_per{ padding: 2px 10px; font-size: 0.9em }

.invalido{ border: 1px solid red !important }
.obligatorio { margin: 0 0 30px 5px; color: #888 }

#content form { margin-top: 15px }
.df .df-field{ float: left; clear: both; margin: 3px 0 }
.df .label, .df .text, .df .textarea{ float: left }
.df .label{ float: left; width: 250px; margin: 14px 20px 12px 5px; text-transform: uppercase; font: normal 1em sans-serif }
.df .textarea{ height: 200px; width: 600px }
.df .textarea.simple{ height: 50px; }
.df .text{ margin: 8px 0 }
.df span{ display: inline-block; margin: 12px 0 0 }
.df .text, .df .textarea{ border: 1px solid #ccc; border-radius: 5px; height: 20px; padding: 2px 8px }
.df .df-field .social{ float: left }
.df .df-field .social *{ float: left }
.df .df-field .social input{ margin: 3px 5px }
.df .df-field .button{ height: 20px }
.df .df-field .button.cancel{ color: red}
.df .editext .cont{ float: left }

.portada{ min-height: 100px }
.portada h3{ margin-top: 0 }
.portada .date{ position: absolute; right: 0; top: 0; font-weight: 100; font-size: 1.8em }
.portada .accesed{ position: absolute; right: 0; bottom: -10px; font-size: 0.7em }

.portada .stats{
	position: relative;
	float: left;
	background: #fff;
	width: 400px;
	margin: 30px 0;
	padding: 10px 15px;
	border: 1px solid #ccc;
	font-size: 0.8em;
	border-radius: 10px
}
.portada .stats h3{
	position: absolute;
	left: 10px;
	top: -15px;
	background: #fff;
	border: 1px solid #ccc;
	padding: 3px 10px;
	font-size: 1.3em;
	border-radius: 10px
}
.portada .stats .cmp{ width: 100% }
.portada .stats h4, .portada .stats div{ float: left; width: 30%; clear: none }
.portada .stats h4{ margin: 20px 0 0; line-height: 22px; font-weight: bold }
.portada .stats div{ width: 70% }
.portada .stats th{ font-weight: normal}

/* Galerías */
.gallery-upload{ float: left; height: 100%; width: 100% }
.gallery-upload h3{ float: left; margin: 18px 15px 25px }
.gallery-upload .df{ position: relative; float: right; margin: 10px 30px }
.gallery-upload .df label{ width: auto; margin: 6px 12px; font-style: normal }
.gallery-upload .files{ position: absolute; right: 0; height: 30px }
.imagepick, .musicpick{ position: relative; cursor: pointer; background: url('../img/void.png'); float: left; height: 32px; width: 32px }
.musicpick{ height: 22px; width: 22px; margin: 1px 0 0 5px }
.gallery-img{ float: left; width: 98%; margin: 1%; font-size: 0.7em }
.gallery-img div, .gallery-img form, .gallery-img img{ float: left }
.gallery-img .img{
	cursor: move;
	position: relative;
	width: 210px;
	height: 110px;
	border: 1px dashed #ccc;
	margin: 8px 10px;
	padding: 5px;
	border-radius: 5px
}
.gallery-img .img:hover{ border: 1px dashed #aaa }
.gallery-img .miniat{ overflow: hidden; background: #eee; width: 28%; height: 45px; border: 1px solid #eee; margin: 6px 0 0 2% }
.gallery-img img{ width: 100% }
.gallery-img form{ width: 65%; padding: 1% }
.gallery-img input, .gallery-img textarea{ background: #eee; width: 95%; border: 1px solid #ddd; margin-top: 2px; padding: 2px }
.gallery-img textarea{ height: 58px }
.gallery-img .tit{ margin-top: 0 }
.gallery-img .guardar, .gallery-img .eliminar{ position: absolute; right: 38px; top: 82px; background: none; height: 22px; width: 22px; border: 0 }
.gallery-img .eliminar{ right: 13px }
.gallery-img .save, .gallery-img .del{ position: absolute; right: 14px; bottom: 14px; width: 20px }
.gallery-img .save{ right: 40px }

/* Idiomas */
.lang{ position: relative }

ul.languages{ display: none; position: absolute; right: 0; top: 0; margin: 0; padding: 0; list-style: none }
ul.languages li{ float: left; margin: 2px }
ul.languages .name{ width: 18px; height: 12px; border: 1px solid #ccc; padding: 2px; text-transform: uppercase; font-size: 0.7em; opacity: 0.6 }
ul.languages .name:hover, ul.languages .name.curr{ border: 1px solid #aaa; opacity: 1 }

.lgfield{ display: none; position: absolute; top: 0; z-index: 10; border: 1px solid gray }
.lgimg{ float: left; width: 90px }
img.lang{ margin: 0 20px; width: 30px }

.config{ font-size: 0.9em }
.config h2{ float: left; clear: both; margin: 0 0 5px; font-size: 1.3em }
.config .apart{ position: relative; float: left; width: 330px; margin: 10px 15px 0 0; border: 1px solid #ccc; padding: 8px 10px 5px; border-radius: 5px }
.config .apart i{ float: left; clear: both; margin: 10px 0; font-size: 0.8em }
.config .apart h2{ cursor: pointer }
.config .apart .slide{ cursor: pointer; position: absolute; right: 15px; top: 12px; display: none; width: 15px }

table.dataTable { width: 100% !important; overflow: hidden }
.datatable .update{ background: url('../img/update-mini.png') no-repeat right 1px; border: 0; padding-right: 18px; line-height: 1.2em; font-weight: bold }
.datatable .reorder{ width: 25px; border: 1px solid #ccc; text-align: center; font-size: 0.9em }
.dataTables_paginate, .dataTables_info { margin-top: 10px }
.dataTables_paginate span { margin: 0 10px }
.dataTables_paginate span a { font-weight: bold }
.dataTables_paginate a { cursor: pointer; margin: 0 10px; opacity: 0.8 }
.dataTables_paginate a.current { border-bottom: 1px solid #333; opacity: 1; color: #333 }

.datos-pago { text-align: center }
.datos-pago table { width: 400px; text-align: left; margin: 30px auto }
.datos-pago td { border: 1px solid #ccc; padding: 10px }
.datos-pago input { width: 150px; font-size: 1.1em; background: #F5F5F5; margin: auto; padding: 10px 10px; border-radius: 5px;
text-transform: uppercase; font-weight: bold; border: 1px solid green; cursor: pointer; opacity: 0.7 }
.datos-pago input:hover { opacity: 1 }

.tpv-message { border-radius: 5px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; padding: 30px; width: 500px; height: 230px; text-align: center }
.tpv-message.success { border: 2px dashed green; }
.tpv-message.error { border: 2px dashed red; }
.tpv-message h1 { font-size: 3em }
.tpv-message div { margin-bottom: 30px; font-size: 1.8em }
.tpv-message p { font-size: 1.4em }
.tpv-message a { color: blue }

table.dataTable tr.confirmada0 { border-left: 5px solid #fc6363 }
table.dataTable tr.confirmada1 { border-left: 5px solid #00b900 }
table.dataTable td.fecha { min-width: 80px }

@media screen and (max-width: 1500px)
{
	#mensaje_general{ width: 60% }
}

@media screen and (max-width: 1100px)
{
	#main { width: 90% }
}
@media screen and (max-width: 1000px)
{
	#mensaje_general{ width: 80% }
	
	#header .info h1{ font-size: 1.6em; line-height: 1.4em }
	#header .info .desc{ height: 15px }
	
	#header .info ul { left: 160px }
	
	table.dataTable td img{ height: 15px }
}
@media screen and (max-width: 800px)
{
	#main { height: auto; margin: 2% auto; overflow: hidden; overflow-y: auto }
	#header{ width: 100%; margin: 55px 0 0 0; z-index: 10 }
	#header .now { margin-top: -55px }
	#menu { width: 100%; height: 60px; margin: 0; border-right: 0; border-bottom: 2px solid #ccc; }
	#menu li { float: left; margin: 3px 20px; padding: 0 }
	#menu img { width: 25px; margin-bottom: 5px }
	#content { float: left; width: 99%; margin: 20px 0; height: auto; overflow: initial }
	#content form { margin-top: 0 }
	
	table.dataTable { font-size: 0.9em }
	table.dataTable td { padding: 10px }
	
	.tpv-message { width: 350px; height: 250px }
	.tpv-message h1 { font-size: 2.5em }
	.tpv-message div { font-size: 1.6em }
	.tpv-message p { font-size: 1.4em }
	
	#header .info ul { width: 400px }
	#header .info ul li { margin-right: 30px; font-size: 1.2em }
}
@media screen and (max-width: 600px)
{
	#mensaje_general{ width: 90%; font-size: 0.8em }

	#menu li { float: left; margin: 3px 12px; padding: 0 }
	#menu img { width: 20px; margin-top: 3px }
	
	#header .now { margin-top: -44px; font-size: 0.7em }
	
	#main { padding: 10px; width: 92% }
	
	.df .label { width: 100%; margin-left: 10px; font-weight: bold; font-size: 1.2em }
	.df-field .text { display: block; clear: both; padding: 6px 12px; margin-left: 10px; font-size: 1.2em }
	.df-field span { float: left; clear: both; display: block; margin: 10px 0 20px 10px; font-size: 1.2em }
			
	table.dataTable td{ padding-left: 5px; padding-right: 5px }
	.df .label { width: 200px }
}
@media screen and (max-width: 500px)
{
	#header .now { display: none }
	
	#menu img { width: 25px }
	#menu li { margin: 2px 22px; font-size: 1.1em }
	
	.info h1 { display: none }
	#mensaje_general{ width: 80%; height: 35px; padding-top: 5px; font-size: 0.8em }
	
	#content { margin-top: 70px }
	#header .now { margin-top: -55px }
	#header .now span { display: block; font-size: 1.8em }
	#header .now small { display: inline-block; margin-top: 2px }
	
	#header .info h1 { padding-right: 15px; font-size: 1.3em }
	#header .info ul { left: 0; top: 20px; width: 400px }
	
	.obligatorio { margin-top: 20px }
	
	table.dataTable { font-size: 1.2em }
	table.dataTable td { padding: 15px }
	table.dataTable .sorting_1 { font-weight: bold; color: #5c5cff }
	.dataTables_paginate span { margin: 0 5px }
	.dataTables_paginate a { margin: 0 8px }
	
	.datos-pago table { width: 300px; }
	
	.tpv-message { width: 220px; height: 300px }
}
@media screen and (max-width: 400px)
{
	#menu li { margin: 2px 12px }
	
	.datos-pago table { width: 90%; }
	
	#login { width: 220px; height: 230px; margin-left: -130px }
	#login input { width: 80%; margin: 6px 7%; padding: 10px 6px }
	#login .enviar { padding: 6px 3px }
}