/* CSS Document */

		/* Estilos generales de la página*/
		*{
			margin:0;
			padding:0;
		}
		img{
			border:none;
		}
		body {
			font: 12px "Trebuchet", Arial, sans-serif;
			overflow:hidden;/*Needed to eliminate scrollbars*/
			background:#FFF;
		}
		
		/*Estilos para la barra lateral de contenido*/
		#contentwrap{
			margin:0px auto;
			height:100%;
			width:230px;
			z-index: 4;
			background: url(../img/fondo_banda.png);
			border-top:0px;
			border-bottom:0px;
			position:absolute;
			text-align:left;
		}
		#content{
			margin:0px auto;
			height:100%;
			width:230px;
			z-index: 6;
			background: transparent;
			border-top:0px;
			border-bottom:0px;
			position:absolute;
			text-align:left;
		}
		
		#content a{
			padding-bottom:3px;
			margin-left:37px;
			color:#49ADFE;
			text-decoration: none;
		}
		#content a:hover{
			text-decoration: none;
			color:#222;
		}
		
		#content a .seleccionado{
			padding-bottom:3px;
			margin-left:37px;
			color:#49ADFE;
			text-decoration: none;
			font-weight: bold;
		}

		#content .logo{
			margin-top:37px;
			margin-left:37px;
			width:190px;
			height:56px;
			background: url(../img/logo_goki.png) no-repeat;
		}
		
		#content .proyecto{
			margin-left:37px;
			height:auto;
			width:185px;
			color:#222;			
		}
		#content .proyecto a{
			margin-left:0px;
			color:#222;
			text-decoration: none;
			line-height:18px;
		}
		
		#content .proyecto a:hover{
			margin-left:0px;
			text-decoration: none;
			color:#218AB8;
		}
		#content .proyecto a img{
			margin-left:-16px;
		}
		
		/*estilo de los botones fijos de secciones: blog, contacto, facebook, etc... */
		#content .botonesgoki {
			z-index: 20;
			margin-bottom: 10px;
		}
		#content .botonesgoki a{
			font: 12px "Trebuchet", Arial, sans-serif;
			text-decoration: none;
			color:#222;
			font-weight:bold;
		}
		#content .botonesgoki a:hover{
			text-decoration: none;
			color:#218AB8;
		}
		
		/*Estilo de los botones de redes sociales*/
		#content .socialmedia {
			position: relative;
			height: 30px;
			width:180px;
			margin-left: 35px;
			padding-top: 5px;
			}
			
			.botonSocial_1 {
				position: relative;
				float: left;
				margin-right: 7px;
				height: 25px;
				width: auto;
				padding-top: 5px;
				}
				
			.botonSocial_2 {
				position: relative;
				float: left;
				margin-right: 7px;
				height: 25px;
				width: auto;
				padding-top: 5px;
				}
				
			.botonSocial_3 {
				position: relative;
				float: left;
				margin-right: 7px;
				height: 25px;
				width: auto;
				padding-top: 5px;
				}
				
			.botonSocial_4 {
				position: relative;
				float: left;
				margin-right: 7px;
				height: 25px;
				width: auto;
				padding-top: 5px;
				}
				
			.botonSocial_5 {
				position: relative;
				float: left;
				margin-right: 7px;
				height: 25px;
				width: auto;
				padding-top: 5px;
				}

			#content .socialmedia a.botonSocial_1 {
				position: relative;
				width: auto;
				height: 25px;
				margin-left: 0px;
				background: url(../img/facebook_icon.png) no-repeat;
				padding-bottom: 8px;
				margin-top: 0px;
				padding-top: 0px;
			}
			
			#content .socialmedia a:hover.botonSocial_1 {
				position: relative;
				width: auto;
				height: 25px;
				margin-left: 0px;
				background: url(../img/facebook_icon_hover.png) no-repeat;
				padding-bottom: 8px;
				margin-top: 0px;
				padding-top: 0px;
			}
			
			#content .socialmedia a.botonSocial_2 {
				position: relative;
				width: auto;
				height: 25px;
				margin-left: 0px;
				background: url(../img/twitter_icon.png) no-repeat;
				padding-bottom: 8px;
			}
			
			#content .socialmedia a:hover.botonSocial_2 {
				position: relative;
				width: auto;
				height: 25px;
				margin-left: 0px;
				background: url(../img/twitter_icon_hover.png) no-repeat;
				padding-bottom: 8px;
			}

			#content .socialmedia a.botonSocial_3 {
				position: relative;
				width: auto;
				height: 25px;
				margin-left: 0px;
				background: url(../img/wordpress_icon.png) no-repeat;
				padding-bottom: 8px;
			}
			
			#content .socialmedia a:hover.botonSocial_3 {
				position: relative;
				width: auto;
				height: 25px;
				margin-left: 0px;
				background: url(../img/wordpress_icon_hover.png) no-repeat;
				padding-bottom: 8px;
			}

			#content .socialmedia a.botonSocial_4 {
				position: relative;
				width: auto;
				height: 25px;
				margin-left: 0px;
				background: url(../img/flickr_icon.png) no-repeat;
				padding-bottom: 8px;
			}
			
			#content .socialmedia a:hover.botonSocial_4 {
				position: relative;
				width: auto;
				height: 25px;
				margin-left: 0px;
				background: url(../img/flickr_icon_hover.png) no-repeat;
				padding-bottom: 8px;
			}

			#content .socialmedia a.botonSocial_5 {
				position: relative;
				width: auto;
				height: 25px;
				margin-left: 0px;
				background: url(../img/spotify_icon.png) no-repeat;
				padding-bottom: 8px;
			}
			
			#content .socialmedia a:hover.botonSocial_5 {
				position: relative;
				width: auto;
				height: 25px;
				margin-left: 0px;
				background: url(../img/spotify_icon_hover.png) no-repeat;
				padding-bottom: 8px;
			}

		/*Estilo de Papervision*/
		div.papervision {
			position: relative;
			height: 137px;
			width:137px;
			margin-left: 35px;
			margin-top:20px;
			padding-top: 10px;
			}
			
		.papervision a {
			position: relative;
			height: 137px;
			width:137px;
			margin: 0px;
			padding: 0px;
			margin-left: 0px !important;
			}
			
		/*estilos para el cuerpo fijo de la sección EL ESTUDIO y CONTACTO*/
		#contenidofijo {
			margin:0px auto;
			height:100%;
			width:667px;
			z-index: 5;
			padding-left:37px;
			margin-top: 124px;
			border-top:0px;
			border-bottom:0px;
			margin-left:230px;
			position:absolute;
			text-align:left;			
		}
		#contenidofijo img.principal{
			float:left;
			border:none;
			margin-bottom:37px;
			margin-right:37px;
		}
		#contenidofijo .googlemap {
			float:left;
			border:none;
			margin-bottom:37px;
			margin-right:37px;
		}
		#contenidofijo p.cuerpotexto{
			float:left;
			width:200px;
			font: 11px "Trebuchet", Arial, sans-serif;
			color:#222;
			margin-bottom:10px;
		}
		#contenidofijo p.contacto{
			float:left;
			width:200px;
			font: 11px "Trebuchet", Arial, sans-serif;
			color:#222;
			margin-bottom:10px;
			border-bottom:1px solid #CCC;
			padding-bottom: 4px;
		}
		#contenidofijo p a{
			text-decoration: none;
			color:#222;
			font-weight:bold;
		}
		#contenidofijo p a:hover{
			color:#49ADFE;
			text-decoration: none;
			font-weight:bold;
		}
		
		/* Pie inferior */
		#pie{
			margin:0px auto;
			height:120px;
			width:100%;
			bottom:0%;
			z-index: 5;
			position:absolute;
		}
		/* Datos de contacto de la parte inferior */
		.datoscontacto{
			height:40px;
			width:193px;
			font: 11px "Trebuchet", Arial, sans-serif;
			padding-top:20px;
			margin-left: 37px;
			color:#222;
			float:left;
			position:relative;
		}
		.datoscontacto a{
			color:#222;
			text-decoration:none;
		}
		.datoscontacto a:hover{
			text-decoration: none;
			color:#218AB8;
		}
		
		/* Contenedor de la información que se muestra de la imagen activa*/
		#contentframe{
			float:left;
			height:auto;
			width:300px;
			margin-left:37px;
			text-align:left;
			z-index: 3;
			position:relative;
		}
		#titulo{
			width:300px;
			height:16px;
			float:left;
			color:#222;
			font:14px "Trebuchet", Arial, sans-serif;
			font-weight:bold;
			cursor:pointer;
			margin-top:8px;
			padding-top:8px;
			padding-bottom:6px;
			background-image: url(../img/fondo_banda.png);
		}

		#titulo .textotitulo{
			height:14px;
			width:auto;
			vertical-align:top;
		}
		
		#titulo .textotitulo .ayuda{
			font:9px "Trebuchet", Arial, sans-serif;
			height:14px;
			color:#218AB8;
		}

		#titulo img{
			margin-top:0px;
		}
		#infoproyecto{
			float:left;
			width:300px;
			height:auto;
			padding-bottom:8px;
			background-image: url(../img/fondo_banda.png);
		}
		#subtitulo{
			width:255px;
			height:auto;
			float:left;
			color:#222;
			margin-top:-5px;
			font:11px "Trebuchet", Arial, sans-serif;
			font-weight:bold;
			margin-left:28px;
		}
		#descripcion{
			width:255px;
			height:auto;
			float:left;
			color:#222;
			font:11px "Trebuchet", Arial, sans-serif;
			margin-left:28px;
		}
		#website{
			float:left;
			height:auto;
			width:255px;
			font:11px "Trebuchet", Arial, sans-serif;
			margin-left:28px;
		}
		#website a{
			height:auto;
			background: url(../img/blank_ico.png) no-repeat right;
			text-decoration: none;
			color:#666;
			padding-right:12px;
		}
		#website a:hover{
			height:auto;
			background: url(../img/blank_ico.png) no-repeat right;
			text-decoration: none;
			color:#218AB8;
			padding-right:12px;
		}

		/* Contenedor de elementos de navegación */
		#navigation{
			padding-top:70px;
			float:right;
			height:30px;
			width:210px;
			color:#222;
			position:relative;
			right:40px;
		}
		#navigation img{
			float:right;
		}
		
		#contadorFotos{
			position:relative;
			float:left;
			width:60px;
			height:24px;
			line-height:24px;
			vertical-align:middle;
			margin-right:0px;
			color:#222;
			background:url(../img/cursores.png) no-repeat top left;
			padding-left: 110px;
		}
		.slidenumber {
			font-size:16px;
			font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
			font-weight:bold;
		}
		.totalslides {
			font-size:16px;
			font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
			font-weight:bold;
		}

		#loading {
			position: absolute;
			top: 49%; 
			left: 49%;
			z-index: 3;
			width: 30px; 
			height: 30px;
			padding:0px;
			font-size:11px;
			font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
			text-align:center;
			vertical-align:middle;
			background-image: url(../img/cargando.gif);
		}

		/*elementos de la clase galería*/
		#galeria{
			position:fixed;
		}

		#galeria img, #galeria .diapo{
			height:100%;
			width:100%;
			position:absolute;
			z-index: 0;
		}
		
		#galeria .prevslide, #galeria .prevslide img{
			z-index: 1;
		}
		
		#galeria .activeslide, #galeria .activeslide img{
			z-index: 2;
		}
		
		
/**Info Relevante**/

.infoRelevante {
	position: absolute;
	width: 85px;
	height: 372px;
	background: transparent;
	top: 15px;
	right: 20px;
	z-index: 5;
	}
	
/**Info Panorama**/

.panorama {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/panorama_fondo.png);
	z-index: 100 !important;
	overflow:scroll;
	}
	
.panorama-caja {
	position: absolute;
	width: 280px;
	height: 612px;
	margin-top: 50px;
	left: 50%;
	margin-left: -140px;
	}
	
	.panorama-caja p.titulo {
		font: Arial, Helvetica, sans-serif;
		font-size: 16px;
		color: #FFF;
		margin-top: 25px;
		}
		
	.panorama-caja p.parrafo {
		font: Arial, Helvetica, sans-serif;
		font-size: 12px;
		color: #FFF;
		margin-top: 15px;
		}
		
	.panorama-caja p.parrafo a {
		font-weight:bold;
		color: #8b8b8b;
		text-decoration: none;
		}
		
	.panorama-caja p.parrafo a:hover {
		font-weight:bold;
		color: #df6872;
		text-decoration: none;
	}
	
	.panorama-caja .caja-botones {
		width: 280px;
		height: 60px;
		margin-top: 20px;		
		}
		
	.panorama-caja .logo-panorama {
		width: 182px;
		height: 20px;
		margin-left: 82px;
		}