/*////////////////////////////////////////////////////////////////////////////
// Cascade style sheet for lazytol.com
// Colors:
// - White:       ffffff
// - Grey:        808080
// - Dark grey:   404040
// - Black:       000000
// - Red:         f00000
// - Orange:      f8a322
// - Yelow:       fbba1a
// - Light green: 00ff00
// - Green:       008000
// - Light blue:  a0e0e0
// - Blue:        3a6ea5
////////////////////////////////////////////////////////////////////////////*/


/*////////////////////////////////////////////////////////////////////////////
// Body
////////////////////////////////////////////////////////////////////////////*/

body
{
  margin:                0px 0px 0px 0px;
  padding:               0px 0px 0px 0px;
  text-align:            justify;
  font-family:           Arial, Helvetica, sans-serif;
  font-size:             15px;
  color:                 #000000;
  background-color:      #a0e0e0;
  letter-spacing:        -1px;
}


/*////////////////////////////////////////////////////////////////////////////
// Divs hierarchy
////////////////////////////////////////////////////////////////////////////*/

div.Mid /* Middle main space */
{
  margin:                0px;
  padding:               0px 186px 0px 186px;
  background-image:      url('../img/vida.en.agua.01.png');
}

div.Mem /* Outer membrane */
{
  background:            #808080;
  border:                8px solid #808080;
  border-radius:         8px;
  box-shadow:            5px 5px 5px #404040;
}

div.Fix /* Fix position */
{
  position:              fixed;
  top:                   16px;
  width:                 220px;
}

div.Lft /* Left position */
{
  left:                  -62px;
  text-align:            right;
}

div.Lft:hover
{
  left:                  -12px;
}

div.Rgh /* Left position */
{
  right:                 -62px;
  text-align:            left;
}

div.Rgh:hover
{
  right:                 -12px;
  text-align:            left;
}


/*////////////////////////////////////////////////////////////////////////////
// Menus
////////////////////////////////////////////////////////////////////////////*/

div.Mnu /* Inner content */
{
  background:            #f8a322;
  border:                4px solid #f8a322;
  border-radius:         4px;
}

div.Mnu:hover
{
  background:            #fbba1a;
}

div.Mnu h2
{
  margin:                0px;
  font-size:             1.1em;
  font-weight:           bold;
  color:                 #404040;
  background:            #f8a322
}

div.Mnu h3, div.Mnu h4
{
  margin:                0px;
  font-size:             0.90em;
  font-weight:           normal;
  letter-spacing:        0px;
}

div.Mnu h4
{
  font-size:             0.90em;
}


div.Mnu h3:hover, div.Mnu h4:hover
{
  color:                 #ffffff;
  background:            #f8a322
}

div.Mnu a
{
  color:                 #3a6ea5;
  text-decoration:       none;
}

div.Mnu a:hover
{
  color:                 #ffffff;
}


/*////////////////////////////////////////////////////////////////////////////
// Titles and headers
////////////////////////////////////////////////////////////////////////////*/

div.Tit
{
  padding:               0px 4px 0px 4px; /* top right bottom left */
  background:            #404040;
  border:                4px solid #404040;
  border-radius:         4px;
}

div.Tit h1, div.Tit h2, div.Tit h3
{
  padding:               0px 0px 0px  0px;
  font-size:             1.7em;
  font-weight:           normal;
  margin:                0px;
}

div.Tit h1
{
  color:                 #f00000;
}

div.Tit h2
{
  color:                 #f8a322;
}

div.Tit h3
{
  color:                 #e0e0e0;
}

div.Bdy
{
  padding:               0px 4px 0px 4px; /* top right bottom left */
  background:            #ffffff;
  border:                4px solid #ffffff;
  border-radius:         4px;
  letter-spacing:        0px;
}

div.Bdy h1, div.Bdy h2, div.Bdy h3, div.Bdy p
{
  margin:                0px;
  padding:               4px 0px 4px 0px; /* top right bottom left */
  font-weight:           normal;
}

div.Bdy h1
{
  font-size:             1.7em;
}

div.Bdy h2
{
  font-size:             1.5em;
}

div.Bdy h3
{
  font-size:             1.3em;
}


/*////////////////////////////////////////////////////////////////////////////
// Standard elements
////////////////////////////////////////////////////////////////////////////*/

div.Bdy p
{
  font-size:             1.00em; /* Tamaņo similar a la Wikipedia */
  line-height:           1.40em; /* Altura similar a la Wikipedia */
}

div.Bdy a
{
  color:                 #f00000;
  text-decoration:       none;
}

div.Bdy a:hover
{
  color:                 #ffffff;
  background:            #f8a322;
}

div.Bdy ul
{
  margin:                0px  0px 0px  8px;
  padding:               0px  0px 0px  8px;
  font-size:             1.00em; /* Tamaņo similar a la Wikipedia */
  line-height:           1.40em; /* Altura similar a la Wikipedia */
}

div.Bdy li
{
  padding-top:           4px;
  padding-bottom:        4px;
  list-style-type:       circle;
}


/*////////////////////////////////////////////////////////////////////////////
// Trees of directories and files
////////////////////////////////////////////////////////////////////////////*/

div.Tre
{
  text-align:            left;
}

div.Tre ul
{
  border-bottom:         1px solid #808080;
  border-left:           1px solid #808080;
}

div.Tre li
{
  list-style-type:       none;
}

div.Tre span /* Atributos comunes */
{
  padding-left:          10px;
  padding-right:         10px;
  border:                1px solid #808080;
}

div.Tre span.Rot /* Nodo raiz */
{
  border:                1px solid #ff0000;
}

div.Tre span.Nod /* Nodo intermedio */
{
  color:                 #ffffff;
  background:            #808080;
}

div.Tre span.Lea /* Terminal, tree leaf */
{
}

div.Tre span.Act /* Terminal activado, azul */
{
  border-top:            1px solid #0000ff;
  border-bottom:         1px solid #0000ff;
  border-right:          1px solid #0000ff;
  border-left:           7px solid #0000ff;
  padding-left:          3px;
}

div.Tre span.Rot /* Terminal principal, rojo */
{
  border-top:            1px solid #ff0000;
  border-bottom:         1px solid #ff0000;
  border-right:          1px solid #ff0000;
  border-left:           7px solid #ff0000;
  padding-left:          3px;
}

div.Tre span.Out /* Fichero de salida, verde */
{
  border-top:            1px solid #009000;
  border-bottom:         1px solid #009000;
  border-right:          1px solid #009000;
  border-left:           7px solid #009000;
  padding-left:          3px;
}

div.Tre b /* Arrow */
{
  font-size:             1.20em;
  font-weight:           normal;
  color:                 #808080;
}


/*////////////////////////////////////////////////////////////////////////////
// Separators
////////////////////////////////////////////////////////////////////////////*/

span.Tin /* Separadores en linea minusculos */
{
  font-size:             1px;
}


div.Sep
{
  margin:                0px 0px 0px 128px;
  padding:               0px;
  background:            #ffffff;
  width:                 0px;
  border-left:           8px solid #808080;
  box-shadow:            5px 5px 5px #404040;
}


div.Tin
{
  height:                16px;
}


div.Std
{
  height:                32px;
}


div.Big
{
  height:                256px;
}


hr
{
  margin:                0px;
  padding:               0px;
  height:                1px;
  border-style:          none;
  background-color:      #808080;
}


/*-///////////////////////////////////////////////////////////////////////////
// Code
///////////////////////////////////////////////////////////////////////////-*/

code
{
  font-family:           "Lucida Console", Courier, serif;
}


div.Bdy code
{
  margin:                0px;
  padding:               0px;
  font-size:             0.90em;
}


div.Bdy i /* Codigo texto en linea dentro de un parrafo */
{
  font-family:           "Lucida Console", Courier, serif;
  font-size:             0.90em;
  font-weight:           bold;
}


div.Bdy code a
{
  color:                 #f00000;
  text-decoration:       none;
}


div.Bdy span.CodRem /* Comentario */
{
  color:                 #008000;
}


div.Bdy span.CodTxt /* Texto */
{
  color:                 #3a6ea5;
}


div.Bdy span.CodSub /* Subtexto dentro de otro texto */
{
  color:                 #c000c0;
}


div.Bdy span.CodTag /* Etiqueta */
{
  color:                 #b000b0;
}


div.Bdy span.CodEmb /* Codigo embebido */
{
  background-color:      #ffd0ff;
}


/*////////////////////////////////////////////////////////////////////////////
// Footer
////////////////////////////////////////////////////////////////////////////*/

div.Ftr
{
  padding:               50px 0px 0px 0px;
  background:            #000000;
  height:                271px;
  box-shadow:            0px -5px 5px #404040;
  text-align:            center;
}


div.Lnk
{
  height:                150px;
}


div.Lnk p
{
  font-family:           "Courier New", Courier, serif;
  font-size:             1.1em;
  color:                 #008000;
}


div.Lnk a
{
  color:                 #00ff00;
  text-decoration:       none;
}


div.Lnk a:hover
{
  color:                 #000000;
  background:            #00ff00;
  box-shadow:            0px 0px 6px 4px #00ff00; /* x y blur len color */
}


/*////////////////////////////////////////////////////////////////////////////
// Para busqueda y resultados
////////////////////////////////////////////////////////////////////////////*/


#cse-search-box /* Formulario */
{
  font-family:           "Courier New", Courier, serif;
  font-size:             1.1em;
  color:                 #00ff00;
  background:            #000000;
}

#search-submit /* Boton de busqueda */
{
  font-family:           "Courier New", Courier, serif;
  font-size:             1.1em;
  color:                 #00ff00;
  background:            #000000;
}

#search-submit:hover
{
  color:                 #000000;
  background:            #00ff00;
  box-shadow:            0px 0px 6px 4px #00ff00; /* x y blur len color */
}

#search-input  /* Campo de entrada del texto de busqueda */
{
  border:                solid 1px #008000;
  font-family:           "Courier New", Courier, serif;
  font-size:             1.1em;
  color:                 #000000;
  background:            #ffffff;
}

#search-input:hover
{
  box-shadow:            0px 0px 6px 4px #00ff00; /* x y blur len color */
}


/*////////////////////////////////////////////////////////////////////////////
// Images
////////////////////////////////////////////////////////////////////////////*/

img
{
  margin:                0px;
  padding:               0px;
  border:                0px;
}


div.But
{
  float:                 right;
  margin-left:           5px;
  background-image:      url('../img/arrowbluedark.png');
  width:                 30px;
  height:                30px;
}


div.But:hover
{
  background-image:      url('../img/arrowbluelight.png');
}


div.Rgh img, div.Bdy img.Rgh
{
  float:                 right;
}


div.Bdy img.Rgh
{
  padding:               0px 0px 8px 8px;
  width:                 66%;
}


div.Bdy img.Lft
{
  padding:               0px 0px 8px 0px;
  width:                 32%;
}


div.Bdy img.Mid
{
  padding:               8px 0px 8px 0px;
  width:                 100%;
}

div.Bdy img.Tin
{
  padding:               8px 0px 8px 0px;
  width:                 80px;
  border-top:            1px solid #009000;
  border-bottom:         1px solid #009000;
  border-right:          1px solid #009000;
  border-left:           7px solid #009000;
}


div.Cen /* Centrado, center */
{
  width:                 100%;
  text-align:            center;
}

div.Bdy img.Log /* Logotipo del programa, por ahora sin uso */
{
  padding:               8px 8px 0px 0px;
  float:                 left;
  width:                 200px;
  height:                200px;
}


/*////////////////////////////////////////////////////////////////////////////
// Video play button
////////////////////////////////////////////////////////////////////////////*/

div.video
{
  position:              relative;
  margin-bottom:         30px;
  padding:               0px;
  background:            #000000;
  border:                1px dashed #b0b0b0;
  text-align:            center;
}


img.videoplay
{
  position:              absolute;
  top:                   244px;
  left:                  317px;
  width:                 64px;
  height:                64px;
}

img.videoplay:hover
{
  top:                   240px;
  left:                  313px;
  width:                 72px;
  height:                72px;
}