body {
text align : center;
margin : 0px;
padding : 0px;
height : 100%;
max-height : 100%;
background-color : #000000;
color : rgb #000000;
overflow : auto;
}

#container {
margin-right : auto;
margin-left : auto;
text-align : center;
width : 1024px;
height : 710px;
}
#banner {
position : relative;
left : 0;
width : 1024px;
height : 90px;
color : #000000;
background: url("images/banner.jpg") 0 0 no-repeat;
text-align : right;
padding : 0px;
overflow : hidden;
}
#mid {
position : relative;
left : 0;
width : 1024px;
height : 310px;
margin-left : auto;
margin-right : auto;
margin-top : 0px;
color : #000000;
padding : 0px;
overflow : visible !important;
z-index : 2;
}
#bottom {
position : relative;
left : 0;
width : 1024px;
height : 310px;
margin-left : auto;
margin-right : auto;
margin-top : 0px;
color : #000000;
padding : 0px;
z-index : 1;
}

#bigpicadbox {
position : relative;
top : 30px;
float : right;
width : 300px;
height : 300px;
padding : 0px;
z-index : 30;
}

h1 {
background-color: transparent;
font : 125% Arial bold,geneva,helvetica;
color: gold;
}
h2 {
background-color: transparent;
font : 115% Arial,geneva,helvetica;
color: gold;
}
h3 {
background-color: transparent;
font : 110% Arial,geneva,helvetica;
color: gold;
}
h4 {
background-color: transparent;
font : 100% Arial,geneva,helvetica;
color: gold;
}

p {
background-color: transparent;
font : 100% textile,geneva,helvetica;
color: #FFFFFF;
}

#lftxtnav {
position : absolute;
left : 0px;
top : 0px;
height : 310px;
width : 140px;
padding-left : 0px;
background-colour : transparent;
color : #000000;
padding : 0px;
overflow : visible;
}
a {
	color: white;
	text-decoration: underline;
}
a:visited {
	color: grey
	}
a:hover, a:active {
	color: red
	}
a.ling {     
                position : absolute;
                text-indent: 2000em;
                display: block;
                top : 0 px;
                right: 30px;
                background-color : transparent;
                width: 90px;
                height: 90px;
                margin: 0px;
                padding: 0px 0px 0px 0px;
                font-family : textile, arial, helvetica;
                font-size : 10.5pt;
                color: white;
                text-decoration: none;
                text-align: right;
                }

a.atzarin, a.taller, a.instrumentos, a.noticias, a.autor, a.contactar, a.enlaces, a.presentacion, a.detalles, a.botoneras, a.acordes, a.escalas, a.orientacion, a.obtener, a.bisonoric, a.unisonoric, a.isomorphic, a.atzarinpg, a.tallerpg, a.instrumentospg, a.noticiaspg, a.autorpg, a.contactarpg, a.enlacespg, a.presentacionpg, a.detallespg, a.botoneraspg, a.acordespg, a.escalaspg, a.orientacionpg, a.obtenerpg, a.bisonoricpg, a.unisonoricpg, a.isomorphicpg, a.language {
		text-indent: -1000em;
		display: block;
		background-color : transparent;
		width: 138px;
		height: 44px;
		margin: 0px;
		padding: 0px 0px 0px 0px;
		font-family : textile, arial, helvetica;
		font-size : 10.5pt;
		color: white;
		text-decoration: none;
		text-align: center;
		}

/*  IE 5 hack \*/
/* end hack */ 
a.atzarin, a.taller, a.instrumentos, a.noticias, a.autor, a.contactar, a.enlaces, a.presentacion, a.detalles, a.botoneras, a.acordes, a.escalas, a.orientacion, a.obtener, a.bisonoric, a.unisonoric, a.isomorphic, a.atzarinpg, a.tallerpg, a.instrumentospg, a.noticiaspg, a.autorpg, a.contactarpg, a.enlacespg, a.presentacionpg, a.detallespg, a.botoneraspg, a.acordespg, a.escalaspg, a.orientacionpg, a.obtenerpg, a.bisonoricpg, a.unisonoricpg, a.isomorphicpg, a.language {overflow: hidden;}
/* end hack */ 

a.atzarin, a.atzarinpg { background: url("images/atzarinbutton.jpg") -2px 0 no-repeat;}
a.taller, a.tallerpg { background: url("images/tallerbutton.jpg") -2px 0 no-repeat;}
a.instrumentos, a.instrumentospg { background: url("images/instrumentosbutton.jpg") -2px 0 no-repeat;}
a.noticias, a.noticiaspg { background: url("images/noticiasbutton.jpg") -2px 0 no-repeat;}
a.autor, a.autorpg { background: url("images/autorbutton.jpg") -2px 0 no-repeat;}
a.contactar, a.contactarpg { background: url("images/contactarbutton.jpg") -2px 0 no-repeat;}
a.enlaces, a.enlacespg { background: url("images/enlacesbutton.jpg") -2px 0 no-repeat;}
a.presentacion, a.presentacionpg { background: url("images/presentacionbutton.jpg") -2px 0 no-repeat;}
a.detalles, a.detallespg { background: url("images/detallesbutton.jpg") -2px 0 no-repeat;}
a.botoneras, a.botoneraspg { background: url("images/botonerasbutton.jpg") -2px 0 no-repeat;}
a.acordes, a.acordespg { background: url("images/acordesbutton.jpg") -2px 0 no-repeat;}
a.escalas, a.escalaspg { background: url("images/escalasbutton.jpg") -2px 0 no-repeat;}
a.orientacion, a.orientacionpg { background: url("images/orientacionbutton.jpg") -2px 0 no-repeat;}
a.obtener, a.obtenerpg { background: url("images/obtenerbutton.jpg") -2px 0 no-repeat;}
a.bisonoric, a.bisonoricpg { background: url("images/bisonoricbutton.jpg") -2px 0 no-repeat;}
a.unisonoric, a.unisonoricpg { background: url("images/unisonoricbutton.jpg") -2px 0 no-repeat;}
a.isomorphic, a.isomorphicpg { background: url("images/isomorphicbutton.jpg") -2px 0 no-repeat;}

a.language { background: url("images/castellanobutton.jpg") -2px 0 no-repeat;}
a.ling { background: url("images/english.jpg") -180px 0 no-repeat;}

a.atzarin:hover,  a.taller:hover, a.instrumentos:hover, a.noticias:hover, a.autor:hover, a.contactar:hover, a.enlaces:hover, a.presentacion:hover, a.detalles:hover, a.botoneras:hover, a.acordes:hover, a.escalas:hover, a.orientacion:hover, a.obtener:hover, a.bisonoric:hover, a.unisonoric:hover, a.isomorphic:hover, a.language:hover {
		background-position: -142px 0;
		color: white;
		}
a.ling:hover {
		background-position: -90px 0;
		color: white;
		}
a.atzarin:active, a.taller:active, a.instrumentos:active, a.noticias:active, a.autor:active, a.contactar:active, a.enlaces:active, a.presentacion:active, a.detalles:active, a.botoneras:active, a.acordes:active, a.escalas:active, a.orientacion:active, a.obtener:active, a.bisonoric:active, a.unisonoric:active, a.isomorphic:active, a.language:active {
		background-position: -282px 0;
		color:white;
		}
a.ling: active {
		background-position: 0px 0;
		color:white;
		}
a.atzarinpg, a.tallerpg, a.instrumentospg, a.noticiaspg, a.autorpg, a.contactarpg, a.enlacespg, a.presentacionpg, a.detallespg, a.botoneraspg, a.acordespg, a.escalaspg, a.orientacionpg, a.obtenerpg, a.bisonoricpg, a.unisonoricpg, a.isomorphicpg, a.atzarinpg:hover,  a.tallerpg:hover, a.instrumentospg:hover, a.noticiaspg:hover, a.autorpg:hover, a.contactarpg:hover, a.enlacespg:hover, a.presentacionpg:hover, a.detallespg:hover, a.botoneraspg:hover, a.acordespg:hover, a.escalaspg:hover, a.orientacionpg:hover, a.obtenerpg:hover, a.bisonoricpg:hover, a.unisonoricpg:hover, a.isomorphicpg:hover, a.atzarinpg:active, a.tallerpg:active, a.instrumentospg:active, a.noticiaspg:active, a.autorpg:active, a.contactarpg:active, a.enlacespg:active, a.presentacionpg:active, a.detallespg:active, a.botoneraspg:active, a.acordespg:active, a.escalaspg:active, a.orientacionpg:active, a.obtenerpg:active, a.bisonoricpg:active, a.unisonoricpg:active, a.isomorphicpg:active 
		{
		background-position: -282px 0;
		color:red;
		cursor:default;
		}
#hold {
text-align : center;
position : absolute;
left : 140px;
top : 0px;
height : 550px;
width : 744px;
padding-left : 0px;
font : 7pt geneva,helvetica;
color: #FFFFFF;
background: url("images/txt.jpg") 0 0 no-repeat;
padding : 0px;
overflow : visible;
}
#longwelcome { 
position : absolute;
left : 51px;
top : 20px;
height : 550px;
width : 650px;
margin-left : auto;
margin-right : auto;
clear : right;
background-color: transparent;
text-align : left;
font : 10pt textile,geneva,helvetica;
color: gold;
padding : 0px;
z-index : 3;
overflow : auto;
line-height : 140%;
}
#welcome { 
position : absolute;
left : 51px;
top : 20px;
height : 550px;
width : 650px;
margin-left : auto;
margin-right : auto;
clear : right;
background-color: transparent;
text-align : left;
font : 10pt textile,geneva,helvetica;
color: gold;
padding : 0px;
z-index : 3;
line-height : 140%;
}
#welcome a.atr {
	text-decoration : none;
	background-color : transparent;
	color : white;
}

#welcome a.atr span {
	position : relative;
	display : inline;
	text-decoration : none !important;
}
#welcome a.atr .pop, #welcome a.atr .midpop, #welcome a.atr .inpop {
	text-decoration : none !important;
	top : 0px;
	left : 0px;
	background-color : black;
	display : none;
	border : 3px white double;
	width : 608px;
	height : 450px;
	margin-left : auto;
	margin-right : auto;
	padding : 15px;
	margin : 0px;
	margin-top : 0px;
	font : 12pt arial,geneva,helvetica;
	z-index : 3;
	text-align : left;
	overflow : auto;
}
#welcome a.atr .pop {
position : absolute;
height : 450px;
}
#welcome a.atr .midpop {
position : absolute;
height : 250px;
}
#welcome a.atr .inpop {
position : relative;
height : auto;
margin-bottom : 1000px
}
#welcome a.atr .picspop {
position : absolute;
height : 310px;
width : 764px;
top : 290px;
left : -61px;
background: url("images/blackpicslayout.jpg") 0 0 no-repeat;
display : none;
}
#welcome a.atr .picspopbox {
position : absolute;
height : auto;
width : 727px;
top : 290px;
left : -63px;
background: url("images/picsback.jpg") 0 0 no-repeat;
display : none;
text-decoration : none;
border : 3px white double;
	margin-left : auto;
	margin-right : auto;
	padding : 15px;
	margin : 0px;
	margin-top : 0px;
	font : 12pt arial,geneva,helvetica;
	z-index : 3;
	text-align : left;
	overflow : auto;
}

#welcome a.atr .picstriangles {
position : absolute;
height : 310px;
width : 764px;
top : 290px;
left : -61px;
background: url("images/picstriangles.jpg") 0 0 no-repeat;
display : none;
}
#welcome a.atr:hover .pop, #welcome a.atr:hover .midpop, #welcome a.atr:hover .inpop, #welcome a.atr:hover .picspop, #welcome a.atr:hover .picspopbox, #welcome a.atr:hover .picstriangles {
	text-decoration : none !important;
	display : inline-block;
}
#welcome a.atr:hover {
	border-width: 0; /* wake up IE */
	color: red;
}
/* aiuta IE/Mac (rel lh) \*//*/
.linkinside {
	display: inline;
}
/**/
#text3 {
position : absolute;
top : 290px;
left : -61px;
height : 310px;
width : 764px;
z-index : 10;
text-align : center !important;
overflow : visible;
padding: 0px;
}

#text2 { 
position : absolute;
left : 51px;
top : 20px;
height : 550px;
width : 645px;
margin-left : auto;
margin-right : auto;
clear : right;
background-color: transparent;
text-align : left;
font : 10pt textile,geneva,helvetica;
color: #FFCC33;
overflow: visible;
padding : 0px;
z-index : 3;
line-height : 140%;
}

#text2 TD { font : 10pt geneva,helvetica;}

#text2 TD a {text-decoration : none;
                    color: white;}

#text2 a.inline {
	display : inline;
	border-width : 0px;
	text-decoration : underline;
	background-color : transparent;
	color : white;
       }

#text2 a {
	display : block;
	border-width : 0px;
	text-decoration : underline;
	font : 10pt geneva,helvetica;
	background-color : transparent;
	color : gold;
       text-align : center;
}
#text2 a:hover {
color : red;
}
#text2 a span {display : none}

#text2 a:hover span {
display : block;
position : absolute;
top : 310px;
left : -95px;
min-height : 250px;
max-height : 310px;
width : 850px;
background-color : black;
border : 0px;
padding : 0px;
overflow : auto;
z-index : 11;
}
#text2 a.inline {
	display : inline;
	border-width : 0px;
	text-decoration : underline;
	background-color : transparent;
	color : white;
       }

#text2 a.small {
	display : block;
	border-width : 0px;
	text-decoration : none;
	font : 10pt geneva,helvetica;
	background-color : transparent;
	color : white;
       text-align : center;
}
#text2 a.small:hover {
color : red;
}
#text2 a.small span {display : none}

#text2 a.small:hover span {
display : block;
position : absolute;
top : 310px;
left : -61px;
min-height : 250px;
max-height : 310px;
width : 764px;
background-color : black;
border : 0px;
padding : 0px;
overflow : auto;
z-index : 11;
}
#text { 
position : absolute;
left : 51px;
top : 20px;
height : 270px;
width : 645px;
margin-left : auto;
margin-right : auto;
clear : right;
background-color: transparent;
text-align : left;
font : 10.5pt textile,geneva,helvetica;
color: #FFCC33;
overflow: auto;
padding : 0px;
z-index : 3;
line-height : 140%;
}

#text2 a img {height: 0; width: 0; border-width: 0;}	

#text2 a:hover img {
position : absolute;
top : 290px;
left : -104px;
height : 310px;
width : 850px;
z-index : 10;
text-align : center !important;
overflow : visible;
padding: 0px;
display: inline-block;
background: transparent;
}
#text2 a.small img {height: 0; width: 0; border-width: 0;}	

#text2 a.small:hover img {
position : absolute;
top : 290px;
left : -61px;
height : 310px;
width : 764px;
z-index : 10;
text-align : center !important;
overflow : visible;
padding: 0px;
display: inline-block;
}
TH {
text-align: center;
font: 12pt, helvetica;
font-weight: bold;
vertical-align: baseline;
speak-header: once; 
padding: 3px; }

TR {
height: auto;}

TD {
border : 1px solid white;
border-spacing: 3px;
font : 8pt,helvetica,arial !important;
color: white;
padding: 3px; }

TABLE   {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
 }

.TABLE1   {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
 }

.TABLE1 TH {
text-align: left;
font: 12pt, helvetica;
font-weight: bold;
vertical-align: baseline;
speak-header: once; 
padding: 3px; }

.TABLE1 TD {
border : 1px solid white;
border-spacing: 3px;
font : 8pt,helvetica,arial !important;
color: white;
padding: 3px; }

.CHORDS   {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
 }

.CHORDS TH {
text-align: left;
font: 6pt, helvetica;
font-weight: bold;
vertical-align: baseline;
speak-header: once; 
padding: 1px 10px; }

.CHORDS TD {
border : 1px solid white;
border-spacing: 2px;
font : 4pt,helvetica,arial !important;
color: white;
padding: 1px 2px; }

CAPTION { caption-side: top; }


#fotautorfront {
position : absolute;
left : 0px;
height : 195px;
width : 275px;
background-color : black;
border : 3px gold double;
z-index : 4;
overflow-x : hidden !important;
text-align : center;
}
#fotautorback  {
position : absolute;
left : 375px;
height : 195px;
width : 275px;
background-color : black;
border : 3px gold double;
z-index : 4;
overflow-x : hidden;
text-align : center;
}
#frontcap {
position : absolute;
top : 205px;
left : 0px;
height : 195px;
width : 275px;
margin-left : auto;
margin-right : auto;
padding : 0px;
background-color : transparent;
border : 0px;
z-index : 4;
text-wrap : normal;
text-align : center;
}
#backcap  {
position : absolute;
top : 205px;
left : 375px;
height : 195px;
width : 275px;
margin-left : auto;
margin-right : auto;
padding : 0px;
background-color : transparent;
border : 0px;
z-index : 4;
text-wrap : normal;
text-align : center;
}


#rghtxtnav {
position : absolute;
left : 884px;
top : 0px;
height : 310px;
width : 140px;
padding-left : 0px;
color : #000000;
padding : 0px;
text-align : right;
}
#lftpics {
position : absolute;
left : 0px;
top : 0px;
height : 310px;
width : 87px;
padding-top : 50px;
padding-left : 0px;
color : #000000;
z-index : 11;
}

#lftpics a {
	display : block;
	border-width : 0px;
	text-decoration : none;
	font : 10pt geneva,helvetica;
	background-color : transparent;
	color : #996600;
}
#lftpics a:hover {
color : #FFCC00;
}
#lftpics a span {display : none}
#lftpics a:hover span {
display : block;
position : absolute;
top : 0px;
left : 130px;
min-height : 250px;
max-height : 310px;
width : 744px;
background-color : black;
border : 3px white double;
padding : 10px;
overflow : auto;
z-index : 11;
}

#lftpics a img {height: 0; width: 0; border-width: 0;}	

#lftpics a:hover img {
position : absolute;
top : 0px;
left : 130px;
height : 310px;
width : 764px;
z-index : 11;
}
#pics {
position : absolute;
text-align : center !important;
left : 87px;
top : 0px;
height : 310px;
width : 850px;
padding : 0px;
z-index : 2;
color : #000000;
overflow : visible;
background : url("images/respacedpics.jpg") 0 0 no-repeat;
background-color: transparent;
font : 10pt textile,geneva,helvetica;
color: #FFCC33;
}
#chordpics {
position : absolute;
text-align : center !important;
left : 87px;
top : 0px;
height : 310px;
width : 850px;
padding-left : 0px;
z-index : 2;
color : #000000;
overflow : visible;
background : url("chords/images/Blank-chord-pics.jpg") 0 0 no-repeat;
background-color: transparent;
font : 10pt textile,geneva,helvetica;
color: #FFCC33;
}

#scalepics {
position : absolute;
text-align : center !important;
left : 87px;
top : 0px;
height : 310px;
width : 850px;
padding-left : 0px;
z-index : 2;
color : #000000;
overflow : visible;
background : url("scales/images/keyboard.jpg") 0 0 no-repeat;
background-color: transparent;
font : 10pt textile,geneva,helvetica;
color: #FFCC33;
}

#lang {
position : absolute;
top : 70%;
left : 0px;
height : 44px;
width : 138px;
overflow : visible;
z-index : 50;
}

#picstext {
position : relative;
left : 30px;
top : 0px;
overflow: auto;
height : 220px;
max-width : 792px;
text-align : left;
padding-left : 10px;
background-color: transparent;
padding : 0px;
z-index : 3;
font : 10pt textile,geneva,helvetica;
}
#adbanner {
position : relative;
top : 200px;
left : 0px;
width : 744px;
height : 90px;
color : white;
background: url("images/banner.jpg") 0 0 no-repeat;
text-align : centre;
padding : 0px;
overflow : hidden;
}

#rghtpics {
position : absolute;
left : 937px;
top : 0px;
height : 310px;
width : 87px;
padding-top : 50px;
padding-left : 0px;
color : #000000;
}
#rghtpics a {
	display : block;
	border-width : 0px;
	text-decoration : none;
	font : 10pt geneva,helvetica;
	background-color : transparent;
	color : #996600;
}
#rghtpics a:hover {
color : #FFCC00;
}
#rghtpics a span {display : none}
#rghtpics a:hover span {
display : block;
position : absolute;
top : 0px;
left : -764px;
min-height : 250px;
max-height : 310px;
width : 764px;
background-color : black;
border : 3px white double;
padding : 10px;
overflow : auto;
z-index : 11;
}

#rghtpics a img {height: 0; width: 0; border-width: 0;}	

#rghtpics a:hover img {
position : absolute;
top : 0px;
left : -764px;
height : 310px;
width : 764px;
z-index : 11;
}

#counter {
position : absolute;
left : 0px;
top : 70%;
height : 310px;
width : 130px;
padding-left : 0px;
text-align : right;
font : 7pt textile,geneva,helvetica;
color : white;
padding : 0px;
overflow : visible;
z-index : 20;
}

form {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  font:100% textile,arial,sans-serif;
  margin: 0;
  padding: 0;
  width: 640px;
  min-width: 500px;
  max-width: 640px;
  }

form fieldset {
  / * clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
  border-color: gold;
  border-width: 3px double white;
  padding: 10px;        /* padding in fieldset support spotty in IE */
  margin: 0;
}

form fieldset legend {
        font-size:1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
                       /* be careful with padding, it'll shift the nice offset on top of border  */
}

form label { 
        display: block;  /* block float the labels to left column, set a width */
        float: left; 
        width: 100px; 
        padding: 0; 
        margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
        text-align: right;
	color:white;
	font:100% textile,arial,sans-serif;
	z-index:7;
}

form fieldset label:first-letter { /* use first-letter pseudo-class to underline accesskey, note that */
        text-decoration:underline;    /* Firefox 1.07 WIN and Explorer 5.2 Mac don't support first-letter */
                                    /* pseudo-class on legend elements, but do support it on label elements */
                                    /* we instead underline first letter on each label element and accesskey */
                                    /* each input. doing only legends would  lessens cognitive load */
                                   /* opera breaks after first letter underlined legends but not labels */
}

form input {
	background-color:black;
	color:white;
        /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
        width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
        margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
	
}
form textarea {
        /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
        width:400px;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
        margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
	background-color:black;
	color:white;
}

form input#reset {
        margin-left:0px; /* set margin-left back to zero on reset button (set above) */
	width:auto;
}

textarea { overflow: auto; }

form small {
        display: block;
        margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
        padding: 1px 3px;
        font-size: 88%;
}

form .required{font-weight:bold;} /* uses class instead of div, more efficient */

form br {
        clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}
td.date {
	vertical-align:top;
	color:white;
}







a5