* { margin: 0; padding: 0; }

body {
	font-size: 1em;
	min-width: 22em;
	font-family: "Lucida Grande","Arial Unicode MS",sans-serif;
	background-color: #770055;
}

/********* comunes ************/

h1, #index li, #index li a, .section {
	border-width: 2px;
	border-style: groove;
	border-color: #DDBB33;
	border-radius: 10px;
}

#index ul, dl, #footer ul { list-style-type: none; }

#index li a, #footer a, #footer a { text-decoration: none; }

.section, .section p, .section dl, h2, h3, .section .texto, #footer { width: 94%; margin: 0 auto; }

#header, #index ul, #footer, #footer ul { overflow: hidden; }

#index li, #index li a, code, #footer li, #footer li a { display: block; }

/* colores */

body, #footer li a { color: #ffee66; }

h1, #footer a { color: #ff8811; }

h2, h3 { background-color: #ffee66; color: #770055; }

#index li, #index li a { background-color: #ffff77; color: #000; }

#index li:hover, #index li:hover a, #index li a:hover { background-color: #ff8811; color: #770055; }

.section, .section p, .section dl  { background-color: #ffee66; color: #000; }

/******************************/

h1 {
	width: 52%;
	height: 4.8em;
	line-height: 4.8em;
	text-align: center;
	float: left;
	margin-left: 2%;
	margin-top: 0.3em;
	border-color: #ff8811;
	position: relative;
}

h1 span {
	font-size: min(1em, 64px);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

h1 div {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: #770055;
	background-repeat: no-repeat;
	background-position: center;
}

#index {
	float: right;
	width: 44%;
	margin-top: 0.7em;
}

#index li {
	float: right;
	min-width: 9em;
	width: 80%;
	margin-right: 5%;
	margin-bottom: 0.3em;
}

#index li a {
	text-align: center;
	height: 1.8em;
	line-height: 1.8em;
	font-size: 1.1em;
	border: none;
}

.section {
	margin: 2em auto;
	position: relative;
	padding-bottom: 1em;
}

.section p, .section dl { padding-bottom: 1em; }

h2 { height: 2.5em; line-height: 2.5em; }

.section dd { margin-left: 1.5em; }

.section ul {
	width: 90%;
	margin: 0 auto;
	padding-bottom: 1em;
}

@media only screen and (max-width:503pt) {

h1 div {
	height: 64px;
	left: 10px;
	right: 10px;
	background-image: url(logo_64.png);
}

} /* media */

@media only screen and (min-width:504pt) {

body { min-width: 42em; }

h1 { height: 5.3em; }

h1 span {
	font-size: min(1em, 128px);
}

h1 div {
	height: 128px;
	left: 10px;
	right: 10px;
	background-image: url(logo_128.png);
}

#index li { margin-bottom: 0.6em; }

.section ul { width: 80%; }

} /* media */

h3 { margin-bottom: 0.3em; }

.section .texto { text-indent: 3em; }

code {
	width: 80%;
	margin: 1em auto;
}

address {
	font-size: 10pt;
	float: left;
	margin-left: 0.2em;
	margin-top: 0.2em;
}

.dot, .at {
	font-size: 4px;
	color: #770055;
}

.dot:after , .at:after {
  font-size: 10pt;
  color: #ffee66;
}

.dot:after {
  content: ". ";
}
.at:after {
  content: "@ ";
}

#footer { margin-bottom: 0.5em; }

#footer li {
	float: left;
	margin-right: 1.5em;
	margin-bottom: 0.5em;
}

#footer p {
	float: right;
	font-size: 10pt;
}

/* fin */