@charset "utf-8";
body {
	height:100%;
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #f0f0f0;
	margin: 0;
	padding: 0;
    color: #a3a3a3;
}

/* ~~ Selectores de elemento/etiqueta ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 
	padding-right: 15px;
	padding-left: 15px; 
}
a img { 
	border: none;
}

/* ~~ La aplicación de estilo a los vínculos del sitio debe permanecer en este orden (incluido el grupo de selectores que crea el efecto hover -paso por encima-). ~~ */
a:link {
	color:#414958;
	text-decoration: underline; /* a no ser que aplique estilos a los vínculos para que tengan un aspecto muy exclusivo, es recomendable proporcionar subrayados para facilitar una identificación visual rápida */
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* este grupo de selectores proporcionará a un usuario que navegue mediante el teclado la misma experiencia de hover (paso por encima) que experimenta un usuario que emplea un ratón. */
	text-decoration: none;
	color:green;
}

/* ~~ este contenedor rodea a todas las demás divs, lo que les asigna su anchura basada en porcentaje ~~ */
.container {
	width: 80%;
	height: 100%;
	max-width: 1260px;
	min-width: 780px;
	background: #FFF;
	margin: 0 auto;
	padding: 0;
}

header{
	width: 100%;
	background: #000086;
	height: 75px;
}
.head{
	width: 960px;
	height: 75px;
	margin: 0 auto;
}
.head_logo{
	width: 161px;
	height: 45px;
	float: left;
	margin-top: 15px;
}
/* Login Button */
.loginButton { 
    display:inherit;
    float:right;
	background-color: #FD850A;
   -webkit-border-radius: 4px 4px 4px 4px;
	border-radius: 4px 4px 4px 4px;
	color: #FFFFFF;
    border-radius:3px;
    -moz-border-radius:3px;
    position:inherit;
    z-index:50;
    cursor:pointer;
	text-decoration:none;
	transition: all 0.25s;
	-ms-transition: all 0.25s;
	-moz-transition: all 0.25s; 
	-webkit-transition: all 0.25s; 
	-o-transition: all 0.25s; 
}
.sidebar1 {
	float: left;
	width: 250px;
	background: #f7f7f7;
	height: 900px;
}
.content {
	padding: 10px 0;
	width: 75%;
	height: 100%;
	float: left;
}

/* ~~ Este selector agrupado da espacio a las listas del área de .content ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; 
}

ul.nav {
	list-style: none; /* esto elimina el marcador de lista */
	border-top: 1px solid #666; /* esto crea el borde superior de los vínculos (los demás se sitúan usando un borde inferior en el LI) */
	margin-bottom: 15px; /* esto crea el espacio entre la navegación en el contenido situado debajo */
}
ul.nav li {
	border-bottom: 1px solid #666; /* esto crea la separación de los botones */
}
ul.nav a, ul.nav a:visited { /* al agrupar estos selectores, se asegurará de que los vínculos mantengan el aspecto de botón incluso después de haber sido visitados */
	padding: 5px 5px 5px 15px;
	display: block; /* esto asigna propiedades de bloque al vínculo, lo que provoca que llene todo el LI que lo contiene. Esto provoca que toda el área reaccione a un clic de ratón. */
	text-decoration: none;
	background: #8090AB;
	color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* esto cambia el color de fondo y del texto tanto para usuarios que naveguen con ratón como para los que lo hagan con teclado */
	background: #6F7D94;
	color: #FFF;
}

/* ~~ El pie de página ~~ */
.footer {
/*	padding:5px 0;*/
	height:20px;
	background: -moz-linear-gradient(#003040, #c3c3c3);
	background: linear-gradient(#003040, #c3c3c3);
	background: -moz-linear-gradient(#003040,#c3c3c3);/* F 3.6+ */
	background: -ms-linear-gradient(#003040, #c3c3c3);/* IE 10+ */
   	background: -webkit-linear-gradient(#003040, #c3c3c3);/* FF 3.6+ */
   	background: -o-linear-gradient(#003040, #c3c3c3);/* Safari 5.1+, Chrome 10+ */
   	background: linear-gradient(#003040, #c3c3c3);/* ESTILO ESTANDAR */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003040', endColorstr='#c3c3c3'); /* IE6 & IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#003040', endColorstr='#c3c3c3')"; /* IE8+ */
	position: relative;/* esto da a IE6 hasLayout para borrar correctamente */
	clear: both; /* esta propiedad de borrado fuerza a .container a conocer dónde terminan las columnas y a contenerlas */
	color: white;
	bottom: 0px;
	width:100%;

}

/* ~~ clases float/clear varias ~~ */
.fltrt {  /* esta clase puede utilizarse para que un elemento flote en la parte derecha de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* esta clase puede utilizarse para que un elemento flote en la parte izquierda de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* esta clase puede situarse en una <br /> o div vacía como elemento final tras la última div flotante (dentro de #container) si #footer se elimina o se saca fuera de #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

#menu {

}
/*heading styles*/
#menu ul{
    list-style: none;
    margin:0;
    padding:0;
    width:250px;
}
#menu ul li ul{
    width:290px;
}
#menu ul li{
    margin:0;
    background-color: #f7f7f7;
}
#menu ul li a{
    padding-top:15px;
    padding-left: 20px;
    padding-bottom: 6px;
    display:block;
    text-decoration: none;
    color: #a3a3a3;
    font:bold 12px verdana;
    font-weight: 200;
    height:30px;
    background: #f7f7f7 url(arrow.png) no-repeat center right;
    line-height: 1.3em;

    border-bottom: 1px solid #d0d2d1; 
}
#menu ul li ul a{
    border-bottom: 1px solid #d0d2d1; 
    padding-left: 30px;
    display:block;
    text-decoration: none;
    color:#a3a3a2;
    font-size:12px;
    height:25px;
    font-weight: normal;
    background: #e7e7e7;
}
#menu ul li a:hover{
    background: #d2d2d2 url(arrow2.png) no-repeat center right;
    color: #fff;
}
#menu ul li ul a:hover{
    background: #d2d2d2;

}

#menu ul li ul{
    display:none;

}
	
.tag{
	padding-top:15px;
    padding-left: 20px;
    padding-bottom: 10px;
    display:block;
    color: #a3a3a3;
    font:bold 14px verdana;
    font-size: 10px;
    height:30px;
    font-weight: 200;
}
.head_cerrar {
		    background-color: #FD850A;
		   -webkit-border-radius: 4px 4px 4px 4px;
			border-radius: 4px 4px 4px 4px;
		    color: #FFFFFF;
		    float: right;
		    font-family: helvetica;
		    font-size: 12px;
		    height: 17px;
		    margin-top: 20px;
		    padding: 9px 0 5px 28px;
		    text-decoration: none;
		    width: 65px;

		    transition: all 0.25s;
		    -ms-transition: all 0.25s;
		    -moz-transition: all 0.25s; 
		    -webkit-transition: all 0.25s; 
		    -o-transition: all 0.25s; 
		}

.head_cerrar:hover {
		    background-color: #c3c3c3;
		}