/* CSS for Orfeón Calagurritano site */

body {font-family: Verdana; Arial, sans-serif;
      background-color: #FFF ;
      line-height: 125%;
      padding: 0;
      margin: 0;}

h1, h2, h3 {font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;}


h1 {font-size: x-large;
    color: white;
    padding-top: 2em; padding-bottom: .4em; padding-left: .4em; margin: 0;
    height: 20px;
    background: #000 ;}
   

h2 {color: #42036f;
    font-size: 130%;
    font-weight: normal;
    padding-top: 15px;}



h2, ul {margin-top: 15px;}

h3 {color: #000; font-size: 100%; font-weight: lighter;}



p {font-size: small;
   color: #3a2c39}

#tagline p {font-style: italic;
            font-family: Georgia, Times, serif;
            color: #1co772;
            background-color: #c7b6ce;
            border-top: 3px solid  #6d3783;
            border-bottom: 3px solid #6d3783;
            padding-top: .2em; padding-bottom: .2em; padding-left: .8em;
            margin: 0;}


/* los links y su estado al pasar el cursor por encima */
a {font-weight: bold;
   color: black;}
a:link {color: #CCC;}
a:visited {color: white;}
a:hover {text-decoration: none; color:white; background-color: #e5d7e4;}
a:active {
	color: #FF0;
	background-color: #e5d7e4;
}

#fotospages { width: 250px; background-color:#000; color: #FFF;}



/* aplicando un class selector, se distingue del id selector en que puede aparecer tantas veces como quieras, el id selector solo puede ser aplicado
   a un xhtml element*/ 
.fun {font-family: Georgia, Times, serif;
      color: #680bab;
      letter-spacing: 0.05em;
      font-style: italic;}

#navigation {
	width: 180px;
	background-color: #6d3783;
	color: #000;
         }


/*Esta sección trata de la posicion de los elementos en la pantalla. Uso posicionamiento absoluto, fijando x e y como coordenadas medidas desde la parte superior izquierda del contenido que muestra el navegador*/

#navigation, #bodycontent, #header {
	position: absolute;
	left: 3px;
	top: 3px;
}

#navigation, #bodycontent {
	top: 113px;
}

#bodycontent {
	left: 210px;
}

#header { width: 100%;}

/* fin del posicionamiento */

#header {border-top: 3px solid #6d3783;}

.feature {float: right; margin: 15px;}


.galleryphoto p{ font-size:65%; font-weight: bold; margin-top: 0; line-height: 1.4em;}
.galleryphoto {padding-top: 20px;
               padding-bottom: 10px;
               border-bottom: 1px solid #42036f;
               margin-bottom: 50px;}
.galleryphoto { position:absolute; left: 450px; top:250px; widht: 1000px;}   

table.members {border-collapse:collapse; }
table.members th, table.members td {padding: 4px; border: 1px solid #000;}
table.members th {font-size: 13px; font:"Courier New", Courier, monospace ; background-color:#000; color:#FFF;}
table.members td {font-size: small;}
table.members caption {font-size:12px; font-style:italic; text-align:left; padding-bottom: 15px;}


#listasrepertorio {font-size: small; font-style: italic;}
#firstlist {
	position: absolute;
	left: 10px;
	top: 120px;
	width: 700px;
}

#secondlist {
	position: absolute;
	left: 450px;
	top: 120px;
	width: 700px;
}
#thirdlist {
	position: absolute;
	left: 10px;
	top: 1000px;
	width: 700px;
}

#multimediasong { position:absolute; left: 450px; top: 1000px; widht: 700px;}

           
 ol {list-style-type: katakana-iroha;}  
 ul {font-size: small;
      list-style-type: none;}