/* CSS Document */

body {
	background-color:#d6d8d8;
	border-style: solid;
	margin: 0 0 0 0;
	padding: 0;
	border-width: 0;
}
/* Aquí van les definicions de tots els divs quan ja has entrat en una de les opcions. Són bàsicament
  iguals però amb una alçada 100px superiors, tal i com és a la web antiga. Quant treballes en pàgines que no siguin
  la principal usa sempre aquests 
  
  Per a cada pàgina has de declarar els div general- A dins, declares el div superior$ (on $ significa el nom de la secció a la qual correspon la pàgina). 
A dins, declares el div botons$-p (on $ segueix sent el mateix d'abans) i el div botons$ (ídem per a $).
  
Els botons-p corresponen als botons de l'esquerra i a dins hi has de declarar tots els botons que van a l'esquerra de la secció on
estàs ordenats d'esquerra a dreta. Els has de declarar dins del codi de l'enllaç corresponen, perquè el div sencer sigui l'enllaç. 
A botons (sense la p) has de declarar la resta de botons de la mateixa manera però ordenats de dreta a esquerra).  
  */
  

	#generalgran {
		background-color:#d6d8d8;
		height: 530px;
		width: 890px;
		margin: 10px auto 0 auto;
	}
	
	#superiornuestraclinica {
		overflow:hidden;
		background-color:#e98e31;
		height: 500px;
		width: 890px;
	}
	
	#superiorsomos {
		overflow:hidden;
		background-color:#f3b128;
		height: 500px;
		width: 890px;
	}
	
	#superiorservicios {
		overflow:hidden;
		background-color:#c4cf36;
		height: 500px;
		width: 890px;
	}
	
	#superiordonde {
		overflow:hidden;
		background-color:#cab316;
		height: 500px;
		width: 890px;
	}
	
	#botonsnuestraclinica-p {
		float:left;
		background-color:#e98e31;
		margin: 0 auto 0 0;
		height: 500px;
		width: 41px;
	}
	
	#botonssomos-p {
		float:left;
		background-color:#f3b128;
		margin: 0 auto 0 0;
		height: 500px;
		width: 82px;
	}
	
	#botonsservicios-p {
		float:left;
		background-color:#c4cf36;
		margin: 0 auto 0 0;
		height: 500px;
		width: 123px;
	}
	
	#botonsdonde-p {
		float:left;
		background-color:#cab316;
		margin: 0 auto 0 0;
		height: 500px;
		width: 164px;
	}
	
	#casosreferencia {
		float:left;
		background-color:#e98e31;
		height: 500px;
		width: 212px;
	}
	
	#botonsnuestraclinica {
		float:left;
		background-color:#e98e31;
		height: 500px;
		width: 171px;
	}
	
	#botonssomos {
		float:left;
		margin: 0 0 0 auto;
		background-color:#f3b128;
		height: 500px;
		width: 130px;
	}
	
	#botonsservicios {
		float:left;
		background-color:#c4cf36;
		height: 500px;
		width: 89px;
	}
	
	#botonsdonde {
		float:left;
		background-color:#cab316;
		height: 500px;
		width: 48px;
	}
	
	#nuestraclinicagran {
		background-color:#e98e31;
		float: right;
		border-color:#FFFFFF;
		border-width: 0 0 0 0;
		height: 500px;
		width: 41px;
		background-position:bottom;
  		background-repeat:no-repeat;
		background-image: url(disseny/nuestraclinica-a.gif);
	}
	
	#nuestraclinicagran:hover { 
		background-position: 0 +193px
	}
	
	#somosgran {
		background-color:#f3b128;
		border-style:solid;
		border-color:#FFFFFF;
		border-width: 0 0 0 thin;
		float:right;
		height: 500px;
		width: 40px;
		background-position:bottom;
  		background-repeat:no-repeat;
		background-image: url(disseny/somos-a.gif);
	}
	
	#somosgran:hover { 
		background-position: 0 +193px
	}
	
	#serviciosgran {
		background-color:#c4cf36;
		float:right;
		border-style:solid;
		border-color:#FFFFFF;
		border-width: 0 0 0 thin;
		height: 500px;
		width: 41px;
		background-position:bottom;
  		background-repeat:no-repeat;
		background-image: url(disseny/servicios-a.gif);
	}
	
	#serviciosgran:hover { 
		background-position: 0 +193px
	}
	
	#dondegran {
		background-color:#cab316;
		float:right;
		border-style:solid;
		border-color:#FFFFFF;
		border-width: 0 0 0 thin;
		height: 500px;
		width: 41px;
		background-position:bottom;
  		background-repeat:no-repeat;
		background-image: url(disseny/donde-a.gif);
	}
	
	#dondegran:hover { 
		background-position: 0 +193px
	}
	
	#bloggran {
		background-color:#a79412;
		float:right;
		border-style:solid;
		border-color:#FFFFFF;
		border-width: 0 0 0 thin;
		height: 500px;
		width: 41px;
		background-position:bottom;
  		background-repeat:no-repeat;
		background-image: url(disseny/blog-a.gif);
	}
	
	#bloggran:hover { 
		background-position: 0 +193px
	}

	#nuestraclinica-p {
		background-color:#e98e31;
		float: left;
		border:#FFFFFF;
		border: 0 1px 0 0;
		height: 500px;
		width: 41px;
		background-position:bottom;
  		background-repeat:no-repeat;
		background-image: url(disseny/nuestraclinica-a.gif);
	}
	
	#nuestraclinica-p:hover { 
		background-position: 0 +193px
	}
	
	#somos-p {
		background-color:#f3b128;
		border:#FFFFFF;
		border: 0 1px 0 0;
		float:left;
		height: 500px;
		width: 41px;
		background-position:bottom;
  		background-repeat:no-repeat;
		background-image: url(disseny/somos-a.gif);
	}
	
	#somos-p:hover { 
		background-position: 0 +193px
	}
	
	#servicios-p {
		background-color:#c4cf36;
		float:left;
		border:#FFFFFF;
		border: 0 1px 0 0;
		height: 500px;
		width: 41px;
		background-position:bottom;
  		background-repeat:no-repeat;
		background-image: url(disseny/servicios-a.gif);
	}
	
	#servicios-p:hover { 
		background-position: 0 +193px
	}
	
	#donde-p {
		background-color:#cab316;
		float:left;
		border:#FFFFFF;
		border: 0 1px 0 0;
		height: 500px;
		width: 41px;
		background-position:bottom;
  		background-repeat:no-repeat;
		background-image: url(disseny/donde-a.gif);
	}
	
	#donde-p:hover { 
		background-position: 0 +193px
	}
	
	#blog-p {
		background-color:#a79412;
		float:left;
		border:#FFFFFF;
		border: 0 0 0 0;
		height: 500px;
		width: 41px;
		background-position:bottom;
  		background-repeat:no-repeat;
	}
	
/* Aquí van les definicions de tots els divs de la home. Són bàsicament
  iguals però amb una alçada 100px inferiors, tal i com és a la web antiga. Quant treballis amb la pàgina d'inici, 
  fes servir aquests */

	#general {
		background-color:#d6d8d8;
		height: 330px;
		width: 895px;
		margin: 10px auto 0 auto;
	}
	
	#superior {
		overflow:hidden;
		background-color:#FFFFFF;
		height: 300px;
		width: 895px;
		background-image: url(disseny/fonsprincipal.gif);
	}
	
	#botons {
		float:right;
		background-color:#FFF;
		margin: 0 0 0 681px;
		height: 300px;
		width: 215px;
	}
	
	#nuestraclinica {
		background-color:#e98e31;
		float: right;
		border-style:solid;
		border-color:#FFFFFF;
		border-width: 0 0 0 thin;
		height: 300px;
		width: 41px;
		background-position:bottom;
		background-repeat:no-repeat;
		background-image: url(disseny/nuestraclinica-a.gif);		
	}
	
	#nuestraclinica:hover { 
		background-position: 0 -7px
	}
	
	#somos {
		background-color:#f3b128;
		border-style:solid;
		border-color:#FFFFFF;
		border-width: 0 0 0 thin;
		float:right;
		height: 300px;
		width: 41px;
		background-position:bottom;
  		background-repeat:no-repeat;
		background-image: url(disseny/somos-a.gif);
	}
	
	#somos:hover { 
		background-position: 0 -7px
	}
	
	#servicios {
		background-color:#c4cf36;
		float:right;
		border-style:solid;
		border-color:#FFFFFF;
		border-width: 0 0 0 thin;
		height: 300px;
		width: 41px;
		background-position:bottom;
  		background-repeat:no-repeat;
		background-image: url(disseny/servicios-a.gif);
	}
	
	#servicios:hover { 
		background-position: 0 -7px
	}
	
	#donde {
		background-color:#cab316;
		float:right;
		border-style:solid;
		border-color:#FFFFFF;
		border-width: 0 0 0 thin;
		height: 300px;
		width: 41px;
		background-position:bottom;
  		background-repeat:no-repeat;
		background-image: url(disseny/donde-a.gif);
	}
	
	#donde:hover { 
		background-position: 0 -7px
	}
	
	#blog {
		background-color:#a79412;
		float:right;
		border-style:solid;
		border-color:#FFFFFF;
		border-width: 0 0 0 thin;
		height: 300px;
		width: 41px;
		background-position:bottom;
  		background-repeat:no-repeat;
		background-image: url(disseny/blog-a.gif);
	}
	
	#blog:hover { 
		background-position: 0 -7px
	}
	
	
/* Espais. Aquí dins t'hi deixo tots els div necessaries per a posar el contingut. Cadascun s'anomena espai$ on $ significa el nom de la secció actual. Dins de cadascun hi ha els divs necessaris per a la secció que ja et comento aquí. Els has de declarar dins del seu div superior$ ($és el nom de la secció) corresponent, després i fora de botons$-p i abans i fora de botons$ */

	/*A somos has de crear tants div fotossomos com gent hi hagi i a dins posari la fotocorresponen i un div cartelletsomos amb el 		    nom. Fixa't que aquests no són id sino class, perquè n'hi haurà més d'un*/
	#espaisomos {
		margin: 0 0 0 20px;
		float:left;
		height:500px;
		width: 658px;
	}
	
	#espaicasos {
		margin: 0 0 0 0;
		float:left;
		height:500px;
		width: 678px;
	}
	
	.fotossomos {
		float:left;
		width: 125px;
		height: 150px;
		margin: 70px 11px 11px 11px;
	}
	
	.cartelletsomos {
		height: 15px;
		margin-top:10px;
		width:125px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:small;
		font-weight:bold;
		text-align:center;
	}
 
	#espaidonde {
		margin: 0 0 0 20px;
		float:left;
		height:500px;
		width: 658px;
	}
	
	.espaipredeterminat {
		margin: 0 20px 0 0;
		float:left;
		height:500px;
		width: 658px;
	}
	
	/* Estableix una foto centrada de tamany 250*250 */
	
	.fotocentrada {
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	height: 300px;
	width: 425px;
	margin: 75px 96px 45px 96px;
	font-size: small;
	vertical-align: middle;
	}
	
	a:link {
		font-family:Arial, Helvetica, sans-serif;
		color:#FFFFFF;
		font-size: small;
		text-decoration: underline;
		font-weight: bold;
	}
	
	a:visited {
		font-family:Arial, Helvetica, sans-serif;
		color:#FFFFFF;
		font-size: small;
		text-decoration: underline;
		font-weight: bold;
	}
	a:hover {
		font-family:Arial, Helvetica, sans-serif;
		color:#FFFFFF;
		font-size: small;
		text-decoration: underline;
		font-weight: bold;
	}
	
	
	
	#informaciomapa {
		height:350px;
		width: 300px;
		font-family:"Courier New", Courier, monospace;
		color:#FFFFFF;
		text-align:right;
		margin: 75px 50px 75px 268px;
	}
	

/*Aquí va tot lu de sota. Es declara dins del Div general. Direccio i casos de referencia van dins d'inferior*/

#inferior {
	width: 890px;
	height: 25px;
}

#inferior a:link {
		font-family:Arial, Helvetica, sans-serif;
		color:#000;
		font-size: 11px;
		text-decoration: underline;
		font-weight: bold;
	}
	
#inferior a:visited {
		font-family:Arial, Helvetica, sans-serif;
		color:#000;
		font-size: 11px;
		text-decoration: underline;
		font-weight: bold;
	}
#inferior a:hover {
		font-family:Arial, Helvetica, sans-serif;
		color:#000;
		font-size: 11px;
		text-decoration: underline;
		font-weight: bold;
	}

#direccio {
	margin: 4px 0 0 0;
	float:left;
	width: 680px;
	height: 20px;
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	vertical-align:middle;
}

#veterinaris {
	float:left;
	padding: 0;
	width: 210px;
	height: 25px;
	background-image:url(disseny/casosreferenciapetit.gif);

}
#wrapper
{
	height: 650px;
	width: 950px;
	position: absolute;
	top: 50%;
	left: 50%;
    margin-top: -325px;
    margin-left: -475px;
	overflow: visible; 
    float:left;

}

#loader
{
	width: 126px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -63px;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	color: #fff;
	font- ght: bold;
}

 #wrapper
{
	height: 650px;
	width: 950px;
	position: absolute;
	top: 50%;
	left: 50%;
    margin-top: -325px;
    margin-left: -475px;
	overflow: visible; 
    float:left;

}

#loader
{
	width: 126px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -63px;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	color: #fff;
	font-weight: bold;
}

input {
	border-style:solid;
	border-color:#FFFFFF;
	border-width: 1px 1px 1px 1px;
	background-color:#c4cf36;
}
textarea {
	border-style:solid;
	border-color:#FFFFFF;
	border-width: 1px 1px 1px 1px;
	background-color:#c4cf36;
}