@charset "utf-8";
/* CSS Document */
/* CSS Document */

#contenedor {
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	width:800px;
	border:0px solid #333333;
	
	margin:10px auto;
	text-align:left;
	}
#encabezado {
	height:auto;
	list-style:none;
	margin:10px;
	padding:10px;
	width:800px;
	height:200px;
	border:0px solid #333333;
	background-color:#FFF;
	float:left;
	display:inline;
	padding-bottom:20px;
	}
#encabezado h1 {

	text-align:center;
	list-style:none;
	font-size:18px;
	font-weight:bold;
	width:800px;
	border-bottom:0px solid #FFFFFF;
	color:#1D6AFA;
	margin:0;
	text-transform:uppercase;
	padding-bottom:5px;
	}
#menu {
	float:left;
	margin:10px 10px auto 0;
	border:1px solid #333333;
	width:320px;
	height:24px;
	}
#contenido ul {
	width:800px;
	list-style-type:none;
	margin:0;
	padding:0;
	text-transform:uppercase;
	font-weight:bold;
	
	}
li {
	margin:0;
	float:left;
	}
li a {
	display:block;
	background-color:#CC3300;
	color:#FFFFFF;
	width:58px;
	padding:4px 0 5px 22px;
	text-decoration:none;
	}
li a:hover {
	background-color:#999900;
	}
#contenido {
	width:580px;
	clear:both;
	padding:10px;
	}
#contenido h2 {
	font-size:16px;
	color:#CC3300;
	width:246px;
	text-transform:uppercase;
	border-bottom:1px dotted #CC3300;
	}
#contenido h3 {
	width:246px;
	font-size:14px;
	color:#999900;
	border-bottom:1px dotted #999900;
	}
#footer {
	width:560px;
	text-align:right;
	padding:10px;
	font-size:80%;
	font-style:italic;
	color:#999999;
	}
	
	div.login {
	text-align:right;
	padding-right:2px;
	padding-bottom:10px;
	
	
	width:250px;
	font-family: "Trebuchet MS", Verdana;
	font-size: 12px;
	font-weight: normal;
	color:#666;
	background-color:#FFF;
	border: solid 1px;
	border-color:#CCC;
  
 
  
  }
  
  div.login li {
	  width:350;
	  list-style:none;
	  margin:2px;
	  
	  
  }
  
  
  /* Div LOGIN */
  
  .box h3{ text-align:center; position:relative; font-family: Arial; color: #fff; top:80px; } .box { width:100%; height:100%; margin:10px auto; } /*================================================== * Efecto 2 * ===============================================*/ .effect2 { position: relative; } 
  
  .effect2:before, .effect2:after { 
  z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:800px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .effect2:after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; } - See more at: http://www.cssblog.es/9-bonitos-efectos-con-box-shadow/#sthash.I1kbsToD.dpuf