/*	Index of styles for idea Diagonal by Marciobarrios ~ marciobarrios.com
--------------------------------------------------------------------------
	- Reset styles
	- General (titles, generic links, preformatting, some classes)
	- Layout (general layout)
	- Header (logo, menu)
	- Content (all styles concerning the content modules)
	- Footer (legal text, copyright)
	- Forms (all styles concerning forms)
*/

/*--------------------------------------------------------------------------
 *	Reset
 *--------------------------------------------------------------------------*/
:link,:visited{text-decoration:none}
ul,ol{list-style:none}
table {border-collapse:collapse}
h1,h2,h3,h4,h5,h6,pre,code,input,select,textarea{font-size:1em}
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset{margin:0;padding:0}
fieldset,a img,:link img,:visited img{border:0}


/*--------------------------------------------------------------------------
 *	General
 *--------------------------------------------------------------------------*/
html,body {
	height: 100%;
}

body {
	font: 62.5%/1.5em helvetica, arial, sans-serif;
	color: #666;
	padding: 0 20px;
	text-align: center;
	background: #fff url(../img/bg.png) repeat-x bottom;
}

a {
	outline: none;
}

a:link,
a:visited {
	color: #0098D0;
	text-decoration: none;
}

a:hover,
a:active {
	color: #0098D0;
	text-decoration: underline;
}

h3 {
	color: #999;
	font-size: 1em;
	text-transform: uppercase;
	font-weight: bold;
}

p {
	margin-bottom: 1em;
	font-size: 1.2em;
}

li {
	font-size: 1.2em;
}

li li,
li p {
	font-size: 1em;
}

.hidden,
hr {
	display: none !important;
}

.clear {
	clear: both;
}

.separate-top {
	padding-top: 20px;	
	background: url(../img/separator.png) no-repeat center top;
}

.more-link {
	clear: both;
	text-align: right;
}

.more-link a {
	font-size: .85em;
	padding: 5px 25px 5px 0;
	background: url(../img/i-plus-small.png) no-repeat right;
}

/* .box - cajas de destacados con enlace */
.box {
	position: relative;
	height: 107px;
	margin: 15px 0;
}

.box p {
	position: absolute;
	width: 271px;
	height: 29px;
	right: 3px;
	bottom: -2px;
	margin: 0;
	text-align: right;
	padding-top: 8px;
	background: url(../img/bg-box-caption.png) no-repeat;
}

.box a {
	padding: 5px 25px 5px 0;
	background: url(../img/i-plus-small.png) no-repeat right;
	margin-right: 5px;
	font-weight: bold;
	font-size: .85em;
	position: relative; /* fixes IE bug */
}

.box strong{
	display: none;
}

#butlleta.box {
	background: url(../img/box-opina.jpg) no-repeat;
}

#sessions.box {
	/*background: url(../img/box-sessions.jpg) no-repeat;*/
}

#passejat.box {
	/*background: url(../img/box-passejat.jpg) no-repeat;*/
}

#diagonal-avui.box {
	height: 237px;
	/*background: url(../img/box-diagonalavui.jpg) no-repeat;*/
}


/*--------------------------------------------------------------------------
 *	Layout (posicionamiento de los principales bloques)
 *--------------------------------------------------------------------------*/
#wrapper {
	width: 956px;
	padding: 0 7px 7px 3px;
	margin: 0 auto;
	text-align: left;	
	background: url(../img/bg-wrapper.png) no-repeat bottom center;
}

#wrapper .spacing {
	background: #fff;
}

#header {
	clear: both;
	overflow: hidden;
	margin: 30px 0 35px 10px;
}

#sidebar {
	float: left;
	width: 275px;
	margin-left: 15px;
}

#gallery #sidebar {
	margin-top: 30px;
}

#content {
	float: right;
	width: 648px;
	margin-right: 10px;
}

#home #content {
	float: left;
	width: 355px;
	padding: 0 10px 0 15px;
	margin: 0;
}

#footer {
	clear: both;
	text-align: center;
	color: #333;
	padding: 10px 0 15px;
}

#subcontent {
	float: right;
	width: 275px;
	margin-right: 8px;
}

/*--------------------------------------------------------------------------
 *	Header
 *--------------------------------------------------------------------------*/
#topbar {
	background: #000;
	height: 30px;
}

#topbar p{
	float: left;
	background: url(../img/ajuntament.png);
	text-indent: -9999px;
	width: 164px;
	height: 30px;
}

#topbar ul {
	float: right;
	margin: 5px 10px 0 10px;
}

#topbar li a {
	color: #fff;
	text-decoration: underline;
}

#header h1 a {
	float: left;
	background: url(../img/logo.png);
	text-indent: -9999px;
	width: 267px;
	height: 66px;
}


/* Navegación principal */
#nav {
	float: right;
	margin: 23px 25px 0 0;
}

#nav li {
	float: left;
}

#nav li a {
	float: left;
	background: url(../img/nav.png) no-repeat;
	text-indent: -9999px;
	height: 45px;
	margin-left: 60px;
}

#nav li#proces a {
	width: 80px;
	background-position: 0 top;
	margin: 0;
}

#nav li#proces a:hover,
#nav li#proces.active a {
	background-position: 0 bottom;
}

#nav li#diagonal a {
	width: 142px;
	background-position: -138px top;
}

#nav li#diagonal a:hover,
#nav li#diagonal.active a {
	background-position: -138px bottom;
}

#nav li#perque a {
	width: 110px;
	background-position: -332px top;
}

#nav li#perque a:hover,
#nav li#perque.active a {
	background-position: -332px bottom;
}

#nav li#idea a {
	width: 101px;
	background-position: -502px top;
}

#nav li#idea a:hover,
#nav li#idea.active a {
	background-position: -502px bottom;
}

/*--------------------------------------------------------------------------
 *	Sidebar
 *--------------------------------------------------------------------------*/
#sidebar h2 {
	font-size: 1.4em;
	color: #000;
	line-height: 1.3em;
	font-weight: bold;
	margin-bottom: 10px;	
}

#sidebar #subnav {
	padding-bottom: 10px;
	margin-bottom: 10px;
	background: url(../img/separator.png) no-repeat bottom;
}

#sidebar ul,
#sidebar h2  {
	margin-left: 15px;
}

#sidebar ul ul {
	margin-left: 0;
}

#sidebar li {
	margin-bottom: 8px;
	font-weight: bold;
}

#sidebar li ul {
	margin-left: 18px;
	margin-top: 8px;
}

#sidebar li {
	color: #000;
}

#sidebar li a {
	color: #666;
}

#sidebar li a:hover,
#sidebar li.active a {
	color: #0098D0;
	text-decoration: none;
}

#sidebar #swf-espaisverds {
	width: 275px;
	height: 310px;
	background: url(../img/espaisverds.png);
	text-indent: -9999px;
	margin: 0;
}


/* .block - bloques genéricos en el sidebar */
#sidebar .block {
	margin: 10px 0;
}

#home #sidebar .block {
	margin: 1px 0;
}

#sidebar .block:first-child {
	margin-top: 0;
}
/* for ie6 */
#sidebar .block.first {
	margin-top: 0;
}


/* Agenda del sidebar */
#sidebar .agenda {
	height: 148px;
	background: url(../img/bg-agenda.png) no-repeat;
	padding: 7px 10px;
}

#sidebar .agenda .news {
	overflow: auto;
	padding-right: 5px;
	height: 93px;
	margin: 0;
}

#sidebar .agenda .news li {
	overflow: hidden;
}

#sidebar .agenda .news li em {
	float: right;
	width: 28px;
	padding: 5px;
	margin-right: 5px;
	background: url(../img/bg-calendar.png) no-repeat;
	font-size: .9em;
	font-style: normal;
	text-align: center;
	color: #fff;
}

#sidebar .agenda .news li em span {
	display: block;
	font-size: 1.3em;
}

#sidebar .agenda .news li div {
	float: left;
	width: 180px;
}

#sidebar .agenda .news li a:hover {
	text-decoration: underline;
}

#sidebar .agenda .services {
	margin: 27px 0 0 67px;
	overflow: hidden;
}

#sidebar .agenda .services li {
	float: left;
	
}

#sidebar .agenda .services li a {
	float: left;
	height: 15px;
	text-indent: -9999px;
}

#sidebar .agenda .services li.flickr a {
	width: 30px;
	margin-right: 20px;
}

#sidebar .agenda .services li.youtube a {
	width: 43px;
	margin-right: 30px;
}

#sidebar .agenda .services li.rss a {
	width: 40px;	
}


/*--------------------------------------------------------------------------
 *	Content
 *--------------------------------------------------------------------------*/
#home #content {
	background: url(../img/bg-content.png) no-repeat bottom;
}

#content h2#diagonal-ahir {
	float: left;
	background: url(../img/t-diagonal-fotos.png) no-repeat;
	width: 130px;
	height: 75px;
	text-indent: -9999px;
}

#gallery #content p {
	margin: 0 70px;
}

#photo-gallery {
	height: 496px;
	background: url(../img/bg-gallery.png) no-repeat right top;
	margin-top: 15px;
	padding: 15px 0 0;
}

#photo-gallery .photos li {	
	display: none;
	position: relative;
	text-align: center;
	margin: 0 auto;
	overflow: hidden;
}

#photo-gallery .photos li .caption {
	position: absolute;
	height: 80px;
	bottom: 0;
	left: 0;
	background: url(../img/opacity.png);
	font-size: 1em;
	color: #fff;
	padding: 10px;
	display: none;
}

#photo-gallery .photos li:first-child {
	display: block;
}
/* for ie6 */
#photo-gallery .photos li.first {
	display: block;
}

#photo-gallery .thumbs {
	margin: 10px 0;
	text-align: center;
}

#photo-gallery .thumbs li {
	display: inline;
}

#photo-gallery .thumbs li a {
	margin-right: 10px;
}

#photo-gallery .thumbs li img {
	opacity: .5;
	-moz-opacity: .5;
	filter: alpha(opacity=50);
}

#photo-gallery .thumbs li.active img {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}


/* News */
#content-news {
	color: #333;	
 	margin: 10px 30px 0 0;
}

#content-news li {
	clear: left;
	padding-bottom: 20px;
	margin-top: 30px;
	background: url(../img/separator.png) no-repeat bottom;
}

#content-news li:first-child {
	margin-top: 0;
}

#content-news li a.img {
	position: relative;
	float: left;
}

#content-news li a span {
	position: absolute;
	width: 22px;
	height: 22px;
	right: 5px;
	top: 66px;
	background: url(../img/i-plus-small.png) no-repeat;
}

#content-news li div {
	margin-left: 115px;
}

#content-news li h4 {
	padding-top: 12px;
}

#content-news li p {
	font-size: .85em;
}

#home #content .more-link {
	margin-top: 13px;
}

/*--------------------------------------------------------------------------
 *	subcontent
 *--------------------------------------------------------------------------*/
#subcontent .box {
	margin: 5px 0;	
}

#subcontent .box p {
	width: 272px;
	background: url(../img/bg-box-caption-subcontent.png) no-repeat;
	bottom: 0;
	right: 3px;
}

#subcontent #diagonal-avui.box p {
	width: 275px;
	background: url(../img/bg-box-caption-wide.png) no-repeat;
	right: 0;
	bottom: -2px;
}

/*--------------------------------------------------------------------------
 *	Footer
 *--------------------------------------------------------------------------*/
#footer p {
	font-size: 1.1em;
	margin: 0;
}

#footer a {
	text-decoration: underline;
}

/*--------------------------------------------------------------------------
 *	Forms
 *--------------------------------------------------------------------------*/