/*Defensive cross-browser coding: define margin and padding in most elements*/
/*Accessibility: all text should be scalable; some galleries and special effects aren't*/
/*Commented out background-color tags used to check positioning*/

html, body {
	border: 0; margin: 0; padding: 0; /*make sure all browsers share the same defaults*/
	background-color: #fff; color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px; /*helps relative size calculations later on, for normal-sized text on browsers*/
	overflow: auto; /*get rid of IE's scrollbar if not needed*/
	}

p    {margin: 1em 0; padding: 0;}
.top {margin-top: 0; padding: 0;}
hr   {color: #aaa; background-color: #fff;}
img  {border: 0;}

h1    { font-size: 2em;    margin: .67em 0 }
h2    { font-size: 1.5em;  margin: .75em 0 }
h3    { font-size: 1.17em; margin: .83em 0 }

#maintitle { /*Space Weirdo name in all pages*/
	font-size: 3.2em; /*32px; now, 1em=32px*/
	margin: 1.4em auto 0 auto; padding: 0; /*2em=64px*/
	text-align: center;
	}
#tagline { /*tin tunes etc. in all pages*/
	font-family: "courier new", courier, monospace;
	font-size: 1.4em;
	text-align: center;
	}
#intro {/*div para el studer*/
	margin: 5em auto 4em auto; padding: 0;
	background-color: #fff; color: #000;
	height: 18em; width: 18em;
	border: 0px;
	}
#content {/*Almost all content goes in here. Watch out for overflow (IE6 kills me)*/
	font-size: 1.4em; /*should be 14px; now 1em=14px*/
	margin: 6.5em auto 4em auto; padding: 0;/*105px top, 84px bottom*/
	height: 29em; /*406px*/	width: 47em; /*658px*/ 
	/*background-color: teal;*/
	}
	
.lat {/*contenedores laterales en varias páginas*/
	margin: 0;  padding: 0;
	width: 12.85em; height: 26em;
	float: left;
	/*background-color: Olive;*/
	}
.lat-head {width: 12.85em; height: 2em;}
.lat-body {
	width: 12.85em; height: 24em;
	margin: 0;
	float: left;
	overflow: auto;
	/*background-color: Lime;*/
	}
/*lyrics, web, events and press links*/
.lat-body a, .lat-body a:visited {
	display: block;
	font-size: 0.8em;
	width: 11.8em;
	text-decoration: none;
	margin: 0.2em 0; padding: 0.1em 0.2em;
	border: 1px solid #ffe; /*not white to get rid of CSS validator warning;*/
	background: #fff;	color: #000;
	}
.lat-body a:hover {
	background-color: #fff;	color: #000;
	border: 1px solid #000;
	}
.lat-body a:active, .lat-body a:focus {
	background-color: #777;	color: #fff;
	border: 1px solid #000;
	}
.lat-body span.title {
	display: block;
	font-weight: bold;
	margin: 1em 0;
	}
.lat-body span.current {
	display: block;
	width: 11.8em;
	font-size: 0.8em;
	margin: 0.2em 0; padding: 0.1em 0.2em;
	color: #b00; background-color: transparent;
	border: 1px solid #fff;
	}
.lat-body img {border: 0;}

#izq-link {/*zona botones interálbum, bajo las imágenes*/
	margin: 0 auto; padding: 0.6em;
	width: 11.7em;
	text-align: center;
	line-height: 1.6em; /*permitiría más filas de botones*/
   /*background-color: blue;*/
	}
#izq-link a, #izq-link a:visited {
	margin: 0; padding: 0.2em 0.4em;
	font-size: 0.78em;
	text-decoration: none;
	border: 1px solid #000;
	background: #fff;	color: #000;
	}
#izq-link a:hover {
	background: #ccc;	color: #000; 
	}
#izq-link a:active, #izq-link a:focus {
	background: #777;	color: #000; 
	}
#izq-link span.current {
	padding: 0.2em 0.4em;
	font-size: 0.78em;
	border: 2px solid #000;
	}
	
#izq-intro { /*página intro de cada álbum, zona de imagen*/
	margin: 0 1.2em 0 0; padding: 0;
	width: 17.14em; height: 26em;
	float: left;
	/*background-color: Yellow;*/
	}

#cent { /*contenedor central de la zona de álbums*/
	width: 19.2em;	height: 26em; /*252px x 364px*/
	margin: 0 1em;
	float: left;
	overflow: visible; /*IE6 justified-text/italics problem*/
	/*background-color: orange;*/
	}
#cent-head {
	width: 19.2em; height: 2em;
	text-align: center;
	/*background-color: maroon;*/
	}
#cent-body {
	width: 19.2em; height: 24em; /*269px X 336px*/
	margin: 0;
	float: left;
	overflow: auto;
	/*background-color: Lime;*/
	}

#col01 { /*columna de la izquierda con links a las muestras de los CDs*/
	position: relative;
	padding: 1em 0 0 2em;
	width: 11em; height: 20em;
	text-align: left;
	float: left;
	/*background-color: gray;*/
	}
#col02 {/*columna de la derecha con los tamaños de las descargas*/
	display: block; 
	padding: 1em 0 0 0;
	line-height: 1.3em;
	width: 4.4em;	height: 20em;
	text-align: right;
	float: left;
	/*background-color: Red;*/
	}
	
#dcha-intro {/*contenedor parte derecha en página de intro de cada álbum*/
	width: 28em; height: 26em;
	float: left;
	/*background-color: Red;*/
	}

#dcha {/*contenedor en zona derecha para lyrics, web, events, etc.*/
	width: 33em; height: 26em;
	margin: 0 0 0 1em;
	float: left;
	/*background-color: Orange;*/
	}
#dcha-head {width: 33em; height: 2em;}
#dcha-body {
	width: 38.8em; height: 28.2em;
	margin: 0;
	float: left;
	overflow: auto;
	font-size: 0.85em;
	/*background-color: red;*/
	}

#linkbox { /*navigation bar at bottom*/
	margin: 0 auto 1.5em auto;
	text-align: center;
	}
#linkbox a, #linkbox a:visited {
	font-size: 1.1em; /*11px*/
	text-decoration: none;
	padding: 0.3em 0.5em;
	border: 1px solid #000;
	background: #fff; color: #000;
	}
#linkbox a:hover{
	background: #ccc;	color: #000;
	}
#linkbox a:active, #linkbox a:focus {
	background: #777;	color: #000;
	}
#linkbox span.current {
	font-size: 1.1em;
	padding: 0.3em 0.5em;
	border: 2px solid #000;
	}

.bottombar {
	border-top: 1px solid #999;
	margin: 0.5em auto; padding-top: 0.5em;
	text-align: left;
	width: 27em;
	}
	
#ccbutton {
   display: block;
   float: right;
	width: 80px; height: 15px;
   background: url(../img/cc_byncnd80x15roll.png) no-repeat 0 0;
	}
#ccbutton:hover {background-position: 0 -15px;}
#ccbutton span  {display: none;}

.bottomintro {/*zona inferior invisible en index.html, para ver bien los enlaces*/
	margin: 5em auto 0em auto; /*padding-top: 0.5em;*/
	text-align: center;
	width: 28em;
	}
	
span.copyinfo {
	font-size: 1.1em;
	background-color: #fff; color: #999;
	}

a.song, a.song:visited { /*sample songs links; cater for popup images*/
	display: block; 
	margin: 0; padding: 0; 
	width: 11em; height: 1.3em;
	top: 0; left: 0;
	background: #fff; color: #000;
	text-decoration: none; 
	border: 0px;
	}
a.song span {	
	display: block; position: absolute; 
	top: -100px; left: -100px; 
	width: 1px; height: 1px; 
	border: 0px; 
	overflow: hidden; 
	z-index: -1;
	}
a.song:hover {
	white-space: normal;	
	border: 0px;
	text-decoration: none; 
	background-color: #ccc; color: #000;	
	}
a.song:hover img {
	border: 0px solid #000;
	z-index:100;
	}
a.song:active img, a.song:focus img {
	border: 0px solid #000;
	}
a.song:hover span {
	display: block; position: absolute; 
	width: 20em; height: 22em; 
	top: -2em; left: 19em; 
	background: #fff; color: #000;
	z-index: 100;
	}
a.song:active, a.song:focus {
	background: #777;	color: #000; 
	border: 0px;
	}
a.song:active span, a.song:focus span {
	display: block; position: absolute; 
	width: 20em; height: 22em; 
	top: -2em; left: 19em; 
	border: 0px;
	background: #fff; color: #000;
	}

	
.small {font-size:  0.85em;}
.tiny  {font-size:  0.76em;}
.just  {text-align: justify;}
.rpad  {padding: 0 0.4em 0 0;}
.pale  {background: #fff; color: #666;}

.petit { /*for unordered lists*/
	font-size: 0.85em;
	list-style-position: inside;
	margin: 0 0 1em 0; padding: 0;
	}
	
.verif { /*lista sin números de temas en la página de verificacion*/
	font-size: 0.76em;
	list-style-position: inside;
	margin: 0 0 1em 0; padding: 0;
	text-align: justify;
	background: #fff; color: #666;
	}
.verif li {
	margin-bottom: 0.5em;
}
.verif a, .verif a:visited {/*enlaces en página de verificación*/
	background: #fff; color: #333;
}
.verif a:hover {
background: #fff; color: red;
}
.verif span {
	font-weight: bold;
	background: #fff; color: #000; 
}
.verif img {
	margin: 0.5em 0.5em 0 0;
}

img.floatright {
	float: right;
	margin-left: 1em;
	border: 0;
	}
img.floatright2 {
	border: 0;
	float: right;
	margin: 1em 0.5em 0 0.5em; padding: 0;
	}
img.floatleft {
	float: left;
	margin-right: 1em;
	border: 0;
	}
img.clearboth {
	clear: both;
	margin: 0;
	border: 0;
	}
img.border { /*used in wallpaper gallery*/
	border: 1px solid #000;
	}
	
a.square, a.square:visited {/*botón weird amen*/
	display: block;
	width: 6em;
	margin: 1.5em auto; padding: 0.3em 0.5em;
	text-decoration: none;
	border: 1px solid #000;
	background: #fff; color: #000;
	}
a.square:hover{
	background: #ccc; color: #000;
	border: 1px solid #000;
	}
a.square:active, a.square:focus {
	background: #777; color: #000;
	border: 1px solid #000;
	}