/* 
 * CSS para el Taller de Analisis Geometrico.
 * Jose, julio 2009.
 * ---------------------------------------------------------------------
 */

body {
    font-size: 16px;
    font-family: sans-serif;
    background-color: #f7f7ff;
}

h1,h2,h3 {
   color: #333;
}

h1 {
  margin-top: 0;
  font-weight: normal;
  /* text-shadow: 2px 2px 3px #ccccff; */
}

h2 {
  border-bottom: 1px solid #ccccff;
}

p {
  margin-left: 1.5em;
}

img {
  border: none;
}

/* 
 * Mail links
 * ---------------------------------------------------------------------
 */

a.mail {
    padding: 0 0 0 25px;
    margin-right: 0em;
    background: url("mailp.png") center left no-repeat;
}

/* 
 * Parrafos con columnas
 * ---------------------------------------------------------------------
 */

p.columns {
    -moz-column-width: 13em;
    -moz-column-gap: 1em;
    -webkit-column-width: 13em;
    -webkit-column-gap: 1em;
    column-width: 13em;
    column-gap: 1em;
}

p.columns.wide {                /* For wider columns. */
    -moz-column-width: 20em;
    -moz-column-gap: 1em;
    -webkit-column-width: 20em;
    -webkit-column-gap: 1em;
    column-width: 20em;
    column-gap: 1em;
}

p.columns span.subtitle {
    font-weight: bold;
    -webkit-break-after:avoid-column;
    -moz-break-after:avoid-column;
    break-after:avoid-column;
}


/* 
 * News
 * ---------------------------------------------------------------------
 */

div#news {
  padding: 1px 10px;
  background-color: #e0e0ff;
  border-radius: 5px;
  box-shadow: 3px 3px 3px #aaf;
}

span.date {
  font-weight: bold;
}

/* 
 * Lista de organizadores
 * ---------------------------------------------------------------------
 */

div#organizers {
    float:right;
    padding: 10px 25px 10px 40px;
    margin-left: 10px;
    border-left: 2px solid #ccccff;
    background-color: #eeeeff;
}

div#organizers h3 {
    position: relative;
    left: -15px;
    font-size: 105%;
    margin: 0 0 .5em 0;
    padding: 0;
    border-bottom: 1px solid #ccccff;
}

/* 
 * Resumenes de las charlas
 * ---------------------------------------------------------------------
 */

h4 {
  margin: .2em 15px;
  padding-left: 25px;

  color: #000077;
}

h4.off:hover, h4.on:hover {
  cursor: pointer;   /* Indica que se pueden pulsar. */
}

h4.off {
  background: url("rightarrow.png") top left no-repeat;
  border-bottom: 1px dashed #ccccff;
}

h4.on {
  background: url("downarrow.png") top left no-repeat;
}

h5 {
  margin: 0;
  margin-left: 23px;
  padding: 0 0 5px 12.5em;
  border-left: 1px dashed #ccccff;
}

p.charla {
  margin: 0;
  margin-left: 23px;
  padding: 0px 0 15px 13em;
  border-left: 1px dashed #ccccff;
  font-size: 80%;
}

h4 + p.charla{
  padding: 0px 0 15px 25px;
  font-size: 90%;
}

span.hora {
  margin-right: 10px;
  font-size: 100%;
  color: #ff3333;
}


/* 
 * Mapa
 * ---------------------------------------------------------------------
 */


p#map {
  float: right;
  text-align: center;
}

p#map iframe {
  padding: 5px;
  background-color: white;
  border: 1px solid #ddd;
  box-shadow: 2px 2px 2px 0px #aaaacc;
}

/* 
 * Indice de la pagina.
 * ---------------------------------------------------------------------
 */

div#side ul {
  margin: 0;
  padding: 0;

}

div#side ul li {
  list-style-type: none;
  margin: 0;
  padding: 0;

  /* border: 1px solid #ccccff; */
}

div#side ul li a {
  display: block;

  margin: 5px 0;
  padding: 5px;

  text-decoration: none;
}

div#side ul li a:hover {
  background-color: #f0f0ff;
}

div#side h3 {
  font-size: 105%;
  margin: 0;
  padding: 5px;
}

/* 
 * Estilo con dos columnas.
 * ---------------------------------------------------------------------
 */


body {
    margin: 20px;
    padding: 0;

    min-width: 55em;
    /* 'body' controls minimum width, but has no maximum width so that it
       always fills the viewport. */
}

div#all {
    margin: auto;
    max-width: 65em;
    /* 'div#all' has a maximum width, and it will appear centered in
       larger viewports. Minimum width is already handled by 'body'.*/

    padding: 0 3% 20px 3%;         /* Top Right Bottom Left */

    /* border: 1px solid blue; */
}

div#side {
    float: left;
    width: 15%;

    padding: 2%;
    padding-right: 0%;

    margin: 0%; 
    margin-top: 0;              /* Otherwise div#side and div#main are
                                   difficult to align vertically. */
    /* font-size: 90%; */

    border: 1px solid #ccccff;
    border-right: white;
    background-color: white;
}

div#main {
    padding: 2%; 
    margin: 0%;
    margin-top: 0;              /* Otherwise div#side and div#main are
                                   difficult to align vertically. */
    /* margin-left
         = (2*padding + 2*margin + width) of div#side
           + additional desired separation. */
    margin-left: 17%;

    /* 2*padding + margin + margin-left + width = 100% */
    /* (Border width not included in calculations.) */
    width: 79%;

    border: 1px solid #ccccff;
    background-color: white;
}

div#footer {
    clear: both;
    text-align: center;
}