@charset "utf-8";

@import url("/simuladores/css/reset.css");

body{ color: #000; background-color: #fff; font: 76%/140% Arial, Helvetica, sans-serif; }

a{ color: #000; background-color: #fff; text-decoration: underline; }

.warn{ color: red; background-color: inherit; }
.error{ border: solid 1px red !important; }

noscript p.warn
{
  width: 60%;
  padding: 1em;
  margin: 0 auto 4em;
  border: solid 1px red;
  text-align: center;
}

.h
{
  /*display: none !important;*/
  
  /*
   * els principals screen readers (JAWS, Window Eyes i IBM Home Page Reader)
   * no llegeixen els elements amb un display:none o visibility:hidden, encara
   * que el css estigui destinat a medis visuals (@media: screen), ignorant la
   * especificació oficial...
   */
  height: 0; width: 0; overflow: hidden; position: absolute; 
}

input.numeric{ text-align: right; }



#wrapper{ width: 557px; }

  #header, #contents, #footer{ float: none; clear: both; }

  #header{ height: 81px; }
    
    h1 a
    {
      display: block;
      width: 195px;
      height: 81px;
      color: inherit;
      background: #fff url(/simuladores/img/logo.png) no-repeat;
      float: left;
    }
    
    h1 a strong
    {
      /*display: none !important;*/

      /* screenreaders ... */
      height: 0; width: 0; overflow: hidden; position: absolute;
    }
    
    h1 em
    {
      display: block;
      float: right;
      width: 296px;
      padding: 20px 0 3px 30px;
      
      color: #9f9f9f;
      background-color: #800040;
      
      font-size: 1.4em;
      font-style: normal;
      font-weight: bold;
      text-transform: uppercase;
    }
    
      h1 em.standalone
      {
        /*
         * si se decide eliminar el titulo del simulador que aparece sobre fiondo gris,
         * debajo del titulo 'simulador', a la etiqueta em anidada dentro del h1 habria
         * que añadirle el class 'standalone' para que siga apareciendo la franja gris
         */
        padding: 20px 0 16px 30px;
        color: inherit;
        background: #800040 url(/simuladores/img/bg/header.png) repeat-x bottom;
      }
    
    h2
    {
      display: block;
      float: right;
      width: 296px;
      padding-left: 30px;
      color: #fff;
      background-color: #9f9f9f;
      font-weight: bold;
    }
    
      h2 span
      {
        /*display: none !important;*/
        
        /* screenreaders ... */
        height: 0; width: 0; overflow: hidden; position: absolute;
      }

  #contents{ height: 350px; padding: 40px 1em 10px; overflow: auto; }
  
  #s1 #contents{ height: 320px; }
  
    #contents form{ display: block; width: 90%; margin: auto; }
    
      #contents form ol{ list-style: none; }
      
      #contents form ol li
      {
        min-height: 1.8em;
        float: none;
        clear: both;
        
        /* opera per algun motiu no accepta la següent regla */
        margin-bottom: 1.8em;
      }
      
      #contents fieldset{ clear: both; }
      #contents fieldset.col{ float: left; clear: right; width: 48%; }
      
      #contents label,
      #contents input[type='text'],
      #contents input.t,
      #contents textarea,
      #contents select,
      #contents form span,
      #contents fieldset fieldset legend,
      #contents fieldset fieldset p.legend,
      #contents fieldset fieldset ul{ float: left; }
      
      #contents label,
      #contents fieldset fieldset legend,
      #contents fieldset fieldset p.legend
      {
        width: 50%;
        padding-right: 5px;
        clear: left;
        text-align: right;
      }
      
      #contents input[type='text'],
      #contents input.t,
      #contents textarea{ width: 33%; padding: 2px 3px; }
      
      #contents select{ width: 36%; padding: 1px 3px; }
      
      #contents fieldset fieldset ul{ width: 38%; padding: 0; }
      
      #contents span{ padding: 0 3px; }
      
      #contents legend
      {
        /*display: none !important;*/
  
        /* screenreaders ... */
        height: 0; width: 0; overflow: hidden; position: absolute;
        
        /*
         * firefox te algun tipus de problema amb algunes regles css aplicades als legend
         * així que la linia següent es necesaria per ocultar aquests elements sense perjudicar
         * l'accessibilitat de la pàgina al utilitzar determinats determinats screenreaders
         */
        text-indent: -50000px; line-height: 0;
      }
      
      #contents label,
      #contents form span,
      #contents form legend,
      #contents fieldset fieldset p.legend
      { font-size: .95em; }
      
      #contents textarea{ font: 100% Verdana, Arial, Helvetica, sans-serif; }
      
      #contents input[type='text'],
      #contents input.t,
      #contents textarea,
      #contents select
      {
        color: inherit;
        background-color: #e4e4e4;
        border-top: solid 1px #000;
        border-left: solid 1px #000;
        border-bottom: none;
        border-right: none;
      }
            
      #contents fieldset fieldset legend, #contents fieldset.col legend
      {      
        /*
         * overrides,
         * en realitat això no funciona ni en explorer ni  en firefox (en opera i safari si)
         * el problema amb ie i ff està solucionat via js
         */
        min-height: 1.2em;
        overflow: visible;
        position: static;
        text-indent: 0;
        line-height: 1.4em;
      }
      
      #contents fieldset fieldset li{ float: left; clear: none; padding: 0; margin: 0; }
      
      #contents fieldset fieldset li label{ display: inline; float: none; }
      
      #contents fieldset.sbmt
      {
        padding: 5px 60px 20px;
        margin: 2.2em 0 .4em;
        color: inherit;
        background: #fff url(/simuladores/img/icons/importeMensual.png) no-repeat;
      }
      
      body#s1 #contents fieldset.sbmt{ background-position: 170px top; }
      body#s2 #contents fieldset.sbmt
      {
        background-position: 150px top;
        background-image: url(/simuladores/img/icons/gastosCompraVenta.png);
      }
      body#s3 #contents fieldset.sbmt
      {
        background-position: 190px top;
        background-image: url(/simuladores/img/icons/valorMaximo.png);
      }
      body#s4 #contents fieldset.sbmt
      {
        background-position: 175px top;
        background-image: url(/simuladores/img/icons/importeMaximo.png);
      }
      
      #contents fieldset.sbmt div{ float: right; clear: left; text-align: right; }
      
      #contents fieldset.sbmt div, a.btn
      {
        width: auto;
        min-height: 18px;
        padding-top: 2px;
        color: inherit;
        background: #fff url(/simuladores/img/bg/btnSubmit.png) repeat-x bottom;
        border: solid 1px #b0b0b0;
      }
      
      a.btn
      {
        text-decoration: none;
        padding: 2px .4em 0;
        font-size: .9em;
      }
      
      #contents fieldset.sbmt div:hover, a.btn{ background-image: url(/simuladores/img/bg/btnSubmit_over.png); }
      
        #contents fieldset.sbmt label
        {
          float: none;
          clear: none;
          width: auto;
          padding: 0 0 0 8px;
          font-size: 1em;
        }
        
        #contents fieldset.sbmt label:first-letter{ text-transform: uppercase; }
        
        #contents fieldset.sbmt input
        {
          color: #800040;
          background-color: inherit;
          border: none;
          padding: 0 8px 0 0;
          font: 1em/1.2em Arial, Helvetica, sans-serif;
          text-transform: uppercase;
          cursor: pointer;
        }
        
        #contents fieldset.sbmt label em{ display: none; }
      
      #contents ol.multiForms h3
      {
        display: block;
        color: #333;
        background: #fdfdfd url(/simuladores/img/open.png) no-repeat 10px 10px;
        border: solid 1px #dfdfdf;
        padding: 6px 2em;
        margin: 1em 0 .5em;
        font-size: 1.1em;
      }
      
      #contents ol.multiForms h3.closed{ background-image:url(/simuladores/img/closed.png); }
      
      #contents ol.multiForms form{ padding-top: 1em; border-bottom: solid 1px #ddd; margin-bottom: .5em; }
      
      #formCalculoIngresosUnidadFamiliar fieldset.sbmt,
      #formCalculoGastosUnidadFamiliar fieldset.sbmt
      { background-image: none !important; margin: .5em 0; }
      
      #formCalculoImporteMaximoPrestamo{ border: none !important; }
      
      #contents fieldset.col legend
      {
        color: #800040 !important;
        background-color: inherit;
        padding-bottom: .6em !important;
        margin-bottom: 1.4em !important;
        font-size: 1em;
        text-align: right;
        font-weight: bold;
        width: 100%;
      }
      
      #miembrosUnidadFamiliar{ padding: .6em 0 1.4em; }
      
      #miembrosUnidadFamiliar input{ width: 3em !important; }
        
        
  #footer
  {
    height: 42px;
    color: #fff;
    background: #800040 url(/simuladores/img/bg/footer.png) repeat-x;
  }
 
 
  
/* Panell resultats
-----------------------------------------------------------------*/
#resultsBgOverlay
{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  opacity: .5;
  color: #fff;
  background-color: #000;
}

#results
{
  position: absolute;
  top: 15%;
  left: 5%;
  z-index: 11;
  width: 80%;
  height: 60%;
  overflow: hidden;
  padding: 5%;
  color: #fff;
  background-color: #000;
  border: solid 1px #fff;
}

#results h3{ font-size: 1.4em; font-weight: bold; line-height: 1.4em; margin-bottom: 1em; }
#results h4{ font-size: 1.2em; font-weight: bold; margin: 1.2em 0 .8em; }

#results h4.c{ padding-top: 1em; }

#resultsContents{ height: 70%; overflow: auto; padding-right: 20px; }


#resultsContents th, #resultsContents td{ font-size: .9em; padding: .2em; border: solid 1px #333; }

#resultsContents p{ margin: 1em 0; border-collapse: collapse; text-align: justify; }

#resultsContents dl{ width: 85%; margin: 2em auto; }

#resultsContents dt{ float: left; clear: left; min-height: 2.4em; }

#resultsContents dd{ float: right; clear: right; min-height: 2.4em; }

#closeBtn
{
  position: absolute;
  bottom: 1.6em;
  right: 1.6em;
  color: #000;
  background-color: inherit;
  padding-left: .8em;
  padding-right: .8em;
}

#results .c{ clear: both; }