/*
Theme Name: EL2011
Description: Theme based on Toolbox (An ultra-minimal HTML5 starter theme, by The Automattic Theme Team).
Author: Jeporu
Author URI: http://jeporu.com/
Version: 0.1
Tags: custom-menu, threaded-comments, sticky-post, microformats, rtl-language-support, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/* =Reset default browser CSS. Based on work by Eric Meyer
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
body { line-height: 1 }
ol, ul { list-style: none }
.blockquote {
	quotes: none;
	padding: 1em;
	background: lighten(@gray0, 5%);
	border-left: 3px solid @gray1;
	p:last-child { margin-bottom: 0 }
	h1, h2, h3 { margin: 0.8em 0; &:first-child { margin-top: 0 } }
}
blockquote, q, cite { .blockquote }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none }
table { border-collapse: collapse; border-spacing: 0 }
/* Reset - Fim */


/* =Variaveis Less
-------------------------------------------------------------- */

/* Sizes */

@box_width: 306px;
@box_height: 360px;
@article_height: 302px;

@page_width: 978px;
@content_width: 640px;
@secondary_width: @box_width;

@highlights_height: 425px;

@space_width: 28px;

@meter_height: 19px;

/* Colors */

@gray0: lighten(@gray1, 15%);
@gray1: lighten(@gray2, 15%);
@gray2: #999;
@gray3: darken(@gray2, 15%);
@gray4: darken(@gray3, 15%);
@gray5: darken(@gray4, 15%);
@red: #bf0f0f;

/* Fonts */
.font-league-gothic { font-family: 'LeagueGothicRegular' }
.font-cuprum { font-family: 'CuprumRegular' }
.font-contra { font-family: 'ContraRegular' }
@font-family-body: 'ColaborateLightRegular', Verdana, Tahoma, sans-serif, Sans;
@font-family-body-bold: 'ColaborateRegular', 'ColaborateLightRegular', Verdana, Tahoma, sans-serif, Sans;

.border-bottom {
	padding-bottom: 3px;
	border-bottom: 3px solid @gray0;
}
.credits-font {
	font-size: 0.875em;
	text-align: right;
	a { color: currentColor }
}


/* =Funções
-------------------------------------------------------------- */

.sprite(@ix, @iy: 0, @size: 20px) {
	@x: -1 * @size * @ix;
	@y: -1 * @size * @iy;	
	background-position: @x @y;
}
.sprite_hover(@ix, @iy: 0, @size: 20px) {
	@x: -1 * @size * @ix;
	background-position: @x top;
	&:hover { background-position: @x bottom }
}

.border-radius (@radius) {
	border-radius: @radius;
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
}

.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
	@val: @x @y @blur rgba(0, 0, 0, @alpha);
	box-shadow:         @val;
	-webkit-box-shadow: @val;
	-moz-box-shadow:    @val;
}

.opacity (@opacity) {
	@opacityIE: @opacity*100;
	opacity: @opacity;
	-moz-opacity: @opacity;
	filter: alpha(opacity=@opacityIE);
}

/*.transform (@rotate, x-axis: 50%, y-axis: 50%, z-axis: 0) {*/
.transform (@rotate, @origin: 50%) {
	-webkit-transform: rotate(@rotate);	-webkit-transform-origin: @origin;
	-moz-transform: rotate(@rotate);	-moz-transform-origin: @origin;
	-o-transform: rotate(@rotate);		-o-transform-origin: @origin;
	transform: rotate(@rotate);			transform-origin: @origin;
}


/* =Titulos
-------------------------------------------------------------- */

p, blockquote, pre, cite, code, table { margin: 1em 0; }

h1, h2, h3, h4, h5, h6,
.widget-title,
#content fieldset legend,
#content .entry-header .entry-title {
	.font-league-gothic;
	color: @gray5;
	a, a:hover { color: @gray5 }
}

@h1: 36px;
@h2: 25px;
@h3: 22px;
@h4: 18px;

h1 { font-size: @h1 }
h2 { font-size: @h2 }
h3 { font-size: @h3 }

/* Títulos nas widgets */
.widget-area .widget, blockquote, q, cite { 
	h1 { font-size: @h2 }
	h2 { font-size: @h3 }
	h3 { font-size: @h3 - 2 }
}
.widget { 
	h1, h2, h3 { margin-bottom: 0.6em } 
}

pre, code {
	display: block;
	font-family: 'Liberation Mono', Monospace;
	font-size: 0.875em;
}


/* =Links
-------------------------------------------------------------- */

a {
	text-decoration: none;
	outline-style: none;
	color: @red;
	&:hover { color: #959595 }
}

#content p.more { text-align: right; a { text-decoration: underline } }


/* =Structure
-------------------------------------------------------------- */

body {
	letter-spacing: 0;
	margin: 0;	
	font-family: @font-family-body;
	font-size: 100%;
	color: #333;
	background: #fff;
}
p { line-height: 1.3em; }
.entry-content p { line-height: 1.5em; }
strong { font-family: @font-family-body-bold }
em { font-style: italic; }
small { font-size: 0.939em }

.selection { background: #D14343; color: #fff }
::selection { .selection }
::-moz-selection { .selection }

body.single, body.page, body.search, body.error404 { #main { min-height: 600px } }
#page {
	display: block;
	margin: 40px auto;
	width: @page_width;
}
#main {
	margin-bottom: 50px;
}
#primary {
	width: @content_width;
	display: inline-block;
	vertical-align: top;
	min-height: 500px;
}
body.wide #primary { width: @page_width }
#secondary {
	display: inline-block;
	width: @secondary_width;
}
#content { margin: 0; }
#main .widget-area {
	float: right;
}
#colophon {
	clear: both;
	display: block;
	width: 100%;
	min-width: @page_width;
}

/* Increase the size of the content area for templates without sidebars */
.full-width #content,
.image-attachment #content,
.error404 #content {
	margin: 0;
}

/* Text meant only for screen readers */
.screen-reader-text,
.section-heading {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

.clip { position: relative }
.clip img { position: absolute; left: 0; top: 0 }
.image { background-repeat: no-repeat; background-position: center center }
.entry-content p:first-child { margin-top: 0 }
.entry-content p img { margin-top: 1.2em; margin-bottom: 1.2em }

/* Alignment */
.alignleft {
	display: inline;
	float: left;
}
.alignright {
	display: inline;
	float: right;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.nowrap { white-space: nowrap }

/* Overlay (camadas) */
.overlay {
	display: none;
	position: relative;
	z-index: 2;
}
.overlay p { float: right; text-align: right; color: #fff; margin: 1.3em 0.6em 0 auto !important; }


/* =Header
-------------------------------------------------------------- */

#branding {
	margin-bottom: 40px;
	#branding-image {
		display: inline-block;
		width: 305px;
		height: 110px;
		background: url(images/logo-el-home.png) no-repeat;
	}
}

#site-title {
	font-size: 2em;
	font-weight: bold;
	margin: .67em 0;
}
#site-description {
	font-size: 1em;
	font-weight: normal;
	margin: 0 0 1em;
}


/* =Menu
-------------------------------------------------------------- */

#access {
	display: inline-block;
	float: right;
	margin: 10px auto 0;
	vertical-align: top;
		
	ul { list-style: none; margin: 0; padding-left: 0 }
	li { float: left; position: relative; display: block; &.hidden { display: none } }
	a {
		display: block;
		text-decoration: none;
		font-size: 16px;
	}

	ul.menu > li {
		margin-left: 3em;
		width: 4.8em;
		&:first-child { margin-left: 0 }
	}
	ul.menu > li > a {
		.font-league-gothic;
		font-size: 21px;
		color: @red;
		text-transform: uppercase;
	}
	
	ul.sub-menu {
		float: left;
		position: absolute;
		left: 0;
		top: 1.7em;
		li { margin: 0.2em 0; width: 100% }
		a {
			.font-cuprum;
			color: @gray2;
			text-transform: lowercase;
		}
	}
		
}


/* =Content
-------------------------------------------------------------- */

#content nav {
	display: block;
	overflow: hidden;
}
#content nav .nav-previous {
	float: left;
	width: 50%;
}
#content nav .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}
#content #nav-above {
	display: none;
}
.paged #content #nav-above,
.single #content #nav-above {
	display: block;
}
#nav-below {
	margin: 1.5em 0;
}
.page-link {
	margin: 0 0 1em;
}

/* Image Attachments */
.image-attachment div.entry-meta {
	float: left;
}
.image-attachment nav {
	float: right;
	margin: 0 0 1em 0;
}
.image-attachment .entry-content {
	clear: both;
}
.image-attachment .entry-content .entry-attachment {
	background: #eee;
	margin: 0 0 1em;
	padding: 1em;
	text-align: center;
}
.image-attachment .entry-content .attachment {
	display: block;
	margin: 0 auto;
	text-align: center;
}
body.page #content, body.single #content {
	img, .wp-caption, iframe, object, embed { max-width: @content_width !important }
}


/* =Images
-------------------------------------------------------------- */

a img {
	border: none;
}
p img {
	margin-bottom: 0.5em; /* a small bottom margin prevents content floating under images */
}
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-area img {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}
img.alignleft {
	margin-right: 1em;
}
img.alignright {
	margin-left: 1em;
}
.wp-caption {
	text-align: right;
	font-size: 0.875em;
}
.wp-caption .wp-caption-text {
	margin: 0;
}
/*.gallery-caption { }*/
.wp-smiley {
	margin: 0;
}


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

.fancy_button {
	display: inline-block;
	padding: 0.4em 0.8em;
	line-height: 1.5em;
	color: @gray4;
	background: #fff;
	border: 1px solid @gray1;
	.box-shadow(0, 0, 2px, 0.3);
	&:hover { .box-shadow(0, 0, 4px, 0.3) }
	&:active { box-shadow: inset -1px 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset -1px 1px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset -1px 1px 3px rgba(0, 0, 0, 0.2) }
}

input, textarea, select { font-size: 16px !important; font-family: @font-family-body !important }

/* Class for labelling required form items */
.required { color: @red; margin-left: 0.1em }

/*#content*/ form {

	h2 { margin: 0.8em 0 0.5em }
	
	li { 
		display: inline-block;
		position: relative; /* não remover o position */
		margin: 0.6em 0;
		list-style: none;
		vertical-align: top;
		&:first-child { margin-top: 0 }

		label { display: block; width: 100%; margin-bottom: 0.4em }
		ol { margin: 0 !important }
		ol li { margin: 0.2em 0 0.2em 1em !important }
		
		&.textarea, &.checkbox, &.radio { width: 100% }
		&.radio {
			input { position: relative; top: 0.15em; margin-left: 0 }
			li label { display: inline-block; width: 90% }
		}
	}

	@input_width: 308px;
	@padding_width: 5px;
	input[type=text], input[type=email], input[type=tel], textarea, select {
		display: block; 
		width: @input_width - 2 * @padding_width;
		padding: 0.3em @padding_width 0.25em;
		border: none;
		background: @gray0;
		.box-shadow(0, 0, 2px, 0.4);
		&:focus { color: #fff; background: @gray2; .box-shadow(0, 0, 4px, 0.3) }
	}
	input[type=checkbox] { position: relative; top: 0.18em; margin-left: -0.01em }
	select { width: @input_width; padding-top: 0.2em; padding-bottom: 0.2em }

	small { display: inline-block; margin-top: 0.4em; font-size: 0.812em; font-weight: bold; color: @gray3 }

	/* Character Count styles */
	.counter { display: none; position: absolute; right: 0; top: 0.2em; padding-left: 1em; font-size: 0.812em; color:@gray4; background: #fff }
	.warning { color: lighten(@red, 15%) }
	.missing, .exceeded { color: @red !important }
	
	@textarea_min_height: 3.4em;
	@textarea_max_height: 11.2em;
	textarea { @width: 98.5%; width: @width; min-width: @width; max-width: @width; height: @textarea_min_height; min-height: @textarea_min_height; max-height: @textarea_max_height }
	
	a.submit, input[type=submit] { .fancy_button() }
	
	.form-footer { margin-top: 1.4em }

	@li_margin_left: 20px;
	&#form-submission li {
		&.twitter input, &.identica input { width: 132px }
		&.tags input { width: @content_width - 2 * @padding_width }
		&.email, &.state, &.title, &.twitter, &.identica { margin-left: @li_margin_left }
	}
	&#form-contato li {
		&.type select { width: 190px }
		&.name input, &.email input { width: 191px }
		&.name, &.email { margin-left: @li_margin_left }
		textarea { height: @textarea_max_height }
	}
	&#form-registration li {
		&.twitter input, &.identica input { width: 132px }
		&.email, &.title, &.twitter, &.identica, &.age, &.howknew { margin-left: @li_margin_left }
	}
	&#form-verify { margin-bottom: 40px }
}


/* =Comments
-------------------------------------------------------------- */

article.comment { display: block }
#content #comments {
	margin-top: 2em;
	#comments-title { margin-bottom: 1em; text-transform: uppercase }
	li.comment > div {
		.blockquote;
		position: relative;
		margin: 1em 0;
		.comment-author {
			width: 84%;
			cite {
				font-family: @font-family-body-bold;
				padding: 0;
				background: none;
				border: none;
			}
		}
		.comment-meta { position: absolute; right: 1em; top: 1em; margin: 0 }
	}
	ul.children { margin-left: 9% }
}
#respond {
	margin-top: 40px;
	input[type=text] {
		display: block;
		width: 100%;
	}
	textarea {
		display: block;
		margin: 0.2em 0;
	}
	p { margin: 0.8em 0 }
}
	

/* =Widgets
-------------------------------------------------------------- */

.widget-area { 
	.widget {
		display: block;
		margin-top: 2em;
		&:first-child { margin-top: 4.3em }
		p { margin-top: 0 !important; line-height: 1.2em; /*font-size: 0.938em*/ }
	}
	.widget_search { 
		input#s {
			display: inline-block;
			vertical-align: top;
			width: @secondary_width - 48;
			background: lighten(@gray0, 5%);
			&:focus { background: @gray2 }
			.box-shadow(0, 0, 2px, 0.3);
			&:focus { color: #fff; background: @gray2; .box-shadow(0, 0, 4px, 0.3) }
		}
		a.submit { 
			display: inline-block;
			vertical-align: top;
			float: right;
			height: 14px;
			margin-top: -1px;
			background-image: url(images/search.png);
			background-repeat: no-repeat;
			background-position: center center;
			border: 1px solid lighten(@gray1, 5%);
			.box-shadow(0, 0, 2px, 0.2);
			&:hover { .box-shadow(0, 0, 4px, 0.2) }
		}
		
	}
	#widget-map iframe { margin-top: 5px }
}


/* =Footer
-------------------------------------------------------------- */

#colophon {
	margin-top: 40px;
	p { margin: 0.8em 0; line-height: 0.8em }
	#logos {
		margin-bottom: 30px;
		h3 { margin-bottom: 0.6em; padding-bottom: 0.2em; border-bottom: 1px solid @gray1 }
		div {
			display: inline-block;
			height: 140px;
			vertical-align: bottom;
			margin: 0 0 10px 60px;
			&:first-child, &#apoio, &#parceria { margin-left: 0 }
			a { 
				display: inline-block;
				background-repeat: no-repeat;
				background-position: left top;	
				margin: auto 20px;
				vertical-align: top;
				&:hover { background-position: left bottom }
			}
		}
		
		@logo_height: 90px;
		.height(@height) {
			height: @height;
			margin-top: (@logo_height - @height) / 2;
		}
		
		/* #realizacao */		
		#jeporu { width: 160px; .height(59px); background-image: url(images/logo-jeporu.png) }
		
		/* #bronze */
		#ufpe { width: 44px; .height(80px); background-image: url(images/logo-ufpe.png) }
		#cin { width: 100px; .height(37px); background-image: url(images/logo-cin.png) }
		#oescrit { width: 120px; .height(30px); background-image: url(images/logo-oescrit.png) }		
		
		/* #apoio */
		#malakoff { width: 100px; .height(56px); background-image: url(images/logo-malakoff.png) }
		#fundarpe { width: 90px; .height(28px); background-image: url(images/logo-fundarpe.png) }
		#govpe { width: 161px; .height(31px); background-image: url(images/logo-govpe.png) }
		#amadeus { width: 61px; .height(80px); background-image: url(images/logo-amadeus.png) }
		#cprod { width: 70px; .height(80px); background-image: url(images/logo-cprod.png) }
		
		/* #parceria */
		#pugpe { width: 98px; .height(45px); background-image: url(images/logo-pugpe.png) }
		#cinlug { width: 100px; .height(30px); background-image: url(images/logo-cinlug.png) }
		#esplivre { width: 90px; .height(48px); background-image: url(images/logo-esplivre.png) }
		#negobom { width: 90px; .height(43px); background-image: url(images/logo-negobom.png) }
		#coco { width: 72px; .height(60px); background-image: url(images/logo-coco.png) }
		#pilar { width: 80px; .height(46px); background-image: url(images/logo-pilar.png) }
	}
}


/* =Articles
-------------------------------------------------------------- */

article {
	footer.entry-meta {
		width: 100%;
		min-height: 20px;
		line-height: 1.3em;
		margin-bottom: 0.2em;
		a {
			font-size: 0.937em;
			&:hover { color: @gray2 }
			&.more { padding-left: 22px; background: url(images/more.png) no-repeat left -1px; &:hover { background-position: left bottom } }
		}
		.share {
			float: right;
			margin: 0 !important;
			li {
				list-style: none;
				float: left;
				margin: 0 !important;
				a { float: left; margin-left: 0.2em; width: 20px; height: 20px; background: url(images/sprites.png) no-repeat left top }
				&.comment a { .sprite_hover(0) }
				&.facebook a { .sprite_hover(1) }
				&.twitter a { .sprite_hover(2) }
				&.identica a { .sprite_hover(3) }
				&.paypal a { .sprite_hover(4) }
				&.flattr a { .sprite_hover(5) }
				
			}
		}
	}	
}
body.single, body.page, body.search, body.error404 {
	article article, &.search article {
		margin-bottom: 2.5em;
		.border-bottom;
		header.entry-header { 
			margin-bottom: 0;
			.entry-date { bottom: 0.1em }
		}
		.entry-title { font-size: @h2 }
	}
	header.entry-header, header.page-header {
		position: relative;
		margin-bottom: 2em;
		.entry-title { width: 90% }
		.entry-date { position: absolute; right: 0.2em; bottom: 0.2em }
	}
	#content article ol, #content article ul { list-style: disc; margin: 1em 0; ol, ul { margin:	0.5em 0; list-style: circle } }
	#content article ol li, #content article ul li { margin: 0.5em 0 0.5em 1em }
}


/* =Artigos na Home
-------------------------------------------------------------- */

body.wide .box {
	width: 100%;
	article, div.column {
		width: @box_width;
		display: inline-block;
		vertical-align: top;
		
		margin: 0 0 0 26px;
		padding-bottom: 0;
		border-bottom: none;
		&.first { margin-left: 0 }

		h3 { margin-bottom: 0.3em; overflow: hidden; max-height: 2em }
		header.entry-header {
			position: relative;
			h3 { width: 85% }
			.entry-date { position: absolute; right: 0.2em; top: 0.4em; font-size: 0.937em }
		}
		.clip { width: 306px; height: 108px; img { clip: rect(0 306px 108px 0) } }
		figure figcaption { position: absolute; right: 0; bottom: 0.1em; padding: 0.1em; .credits-font; color: #fff; background: #333; .opacity(0.8); &:hover { .opacity(0.9) } }
	}
}
body.home .box article {
	height: @article_height;
	float: left;
	.container { overflow: hidden; height: 15.3em }
}


/* =Destaques na Home
-------------------------------------------------------------- */

#highlights {
	width: 100%;
	height: @highlights_height;
	position: absolute;
	left: 0;
	overflow: hidden;
	li { list-style: none; margin: 0; width: 100%; text-align: center; img { max-width: 100% } }
}

#highlights-ctrl {
	
	width: 100%;
	height: @highlights_height;
	margin-bottom: 55px;

	#caption {
		@padding_height: 10px;
		@padding_width: 25px;
		padding: @padding_height @padding_width @padding_height+10;
		position: absolute;
		left: 0;
		margin-top: @highlights_height - 90px;
		width: @page_width - 2 * @padding_width;
		z-index: 100;
		overflow: hidden;
		background: rgba(191, 15, 15, 0.9);

		h3 { 
			margin: 0 0 0.4em;
			max-height: 1.2em;
			text-align: right;
			line-height: 2.1em;
			a { .font-contra; font-size: 40px; color: #fff }
		}
	}
	.ie7, .ie8 { #caption { background: @red } }
	
	#bottom {
		position: relative;
		z-index: 101;
		left: 0;
		top: @highlights_height + 5;
		
		#nav {
			display: inline-block;
			a {
				display: inline-block;
				width: 22px;
				height: 22px;
				background: url(images/bullets.png) no-repeat center top;
				&.activeSlide { background-position: center bottom }
			}
		}
		
		#credits {
			float: right;
			margin-top: 0.3em;
			.credits-font;
		}
	}
	
}


/* =Linhas de caixas na Home
-------------------------------------------------------------- */

body.wide .box-container {
	width: 100%; 
	margin: 50px 0; 
	&:first-child { margin-top: 0 } 
	.box { h1 { margin-bottom: 0.6em } }
}
body.home .box-container { 
	height: @box_height; 
	.box { .border-bottom }
}


/* =Noticias na Home
-------------------------------------------------------------- */

body.wide #noticias {
	display: inline-block;
	width: 640px;
	height: @box_height;
	article { position: relative }
	footer.entry-meta { position: absolute; left: 0; bottom: 0 }
}
.webkit body.home #noticias article .content {
	height: 13em !important;
	overflow: hidden;
}


/* =Twitter e Identica
-------------------------------------------------------------- */

#microblogs, #microblogs-avatar {
	width: @box_width;
	min-height: @box_height;
	
	.loading {
		display: block;
		width: 16px;
		height: 16px;
		float: right;
		margin-top: 0.3em;
		background: url(images/loader.gif) no-repeat center center;
	}
	li.status {
		display: block;
		position: relative;
		margin: 10px 0 0 !important;
		font-size: 0.8745em;
		min-height: 4em;
		&:first-child { margin-top: 0 !important }
		/* .avatar */
/*		.user { display: block; font-size: 0.9em; font-weight: bold; margin-bottom: 0.4em }*/
		.user { display: block; font-family: @font-family-body-bold; margin-bottom: 0.4em }
		.content { display: inline-block; width: 240px }
		p { line-height: 1em; margin: 0.4em 0 }
		small { font-size: 0.9em; padding-top: 0.2em; color: @gray2 }
		nav {
			display: none;
			position: absolute;
			right: 0;
			top: 0;
			li { 
				display: inline-block;
				margin: 0;
				a { 
					display: inline-block;
					width: 16px;
					height: 16px;
					background: url(images/sprites.png) no-repeat left top;
					&.reply { .sprite_hover(6) }
					&.retweet { .sprite_hover(7) }
				}
			}
		}
		&:hover nav { display: block }
	}
	.avatar { 
		position: relative;
		display: inline-block;
		margin: 0.3em 0.8em 0.8em 0; 
		width: 50px;
		height: 50px;
		text-align: center;
		vertical-align: top;
		.box-shadow(0, 0, 2px, 0.5);
		img { width: 48px; height: 48px; margin-top: 1px }
		/* .overlay { display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url(images/avatar-frame-50.png) no-repeat center top; z-index: 0; } */
		.service {
			display: block; 
			position: absolute; 
			width: 16px; 
			height: 16px; 
			left: 35px; 
			top: 35px; 
			background: url(images/sprites.png) no-repeat left top;
			&.twitter { .sprite(8) }
			&.identica { .sprite(8, 1) }
		}
	}
	&#microblogs-avatar .avatar { margin: 0 8px 8px 0; width: 26px; height: 26px; img { width: 24px; height: 24px } }
}
body.home #microblogs {	float: right; height: @box_height; .border-bottom }
body.page-id-249 #microblogs {	min-height: 430px }


/* =Financiamento e campanhas na Home
-------------------------------------------------------------- */

body.home #financiamento, body.home #campanhas {
	display: inline-block;
	position: relative;
	width: 640px;
//	height: @box_height + 40;
	height: @box_height;
	
	article {
		position: relative;
//		height: @article_height + 40;
//		.container { height: 17.4em }
		.container { height: 16em }
	}
	footer.entry-meta { position: absolute; left: 0; bottom: 0 }
	&#financiamento article { 
//		height: 250px; 
		border-bottom: none; 
//		.content { overflow: hidden; height: 6.5em }
		footer { margin: 1em 0 0 }
	}
	.meter {
		position: absolute;
		left: 0;
		bottom: @meter_height;
	}
}
.webkit body.home #financiamento, .webkit body.home #campanhas {
	.container { height: 15.7em !important }
//	&#financiamento .content { height: 6.2em !important }
//	&#campanhas .container { height: 17em }
}

		
/* =Campanhas na Home
-------------------------------------------------------------- */

body.home #campanhas {
	width: @box_width;
	float: right;
}


/* =Medidor nas campanhas
-------------------------------------------------------------- */

.meter {
	display: inline-block;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	height: @meter_height;
	@background: #fff;
	@notachieved: @gray1;
	@achieved: @red;
	background: @background;
	.goal {
		float: left;
		height: 100%;
		background: @notachieved;
		margin-left: 3px;
		text-align: center;
		position: relative;
		span {
			position: relative;
			left: 4px;
			font-size: 0.812em;
			font-weight: bold;
			text-align: center;
			color: #fff;
		}
		.achieved_perc {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			background: @achieved;
			.border-radius(@meter_height/2);
			z-index: 3;
		}
		&::before, &::after {
			content: ' ';
			display: block;
			position: relative;
			.transform(45deg);
		}
		&::before {
			float: left;
			margin-left: -10px;
			height: @meter_height;
			width: @meter_height;
			background: @background;
			z-index: 1;
		}
		&::after {
			float: right;
			margin-right: -10px;
			height: @meter_height;
			width: @meter_height;
			background: @notachieved;
			z-index: 2;
		}
		&.first { margin-left: 0; .border-radius(@meter_height/2 0 0 @meter_height/2); &::before { display: none } }
		&.last { .border-radius(0 @meter_height/2 @meter_height/2 0); &::after { display: none } }
		&.first.last { .border-radius(@meter_height/2); &::before, &::after { display: none } }
		&.achieved, &.achieved::after { background: @achieved }
	}
}
body.single .meter { margin: 0.8em 0 1em }


/* =Página Local
-------------------------------------------------------------- */

#widget-map { 
	margin-top: 74px;
	position: relative;
	height: 320px;
	background: #ccc;
	iframe { margin: 0 !important }
	#map-zoom { 
		position: absolute; 
		right: 7px;
		top: 31px; 
		z-index: 2; 
		display: block; 
		width: 16px; 
		height: 16px; 
		border: 1px solid #000;
		background: #fff url(images/map-search.png) no-repeat center center; 
	}
}


/* =Messages e loading
-------------------------------------------------------------- */

.notification { .border-bottom; margin-bottom: 1em; p { margin-bottom: 0.5em  } }
.loading { 
	display: inline-block;
	width: 16px; 
	height: 16px;
	position: relative;
	top: 4px;
	left: 10px;
	background: url(images/loading.gif) no-repeat;
}


/* =Botões para doacao
-------------------------------------------------------------- */

nav#donation {
	overflow: visible;
	margin: 1em 0;
	.donation {
		display: inline-block;
		.fancy_button;
		padding-left: 40px;
		background-repeat: no-repeat;
		background-position: 12px 0;
		margin-left: 0.2em;
		&:first-child { margin-left: 0 }
		&.paypal { background-image: url(images/donation-paypal.png) }
		&.flattr { background-image: url(images/donation-flattr.png) }
		&:hover { background-position: 12px -37px }
	}
}


/* =Edicoes anteriores do evento na sidebar da pagina O Evento
-------------------------------------------------------------- */

#widget-ed-anteriores li { 
	margin: 1em 0 0.8em;
	a { 
		display: block; 
		width: 296px; 
		height: 87px; 
		background-repeat: no-repeat; 
		background-position: center top; 
		border: 1px solid @gray1;
		.box-shadow(0, 0, 2px, 0.3);
		&:hover { background-position: center bottom; .box-shadow(0, 0, 4px, 0.3) }
	}
	a#EL2009 { 
		background-image: url(images/banner-el2009.png);
	}
	a#EL2010 { background-image: url(images/banner-el2010.png) }
}


/* =Pagina de pesquisa e erro 404
-------------------------------------------------------------- */

body.search, body.error404 {
	code { margin: 2em 0; line-height: 1.4em }
}


/* =Sidebar na página Submissao
-------------------------------------------------------------- */

#submissiontags a {
	display: inline-block;
	margin: 1px 2px 1px 0;
	padding: 0 2px;
	&:first-child { margin-left: 0 }
	&.selected { background: fadeout(@red, 20%); color: #fff }
}


/* =Update your browser
-------------------------------------------------------------- */

#browser-warning {
	.border-bottom;
	margin-bottom: 20px;
	padding: 0 0 1em;
	text-align: center;
	width: 100%;
	background: @gray3;
	color: #fff;
	a { color: #fff }
	a.browser { 
		position: relative;
		top: 10px;
		display: inline-block;
		width: 32px;
		height: 32px;
		margin: 0 2px;
		background: url(images/browser_logos-32.png) no-repeat center center;
		@size: 37px;
		&#ff { .sprite(1, 0, @size); margin-left: 6px }
		&#chrome { .sprite(0, 0) }
		&#opera { .sprite(2, 0, @size) }
		&#safari { .sprite(3, 0, @size) }
	}
	#close { margin-left: 10px; font-size: 14px; color: @gray5; text-shadow: 1px 1px 1px @gray0; filter: ~"dropshadow(color=#fff, offx=1, offy=1)";  }
}


/* =CSS Design Award
-------------------------------------------------------------- */

#cssdesignaward {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 99;
}


/* =Pagina Downloads
-------------------------------------------------------------- */

.down-group { 
	margin: 2em 0; 
	&:first-child { margin-top: 0 }
	h2 { margin-bottom: 1em } 
	figure figcaption { margin: 0.5em 0 0.3em }
}
.down-item, figure { margin-bottom: 2em; .border-bottom; .footer p { margin: 0.4em 0 0 } }


/* =Pagina Programacao
-------------------------------------------------------------- */

body.page .box#programacao, body.page #programacao_show {
	h3.day-title { margin-top: 1.4em; overflow: visible }
	
	@padding: 10px;
	.activity { 
		margin: 2em 0;
		padding: @padding;
		.box-shadow(0, 0, 3px, 0.3);
		&:hover { .box-shadow(0, 0, 6px, 0.3) }
		cursor: pointer;
		
		header { 
			position: relative;
			h3, h4 { width: 78% }
			h3 { margin: 0 0 0.4em; color: @gray4; display: inline-block }
			.entry-meta { position: absolute; top: 0.2em; right: 0; .font-league-gothic; font-size: @h4 }
		}
		
		p { margin: 1em 0 0 }
		p.tags { margin: 0.8em 0 1.4em }

		.person {
			min-height: 48px;
			margin: 0.65em 0;
			&:last-child { margin-bottom: 0 }
			.avatar { 
				display: inline-block;
				width: 48px;
				height: 48px;
				float: left;
				vertical-align: top;
				background: @gray0;
			}
			.content {
				display: inline-block;
				width: 243px - 2 * @padding;
				margin-left: 15px;
				vertical-align: top;
				font-size: 0.8745em;
				.name { display: inline-block; font-family: @font-family-body-bold; margin-top: 1.35em }
			}
		}
	}
	.day.column {
		h3.day-title { margin-top: 0 }
		.activity { height: 412px; position: relative }
		header h3, header h4 { width: 68% }
		.container.top { overflow: hidden; height: 17.6em }
		.container.bottom { position: absolute; bottom: @padding; left: @padding; width: 94%; background: #fff }
		
		.activity[data-id='36'] .container.top { height: 11.4em !important }
		.activity[data-id='37'] .container.top { height: 13em !important }
		.activity[data-id='39'] .container.top { height: 9.8em !important }
	}
}
body.page #programacao_show {
	width: @content_width;
	.activity {
		cursor: auto;
		margin: 0;
		padding: 0;
		box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
		&:hover { box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none }
		.content { width: 575px !important }
		.person { min-height: 60px; margin: 1em 0; .name { margin-top: 0 !important } p { margin-top: 0.6em } }
	}
}
body.page-id-11.wide #secondary { width: 100%; float: none; #submissiontags { margin-top: 0 } }


/* =Pagina Programacao - Modo de visualizacao
-------------------------------------------------------------- */

#viewcontrol {
	position: absolute;
	right: 0;
	top: 6px;
	height: 24px;
	a {
		display: inline-block;
		margin-left: 10px;
		width: 17px;
		height: 17px;
		background: url(images/sprites.png) no-repeat;
		&#list { .sprite(9, 0) }
		&#grid { .sprite(9, 1) }
	}
}


/* =Tabelas
-------------------------------------------------------------- */

table tr { line-height: 2em; height: 2em; border-bottom: 1px solid @gray0 }