/*--------------------------------------------------------------------------
 Clic 2008
 ----------------------------------------------------------------------------
 File: layout.css
 Gerardo Gonzalez Flores
 --> gerardo AT clic DOT com DOT mx <--
 ---------------------------------------------------------------------------
 CSS Layout styles for the web site.
 Layout CSS para el sitio.
 --------------------------------------------------------------------------*/
/* Layout
 -------------------------------------------------------------------*/
html {
    background: url(../img/html-bg.jpg) top left;
} /* es correcto? */
body {
    /*background: #003366 url(../img/page-body-bg.jpg) repeat-x top left;*/
    background: url(../img/bg-page.jpg) repeat-x top left;
}

#wrapper {
    width: 774px;
    position: relative;
    margin-left: -387px;
    left: 50%;
}

#wrapperFoot {
    /*width:774px;
     margin-left:-387px;
     left:50%;*/
    min-height: 5px;
    height: auto !important;
    height: 5px;
    position: relative;
    /*background: #001F3E;*/
    clear: both;
}

#header {
    background: url(../img/header_bg.jpg) no-repeat top;
    width: 774px;
    height: 297px;
    position: relative;
    background: url(../img/body-bg.png) repeat-y top center;
    azimuth: expression(
		this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
		this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
		this.src = "../img/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
		this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='scale')",
		this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
	);
}

#barraSeparadora {
    background: #70BD1F;
    width: 764px;
    margin-left: 5px;
    height: 11px;
    position: absolute;
    top: 284px;
}

#body {
    width: 774px;
    background: url(../img/body-wrapper-bg.png) repeat-y top center;
    azimuth: expression(
		this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
		this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
		this.src = "../img/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
		this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='scale')",
		this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
	);
}

#footer {
    background: url(../img/footer.png) no-repeat top;
    width: 774px;
    position: relative;
    margin-left: -387px;
    left: 50%;
    font-size: 9pt !important;
    text-align: center;
    min-height: 7px;
    height: auto !important;
    height: 7px;
    clear: both;
    azimuth: expression(
		this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
		this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
		this.src = "../img/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
		this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='scale')",
		this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
	);
}
/* =Layout343
 -------------------------------------------------------------------*/
/* Header
 -------------------------------------------------------------------*/
#logo {
    width: 171px;
    height: 124px;
    background: url(../img/equilibrio-modular-muebles-de-oficina.jpg) no-repeat top;
    top: 0px;
    left: 6px;
    position: absolute;
}

#logo span {
    display: none
}

#banner {
    width: 585px;
    height: 239px;
    background: url(../img/fondo-banner.jpg) no-repeat top;
    top: 44px;
    left: 184px;
    position: absolute;
}

#bannerEquilibrio {
    width: 432px;
    height: 43px;
    top: 0px;
    left: 184px;
    position: absolute;
}

#menuArea {
    width: 178px;
    height: 160px;
    /* background: url(../img/menu.jpg) no-repeat top;*/
    position: absolute;
    top: 124px;
    left: 5px;
}

#menu {
    /*height: 28px;*/
    /*border: 1px solid #ff0000;*/
}

#quickLinks {
    position: absolute;
    height: 40px;
    width: 135px;
    top: 10px;
    left: 621px;
    /*border: 1px solid;*/
}

ul#quickLinks, ul#quickLinks li {
    padding: 0px;
    margin: 0px
}

#quickLinks li {
    list-style: none;
    background: none;
}

#quickLinks li.home, #quickLinks li.contact, #quickLinks li.siteMap {
    position: absolute;
}

#quickLinks a {
    display: block;
    width: 45px;
    height: 23px;
}
/* #quickLinks a:hover { background: url(../img/home.gif) 50% 50% no-repeat #ff0000} */
#quickLinks a span {
    display: none;
}

#quickLinks li.home {
    left: 0px;
    top: 0px;
}

#quickLinks li.contact {
    left: 45px;
    top: 0px;
}

#quickLinks li.siteMap {
    left: 90px;
    top: 0px;
}

#quickLinks li.home a {
    background: url(../img/home-over.gif) 50% 50% #FFFFFF no-repeat;
}

#quickLinks li.home a:hover {
    background: url(../img/home.gif) 50% 50% #70BD1F no-repeat;
}

#quickLinks li.contact a {
    height: 23px;
    background: url(../img/contacto-over.gif) #FFFFFF 50% 50% no-repeat;
}

#quickLinks li.contact a:hover {
    background: url(../img/contacto.gif) 50% 50% #70BD1F no-repeat;
}

#quickLinks li.siteMap a {
    height: 23px;
    background: url(../img/mapa-sitio-over.gif) #FFFFFF 50% 50% no-repeat;
}

#quickLinks li.siteMap a:hover {
    background: url(../img/mapa-sitio.gif) 50% 50% #70BD1F no-repeat;
}
/* =Header
 ------------------------------------------------------------------*/
/* Body
 ------------------------------------------------------------------*/
#contentHeader {
    min-height: 25px;
    height: auto !important;
    height: 25px;
    padding-bottom: 5px;
    /*position: relative;*/
}

#contenidoWrap {
    width: 594px;
    float: left;
    /* alto minimo */
    min-height: 400px;
    height: auto !important;
    height: 400px;
    text-align: justify;
}

div#contenido, div.contenido {
    min-height: 400px;
    height: auto !important;
    height: 400px;
    padding-bottom: 10px;
    text-align: justify;
    /*border:1px solid;*/
    padding-left: 6px;
    padding-right: 6px;
}
/* Le ponemos el fondo a la paginacion */
#paginacion {
    margin-top: 0px;
    padding-bottom: 5px;
    background: url(../img/content_bg.jpg) repeat-y top;
}

#barraLeft {
    width: 176px;
    float: left;
    /*border:1px solid;*/
    padding-bottom: 10px;
}
/* =Body
 ------------------------------------------------------------------*/
/* Footer
 ------------------------------------------------------------------*/
#footerContent {
    padding-top: 5px;
    text-align: center;
    font-size: 8pt;
    clear: both;
    margin-left: 174px;
}

#footerContent * {
    font-size: 8pt;
}

#footerContent h3 {
    display: none
}

#footerFood {
    /* background: url(../img/footer_food_bg.jpg) top no-repeat;*/
    height: 11px;
    text-align: right;
    padding-top: 0px;
    padding-bottom: 5px;
    font-size: 8pt;
    color: #000000;
    width: 765px;
    position: relative;
    margin-left: -387px;
    left: 50%;
}

#footerFood * {
    font-size: 8pt;
    color: #000000;
}

#footerFood a {
    color: #000000;
}

#footerFood a:hover {
    color: #000000;
}
/* URL de pie de página de CLIC*/
#clic {
    position: relative;
}

#clicUrl {
    position: absolute;
    right: 5px;
    top: 1px;
    color: #000000;
    text-decoration: none;
    display: block;
}

#clicUrl h3 {
    background: none;
    font-weight: normal;
    font-size: 7pt;
}
/* =Footer
 -------------------------------------------------------------------*/
.message {
    padding: 10px;
    margin-top: 35px;
    background: #FFDEDE;
    width: 338px;
    text-align: center;
    border: 1px solid #FF7F7F;
}

#flashMessage {
    background: #FFDEDE;
    border: 1px solid #FF7F7F;
    /*height:20px;*/
    padding: 3px;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
/* Menu Principal */
ul#menuPrincipal, ul#menuPrincipal li {
    padding: 0px;
    margin: 0px;
}

ul#menuPrincipal {
    /*margin-left:4px;*/
    margin-right: auto;
}

ul#menuPrincipal li {
    list-style: none;
    background: none;
    height: 32px !important;
    /*float: left;*/
}
/** Se puede aplicar estilos especificos a cada uno de lo elementos del menu */
ul#menuPrincipal li a {
    width: 178px;
    height: 32px !important;
    display: block;
    text-align: left;
    margin: 0px;
    padding: 0px;
}

ul#menuPrincipal li a span {
    display: none;
}

ul#menuPrincipal li.empresa a {
    background: url(../img/menu/empresa.jpg) no-repeat 0px -32px;
}

ul#menuPrincipal li.empresa a:hover {
    background: url(../img/menu/empresa.jpg) no-repeat 0px 0px;
}

ul#menuPrincipal li.servicios a {
    background: url(../img/menu/servicios.jpg) no-repeat 0px -32px;
}

ul#menuPrincipal li.servicios a:hover {
    background: url(../img/menu/servicios.jpg) no-repeat 0px 0px;
}

ul#menuPrincipal li.preguntasfrecuentes a {
    background: url(../img/menu/preguntas-frecuentes.jpg) no-repeat 0px -32px;
}

ul#menuPrincipal li.preguntasfrecuentes a:hover {
    background: url(../img/menu/preguntas-frecuentes.jpg) no-repeat 0px 0px;
}

ul#menuPrincipal li.promociones a {
    background: url(../img/menu/promociones.jpg) no-repeat 0px -32px;
}

ul#menuPrincipal li.promociones a:hover {
    background: url(../img/menu/promociones.jpg) no-repeat 0px 0px;
}

ul#menuPrincipal li.contactanos a {
    background: url(../img/menu/contactanos.jpg) no-repeat 0px -32px;
}

ul#menuPrincipal li.contactanos a:hover {
    background: url(../img/menu/contactanos.jpg) no-repeat 0px 0px;
}
/** Menu de la aplicacion lateral*/
ul#menu, ul#menu li {
    padding: 0px;
    margin: 0px;
}

ul#menu {
    margin-left: 5px;
    margin-right: auto;
}

ul#menu li {
    list-style: none;
    background: none;
}

ul#menu li.separador {
    background: url(../img/menu/separador.gif) no-repeat 50% 50%;
    height: 28px;
    width: 2px;
}
/** Se puede aplicar estilos especificos a cada uno de lo elementos del menu */
ul#menu li a {
    min-width: auto;
    width: auto !important;
}

ul#menu li a {
    display: block;
    min-height: 10px;
    height: auto !important;
    height: 10px;
    padding: 5px 10px 0px 15px;
    text-align: left;
    color: #000000;
    font-weight: bold;
    background: url(../img/bullet-menu-lateral.gif) no-repeat 0px .5em;
    /*border:1px solid;
     background: #ff0000;*/
}
ul#menu ul li a{
	font-weight:normal;
}

ul#menu li ul.sub li a {
    padding-top: 0px
}

ul#menu li a:hover {
    background: url(../img/bullet-menu-lateral-over.gif) no-repeat 0px .5em;
}
/* PARA  SUB-MENU-ANIDADO */
ul#menu li ul.sub {
    z-index: 888;
    margin: 0px;
    padding: 5px;
    padding-left: 10px;
    border: 1px #035C94 solid;
    border-top: 1px #0056A1 solid;
    position: absolute;
    width: auto;
    color: #FFFFFF;
    text-align: left;
}

ul#menu ul.sub li a span {
    display: block;
}

ul#menu ul.sub li a {
    min-height: 5px;
    height: auto !important;
    height: 5px;
    color: #FFFFFF;
    text-align: left;
    padding-left: 8px;
}

ul#menu ul.sub li {
    background: url(../img/bullet.gif) -1px .33em no-repeat;
}

ul#menu ul.sub li a:hover {
    min-width: 60px;
    width: auto !important;
    width: 60px;
    /*color: #E4E4E4;*/
    text-decoration: underline;
    background: url(../img/bullet.gif) -1px .33em no-repeat;
}

ul#menu li ul.sub li {
    display: block;
    float: none;
}

ul#menu li ul.sub {
    background: #0056A1;
}
/* =PARA UL SUB-MENU-ANIDADO */
/* Elemento para permitir edicion directa */
div.editItem {
    width: 150px;
    margin-left: auto;
}