body {
width: 90%;
background-color: black; 
color: #cccccc;
font-family: arial;
text-align: center;
margin: 0 auto;
font-size: 1em
}
a{text-decoration: none }
a:hover{ text-decoration: underline }
a:link{ color: #50f13e }
a:visited{ color: #a84ac1 }
blockquote{ text-align: left; font-style: oblique; color: white}

table, th, td { border: 1px solid }

li { text-align: left; margin-bottom: 20px } 

.principal { background: url(img/rostro.gif) no-repeat }
.principal { background-position: right bottom } 
.principal h3 { color: #555555; padding-left: 0; margin: 0; text-align: center } 
.principal ol { margin: 20px 0 50px 0; padding-left: 5%; text-align: left}
.principal li { margin-bottom: 5px }
.principal ul.botones { padding: 0; list-style: none; }
.principal ul.botones img { width: 80px; height: 31px; margin: 5px }
.principal ul.botones li { float: left }
.principal .icono { display: none } 
.principal .nuevo { color: red; font-weight: bold; font-size: 0.9em; }


img { width: 100%; height: auto }
.log ol{ padding: 0; margin: 0 }
.log li {list-style: none; float: left }
.log img{width: auto !important; padding: 5px;}

p { line-height: 1.5; text-align: left }
hr { border: dashed 1px gray }
iframe { width: 100% }


@media screen and (min-width: 1080px){
       body{ width: 50% }
       .principal h3 { padding-left: 40%; text-align: left} 
       .principal ol { padding-left: 50%; text-align: left}
       .principal .icono { display:inline ; float: left; width: 100px; height: auto }
}