/*======================================
      WELCOME TO THE STYLESHEET
--------------------------------------      
     Copyright Web Design Puerto Rico
	 http://www.webdesignpuertorico.com
      Author: Luis Rivera Colon
	  Date: 16 Mayo 2009
======================================*/
/**************************************/
/*               RESET                */
/**************************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
/* remember to define focus styles! */
:focus { outline: 0; }
body { line-height: 1; color: black; background: url(../images/back.gif); }
ol, ul { list-style: none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
/**************************************/
/*              GLOBALS               */
/**************************************/
#container { background: url(../images/background.jpg) no-repeat 0px 60px; margin-right: auto; margin-left: auto; height: 752px; width: 891px; }
#container2 { background: url(../images/background2.jpg) no-repeat 0px 60px; margin-right: auto; margin-left: auto; height: 760px; width: 891px; }
#container3 { background: url(../images/background3.jpg) no-repeat 0px 60px; margin-right: auto; margin-left: auto; height: 1035px; width: 891px; }
#logo { background: url(../images/Logo.png) no-repeat; height: 130px; width: 215px; margin-left: 12px; float: left; margin-top: 6px; margin-bottom: 22px; }
#head-info { float: left; font: bold 0.7em Arial, Helvetica, sans-serif; color: #FEFCFA; margin-top: 50px; margin-bottom: 7px; margin-left: 165px; }
#slogan { float: left; font-family: "Times New Roman", Times, serif; color: #171717; font-weight: bold; width: 640px; text-align: right; }
#animacion { margin-left: 12px; clear: both; height: 223px; z-index: 1; }
#animacion-nulled { margin-left: 12px; clear: both; height: 2px; z-index: 1; }
#imagen { height: 200px; width: 200px; float: left; }
#informacion { width: 540px; margin-left: 12px; float: left; margin-right: 12px; margin-bottom: 34px; }
#informacion-contact { width: 420px; margin-left: 22px; float: left; margin-right: 100px; margin-bottom: 34px; }
#informacion2, #informacion3 { width: 400px; margin-left: 12px; float: left; margin-right: 12px; margin-top: 8px; }
#informacion-nosotros { width: 540px; margin-left: 12px; float: left; margin-right: 12px; margin-bottom: 12px; }
#suplidores ,#suplidores2 { width: 856px; margin-left: 16px; float: left; margin-right: 12px; }
.suplidores-margen-top { margin-top: 6px; }
#newsletter { float: left; height: 120px; width: 210px; background: url(../images/contacto-forma.png) no-repeat; padding-left: 10px; padding-top: 10px; font: bold 0.7em Arial, Helvetica, sans-serif; color: #FFF; }
#webstore { width: 865px; margin-left: 14px; float: left; margin-right: 12px; }
#index-imagen { float: left; height: 198px; width: 300px; position: static; margin-left: 80px; }
#flash { float: left; height: 165px; width: 490px; position: static; }
#gente { width: 317px; float: left; font: .9em Arial, Helvetica, sans-serif; }
.gente { border: 1px solid #343433; margin-top: 22px; float: right; margin-right: 9px; }
#flas-nosotros { height: 200px; width: 200px; float: right; margin-right: 48px; margin-top: 60px; }
#vendedores { clear: both; margin-left: 22px; font: bold 0.97em Arial, Helvetica, sans-serif; margin-bottom: 190px; }
/**************************************/
/*              menu              */
/**************************************/
#nav { width: 890px; margin-bottom: 22px; height: 96px; }
.menu { list-style: none; }
.menu li { height: 95px; list-style: none; }
.menu li a, .menu li a:visited { display: block; text-decoration: none; text-indent: -10000px; height: 95px; }
.inicio { width: 137px; background: url(../images/inicio-b.png); }
.inicio a { background: url(../images/inicio.png); }
.nosotros { width: 129px; background: url(../images/nosotros-b.png); }
.nosotros a { background: url(../images/nosotros.png); }
.productos { width: 130px; background: url(../images/productos-b.png); }
.productos a { background: url(../images/productos.png); }
.webstore { width: 131px; background: url(../images/webstore-b.png); }
.webstore a { background: url(../images/webstore.png); }
.contactus { width: 131px; background: url(../images/contactanos-b.png); }
.contactus a { background: url(../images/contactanos.png); }
.suplidores { width: 134px; background: url(../images/suplidores-b.png); }
.suplidores a { background: url(../images/suplidores.png); }
ul.menu li a:hover { background: none; }
.menu li { float: left; }
.menu:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
a:link { text-decoration: none; color: #333; }
a:visited { text-decoration: none; color: #333; }
a:hover { text-decoration: none; color: #666; }
a:active { text-decoration: none; color: #333; }
/**************************************/
/*               FONTS                */
/**************************************/
font { font-size: 1em; }
h1 { color: #000; font: bold 1.27em Arial, Helvetica, sans-serif; }
h2 { font: bold 1.12em Arial, Helvetica, sans-serif; margin-bottom: 12px; margin-left: 22px; color: #111; }
h3 { font: bold 1.12em Arial, Helvetica, sans-serif; margin-bottom: 12px; margin-left: 22px; color: #111; margin-top: 22px; }
h4, h5, h6 { font: bold 1.12em Arial, Helvetica, sans-serif; margin-left: 22px; color: #111; }
.text-home { font: bold 0.74em Arial, Helvetica, sans-serif; margin-left: 24px; }
.years-header { font-size: .8em; margin-top: 4px; }

/**************************************/
/*Developed by Web Design Puerto Rico */
/**************************************/
#developed-by { }
/**************************************/
/*             Validacion             */
/**************************************/
#validacion { clear: both; text-align: right; margin-right: 22px; font: bold 0.7em Arial, Helvetica, sans-serif; }
.validacion-index { }
.validacion-nosotros { }
.validacion-webstore { }
.validacion-contactanos { }
.validacion-suplidores { }
/**************************************/
/*         Form  Optional             */
/**************************************/

fieldset { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend { font-weight: bold; font-size:1.2em; }
label { font: bold 0.85em Arial, Helvetica, sans-serif; }
textarea, input[type='text'], input[type='password'], select { border: 1px solid #ccc; background: #fff; }
textarea:hover, input[type='text']:hover, input[type='password']:hover, select:hover { border-color: #333; }
textarea:focus, input[type='text']:focus, input[type='password']:focus, select:focus { border-color: #333; outline: 1px solid #333; }
input, select { cursor: pointer; }
input[type='text'], input[type='password'] { cursor: text; }
.forma-derecha { margin-left: 15px; margin-top: 3px; }
.send { float: right; margin-right: 18px; background: url(../images/enviar.png) no-repeat; text-indent: -9999px; height: 25px; width: 60px; margin-top: 10px; border-width: 0px; }
.forma-margen { margin-top: 5px; }
/**************************************/
/*         Icon  Optional             */
/**************************************/

/* Use this class if a link gets an icon when it shouldn't. 
body a.noicon { background:none !important; padding:0 !important; margin:0 !important; }*/

/* Make sure the icons are not cut 
a[href^="http:"], a[href^="mailto:"], a[href^="http:"]:visited, 
a[href$=".pdf"], a[href$=".doc"], a[href$=".xls"], a[href$=".rss"], 
a[href$=".rdf"], a[href^="aim:"] {
  padding:2px 22px 2px 0;
  margin:-2px 0;
  background-repeat: no-repeat;
  background-position: right center;
}
a[href^="mailto:"]        { background-image: url(../img/icons/email.png); }*/

/* Files 
a[href$=".pdf"]   { background-image: url(../img/icons/pdf.png); }  
a[href$=".doc"]   { background-image: url(../img/icons/doc.png); }  
a[href$=".xls"]   { background-image: url(../img/icons/xls.png); }  */

/**************************************/
/*         Panel Deslizante           */
/**************************************/
 .panel_button { margin-left: 700px; position: relative; width: 146px; height: 29px; background: url(../images/panel_button.png); z-index: 20; cursor: pointer; font: 14px/1px Arial, Helvetica, sans-serif; color: #FFF; text-align: left; }
.panel_button img { position: relative; top: 1px; border: none; }
.panel_button a { text-decoration: none; color: #1E1E1E; position: relative; top: 5px; left: 10px; font: bold 14px Arial, Helvetica, sans-serif; }
.panel_button a:hover { color: #FFF; }
#toppanel { position: absolute; width: 891px; z-index: 25; text-align: center; margin-left: auto; margin-right: auto; }
#panel { width: 891px; position: relative; margin-left: auto; margin-right: auto; z-index: 10; overflow: hidden; text-align: left; }
#panel_contents { background: black; width: 851px; position: absolute; z-index: -1; margin-left: 22px; }
#content { margin-left: auto; margin-right: auto; width: 891px; position: relative; top: 90px; text-align: left; padding-bottom: 30px; height: 900px; }
.promo { margin: 14px; }
.exp { float: left; margin-left: 8px; }
.promoplace{ height: 680px; width: 865px; margin-top: 20px; overflow:hidden }
.contact-dashed{ }
/**************************************/
/*         CSS Table                  */
/**************************************/
#mytable, #mytable2 { width: 860px; padding: 0; margin: 0; }
caption { padding: 0 0 5px; width: 830px; font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; text-align: right; }
th { font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #4A4A4A; border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; border-top: 1px solid #C1DAD7; letter-spacing: 2px; text-align: left; padding: 4px 4px 4px 10px; background: #D2F2CE no-repeat; }
th.nobg { border-top: 0; border-left: 0; border-right: 1px solid #C1DAD7; background: #F4F4F4; }
td { border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; background: #fff; padding: 6px 6px 6px 12px; color: #4f6b72; }
td.alt { background: #F5FAFA; color: #797268; }
th.spec { border-left: 1px solid #C1DAD7; border-top: 0; background: #fff url(../images/bullet1.gif) no-repeat; font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; }
th.specalt { border-left: 1px solid #C1DAD7; border-top: 0; background: #f5fafa url(../images/bullet2.gif) no-repeat; font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #797268; }
th.form { background: transparent; color: #FFF; }
td.form { background: transparent; color: #000; font: bold 0.77em Arial, Helvetica, sans-serif; border-width: 0px; border-style: solid; }