@font-face {
  font-family:'opensans';
  src: url(fonts/opensans.otf);
}
@font-face {
  font-family:'bebas';
  src: url(fonts/BebasNeue-Regular.otf);
}
@font-face {
  font-family:'bebaslight';
  src: url(fonts/BebasNeue-Light.otf);
}
@font-face {
  font-family:'slimjim';
  src: url(fonts/SlimJim.ttf);
}
@font-face {
  font-family:'kaushan';
  src: url(fonts/KaushanScript-Regular.otf);
}
@font-face {
  font-family:'kingthings';
  src: url(fonts/Kingthings_Foundation.ttf);
}
@font-face {
  font-family:'chomsky';
  src: url(fonts/Chomsky.otf);
}
@font-face {
  font-family:'dearest';
  src: url(fonts/Dearest.ttf);
}


        body {
            font-family:'opensans';
            font-size:12pt;
        }
        h1,h2,h3,h4,h5,h6 {margin:0px; padding:0px; margin-top:0.5em}
        p{margin:0px; padding:0px; margin-top:0.5em}
        table.resu {border-top:1px solid #666; border-left:1px solid #666; margin:5%; margin-top:10px}
        table.resu td {border-right:1px solid #444; border-bottom:1px solid #444}
        table.resu td span.a {font-size:110%; color:blue}
        table.resu td span.b {font-size:110%; color:green}
        table.resu td span.c {font-size:110%; color:purple}
        table.resu td b {font-size:110%}
        div.mostrar  h1 {color:#000; font-size:250%}
        div.mostrar  h2 {color:#444; margin-left:0.25em; font-size:200%}
        div.mostrar  h3 {color:#666; margin-left:0.5em; font-size:175%}
        div.mostrar  h4 {color:#840; margin-left:0.75em; font-size:150%}
        div.mostrar  h5 {color:#269; margin-left:1em; font-size:120%}
        div.zona  h1 {color:#008; font-size:250%}
        div.zona  h2 {color:#448; margin-left:0.25em; font-size:200%}
        div.zona  h3 {color:#66C; margin-left:0.5em; font-size:175%}
        div.zona  h4 {color:#66F; margin-left:0.75em; font-size:150%}
        div.zona  h5 {color:#49F; margin-left:1em; font-size:120%}
        p.capt {position:relative; width:99%; margin-top:1em}
        p.capt input[type="text"] {width:60%; margin-left:5%; margin-right:5%; position:relative; display:inline-block;}
        p.capt span {position:absolute; font-size:80%; top:-1.3em; color:#444; margin-left:5%}
        p.capt span span {position:relative; font-weight:bold; color:green; top:0px; margin-left:0px; font-size:90%}
        p small {font-size:90%; color:#808; font-style:italic}
        p small.gris {font-size:80%; color:#666; font-style:normal}
        p small b {font-size:120%; color:#000; font-style:normal}
        p small u {font-size:110%; color:red}
        p {position:relative}
        p textarea {position:relative; background-color:#ffc; font-family:monospace; font-size:100%; width:90%; margin-left:5%; margin-right:5%; display:inline-block}
        p input[type="button"]{display:inline-block; margin-left:5%; position:relative}

        p span.camplist {font-family:monospace; color:#666; position:relative; overflow:visible; display:inline-block; margin:0px; padding:0px; width:auto; margin-left:5%}
        p span.camplist b {font-family:"opensans"; color:#008}
        p span.camplist big {font-size:120%; color:#000; cursor:pointer}
        p span.camplist big span {position:absolute; background-color:#444; color:#ffc; font-family:'opensans'; font-size:80%; opacity:0; bottom:3em; right:1em; width:0px; height:0em; overflow:clip; padding:0px; border-radius:5px; box-shadow:2px 2px 4px #000; transition:opacity 1s}
        p span.camplist big span span.salida {position:relative; background-color:none; opacity:1; font-family:monospace; color:#3f4; font-size:90%; top:0px; left:0px; width:auto; height:auto; display:inline-block; box-shadow:none }
        
        p span.camplist big span b {color:#9ff; font-size:90%}
        p span.camplist big span u {color:#9f9; font-size:90%}
        p span.camplist big span a {color:#ff0; font-size:110%; display:inline-block; margin-right:2%; margin-left:1%; width:10%}
        p span.camplist big span a:hover {color:#f66; font-size:120%}
        p span.camplist big.visis span {opacity:1; width:70%; height:auto;  padding:6px}
        p span.camplist big.invis span {opacity:0; width:0px; height:0em;  padding:0px}
        span#statremoto b{font-size:120%; cursor:pointer}
        span#statremoto b+i{font-size:95%; color:#808; cursor:pointer}
        span#statremoto b:hover+i , span#statremoto b+i:hover, span#statremoto b:hover {color:#f00; font-weight:bold}
        
        
        @media screen /*telefonos*/
        and (min-width:0px) 
        and (max-width:480px) {
           p.capt input[type="text"] {width:40%;}
           p span.camplist big span a {width:30%}    
        }

        @media screen /*Telefonotes*/
        and (min-width:480px) 
        and (max-width:768px) {
           p.capt input[type="text"] {width:50%;}
           p span.camplist big span a {width:30%}    
        }

        @media screen /*Tablets*/
        and (min-width:769px) 
        and (max-width:1000px) {
           p.capt input[type="text"] {width:50%;}
           p span.camplist big span a {width:20%}    
        }

        @media screen /*Monitores*/
        and (min-width:1001px) 
        and (max-width:1200px) {
        }

        @media screen /*Monitores Grandes*/
        and (min-width:1201px) {
        }