@CHARSET "ISO-8859-1";
@font-face { font-family: 'tipografia';	src: url('../fonts/font.ttf');}

*{
	margin:0;
	padding:0;
}

body{
	font-family: tipografia, Georgia, serif;
	font-size: 15px;
	background: url(../img/fondo.png);
}

p{

}

#contenedor {
	width: 1024px;
	height: 614px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -512px;
	margin-top: -307px;
    border-radius: 15px;
	overflow: hidden;background: black;
}

#superior{
	width: 100%;
	height: 414px;
	background: url(../img/flores.jpg) #fff;
	
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
	-moz-border-top-right-radius: 15px;
	-moz-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
	-webkit-top-left-radius: 15px;
	-o-border-top-right-radius: 15px;
	-o-top-left-radius: 15px;
	-ms-border-top-right-radius: 15px;
	-ms-top-left-radius: 15px;
}

#columnaizquierda{
	width:300px;
}

#inferior{
	width: 100%;
	height: 200px;
	background-color: #313e71;
	
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	-moz-border-bottom-right-radius: 15px;
	-moz-bottom-left-radius: 15px;
	-webkit-border-bottom-right-radius: 15px;
	-webkit-bottom-left-radius: 15px;
	-o-border-bottom-right-radius: 15px;
	-o-bottom-left-radius: 15px;
	-ms-border-bottom-right-radius: 15px;
	-ms-bottom-left-radius: 15px;
}

#inferior_botones{
	width: 100%;
	height: 150px;
}

#inferior_direccion{
	width: 100%;
	height: 50px;
}

/* Sombra general */
.drop-shadow {
	position:relative;
	top:30px;
	float:left;
	width:280px;
	padding:10px;
	margin:2em 10px 4em;
	background:#fff;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-o-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-ms-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow:before,
.drop-shadow:after {
	content:"";
	position:absolute;
	z-index:-2;
}

/* Bordes redondeados */
.lifted {
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-radius:4px;
	-o-border-radius:4px;
	-ms-radius:4px;	 
}

.lifted:before,
.lifted:after {
	bottom:15px;
	left:10px;
	width:50%;
	height:20%;
	max-width:300px;
	max-height:100px;
	box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	-o-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	-ms-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
		
	transform:rotate(-3deg);
	-moz-transform:rotate(-3deg);	
	-webkit-transform:rotate(-3deg);
	-o-transform:rotate(-3deg);
	-ms-transform:rotate(-3deg);
}

.lifted:after {
	right:10px;
	left:auto;
	transform:rotate(3deg);
	-moz-transform:rotate(3deg);
	-webkit-transform:rotate(3deg);
	-o-transform:rotate(3deg);
	-ms-transform:rotate(3deg);
}

/* Caja volteada */
.rotated {
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	-o-box-shadow:none;
	-ms-box-shadow:none;		   
		
	transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
}

.rotated > :first-child:before {
	content:"";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;	
}

#texto{
	padding: 0px 0px 0px 40px;
}

.desplazamiento1{
	position: relative;
	transform: translate(100px, 20px);
	-moz-transform: translate(100px, 20px);
	-webkit-transform: translate(100px, 20px);
	-o-transform: translate(100px, 20px);
	-ms-transform: translate(100px, 20px);
}

.desplazamiento2{
	position: relative;
	transform: translate(300px, 20px);
	-moz-transform: translate(300px, 20px);
	-webkit-transform: translate(300px, 20px);
	-o-transform: translate(300px, 20px);
	-ms-transform: translate(300px, 20px);
}

.desplazamiento3{
	position: relative;
	transform: translate(500px, 20px);
	-moz-transform: translate(500px, 20px);
	-webkit-transform: translate(500px, 20px);
	-o-transform: translate(500px, 20px);
	-ms-transform: translate(500px, 20px);
}

.desplazamiento4{
	position: relative;
	transform: translate(700px, 20px);
	-moz-transform: translate(700px, 20px);
	-webkit-transform: translate(700px, 20px);
	-o-transform: translate(700px, 20px);
	-ms-transform: translate(700px, 20px);
}

button::-moz-focus-inner { border: 0; } /* Elimina las interpretaciones de Firefox */

.boton3d{
	position:relative;
	top:0px;
	
	border: solid 2px #fff;
	padding: 10px 10px;
	background: #313e71;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	
	text-shadow: 1px 1px 1px #E1FEA6;
	box-shadow: 0px 6px 0 #777;
	-moz-box-shadow: 0px 6px 0 #777;
	-webkit-box-shadow: 0px 6px 0 #777;
	-o-box-shadow: 0px 6px 0 #777;
	-ms-box-shadow: 0px 6px 0 #777;
}

.boton3d:active{
	position:relative;
	top:3px;
	text-shadow: 1px 1px 1px #E1FEA6;
	box-shadow:0px 3px 0 #777;
	-moz-box-shadow:0px 3px 0 #777;
	-webkit-box-shadow:0px 3px 0 #777;
	-o-box-shadow:0px 3px 0 #777;
	-ms-box-shadow:0px 3px 0 #777;
}

#boton1{
	display: block;
	position: relativa;
	float: left;
	width: 40px;
	animation: animacion1 3s;
	-webkit-animation: animacion1 3s none;
	-moz-animation: animacion1 3s none;
	-o-animation: animacion1 3s none;
	-ms-animation: animacion1 3s none;
}

#boton2{
	display: block;
	position: relativa;
	float: left;
	width: 40px;
	animation: animacion2 3s none;
	-webkit-animation: animacion2 3s none;
	-moz-animation: animacion2 3s none;
	-o-animation: animacion2 3s none;
	-ms-animation: animacion2 3s none;
}

#direccion{
	color: #fff;
	position:relative;
	transform: translate(60px, 0px);
	-webkit-transform: translate(60px, 0px);
	-moz-transform: translate(60px, 0px);
	-o-transform: translate(60px, 0px);
	-ms-transform: translate(60px, 0px);
}

#derechos{
	width: 200px;
	font-size: 10px;
	color: #aaa;
	position:relative;
	transform: translate(800px, -20px);
	-webkit-transform: translate(800px, -20px);
	-moz-transform: translate(800px, -20px);
	-o-transform: translate(800px, -20px);
	-ms-transform: translate(800px, -20px);
}