@charset "utf-8";
/* CSS Document */
body {
	background:url(../imagenes/bg-001.gif);
	overflow:hidden;	
}
/*Estilo del Header*/
header {
	width:100%;
	height:64px;
	position:fixed;
	top:0;
	left:0;
	z-index:99997;
}
header div {
	width:96%;
	height:64px;
	position:relative;
	margin:auto;
	background:#037a74;
	border-radius:0 0 10px 10px;
	box-shadow: 0 0 10px rgba(255,255,255,0.5);
}
header div h1 {
	width:300px;
	height:54px;
	position:absolute;
	top:0;
	left:0 px;
	z-index:0;
	font-family: 'myriad_pro_lightbold';
	font-size:14px;
	line-height:16px;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	padding:0;
	color:#FFF;
}
header div a[href="http://biblioteca.sena.edu.co/"] {
	width:250px;
	height:64px;
	position:absolute;
	top:0;
	right:0;
	z-index:0;
}
header div a[href="http://biblioteca.sena.edu.co/"] img {
	width:54px;
	height:54px;
	float:left;
	margin:5px 0;
}
header div a[href="http://biblioteca.sena.edu.co/"] .separador {
	width:1px;
	height:44px;
	display:block;
	background:#FFF;
	float:left;
	margin:10px 0 10px 10px;
}
header div a[href="http://biblioteca.sena.edu.co/"] #sbs {
	width:175px;
	height:44px;
	display:block;
	float:left;
	font-family: 'myriad_pro_lightbold';
	font-size:16px;
	line-height:20px;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	padding:10px 0 0 5px;
	color:#FFF;
}
header div nav {
	width:600px;
	height:64px;
	margin:auto;
}
header div nav a {
	width:150px;
	height:40px;
	float:left;
	display:block;
	font-family: 'myriad_pro_lightbold';
	font-size:16px;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	padding:24px 0 0 0;
	color:#FFF;
	background:transparent;
	transition:all 0.5s ease-in;
}
header div nav a:hover {
	background:#70b22d;
	border-radius:5px;
	box-shadow:0 0 10px rgba(0,0,0,0.55) inset;
	transition:all 0.3s ease-out;
}

/*Estilo Base del Section (Global de la Cartilla)*/
section {
	width:920px;
	height:526px;
	margin:6% auto 0 auto;
	position:relative;
}
section #cartilla {
	width:800px;
	height:480px;
	margin:auto;
}
section #cartilla article {
	width:400px;
	height:480px;
	background:#FFF;
}
section #anterior, section #siguiente {
	width:50px;
	height:50px;
	background:url(../imagenes/sprite-flechas.png) no-repeat;
	position:absolute;
	top:215px;
	z-index:0;
}
section #anterior {
	left:0;
	background-position:0 0;
}
section #siguiente {
	right:0;
	background-position:0 -50px;
}
section #anterior:hover {
	left:0;
	background-position:-50px 0;
}
section #siguiente:hover {
	right:0;
	background-position:-50px -50px;
}

/*Estilo del Footer*/
footer {
	width:100%;
	height:40px;
	position:fixed;
	bottom:0;
	left:0;
	z-index:99997;
}
footer div {
	width:96%;
	height:40px;
	position:relative;
	margin:auto;
	background:#037a74;
	border-radius:10px 10px 0 0;
	box-shadow: 0 0 10px rgba(255,255,255,0.5);
}
footer div figure {
	width:100px;
	height:30px;
	margin:auto;
}
footer div figure a[rel="license"], footer div figure img {
	margin:5px auto;
}

/*Aside indice*/
#indice {
	width:400px;
	height:450px;
	position:fixed;
	top:16.5%;
	left:-372px;
	z-index:99996;
}
#indice article {
	width:370px;
	height:450px;
	float:left;
	background:#fc7323;
	box-shadow: 0 0 5px rgba(255,255,255,0.9);
	border-radius: 0 10px 10px 0;
}
#indice article nav {
	width:330px;
	height:410px;
	margin:20px;
}
#indice article nav div {
	width:330px;
	height:35px;
}
#indice article nav div a {
	width:160px;
	height:25px;
	background:#FFF;
	color:#111;
	display:block;
	margin:2px;
	padding:7px 0 0 0;
	float:left;
	font-family: 'myriad_pro_lightbold';
	font-size:14px;
	text-align:center;
	text-decoration:none;
	border-radius:5px;
	box-shadow:0 0 10px rgba(0,0,0,0.15) inset;
	transition:all 0.5s ease-in;
}
#indice article nav div a:hover {
	color:#FFF;
	background:#70b22d;
	box-shadow:0 0 10px rgba(0,0,0,0.55) inset;
	transition:all 0.3s ease-out;
}
#indice #linkIndice {
	width:30px;
	height:175px;
	float:left;
	margin:30% 0 0 0;
	background-image:url(../imagenes/sprite-indice.png);
	background-color:#037a74;
	background-repeat:no-repeat;
	background-position:0 0;
	box-shadow: 0 0 5px rgba(255,255,255,0.9);
	border-radius: 0 5px 5px 0;
	transition:all 0.9s ease-in;
}
#indice #linkIndice:hover {
	background-color:#70b22d;
	transition:all 0.5s ease-out;
}

/*Aside socialMedia*/
#socialMedia {
	width:35px;
	height:80px;
	position:fixed;
	top:45%;
	right:10px;
	z-index:99995;
}
#socialMedia nav {
	width:35px;
	height:80px;
}
#socialMedia nav a {
	width:35px;
	height:35px;
	display:block;
	background-image:url(../imagenes/sprite-indice.png);
	background-repeat:no-repeat;
	border-radius:20px;
}
#socialMedia nav #facebook {
	background-position:-60px 0;
	margin:0 0 10px 0;
	background-color:#0071bc;	
	transition: all 0.5s ease-in;
}
#socialMedia nav #facebook:hover {
	background-color:#037a74;
	transition: all 0.3s ease-out;	
}
#socialMedia nav #twitter {
	background-position:-60px -35px;
	background-color:#70d6f9;	
	transition: all 0.5s ease-in;
}
#socialMedia nav #twitter:hover {
	background-color:#70b22d;
	transition: all 0.3s ease-out;	
}

/* Aside instructivo */
#instructivo {
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.55);
	position:fixed;
	top:-100%;
	left:0;
	z-index:99998;
}
#instructivo article {
	width:80%;
	height:80%;
	display:block;
	background:url(../imagenes/bg-002.png)repeat top left #FFF;
	margin:5% auto;
	border-radius:15px;
	box-shadow: 0 0 15px rgba(0,0,0,0.55) inset;
	position:relative;
}
#instructivo article #cerrarInstructivo {
	width:45px;
	height:45px;
	background:url(../imagenes/sprite-cerrar.png) no-repeat #FFF 4px 4px;
	border-radius:30px;
	position:absolute;
	top:-22.5px;
	right:-22.5px;
	z-index:1;
	box-shadow: 0 0 10px rgba(255,255,255,0.75);
	transition: all 0.5s ease;
}
#instructivo article #cerrarInstructivo:hover {
	background:url(../imagenes/sprite-cerrar.png) no-repeat #111 -34px 4px;
	transition: all 0.3s ease;
}
#instructivo article #conteInstructivo {
	width:100%;
	height:395px;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	display:block;
	margin:50px 0 0 0;	
}
#instructivo article #conteInstructivo figure {
	width:715px;
	height:395px;
	margin:auto;
	background:#999;
	position:relative;
	background-image:url(../imagenes/instructivo/instructivo-sprite.png);
	background-repeat:no-repeat;
	background-position:0 0;
	border-radius:15px;
	box-shadow:0 0 15px rgba(0,0,0,0.35) inset;
}
#instructivo article #conteInstructivo #barraInstructivo {
	width:100%;
	height:35px;
	position:absolute;
	bottom:10px;
	left:0;
	z-index:2;
	margin:auto;
}
#instructivo article #conteInstructivo #barraInstructivo nav {
	width:270px;
	height:45px;
	margin:auto;
}
#instructivo article #conteInstructivo #barraInstructivo nav a {
	width:35px;
	height:28px;
	margin:0 5px;
	float:left;
	color:#FFF;
	background:#037a74;
	font-family: 'myriad_pro_lightbold';
	font-size:16px;
	text-align:center;
	text-decoration:none;
	padding:7px 0 0 0;
	border-radius:18px;
	box-shadow:0 0 10px rgba(0,0,0,0.55) inset;
	transition:all 0.3s ease-in;
}
#instructivo article #conteInstructivo #barraInstructivo nav a:hover {
	background:#70b22d;
	transition:all 0.5s ease-out;
}

/* Aside volumenes */
#volumenes {
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.55);
	position:fixed;
	top:-150%;
	left:0;
	z-index:99998;
}
#volumenes article {
	width:80%;
	height:80%;
	display:block;
	background:url(../img/bg-002.png) repeat top left #FFF;
	margin:5% auto;
	border-radius:15px;
	box-shadow: 0 0 15px rgba(0,0,0,0.55) inset;
	position:relative;
}
#volumenes article #cerrarVolumenes {
	width:45px;
	height:45px;
	background:url(../imagenes/sprite-cerrar.png) no-repeat #FFF 4px 4px;
	border-radius:30px;
	position:absolute;
	top:-22.5px;
	right:-22.5px;
	z-index:1;
	box-shadow: 0 0 10px rgba(255,255,255,0.75);
	transition: all 0.5s ease;
}
#volumenes article #cerrarVolumenes:hover {
	background:url(../imagenes/sprite-cerrar.png) no-repeat #111 -34px 4px;
	transition: all 0.3s ease;
}
#volumenes article #conteVolumenes {
	width:100%;
	height:395px;
	position:absolute;
	top:3%;
	left:0;
	z-index:1;
	display:block;
	margin:70px 0 0 -70px; /*margenes de los volumenes si son menos el normal esta en 50px 0 0 50px*/
}
#volumenes article #conteVolumenes #cartillas{
	width:720px;
	height:395px;
	float:none;
	margin:auto;
	position:relative;
	overflow:hidden;
	/*background:#FFF;*/
	/*box-shadow: 0 0 15px rgba(0,0,0,0.55);*/
}

#volumenes article #conteVolumenes #cartillas #cartilla {
	
	/*LISTADO DE LAS CARTILLAS*/
  padding:0; 
  margin:0 auto; 
  list-style-type:none; 
  width:817px; 
  height:395px; 
  }

#volumenes article #conteVolumenes #cartillas #cartilla .coleccion a {
	width:102px;
	height:395px;
	float:left;
  overflow: hidden;
  /*Borde sombreado*/
	box-shadow: 0 0 15px rgba(0,0,0,0.55);
/*Borde redondeado*/
border:inherit 1px #000000;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright:6px;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
  }
  #volumenes article #conteVolumenes #cartillas #cartilla li a img {
  border:0;
    width:204px;
  }

#volumenes article #conteVolumenes #cartillas #cartilla li a:hover {
  width:204px;
    background:#eee; 
/*Transición*/
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;

}

/* Aside creditos */
#creditos {
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.55);
	position:fixed;
	top:-100%;
	left:0;
	z-index:99998;
}
#creditos article {
	width:80%;
	height:80%;
	display:block;
	background:url(../img/bg-002.png) repeat top left #FFF;
	margin:5% auto;
	border-radius:15px;
	box-shadow: 0 0 15px rgba(0,0,0,0.55) inset;
	position:relative;
}
#creditos article #cerrarCreditos {
	width:45px;
	height:45px;
	background:url(../imagenes/sprite-cerrar.png) no-repeat #FFF 4px 4px;
	border-radius:30px;
	position:absolute;
	top:-22.5px;
	right:-22.5px;
	z-index:1;
	box-shadow: 0 0 10px rgba(255,255,255,0.75);
	transition: all 0.5s ease;
}
#creditos article #cerrarCreditos:hover {
	background:url(../imagenes/sprite-cerrar.png) no-repeat #111 -34px 4px;
	transition: all 0.3s ease;
}
#creditos article #conteCreditos {
	width:100%;
	height:395px;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	display:block;
	margin:50px 0 0 0;	
}
#creditos article #conteCreditos figure {
	width:715px;
	height:395px;
	margin:auto;
	background:#999;
	position:relative;	
	background-image:url(../imagenes/creditos/creditos-sprite.png);
	background-repeat:no-repeat;
	background-position:0 0;
	border-radius:15px;
	box-shadow:0 0 15px rgba(0,0,0,0.35) inset;
}
#creditos article #conteCreditos #barraCreditos {
	width:100%;
	height:35px;
	position:absolute;
	bottom:10px;
	left:0;
	z-index:2;
	margin:auto;
}
#creditos article #conteCreditos #barraCreditos nav {
	width:135px;
	height:45px;
	margin:auto;
}
#creditos article #conteCreditos #barraCreditos nav a {
	width:35px;
	height:28px;
	margin:0 5px;
	float:left;
	color:#FFF;
	background:#037a74;
	font-family: 'myriad_pro_lightbold';
	font-size:16px;
	text-align:center;
	text-decoration:none;
	padding:7px 0 0 0;
	border-radius:18px;
	box-shadow:0 0 10px rgba(0,0,0,0.55) inset;
	transition:all 0.3s ease-in;
}
#creditos article #conteCreditos #barraCreditos nav a:hover {
	background:#70b22d;
	transition:all 0.5s ease-out;
}