/* -------------------
	Global Resets 
--------------------*/

body{  background: #FFFFFF; }
html, body{   margin:0px;   padding:0px; }

/* ----------------
	BASICS:
------------------ */

#wrapper {
  position:relative;
  width:1000px;

  border-right: 0px solid #CCCCCC;
  border-left: 0px solid #CCCCCC;
  margin: auto; /* centra la página */ 
  font-size: 1.0em; 

}

/* HEADER */ 
#header { width:100%;  } 
#header2 {width:100%; margin-top:0px;}

/* STUFF USED IN JULIO PEREZ CENTENO. COM */
/* SECTIONS */ 
.seccion { width: 20%; /*16%;*/  height: auto; float: left;  } 
.seccion img { width: 80%; height:auto; } 

@media screen and (max-width:1399px){
    	#wrapper { margin: auto; width:100%;  }
    	.seccion { width: 20%; height: auto;  }  
    	 } 
    	
@media screen and (max-width:1100px){ 
    	.seccion { width: 25%; height: auto;  } 
    	
    	}
@media screen and (max-width:800px){ 
    	/* .seccion { width: 50%; height: auto;  } */ 
    	
    	}


/* END OF STUFF USED */

.twitbutton {
  width: 32px; 
  height: 32px; 
  z-index:5;
  display: inline; 
  position: absolute; 
  top: 110px; 
  left: 960px;
  font-size: 10px; 
  text-decoration: none; 
  background-repeat:no-repeat;
  background-image:url('imagenespagina/twBT.png');   
}

.twitbutton:hover{  background-position:bottom; }



.fbbutton {
  width: 32px; 
  height: 32px; 
  z-index:5;
  display: inline; 
  position: absolute; 
  top: 110px; 
  left: 925px;
  font-size: 10px; 
  text-decoration: none; 
  background-repeat:no-repeat;
  background-image:url('imagenespagina/fbBT.png');   
}

.fbbutton:hover{  background-position:bottom; }

/* BODY */ 
#container {width:100%;  font-family: 'PT Sans', Helvetica, Arial, sans-serif; }
#containersmall {width:96%; margin: auto;  }
#sidebar {float: left; width:200px; height:200px; padding-top: 2.0em;}
#sidebar p {margin:0.5em; text-align: left;} 
#main {float:right; width:800px; }

#footer {clear:both; width:100%; min-height: 10px; font-size:0.8em;}
#guerrafont {font-family: 'Trykker', serif; font-size: 1em; text-align: left; }

.center { text-align:center; } 
.left  { text-align:left; }
.centerdiv {width: 550px; margin: auto; } 

h1, h2, h3, h4 {font-family: 'Arvo', Georgia, Times, serif; }

h1 {font-size: 1.5em; text-align: center;}
h3 {font-size: 1.1em; text-align: center;}

a {text-decoration: none;} 
a:link {color: #333333;}
a:visited {color: #333333;}
a:link:hover {text-decoration:underline; color: #111111;}
a img {border: none; }

p {text-align: justify;}

#artsie {float: left; width: 49%;}

#academie{ float: right; width: 49%; }

#litside { float:left; width: 32%; font-size: 0.95em; border: 0px solid #AAAAAA; padding:0.25em; margin-right:0.4em; } 
#acaside { float:left; width: 32%; font-size: 0.95em; border: 0px solid #AAAAAA; padding:0.25em; } 
#eduside {float:right; width: 32%; font-size: 0.95em; border: 0px solid #AAAAAA; padding:0.25em; } 
.blok { border: 1px solid #AAAAAA; padding:0.25em; margin:auto; margin-top: 0.5em;} 
.blok:hover {background: #EEEEEE;} 



.one {padding-left: 1.0em; }

.OCRAStd {font-family: OCR A Std;}

/*  --------------------
	INDEX 2 bits
  ---------------------- */ 
#boxliterario { float:left; width: 45%; height:200px; font-size: 0.95em; border: 1px solid #AAAAAA; padding:0.25em; margin-right:0.4em; } 
#boxacademico { float:right; width: 45%; height:200px;font-size: 0.95em; border: 1px solid #AAAAAA; padding:0.25em; margin-right:0.4em; } 
#boxprogramitas { clear:both; float:left; width: 45%; height:200px;font-size: 0.95em; border: 1px solid #AAAAAA; padding:0.25em; margin-right:0.4em; } 
#boxeducativo { float:right; width: 45%; height:200px; font-size: 0.95em; border: 1px solid #AAAAAA; padding:0.25em; margin-right:0.4em; } 

/* ---------------------
	Specific pieces: 
------------------------ */

/* container */ 
#container a {text-decoration: none;}
.bloque {clear:both; width:100%; font-size: 0.95em; height: 100%; margin-top: 0.5em; margin-bottom: 0.5em; border: 1px solid #AAAAAA; }
.bloque:hover {background: #EEEEEE;} 

.dibujoonL {float: left; width:40%; }
.textoonR { float:right; width:60%; }

.dibujoL { width:100%;  }
.textoR {width: 95%; margin:0.5em; }

.dibujoR {width: 100%;  }
.textoL {width: 95%; margin:0.5em;  }

/*
EXPAND BUTTON for NEW ITEMS
*/
#lonuevoBOX{
width: 800px; 
margin-left: 1em; 

}
.lomasreciente {
  width: 350px; 
  height: 25px; 
  display: block;
  text-decoration: none; 
  background-repeat:no-repeat;
  background-image:url('imagenespagina/plusminusIMG.jpg');   
}

#lonuevo{
display: none; 
margin-left: 1em; 
}
.lonuevolista{margin-left: 0.5em; }
/* ------------------------
	Bees 
------------------------- */

    #bee_container { position: relative; width: 1000px; height: 550px; }
    #bee_div {  position: absolute; left:50px;}
    #hover_div { position: absolute; left:50px; z-index:5; }
    
    


#startbutton{clear: both; float: left;  }

.right {text-align: right;}
.center {text-align: center;}

.beecontainer { width: 950px; height: auto;} 
.beeNAVleft {float: left; width: 225px; margin: 10px 10px 10px 10px;  background: #FFFFFF;}
.beeNAVright {float: left; width: 225px;margin: 10px 10px 10px 10px;  background: #FFFFFF;}
.beeCanvas {float: left; width: 500px; background: #FFFFFF; background-image: url('bees/beeBG.jpg'); background-position: center; background-repeat: no-repeat; }
.beeDocs {clear: both; width:900px;}
.beeDocumentation { float: left; width: 910px; padding-left:10px; padding-right:10px; font-size: 0.95em; }
.beeComms {float: right; width: 360px; padding-left: 30px; padding-top:30px;}
.tight {margin: 0px; padding: 0px;}
.beepic {float: left; clear:both; } 
.beetxt {width:602px; height:120px; float: right;}
.33block {position: relative; width:30%; height 100%; float:left;} 

/*
SIGUIENDO UNA ESTRELLA 
.blok33:hover {background: #ebe1b3;} 
*/

#wrapperestrella{
  position:relative;
  width:1000px;

  margin: auto; /* centra la página */ 
  font-size: 1.0em; 
  border: 3px solid #c5ba87; 
  border-radius: 5px;
  padding:10px;
}

.blok33 { border: 2px solid #c5ba87; background-image: url('estrella/estrellaBG.png'); padding:0.25em; float:left; width: 30%; margin: 0.25em;border-radius: 10px;} 


.WEBred {margin: auto; background-position:left; background-image: url('estrella/BaltasarWEB.png'); width: 72px; height:150px; } 
.WEBred:hover {background-position:right;} 


.WEBgreen {margin: auto; background-position:left; background-image: url('estrella/GasparWEB.png'); width: 77px; height:150px; } 
.WEBgreen:hover {background-position:right;}


.WEBblue {margin: auto; background-position:left; background-image: url('estrella/blueWEB.png'); width: 78px; height:150px; } 
.WEBblue:hover {background-position:right;}