/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
img { vertical-align: middle }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html {
	min-height: 100%
}
body {
	line-height: 1;
	font-size: 62.5%;
	font-family: 'Open Sans', 'sans-serif';
	color: #2b2b2b;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#f2f2f2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
	min-height: 100%
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
b, strong {
	font-weight: bold;
}
i, em {
	font-style: italic
}
small {
	font-size: 0.85em
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.clear {
	display: block;
	clear: both;
}
a {
	font-weight: 600;
	text-decoration: none
}
/* MENU */
#menu {
	background-color: white;
	box-shadow: 0 0 1em rgba(0,0,0,0.1);
	padding: 0 1.2em;
}

#menu > ul > li {
	display: block;
	float: left;
	position: relative;
}

	#menu > ul:after {
		content: "";
		display: block;
		clear: both;
	}

	#menu > ul > li.logout {
		float: right
	}

	#menu > ul > li > a {
		display: block;
		padding: 0.9em;
		font-size: 1.4em;
		text-decoration: none;
		font-weight: 600;
		color: #333;
		position: relative;
		z-index: 2
	}
	
		#menu > ul > li a:hover,
		#menu > ul > li:hover > a,
		#menu > ul > li.active > a {
			background-color: #333;
			color: white !important
		}
	
	#menu > ul > li.logout > a {
		background-color: transparent;
		color: #a90329 !important
	}
	
		#menu > ul > li.logout > a:before {
			content: "\f08b";
			margin-right: 0.5em;
			font-family: FontAwesome
		}

/* SUBMENU */
#menu ul ul {
	display: none
}

	#menu ul li:hover ul {
		display: block;
		position: absolute;
		box-shadow: 0 0.15em 1em rgba(0,0,0,0.3);
		background-color: #333;
		min-width: 20em;
		z-index: 1;
		padding: 1em 0;
		border-radius: 0 0 0.5em 0.5em
	}
	
		#menu ul li ul li a {
			display: block;
			color: #fff;
			font-size: 1.3em;
			padding: 0.4em 1.5em 0.4em 2em;
			text-decoration: none
		}
		
			#menu ul li ul li a:hover {
				background-color: white;
				color: #333 !important
			}
			
			#menu ul li ul li.active a:before {
				content: "\f00c";
				margin-right: 0.5em;
				font-family: FontAwesome;
				font-size: 0.8em;
				position: absolute;
				margin-left: -1.5em;
				margin-top: 0.1em;
			}
		
/* MAIN */
#main {
	padding: 2em;
}

	#main h1,
	#main h2 {
		font-size: 4.5em;
		color: #333;
		font-style: italic;
		margin-left: 0.1em;
	}	
	
	#main h2 {
		font-size: 3em;
		margin: 0 0 0.5em 0
	}
	
	#main a {
		color: #333;
	}
	
	#main a:hover {
		color: #a90329 !important
	}
	
/* LISTING */
#main menu {
	position: absolute;
	right: 2.5em;
	margin-top: -1.5em;
	font-size: 1.1em;
}

	#main menu li {
		float: left;
		margin-left: 2em
	}

	#main menu a {
		text-decoration: none;
	}
	
	#main menu a.download:before,
	#main menu a.new:before,
	#main menu a.sort:before,
	#main menu a.back:before {
		content: "\f067";
		font-family: FontAwesome;
		margin-right: 0.5em
	}

	#main menu a.download:before {
		content: "\f019";
	}
	
	#main menu a.sort:before {
		content: "\f074"
	}
	
	#main menu a.back:before {
		content: "\f104"
	}	
#main table.listing,
#main .fauxTableHeader {
	width: 100%;
	margin-top: 2em
}

	#main table.listing th,
	#main .fauxTableHeader li {
		background-color: #333;
		padding: 0.4em 1em;
		font-size: 1.2em;
		color: white;
		text-align: left;
		vertical-align: middle;
		line-height: 1.5em
	}
	
	#main table.listing tr:first-child th:first-child,
	#main .fauxTableHeader li:first-child {
		border-top-left-radius: 0.3em
	}
	
	#main table.listing th:last-child,
	#main .fauxTableHeader li:first-child {
		border-top-right-radius: 0.3em
	}
	
	#main table.listing td,
	#main .fauxTableContent span {
		padding: 0.8em 1em;
		font-size: 1.2em;
		background-color: white;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	#main table.listing tr:nth-child(even) td,
	#main .fauxTableContent .row.alt {
		background-color: #f5f5f5
	}
	
	#main table.listing tr:hover td,
	#main .ui-sortable .row:hover {
		background-color: #fcffdc;		
	}
	
	#main .fauxTableContent .row {
		background-color: white
	}
	
	#main .fauxTableContent .row:after {
		content: "";
		clear: both;
		display: block
	}	
	
	#main .fauxTableContent span {
		float: left;
		background-color: transparent;
	}
	
	#main .fauxTableContent .actions {
		float: right;
	}
	
	#main .ui-sortable .row:hover {
		cursor: move
	}
	
	/* SORTABLE FIELDS */
	#main table.listing th.sort {
		cursor: pointer
	}
	
	#main table.listing th.sort.ASC:after,
	#main table.listing th.sort.DESC:after {
		font-family: FontAwesome;
		content: "\f0d8";
		display: inline-block;
		margin-left: 0.5em
	}
	
	#main table.listing th.sort.DESC:after {
		content: "\f0d7"
	}
	
	/* SEARCHABLE FIELDS */
	#main table.listing tr.search td {
		padding: 0.2em;
	}
	
		#main table.listing tr.search td:last-child {
			padding-left: 1em
		}
	
		#main table.listing tr.search td input,
		#main table.listing tr.search td select {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			width: 100%;
		}
		
		#main table.listing tr.search td button {
			width: auto;
			border: 0 none;
			background-color: transparent;
			background-image: none;
			padding: 0;
			outline: none
		}
		
		#main table.listing tr.search td button:before {
			font-family: FontAwesome;
			display: inline-block;
			margin-right: 0.5em;
			content: "\f002"
		}
	
	/* SPECIAL FIELDS */
	#main table.listing .thumbnail {
		width: 5.3em;
		padding: 0
	}
	
	#main table.listing .action {
		width: 1.3em;
		white-space: nowrap;
	}
	
		.action a,
		.action span,
		#main table.listing tr.search td button  {
			display: block;
			font-family: FontAwesome;
			color: black;
			text-decoration: none;
			font-size: 0.9em;
			font-weight: normal
		}
		
		#main .action a:hover,
		#main table.listing tr.search td button:hover {
			color: #008021 !important
		}
		
		#main .action a.delete:hover {
			color: #a90329 !important
		}
		
		.action a:before {
			margin-right: 0.5em;
		}
		
		.action a.edit:before {
			content: "\f040";
		}
		
		.action a.delete:before {
			content: "\f014";
		}
		
		.action a.envelope:before {
			content: "\f0e0";
		}
		
		.action a.inbox:before {
			content: "\f01c";
		}
		
		.action a.book:before {
			content: "\f02d";
		}
		
		.action a.news:before {
			content: "\f0a1";
		}
		
		.action a.facebook:before {
			content: "\f09a"
		}
		
		#main .action a.facebook:hover {
			color: #3b5999 !important;
		}
		
		.action a.twitter:before {
			content: "\f099"
		}
		
		#main .action a.twitter:hover {
			color: #0072b1 !important;
		}
		
		.action a.googleplus:before {
			content: "\f0d5"
		}
		
		#main .action a.googleplus:hover {
			color: #cd3625 !important;
		}
		
		.action a.linkedin:before {
			content: "\f0e1"
		}
		
		#main .action a.linkedin:hover {
			color: #0171b0 !important;
		}
		
	/* PAGINATION */
	ul.pagination {
		display: block;
		margin: 2em 0;
		text-align: center;
		font-size: 1.1em;
	}
	
		ul.pagination li {
			list-style-type: none;
			display: inline;
			padding: 0 1em;
		}
		
		ul.pagination li input {
			width: 2em;
			text-align: center
		}
		
/* FORMS */
form.login {
	max-width: 25em;
	margin: 0 auto
}

fieldset {
	padding: 2em 0;
}

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

	fieldset label {
		display: block;
		font-size: 1.3em;
		margin-bottom: 1em;
	}
	
		fieldset label.required:before {
			content: "*";
			margin-right: 0.6em;
			color: #c83a43;
		}
		
		fieldset label.alertRequired:after {
			content: "* obligatorio";
			display: block;
			font-size: 0.86em;
			margin-top: 0.5em;
			color: #b24c4c;
		}
		
			fieldset label.alertRequired input,
			fieldset label.alertRequired select,
			fieldset label.alertRequired textarea {
				border-color: #b24c4c
			}

		fieldset .one {
			width: 6%;
			margin-right: 2.5%;
			float: left
		}
		
		fieldset .oneandhalf {
			width: 10%;
			margin-right: 2.5%;
			float: left
		}
		
		fieldset .two {
			width: 14.55%;
			margin-right: 2.5%;
			float: left
		}
		
		fieldset .three {
			width: 23.1%;
			margin-right: 2.5%;
			float: left
		}

		fieldset .four {
			width: 31.6%;
			margin-right: 2.5%;
			float: left
		}
		
		fieldset .six {
			width: 48.75%;
			margin-right: 2.5%;
			float: left
		}
				
		fieldset .eleven {
			width: 91%;
			margin-right: 2.5%;
			float: left
		}
		
		fieldset .row > *:last-child {
			margin-right: 0;
		}
		
	fieldset input,
	fieldset textarea,
	fieldset select {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-family: inherit;
		display: block;
		margin-top: 0.5em;
		font-size: 1em;
		padding: 0.5em;
		width: 100%;
		border: 1px solid #CCC;
		height: 2.5em;
		background-color: white;
		border-radius: 0.3em;
		box-shadow: inset 0.1em 0.1em 0.3em rgba(0,0,0,0.1)
	}
	
	fieldset .cke { /* ckeditor */
		margin-top: 0.5em
	}
	
	fieldset textarea {
		height: auto
	}
	
	fieldset input[type=checkbox],
	fieldset input[type=radio] {
		width: auto;
		display: inline-block;
		margin-right: 0.5em;
		height: auto;
		padding: 0
	}

	fieldset .buttons {
		margin-top: 2em;
		text-align: center
	}
	
		button {
			display: inline-block;
			width: auto;
			font-size: 1.3em;
			border: 0 none;
			padding: 0.5em 1em;
			cursor: pointer;
			font-family: inherit;
			border-radius: 0.3em;
			border: 1px solid #ccc;
			background: #e8e8e8; /* Old browsers */
			background: -moz-linear-gradient(top, #e8e8e8 0%, #cccccc 99%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8e8e8), color-stop(99%,#cccccc)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, #e8e8e8 0%,#cccccc 99%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, #e8e8e8 0%,#cccccc 99%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top, #e8e8e8 0%,#cccccc 99%); /* IE10+ */
			background: linear-gradient(to bottom, #e8e8e8 0%,#cccccc 99%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
			color: #444
		}
		
			button:hover {
				background: -moz-linear-gradient(top, #e8e8e8 0%, #bbb 99%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8e8e8), color-stop(99%,#bbb)); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top, #e8e8e8 0%,#bbb 99%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top, #e8e8e8 0%,#bbb 99%); /* Opera 11.10+ */
				background: -ms-linear-gradient(top, #e8e8e8 0%,#bbb 99%); /* IE10+ */
				background: linear-gradient(to bottom, #e8e8e8 0%,#bbb 99%); /* W3C */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#bbb',GradientType=0 ); /* IE6-9 */
			}
		
			button.small {
				font-size: 0.85em;
				padding: 0.2em 0.6em;
			}
		
			button.cancel {
				background: #a84157; /* Old browsers */
				background: -moz-linear-gradient(top, #a84157 0%, #a90329 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a84157), color-stop(100%,#a90329)); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top, #a84157 0%,#a90329 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top, #a84157 0%,#a90329 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(top, #a84157 0%,#a90329 100%); /* IE10+ */
				background: linear-gradient(to bottom, #a84157 0%,#a90329 100%); /* W3C */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a84157', endColorstr='#a90329',GradientType=0 ); /* IE6-9 */
				border-color: #a90329;
				color: #fff;
			}


				button.cancel:hover {
					background: -moz-linear-gradient(top, #a84157 0%, #8d0b2a 100%); /* FF3.6+ */
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a84157), color-stop(100%,#8d0b2a)); /* Chrome,Safari4+ */
					background: -webkit-linear-gradient(top, #a84157 0%,#8d0b2a 100%); /* Chrome10+,Safari5.1+ */
					background: -o-linear-gradient(top, #a84157 0%,#8d0b2a 100%); /* Opera 11.10+ */
					background: -ms-linear-gradient(top, #a84157 0%,#8d0b2a 100%); /* IE10+ */
					background: linear-gradient(to bottom, #a84157 0%,#8d0b2a 100%); /* W3C */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a84157', endColorstr='#8d0b2a',GradientType=0 ); /* IE6-9 */
				}
			
			button.ok {
				background: #41892d; /* Old browsers */
				background: -moz-linear-gradient(top, #41892d 0%, #157200 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#41892d), color-stop(100%,#157200)); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top, #41892d 0%,#157200 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top, #41892d 0%,#157200 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(top, #41892d 0%,#157200 100%); /* IE10+ */
				background: linear-gradient(to bottom, #41892d 0%,#157200 100%); /* W3C */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41892d', endColorstr='#157200',GradientType=0 ); /* IE6-9 */
				border-color: #157200;
				color: #fff;
				font-weight: 600
			}
	
				button.ok:hover {
					background: -moz-linear-gradient(top, #41892d 0%, #115502 100%); /* FF3.6+ */
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#41892d), color-stop(100%,#115502)); /* Chrome,Safari4+ */
					background: -webkit-linear-gradient(top, #41892d 0%,#115502 100%); /* Chrome10+,Safari5.1+ */
					background: -o-linear-gradient(top, #41892d 0%,#115502 100%); /* Opera 11.10+ */
					background: -ms-linear-gradient(top, #41892d 0%,#115502 100%); /* IE10+ */
					background: linear-gradient(to bottom, #41892d 0%,#115502 100%); /* W3C */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41892d', endColorstr='#115502',GradientType=0 ); /* IE6-9 */
				}
	
	fieldset .file {
		margin-bottom: 1em
	}
			
		fieldset .file:after {
			clear: both;
			content: "";
			display: block
		}
	
		fieldset .file small {
			float: right
		}
	
		fieldset .file img {
			float: left;
			margin-right: 1em;
			margin-bottom: 1em
		}
		
		fieldset .file .upload {
			float: left;
			font-size: 1.2em
		}
		
		fieldset .file .upload label {
			font-size: 1em;
			margin-bottom: 0
		}
		
		fieldset .file .upload input {
			font-size: 0.9em;
			height: auto
		}
		
		fieldset .file .upload .action {
			margin-top: 2em
		}
		
		fieldset .file .upload .action a {
			margin-top: 0.5em
		}
		
	fieldset p {
		font-size: 1.2em;
		line-height: 1.4em;
		margin-bottom: 1em;
	}

	fieldset p.loading {
		color: #999;
		font-size: 1.3em
	}
	
		fieldset p.loading:before {
			width: 1.3em;
			height: 1.3em;
			position: relative;
			top: 0.15em;
			margin-right: 0.5em;
			background-image: url(../images/loading.gif);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: inline-block;
			content: ""
		}

	/* autocomplete popup */
	fieldset label ul {
		position: absolute;
		list-style-type: none;
		max-height: 15em;
		overflow: auto;
		border: 1px solid #ccc;
		margin: 0;
		width: 100%;
		z-index: 1000
	}
	
		fieldset label ul li:first-child {
			border-top: 0 none;
		}
	
		fieldset label ul li {
			list-style-type: none;
			background-color: white;
			border-bottom: 1px solid #ccc;
			padding: 0.4em;
			font-size: 0.85em;
			cursor: pointer
		}
		
		fieldset label ul li:hover {
			background-color: #eaeaea
		}
		
		fieldset label ul li.new {
			background-color: #dff0d8;
			text-transform: uppercase;
			color: #5f944a;
		}
			
			fieldset label ul li.new:before {
				content: "\f055";
				font-family: FontAwesome;
				margin: 0 0.5em;
			}
		
		
/* ALERTS */
#alert {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 1000
}

	#alert p {
		position: absolute;
		top: 20%;
		left: 50%;
		width: 50%;
		margin-left: -25%;
		border-radius: 0.3em;
		font-size: 1.3em;
		padding: 1em;
		background-color: #dff0d8;
		box-shadow: 0.3em 0.3em 1em rgba(0,0,0,0.5);
		text-align: center;
		cursor: pointer
	}
	
	#alert p:before {
		font-family: FontAwesome;
		content: "\f00c";
		font-weight: bold;
		color: #5f944a;
		margin-right: 0.5em;
	}
	
	#alert.error p {
		background-color: #f2dede;
		color: #b24c4c
	}
	
	#alert.error p:before {
		content: "\f00d";
		color: #b24c4c
	}
		
@media (max-width:599px) {
	fieldset .one,
	fieldset .three,
	fieldset .four,
	fieldset .six,
	fieldset .eleven {
		margin-right: 0 !important;
		width: 100% !important
	}	
	
	#main menu {
		position: static;
		margin: 1em 0 0 0
	}
}

/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }

/* SITE SPECIFIC */
fieldset button.new {
	margin-bottom: 1.5em;
	font-size: 1.5em;
}

#newautor:after,
#canales:after {
	content: "";
	clear: both;
	display: block
}

	#newautor .four,
	#newautor .row.autor,
	#canales .four,
	#canales .row.autor {
		position: relative;	
	}
	
	#newautor .three:nth-child(4n),
	#canales .three:nth-child(4n) {
		margin-right: 0;
	}
	
	#newautor .row.autor,
	#canales .row.autor {
		padding-left: 4em;
		margin-left: 2.5%
	}
	
	#newautor .cancel,
	#canales .cancel {
		position: absolute;
		bottom: 0.8em;
		left: -2.5%
	}

#fotos .four {
	margin-bottom: 1em;
	cursor: move
}
	
	#fotos .four:nth-child(3n) {
		margin-right: 0
	}
	
	#fotos .four img {
		float: left;
		margin-right: 1em;
	}
	
	#fotos .four p.action {
		font-size: 1.2em
	}
	
	#fotos .four p.action a {
		margin-top: 1em;
	}

/* CONFIGURACION */
.horizontal .field {
	margin-bottom: 1.5em;
}

.horizontal .field:after {
	content: "";
	display: block;
	clear: both;
}

.horizontal .field label {
	width: 50%;
	text-align: right;
	vertical-align: middle;
	display: inline-block;
	margin: 0 1em 0 0;
	line-height: 2em;
}

.horizontal .field input,
.horizontal .field select {
	width: auto;
	display: inline-block;
	vertical-align: middle;
	font-size: 1.3em;
	margin: 0;
}