/* http://meyerweb.com/eric/tools/css/reset/ 
----------------------------------------------------------------------------------------- */
/* v1.0 | 20080212 */



#menublog
{
    width: 190px;
    border: solid darkolivegreen 4px;
    border-radius: 6px; 
    color: olivegreen; 
    font-size: 16px; 
    text-align: left;
    margin: auto;
    background-color: #fce6b4;
}
legend {
	font-size: 16px; 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: "Trebuchet MS", Verdana, Arial;
	cursor: pointer;
	#font-weight: bold;
	color: #333;
	#padding: 2px;
	}
#materia:hover {
	color: white;
	text-shadow: 1px 1px 1px #555;
}
.contenidos {
	text-align: center;
	margin-left: 207px;
	width: 280px;
	margin-top: 12px;
	background: aliceblue;
	padding: 2px 4px 2px 4px;
	border: 1px aliceblue solid;
	border-radius: 4px;
	-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 {
	background: white; 
	border: 1px olive solid;
}
#kaki {
	color: darkgreen;
	background-color: #F4E68D;
	background-image: url("img/fractal_amarillo.jpg");
	background-repeat: no-repeat;
	padding-top: 14px;
	width: 800px;
	min-height: 40px;
	}
#kaki a:link { color: green; }
#kaki a:visited {
	color: green;
	text-decoration: none;
}
#kaki 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 {
	#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 a span {
border-radius: 8px;
}
.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);
}
.hallow {
	height: 300px;
	background: url('img/calabaza0.png') 210px 150px no-repeat;
	-webkit-transition: background 0.8s; /* For Safari 3.1 to 6.0 */
	-moz-transition: background 0.8s ease;
    transition: background 0.8s;
}
.hallow:hover {
	background: url('img/calabaza1.png') 210px 30px no-repeat black;
}

/* 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 --------------------------------------------------------------------------*/