body 
{
	margin: 0; padding: 0; border: 0;
	color: #000000;
	background: #cce;
	font-family: verdana;
	font-size: 11px;
	text-align: center;
	margin: 30px 0;
	margin-top: 0px;
	margin-bottom: 0px;
	background-color: #FFFFFF;
	background-image: url(images/HtmlBg.jpg);
	background-repeat: repeat-x;
}
 p  {
		font:11px Verdana, Arial, Helvetica, sans-serif;
		color: #000000;
		
	}
	a, a:link, a:visited, a:active
{
	font-family: verdana, arial, helvetica, sans-serif;
	color: #000000;
	text-decoration: none;
	font-size: 10px;

}
a:hover
{
	font-family: verdana, arial, helvetica, sans-serif;
	color: #000000;
	text-decoration: underline;
	font-size: 10px;

}
.MenuTops{
height: 38px;
background-repeat:no-repeat;

}
#MenuInfoTop{
	background-image:url(images/TopInfo.jpg);
}
.MenuFolletoTop
{
	height: 38px;
	background-repeat:no-repeat;
	background-image:url(images/TopFolleto.jpg);
}


#MenuFolletoTop{
	background-image:url(images/TopInfo.jpg);
}
#MenuArticulosTop {
	background-image: url(images/TopArticulos.jpg);
}
#MenuCarritoTop{
	background-image: url(images/TopCarrito.jpg);
}
#MenuLoginTop{
	background-image: url(images/TopLogin.jpg);
}
div.MenuTitle{
	padding-top: 9px;
	padding-left: 5px;
	color: white;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
div.InnerContentTitle{
	padding-top: 0px;
	padding-left: 5px;
	color: white;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
}
.MainContentTitle{
	background-image:url(images/TopContentMain.jpg);
	background-repeat: no-repeat;
	height: 30px;
	width: 637px;
	color: #ffffff;
}
.ContentMain{
	border-left: 1px medium #E6E6E6;
	border-right: 1px medium #E6E6E6;
	border-bottom: 1px medium #E6E6E6;
	text-align: left;
	vertical-align: top;
}
.SpacerTop{
padding-top: 9px;
}
td.TopMenu{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight:normal;
	background-image: url(images/TopMenuBg.jpg);
	height: 30px;
	text-align: left;
	padding-left: 10px;
}
.BlockWithBackground{
	background-image: url(images/blockBg.jpg);
	background-repeat:repeat-x;
	vertical-align: top;
	height: 200px;
}
p  {margin: 6px 0; padding: 0 6px;}

h2 {
font-size: 1.4em; 
text-align: center; 
padding: 10px 0; 
margin: 0; 
border: 3px solid #a8b9da; 
border-color: #cde #89a #789 #bccdef;
background: #abd;
}

h3 {font-size: 1.2em; margin: 20px 10px 5px;}

.clear { clear: both; }


.alignright {margin-top: 0; text-align: right; clear: both;}

.small {font-size: .9em;}

.wide {
background: #ffffff;   /* header and footer colours */
width: 1000px; 
font-size: 1.6em;
font-weight: bold;
color: #000000;
text-align: center;
}
#WideTopMenu {
position: relative;
background: #ffffff;   /* header and footer colours */
width: 1000px; 
height: 30px;
background-image: url(images/TopMenuBg.jpg);
background-repeat: no-repeat;
font-size: 10px;
font-weight: bold;
color: #000000;
text-align: center;
margin-top: 150px;

}
.wideFooter {
background: #ffffff;   /* header and footer colours */
width: 1000px; 
height: 47px;
font-size: 1.6em;
font-weight: bold;
color: #000000;
text-align: center;
background-image:url(images/FooterBg.jpg);
background-repeat:no-repeat;
}

.wide p {margin: 0; padding: 5px; position: relative;}

.top {border-bottom: 1px solid #000;}

.top a {
	position: absolute;
	right: 0px;
	text-align: right;
	font-weight: bold;
	font-size: .7em;
	color: #fff;
	top: 47px;
	width: 1000px;
}

.bottom {border-top: 1px solid #000; position: relative;}

.testfloat {width: 50px; border: 2px solid #f90; background: #ffd; font-size: .7em;}

.to-right {float: right;}

.to-left {float: left;}

.ap-test {
position: absolute; 
top: -102px; 
font-size: .6em; 
width: 150px; 
height: 100px; 
border-top: 1px solid #000; 
background: #5b5; 
color: yellow;
}

/* \*/
* html .ap-test {
top: -101px; 
t\op: -102px; 
}
/* */

.ap-left {left: 0;}

.ap-right {right: 0;}


/*XXXXXXXXXXXXXXXXX Primary layout rules XXXXXXXXXXXXXXXX*/

/******************************************************************************** 
To adjust the side col widths, or the vertical col dividers, a certain set of values must be changed
all at the same time and by exact amounts or problems will result. Each of these group's member values
have been marked off with comments that start with "Critical...". For example, if the left col width needs
to be changed then all the values marked "Critical left col dimension value" MUST have their pixel values
altered by the same amount. Certain of these left col width values are marked "(moves inversly)", and 
these get changed by the same pixel amount but inversly to the other values. So if margin-left on .outer
is increased by 10px, then the width of .outer must decrease by 10px, and so on.

To change the width of the entire layout, .wrapper, .outer, .float-wrap, and .center all get changed together,
and only after that is it safe to change col or divider widths. Remember, even one small mistake will degrade or 
even break the layout, so be very careful! it's possible to "loosen" the layout so small errors aren't so messy,
but then it becomes hard to finely control text spacing. 

For spacing within the cols, it's best to apply margins on content elements inserted into the cols, 
because padding directly on those col elements will change their widths, breaking the layout. 

Certain hiding hacks have been used extensively in this layout, so here is a quick explaination of them.

The Tan hack:

* html .anyelement {rules read only by IE/Win and IE/Mac}

The Mac-hack:  (first the active comment you are reading now must be closed...) */

/* \*/

/* */

.wrapper {
margin: 0 auto;
width: 1000px;
text-align: left;
background-color: #FFFFFF;
background:#FFFFFF;
border: 1px solid #999999;
}

* html .wrapper {   /*** IE5.x/win box model fix ***/
width: 1000px;
wid\th: 1000px;
background-color: #ffffff;
background:#FFFFFF;
}

.outer {
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
margin-left: 174px;    /*** Critical left col dimension value ***/
width: 654px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
background: #ffffff;  /*** Sets background of center col***/
border-right: 1px dotted #999999;  /*** Critical left divider dimension value ***/
border-left: 1px dotted #999999; /*** Critical right divider dimension value ***/
}

* html .outer {   /*** IE5.x/win box model fix ***/
width: 654px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
wid\th: 654px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/

}

.float-wrap {
float: left;
width: 654px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
margin-right: -1px;   /*** Static fix ****/
margin-bottom: 0;
height: 100%;
}

.center {
float: right;
width: 654px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
margin-bottom: -1px;   /*** Fixes a variance in IE/win for the green AP bottom boxes ***/
/* \*/
margin-left: 0px; 
/* Hidden from IE-mac */
}

.left {
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
width: 172px;    /*** Critical left col/divider dimension value ***/
margin-left: -174px;    /*** Critical left col/divider dimension value ***/


}

* html .left {
float:left;	
}

*>html .left {width:172px;}   /*** Fix only for IE/Mac ***/

.container-left {
width: 172px;    /*** Critical left col dimension value ***/
padding-bottom: 15px;   /*** To keep content from going underneath the AP bottom boxes ***/ 
margin-top: 1px;
}

.right {
float: left; 
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
width: 170px;    /*** Critical right col/divider dimension value ***/
margin-right: -172px;    /*** Critical right col/divider dimension value ***/
margin-left: -1px;   /*** Static fix ***/


}

/* \*/
* html .right {
margin-left: 0px; 
margin-right: -500px; 
mar\gin-right: -172px;

}
.container-right { 
/* \*/width: 170px;/* Hidden from IE-Mac */   /*** Critical right col dimension value ***/
margin-left: 3px;    /*** Critical right divider dimension value ***/
padding-bottom: 15px;   /*** To keep content from going underneath the AP bottom boxes ***/
margin-top: 1px;
}

* html .container-right {
fl\oat: right;
margin-left: 5px; 
mar\gin-left: 0px; 

}

* html h2 {height: 1%;}

* html .left {margin-right: 0px;}
.italics-test, .italics-test-side {
font-style:  normal;
font-family: Verdana;
font-size: 8px;
text-align: justify; 
background: #ccd;
border: 1px solid red;

}


* html .italics-test, * html .italics-test-side {
overflow: hidden;
width: 100%;
o\verflow: visible;
w\idth: auto;
hei\ght: 1px;
}
.SmallGrey {
	font-size: 10px;
	font-weight: normal;
	color: #333333;
}
.TopContainer{

}
.TableContentMain
{
	width: 637px;

}
.ArticuloMenu
{
	font-family: Verdana;
	font-size: 8px;
	color: Black;
	}
	
.flyoutLink, a.flyoutLink, a.flyoutLink:link, a.flyoutLink:visited, a.flyoutLink:active
	{
		font-family: Verdana;
		font-size: 8px;
		color: Black;
	}
/* === Menu de Articulos ===== */
.SubFamiliasMenu
{
	background-color: #D3EF9B;
	background-image: url(images/bgSubMenu.jpg);
	width: 154px;
	font-size: 9px;
	font-weight: bold;
	padding-left: 2px;
}
a.SubFamiliasMenu, a.SubFamiliasMenu:link,  a.SubFamiliasMenu:visited
{
	text-decoration: none;
	font-size: 7px;
	font-weight: bold;
}
a.SubFamiliasMenu:hover
{
	text-decoration: underline;
	font-size: 7px;
	font-weight: bold;
}

/*.MenuArticloHover
{
	background-color: #999999;
}*/
td.FamiliasMenu
{
	background-image: url(images/MenuTopbg.jpg);
	background-repeat:repeat-x;
	
	width: 167px;
	color: White;
	font-size: 9px;
	font-weight: bold;
	margin: 2px 0px;
	height: 19px;
	}
a.FamiliasMenu, a.FamiliasMenu:Hover, a.FamiliasMenu:visited, a.FamiliasMenu:active
{
	background-color: Transparent;
	text-decoration: none;
}
/* END MENU ================= */

/* DataList FamiliaList.aspx */
.FamiliaContainer 
{
width: 321px;
height: 200px;
border: 1px solid #999999;
margin-bottom: 15px;
}

td.FamProductoSubFam
{
	background-image: url(images/FamListTop.jpg);
	background-repeat: repeat-x;
	height: 20px;
	width: 300px;
	border-bottom: 2px solid #653653653;
	padding: 0px 0px 0px 10px;
	
}
a.FamProductoSubFam, span.FamProductoSubFam
{
	font-size: 10px;
	font-family: Verdana;
	font-weight: bold;
}

td.FamProductoNombre 
{
	padding: 5px 0px 0px 10px;
	width: 300px;
	height: 50px;
}
a.FamProductoNombre, span.FamProductoNombre 
{
		padding: 5px 0px 0px 10px;
		font-size: 9px;
		font-family: Verdana;
		font-weight: bold;
		color: Navy;
		
}
span.FamProductoPrecio, a.FamProductoPrecio, td.FamProductoPrecio
{
	font-size: 25px;
	font-family: Arial-Black;
	font-weight: bold;
	color: #BED9DB;
	padding-right: 10px;
	height: 50px;
}

span.InicioProductoPrecio, a.InicioProductoPrecio, td.InicioProductoPrecio
{
	font-size: 20px;
	font-family: Arial-Black;
	font-weight: bold;
	color: #BED9DB;
	padding-right: 5px;
	height: 50px;
}


/* END FamiliaList.aspx */


/* BEGIN ====== PRODUCTLIST.ASPX  ======== */
.SubFamiliaProductList {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #333333;
	border-bottom: 1px solid #999999;

}
.MarcasPorductList, a.MarcasPorductList, span.MarcasPorductList {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 20px;
}

.MarcaTitleProductList {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #333333;
	border-bottom: 1px solid #999999;
	font-weight: bold;	
}
.StockTitleProductList {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	font-weight: normal;
	border: 0px;
}

table.ProductListItemContainer 
{
	margin-bottom: 20px;
	width: 633px;
}
.TableMainContentContainer
{
	width: 633px;
}

.TitleProductOnProductList
{
	width: 633px;
	font-size: 12px;
	font-family: Verdana;
	font-weight: normal;
	background-color: #BED9DB;
	height: 20px;
}
td.TitleProductOnProductList
{
	padding-left: 25px;
	width: 423px;
	font-weight: bold;
	font-size: 10px;
	border-right: 1px solid #ffffff;
}
#TableBarProductsOnProductList
{
	border-right: 1px solid #999999;
	width: 633px;
}
td.TitleProductOnProductList_Precio
{
	padding-right: 20px;
	width: 104px;
		font-weight: bold;
	font-size: 10px;
	border-right: 1px solid #ffffff;
	text-align: right;
}
table.TableItemsProductsInner
{
	border: 1px solid #999999;
	width: 633px;
	border-top: 0px;
	
}

a.normalLink
{
	font-weight: normal;
	font-size: 10px;
	
}

#tdStockImg { width: 13px; vertical-align: middle; text-align: center; }
#tdProdImg {width: 65;}
#tdProdName { width: 410px; }
#tdProdPrecio 
{
	width: 80px; 
	font-size: 10px; 
	font-weight: bold; 
	text-align: right; 
	padding-right: 20px;
	} 
#tdProdCarrito {  width: 45px; text-align: center;}
.ProductNameTitleOnDetails {
	font-size: 18px;
	color: #333333;
}
.DescripcionOnDetails {font-size: 10}
.LinkVerEspecificaciones {
	font-size: 12px;
	font-weight: bold;
}
.TextSmall9 {font-size: 9px}
.PrecioTitleOnDetails {
	font-size: 14px;
	font-weight: bold;
}
.PrecioOnDetails {
	font-size: 24px;
	font-weight: bold;
	color: #BED9DB;
}


/* PRODUCT DETAILS PAGE */
.expanderFichaTecnicaStyle, span.expanderFichaTecnicaStyle
{
	background-color: #ffffff;
	
	width: 400px;

	padding-left: 2px;
}
a.expanderFichaTecnica, a.expanderFichaTecnica:link, a.expanderFichaTecnica:hover, a.expanderFichaTecnica:visited
{
	text-decoration: none
}

.titleVerEspecificaciones
{
	font-size: 12px;
	font-weight: bold;
	
}
.ContainerEspecificacion 
{
	width: 400px;
	overflow: hidden;
}

.SiteMapOnTop , a.SiteMapOnTop, a.SiteMapOnTop:link, .SiteMapOnTop a
{
	margin-top: 10px;
	font-size: 10px;
	color: #ffffff;
	font-weight: bold;
	vertical-align: middle;
	text-align: left;

	
}



/* STYLE CARRITO ================== */
.tableCarrito {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	color: #333333;
	width: 630px;
}
.tdCarritoTitle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	border-left: 1px solid #ffffff;
	background-color: #BED9DB;
	height: 15px;
	border-bottom: 2px solid #CCCCCC;
	border-top: 1px solid #999999;
}
.tdCarritoContent {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #333333;
	height: 50px;
	border-left: 1px solid #999999;
	border-bottom: 1px solid #999999;
	vertical-align: top;
	padding-right: 5px;	
}
.inputCarritoContent {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #333333;
	border: 1px solid #999999;
	vertical-align: top;
	
}
#tdCarritoTitleLeft 
{
border-left: 1px solid #999999;
}
#tdCarritoContentRight {
border-right: 1px solid #999999;
}

#tdCarritoTotal {
border-right: 1px solid #999999;
border-left: 1px solid #999999;
}
#tdCarritoSpacer {
border-left: 0px;
border-bottom: 0px;
text-align: left;
width: 417px;
 }
 #tdCarritoPrecio {
 font-weight: bold;
 font-size: 10px;
 color:  black;
 
 
 }
 .carritoBlockPrecio 
 {
	font-size: 12px; font-weight: bold; color: #000099;
	border-top: 2px solid #999999;
	 }
 
 .tdCarritoBlockRowA 
 {
	background-color: white;
	border-bottom: dotted 1px #000000;
	
 }
 .tdCarritoBlockRowB
 {
	background-color: #CCCCCC;
	border-bottom: dotted 1px #000000;
	
 }
 
 .TopDatosCliente {
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	border-bottom: 3px solid #999999;
}

.BtnMainContent 
{
	background-image: url(images/bgButton_MainContent.jpg);
	background-repeat:repeat-x;
	border: 1px solid #999999;
		font-weight: bold;
	cursor: hand;
	text-align: center;
}

/* INICIO ===================== */
.DataListDestacadosContainer
{
width: 648px;
height: 350px;
border: 1px solid #999999;
margin-bottom: 15px;
}

td.TopDataListDestacados
{
	background-image: url(images/FamListTop.jpg);
	background-repeat: repeat-x;
	height: 20px;
	width: 648px;
	border-bottom: 2px solid #653653653;
	padding: 0px 0px 0px 10px;

	
}

/* PAGINA De SELECCION PAGO */
.TitlePagoOpcion {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
}
.DescPagoOpcion {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.td_Pago_Envios {
	background-color: #CCCCCC;
}

/* CONFIRMACION PEDIDO */
.ConfirmacionPedido_BlockEntrega {
	border-right-width: 1px;
	border-right-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
}
.ConfirmacionPedido_BlockFact {
	border-right-width: 1px;
	border-right-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
}