/* ===========================
   ======= Body style ======== 
   =========================== */
/* Body es el principal que contiene:
   mainHeader y container */

 body {
	background-color: #d5dbf0; /* #d5dbf0; #c6cfef;*/
	/* background-image: url('img/background.png'); */
}

.body {
	clear: both; 
	margin: 0 auto; 
	width: 86%;
}

/* ===========================
   ======= Main Header ======= 
   =========================== */
/* MainHeader es del tipo header y contiene : logotipo, lema, separador y menu */

div.header {
    padding: 0.5em;
    color: white;
    background-color: gray;
    clear: left;
}

h1.header {
    padding: 0;
    margin: 0;
}

.mainHeader {
	height: 260px; /* 260px creo que son 190 + 40 + 30 */
}
 
.mainHeader img {
	width: auto;
	height: 150px;
	margin: 3% 0;
}

/* ===========================
   ======== Logotipo ========= 
   =========================== */

div.logotipo {
    float: left;
    width: 210px;
    margin: 0;
    padding: 1em;
}

/* ===========================
   ========== Lema =========== 
   =========================== */
   
div.lema {
 	position: absolute;
    right: 7%;
    width: 500px;
	padding: 1em;
}

h1.lema {
	text-align: right;
	color: rgb(56,80,162); /* Hex #3850a2 rgb(56,80,162) */
	font-size: 250%;
	font-family:Arial, Helvetica, sans-serif;
	font-style: italic;
}

p.lema {
	text-align: right;
	color: black;
	font-family:Arial, Helvetica, sans-serif;
}

div.separador {
	clear: both;
	height: 1px;
    width: auto;
}

/* ===========================
   ===== Main Navigation ===== 
   =========================== */
   
.menu,
.menu ul,
.menu li,
.menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

ul.menu {
	margin: 10px auto 0 auto;
}

.menu {
	height: 40px;
	width: auto;
	background: #4c4e5a;
/* 	margin: 160px auto 30px auto;*/
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
		
	background: linear-gradient(top, #535562 0%, #202023 100%);
	background: -moz-linear-gradient(top, #535562 0%, #202023 100%);
	background: -webkit-linear-gradient(top, #535562 0%, #202023 100%);		
	background: -ms-linear-gradient(top, #535562 0%, #202023 100%);	
	}
 
.menu li {
	list-style: none;
	float: left;
	display: block;
	height: 40px;
	position: relative;
}

.menu li a {
	display: block;
	text-decoration: none;
	/* font-weight: bold; */
	color: #FFF;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px; /* 15px */
	padding: 0 15px;
	margin: 5px 0;
	line-height: 30px;
	border-left: 1px solid #393942;
	border-right: 1px solid #393942;
	transition: color .3s ease;
	-moz-transition: color .3s ease;
	-webkit-transition: color .3s ease;
	-ms-transition: color .3s ease;			
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a { border-right: none; }

.menu li:hover > a { color: #5f77c8; } /* Original #b94861 Otro #3850a2 */

/* Sub Menu */

.menu ul {
	position: absolute;
	opacity: 0;
	background: #575a62;
	
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;	
		
	transition: opacity .25s ease .1s;
	-moz-transition: opacity .25s ease .1s;
	-webkit-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;				
}

.menu li:hover > ul {
	opacity: 1;
}

.menu ul li {
	height: 0;
	overflow: hidden;
	padding: 0;
}

.menu li:hover > ul li {
	height: auto;
	overflow: visible;
}

.menu ul li a {
	width: 100px;
	margin: 0;
	padding: 5px 15px;
	border: none;
	border-bottom: 1px solid #353539;	
}

.menu ul li:last-child a { border: none; }
  
 /* ===========================
   ======= Container ======== 
   =========================== */
/* Container que contiene:
   left, content y footer */

div.container {
    width: 100%;
    margin: 0px;
    line-height: 150%;
}

/* left */

div.left {
    float: left;
    width: 210px;
    margin: 0;
    padding: 1em;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
}

img.left {
	width: 200px;
	margin-top: 10px;
}

/* content */

div.content {
    margin-left: 240px;	
    padding: 1em;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 16px;
}

img.content {
	display: block;
	margin: 10px auto 10px auto;
}

/* footer */
	
div.footer {
    padding: 0.5em;
    color: white;
	background: #3850a2; /* #4c4e5a; es gris */
    clear: left;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	
	background: linear-gradient(top, #535562 0%, #202023 100%);
	background: -moz-linear-gradient(top, #535562 0%, #202023 100%);
	background: -webkit-linear-gradient(top, #535562 0%, #202023 100%);		
	background: -ms-linear-gradient(top, #535562 0%, #202023 100%);	

}

.footer {
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
}