/* aca estamos importando 3 fuentes de google fonts, una se llama roboto, Indie Flover y la otra germania one y otras*/
@import url('https://fonts.googleapis.com/css?family=Bungee+Inline|Fredericka+the+Great|Germania+One|Indie+Flower|Monoton|Roboto');

/*
Este archivo contiene los estilos del proyecto que se esta realizando // aun no lo uso en este proyecto
*/
	.titulo_dorado{
		font-family: 'Roboto', sans-serif, 'Arial';
		color: #BD893D;
		font-size: 30px;
		font-weight: bolder;
	}
	.subtitulo_negro{
		font-family: 'Roboto', sans-serif, 'Arial';
		color: black;
		font-size: 18px;
		font-weight: bolder;
	}
    #blanco{ 
	    font-family: 'Roboto', sans-serif, 'Arial';
		color: white;
		font-size: 18px;
		font-weight: bolder;
    }
    form{
        text-shadow: gray;
        box-shadow: 10px 10px 5px gray;
        width: 33%; margin: 38px auto; 
        /*width: 100%; margin: 20px 0px 0px 20px; */
        padding: 20px;         
        background: #AEF1ED;         
        border-top: 4px solid red;
        border-left: 4px solid red;
    }
    input{
    	font-family: 'Roboto', sans-serif, 'Arial';
    	border-top-left-radius: 5px; /* hace que el boton pase de bordes cuadrados a tener unos bordes curvos*/
    	width: 270px; 
    	/*height: 35px;*/
    }
	body{
		background-color: #C3CAC9;
		margin: 0px 0px 0px 0px;
	}
	.advertencia {                                      
		/* asi se una en html<a href="" title="Click para Modificar" class="modificar">Modificar</a>*/
		font-family: 'Roboto', sans-serif, 'Arial';
		border: 10px solid #F67979; /*borde azul del boton */ 
		border-radius: 6px; /* hace que el boton pase de bordes cuadrados a tener unos bordes curvos*/
		margin: 4px 4px; /* espacio alrededor de modificar*/  /* top arriba, botom abajo left y rigth*/
		font-weight: bolder;
		background-color: #F67979; /* fondo del boton*/
		color: #ffffff; /*color del texto*/
	}
	.advertencia:hover{									/*accion del mouse pasando por el hipervinculo (boton)*/
		font-family: 'Roboto', sans-serif, 'Arial';
		background-color: red; /*fondo negro del boton sustituto al poner la manito*/
		border: 10px solid red; /*borde azul del boton sustituto al poner la manito*/
		margin: 4px 4px;  /* espacio alrededor de modificar*/ /* top arriba, botom abajo left y rigth*/
		color: #ffffff;
	}
	/* a sin decoracion quita el subrayado a los hipervinculos*/
	a:link{
		text-decoration: none;
	}
	.ver{                                      
		/* asi se una en html<a href="" title="Click para Modificar" class="modificar">Modificar</a>*/
		font-family: 'Roboto', sans-serif, 'Arial';
		border: 10px solid #0093FF; /*borde azul del boton */ 
		border-radius: 6px; /* hace que el boton pase de bordes cuadrados a tener unos bordes curvos*/
		margin: 4px 4px; /* espacio alrededor de modificar*/  /* top arriba, botom abajo left y rigth*/
		font-weight: bolder;
		background-color: #0093FF; /* fondo del boton*/
		color: #ffffff; /*color del texto*/
	}
	.ver:hover{								/*accion del mouse pasando por el hipervinculo (boton)*/
		font-family: 'Roboto', sans-serif, 'Arial';
		background-color: blue; /*fondo negro del boton sustituto al poner la manito*/
		border: 10px solid blue; /*borde azul del boton sustituto al poner la manito*/
		margin: 4px 4px;  /* espacio alrededor de modificar*/ /* top arriba, botom abajo left y rigth*/
		color: #ffffff;
	}
	a:link{
		text-decoration: none;
	}

	/* segundo aplicarle el hader que use todo el tamaño del ancho de la pagina y qeu los contenidos tengan margen automatica*/
	header{
		width: 100%;
		margin: auto;
	}
	/******* contenedores que son response ***/
	#contenedor1 {
	background-color: #AEF1ED;
	border: solid #08f;
	width: 54%;
	margin: 20px auto;
	padding: 20px;
	border-width: 20px;
    box-shadow: 10px 10px 5px gray;
	}
	#contenedor2 {
	width: 50%;
	margin: 30px auto;
	border: solid 10px 0093FF;
	background-color: #AEF1ED;
	}