/********************************************************************
*********************************************************************

	Mike Rosas (c) 2010
	mikzael[at]hotmail.com
	
	Este es un documento dentro de la visualizacion del CMS
	es la primera etapa del diseño, define la estructura, tamaños
	margenes y otras propiedades de la estructura basica.
	Los colores, imagenes y demas están contenidas en el directorio
	style.
 
*********************************************************************
********************************************************************/


	/* RESET ***********************************************************/

	/* http://meyerweb.com/eric/tools/css/reset/ 
	v2.0b1 | 201101 
	NOTE: WORK IN PROGRESS
	USE WITH CAUTION AND TEST WITH ABANDON */

	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, figcaption, figure, 
	footer, header, hgroup, menu, nav, section, summary,
	time, mark, audio, video
		{
			margin: 0;
			padding: 0;
			border: 0;
			outline: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
		}
	
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section
		{
			display: block;
		}
		
	body 
		{
			line-height: 1;
		}
		
	ol, ul 
		{
			list-style: none;
		}
		
	blockquote, q 
		{
			quotes: none;
		}
		
	blockquote:before, blockquote:after,
	q:before, q:after 
		{
			content: '';
			content: none;
		}

	/* remember to define visible focus styles! 
	:focus {
		outline: ?????;
	} */

	/* remember to highlight inserts somehow! */
	ins 
		{
			text-decoration: none;
		}
		
	del 
		{
			text-decoration: line-through;
		}

	table 
		{
			border-collapse: collapse;
			border-spacing: 0;
		}

	
	/* GENERALES *******************************************************/
	
	body
		{
			font-family: arial;
			font-size: 12px;
			line-height: 16px;
		}
		
		
	/* + GENERAL *******************************************************/


	.wrapper
		{
			width: 975px;
			margin: 0 auto;
		}
		
	

	
	/* + HEADER ********************************************************/
	
	body > header
		{
			color: #fff;
			height: 55px;
			background-color: #1c1e22;
		}
		
		body > header img
			{
				margin-top: 8px;
				float: left;
			}
		
		body > header div.social
			{
				display: block;
				float: right;
				padding-top: 3px;
			}
		
			body > header div.social img
				{
					margin-left: 5px;
				}
		
		body > header p
			{
				margin-left: 60px;
				padding-top: 20px;
			}
		
			body > header p a
				{
					color: #fff;
					text-decoration: none;
				}
		
			body > header p a:hover
				{
					color: #ff0;
					text-decoration: underline;
				}
		
	
	/* + MAIN **********************************************************/
	
	body > main
		{
			min-height: 1000px;
			display: block;
		}
		
		body > main .espacio
			{
				height: 537px;
				/*background-color: #fff;*/
			}

			
			body > main section.haudio
				{
					margin: 10px 15px 0 0;
					padding: 3px 10px 0 10px;
					background: url(images/back.png) center center repeat;
					border-left: 3px solid #000;
					position: absolute;
					top: 520px;
					width: 950px;
				}

				body > main section.haudio h1
					{
						margin: 0 0 5px 0;
						padding: 0;
						font-family: arial;
						font-size: 11px;
						line-height: 15px;
						font-weight: normal;
						color: #fff;
					}			
			
		body > main nav
			{
				height: 64px;
			}
		
			body > main nav a
				{
					line-height: 64px;
					padding: 22px 15px;
					text-decoration: none;
				}
		
	
	/* + FOOTER ********************************************************/
	
	body > footer
		{
			height: 170px;
			clear: both;
		}
	
		body > footer nav
			{
				padding-top: 30px;
				padding-bottom: 5px;
			}
		
			body > footer nav a
				{
					text-decoration: none;
					font-size: 12px;
					line-height: 22px;
					
					padding: 0 10px;
				}
				
			body > footer nav a:last-child
				{
					border-right: 0px;
				}
		
			body > footer nav a:hover
				{
					text-decoration: underline;
				}
		
			body > footer nav a span
				{
					display: none;
				}
		
		body > footer div.bottom
			{
				padding-left: 10px;
			}
	
	
	
	
	/* ESTILO PARA LAS FLECHAS AL FINAL DEL LISTADO DE NOTICIAS *********/
					
					
		section .arrows
			{
				display: block;
				margin: 0;
				padding: 20px 0;
				height: 40px;
			}
	
			section .arrows a
				{
					display: block;
					float: left;
					width: 340px;
					margin: 0;
					padding: 8px 0;
					text-align: center;
					text-decoration: none;
				}
	
			section .arrows a.back
				{
					margin: 0 30px 0 0;
				}
	
	
	
	/* + ESTILO PARA WIDGETS ***************************************/
	
	.widget
		{
			width: 25%;
			float: right;
		}
		
		.widget section#fb-recomend
			{
				height: 400px;
				margin-bottom: 20px;
			}		
	
		.widget section
			{
				padding-bottom: 10px;
				margin-bottom: 15px;
				width: 100%;
			}
			
			.widget section h2
				{
					width: 86%;
					margin: 10px 7% 10px 7%;
					padding: 10px 0;
				}				
				
			.widget section div.frame
				{
					height:660px;
					overflow: hidden;
					overflow-y: hidden;
					overflow-x: hidden;
				}
				
			.widget section div.frame:hover
				{
					overflow-y: scroll;
					overflow-x: hidden;
				}
				
			.widget section a.mas
				{
					display: block;
					margin-top: 10px;
					padding: 3px 15px;
				}
				
				
	/* WIDGET INFO ********************/
	
			.widget section.info p
				{
					margin: 0 25px 15px 25px;
				}
			
			.widget section.info p.titulo
				{
					margin-bottom: 0;
				}

				
	/* SECCION AGENDA *****************/				

				
		section#agenda article.evento
			{
				display: block;
			}
			
			section#agenda article.evento a
				{
					line-height: 20px;
					display: block;
					padding: 7px 25px;
				}
				
				section#agenda article.evento a time
					{
						display: block;
					}

				section#agenda article.evento a span
					{
						display: block;
					}

				section#agenda article.evento a span.video
					{
						margin:0;
						padding:0;
						display:block;
						width: 178px;
						height: 100px;
					}					

	
	/* SECCION ENLACES ****************/				

	
		section#enlaces .enlace a
			{
				line-height: 20px;
				display: block;
				padding: 7px 25px;
			}

		section#enlaces .enlace a span
			{
				display: block;
			}

	
	/* SECCION NOTICIAS ***************/				

	
		section#noticias article h1
			{
				margin-left: 85px;
			}
		
		section#noticias article a
			{
				line-height: 20px;
				display: block;
				padding: 7px 25px;
			}
		
		section#noticias article a img
			{
				float: left;
				margin: 5px 5px 0 0;
			}

		section#noticias article a span
			{
				display: block;
			}
		
	
	/* SECCION LANZAMIENTOS ***********/
	
	
		section#lanzamientos article
			{
				display: block;
				padding: 5px 10px;
			}

			section#lanzamientos article span
				{
					display: block;
					float: left;
					height: 68px;
					width: 68px;

					-webkit-border-radius: 7px;
					-moz-border-radius: 7px;
					border-radius: 7px;
					
					margin-right: 5px;					
				}

				section#lanzamientos article span img
					{
						-webkit-border-radius: 4px;
						-moz-border-radius: 4px;
						border-radius: 4px;
					}

			section#lanzamientos article h1
				{
					margin-left: 75px;
				}

			section#lanzamientos article p
				{
					margin-bottom: 5px;
					line-height: 16px;
					margin-left: 76px;
				} 

			section#lanzamientos article a
				{
					padding: 2px 5px;
					
					-webkit-border-radius: 4px;
					-moz-border-radius: 4px;
					border-radius: 4px;					
				}

		
	
	
	/* SECCION GALERIAS ***************/
	
				
		section#galerias .enlace a
			{
				line-height: 20px;
				display: block;
				padding: 7px 25px;
			}

		section#galerias .enlace a span
			{
				display: block;
			}

	
	/* SECCION VIDEOS *****************/
	
				
		section#videos .enlace a
			{
				line-height: 20px;
				display: block;
				padding: 7px 25px;
			}

		section#videos .enlace a span
			{
				display: block;
			}

	
	/* SECCION AUDIOS *****************/
	
				
		section#audios .enlace a
			{
				display: block;
				margin: 0 0 10px 0;
				padding: 5px 0;
			}

		section#audios .enlace a span.iconsweets
			{
				display: block;
				float: left;
				width: 10%;
				margin-left: 20px;
			}

		section#audios .enlace a span.titulo
			{
				line-height: 20px;
				display: block;
				margin-left: 45px;
				margin-right: 15px;
			}

	
	
	
	
	
	
	
	
	
	
	
	
	/* + NOTIFICACIONES ************************************************/
			
	div.notice
		{
			background-color: #fff;
			padding: 10px 10px 0 10px;
		}
		
		div.notice p
			{
				text-align: center;
				padding: 5px;
			}
		
		div.notice p.ok
			{
				background-color: #cfc;
				color: #060;
			}
		
		div.notice p.fail
			{
				background-color: #fcc;
				color: #600;
			}	
	
	
	.iconsweets
		{
			font-family: 'IconSweets';
		}
		


			
			
/********* etiquetas basicas del tooltip ***********************************/

	#tooltip
		{
			display: block;
		}	
		
			
		#tooltip .tip
			{
				background: url(../../../data/tooltip-arrow.png) 15px 0px no-repeat;
				height: 10px;
				marign: 0;
			}	
			
				
		#tooltip .msj
			{
				background: url(../../../data/back_darker.png) center center repeat;
				color: #fff;
				font-size: 12px;
				padding: 10px;
				marign: 0;
				line-height: 20px;
				
				-webkit-border-radius: 10px;
				-moz-border-radius: 10px;
				border-radius: 10px;		
			}	
		
/******** FORMULARIO *********/

			.form-cont {
			  padding: 30px 0 0 8px;
			  width: 410px;
			}

			.form-cont .form {
			  margin: auto;
			  width: 100%;
			}

			.form-cont .form div {
			  -webkit-box-align: center;
			  -webkit-align-items: center;
			      -ms-flex-align: center;
			          align-items: center;
			  display: -webkit-box;
			  display: -webkit-flex;
			  display: -ms-flexbox;
			  display: flex;
			  -webkit-box-orient: horizontal;
			  -webkit-box-direction: normal;
			  -webkit-flex-direction: row;
			      -ms-flex-direction: row;
			          flex-direction: row;
			  -webkit-flex-wrap: nowrap;
			      -ms-flex-wrap: nowrap;
			          flex-wrap: nowrap;
			  -webkit-box-pack: center;
			  -webkit-justify-content: center;
			      -ms-flex-pack: center;
			          justify-content: center;
			}

			.form-cont .form .input-g {
			  position: relative;
			}

			.form-cont .form .input-g input[type="text"],
			input[type="email"],
			input[type="password"] {
			  background: #ccc;
			  border: none;
			  border-bottom: 3px solid #999;
			  font-size: 14px;
			  outline: none;
			  padding: 10px;
			  width: 250px;
			}

			.form-cont .form .input-g input[type="text"]:focus,
			input[type="email"]:focus,
			input[type="password"]:focus {
			  background: #ddd;
			}

			.form-cont .form .input-g input[type="text"]:active,
			input[type="email"]:active,
			input[type="password"]:active {
			  background: #ddd;
			}

			.form-cont .form .input-g label {
			  background: #7e7d7d;
			  padding: 7px;
			}

			.form-cont .form .input-g label img {
			  width: 21px;
			}

			.form-cont .form input[type="submit"] {
			  background: #f48120;
			  border: none;
			  border-bottom: 3px solid #cd6b18;
			  color: #fff;
			  cursor: pointer;
			  display: inline-block;
			  font-size: 14px;
			  padding: 10px;
			  width: 100px;
			}

			.form-cont .form input[type="submit"]:hover {
			  background: #ffa100;
			}

			.form-cont .form input[type="submit"]:active {
			  background: #ffa100;
			}
						
			
	div.bottom a
		{
			color: #fff;
			background: #f48120; 
			text-decoration: none;
			text-align: center;
			line-height: 80px;
			padding: 10px;
		}
			
	
/********* Fuentes *************************************************/
	
	@font-face {
		font-family: 'IconSweets';
		src: url('fonts/iconsweets.eot');
		src: local('?'), url('fonts/iconsweets.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}
	
	@font-face {
		font-family: 'futura';
		src: url('fonts/futura.eot');
		src: local('?'), url('fonts/futura.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
		font-family: 'Helv37';
		src: url('fonts/helv37.eot');
		src: local('?'), url('fonts/helv37.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
		font-family: 'an';
		src: url('fonts/an.eot');
		src: local('?'), url('fonts/an.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}