@charset "UTF-8";

html,body,div,span,h1,h2,h3,p,a,img,ul,li,fieldset,form,label,legend,table {
  margin:0; padding:0; border:0; outline:0; 
  font-weight:inherit; font-style:inherit; 
  font-size: 1em; 
  line-height: 1.4;
  xfont-family:inherit; 
  vertical-align:baseline;
}

body { 
  font: 12px/1.4 'Arial',Heveltica,sans-serif; 
  margin: 0; padding: 0; 
  -moz-box-sizing: border-box;
  }
a { color: #004464; text-decoration: none;}
img, fieldset { border:0px solid white;  padding:0; margin: 0; }

#header { background-color: #1B3552; color:white; height: 85px; padding:5px 0 0 10px;  
  overflow:hidden; }
#header a { color:white;  }
#header #logoli { margin: 0 0 0 8.3%; display:inline; }
#header #logoli img { vertical-align:middle; }
#header #logoli .logpart { display:inline; vertical-align:middle; }
#header #logoli .logpart.nombre {  font-size: 1.7em; font-weight:500; }
#header #logoli .logpart.separ {  border-left: 1px solid white; font-size: 2.3em; padding:0em;  
  margin-left:0.3em;}
#header #idiomas { margin: 2em 8.3% 0 0; float: right; text-align:right; padding: 0 2em;}
#header #idiomas .idipart { display:inline; vertical-align:middle;  }
#header #idiomas .idipart.separ {  border-left: 1px solid white; font-size: 2em; margin-left:0.3em;  }

#bodypanel { 
  background: url('fondo_wwwuvdegrade.jpg') repeat-x scroll center top #FFF;
  padding: 0 8.3% ;
  }
#logoutline {  
  background-color: #F5F5F5;
  height: 2.5em;
  padding:  0;
  overflow:hidden;
  }
#logoutline #titulo{  
  float:left;
  padding: 0.6em 3em;
  font-weight:bold;
  color: #555;
  }
#logoutline #logout{  
  float:right;
  background-color: #AFB7B8;
  width: 16%;
  text-align: center;
  display:inline;
  padding: 0.6em 3em;
  }
#logoutline #loginusername {  
  float:right;
  display:inline;
  padding: 0.6em 1em;
  }
#content {
  padding-top: 1px;  /* para que no colapse margenes */
  background-color: #F5F5F5; 
  padding: 2em 4em;
  }

#footer { 
  padding-top: 1px;  /* para que no colapse margenes */
  background-color: #3F4545; color:white;  padding:1px 8.3%; line-height: 1em;
  }
#footer a { color:white;  }
#footer #copyri{ margin-left: 10px;  margin-right: 10px; }
#footer #notas{ float: right; margin-right: 10px;}

#header:after, #bodypanel:after, #footer:after, .clearfix:after {
   content:"."; clear:both; display:block; height:0; visibility:hidden; padding:1px;}



/* ... RESPONSIVE DESIGN ... */
/* large: >1200px */
@media only screen and (min-width:1200px){
  #header #logoli { margin-left: 16.66%; }
  #header #idiomas { margin-right: 16.66%;}
  #footer { padding-right: 16.66%; padding-left: 16.66%;}
  #bodypanel { padding-left: 16.66% ; padding-right: 16.66%; }
  }  
/* default: 750px < x < 1200px */
/* small:  300px < x < 750px */
@media only screen and (max-width:750px){
  #header #logoli { margin-left: 0; }
  #header #idiomas { margin-right: 0;}
  #header #logoli .logpart #nombreuv, 
  #header #logoli .logpart.nombre, 
  #header #logoli .logpart.separ { display:none; }
  #footer { padding-right: 0; padding-left: 0; }
  #content { padding-right: 1em; padding-left: 1em;  }
  #footer #notas{ margin-left: 10px; float:left;}
  #footer #copyri{ clear:both; }
  #bodypanel { padding-left: 0 ; padding-right: 0; }
  #logoutline #logout{ width: 33%; }
  #logoutline #titulo{ width: 25%; }
  #logoutline { height: 5em; }
  }
/* Xsmall:  < 300px */
@media only screen and (max-width:300px){
  #header #idiomas {  margin: 2em 1em 0 0; } 
  #header #idiomas .idipart.separ { display:none; } 
  #header #idiomas .idipart { display:block; }
  #header #logoli img { width: 70px; }
  }