/* __________________________________________________________________________ */
/*                                                                            */
/*                          CSS DE CLASES REUTILIZABLES                       */
/*                              Estilos de uso comun			      */
/* __________________________________________________________________________ */


/* ################## Clases comunes para posicionar divs ################### */

.clearfix {
    display: 		inline-block;
}

.clearfix:after {
    content:            ".";
    display: 		block;
    height: 		0;
    clear: 		both;
    visibility:     	hidden;
}

.elem_left   { float:   left;   }
.elem_right  { float:   right;  }
.elem_clear  { clear:	both;   }
.elem_inline { display: inline; }

.relative_position {
    position:		relative;
}

.displayblock { display: block }
.nodisplay { display: none; }
.noborder  { border: none; }
.nomargin  { margin: 0px; }
.nopadding { padding: 0px; }

/* ####################### Clases comunes para enlaces ###################### */

a.navlink {
    color:                  #E3841D;
    text-decoration:        underline;
    background:             url(/img/occidente/icons/link_arrow.gif) no-repeat right;	
    font-weight:            bold;
    padding-right:          10px;
}

a.actionlink {
    color:                  #E3841D;
    text-decoration:        underline;
    font-weight:            bold;
    padding-right:          10px;
}

.lightboxlinks a {
    background:             none;
    font-weight:            normal;
    font-size:              12px;
    color:                  #0078ae;
}

.cursor {
    cursor:                 pointer;
}

/* #################### Clases comunes para alineacion ###################### */

.vertical_middle {
    vertical-align:	middle;
}

.centered {
    text-align:         center;
}

.justify { 
    text-align:         justify;
}

.left_align {
    text-align:         left;
}

.right_align {
    text-align:         right;
}

.centered_margin {
    margin:             0px auto;
}


/* ##################### Clases comunes para margenes ####################### */

.margin5    {	margin:		5px;	    }
.margin5tneg{   margin-top:     -5px;       }
.margin0t   {   margin-top:     0px;        }
.margin5l   {   margin-left:    5px;        }
.margin5t   {   margin-top:     5px;        }
.margin2t   {   margin-top:     2px;        }
.margin6t   {   margin-top:     6px;        }
.margin15t  {   margin-top:     15px;       }
.margin14t  {   margin-top:     14px;       }
.margin40t  {   margin-top:     40px;       }
.margin5r   {   margin-right:   5px;        }
.margin5b   {   margin-bottom:  5px;        }
.margin5h   {   margin:		0px 5px;    }
.margin5v   {   margin:		5px 0px;    }
.margin10   {	margin:         10px;       }
.margin10h  {	margin:         0px 10px;   }
.margin10v  {	margin:         10px 0px;   }
.margin10r  {	margin-right:   10px;       }
.margin10l  {	margin-left:    10px;       }
.margin10b  {	margin-bottom:  10px;       }
.margin10t  {   margin-top:     10px;       }
.margin20   { 	margin:         20px;       }
.margin20r  {   margin-right:   20px;       }
.margin15l  {   margin-left:    15px;       }
.margin20l  {   margin-left:    20px;       }
.margin50l  {   margin-left:    50px;       }
.margin60l  {   margin-left:    60px;       }
.margin20t  {   margin-top:     20px;       }
.margin25t  {   margin-top:     25px;       }
.margin20v  {	margin:         20px 0px;   }
.margin20b  {	margin-bottom:  20px;       }
.margin20h  {	margin:         0px 20px;   }
.margin40h  {	margin:         0px 40px;   }
.margin20l  {	margin-left:    20px;       }
.margin30l  {	margin-left:    30px;       }
.margin40l  {	margin-left:    40px;       }
.margin40t  {	margin-top:     40px;       }
.margin150l {   margin-left:    150px;      }
.margin25t  {   margin-top:     25px;       }
.margin25b  {   margin-bottom:  25px;       }
.margin25l  {   margin-left:    25px;       }
.margin25r  {   margin-right:   25px;       }
.margin35r  {   margin-right:   35px;       }
.marginauto {   margin:         0px auto;   }

/* ##################### Clases comunes para paddings ####################### */

.padding5   {   padding: 	5px;        }
.padding10   {   padding: 	10px;        }
.padding4t  {   padding-top: 	4px;        }
.padding14t {   padding-top: 	14px;        }
.padding5r  {   padding-right: 	5px;        }

.padding10t {   padding-top:    10px;       }
.padding20t {   padding-top:    20px;       }
.padding10r {   padding-right:  10px;       }
.padding20l {   padding-left:   20px;       }
.padding25r {   padding-right:  25px;       }
.padding45r {   padding-right:  45px;       }

/* ###################### Clases comunes para anchos ######################## */

.w100perc {	width:	100%;   }
.w50perc  {	width:	50%;    }
.w40perc  {	width:	40%;    }
.w30perc  {	width:	30%;    }
.w20perc  {	width:	20%;    }

.w60px    {     width:  60px;   }
.w80px    {     width:  80px;   }
.w100px   {     width:	100px;  }
.w110px   {     width:	110px;  }
.w120px   {     width:	120px;  }
.w130px   {     width:	130px;  }
.w140px   {     width:	140px;  }
.w150px   {     width:	150px;  }
.w160px   {     width:	160px;  }
.w170px   {     width:	170px;  }
.w180px   {     width:	180px;  }
.w190px   {     width:	190px;  }
.w200px   {     width:	200px;  }
.w215px   {     width:	213px;  }
.w220px   {     width:  220px;  }
.w227px   {     width:  227px;  }
.w250px   {     width:	250px;  }
.w280px   {     width:	280px;  }
.w282px   {     width:	282px;  }
.w300px   {     width:	300px;  }
.w310px   {     width:	330px;  }
.w330px   {     width:	330px;  }
.w340px   {     width:	340px;  }
.w350px   {     width:	350px;  }
.w360px   {     width:	360px;  }
.w380px   {     width:	380px;  }
.w400px   {     width:	400px;  }
.w420px   {     width:	420px;  }
.w500px   {     width:	500px;  }

/* ###################### Clases comunes para fuentes ####################### */

/* -------------------------------- aspecto --------------------------------- */

.black      { color:            #000000;   }
.white      {color:             #FFFFFF;   }
.grey       {color:             #666666;}
.bold       { font-weight:      bold;      }
.normal_weight { font-weight:      normal; }
.italic	    { font-style:       italic;    }
.underline  { text-decoration:  underline; }
.nodecoration { text-decoration: none;     }

.small      { font-size:        10px;   }
.normal     { font-size:        11px;   }
.medium_big { font-size:        12px;   }
.big15      { font-size:        15px;   }
.big18      { font-size:        18px;   }
.big20	    { font-size:        20px;   }
.big28	    { font-size:        28px;   }

.title_marker {
    border-top:                 1px solid #EDEDED;
    border-bottom:              1px solid #EDEDED;
    padding:                    5px 0px;
}

.quote {
    color:                      #6F6C42;
    font-size:                  10px;
    font-weight:                normal;
    font-family:                verdana;    
    text-indent:                20px;
    background:                 url(/img/occidente/icons/open_quote.gif) no-repeat top left;
}

.emphasize_products {
    border-top:                 1px dotted #6194b9;
    border-bottom:		1px dotted #6194b9;	
}

.emphasize {
    border-top:                 1px dotted #6C0000;
    border-bottom:		1px dotted #6C0000;	
}

.section_marker {
    border-bottom:              1px dotted #000000;
}

p.small {
    font-size:                  11px;
    line-height:                15px;
    text-align:                 left;
}


/* -------------------------------- tamanio --------------------------------- */


/* ###################### Clases comunes para listas ######################## */

ul.blue_list {
    margin-left:         0px;
    padding-left:        15px;
    list-style-image:    url(/img/occidente/icons/ico_ok_blue.gif);
    list-style-position: 0px 5px;
}

ul.blue_list li {
    margin:		5px 0px 5px 0px;
    padding-bottom:	5px;
    border-bottom:      1px dotted #6194B9;
}

ul.blue_list li.last {
    border-bottom:	none;
}


ul.content li {
    color:              #000000;
    text-align:         justify;
    font-size:          12px;
    line-height:        20px;
}

ul.content_small li {
    color:              #000000;
    font-size:          11px;
    line-height:        15px;
}

ul.extra_content_list{
    margin-left:        5px;
    padding-left:       15px;
}

ul.extra_content_list li {
    font-size:          11px;
    line-height:        18px;
}


#accordion {
    margin:             20px 0px;
    width:              600px;
}

.accordion_section {
    margin:             5px 0px;
}

img.accordion_toggler {
    cursor:             pointer;
    float:              left;
    margin:             8px 10px 0px 0px;
}

img.accordion_toggler_home {
    cursor:             pointer;
    float:              left;
    margin:             7px 20px 0px 10px;
}

#accordion div.accordion_content {
    float:              left;
    width:              500px;
}

#accordion h4 {
    font-weight:	bold;
    font-size:          12px;
    color:              #6F6C42;
    padding:            8px;
    /*background:         #EAEFF5;*/
}

#accordion_home h4 {
    font-weight:	bold;
    font-size:          12px;
    color:              #6F6C42;
    padding:            8px;
    /*background:         #EAEFF5;*/
}

/*.accordion_text {
    background:		#EAFFE0;
}*/

.accordion_text p {
    margin: 		0px;
    padding:		10px 10px 10px 20px;
    font-size:		12px;
    width:              460px;
}

.accordion_text ul {
    padding:            0px 10px 10px 40px;
    color:              #000000;
    font-size:          12px;
    line-height:        20px;
    list-style-type:    lower-alpha;
}

.accordion_text ol {
    font-family:        arial;
    font-size:          13px;
    color:              #000000;
    width:              445px;
}

/* #################### Clases comunes para formularios ##################### */

.form_button {
    font-family:            "Lucida Sans Unicode";
    font-size:              16px;
    height:                 30px;
    color:                  #000000;
    background:             #F0EFEF;
}

.form_button_inactive{
    font-family:            "Lucida Sans Unicode";
    font-size:              16px;
    height:                 30px;
    color:                  #BBBBBB;
    background:             #F0EFEF;
    background-image:       url(/img/icons/ko_transp.gif);
    background-repeat:      no-repeat;
    width:                  auto;
    padding-right:          20px;
    padding-left:           30px;
    
    
}

/* #################### Titulo de la home ####################################*/
#banner_section h1 {
    margin:                 35px 0px 0px 5px;
    font-family:			Corbel, Calibri, Arial;
    font-size:				24px;
}
#banner_section h2 {
    margin:                 0px 0px 0px 5px;
	font-family:			Corbel, Calibri, Arial;
	font-size:				16px;
	font-weight:			normal;
}