@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One);
/* letra de google fonts para títulos*/

body{
	background-color:#CCC;
	font-size:18px;
}	

/*definimos la web de un ancho de 900px sea como sea la ventana del usuario*/
#contenedor{
	width:90%;
	margin:auto;
	top:100px;
	position:relative;
}

#logo{
	opacity: .3;
	filter: alpha(opacity=30);
	-moz-opacity: .3;
	width:222px;
	height:102px;
	position: fixed;
	right:-222;
	top:0;
	background: url(img/html.png) no-repeat top left fixed;
	z-index:-1;
}
/*para el título de la web*/
.h1{
	text-align:center;
	font-family:Julius Sans One;
	font-size:36px;
	text:#000;
}

/*diferentes apartados*/
.h2{
	text-align:center;
	font-family:Julius Sans One;
	font-size:32px;
	text:#000;
}

/*bloque donde poner el nombre de la etiqueta, y la descripción de que hace*/
#etiqueta{
	width:auto;
	margin:10px;
	margin-top:20px;
}

/*recuadro donde pone el nombre de la etiqueta*/
#nombre_etiqueta{
	position:relative;
	z-index: 2;
	background-color:#ccc;
	border-style:solid;
	border-width:2px;
	border-color:#000;
	border-radius:10px;
	width:35%;
	height:auto;
	padding-left:30px;
	align:center;
}

/*comportamiento al pasar por encima, cambia de color y se pone un borde amarillento alrededor*/
#nombre_etiqueta:hover{
	-moz-box-shadow: 0 0 50px #FF6;
	-webkit-box-shadow: 0 0 50px #FF6;
	box-shadow: 0 0 50px #FF6;
}

/*tipo de letra utilizado para los nombre de las etiquetas*/
#nombre_etiqueta h3{
	margin-top:0px;
	margin-bottom:0px;
	text-align:left;
	font-family:Julius Sans One;
	font-size:24px;
	text:#000;
}

/*Es el cuadrado un poco más avanzado para poner para lo que sirve la etiqueta a definir*/
#descripcion{
	position:relative;
	z-index: 1;
	width:auto;
	border-style:solid;
	border-width:2px;
	border-radius:10px;
	border-color:#666;
	margin-top:-20px;
	padding-top:10px;
	margin-left:30px;
}

/*estilo de letra de la definición*/
.etiqueta{
	margin-left:30px;
	font-size:18px;
}

/*la cursiva para poner si la etiqueta es abierta o cerrada*/
.tipo{
	font-style:italic;
}

/*los simbolos de la lista son la bolita del google chrome*/
ul{
	list-style-image:url('img/chrome15.png');
}

/*para hacer una división que cierre todas las anteriores y empiece con un trozo que va de lado a lado*/
#fin{
	clear:both;
}