﻿@charset "UTF-8";
/* CSS Document */


/* CSS STRAUMANN DELEGADOS */


/* HOJA DE ESTILOS CSS
para el desarrollo del proyecto WEB STRAUMANN CONECTATE-DELEGADOS
desarrollado por:	ADDENTRA INTERNET
Fecha inicio: 18/04/2013

*/

body { font-family: 'Open Sans'!important; sans-serif; color: #666666; overflow:auto; font-size:14px; font-weight:normal;  }

/****************************************
*          ELEMENTOS COMUNES
*  body, a, h1, h2, h3, h4, h5, img, div
*****************************************/
   * { margin: 0; padding: 0; border: none;}
    h1, h2, h3, h4, h5, h6, p, pre,  
    blockquote, ul, ol, dl, address {	margin: 0 0 1em 0; font-weight:lighter;} 
ul, ul li, ol, ol li{ margin:0px; padding:0px; list-style:none; }
:focus {	outline: 0;}


a, a:link, a:visited, a:active { /*font: normal 1.09em "Arial"*/ text-decoration:none; cursor:pointer; color:#00722d; }
a:hover{color:#c1cd23;}

button:hover{cursor:pointer;}

img{border:none; margin:0px; padding:0px; max-width: 100%;}
h1{font: normal /*18px*/ 1.63em ; color:#00722d; padding-left:20px;}
h2{font: normal /*16px*/1.45em; color:#00722d!important; margin:0px; padding:0px; font-weight:lighter!important; }
h3{font: normal /*12px*/1.09em ;  }
h4{font: normal /*12px*/1.09em ; color:#565656; margin:0 0 5px 0; padding:0px; cursor:default; }
h5{font: bold /*12px*/1.0em ;}
h6{color:#92e972; font: bold 1.09em ; margin:0px; padding:0px;}

.clear { clear:both;}
.oculto{ display:none !important;}
.hidden { visibility:hidden !important;}
input, select, textarea{font-family: 'Open Sans' !important; padding:5px; font-size:14px; margin:5px; background-color:#fff!important; border:1px solid #ccc!important; border-radius: 3px; color:#666!important;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}
input:focus, input:-webkit-autofill:focus, textarea:focus, textarea:-webkit-autofill:focus {box-shadow: 0 0 10px #669966; border:1px solid  #008c00; color:#666;}
::placeholder{color: #a5a5a5; font-style: italic;}
i.pagina{ color:#666; font-size:18px; background:none; text-decoration:underline; line-height:44px; }
li.pagina:hover{color:#a7bc1d;}
li.seleccionado{color:#090; text-decoration:none; color:#fff; text-shadow:1px 1px #a3a2a2}

.verde{ color:#393;}
 /*****************************************************
*                ESTRUCTURA
* #cabecera, #menu, #contenido, #pie
******************************************************/

#contenedor{ position:relative; padding-bottom: 100px; overflow: auto; min-height:100%}
#contenedorpie{position: fixed;margin-top: -60px; bottom: 0;}
#contenedor, #contenedorpie{ display:block; width:100%;}
.borde { margin:auto; width:90%;}
#cabecera, #cuerpo, #pie{ /*float:left; width:1280px;  width:1024px;*/}
#cuerpo{ width:100%; clear: both;padding-top: 20px;}
 /*****************************************************
*             COMUNES
******************************************************/

.ancho90{ width:90%!important; }
.ancho100{ width:100%!important; }
.ancho85{ width:85%; }
.ancho80{ width:80%; }
.ancho75{ width:75%; }
.ancho70{ width:70%; }
.ancho65{ width:65%; }
.ancho60{ width:60%; }
.ancho55{ width:55%; }
.ancho50{ width:50%; }
.ancho45{ width:45%; }
.ancho40{ width:40%!important; }
.ancho35{ width:35%; }
.ancho33{ width:33%; }
.ancho30{ width:30%; }
.ancho25{ width:25%; }
.ancho20{ width:20%; }
.ancho15{ width:15%; }
.ancho10{ width:10%; }
.ancho8{ width:8%; }
.ancho5{ width:5%; }
.right {text-align:right;}

.boton, .botonredondo {
    float: right;
    line-height: 16px;
    cursor: pointer;
    box-shadow: none;
    color: #fff;
    font-size: 20px;
    margin: 5px;
    padding: 10px 20px;
    border: 1px solid #007621;
    -webkit-box-shadow: #B7B8B8 0px 1px 0px inset;
    -moz-box-shadow: #B7B8B8 0px 1px 0px inset;
    box-shadow: #B7B8B8 0px 1px 0px inset;
    text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #4ba614; background-image: -webkit-gradient(linear, left top, left bottom, from(#4ba614), to(#008c00));
 background-image: -webkit-linear-gradient(top, #4ba614, #008c00);
 background-image: -moz-linear-gradient(top, #4ba614, #008c00);
 background-image: -ms-linear-gradient(top, #4ba614, #008c00);
 background-image: -o-linear-gradient(top, #4ba614, #008c00);
 background-image: linear-gradient(to bottom, #4ba614, #008c00);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4ba614, endColorstr=#008c00);
}.boton:hover, .botonredondo:hover{ background-color: #36780f; background-image: -webkit-gradient(linear, left top, left bottom, from(#36780f), to(#005900));
 background-image: -webkit-linear-gradient(top, #36780f, #005900);
 background-image: -moz-linear-gradient(top, #36780f, #005900);
 background-image: -ms-linear-gradient(top, #36780f, #005900);
 background-image: -o-linear-gradient(top, #36780f, #005900);
 background-image: linear-gradient(to bottom, #36780f, #005900);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#005900);}

.botonVolver{ width:100%; background:url(../img/btnVolver.png) left no-repeat; margin:20px 0; padding-left:25px;}
.botonVolver:hover{background:url(../img/btnVolver_h.png) left no-repeat;}

.botonredondo{ border-radius:20px;  font-weight:lighter; border:none;}

.positLeft{float:left;}
.positRight{float:right!important}

/* Paginacion */
.paginacioncontainer {background: white; position: fixed; right: 20px; bottom: 70px; width: 100%;}
.paginacion{float:right; background-color:#e1e1e1; border-radius:5px; box-shadow:inset 2px 1px 2px #666666; margin: 10px 0; display: inline-block; overflow: hidden; padding:5px 10px 5px; position:}
.paginacion span, .paginacion button, a.btnNos{ display:inline-block; cursor:pointer; margin:-3px 5px;text-shadow:1px 1px #fff; width:auto; padding: 6px 9px; color:#504f4f}
.paginacion li{display:inline-block;}
.paginacion button{width:42px;}
.paginacion span, a.btnNos{height:18px}
 a.btnNos:hover{background-color:#757575; color:#fff; text-shadow:1px 1px #a3a2a2}
.paginacion button:hover.btnAnterior{ background:url(../img/btnAntPagH.png) center no-repeat #757575; }
.paginacion button:hover.btnPosterior{ background:url(../img/btnSigPagH.png) center no-repeat #757575}
.paginacion button:hover{text-decoration: underline;}
.btnAnterior, .btnPosterior, .btnNos{ background:url(../img/btnAntPag.png) center no-repeat #f6f6f6; box-shadow:-2px 2px 2px #cacaca; border-radius:5px; height:24px;}
.btnUltimo, .btnPrimero{width:auto!important; background:none}
.btnPosterior {    background: url(../img/btnSigPag.png) center no-repeat #f6f6f6;}
.btnNos{background-color:#f6f6f6;   background-image:none;  text-align: center; }
.paginacion span {cursor: default;}

button.pagina{ color:#666; font-size:18px; background:none; text-decoration:underline; line-height:44px; }
button.pagina:hover{color:#a7bc1d;}
button.seleccionado{background-color:#757575; color:#fff; text-shadow:1px 1px #a3a2a2}
.pagina:hover, .pagina{ color:#ff7f00; font-weight:bold;  }
.paginacion span {cursor:default}
li.seleccionado a{background-color:#757575; color:#fff!important; text-shadow:1px 1px #a3a2a2}

 /*****************************************************
*             PIE
******************************************************/
#pie{ height:60px; background-color:#23833f; color:#fff; padding:5px 0; margin-top:20px}
#pie a{color:#fff;}
#pie a:hover{ color:#FFCC00;}
#pie a, #pie p{display: inline-block; width: 31%;}
#pie p{text-align: center}
    #pie a.right, #pie p {font-size:12px;margin-top: 10px;}
    a.enlacesInteres{background:url(../img/enlacesInteres.png) left top no-repeat; display:block;margin: 0;height: 40px;padding: 11px 0 0 36px!important;width: 30%!important; }


/*************** Términos y condiciones ****************/
.contedidoAvisoLegal{width:90%; margin:0 auto; }
.contedidoAvisoLegal p{ text-align:justify; margin:10px 0 15px 3%; font-size:12px;}
.contedidoAvisoLegal span{color:#F00;}

/*************** Enlaces de interes ****************/
.enlacesInteres a{float:left; width:100%; margin-bottom:10px;}



/*****************************************************
*               CABECERA
******************************************************/
#cabecera{ margin:20px 0;}
#cabecera span{display:inline-block; width:49%; }
.nombreUsuario {display:inline-block; width:82%;}
.cerrarSesion {background:url(../img/cerrarSesion.png) right bottom no-repeat; float:right; height:38px;display: inline-block;width: 12%!important;}
 .cabeceraHome span{width:auto!important}

/*****************************************************
*               CUERPO
******************************************************/

/*************** LOGIN - REPETIR CONTRASEÑA ****************/

.contedidoLogin{ 
    display:block;
    overflow:hidden;
    background:url(../img/delegadoLogin.png) no-repeat fixed center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height:720px;
    position:fixed;
    width:100%;
    height:100%;
}
.cajaLogin, .cajaRepContra{
   /*float:right;margin-top:100px;    margin-right:5%!important;  */ 
    width:250px;
    height:350px; 
    background-color:rgba(255,255,255,0.7); 
    padding:0 2%;
    border-radius:20px;
    border:1px solid #fff;
    position:fixed;
    bottom:15%;
    right:10%;
}
    .cajaLogin .boton {
        width:100%;
        margin-top:30px;
    }

.cajaLogin p, .cajaRepContra p{ margin:0; width:70%; float:left; color:#242424; font-size:13px; font-weight:normal;}
.cajaLogin h2, .cajaRepContra h2{ padding-top:20px; margin-bottom:20px; font-size:17px; }
.cajaLogin span, .cajaRepContra span{ display:block; float:right; margin:15px 0px 0 0px; width:48%;}
.cajaLogin input, .cajaRepContra input{width:90%; margin-top:10px;}
.rellene{ width:300px; float:left; margin-top:5px;  }
.cajaLogin .rellene{ display:block; margin:0px; padding:0px; }

.rellene small, .rellene span{ display:block; margin:0px; padding:0px; }
.rellene small{ color:#a00; font-size:.9em; width:300px;}
.cajaLogin a{display:inline; float:left; color:#444; text-decoration:underline; font-size:12px;}
.cajaLogin a:hover, .cajaRepContra a:hover{color:#36780f; text-decoration:none;}
.cajaLogin small{display:block; font-weight:normal;display: inline-block;}
.saludoLogin{color:#fff!important; text-shadow:1px 1px 1px #666666; text-align:center; font-size:1.9em; padding:50px 10% 0 0;}

.cajaRepContra{ background:url(../img/cajaRepContr.png) top right no-repeat; height: 405px; padding-left: 100px;}
.cajaRepContra span{ margin-top:57px;}
.cajaRepContra strong{ padding:77px 0 0 673px;}
.cajaRepContra h2{ padding:90px 0 0 140px; margin-bottom:40px;} 
.nuevaContrasena{ margin-top:40px;}

/*************** HOME ****************/
.contedidoHome, .contedidoHomeBienv{overflow:hidden; width:100%; }
ul.infoPuntos{float:left; width:60%; margin-left:35px; }
ul.infoPuntos li{float:left; width:45%; list-style:url(../img/vineta.png); margin-left:30px;}
ul.infoPuntos li span{color:#005421; font-size:25px; line-height:15px; padding-left:15px;}

.puntosZona {    float: right;    width: 100%;    text-align: left !important;    font-size: 0.8em;    color: #00722d;}
.puntosZona li { float:left; width:50%; font-size:1em; text-align:center;}


ul.menuHome{width:60%; /*margin-left:3%; */margin-top:40px;}
ul.menuHome li{line-height:1em; float:left; font-size: 1.2em; text-align: center; /*padding:0 1%;*/ border-right:1px solid #060; width:17%; height:15px; }
ul.menuHome li:hover{}
ul.menuHome li a{ display:block!important; width:80%!important; height: 40px; color:#060; margin-top: -15px; font-size: .85em; padding:10px 10% 0; }
ul.menuHome li a:hover, .btnActivo{ background:url(../img/indicadorMenu.png) top center no-repeat #23833f; color:#fff!important; text-decoration:none; }


.cabeceraHome{float:right; font-size:16px; color:#666; margin-right:20px;	width:303px;}
.cabeceraHome strong{ padding-right:10px; color:#666;}
.cabeceraHome img{ width:40px; height:40px; display:inline; margin:5px 10px 0 20px;}

.textoBienvenida {    margin-bottom: 20px;}


/*************** Canjeo ****************/
.fondoFolio{float:left; width:1024px; height:628px; background:url(../img/fondoFolio.jpg) center no-repeat; margin:0;}
.contenidoFolio{float:left; width:81.5%; margin: 25px 0px 25px 72px;  padding:0 2%;}

/*************** Invitar Clinica ****************/
.parteIzq, .parteDcha{float:left; width:50%; margin-top: 20px;}
.formInvitarClinica{float:right; width:47%; padding-left:2%}
.formInvitarClinica h2, .verClinica h2{font-size:40px;}
.parteDcha .formInvitarClinica{width:100%; margin-top:30px}
.parteDcha .formInvitarClinica .entrada85{ font-size:18px;}
.parteDcha .formInvitarClinica p{width:100%; }
.invitarClinica .parteIzq img{margin-bottom: 20px; box-shadow:-5px -5px 0 #23833f}
.formInvitarClinica .unirCampos {background-color: #e6ede8;display: block;clear: both; padding: 0 3%!important; width: 55%;}
.formInvitarClinica .datosForm{display: inline-block; width: 48%;}
.bntPeq{text-decoration: underline; float:right; font-size:12px; background:none}
.campo50{display:inline-block; width:49%;}
.campo50 .datosForm{width:100%!important;}
.entradaCompleta, .campo50{position:relative}
.unircampos{float:left; clear: both; padding: 0!important; width: 55%;}

.formInvitarClinica{float:right; width:47%; padding-left:2%}
.formInvitarClinica p{/*overflow: hidden;*/ clear: both; padding: 5px 0; }
.tituloForm, .datosForm{float:left; width:100%;}
.entrada85{width:85%; font-size:12px;}
.formInvitarClinica small, .rellene span, .rellene small{ background-color:#fff;  box-shadow:1px 1px 2px #666666; border-radius:3px; color:#303030; border: 1px solid #9b9b9b; padding: 7px 9px 7px 35px;display: inline-block;position: absolute;
top: 51px; left:20px;z-index: 999;}
.rellene span, .rellene small{top:130px; left:0; width:80%}
.formInvitarClinica small::before, .rellene span:before, .rellene small:before{content:url(../img/iconError.png);  position:absolute; top:-10px;  left:7px; height:50px; }
.formInvitarClinica p img{margin: 0;}
p.entradaCompleta, p.entradaCompleta .datosForm, p.entradaCompleta input, p.entradaCompleta textarea {width:97.5%;}
.pasosNllegaInv p{font-size:18px; margin-top:20px}
.pasosNllegaInv button{ margin-top:30px}
.pasosNllegaInv h3{font-size:22px!important; font-weight:lighter; margin-top:30px}
/*************** Mis Clinicas ****************/
.verClinica{float:left; width:100%;}
.cabVerClinica{width:100%; position:relative}
.cabVerClinica img{margin:20px 40px;}
.filtro, .btnFiltro{position:absolute;right:0; top:0; width:67%; margin-left:0px; border-radius:8px 0 0 8px; padding:10px; box-shadow:-2px 1px 2px #e1e1e1;
                    background: -webkit-linear-gradient(#e6f0e9, #fff, #e6f0e9);
                    background: -moz-linear-gradient(#e6f0e9, #fff, #e6f0e9);
                    background: -o-linear-gradient(#e6f0e9, #fff, #e6f0e9);
                    background: linear-gradient(#e6f0e9, #fff, #e6f0e9); }
.btnFiltro{width:70px; height:20px; float:right; text-align:right;}
.filtro a img{margin:0; }
.filtro p a.limpiar{font-size:10px; float:left;  }
.btnFiltro img, .ocultarFiltro img{margin:0 0 -4px 0!important}
.ocultarFiltro{width: 60px;height: 20px;display: inline-block;overflow: hidden;font-size: 13px;}
.textoMostrarFiltro{font-size: 12px;display: block;margin-top: -10px;text-align: right;margin-bottom: 15px;}
.cabVerClinica a.lupa{float: right; margin-top: 17px; display:inline-block;  width:8%; height:38px; background:url(../img/lupaBuscar.png) center right no-repeat;}
.histPuntos .cabVerClinica p{margin:5px;}
.histPuntos .cabVerClinica span, .histPuntos .cabVerClinica a.lupa{margin:0; float:initial}
.verClinica .campo50, .histPuntos .campo50{width:28%;}
.histPuntos .entrada85{display:inline-block;}

.listadoClinicas li ul{color:#4d4e4d;  border-bottom:1px solid #005900; padding:3px 0 3px 2%; clear:both; overflow:hidden; }
.listadoClinicas li ul a{ display:block }
.listadoClinicas li ul.titulo{font-size:17px; }
ul.cablistado{display:block; overflow: hidden; width:98%;}
 a ul.cablistado{}
a:hover ul.cablistado {background-color:#ccdcd1;}
ul.cablistado li{display:inline-block;overflow:hidden;  }
.estadoDenegado, .estadoActivo, .estadoPendiente{display: inline-block; width:15px!important; height:15px; border-radius:9px; background: radial-gradient(#fff, #d30505, #d30505); border:2px solid #b1b4ac; margin:0 auto }
.estadoActivo{ background: radial-gradient(#fff, #3c9b0d, #3c9b0d);}
.estadoPendiente{ background: radial-gradient(#fff, #e1bf00, #e1bf00);}
.leyenda span strong{margin-right:5px;width:10px!important; height:10px}
.leyenda span {font-size:12px}
.leyenda {text-align: right; margin-top: 10px;}
.verMas{width:2%!important; float:right; margin-right:6px; background:url(../img/indicadorVerMas.png) right center no-repeat;}

a.descargarXLS{display:block; background-color:#f0f0f0; text-align:center; overflow: hidden; width: 100%;} 


ul.listaPuntos{float:left; width:100%;}
ul.listaPuntos li ul{float:left; width:98%; text-align:center; border-bottom:1px solid #999; color:#008232; padding:5px;}
ul.listaPuntos li ul li{float:left; overflow: hidden; min-height: 20px; padding: 0 5px;}


/*************** Historico Puntos ****************/
.detalleClinica{border:1px solid #23833f; display:block;overflow: hidden;}
 .detalleClinica .listadoClinicas li ul{padding-left:0!important;display: block;overflow: hidden;}
 .detalleClinica .listadoClinicas li ul.titulo{border:none;width: 100%; background-color:#eff6f1}
 .detalleClinica .listadoClinicas li ul li{  font-size:11px; color:#9f9e9e;text-align: center; padding:5px; display:inline; overflow:hidden;}
 .detalleClinica .listadoClinicas li ul li span{display:block; font-size:13px; width:100%; padding:0; overflow:hidden; color:#21823d}
 .detalleClinica .listadoClinicas li ul li span.estadoActivo{width: 15px; height:15px; margin-left:30%;}
 
 .cablistDetalleDatos li{float: left; text-align: center; font-weight:bold;margin:5px 0; font-size: 16px; }
 .detalleDatos{display:block; max-height:300px;clear: both;}
 .cablistDetalleDatos, .detalleDatos ul{width: 90%;margin: 0 auto;}
.detalleDatos ul li {text-align: center; padding:5px 0; margin-bottom:5px; border-bottom:1px solid #B7B8B8}
.detalleDatos ul li.ancho50, .cablistDetalleDatos li.ancho50 {width:48%}
/*************** Historico Puntos ****************/
.histPuntos img{ margin:30px 0 0 50px;}
.histPuntos .listaPuntos{ width:100%; margin:50px 0 46px 0%;}
.histPuntos span{float:right; margin:12px 119px 0 0;}
.histPuntos .paginacion span{float:initial; margin:0; }
ul.listaPuntos li ul.totalPtos { border-top:1px solid #FFF; border-bottom:none;}
ul.listaPuntos li ul.totalPtos li{float:right; color:#666;}
/*************** Mi Perfil ****************/
.miPerfil .parteDcha{ margin:50px 0 0 2%; width:48%}
.parteDcha .formInvitarClinica{float:right; margin-top:50px; width:95%}
.parteDcha .formInvitarClinica p{width:100%;}

.left {text-align: left; }
.titulo { float: left;width: 98%;padding: 0 1%; cursor: default;}
.titulo li {float: left;}

.miPerfil .parteIzq img{margin-bottom: 20px; box-shadow:-5px -5px 0 #23833f}
.imgMovil{display:none}


#mobile-nav-holder{
    z-index: 1000;
    background: #191a1a;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    position: fixed;
    left: 0;
    right: 0;
}

#mobile-nav{
	display: none;
    padding-top: 20px;
/*    padding-bottom: 30px;
*/}

#mobile-nav-holder a{
	display: block;
	padding: 7px 14px;
	text-decoration: none;
	color: #f5f5f5;
	font-size: 13px;
	font-weight: lighter;
	
	-webkit-transition: all  0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#mobile-nav-holder li a{
	border-bottom: 1px solid #222;
}

#mobile-nav-holder li:last-child a,
#mobile-nav-holder li > ul a{
	border: none;
}

#mobile-nav-holder li > ul a{
	color: #888888;
	margin-left: 30px;
}

#mobile-nav-holder #nav-open{
    display:none;
	background:url(../img/menuMovil.png) right top no-repeat; 
	position: fixed;
	right: 0px;
	top:0;
	z-index: 2000;
    height:38px;
    width:50px;
}

#mobile-nav-holder #nav-open a{
	display: block;
	padding: 7px 14px;
}

#mobile-nav > .current-menu-item > a,
#mobile-nav > .current_page_item > a{
	color: #2cc158;	
}
