/*
 * Copyright Sistemas Australes - Junio 2009
 * Autor: Mauricio Morales
 * */

/*--- pantallas principales ---*/

/*
 * #container
 * ------------------
 * | #header        |
 * |----------------|
 * | #menubar       |          ----------------------------
 * |----------------|          | #menu | #page | #ofertas |
 * | #main          | ======>  |       |       |          | ======>
 * |                | (#main)  |       |       |          | (#page)
 * |----------------|          ----------------------------
 * | #footer        |
 * ------------------
 * */


/*--- pantallas popup ---*/

/*
 * #container.popup
 * ------------------
 * | #header        |
 * |----------------|
 * | #main          |
 * |                |
 * |----------------|
 * | #footer        |
 * ------------------
 * */


/*--- otros ---*/

#page p {
    font-size: 9px;
    text-align: center;
    color: #999;
}

select, input {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #444;
    border: #999 solid 1px;
}

/*--- disponibilidad principal ---*/

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background: #b2b9c1;
    text-align: center;
}

/*:area principal de la pagina quien contiene las areas horizontales #header, #main, #footer:*/

#container {
    background: #fff url( ../images/home/bg_container.jpg ) repeat-y;
    text-align: center;
    width: 824px;
    margin: auto;
}

/*:area destinado a contener la imagen o logo de la empresa:*/

#container #header {
    background: url( ../images/home/bg_header.jpg ) no-repeat;
    width: 100%;
    height: 100px;
}

/*:area que contiene la pagina:*/

#container #main {
    background: #fff url( ../images/home/bg_container.jpg ) repeat-y;
    width: 810px;
    //width : 100 %; /* para explorer */
    float: left;
    text-align: left;
    padding-left: 13px;
}

/*:area destinado a contener imagen o logo pie de pagina:*/

#container #footer {
    background: url( ../images/home/bg_footer.jpg );
    float: left;
    width: 100%;
    height: 70px;
}

/*:las paginas popup pueden tener diferencias en las areas principales:*/
/*:por eso se creo la clase .popup para pisar lo definido en #container :*/

/*:area #main para pantallas popup:*/
#container.popup #main {
	background: #fff url( ../images/home/bg_container_popup.jpg ) repeat-y !important;
	width: 100%;
	padding: 30px 0 30px 0px;
	text-align: center;
}

/*:area #footer para pantallas popup:*/

#container.popup #footer {
    background: url( ../images/home/bg_footer_popup.jpg ) repeat-y !important;
}

/*--- clases #main genericas ---*/

/*:titulo principal de las paginas:*/

#container #main #title,
#container #main .title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #586e30;
    padding: 5px 0 10px 0px;
    margin-left:30px;
}

/*:NOTA: se puede definir clases para el cualquier area principal y luego con javascript cambiarlas dinamicamente:*/
/*:para que la pagina cambie de diseño. En buquebus, el menu tiene la lista de paises de los prestadores de tarifas:*/
/*:seleccionando uno de estos paises el area #main toma como clase el codigo del pais seleccionado, por ende, el diseño se redefine :*/
/*:la proxima declaracion se repetira en toda la hoja de estilo, siempre para redefinir diseños dentro de un contexto:*/

#container #main.ARG   #title,
#container #main.ARG   .title { color: #99181c; }
#container #main.BRA   #title,
#container #main.BRA   .title { color: đ#58612a; }
#container #main.URU   #title,
#container #main.URU   .title { color: #4c81b7; }
#container #main.RESTO #title,
#container #main.RESTO .title { color: #fcb815; }

/*:estilo de tabla dentro del main:*/

#container #main table {
    background: #e3e3e3;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #636363;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
    margin: 0;
}

/*:estilo de tabla dentro del #main para las pantallas popup:*/

#container.popup #main table {
	width: 700px;
	margin: auto;
	text-align: left;
}

/*:estilo de celdas de las tablas que estan dentro del #main:*/

#container #main table td,
#container #main table th {
    padding: 2px 5px 2px 5px;
    font-weight: normal;
}

#container.popup #main table th { font-weight: bold; }

/*:la tabla tiene un clase .header destinada para la primer celda de la primer fila:*/
/*:esta celda debe tener el colspan maximo, y dentro de esta, se debe incluir los div's:*/
/*:.left clase definida para redondear el borde la tabla:*/
/*:.center clase definida para contener el titulo de la tabla:*/
/*:.right clase definida para redondear el borde la tabla:*/

#container #main table .header {
    padding: 0;
    margin: 0;
    height: 20px;
    line-height: 20px;
}

#container #main table .header .left {
    float: left;
    width: 5px;
    height: 10px;
}

#container #main table .header .center {
    float: left;
    padding: 2px 0 2px 0;
    text-transform: uppercase;
}

#container #main table .header .right {
    float: right;
    width: 10px;
    height: 10px;
}

/*:redefinicion de la clase header de las tablas definido para cada pais del prestador:*/
/*:(si no se entiende, ver comentarios definidos para el estilo #title):*/

#container #main.ARG   table .header { background: #99181c url( ../images/home/bg_form_table_header_arg.jpg )  top right repeat-y; color: #fff; }
#container #main.BRA   table .header { background: #586227 url( ../images/home/bg_form_table_header_brs.jpg )  top right repeat-y; color: #fff; }
#container #main.URU   table .header { background: #4c81b7 url( ../images/home/bg_form_table_header_i18n.jpg ) top right repeat-y; color: #fff; }
#container #main.RESTO table .header { background: #fdb814 url( ../images/home/bg_form_table_header_uru.jpg )  top right repeat-y; color: #fff; }

#container #main.ARG   table .header .left { background: url( ../images/home/bg_form_table_header_border_arg.jpg )  no-repeat; }
#container #main.BRA   table .header .left { background: url( ../images/home/bg_form_table_header_border_brs.jpg )  no-repeat; }
#container #main.URU   table .header .left { background: url( ../images/home/bg_form_table_header_border_i18n.jpg ) no-repeat; }
#container #main.RESTO table .header .left { background: url( ../images/home/bg_form_table_header_border_uru.jpg )  no-repeat; }

#container #main.ARG   table .header .right { background: url( ../images/home/bg_form_table_header_border_arg.jpg )  -10px 0 no-repeat; }
#container #main.BRA   table .header .right { background: url( ../images/home/bg_form_table_header_border_brs.jpg )  -10px 0 no-repeat; }
#container #main.URU   table .header .right { background: url( ../images/home/bg_form_table_header_border_i18n.jpg ) -10px 0 no-repeat; }
#container #main.RESTO table .header .right { background: url( ../images/home/bg_form_table_header_border_uru.jpg )  -10px 0 no-repeat; }

/*:la clase .footer funciona exactamente como la .header definida anteriormente:*/
/*:esta clase se define para redondear los bordes de la parte inferior de las tablas:*/

#container #main table .footer {
    padding: 0;
    margin: 0;
    height: 25px;
    line-height: 25px;
}

#container #main table .footer .left {
	background: url( ../images/home/bg_form_table_footer_border.jpg ) 0 0 no-repeat;
    float: left;
	position: relative;
	top: 10px;
    width: 10px;
    height: 15px;
}

#container #main table .footer .center {
    float: left;
    text-transform: uppercase;
	width: 97%;
    height: 25px;
    line-height: 25px;
}

#container #main table .footer .right {
    background: url( ../images/home/bg_form_table_footer_border.jpg ) -10px 0 no-repeat;
	float: right;
	position: relative;
	top: 10px;
    width: 10px;
    height: 15px;
}

#container #main table table { width: 100% !important; margin: 0 !important; }

/*:contenedor de botones aplicado en td, th o en div internos de .footer-.center:*/

#container #main .button-container {
    text-align: right;
    padding: 0 15px 0 0 !important;
}

/*:estilo de botones para sus diferentes tamaños:*/
/*:lamentablemente el ancho de los botones son fijos ya que estos tienen los bordes redondeados:*/

#container #main button,
#container #main button.boton-mediano {
    background: url( ../images/home/bg_button.gif ) no-repeat;
    font-size: 11px;
    color: #fff;
    width: 80px;
    height: 18px;
    line-height: 18px;
    border: none;
    text-transform: uppercase;
}

#container #main button.boton-mediano {
    background: url( ../images/home/bg_button_mediano.gif ) no-repeat;
    width: 160px;
}

#container #main button.boton-grande {
    background: url( ../images/home/bg_button_grande.gif ) no-repeat;
    width: 240px;
}

/*:redefinicion de los botones por pais de prestador:*/
/*:(si no se entiende, ver comentarios definidos para el estilo #title):*/

#container #main.ARG   button { background-position: 0 0; }
#container #main.BRA   button { background-position: 0 -38px; }
#container #main.URU   button { background-position: 0 -76px; }
#container #main.RESTO button { background-position: 0 -114px; }

#container #main.ARG   button:hover { background-position: 0 -19px; }
#container #main.BRA   button:hover { background-position: 0 -57px; }
#container #main.URU   button:hover { background-position: 0 -95px; }
#container #main.RESTO button:hover { background-position: 0 -133px; }

/*:estilo para los links dentro del #main:*/

#container #main a {
    text-decoration: none;
}

/*:la clase .link puede utilizarse en las etiquetas a o p dependiendo de la funcion que se le quiera dar:*/
/*:por esta misma razon no se etiqueta como a.link*/

#container #main .link {
    background: url( ../images/home/bg_link.gif ) no-repeat;
    font-size: 10px;
    padding-left: 10px;
    height:12px;
}

/*:redefinicion de los botones por pais de prestador:*/
/*:(si no se entiende, ver comentarios definidos para el estilo #title):*/

/*:las etiquetas a solo tienen background si estas tienen asignadas la clase .link:*/
/*:de igual manera esto no afecta el funcionamiento del estilo:*/

#container #main.ARG   a { background-position: 0 0;     color: #99181c; }
#container #main.BRA   a { background-position: 0 -24px; color: #58612a; }
#container #main.URU   a { background-position: 0 -48px; color: #4c81b7; }
#container #main.RESTO a { background-position: 0 -72px; color: #fcb815; }

#container #main.ARG   a:hover { background-position: 0 -12px; color: #dd6d23; }
#container #main.BRA   a:hover { background-position: 0 -36px; color: #c7d343; }
#container #main.URU   a:hover { background-position: 0 -60px; color: #88aed5; }
#container #main.RESTO a:hover { background-position: 0 -84px; color: #fde581; }

/*:como se ha explicado la clase .link puede utilizarse en etiquetas a o en p:*/

#container #main.ARG   p.link { background-position: 0 0;     color: #99181c; }
#container #main.BRA   p.link { background-position: 0 -24px; color: #58612a; }
#container #main.URU   p.link { background-position: 0 -48px; color: #4c81b7; }
#container #main.RESTO p.link { background-position: 0 -72px; color: #fcb815; }

/*:.separador es una clase que se definio para separar cualquier tipo de area de otra:*/
/*:la clase es generica y puede aplicarse en las etiquetas table, td, th, div, etc.:*/

#container #main.ARG   .separador { border-bottom: #99181c dashed 1px !important; }
#container #main.BRA   .separador { border-bottom: #58612a dashed 1px !important; }
#container #main.URU   .separador { border-bottom: #4c81b7 dashed 1px !important; }
#container #main.RESTO .separador { border-bottom: #fcb815 dashed 1px !important; }

/*:.precio se definio para resaltar los despliegues de los montos totas:*/

#container #main        .precio { font-size: 27px; font-weight: bold !important; font-style: italic; color: #99181c; }
#container #main.ARG    .precio { color: #99181c; }
#container #main.BRA    .precio { color: #58612a; }
#container #main.URU    .precio { color: #4c81b7 }
#container #main.RESTO  .precio { color: #fcb815; }

/*--- menubar ---*/

/*:estilo del menu horizontal compuesto por ul->li->a:*/

#container #main #menubar {
    height: 30px;
    text-align: center;
}

#container #main #menubar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#container #main #menubar li {
    float: left;
    border-right: 1px solid #FFF;
}

#container #main #menubar a {
    background: #eee url( ../images/home/bg_menubar.jpg ) repeat-x;
    color: #666;
    text-decoration: none;
    display: block;
    height: 30px;
    line-height: 32px;
    width: 132.3px;
}

#container #main #menubar a:hover {
    background-position: 0 -31px;
}

#container #main #menubar .selected a,
#container #main #menubar .selected a:hover {
    background-position: 0 -62px;
}

/*--- menu ---*/

/*:estilo del menu vertical compuesto por ul->li->a:*/

#container #main #menu {
    background: url( ../images/home/bg_menu.jpg ) -132px 0 repeat-y;
    width: 132px;
    float: left;
}

#container #main #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#container #main #menu .pais a,
#container #main #menu .moneda a {
    background: url( ../images/home/bg_menu.jpg ) repeat-y;
    text-decoration: none;
    color: #fff;
    display: block;
    height: 32px;
    padding-left: 10px;
    line-height: 32px;
    border-bottom: #fff solid 1px;
}

#container #main #menu .pais a:hover {
    font-weight: bold;
}

#container #main #menu .moneda a:hover {
    color: #ccc;
}

#container #main #menu .moneda {
    visibility: hidden;
    display: none;
}

/*
#container #main #menu .selected a,
#container #main #menu .selected a:hover { background-position: -132px 0; font-weight: normal; color: #666; }
*/

/*:dentro del menu vertical existen alguna opciones que escapan de lo estandar o basico:*/
/*:nacionalidad es una de ellas. la etiqueta de nacionalidad es una etiqueta que por defecto esta oculta:*/
/*:el menu contiene una opcion que hace visible al area definida como .nacionalidad:*/

#container #main #menu .nacionalidad {
    background: url( ../images/home/bg_menu.jpg ) repeat-y;
    height: 32px;
    text-align: center;
    line-height: 32px;
    border-bottom: #fff solid 1px;
    visibility: hidden;
    display: none;
}

#container #main #menu .nacionalidad select { width: 120px; }

#container #main #menu .idioma {
    background: url( ../images/home/bg_menu.jpg ) repeat-y;
    height: 32px;
    text-align: center;
    line-height: 32px;
    border-bottom: #fff solid 1px;
    visibility: hidden;
    display: none;
}

#container #main #menu .idioma select { width: 120px; }


/*:.login es la clase que contiene al formulario de acceso de usuarios al site:*/

/*estructura
 *.login
 * -------------------
 * | table           |
 * |  tr->td->input  |
 * |  tr->td->input  |
 * |  tr->td->button |
 * -------------------
 * */

#container #main #menu .login {
    background: url( ../images/home/bg_menu.jpg ) repeat-y;
    text-align: center;
    border-bottom: #fff solid 1px;
}

#container #main #menu .login table {
    background: transparent;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #fff;
    width: 100%;
}

#container #main #menu .login input {
    width: 100%;
/*
    width: 70px;
    float: right;
*/
}

#container #main #menu .login button {
    font-family: Arial, Helvetica, sans-serif;
    background: url( ../images/home/bg_button.gif ) 0 -152px no-repeat;
    font-size: 10px;
    color: #666;
    width: 80px;
    height: 16px;
    line-height: 16px;
    border: none;
    text-transform: uppercase;
}

#container #main #menu .login button:hover {
    background-position: 0 -169px;
    color: #aaa;
}

#container #main #menu .login a {
    text-decoration: underline;
    font-weight:bold;
    color: white;
}

#container #main #menu .login a:hover {
    color: #4c81b7;
}


/*:estilo basico para las opciones del menu vertical:*/

#container #main #menu .item {
    background: url( ../images/home/bg_menu.jpg ) -132px 0 repeat-y;
    display: block;
    border-bottom: #999 solid 1px;
    padding: 5px 0 5px 5px;
}

#container #main #menu .item a {
    background: url( ../images/home/bg_menu_item.gif ) no-repeat;
    height: 11px;
    padding-left: 15px;
    text-decoration: none;
    color: #666;
}

#container #main #menu .item a:hover {
    background-position: 0 -120px;
    color: #aaa;
}

#container #main #menu .item a.selected {
    background-position: 0 -60px;
}

#container #main #menu .item a.selected:hover {
    background-position: 0 -180px;
}

#container #main #menu form { padding: 0; margin: 0; } /* ie7 */

/*--- pagina ---*/

#container #main #page {
    float: left;
    width: 655px;
    margin: 10px 0 0 10px;
}

#container #main #site {
    float: left;
    width: 655px;
    background: url( ../images/home/bg_select_site.jpg ) repeat-y; 
    margin-bottom: 10px;
}

#container #main.ARG #site   { background-position: -1314px 0; }
#container #main.BRA #site   { background-position:  -657px 0; }
#container #main.URU #site   { background-position:     0   0; }
#container #main.RESTO #site { background-position:     0   0; }

/*--- form ---*/

/*:puede ver documentacion doc.site.desing para entender esta distribucion:*/

#container #main #page #form {
    float: left;
    width: 492px;
}

#container #main #page #form table .fields div {
    float: left;
    width: 50%;
    padding: 5px 0 5px 0;
}

#container #main #page #form table div#codCiudad select,
#container #main #page #form table div#codPrestador select {
    width: 90%;
}

#container #main #page #form table .fields option { //display: none; } /* ie7 */

/*--- Promociones ---*/

/*
NOTA: No puedo poner el path absoluto porque el + promociones no tiene la etiqueta div#page porque es un popup
#container #main #page #promociones
*/

/*:puede ver documentacion doc.site.desing para entender esta distribucion:*/

#container #main #promociones th {
    font-size: 10px;
    font-weight: normal;
    text-align: left;
    vertical-align: top;
    padding: 2px 2px 2px 5px;
    margin: 0;
    text-indent: 5px;
}

#container #main #promociones td {
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    vertical-align: top;
    padding: 2px 2px 2px 5px;
    margin: 0;
}

#container #main #promociones .header {
    text-align: left;
    font-style: normal;
    font-size: 12px;
    font-weight: normal;
}

#container #main #promociones .img,
#container #main #promociones table .header,
#container #main #promociones table .footer {
    padding: 0;
}

#container #main #promociones h2 {
    text-align: left;
    font-style: normal;
    font-size: 16px;
    font-weight: normal;
    margin: 5px 0 2px 0;
    border-bottom: #999 solid 1px;
}

/*:#promociones tiene un area por cada uno de los paises del prestador:*/
/*:cuando se selecciona un pais, en el menu vertical, la pagina spolo debe mostrar las promociones:*/
/*:para dicho pais:*/

#container #main.ARG #promociones .ARG   { display: block; }
#container #main.ARG #promociones .BRA   { display: none; }
#container #main.ARG #promociones .URU   { display: none; }
#container #main.ARG #promociones .RESTO { display: none; }

#container #main.BRA #promociones .ARG   { display: none; }
#container #main.BRA #promociones .BRA   { display: block; }
#container #main.BRA #promociones .URU   { display: none; }
#container #main.BRA #promociones .RESTO { display: none; }

#container #main.URU #promociones .ARG   { display: none; }
#container #main.URU #promociones .BRA   { display: none; }
#container #main.URU #promociones .URU   { display: block; }
#container #main.URU #promociones .RESTO { display: none; }

#container #main.RESTO #promociones .ARG   { display: none; }
#container #main.RESTO #promociones .BRA   { display: none; }
#container #main.RESTO #promociones .URU   { display: none; }
#container #main.RESTO #promociones .RESTO { display: block; }


/* NOTA: Esto lo tengo que hacer porque las imagenes de las ciudades tiene 420 de ancho */

#container.popup #main #promociones table { width: 420px !important; }



#container #main #promociones .menu {
    position: relative;
    float:right;
    top: 3px;
    //top: 22px;
    right: 5px;
    height: 19px;
    text-align: center;
}

#container #main #promociones .menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#container #main #promociones .menu li {
    float: left;
}

#container #main #promociones .menu .menu-promociones-anterior a,
#container #main #promociones .menu .menu-promociones-siguiente a,
#container #main #promociones .menu .menu-promociones-start a,    
#container #main #promociones .menu .menu-promociones-pausa a,
#container #main #promociones .menu .menu-promociones-mpromos a {
    background: url( ../images/home/bg_menu_promociones.gif );
    font-size: 10px;
    color: #fff;
    text-decoration: none;
    display: block;
    height: 18px;
    line-height: 18px;
    width: 30px;
    text-transform: uppercase;
    border-right: 1px solid #fff;
}

#container #main #promociones .menu .menu-promociones-anterior a  { background-position:    0   0; }
#container #main #promociones .menu .menu-promociones-siguiente a { background-position:  -31px 0; }
#container #main #promociones .menu .menu-promociones-start a     { background-position:  -62px 0; }
#container #main #promociones .menu .menu-promociones-pausa a     { background-position:  -93px 0; }
#container #main #promociones .menu .menu-promociones-mpromos a   { background-position: -180px 0; width: 60px; border-right: none; }

#container #main.ARG #promociones .menu .menu-promociones-anterior a  { background-position:    0   0; }
#container #main.ARG #promociones .menu .menu-promociones-siguiente a { background-position:  -31px 0; }
#container #main.ARG #promociones .menu .menu-promociones-start a     { background-position:  -62px 0; }
#container #main.ARG #promociones .menu .menu-promociones-pausa a     { background-position:  -93px 0; }
#container #main.ARG #promociones .menu .menu-promociones-mpromos a   { background-position: -180px 0; }

#container #main.BRA #promociones .menu .menu-promociones-anterior a  { background-position:    0   -38px; }
#container #main.BRA #promociones .menu .menu-promociones-siguiente a { background-position:  -31px -38px; }
#container #main.BRA #promociones .menu .menu-promociones-start a     { background-position:  -62px -38px; }
#container #main.BRA #promociones .menu .menu-promociones-pausa a     { background-position:  -93px -38px; }
#container #main.BRA #promociones .menu .menu-promociones-mpromos a   { background-position: -180px -38px; }

#container #main.URU #promociones .menu .menu-promociones-anterior a  { background-position:    0   -76px; }
#container #main.URU #promociones .menu .menu-promociones-siguiente a { background-position:  -31px -76px; }
#container #main.URU #promociones .menu .menu-promociones-start a     { background-position:  -62px -76px; }
#container #main.URU #promociones .menu .menu-promociones-pausa a     { background-position:  -93px -76px; }
#container #main.URU #promociones .menu .menu-promociones-mpromos a   { background-position: -180px -76px; }

#container #main.RESTO #promociones .menu .menu-promociones-anterior a  { background-position:    0   -114px; }
#container #main.RESTO #promociones .menu .menu-promociones-siguiente a { background-position:  -31px -114px; }
#container #main.RESTO #promociones .menu .menu-promociones-start a     { background-position:  -62px -114px; }
#container #main.RESTO #promociones .menu .menu-promociones-pausa a     { background-position:  -93px -114px; }
#container #main.RESTO #promociones .menu .menu-promociones-mpromos a   { background-position: -180px -114px; }

#container #main #promociones .menu .menu-promociones-anterior a:hover  { background-position:    0   -19px; }
#container #main #promociones .menu .menu-promociones-siguiente a:hover { background-position:  -31px -19px; }
#container #main #promociones .menu .menu-promociones-start a:hover     { background-position:  -62px -19px; }
#container #main #promociones .menu .menu-promociones-pausa a:hover     { background-position:  -93px -19px; }
#container #main #promociones .menu .menu-promociones-mpromos a:hover   { background-position: -180px -19px; }

#container #main.ARG #promociones .menu .menu-promociones-anterior a:hover  { background-position:    0   -19px; }
#container #main.ARG #promociones .menu .menu-promociones-siguiente a:hover { background-position:  -31px -19px; }
#container #main.ARG #promociones .menu .menu-promociones-start a:hover     { background-position:  -62px -19px; }
#container #main.ARG #promociones .menu .menu-promociones-pausa a:hover     { background-position:  -93px -19px; }
#container #main.ARG #promociones .menu .menu-promociones-mpromos a:hover   { background-position: -180px -19px; }

#container #main.BRA #promociones .menu .menu-promociones-anterior a:hover  { background-position:    0   -57px; }
#container #main.BRA #promociones .menu .menu-promociones-siguiente a:hover { background-position:  -31px -57px; }
#container #main.BRA #promociones .menu .menu-promociones-start a:hover     { background-position:  -62px -57px; }
#container #main.BRA #promociones .menu .menu-promociones-pausa a:hover     { background-position:  -93px -57px; }
#container #main.BRA #promociones .menu .menu-promociones-mpromos a:hover   { background-position: -180px -57px; }

#container #main.URU #promociones .menu .menu-promociones-anterior a:hover  { background-position:    0   -95px; }
#container #main.URU #promociones .menu .menu-promociones-siguiente a:hover { background-position:  -31px -95px; }
#container #main.URU #promociones .menu .menu-promociones-start a:hover     { background-position:  -62px -95px; }
#container #main.URU #promociones .menu .menu-promociones-pausa a:hover     { background-position:  -93px -95px; }
#container #main.URU #promociones .menu .menu-promociones-mpromos a:hover   { background-position: -180px -95px; }

#container #main.RESTO #promociones .menu .menu-promociones-anterior a:hover  { background-position:    0   -133px; }
#container #main.RESTO #promociones .menu .menu-promociones-siguiente a:hover { background-position:  -31px -133px; }
#container #main.RESTO #promociones .menu .menu-promociones-start a:hover     { background-position:  -62px -133px; }
#container #main.RESTO #promociones .menu .menu-promociones-pausa a:hover     { background-position:  -93px -133px; }
#container #main.RESTO #promociones .menu .menu-promociones-mpromos a:hover   { background-position: -180px -133px; }


/*--- ofertas ---*/

/*:puede ver documentacion doc.site.desing para entender esta distribucion:*/

#container #main #page #ofertas {
    float: right;
    width: 153px;
}

/*--- ofertas ___ header ___ ---*/

#container #main #page #ofertas .header {
    height: 113px;
    border-bottom: #aaa solid 1px;
}

/*
#container #main.ARG   #page #ofertas .header { background: url( ../images/home/bg_ofertas_arg_header.jpg ); }
#container #main.BRA   #page #ofertas .header { background-position: -154px 0 !important; }
#container #main.URU   #page #ofertas .header { background-position: -462px 0 !important; }
#container #main.RESTO #page #ofertas .header { background-position: -308px 0 !important; }
*/

/*--- ofertas ___ main ___ ---*/

#container #main #page #ofertas .main {
	padding: 5px;
	width: 143px;
	//width : 153 px; /* explorer */
}

#container #main.ARG    #page #ofertas .main { background: #98171c; }
#container #main.BRA    #page #ofertas .main { background: #586e30; }
#container #main.URU    #page #ofertas .main { background: #4b80b4; }
#container #main.RESTO  #page #ofertas .main { background: #fdb813; }

#container #main #page #ofertas .main h1 {
	font-size: 12px;
	font-weight: bold;
	padding: 0;
	margin: 0;
}

#container #main #page #ofertas .main h2 {
	font-size: 14px;
	font-weight: normal;
	padding: 0;
	margin: 5px 0 5px 0;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

#container #main #page #ofertas .main table {
    background: transparent;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	width: 100%;
}

#container #main #page #ofertas .main th {
	font-size: 10px;
	font-weight: normal;
	text-align: left;
	width: 80px;
}

#container #main #page #ofertas .main td {
	font-size: 18px;
	font-weight: bold;
	font-style: italic;
	text-align: right;
	vertical-align: top;
	width: 60px;
}

#container #main #page #ofertas .main a {
	text-decoration: none;
}

#container #main.ARG   #page #ofertas .main * { color: #fff; }
#container #main.BRA   #page #ofertas .main * { color: #fff; }
#container #main.URU   #page #ofertas .main * { color: #fff; }
#container #main.RESTO #page #ofertas .main * { color: #fff; }

#container #main.ARG   #page #ofertas .main h2 { border-bottom-color: #fff; }
#container #main.BRA   #page #ofertas .main h2 { border-bottom-color: #fff; }
#container #main.URU   #page #ofertas .main h2 { border-bottom-color: #fff; }
#container #main.RESTO #page #ofertas .main h2 { border-bottom-color: #fff; }

#container #main.ARG   #page #ofertas .main a:hover { color: #de6c23; }
#container #main.BRA   #page #ofertas .main a:hover { color: #c8d442; }
#container #main.URU   #page #ofertas .main a:hover { color: #88aed5; }
#container #main.RESTO #page #ofertas .main a:hover { color: #fde581; }

/*--- ofertas ___ footer ___ ---*/

#container #main #page #ofertas .footer {
    background: url( ../images/home/bg_ofertas_footer.jpg );
    height: 100px;
    width: 153px;
}

#container #main.ARG    #page #ofertas .footer { background-position: 0 0 !important; } /*bien*/
#container #main.BRA    #page #ofertas .footer { background-position: -154px 0 !important; } /*bien*/
#container #main.URU    #page #ofertas .footer { background-position: -308px 0 !important; } /*bien*/
#container #main.RESTO  #page #ofertas .footer { background-position: -462px 0 !important; } /*bien*/

#container #main.ARG    #page #ofertas .main { background: #98171c; } /*bien*/
#container #main.BRA    #page #ofertas .main { background: #586e30; } /*bien*/
#container #main.URU    #page #ofertas .main { background: #4b80b4; } /*bien*/
#container #main.RESTO  #page #ofertas .main { background: #fdb813; } /*bien*/

#container #main.ARG #page #ofertas .ARG     { display: block; }
#container #main.ARG #page #ofertas .BRA     { display: none; }
#container #main.ARG #page #ofertas .URU     { display: none; }
#container #main.ARG #page #ofertas .RESTO   { display: none; }

#container #main.BRA #page #ofertas .ARG     { display: none; }
#container #main.BRA #page #ofertas .BRA     { display: block; }
#container #main.BRA #page #ofertas .URU     { display: none; }
#container #main.BRA #page #ofertas .RESTO   { display: none; }

#container #main.URU #page #ofertas .ARG     { display: none; }
#container #main.URU #page #ofertas .BRA     { display: none; }
#container #main.URU #page #ofertas .URU     { display: block; }
#container #main.URU #page #ofertas .RESTO   { display: none; }

#container #main.RESTO #page #ofertas .ARG   { display: none; }
#container #main.RESTO #page #ofertas .BRA   { display: none; }
#container #main.RESTO #page #ofertas .URU   { display: none; }
#container #main.RESTO #page #ofertas .RESTO { display: block; }

/*--- despliegue-tarifa ---*/


#container #main #page .despliegue-tarifa table.tarifa { background: #fff !important; /*border-bottom: #000 dashed 1px; */ font-size: 10px; }


#container #main       #page .despliegue-tarifa table.tarifa .header { background: transparent !important;  }
#container #main.ARG   #page .despliegue-tarifa table.tarifa .header { border-bottom: #99181c dashed 1px !important; color: #99181c !important; }
#container #main.BRA   #page .despliegue-tarifa table.tarifa .header { border-bottom: #58612a dashed 1px !important; color: #58612a !important; }
#container #main.URU   #page .despliegue-tarifa table.tarifa .header { border-bottom: #4c81b7 dashed 1px !important; color: #4c81b7 !important; }
#container #main.RESTO #page .despliegue-tarifa table.tarifa .header { border-bottom: #fcb815 dashed 1px !important; color: #fcb815 !important; }

#container #main .cuadroInformacionAmpliada {
    width: 300px;
    overflow: auto;
    background: #4c81b7 url( ../images/home/bg_form_table_header_i18n.jpg ) top right repeat-y;
    color: #fff;
    padding: 4px;
}

#container #main.ARG   .cuadroInformacionAmpliada { background: #99181c url( ../images/home/bg_form_table_header_arg.jpg )  top right repeat-y; color: #fff; }
#container #main.BRA   .cuadroInformacionAmpliada { background: #586227 url( ../images/home/bg_form_table_header_brs.jpg )  top right repeat-y; color: #fff; }
#container #main.URU   .cuadroInformacionAmpliada { background: #4c81b7 url( ../images/home/bg_form_table_header_i18n.jpg ) top right repeat-y; color: #fff; }
#container #main.RESTO .cuadroInformacionAmpliada { background: #fdb814 url( ../images/home/bg_form_table_header_uru.jpg )  top right repeat-y; color: #fff; }

/*--- cotizaciones ---*/

#container #main .pasos-cotizacion { background: transparent; margin: 0px auto 20px auto !important;}

#container #main .pasos-cotizacion .title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #586e30;
}

#container #main.ARG   .pasos-cotizacion .title { color: #99181c; }
#container #main.BRA   .pasos-cotizacion .title { color: #58612a; }
#container #main.URU   .pasos-cotizacion .title { color: #4c81b7; }
#container #main.RESTO .pasos-cotizacion .title { color: #fcb815; }

#container #main .pasos-cotizacion .pasos { width: 100%; }

#container #main .pasos-cotizacion .pasos td {
    background: url(../images/home/bg_pasos_cotizacion.jpg) no-repeat;
    vertical-align: middle;
    height: 25px;
    font-size: 12px;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    padding: 0;
    width: 25px;
}

#container #main .pasos-cotizacion .pasos .current {
    color: #fff;
    font-weight: bold;
}

#container #main.ARG   .pasos-cotizacion .pasos .current { background-position: 0 -26px; }
#container #main.BRA   .pasos-cotizacion .pasos .current { background-position: 0 -52px; }
#container #main.URU   .pasos-cotizacion .pasos .current { background-position: 0 -78px; }
#container #main.RESTO .pasos-cotizacion .pasos .current { background-position: 0 -104px; }




#divMensajePopup {
    background: url('../images/home/bg_mensaje_error.jpg') no-repeat;
    height: 60px;
    padding: 6px;
}

#divMensajePopup table {background: transparent !important; }
#divMensajePopup td,
#divMensajePopup th {
    background: transparent !important;
    color: #fff !important;
}

#divMensajePopup button {
    background-position: 0 0 !important;
}

#divMensajePopup button:hover {
    background-position: 0 -19px !important;
}