/*
    Document   : style
    Created on : 09-sep-2013, 23:53:00
    Author     : Julian
    Description:
        Purpose of the stylesheet follows.


COLORES:

blanco: FFFAFF
orange; FF8000
blue: 000062
blue soft: 00BDFF
blue soft 2: 0040A3


*/

html{margin: 0px;
     height: 100%;
     background: #fff;

}


body {
    margin: 0px;
    height: 100%;
   overflow-x: hidden;

}

a{color: inherit;
  text-decoration: none;}

#PINload_screen{
    background: #f5f5f5;
    opacity: 1;
    position: fixed;
    z-index:10;
    top: 0px;
    width: 100%;
    height: 1600px;
}
#PINload_screen > #PINloading{

    width:auto;
    height:60px;
    margin: 300px auto;

    font-size:22px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    color:#999;
}

.PINcontentBack{
    height: auto;
    position: relative;
}
.PINcontentBackVista{
    height: auto;
    background: url(/css/back.jpg) repeat;
    min-height: 100vh;
    position: relative;
}

/* 
BARRA SUPERIOR Y LOGO - PANEL
*/
.PINbarTopRegistro{
    height: 30px;
    border-bottom: 1px solid #ddd;
    background: #fff;
    text-align: right;
    margin-right: 10px;
    line-height: 30px;
    font-family: 'Open Sans', sans-serif;
    color:rgb(11,158,217);
}
.PINbarTopLogo{
    max-width: 300px;
    padding-top: 10px;
    padding-bottom: 10px;
}
/* 
FIN BARRA SUPERIOR Y LOGO - PANEL
*/


/* 
BARRA INFERIOR - PANEL
*/
.PINfooter{
    height: auto;
    border-top: 1px solid #ccc;
    padding-top: 10px;
    padding-bottom: 10px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: url(/css/back.jpg) repeat;
    
}
.PINfooterText{
    text-align: center; 
    color:#888;
    width: 100%;
}


/* 
FIN BARRA INFERIOR - PANEL
*/

/* 
CONTENEDOR CONTENIDO - PANEL
*/
.PINmiddle{
    background: #f5f5f5;
    height: auto;
    min-height: 500px;
    overflow: hidden;
    padding-tdop: 10px;
    padding-bottom: 50px;
}

.PINmiddleContentExtend{
    width: 100%;
    max-width: 1200px;
    min-height: 100vh;
    margin-left: auto; margin-right: auto;
    position: relative;
}
/* 
FIN CONTENEDOR CONTENIDO - PANEL
*/

/* 
CONTENEDOR CONTENIDO - VISTA MOVIL
*/
.PINmiddleMOVIL{
    background: url(/css/back.jpg) repeat; 
    padding-top: 20px;
}

.PINmiddleContentExtendMOVIL{
    max-width: 600px;
    margin-left: auto; 
    margin-right: auto; 
    bodrder: 1px solid #bdbdbd;
    backgreound: #fff; 
    
}
/* 
FIN CONTENEDOR CONTENIDO - VISTA MOVIL
*/

.PINmovilViewContentButton{
    backgrodund: #fafafa; 
}
.PINmovilViewHEAD_icon1{
    border-radius: 0px !important;
    border: 0px !important;
    border-bottom: 1px solid #ccc !important;
    border-right: 1px solid #ccc !important;
    font-size: 20px !important;
}
.PINmovilViewHEAD_icon2{
    border-radius: 0px !important;
    border: 0px !important;
    border-bottom: 1px solid #ccc !important;
    border-right: 1px solid #ccc !important;
    font-size: 20px !important;
    background: #fafafa  !important;
}
.PINmovilViewHEAD_icon3{
    height: 60px !important;
    border-bottom: 1px solid #ccc !important;
    text-align: center !important;
    line-height: 60px !important;
    font-family: 'Open Sans', sans-serif !important;
    color:rgb(64,191,80) !important;
    font-size: 20px !important;
    background: #fff !important;
    bacekground: rgb(55,182,63);
    coelor:#fff !important;
}
.PINmovilSEPATOR_gray{
    height: 10px;
    backgrodund: #fafafa;
}
.PINmovilSEPATOR_gray_T{
    height: 10px;
    backgdround: #fafafa;
    border-top: 1px solid #ccc;
}
.PINmovilSEPATOR_gray_B{
    height: 10px;
    backgdround: #fafafa;
    border-bottom: 1px solid #ccc;
}
.PINmovilSEPATOR_gray_TB{
    height: 10px;
    backgdround: #fafafa;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
.PINmovilSEPATOR_line{
    height: 0px;
    border-bottom: 1px solid #ccc;
}
.PINmovilViewTITLE{
    height: auto;
    background: #fff;
    text-align: left;
    padding-left: 10px;padding-right: 10px;
    font-family: 'Open Sans', sans-serif;
    color:rgb(0,0,0);
    text-align: center;
}

/* 
ELEMENTOS - VISTA MOVIL
*/



/* 
FIN ELEMENTOS - VISTA MOVIL
*/

.PINtituloVista{
    margin-left: 10px; 
    color: rgb(64,191,80); 
    font-family: 'Open Sans';
    padding-bottom: 30px;
    padding-top:20px;
}
.PINpanelFormContent{
    width: 100vw; 
    max-width: 800px; 
    margin: 0 auto;
}
.PINtituloVistaSub{
    margin-bottom: 20px;
    color:rgb(64,191,80); 
    font-family: 'Open Sans';
}










.dPINtop{
    background: #fff;
    height: 80px;
    overflow: hidden;
}
.dPINtopContent{
    width: 100%;
    max-width: 1200px;
    height: 100%;
    margin-left: auto; margin-right: auto;
    position: relative;
}
.dPINtopLogo{
    height: 100%;
    width: 100%;
    background:  url('../PINQUICK_WHITE_MEDIUM3.png') 10px center no-repeat;
    /*marfgin-left: 30px;*/
}
.PINtopLogoView{
    height: 100%;
    width: 100%;
    background:  url('/css/PINQUICK_WHITE_SMAL2.png') center center no-repeat;
    /*marfgin-left: 30px;*/
}
.PINtopTitle{
    height: 100%;
    width: auto;
    font-size:21px;
    line-height: 80px;
    font-family: 'Open Sans', sans-serif;
    color:#888;
    position: absolute;
    left: 300px;
    bottom: 0px;
    font-weight: 300;
}
.PINtopInfo{
    height: auto;
    width: 400px;
    position: absolute;
    top:25px;
    right: 10px;
}
.PINtopInfoText1{
    height: auto;
    width: auto;
    font-size:18px;
    text-align: right;
    font-family: 'Open Sans', sans-serif;
    color:rgb(11,158,217);
}
.PINtopInfoText2{
    height: auto;
    width: auto;
    font-size:16px;
    text-align: right;
    font-family: 'Open Sans', sans-serif;
    color:#777;
    font-style: italic;
}



.PINmenu_0{height: 55px;background: #eee;}
.PINmenu{
    background: #fff;
    height: 50px;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    background-color: #f4f5f5; background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f5f5), to(#dfdddd));
    background-image: -webkit-linear-gradient(top, #f4f5f5, #dfdddd);
    background-image: -moz-linear-gradient(top, #f4f5f5, #dfdddd);
    background-image: -ms-linear-gradient(top, #f4f5f5, #dfdddd);
    background-image: -o-linear-gradient(top, #f4f5f5, #dfdddd);
    background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f4f5f5, endColorstr=#dfdddd);
}
.PINmenuContent{
    width: 100%;
    max-width: 1200px;
    height: 100%;
    margin-left: auto; margin-right: auto;
}

.PINmenuItemContent{
    position: relative;
    float:left;
}
.PINmenuItem,.PINmenuItemSel{
    height: 50px;
    width: auto;
    text-align: center;
    font-family:'Segoe UI',  arial, sans-serif;
    float: left;;
    line-height: 50px;
    cursor: pointer;
    color: #666;
    font-size: 16px;
    padding-left: 20px; padding-right: 20px;
    cursor: pointer;
    text-transform: uppercase;
    border-left: #ddd 1px solid;
}
.PINmenuItem:hover{background: #eee}
.PINmenuItemSel{background: #f5f5f5;border-bottom: 2px solid #888;}

.PINmenuDesp{
    height: auto;
    width: auto;
    border: 1px solid #aaa;
    background: #fff;
    position: absolute;
    top:50px; left: 0px;
    padding-top: 10px;padding-bottom: 10px;
    z-index: 20000;
    display: none;
}
.PINmenuDespItem{
    height: 30px;
    width: 300px;
    padding-left: 20px; padding-right: 20px;
    background: #fff;
    text-align: left;
    font-family:'Segoe UI',  arial, sans-serif;
    line-height: 30px;
    cursor: pointer;
    color: #666;
    font-size: 18px;
}
.PINmenuDespItem:hover{background: #eee}


.PINmiddleContent{
    width: 100%;
    max-width: 1000px;
    height: auto;
    margin-left: auto; margin-right: auto;
}
.PINtitleView{
    height: auto;
    width: auto;
    font-family: 'Open Sans', sans-serif;
    font-size:22px;
    color:#777;
    border-bottom: 3px dashed #ccc;
    padding-bottom: 20px;
    margin-bottom: 40px;
}
.PINformContentView{display: inline-block;width: 100%}

.PINformContentViewLeft{
    width: 250px;
    height: 400px;
}

.PINformContentViewRight{
    width: 730px;
    height: auto;
    outline: 1px solid #aaa;
}
.PINisduplo_left{float:left}
.PINisduplo_right{float:right}

.PINformOptionsTitle{
    height: 50px;
    width: 100%;
    background: #f5f5f5;
    outline: #ccc 1px solid;
    padding-left: 30px;
    padding-right: 30px;
    font-size:18px;
    text-align: center;
    line-height: 50px;
    font-family: 'Open Sans', sans-serif;
    color:#777;
    box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */
}

.PINformOptionsItem{
    height: auto;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;padding-bottom: 10px;
    font-size:15px;
    text-align: left;
    line-height: 25px;
    font-family: 'Open Sans', sans-serif;
    color:#777;
    cursor: pointer;
    box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */
}
.PINformOptionsItem:hover{background: #f5f5f5;color:#000}

.PINformTitle{
    height: 60px;
    width: 100%;
    background: #f5f5f5;
    border-bottom: #ccc 1px solid;
    padding-left: 30px;
    padding-right: 30px;
    font-size:18px;
    text-align: left;
    line-height: 60px;
    font-family: 'Open Sans', sans-serif;
    color:#777;
    box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */
}
.PINformContent{
    height: auto;
    width: 730px;
    min-height: 100px;
    background: #fafafa;
    padding-top: 20px;
    padding-bottom: 20px;
}




.PINbarButonsView{
    width: 800px;
    height: 60px;
    position: absolute;
    top: -10px;
    right: 0px;
}

.PINbarButonsViewItem{
    height: 40px;
    width: auto;
    text-align: center;
    font-family:'Segoe UI',  arial, sans-serif;
    outline:1px solid #ccc;
    border-radius: 3px;
    float: right;
    line-height: 40px;
    cursor: pointer;
    color: #666;
    font-size: 16px;
    background-color: white;
    padding-left: 20px; padding-right: 20px;
    margin-left: 10px;
}
.PINbarButonsViewItem:hover{background: #f5f5f5}

.boton_barra{border:1px solid #aaa; text-align: center;cursor:pointer;color:#aaa;font-family: 'Open Sans';background: #f5f5f5; border-left-width: 0px;padding-bottom: 10px;}
                .boton_barra:hover{background:#fafafa;color:#555;border-color:#555}
                .boton_barra_first{border-left-width: 1px !important;}
                .boton_barra_active{border:1px solid #70B85D; text-align: center;cursor:pointer;color:#70B85D;font-family: 'Open Sans';background: #fff; border-left-width:0px;padding-bottom: 10px;}