* { margin: 0; padding: 0; }

#page {
	width: 100%;
	margin: 0 auto;
}

#cabeza {
	background:#F90;
	top: 0;
	position: fixed;
	width: 100%;
	font-size:inherit;
	box-shadow:2px 2px 5px #000;
	z-index:5;
}
#pie {
	background:#FFF;
position: fixed;
bottom:0;
	width: 100%;
}
#numpagina{
	float:left;
	border-radius:10px;
	background:#CCC;
	text-align:center;
	width:30px;
	box-shadow:2px 2px 5px #000;
	margin-left:2px;
	margin-top:5px;
}
#numpagina1{
	float:left;
	border-radius:10px;
	background#F60;
	text-align:center;
	width:30px;
	box-shadow:2px 2px 5px #000;
	margin-left:2px;
	margin-top:5px;
}
#numpagina2{
	float:left;
	border-radius:10px;
	background:#CCC;
	text-align:center;
	width:120px;
	box-shadow:2px 2px 5px #000;
	margin-left:2px;
	margin-top:5px;
}
#boton{
	float:left;
	border-radius:10px;
	background:#F90;
	text-align:center;
	width:48%;
	box-shadow:2px 2px 5px #000;
	margin-left:2px;
	margin-top:5px;
}
#boton2{
	alignment-adjust:central;
	border-radius:10px;
	background:#39F;
	text-align:center;
	width:95%;
	box-shadow:2px 2px 5px #000;
	margin-left:2px;
	margin-top:5px;
}
#marcofull{
	alignment-adjust:central;
	border-radius:10px;
	background:#FFC;
	text-align:center;
	width:95%;
	box-shadow:2px 2px 5px #000;
	margin-left:2px;
	margin-top:5px;
}
#marcofull2{
	alignment-adjust:central;
	border-radius:10px;
	background:#F60;
	text-align:center;
	width:95%;
	box-shadow:2px 2px 5px #000;
	margin-left:2px;
	margin-top:5px;
}
#fondonegro{
	background:#000;
	text-align:center;
	width:100%;
}
#login{
	height:100%;
	width:100%;	
}

body{
	background:#F7F7F7;
	font-size:inherit;}
	.nav-bar {
    width: 100%;
	
}

a {
    color: #222;
    text-decoration: none;
}
ul, ol, li {
    list-style: outside none none;
}
header, #central-content {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 500px;
    width: 100%;
}
header {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(59, 89, 151, 1) 0%, rgba(41, 62, 107, 1) 100%) repeat scroll 0 0;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
    padding: 0.8em 0 0;
}
header h1 {
    float: left;
    padding: 0 0 0.2em;
}
header h1#logo img {
    height: 40px;
    margin-left: 0.5em;
}
.control-menu {
    background-color: transparent;
    background-position:left;
    border: 0px solid #fff;
    display: block;
    float: left;
    height: 30px;
    margin-right: 0.1em;
    width: 130px;
}
.control-menu a span {
    display: inline-block;
    height: 30px;
    text-indent: -9999px;
    width: 130px;
}
.control-menu .close {
    background-image: url("close-menu.png");
    background-position: left;
    background-repeat: no-repeat;
    display: none;
}
.control-menu .open {
    background-image: url("open-menu.png");
    background-position: left;
    background-repeat: no-repeat;
    display: block;
}

ul.nav-items {
    clear: both;
    height: 0;
    overflow: hidden;
    transition: height 0.4s ease-in-out 0s, background-color 2s ease 0s; /*El menú cambia su altura y su color de fondo mediante una transición suavizada al voover a su estado unicial*/
}

#navigation:target ul.nav-items {
    background: #f0f0f0 none repeat scroll 0 0;
    height: 31.8em;
    transition: height 0.4s ease-in-out 0s, background-color 0.9s ease 0s; /*El menú cambia su altura y su color de fondo mediante una transición suavizada al abrirse*/
}


/*Al hacer clic sobre el enlace que abre el menú éste desaparece*/

.close { 
   display:none;
}
        
#navigation:target .open {
      display: none;
}

/* Al hacer clic sobre el enlace que abre el menú aparece el enlace .close que previamente estaba oculto*/

#navigation:target .close {
        display: block;
}
  
/*Estilos menu*/

ul.nav-items li {
    display: block;
}
ul.nav-items a {
    border-top: 2px dotted #dddbdb;
    color: #333;
    display: block;
    height: 2.5em;
    line-height: 3em;
    margin: 0 1.3em;
}
ul.nav-items li:first-child a {
    border-top: 2px solid transparent;
}
ul.nav-items li a span {
    border-left: 3px solid;
    height: 2.8em;
    padding: 0.4em 0.5em;
}
#Web-Dev a span {
    border-color: #ff6633;
}
#Mobile a span {
    border-color: #bda94d;
}
#Data a span {
    border-color: #5887bc;
}
#Net-VS a span {
    border-color: #00a2b7;
}
#SharePoint a span {
    border-color: #639bf2;
}
#alerta{
	height: 75px;
	width: 100%;
	background:#F00;
	box-shadow:2px 2px 5px #333;
	float:left;
	margin-bottom:3px;
   }
   #alerta2{
	height: 75px;
	width: 100%;
	background:#FF6;
	box-shadow:2px 2px 5px #333;
	float:left;
	margin-bottom:3px;
   }
    #alerta3{
	height: 75px;
	width: 100%;
	background:#9C3;
	box-shadow:2px 2px 5px #333;
	float:left;
	margin-bottom:3px;
   }
   #alertab{
	height: 75px;
	width: 50%;
	height:130px;
	background:#F00;
	box-shadow:2px 2px 5px #333;
	float:left;
	margin-bottom:3px;
   }
   #alerta2b{
	height: 75px;
	width: 50%;
	height:130px;
	background:#FF6;
	box-shadow:2px 2px 5px #333;
	float:left;
	margin-bottom:3px;
   }
    #alerta3b{
	height: 75px;
	width: 50%;
	height:130px;
	background:#9C3;
	box-shadow:2px 2px 5px #333;
	float:left;
	margin-bottom:3px;
   }
      #globo1{
    width: 80%;
    float:right;
	margin-right:20px;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px #555;
    background-color:#9CC;
    position: relative;
    color: #000;
}
#globo1:before{
    content: "";
    width: 0;
    position: absolute;
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent #9CC;
    top: 20px;
    right: -10px;
}
 #globo2{
    width: 80%;
  float:left;
	margin-left:20px;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px #555;
    background-color: #fff;
    position: relative;
    color: #000;
}
#globo2:before{
    content: "";
    width: 0;
    position: absolute;
    border-style: solid;
    border-width: 5px 10px 5px 0;
    border-color: transparent #fff;
    top: 20px;
    left: -10px;
}
    #globo3{
    width: 80%;
    float:right;
	margin-right:20px;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px #555;
    background-color:#9CC;
    position: relative;
    color: #000;
	z-index:0;
}
#globo3:before{
    content: "";
    width: 0;
    position: absolute;
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent #9CC;
    top: 20px;
    right: -10px;
}
 #notificacion {
position: absolute;
z-index: 1000;
top: 0;
left: 0;
right: 0;
background:#F00;
text-align: center;
line-height: 2.5;
overflow: hidden;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
-webkit-transform: translateY(-50px);
-webkit-animation: slideDown 3.0s 0.5s 1 ease ;
}
@-webkit-keyframes slideDown {
0%, 100% { -webkit-transform: translateY(-50px); }
10%, 90% { -webkit-transform: translateY(0px); }
}
  #titulo{
	height: 35px;
	width: 100%;
	background:#333;
	box-shadow:2px 2px 5px #333;
	float:left;
	margin-bottom:3px;
   }