/* 
    Document   : cortinas
    Created on : 2/12/2012, 12:05:04 PM
    Author     : Alexandre
    email      : tauroamp@yahoo.es
    Description:
        Hoja de estilo para simulador de cortinas.
*/
@font-face {
    font-family: 'Futura11';
    src: url('microgme-webfont.eot');
    src: url('microgme-webfont.eot?#iefix') format('embedded-opentype'),
         url('microgme-webfont.woff') format('woff'),
         url('microgme-webfont.ttf') format('truetype'),
         url('microgme-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-stretch: extra-expanded;

}
*, div, button, span{
	font-family: 'Arial Narrow';
}
body{
    
}
.backHeader{
    background: url("../images/bg.fw.png")  repeat-x;
    background-color: red;
    width: 100%;
    border: red 4px solid;
}
div{
    border:none;
}
.principal, #menuprincipal-body{
    background:url(../images/jabe_aluminio.jpg) repeat;
    border:0;
    margin:auto;
}
.logo{
    cursor: hand;
    cursor: pointer;
    opacity: 0.7;
}
.logo:hover{
    -moz-box-shadow: red;
    opacity: 0.7;
}

.titulo{
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    border:0;
    text-align: center;
    vertical-align: middle;
    overflow: visible;
}
.titulo img{
    vertical-align: middle;
}

.sel-cat-titulo{
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
    font-weight: bolder;
    text-align: center;
    border:none; color:#C01014;
}
#sel-cat-body{
    background: url("../images/bg_intro.png") repeat-x;
    text-align: center;
    border:none;
    height:225px;
}

#select-category{
    margin-left: auto;
    margin-right: auto;
}

.clink{
    float:left;
    opacity:0.7;
    cursor: hand;
    cursor: pointer;
    margin-right: 30px;
    text-align: center;
    
}
#sim-sel-color .x-box-inner img{
    margin-right: 5px;
    cursor: hand;
    cursor: pointer;
    opacity:0.7;
}
#sim-sel-color .x-box-inner img:hover{
    opacity:1;
}
.clink span{
    width: 100px;
}
.clink-over{
    opacity:1; 
}
.seccion-personalizada, .seccion-personalizada > div{
    background-color: transparent;
    border:none;
}

#titulo-personalizado img{
    margin-top:55px;
}

.sel-personalizado{
     background: url("../images/bg_intro.png") repeat-x;
     border:none;
     padding: 30px;
}
.sel-personalizado div{
    background-color:  transparent;
    border:none;
}
.sel-personalizado-espec{
    padding: 10px; color:#FFF;
    background:  url("../images/transparenciaespecificaciones.png") 100% no-repeat;
}
.sel-personalizado-espec h1{
    text-align: center;
    font-size: 14px;
    color: #C01014;
    margin-top: 5px;
} 
.sel-personalizado-espec img{
    float:right;
    margin-right: 20px;
    margin-top: -50px;
    
}
.sel-personalizado-probar{
    text-align: center;
}

.principal-btn-subir-foto{
    width: 240px;
    height: 45px;
    
}
.x-form-file-btn{
    width: 240px;
    height: 65px;
    cursor: hand;
    cursor: pointer;
    top: 14px;
}
.btn-pruebalo{
    width:95px;
    height: 170px;
    background: url("../images/pruebalo.png") center no-repeat;
    opacity:0.7;
}
.btn-pruebalo:hover{
    opacity:1;
}

#subir-foto-ajustar, #subir-foto-ajustar > div{
    background-color: transparent;
    border: none;
}

#userPicture{
    overflow: hidden;
}

.btn-rota-favor{
    background: url("../images/rota-favor.png") no-repeat;
}
.btn-rota-contra{
    background: url("../images/rota-contra.png") no-repeat;
}
#pictureCutter{
    position:absolute;
}
.imgCutter{
   /* background-color: transparent;*/
   cursor: hand;
   cursor:pointer;
}
.imgCutterMove{
   cursor:move;
}

.navSimulador{
    background-color: gainsboro;
    border:solid 2px darkgray;
}
.bodySimulador{
    background-color: gainsboro;
    margin-top:15px;
}

.simulador-detalles {
    background: url("../images/detalles.jpg") no-repeat;
    background-size: 100% 100%;
    height:55px;
    text-align: center;
    color:whitesmoke;
    vertical-align: middle;
    font-weight: bolder;
    padding-top: 15px;
    font-size: 16px; 
}
.sim-etiquetas{
    margin:10px 0 5px 0;
    text-align:center;
    font-size: 12px;
}

.simDetalleMaterial{
    cursor:pointer;
    cursor:-moz-zoom-in;
    cursor:-webkit-zoom-in;
    cursor: zoom-in;
    opacity: 0.7;
    padding: 5px;
}
.simDetalleMaterial:hover{
    opacity: 1;
}

.sim-pend-left{
    background: url("../images/pendienteizquierda.png")  no-repeat;
}
.sim-pend-right{
    background: url("../images/pendientederecha.png")  no-repeat;
}
.sim-pend-left, .sim-pend-right{
    opacity: 0.7;
    position:absolute;
    z-index:10;
    background-color: transparent;
    border:none;
}
.sim-pend-left:hover, .sim-pend-right:hover{
    opacity: 1;
    cursor: pointer;
    cursor: hand;
}

.sim-mat-selected{
    color:white;
    opacity:1;
}

.sim-elijamaterial, .sim-mat-all, .sim-aluminio,.sim-acero, .sim-policarbonato{
    background-size: 100% 100%;
    background-repeat: none;
    vertical-align: middle;
    font-weight: bolder;
    padding-top: 4px;
    font-size: 16px; 
    border-radius: 10px 10px 0px 0px;
}

.sim-elijamaterial{
    background-image: url("../images/elijamaterial.jpg");
    background-size: 100% 100%;
    text-align: left;
    padding-left: 10px;
    color: whitesmoke;
}
.sim-mat-overflow, .sim-mat-overflow div {
    overflow: visible;
}
.sim-mat-all, .flash-all{
    background-color: #666;
    text-align: center;
}
.sim-mat-all-flecha{
    position: absolute;
    width: 30px;
    top: 29px;
    left: 58px;
}

.sim-aluminio, .flash-aluminio{
    background-color: #80A510;
    text-align: center;
}
.sim-aluminio-flecha{
    position: absolute;
    /*visibility: hidden;*/
    width: 30px;
    top: 29px;
    left: 59px;
}

.sim-acero, .flash-acero{
    background-color: #0F768C;
    text-align: center;
}
.sim-acero-flecha{
    position: absolute;
    /*visibility: hidden;*/
    width: 30px;
    top: 29px;
    left: 55px;
}
.sim-policarbonato, .flash-policarbonato{
    background-color: #F4BD00;
    text-align: center;
}
.sim-policarbonato-flecha{
    position: absolute;
    /*visibility: hidden;*/
    width: 30px;
    top: 29px;
    left: 83px;
}



#sim-mat-view-container{
    overflow: hidden;
    padding-left: 50px;
    padding-right: 50px;
}
#sim-mat-view-container .x-box-inner{
    width: 3000px;
    height: 175px;
}

.sim-mat-clink{
    position: relative;
    opacity:1;
    cursor: hand;
    cursor: pointer;
    margin-right: 30px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}
.sim-mat-clink:hover{
    opacity:0.7;
}

.sim-mat-view{
    background: url("../images/fondo-mats-all.png") 100% 100% repeat-x;
    overflow: scroll;
}
.sim-mat-view-al{
    background: url("../images/fondo-mats-al.jpg") 100% repeat-x;
    color:white;
}
.sim-mat-view-ac{
    background: url("../images/fondo-mats-ac.jpg") 100% repeat-x;
    color:white;
}
.sim-mat-view-pol{
    background: url("../images/fondo-mats-pol.jpg") 100% repeat-x;
    color:white;
}
.sim-mat-all:hover, .sim-aluminio:hover, .sim-acero:hover,.sim-policarbonato:hover{
    opacity:1;
    /*color:whitesmoke;*/
    cursor:hand;
    cursor:pointer;
}
.sim-icon-left{
    position: absolute;
    width:45px;
    margin-top: 76px;
    opacity:0.7;
    z-index: 20;
}
.sim-icon-right{
    position: absolute;
    width:45px;
    margin-left: 976px;
    margin-top: -125px;
    opacity:0.7;
    z-index: 20;
}
.sim-icon-left:hover, .sim-icon-right:hover{
    opacity:1;
    cursor:hand;
    cursor:pointer;
}


.sim-foto-container {
    background-color: #ABABAB;
    border:none;
}
.sim-foto-container .x-panel-body, .sim-detalles-container .x-panel-body{
    background-color: transparent;
    border:none;
}
.sim-toolbar, .sim-toolbar .x-box-inner{
    background-color: #474747;
    width:100%;
    padding: 0px;
    border:none;
}

.sim-toolbar > div{
    background-color: #474747;
    border:none;
}
.sim-toolbar button{
    background-color: transparent;
    background-image: none;
    font-family: 'Arial Narrow';
    
}
.sim-toolbar button .x-btn-inner, .sim-toolbar .x-field{
    color:white;
    font-size: small;
    text-align: center;
    font-family: Futura;
}

.sim-toolbar button .x-btn-icon{
    color:whitesmoke;
}
.sim-toolbar button .x-btn-icon{
    width:30px;
}

.x-slider-thumb-over{
    cursor:hand;
    cursor:pointer;
}

.sim-button-over .x-btn-inner{
    /*background-color: #ABABAB;*/
    color: orange;
    font-weight: bold;
}
.sim-toolbar-separador{
    background: url("../images/separador.png") left no-repeat;
}
.sim-deshacer{
    background: url("../images/deshacer.png") left no-repeat;
}
.sim-pendiente-0{
    background: url("../images/moverpendiente_btn.png") left no-repeat;
}
.sim-antesdespues{
    background: url("../images/antesdespues.png") left no-repeat;
}

.sim-toolbar-zoom-innerEl{
    width:140px;
}


.sim-medir{
    background: url("../images/medir.png") left no-repeat;
}

/*Panel secundario*/
.simulador{
    margin-left: auto;
    margin-right: auto;
    width: 1020px;
    background-color: transparent;
    border:0;
}

.mnup-texto-1, .mnup-texto-2{
    color:white;
}
.mnup-texto-2{
    font-size: 20px;
}
.img-over{
    opacity: 0.7;
    cursor:hand;
    cursor: pointer;
}
.x-form-file-btn{
    background-image: url("../images/boton_foto.png");
}

.x-form-file-input{
    height:50px;
}