/* ·············································································································································      
 $ Common HTML TAG styles and useful classes
············································································································································· */      
      
      
      
      /* Separators */
            hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;}
            hr.space {background:#fff;color:#fff;}
            
            
            
      /* Text classes */
            #wrapper .highlight {background:#ff0;}
            #wrapper .error, #wrapper .notice, #wrapper .success {padding:.8em;margin-bottom:1.6em;border:2px solid #ddd;}
            #wrapper .error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
            #wrapper .notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
            #wrapper .success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
            #wrapper .error a {color:#8a1f11; background:none; padding:0; margin:0;}
            #wrapper .notice a {color:#514721; background:none; padding:0; margin:0;}
            #wrapper .success a {color:#264409; background:none; padding:0; margin:0;}
            #wrapper .box {display:block; padding:10px; border:1px solid #ccc  ;}
            
            body p.alert {padding:10px 0 10px 0; background:#FFFFC1 url(../img/style/icon[alert].gif) no-repeat 10px; color:#000; font-size:12px;  border-bottom:1px solid #DED181;  text-align:left;  text-indent:30px; margin-bottom:1px;
            font-family:Arial;} 
            html > body p.browser-support {display:none;}
            
      /* Images */      
            img, a img {font-size:10px; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration:none; }
            
            
      /* clearfix */
            .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
            .clearfix {display: inline-block;}
            * html .clearfix {height:1%}
            .clearfix {display:block}
            .clear {clear:both;}

            
      /* Tooltips */ 
            #tooltip {background:#222; color:#999; padding:10px; border:1px solid #444}

            
      /* Buttons */ 
            /* Button text */ 
            #wrapper .button {color:#fff; font-weight:bold; text-decoration:none;  }
            
            /* Button body */
            #wrapper .button { background:url(../img/style/sprite-buttons.gif) repeat-x 0 0; 
                               display:inline-block; 
                               line-height:29px; /* Alto del boton y centrafo vertical del texto*/
                               height:29px; /* Alto del boton y centrafo vertical del texto*/
                               padding:0 8px; 
                               position:relative; 
                               border:none;}
            
            /* Buttom sides */
            #wrapper .button:before, #wrapper .button:after {
                               display:inline-block; 
                               content:"."; /* El punto es necesario para aplicar el background */
                               width:2px; /* Define el ancho de cada extremo del botón */
                               text-indent:-5000px } 
                               
            #wrapper .button:before {
                               margin:0 10px 0 -10px; /* Desfaza el 'before' a la izquierda para no superponer el 'background' con el del boton*/
                               background:url(../img/style/sprite-buttons.gif) no-repeat left -400px; }

             #wrapper .button:after {
                               margin:0 -10px 0 10px;  /* Desfaza el 'after' a la derecha para no superponer el 'background' con el del boton*/
                               background:url(../img/style/sprite-buttons.gif) no-repeat right -800px;}

            
      /* Buttons for IE */
            #wrapper .button-before, #wrapper .button-after {
                               line-height:29px; /* Alto del boton */
                               height:150px; /* Alto del boton */
                               display:block; 
                               width:2px;}
            
            #wrapper .button-before {
                                position:absolute; left:-2px; top:1px;
                                background:url(../img/style/sprite-buttons.gif) no-repeat left -400px; }
                               
            #wrapper .button-after {
                                position:absolute; right:-2px; top:1px;
                                background:url(../img/style/sprite-buttons.gif) no-repeat right -800px; }
								
			#intro {
					  width: 711px; 
					  height:435;
					  background-color:#FFFFFF; 
					  padding:0px; 
					  margin: auto;
					}

            

      /* Hover effect */
            #wrapper .button:hover {background:url(../img/style/sprite-buttons.gif) repeat-x 0 -200px;}
            #wrapper .button:hover:before, #wrapper .button:hover span.button-before {background:url(../img/style/sprite-buttons.gif) no-repeat left -600px; */}
            #wrapper .button:hover:after, #wrapper .button:hover span.button-after {background:url(../img/style/sprite-buttons.gif) no-repeat right -1000px; */}


        
/* ·············································································································································
  ERROR CHECKING (http://accessites.org/site/2006/07/big-red-angry-text/)
  This is to determine if deprecated elements are used. If so, they should be replaced:
      1a. <font> and
      1b. <font color="xxx">…</font>: Shouldn’t be used.
      CSS should dictate font attributes.
      2. <center>: Shouldn’t be used. CSS should dictate horizontal alignment.
      3a. <div align="xxx">…</div>
      3b. <p align="xxx">…</p>
      3c. <table align="xxx">…</table>: Shouldn’t be used. CSS should dictate horizontal alignment.
············································································································································· */

       /* CSS Begin */
       font, center, div[align], p[align], table[align], font[color] {
         color : #cd0000;
         font-weight : bold;
         background : #eecc11 url(images/warning.gif) repeat 0 0;
         margin : 10px;
         padding : 10px;
         border : 2px dashed #cd0000;
         font-size : 2em;
      }