@charset "utf-8";
@import "tablesorter.css";

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	//background: #FFF;
	margin: 0; /* es recomendable ajustar a cero el margen y el relleno del elemento body para lograr la compatibilidad con la configuración predeterminada de los diversos navegadores */
	padding: 0;
	text-align: center; /* esto centra el contenedor en los navegadores IE 5*. El texto se ajusta posteriormente con el valor predeterminado de alineación a la izquierda en el selector #container */
	color: #000000;
}
#container {
	width: 980px;
	margin: 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
	border: 1px solid #b49e65;
	border-top: none;
	border-bottom: none;
	text-align: left; /* esto anula text-align: center en el elemento body. */
	background-image: url(../img/ds/fons.jpg);
	background-repeat: no-repeat;
	background-position:center;
	font-size:14px;
}
#header {
	background: #DDDDDD; 
	  /* este relleno coincide con la alineación izquierda de los elementos de los divs que aparecen bajo él. Si se utiliza una imagen en el #header en lugar de texto, es posible que le interese quitar el relleno. */
}
#header h1 {
	margin: 0; /* el ajuste en cero del margen del último elemento del div de #header evita la contracción del margen (un espacio inexplicable entre divs). Si el div tiene un borde alrededor, esto no es necesario, ya que también evita la contracción del margen */
	padding: 10px 0; /* el uso de relleno en lugar de margen le permitirá mantener el elemento alejado de los bordes del div */
}

.marieta{
	width: 70px;
	height: 50px;
	float: right;
	display:inline;
	background-image:url(../img/ds/marieta.png);
	background-repeat:no-repeat;
	background-position:center;
	margin-top:10px;
	margin-right:20px;
}

#menu {width:745px; height:60px; position:relative; margin: 0 auto; padding-top:10px;}

#nav, #nav ul {padding:0; margin:0; list-style:none; width:745px;}

#nav li {float:left;}
#nav li a {float:left; text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:16px; color:#000;}
#nav li a b {display:block; float:left; height:30px; line-height:28px; padding:0 10px 0 10px; font-weight:normal; cursor:pointer;}
#nav li.sub a b {background:url(down.gif) no-repeat right 6px;}

#nav b.hover {
	/*color:#c22a12;
	border-bottom:3px solid black;*/
	font-weight: bold;
}
#nav i.hover {color:#b49e65; font-weight:bold;}
#nav em.hover {color:#080;}
#nav ul ul ul a:hover {color:#080;}

#nav ul {display:none;}
#nav ul {position:absolute; left:0; top:40px; background:#f0eae0; height:15px;}
#nav ul li {float:left; position:relative;}
#nav ul li a {display:block; padding:0 20px 0 10px; font-size:12px; line-height:15px; cursor:pointer;}
#nav ul li a i {display:block; font-style:normal; cursor:pointer;}
#nav ul li a.sub {background:url(down.gif) no-repeat right 3px;}

#nav ul ul {width:130px; left:-1px; top:30px;}
#nav ul ul li a {display:block; line-height:20px; padding:0 0 0 10px; width:120px;}
#nav ul ul li a.fly {background:url(right.gif) no-repeat right center;}
#nav ul ul li a em {font-style:normal; display:block; width:120px; cursor:pointer;}

#nav ul ul ul {left:135px; top:0;}

#mainContent {
	padding: 0 20px;
	float: right;
	width: 500px;
	height: 520px;
}

#anunciIndex{
	font-size: 11px;
	margin: 75px auto 0;
	margin-top:110px;
	width: 500px;
}

/*
Seccions
*/

#seccio	{
	min-height: 500px;
	float:left;
}

#seccio	p{
	margin-left:15px;
	margin-right:15px;
	text-indent:20px;
}

#seccio.w30{width: 30%;}
#seccio.w30 img{
	margin:5px;	
}
#seccio.w40{width: 40%;}
#seccio.w40 img{
	margin: 2px;
}
#seccio.w50{width: 50%;}
#seccio.w60{width: 60%;}
#seccio.w70{width: 70%;}
#seccio.w80{width: 80%;}
#seccio.w90{width: 90%;}
#seccio.w100{width: 100%;}

#seccio.w60c{width: 80%; margin:auto; float:none; min-height:0px;}

#seccio li {margin-left:40px}

#seccioContent {
	padding: 0 20px;
	float: right;
	width: 500px;
	min-height:500px;
}

#seccioLeft{
	float: left;
	width:520px;
	padding-left:15px;
	padding-right:15px;
}

#seccioRight{
	float: left;
	width: 400px;
	padding-left: 15px;
	padding-right: 15px;
}

#seccioMedalsimg{
	width:300px;
	float:left;
	padding-left:15px;
	padding-right:15px;
}
#seccioMedals{
	float: left;
	width:600px;
	padding-left:15px;
	padding-right:15px;
	font-size:12px;
	padding-top:35px;
}

#archive h2{
	padding:25px;
}

#wInfo{
	width: 545px;
	margin: 0px;
	padding: 0px;
	float: left;
	font-size:10px;
}

#wInfo #info, #descr, #awards{ float:left; text-align:center; height: 430px;}
#wInfo #info{
	width: 130px;
	border-right: 1px solid #b49e6b;
}

#wInfo #descr{
	width: 273px;
	text-align:justify;
	padding-left:5px;
	padding-right: 5px;
}

#wInfo #descr2{
	float:left;
	padding-left:20px;
	padding-right:20px;
	text-align:justify;
	width:374px;
}

#wInfo #awards{
	width: 130px;
	border-left: 1px solid #b49e6b;
}

#bottles{
	width: 435px;
	height: 500px;
	padding: 0;
	margin: 0px;
	position: relative;
	float: left;
	clear:both;
	overflow:hidden;
}

#v_menu{
	width: 68px;
	height:500px;
	float:left;
	margin-left:-43px;
	z-index:inherit;
}

#swf_menu{
	width: 422px;
	height:500px;
	float: left;
	padding: 0;
	position:relative;
	left:10px;
	clear:both;
}

#footer {
	clear:both;
	heigth: 50px;
	padding: 0 0px;
}
#footer p {
	margin: 0; /* el ajuste en cero de los márgenes del primer elemento del pie evitará que puedan contraerse los márgenes (un espacio entre divs) */
	padding: 10px 5px; /* el relleno de este elemento creará espacio, de la misma forma que lo haría el margen, sin el problema de la contracción de márgenes */
	font-size: 11px;
	text-align: right;
	background-image: url(../img/ds/lineabot.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
}

        
.slogan{
	color: #ddd2bb;
	text-align: right;
	font-size:26px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-style:italic;
	font-stretch:expanded;
	margin-right:20px;
	line-height: 110%;
}

.logoartiga{
	top:60px;
	margin:0 auto;
	display:block;
	position:relative;
}



img{
	border-style: none;
}

.pdflink{
	background: url(../img/ds/pdfico.gif) no-repeat 0% 50%;
	padding: 4px 4px 0 20px;
	font-size:12px;
	text-align:center;
	//display:block;
}

.centered{
	margin: 0 auto;
	text-align:center;
}

#centered_v{
	//margin: 0 auto;
	height:410px;
	margin:20px auto 0 70px;
	position:relative;
	text-align:center;
	top:0px;
	width:345px;
}

#centered_bot{
	text-align: center;
}

.medal{
	margin: 5px auto;
}

.label{
	margin: 10px auto;
	text-align:center;
	float:left;
}

.label:hover{
	background-color:#0FC;
}

#content{
	float:left;
	height:500px;
	margin-left:15px;
	width:680px;
}

#content .bot{
	float: left;
	font-size:12px;
	text-align:center;
	margin-top:5px;
	padding-left:10px;
	padding-right: 10px;
}

#llista_v{
	border-right:1px solid #B49E6B;
	float:left;
	margin-left:20px;
	margin-top:10px;
	min-height:490px;
	width:245px;
	font-size:16px;
}

#llista_v li{
	list-style:none;
}

#llista_v p{
	line-height:0;
	margin-bottom:0;
	margin-left:40px;
}

#load {
	display: none;
	position: absolute;
	right: 10px;
	top: 10px;
	background: url(images/ajax-loader.gif);
	width: 43px;
	height: 11px;
	text-indent: -9999em;
}


#slider-wrapper { background: #EEE; border: 1px solid #DDD; margin-bottom: 5px; }
#slider { width: 300px; }
#slider div { padding: 20px 0;}
#slider img{
	padding:0px;
	padding-left:10px;
	padding-right:10px;
}

/////  http://toolmakersteve.com/Expression-Web/Samples/tidbits/horiz-center-floated-lisC.htm
.shrinkwrap {
	padding: 4px 2px 2px 2px;
}
.shrinkwrap ul { list-style: none;  margin: 0;  padding: 0; }
.shrinkwrap ul li {
	display: block;
	float: left;
	margin: 0 1px 0 1px; /* tab separation is margin L + R. */
	list-style-type: none; 
	text-indent: 0;
	font-size:12px;
	text-align:center;
	margin-top:10px;
	padding-left:10px;
	padding-right: 10px;
	border-style: none;
}

.bib{
	padding-top: 70px;
}

.bib_geni{
	padding-top: 0px;
}

.clearfloats { clear: both;
  line-height: 1px;  font-size: 1px;
  margin: 0;  margin-bottom: -1px;  padding: 0;
}

.trans{
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

/*
Posicionament d'objectes a la web
*/

/* For conforming user agents. */
.center[class] {
  display: table;
  margin: 0 auto;
}

.floatLeft{ float:left; margin-right: 10px;}
.floatRight{float:right; margin-left:10px;}
.center{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.vcenter {
  min-height: 12em;
  display: table-cell;
  vertical-align: middle;
}

.trelemcenter{
	float:left;
	width:33%;
	display:block;
	margin: 0 auto;
	text-align:center;
	padding-top:5px;
}

.quaelemcenter{
	float:left;
	width:25%;
	display:block;
	margin: 0 auto;
	text-align:center;
	padding-top:5px;
}

#seccio .quaelemcenter p{
	text-indent:0;
	margin-left:0px;
	margin-right:0px;
}


/*
Títols
*/

h1{
	background-image:url(../img/ds/h1_bg.png);
	background-position:center center;
	background-repeat:no-repeat;
	color:#FFFFFF;
	font-size:24px;
	font-weight:normal;
	height:50px;
	line-height:45px;
	margin: auto;
	text-align:center;
	width:65%;
}
h2{
	font-size:16px;
	font-weight:bold;
	margin-top:12px;
	text-align:center;
	margin:auto;
	color:#b49e65;
}

h3{
	font-weight:bold;
	text-align:center;
	font-size:14px;
}

/*
Links
*/

a{
	text-decoration:none;
	color:brown;
	font-weight:500;
}

a:hover{color:#b49e65;}

a:link{
	text-decoration:none;
	border:none;
	border-style: none;
}

#grafica{
	float:right;
	width:500px;
	height:300px;
	display:block;
	margin-top:40px;
	margin-bottom:40px;
}

/*Formulari*/

#contact-wrapper {
	border:2px solid #F0EAE0;
	margin:0 auto;
	padding:20px;
	width:430px;
}
#contact-wrapper div {
	/*clear:both;
	margin:1em 0;*/
}
#contact-wrapper label {
	display:block;
	float:left;
	font-size:16px;
	width:auto;
}
form#contactform input {
	border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
	border-style:solid;
	border-width:1px;
	color:#333333;
	font-size:16px;
	width:425px;
}
form#contactform textarea {
	font-family:Arial, Tahoma, Helvetica, sans-serif;
	font-size:100%;
	border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
	border-style:solid;
	border-width:1px;
	padding:0.6em 0.5em 0.7em;
	width:410px;
}

form#contactform input.btn {
	background-color:#B49E65;
	color:white;
	font-weight:bold;
	height:30px;
	width:425px;
}