html {
	  overflow-x: hidden;
  }
  body {
	  position: relative;
	  margin: auto;
	  width: 1024px;
	  background-image: url("fondo/collage_precolomb.png");
	  
  }
	/* markers for design */

	nav {
		position: fixed;
		text-align: center;
		#background-color: #C9B490;
		left: 40;
		top: 0;
		bottom: 0;
		width: 200px;
		padding: 10px;
	}
	nav ul {
		list-style: none;
	}
	#content {
		margin: 10px 0px 30px 220px;
		}
		#content  a{
		display: inline;
		}
	#main {
		#padding: 10px;
		#line-height: 20; /* to fake lot of content / scrolling */
	}
	footer {
		width: 100%; 
		background: #C9B490;
		position: fixed;
		bottom: 0;
		left: 200;
	}
	
	
legend {
	font-size: 17px; font-weight: bold;
}
ul { list-style-type: none; }
h1 { color: white; width: 710px; height: 160px; font-size: 72px; letter-spacing: 14px; text-shadow: 2px 0 0 orangered, -2px 0 0 orangered, 0 2px 0 orangered, 0 -2px 0 orangered, 1px 1px orangered, -1px -1px 0 orangered, 1px -1px 0 orangered, -1px 1px 0 orangered; }
h1:hover { color: red; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; }
#materia {
	border: 0px; 
	background-color: transparent;
	font-size: 17px;
	font-family: Bromine;
	cursor: pointer;
	#font-weight: bold;
	color: #333;
	#padding: 2px;
	}
#materia:hover {
	color: white;
	text-shadow: 1px 1px 1px #555;
}
#contenidos {
	display: inline;
	float: left;
	text-align: center;
	width: 250px;
	height: 36px;
	margin: 12px 0px 10px 65px;
	background: whitesmoke;
	padding: 2px 4px;
	border: 1px tan solid;
	border-radius: 4px;
	font-size: 1.1em;
	-webkit-box-shadow: 5px 5px 5px 0px rgba(82,77,82,1);
	-moz-box-shadow: 5px 5px 5px 0px rgba(82,77,82,1);
	box-shadow: 5px 5px 5px 0px rgba(82,77,82,1);
}	
#contenidos:hover {
	color: white; 
	background: aliceblue;
	border: 1px steelblue solid;
}
#kako {
	font-family: Bromine;
	color: darkgreen;
	background-color: #FCE2B4;
	padding-top: 14px;
	padding-bottom: 10px;
	width: 800px;
	height: 8310px;
	border-radius: 0px 0px 8px 8px;
	}
#kako a:link { color: green; }
#kako a:visited {
	color: green;
	text-decoration: none;
}
#kako a:hover {
	text-decoration: none;
	text-shadow: 2px 2px 5px #999;
	color: darkgreen;
}
#marquitos { 
	color: white;
	border: 2px olive solid;
	border-radius: 12px;
	background: tan;
	padding: 4px;
	}
#marquitos a:hover {
	background: olive;
	color: white;
}
#marquitos:hover {
	background: olive;
}
#marquitos2 { 
	color: white;
	border: 2px #FCE2B4 solid;
	margin: 1px;
	border-radius: 33px;
	background-color: tomato;
	padding: 8px;
	padding-top: 12px;
	}
#marquitos2:hover {
	background-color: crimson;
}
#marquitos3
{
	margin-top: -14px;
	padding-top: 18px;
	height: 16px;
	font-size: 17px; 
	background: tan;
}
#marquitos3 a:visited
{
	color: #333;
}
#marquitos3 a:link
{
	color: #333;
}
#marquitos3 a:hover
{
	color: white;
	text-shadow: grey;
}
#campo { 
	#color: white;
	border: 2px #A52A2A solid;
	border-radius: 12px;
	padding: 12px;
	}
#cls { 
	width: 355px;
	height: 350px;
	color: white;
	background-image: url('img/bici4.png');
    background-repeat: no-repeat;
	#background-color: tomato;
}
.presentar img, .presentar input {
	#box-shadow: 3px 3px 3px burlywood;
	border: 0px;

    #-moz-box-shadow: 3px 3px 4px burlywood;
    #-webkit-box-shadow: 3px 3px 4px burlywood;
    #box-shadow: 3px 3px 4px burlywood;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='burlywood')";
    /* IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='burlywood');	
}
.presentar a, .presentar img, .presentar input, .presentar a span {
border-radius: 0px;
}
.presentar a {
position: relative;
display: block;
}
.presentar a span {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.presentar a:hover span {opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#trasladar{
	position: relative;
	top: 0px;
	transition: 0.7s ease;
 	-moz-transition: 0.7s ease; /* Firefox */
 	-webkit-transition: 0.7s ease; /* Chrome - Safari */
 	-o-transition: 0.7s ease; /* Opera */
}
 
#trasladar:hover{
	
transform: matrix(-0.951, 0.309, -0.309, -0.951, 700, 0);
#transform: matrix(0.409, 0.5878, -0.5878, 0.409, 700, 130);

    -ms-transform: matrix(-0.951, 0.309, -0.309, -0.951, 700, 0); /* IE 9 */
    -webkit-transform: matrix(-0.951, 0.309, -0.309, -0.951, 700, 0); /* Chrome, Safari, Opera */
    -moz-transform: matrix(-0.951, 0.309, -0.309, -0.951, 700, 0); /* Standard syntax */
	
}
#phondo{
	width: 290px;
	margin: 10px;
	border: olive 6px ridge;
	border-radius: 8px;
	padding: 20px;
	background: url('img/espiral.png');
	background-position-y: 10px;
	background-repeat: no-repeat;
    -webkit-transition: background-position 1.5s ease-out;
        -moz-transition: background-position 1.5s ease-out;
            -o-transition: background-position 1.5s ease-out;
                transition: background-position 1.5s ease-out;
}
#phondo:hover {
        #background-position-y: -360px;
    }
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
.regla {
	height: 320px; width: 700px; margin-top: 15px;
	background: url('img/cuisenaire0.png') 0px 0px no-repeat;
	-webkit-transition: background 0.8s; /* For Safari 3.1 to 6.0 */
	-moz-transition: background 0.8s ease;
    transition: background 0.8s;
}
.regla:hover {
	background: url('img/cuisenaire0.png') 205px 0px no-repeat white;
}
.tangram {
	height: 425px;
	background-image: url('img/tangram0.png');
	background-repeat: no-repeat;
	-webkit-transition: background 1.6s; /* For Safari 3.1 to 6.0 */
	-moz-transition: background 1.6s ease;
    transition: background 1.6s;
}
.tangram:hover {
	background-image: url('img/tangram1.png');
	background-repeat: no-repeat;
}
#girar{
	transition: 2.5s ease;
 	-moz-transition: 2.5s ease; /* Firefox */
 	-webkit-transition: 2.5s ease; /* Chrome - Safari */
 	-o-transition: 2.5s ease; /* Opera */
}
 
#girar:hover{
	transform : rotate(360deg);
	-moz-transform : rotate(360deg); /* Firefox */
	-webkit-transform : rotate(360deg); /* Chrome - Safari */
	-o-transform : rotate(360deg); /* Opera */
}

/* tooltip con CSS3 ----------------------------------------------------------------------------- */

a.tooltip {outline:none; }
a.tooltip h3 {line-height: 14px; color: midnightblue;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
    z-index:10;display:none; padding: 10px;
    margin-top:-20px; margin-left: -20px;
    line-height:16px;
}
a.tooltip:hover span{
    display:inline; position:absolute; color:#111;
    border: 1.5px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
    
/*CSS3 extras*/
a.tooltip span
{
    border-radius: 12px;
    box-shadow: 5px 5px 8px #CCC;
}

/* Fin tooltip con CSS3 --------------------------------------------------------------------------*/
#leyenda {
	margin: 6px auto;
	text-align: center;
	font-size: 1.2em;
	color: darkolivegreen;
	background: whitesmoke;
	padding: 5px;
	border-radius: 4px;
}