/*
	TOC:
		- Estils bàsics
		- Layout principal
		- Columna explicació
		- Columna contingut
			- Formulari
			- Llistat
*/

/* Estils bàsics
----------------------*/
body {
	margin: 1em 0 0 0;
	font-family: verdana, arial, serif;
	font-size: 62.5%;
	background-color: #c0bca9;
}
h1, h2, h3, h4 {
	margin: 0;
}

a img {
	border: none;
}

p {
	margin: 0;
}
input, textarea {
	font-size: 1em;
	border: 1px solid #666666;
}

/* Layout principal
----------------------*/
#pagina{
	margin: 0 auto;
	width: 94em;
	background-color: #fff;
	padding: .8em;
}

#pagina h1 {
	font-size: 1em;
}

#pagina h1 img {
	width: 94em;
}

#columna-explicacio {
	width: 26.8em;
	float: left;
	padding: 0 0 18.5em 9.5em;
}

#malva-rosa #columna-explicacio {
	background: #0059B1 url(../img/fons-malva.png) left top repeat-x;
}

#flama-canigo #columna-explicacio {
	background: #FF3D13 url(../img/fons-flama.png) left top repeat-x;
}

#malva-rosa #contingut {
	background: url(../img/fons-contingut-malva.png) left top repeat-y;
}

#flama-canigo #contingut {
	background: url(../img/fons-contingut-flama.png) left top repeat-y;
}

#contingut:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Columna explicació
-----------------------*/
#columna-explicacio h2 {
	color: #59514f;
	font-size: 1.7em;
	font-family: sans-serif;
	letter-spacing: 0;
	padding-top: 0;
}

#columna-explicacio h3 {
	color: #0066cc;
	font-style: italic;
	font-size: 1.8em;
	font-weight: normal;
	margin-bottom: 2.5em;
}

#columna-explicacio p, #columna-explicacio p.omnium {
	color: #fff;
	font-size: 1.3em;
	font-family: sans-serif;
	line-height: 1.5em;
	padding-right: 1em;
	font-weight: bold;
}

#columna-explicacio p.omnium {
	margin-top: 70px;
	font-weight: normal;
	font-size: 1.2em;
}

#columna-explicacio p img {
	padding-top: 4em;
	margin-left: -1em;
}

#columna-explicacio p img.omnium {
	padding-top: 0;
	margin-left: 0;
}
/* Columna formulari
------------------------*/
/* Formulari */
#columna-contingut {
	width: 55em;
	float: right;
	margin: 2em 0;
}

#columna-contingut fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#flama-canigo fieldset legend {
	color: #ff3700;
}

#malva-rosa fieldset legend {
	color: #0066cc;
}

#columna-contingut fieldset legend {
	padding: 0 0 1.5em 3.5em;
	font-size: 1.7em;
	font-family: sans-serif;
}

#columna-contingut form label {
	margin-top: .5em;
	display: block;
	color: #333;
	font-size: 1.2em;
}

#formulari-origen {
	width: 18em;
	float: left;
	margin-left: 6em;
}

#formulari-desti {
	width: 17em;
	float: left;
}

#formulari-desig {
	clear: both;
	margin-top: 2em;
	border: 1px solid #fff;
	margin-left: 6em;
}

#formulari-desig textarea.missatge {
	width: 28em;
	font-size: 1.5em;
}

#formulari-origen .camp input, #formulari-desti .camp input {
	width: 12em;
	margin-bottom: 1em;
}

#formulari-desig input.boto {
	margin: 1em 0;
}

/* Llistat */
.llistat h2 {
	font-family: sans-serif;
	font-weight: normal;
	font-size: 1.7em;
	margin-bottom: 2.5em;
}

#flama-canigo .llistat h2 {
	color: #ff3d13;
}

#malva-rosa .llistat h2 {
	color: #0066cc;
}

.llistat h3 {
	color: #666;
	border-bottom: 1px solid #999;
	margin: 1em 0;
}

.llistat h3 .mes {
	font-weight: normal;
	border-left: 1px solid #999;
	color: #999;
	padding-left: .5em;
}

#flama-canigo .llistat p {
	font-size: 1.1em;
	color: #666;
}

#flama-canigo .llistat .hora {
	font-weight: bold;
}

#flama-canigo .llistat .nom-llistat {
	color:#FF3D13;
	font-weight: bold;
}

.llistat ul {
	list-style: none;
	padding: 0;
	margin; 0;
}

.llistat ul li {
	color: #0066cc;
	font-weight: bold;
	font-size: 1.1em;
	margin-bottom: .5em;
	background: url(../img/bullet-llistat.png) left .6em no-repeat;
	padding-left: .7em;
}

.llistat ul li .autor {
	color: #666;
	font-weight: normal;
	border-left: 1px solid #999;
	padding-left: .5em;
	margin-left: .5em;
}