/*
 * file_name = jaeger__microgard__stylesheet.css
 *
 * file_type = CSS stylesheet
 *
 * description = CSS styles used by the html page dedicated to the Jaeger MICROGARD product. 
 *               The page in question displays a webform used to place orders for these spirometer filters.
 *                
 * descripción = Hoja de estilo utilizada por la página html dedicada al producto MICROGARD de Jaeger 
 *               La página en cuestion ofrece un formularion para que el visitante pueda poner un pedido de 
 *               compra para estos filtros de espirometría.
 *
 *
 */



div.contact__confirmation_message
{
    background: HoneyDew      ; 
         color: darkGreen     ; 
       display: none          ; 
     font-size: 22px          ; 
   font-weight: bold          ; 
   line-height: 1.4           ;
       padding: 15px          ;
}  



/*
  This element holds the product description and a contact form to request the purchase of Microgard filters
  Este elemento contiene la descripción del producto y un formulario para pedir filtros Microgard
*/  
div.microgard__left_column
{
      /* background: coral           ; */
         display: inline-block    ;
   margin-bottom: 20px            ;
      text-align: left            ;
  vertical-align: top             ;  
           width: 550px           ;  
}  


/*
  This element holds a product image and links to informational brochures
  Este elemento contiene una imagen del producto y vínculos hacia sus folletos informativos
*/  
div.microgard__right_column
{
    /* background: khaki ; */
         display: inline-block    ;
      margin-top: 3rem            ;
  vertical-align: top             ;  
}   


a.pdf_preview_image_button
{
       border-radius: 4px             ;
               color: black         ; 
              cursor: pointer         ; 
               float: right           ; 
  margin-block-start: 0px             ;  /* equivalent to margin-top    */
    margin-block-end: 0px             ;  /* equivalent to margin-bottom */
        margin-right: 50px            ;  
	           padding: 15px            ; 
          text-align: center          ; 
     text-decoration: none            ; 
}


div.pdf_preview_image_button:hover
{
   background: azure                 ; 
   box-shadow: 3px 3px 5px 6px #ccc  ;
   transition: 0.3s                  ;

}


/* When user goes over the <div> element, show a border around 
   the PDF preview image                                                  */
/* Cuando el usuario cubre el elemento <div>  con el mouse, mostra un
   borde por vuelta de la imagén que muestra la tapa del PDF              */   
div.pdf_preview_image_button:hover img.pdf_preview_image
{
   border-color: #7A94D2        ;
}  


img.pdf_preview_image
{
  border-style: solid           ;
  border-width: 1px             ;
  border-color: transparent     ;
}


div.pdf_preview_image_button_caption  
{
  margin-top: 10px              ; 
  text-align: center            ;
}


form.microgard_purchase_request_form
{
       display: inline-block        ; 
    text-align: left                ;
  
}  

table.microgard_purchase_request
{
  border-collapse: collapse     ; 
           /* float: left         ;  */
          padding: 10px         ;
	        width: 550px        ;
}

td.form_field
{
    background: #c2c2a3              ; 
  border-color: #b8b894              ; 
  border-width: 0px 0px 2px 0px      ; 
  border-style: solid                ; 
   font-weight: bold                 ;
    text-align: right                ;
       padding: 10px 15px 10px 15px  ;
	     width: 150px                ;
}


td.form_value
{
    background: #d6d6c2              ; 
  border-color: #c2c2a3              ; 
  border-width: 0px 0px 2px 0px      ; 
  border-style: solid                ; 
       padding: 10px 10px 10px 10px  ;
}


span.form_required_field_flag
{
         color: darkRed              ;
   font-weight: bold                 ;
}


input:focus, select:focus, textarea:focus
{
  background-color: lightYellow         ;
           outline: none !important     ;
            border: 1px solid #6b6b47   ;
     border-radius: 2px                 ;

}

/* to prevent pixel jump when element receives focus */
input:focus
{
  padding: 2px 3px     ;
}


/* to prevent pixel jump when element receives focus */
textarea:focus
{
  padding: 2px 2px     ;
}


/* to prevent pixel jump when element receives focus */
input[type=submit]:focus
{
  background-color: lightYellow   ;
           padding: 2px 7px       ;
}