/* @group body */
body{
	font: 13px/1.5 "Lucida Grande", Lucida, Verdana, sans-serif;
	background-color: #202020;
	margin: 0;
	color: #fff;
}

p{
	color: #777;
}

h1{
	font-size: 36px;
	font-weight: bold;
	padding-top: 20px;
}

h1.continuar{
	text-decoration: blink;
}

/* @end */

/* @group contenedor */

#contenedor{
	min-height: 300px;
	max-width: 700px;
	padding: 50px 50px 50px 60px;
	margin-bottom: 10px;
}

#contenedor p{
	color: #afafaf;
}


p strong{
	color: #fff;
}

a:link{
	color: #fff;
	text-decoration: none;
}

/* @end */

/* @group pie */

/* Pie de página que contiene el título del proyecto y su autor*/
#pie, #pie2{
	/*position: fixed;*/
	/*bottom: 0;*/
	/*left: 0; */
	width: 100%;
	background-color: #585858;
	font-size: 9px;
	color: #fff;
	padding-top: 5px;
	padding-bottom: 5px;
}

#pie2{
	position: fixed;
	bottom: 0;
	left: 0;
}	

#pie p, #pie2 p{
	color: #fff;
}

/* @end */

/* @group main */

/* Contenedor que tendrá el contenedor principal y los botones*/
.principal{
	margin: 0 auto;
	width: 850px;
	margin-top: 60px;
	margin-bottom: 120px;
	height: 1400px;
	position: relative;
	background-color: #ebebeb;
}


/*Contenedor principal que contendrá el texto y los enlaces*/
#main{
	width: 750px;
	height: 1300px;
	padding: 30px 15px;
	/*background-color: #fff;*/
	/*background-color: #f7f7f7;*/
	/*margin-bottom: 120px;*/
	/*margin-top: 60px;*/
	margin-left: auto;
	margin: auto;
	text-align: justify;
}


/* Contenedor de la imagen de los cubos y grupo de programadores, con float izquierdo para que el texto lo rodee por la derecha*/
#cubos, #grupo{
	margin-right: 20px;
	text-align: left;
	float: left;
}

/* Tabla que va a contener los enlaces a otras secciones de la web*/ 
table.enlaces{
	text-align: center;
	width: 100%;
	padding: 5px;
	color: #f9f9f9;
	background-color: #5778a6;
	margin-bottom: 30px;
}


/*Ponemos un color más oscuro a los enlaces de la tabla cuando ponemos el cursor sobre ellos*/
table.enlaces a:hover{ 
	background-color: #3d60ad;
	/*text-decoration: underline;*/
}

/*Ponemos los enlaces visitados de la tabla en negro y sin subrayado*/
table.enlaces a:visited{
	color: #000;
	text-decoration: none;
}

/*Destacamos en negro las palabras dentro del contenedor main*/
#main p strong{
	color: #3d3d3d;
}

/*Contenedor de la imagen logo que alineamos a la derecha con float derecho*/
#logo{
	float: right;
	text-align: right;
	margin-left: 0px;
	margin-bottom: 0px;
}




/* @end */	


/* @group itunes */


/* Contenedor que tendrá la ventana donde se verán las carátulas*/

.titulo{
	width: 100%;
	height: 180px;
	text-align: center;
}

.marco, #marco2 {
	margin-left: auto;
	margin-right: auto;
	background-color: #ebebeb;
	width: 800px;
	height: 850px;
	/*margin-top: 150px;*/
	margin-bottom: 150px;
	position: relative;
	/*padding-top: 10px;*/

}


#ventana_scroll{
	width: 500px;
	height: 650px;
	border: black;
	position: absolute;
	top: 90px;
	left: 150px;
	overflow: hidden;
}


/* Gran contenedor que contendrá las carátulas alineadas horizontalmente de izquierda a derecha */
#cinta{
	width: 5300px;
}

/* Prototipo de las carátulas que las alinea horizontalmente de izquierda a derecha dentro del contenedor cinta*/
.caratula{
	width: 500px;
	height: 500px;
	float: left;
	font: 13px/1.5 "Lucida Grande", Lucida, Verdana, sans-serif;
}

.info{
	padding: 20px;
	width: 500px;
	height: 100px;
	color: #000;
	font-weight: bold;
	font-style: oblique;
	font-size: 18px;
}

/*Contenedores de los botones de scroll*/
#right, #left{
	position: absolute;
	top: 40%;
}

#right{
	right: 40px;
}

#left{
	left: 40px;
}

/* @end */


/* @group videos */

#marco2{
	width: 750px;
}

.titulo h1{
	font-size: 50px;
	font-weight: bold;
	text-decoration: underline;
}

/* @end */