* 
{
	font-family: serif;
}

body
{
/*	background: url(imagenes/fondo2.jpg);*/
	background-color: #24720d;
}
.cuerpo
{ 
	margin:20px auto; 
	padding:5px; 
	background:#ffffff; 
	width:1000px; 

}
.linea
{
	margin:20px auto; 
	background:#000000; 
	width:850px; 
	height:10px;
	border-radius:10px; 

}
article
{
/*	font-family: 'Comic Sans', cursive;*/
	font-family: monospace;
	background-color: #ebe8d9;
	border-radius: 5px 5px 5px 5px; /* borde circular */
	box-shadow: 0px 0px 10px #154207;
	font-size: 10pt;
	margin:50px;
	padding: 20px;
}
article  h1 
{
	background-color: #195875;
    border-radius: 5px 5px 5px 5px; /* borde circular */
	box-shadow: 0px 0px 10px #154207;
    font-size: 18pt;
    color: #ffffff;
    text-shadow:#000000 2px 1px 2px;  
    text-align: center;	
    padding:20px;
    text-transform: uppercase
}
article  h2
{
	font-family: sans-serif;
    font-size: 11pt;
    color: #000000;
//    text-shadow:#101010 1px 1px 1px;  
    text-align: left;	
}
#tip
{
	display: inline-block;
	background:red;
    border-radius: 5px 5px 5px 5px; /* borde circular */
	font-family: arial;
    font-size: 10pt;
    color: white;
    text-align: center;
	padding: 2px;	
	box-shadow: 2px 2px 2px #154207;

}

header
{ 
	margin-top: 20px;
	margin-right: 40px;
	margin-bottom: 10px;
	margin-left: 70px;
	padding:10px; 
}
footer
{
	text-align: right;	
	font-family: verdana, arial, helvetica; 
	font-size: 8pt;
	text-shadow:#CCCCCC 2px 1px 2px;  
}
header h1
{ 
	text-align: center;
	font-size: 64px; 
	opacity: 0.8;
	font-weight: 100;
	text-shadow: #666 0px 5px 10px;
}
header h2
{ 
	text-align: center;
	font-size: 32px; 
	opacity: 0.8;
	font-weight: 100;
	text-shadow: #666 0px 5px 10px;
}

.menu 
{
	list-style-type: none; /*  Para desaparecer las viñetas*/
	margin-left:160px; 
    	height:100px;

}
/*
.menu:after 
{
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
}
*/
.menu li a
{ 
	float: left; 
	background: url(imagenes/canica2.png);
    width: 100px;
	height:100px;
	color: rgba(255, 255,255, 0.9);
	font-family: verdana, arial, helvetica; 
	font-size: 8pt;
	line-height:100px;
	text-align: center;
	text-decoration:none;
	text-shadow: #CCCCCC 2px 1px 2px;  
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
}

.menu li a:hover 
{
	 -webkit-transform: translateY(-20px) rotate(360deg);
    -moz-transform: translateY(-20px) rotate(360deg);
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0, transparent), to(rgba(0,0,0,0.4)));
    -moz-box-reflect: below 0px -moz-gradient(linear, left top, left bottom, from(transparent), color-stop(0, transparent), to(rgba(0,0,0,0.4)));
}
/*********************************  Pestañas  *****************************/
.tabs 
{
	margin: 0 auto;/*para centrar*/
	min-height: 400px;/* alto del cuadro*/
	position: relative;
	width: 600px; /* ancho del cuadro*/
}
.tab 
{
	float: left;/* Para que vayan una seguida de la otra*/
}

.tab label
{
	background-color: #24720d;/* color de la pestaña*/
	border-radius: 5px 5px 0 0; /* borde circular*/
	box-shadow: -3px 3px 2px #154207 inset;
	color: rgba(255, 255,255, 0.9);
	font-family: verdana, arial, helvetica; 
	font-size: 8pt;
	text-align: center;
	text-shadow:#CCCCCC 2px 1px 2px;  
	cursor: pointer;/* cambia la forma del cursos*/
	left: 0;/* no se para que*/
	margin-right: 1px;
	padding: 5px 15px;
	position: relative;/* tampoco se*/
}

.tab [type=radio] 
{
	display: none; /* quita el dibujo */
}
.content 
{
	background-color: #24720d;
	border-radius: 0px 5px 5px 5px; /* borde circular */
	box-shadow: -3px -3px 2px #154207 inset;
    color: rgba(255, 255,255, 1);
	font-family: verdana, arial, helvetica; 
	font-size: 8pt;
	bottom: 0;
	left: 0;
	overflow: hidden;
	padding: 20px;
	position: absolute;
	right: 0;	
	top: 23px;
}
.content > * 
{
	opacity: 0;
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
}

[type="radio"]:checked ~ label  /*  cambiar de pestaña */
{
    background-color: #76c260;
	box-shadow: 0 3px 2px #000000 inset;
	color: #FFF;
	z-index: 2;
}

[type=radio]:checked ~ label ~ .content /* cambiar de contenido */
{
	z-index: 1; 
}
[type=radio]:checked ~ label ~ .content > * 
{
	opacity: 1;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
}

/********************* Para las publicaciones   ****************/
#articulo
{
	font-family: verdana, arial, helvetica; 
    font-size: 8pt;
    padding: 5px;

}
#articulo:before
{
	content:url(imagenes/canica3.png);
}

#yo
{
	font-family: verdana, arial, helvetica; 
    display: inline;
    color:yellow;
    text-shadow:none;  
}
#titulo
{
	font-family: verdana, arial, helvetica; 
    display: inline;
    color:cyan;
    text-shadow:none;  
}

/*************************** super poner *****************************************/

figure {
    display: inline-block;
    padding: 10px 10px 5px 10px;
    background-color: white;
    border-radius: 5px 5px 5px 5px; /* borde circular */
	box-shadow: 0px 0px 8px #154207 inset;
    margin:  10px;
    border: 2px solid rgba(0, 0, 0, 0.1);
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
}

figure p 
{
    font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
    font-family:Garamond,Baskerville,Georgia,serif !important;
    font-style:italic;
    font-weight:normal;
    text-align: center;
    margin: 0;
}
figure:hover 
{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    box-shadow: 0px 0px 20px black;
}
figure:nth-of-type(1)
{
    -webkit-transform:  translate(50px,20px) rotate(30deg);
    -moz-transform:  translate(50px,20px) rotate(30deg);
}
figure:nth-of-type(2) 
{
    -webkit-transform:  translate(-20px,0px) rotate(-30deg);
    -moz-transform:  translate(-20px,0px) rotate(-30deg);
}
figure:nth-of-type(3) 
{
    -webkit-transform:  translate(70px,0px) rotate(-15deg);
    -moz-transform:  translate(70px,0px) rotate(-15deg);
}
figure:nth-of-type(4) 
{
    -webkit-transform:  translate(0px,-30px) rotate(30deg);
    -moz-transform:  translate(0px,-30px) rotate(30deg);
}
figure:nth-of-type(1):hover
{
	position: relative;
	z-index: 1;
	-webkit-transform:  rotate(0deg) scale(1.5);
	-moz-transform:  rotate(0deg) scale(1.5);
}
figure:nth-of-type(2):hover 
{
	position: relative;
	z-index: 1;
    -webkit-transform:  rotate(0deg) scale(1.5);
    -moz-transform:  rotate(0deg) scale(1.5);
}
figure:nth-of-type(3):hover
{
	position: relative;
	z-index: 1;
    -webkit-transform:  rotate(0deg) scale(1.5);
    -moz-transform:  rotate(0deg) scale(1.5);
}
figure:nth-of-type(4):hover
{
	position: relative;
	z-index: 1;
    -webkit-transform:  rotate(0deg) scale(1.5);
    -moz-transform:  rotate(0deg) scale(1.5);
}


/******************  cartel fijo ******************************************/

#cartel 
{
	background-color: rgba(255,0,0,0.9);
    border: 1px solid #234;
    position: fixed;
    z-index: 1;
    left: 5%;
    top: 10%;
    width: 200px;
    text-align: center;
    color: #ffffff;
    outline: 1px solid #CCC;
    -webkit-transform:  rotate(30deg);
    -moz-transform:  rotate(30deg);

    -webkit-transition: all 0.5s linear;  
    -moz-transition: all 0.5s linear;  
}
#cartel:hover
{
    color: #000000;
    background-color: rgba(36,114,13,.3);

}
#cartel a 
{
	display: block;
    float: right;
    height: 16px;
    width: 16px;
}