* {
margin:0px;
padding:0px;
C2C7D5
}

body{ 
background-image: url('/img/fondo.png'); 
/*background-color:#CDD0DA;*/
background-repeat: no-repeat; 
background-size: 100%; 
/*background-attachment: fixed;*/
background-position: left top;
    
} 

/*------------- menus ----------------------------------------------------*/
ul, ol {
list-style:none;
}

.nav li a {
background-color:#CDD0DA;
color:black;
text-decoration:none;
padding:10px 12px;
display:block;
}

.nav li a:hover {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#101c2e+0,162b42+50,13263d+51,1f3c5b+100 */
background: rgb(16,28,46); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(16,28,46,1) 0%, rgba(22,43,66,1) 50%, rgba(19,38,61,1) 51%, rgba(31,60,91,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(16,28,46,1) 0%,rgba(22,43,66,1) 50%,rgba(19,38,61,1) 51%,rgba(31,60,91,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(16,28,46,1) 0%,rgba(22,43,66,1) 50%,rgba(19,38,61,1) 51%,rgba(31,60,91,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#101c2e', endColorstr='#1f3c5b',GradientType=1 ); /* IE6-9 */
color: white;
}

/*********** ------ cuerpo ---------------------------********************/
#cabecera{
background: #0D3954;
width:100%;
height:8%;
text-align: left;
padding: 20px; 
width:100%;
}

/******* DIV MENUS ******************/
#principal #menuderecha{
width:12%;
height:75%;
display: inline-block;
vertical-align: top;

}

/******* DIV CONTENEDORES ******************/
#principal #contenido{
width:85%;
height:75%;
display: inline-block;
vertical-align: top;
background: #F0F0F0;
}

/******* CURSOS PROGRAMADOS ******************/
#principal #menuizquierda{
background:#DAD4D4; 
width:10%;
height:75%;
display: inline-block;
vertical-align: top;
background: #F0F0F0;
}

#imagen {
  border: black 1px solid;
  border-image-source: url("bola.png");
  text-align: justify;
}

.icono01{
	top:20%;
	position:absolute;
	z-index: 1000;
	width:8%;
	height:10.5%;
	border:2px solid #666;
	background-color: #fff;
	right:50px;
	border-radius: 10px;
	opacity: 0.8;
	cursor: pointer;
	text-align: center;
}


.zoom{
	transition: 1.8s ease;
	-moz-transition: 1.5s ease; /* Firefox */
	-webkit-transition: 1.5s ease; /* Chrome - Safari */
	-o-transition: 1.5s ease; /* Opera */
}
.zoom:hover{
	transform : scale(1.1);
	-moz-transform : scale(1.1); /* Firefox */
	-webkit-transform : scale(1.1); /* Chrome - Safari */
	-o-transform : scale(1.1); /* Opera */
	-ms-transform : scale(1.1); /* IE9 */
}

#pie{
background: #0D3954;
width:100%;
height:5%;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
color: white;
padding: 10px;
}