/**
 *	Proyecto: Gallos de México
 *	
 *	@autor	: Sustam.com
 *	@fecha	: 19/Dic/2011
*/


/****************************** imports *******/

@import url('style.css');


/****************************** Defaults *****/

body {
	background: #fff; 
	font-family:  Georgia;
}

a {
	text-decoration: none;
}

a:focus,
a:active {
	outline: none;
}

/******************************* functions *****/

.abs() {
	position: absolute;
}

.rel() {
	position: relative;
}

.container() {
	margin: 0 auto;
	width: 980px;
}

.wrapper(){
	clear: both;
	width: 100%;
}

.helvetica( @size : 12px ) {
	font-family:  Helvetica, Arial, Verdana, sans-serif;
	font-size: @size;
}

.georgia( @size : 12px ) {
	font-family:  Georgia;
	font-size: @size;
}

.arial( @size : 12px ) {
	font-family:  Arial, Helvetica, Verdana, sans-serif;
	font-size: @size;
}

.border-radius ( @size: 5px ) {
	-webkit-border-radius: @size;
	-khtml-border-radius: @size;
	-moz-border-radius: @size;
	border-radius: @size;
}

.text-shadow ( @color : #000000 ) {
	text-shadow: 1px 1px 0 @color;
}

.bold( ) {
	font-weight: bold;
}

.light(){
	font-weight: lighter;
}

.italic ( ) {
	font-style: italic;
}

.normal ( ) {
	font-style: normal;
}

.bg-pattern () {
	background: url(../img/bg-pattern.png) repeat;
}



/************ COLORS **************/

@green: #007941;

@gray: #656363;

@white: #fff;

@d1gray: #515151;

@d2gray: #434343;

@p: #656363;

@orange: #ff5e02;


/***************************** General classes ****/

.p {
	.georgia(12px);
	color: @p;
}

.hidden {
	display: none;
}

.clear {
	clear: both;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.upper {
	text-transform: uppercase;
}

.lower {
	text-transform: lowercase;
}

/********************************  Header ***********************/

#header {
	.wrapper;
	height: 72px;
	background: #faf9ed url(../img/header.png) no-repeat 50% 0;
	.rel;
	padding-bottom: 10px;
}

header {
	.container;
	height: 72px;
}



header > * {
	.float-left;
}

header h1 {
	.rel;
	z-index: 1000;
	float: none;
}

header h1 a span {
	.hidden;
}

header h1 a img {
	.abs;
	top: 14px;
	left: 0;
}

header nav {
	.float-right;
	padding-top: 25px;
}

header nav ul li {
	float: left;
	margin-left: 54px;
}

header nav ul li a {
	.georgia(14px);
	color: @white;
	.upper;
}

header nav ul li a:hover,
header nav ul li a.current {
	color: @green;
}

/**************************************************  Footer ************************/

#footer {
	.clear;
	.wrapper;
	background: #fff url(../img/footer.jpg) repeat-x 50% 0;
	min-height: 310px;
}

#social  {
	height: 118px;
	.container;
}

#social > div {
	.float-left;
	width: 800px;
	height: 118px;
}

#social > div.last-child {
	margin-right: 18px;
	.float-right;
	display: none;
}

#social > div.last-child > a {
	display: block;
	margin-left: 84px;
	margin-top: 44px;
	width: 124px;
	height: 27px;
}

#social > div > *  {
	.float-left;
}

#social > div > img {
	display: block;
	margin-top: 38px;
}

#social > div > p {
	width: 400px;
	height: 73px;
	background: url(../img/comment-large.png) no-repeat;
	padding-left: 10px;
	margin-left: 6px;
	margin-top: 17px;
}

#social > div > p > span {
	display: block;
	margin: 10px auto;
	width: 357px;
	color: @d1gray;
	.arial(11px);
	line-height: 19px;
	height: 44px;
	overflow: auto;
}

#social > div > p > span a {
	.bold;
	color: @d1gray;
}

footer {
	min-height: 400px;
	padding-top: 30px;
	.container;
	background: url(../img/guitarra.png) no-repeat right 240px;
}

footer > * {
	.float-left;
	width: 33%;
}


.f-title {
	.helvetica(16px);
	color: @d2gray;
	.text-shadow(#fff);
	.upper;
	.bold;
	display: block;
	margin-bottom: 20px;
}

footer > form div,
#contacto form div  {
	margin-bottom: 8px;
}

footer > form div input,
#contacto form div input, 
footer > form div textarea,
#contacto form div textarea {
	background: #ff5d00;
	border: solid 1px #fff;
	.border-radius(5px);
	width: 216px;
	height: 35px;
	line-height: 35px;
	padding: 0 10px;
	color: @white;
	opacity: 0.8;
	.italic;
	.georgia(14px);
}

footer > form div textarea,
#contacto form div textarea {
	height: 80px;
	padding-top: 5px;
	line-height: 19px;
}

footer > form div input:focus,
#contacto form div input:focus,
footer > form div textarea:focus,
#contacto form div textarea:focus  {
	outline: none;
}

footer > form div input#submit,
#contacto form div input#submit {
	color: @white;
	.helvetica(12px);
	.upper;
	width: 96px;
	height: 40px;
	text-align:center;
	line-height: 40px;
	.border-radius(5px);
	background: #3c3c3c;
	.normal;
	margin-left: 142px;
}
	

footer > div  {
	
}

footer > div > p {
	width: 240px;
	margin: 0 auto;
	margin-bottom: 22px;
	.georgia(14px);
	color: .d2gray;
	.italic;
}

footer > div > .f-title {
	margin-left: 40px;
}



footer > nav {
	margin-top: 50px;
}

footer > nav ul {
	margin-left: 85px;
}

footer > nav ul li a {
	color: @d2gray;
	.italic;
	.georgia(14px);
}

footer > nav ul li a img {
	margin-right: 12px;
	vertical-align: middle;
}

footer > nav ul li {
	margin-bottom: 8px;
}


/************************************ content *************************************************/

#content {
	background: url(../img/pattern-bg.png) repeat;
	min-height: 200px;
	.wrapper;
}

#content > div {
	.container;
	overflow: auto;
}


/**************************** home ********************************/

#home {
	padding-bottom: 20px;
}

#home > * {
	.float-left;
}

#home aside {
	width: 600px;
	padding-top: 88px;
}

#home aside p {
	color: @gray;
	.georgia;
	.italic;
	margin-top: 5px;
	display: inline-block;
	margin-left: 20px;
	width: 164px;
}

#home aside p a {
	color: @orange;
	.georgia(14px);
}

#home aside p a img {
	vertical-align: middle;
}

#home article {
	width: 370px;	
}

#home article p {
	padding-top: 10px;
	.georgia(12px);
	color: @gray;
	line-height: 21px;
	.italic;
	margin-bottom: 15px;
	.rel;
}

#home article p img {
	.abs;
}

#slides-home {
	background: url(../img/foto-principal-gallos.png);
	width: 335px;
	height: 294px;
}

#open-quote {
	top: 4px;
	left: -25px;
}

#close-quote {
	bottom: -3px;
	right: 176px;
}


/********************************** Galeria **************************/

#galeria {
	.rel;
	padding-bottom: 50px;
}

#gal-info {
	.abs;
	top: 35px;
	left: 0;
	width: 185px;
}

#gal-info h3 {
	.helvetica(14px);
	color: @green;
	margin-bottom:4px;
}

#gal-info p {
	.georgia(12px);
	.italic;
	color: @gray;
}

#galeria > figure {
	background: url(../img/galeria-bg.png) no-repeat;
	width: 649px;
	height: 463px;
	margin-left: 325px;
	margin-top: 20px;
	margin-bottom: 15px;
}

#galeria > figure > img  {
	border: solid 3px #fff;
	.border-radius(5px);
	display: block;
	.rel;
	left: 88px;
	top: 36px;
}

#gal-container {
	width: 950px;
	height:110px;
	background: #f2f0e0;
	margin: 0 auto;
	.rel;
	padding-top: 10px;
}

#prev-gal {
	background: url(../img/left-arrow.png) no-repeat;
	width: 16px;
	height: 31px;
	display: block;
	.abs;
	top: 40px;
	left: 5px;
}

#next-gal {
	top: 40px;
	background: url(../img/right-arrow.png) no-repeat;
	width: 16px;
	height: 31px;
	display: block;
	right: 5px;
	.abs;
}


#slides {
	width: 900px;
	height: 101px;
	margin: 0 auto;
}

#slides ul li {
	.float-left;
	width: 134px;
	height: 101px;
	background: url(../img/frame-mini-galeria.png) no-repeat;
	margin-left: 14px;
}

#slides ul li a{
	width: 134px;
	height: 101px;
	display: block;
}


#slides ul li a img {
	width: 126px;
	height: 93px;
	display: block;
	margin: 0 auto;
	margin-top: 5px;
}


/****************************************** discografia ********************************/

#discografia {
	.rel;
	padding-bottom: 65px;
}

#discografia > aside {
	width:490px;
	.float-left;
	padding-top: 80px;
}

#discografia > aside > a {
	background: url(../img/youtube-bg.png) no-repeat;
	display: block;
	width: 200px;
	height: 64px;
	line-height: 64px;
	color: @gray;
	.text-shadow(#fff);
	.italic;
	.georgia;
	margin-bottom: 50px;
	text-align:center;
}

#discografia > aside > a img  {
	margin-left: 5px;
	vertical-align: middle;
}

#discografia > aside > img {
	margin-bottom: 30px;
}

#discografia > aside > p {
	.helvetica;
	color: @gray;
	.italic;
}

#discografia > aside > p span{
}

#discografia > aside > p a {
	color: @orange;
}

#discografia > aside {
}

#lista-discografia {
	.float-left;
	width: 430px;
	padding-top: 90px;
	margin-left: 55px;
}

#prev-disc {
	background: url(../img/left-arrow-disco.png) no-repeat;
	left: 0px;
}

#next-disc {
	background: url(../img/right-arrow-disco.png) no-repeat;
	left: 200px;
}

#lista-discografia > div {
	.rel;
}

#lista-discografia > div > a {
	.abs;
	display: block;
	top: 58px;
	width:18px;
	height: 39px;
	z-index: 1000;
}

#discos > div > figure {
	background: url(../img/disco-bg.png) no-repeat;
	margin-left: 30px;
	margin-bottom: 20px;
	width:161px;
	padding-top: 3px;
	height: 160px;
}

#discos > div > figure > a {
	display:block;
	margin-left: 4px;
}

#discos > div > figure  a img {
	width:154px;
	height: 153px;
	display:block;
}

#discos > div > ul {
	margin-left: 25px;
}

#discos > div > ul li {
	float: left;
	margin-bottom: 15px;
	width: 50%;
}

#discos > div > ul span {
	display: block;
}

.cancion {
	.helvetica(11px);
	color: #c5591b;
	.bold;
}

.compositor {
	.helvetica(11px);
	color: @gray;
}

/****************************************** CURRICULUM ****************/

#curriculum {
	.rel;
	padding-bottom: 150px;
}

#curriculum-info {
	padding-top: 70px;
	background: url(../img/curriculum-image-small.png) no-repeat top right;
}

#curriculum-info > div {
	/*width: 50%;*/
	/*.float-left;*/
}

#curriculum-info > div > span {
	color: #c34f02;
	.helvetica(12px);
	.bold;
	.italic;
	margin-bottom: 20px;
	display: block;
}


#curriculum-info > div > p {
	margin-bottom: 20px;
	color:  @gray;
	.helvetica(12px);
	.upper;
	line-height: 17px;
	/*width: 448px;*/
} 

#curriculum-info > div > p strong {
	color: #c34f02;
	.bold;
	.italic;
	.georgia(14px);
}

#curriculum-info > div > img {
	margin-bottom: 40px;
}


.extra-margin {
	padding-top: 320px;
}

/*************************************************** contact *****************/

#contacto {
	.rel;
	min-height: 510px;
	background: url(../img/contacto-foto.png) no-repeat left 110px;
}

#contacto #gal-info h3,
#contacto #gal-info p  {
	width: 300px;
}

#contacto-info {
	margin-top: 125px;
	margin-right: 260px;
}

#contacto-info > p {
	margin-bottom: 22px;
	color: @gray;
	.georgia(14px);
	.italic;
	text-align: right;
}

#contacto-info  a {
	color: @gray;
	.georgia(14px);
	.italic;
}

/******** player ***********/

#audioplayer_1 {
	vertical-align: middle;
	display: inline-block;
	margin-left: 63px;
}

/****** form contact ****/

#contacto {
	.rel;
}

#contacto form {
	.abs;
	top: 80px;
	right: 0px;
}


/******* timelinr ***/

#timeline {
		width: 980px;
		height: 350px;
		overflow: hidden;
		margin: 150px auto;
		position: relative;
	}

	#timeline > img {
		.abs;
		top: 44px;
		left: 0;
	}
		#dates {
			width: 980px;
			height: 82px;
			overflow: hidden;
			
		}
			#dates li {
				list-style: none;
				float: left;
				width: 100px;
				height: 82px;
				font-size: 24px;
				text-align: center;
				
			}
				#dates a {
					line-height: 38px;
					padding-bottom: 10px;
					color: #c34f02;
					.georgia(13px);
					.italic;
				}

				#dates a img {
					display: none;
				}

				#dates .selected {
			        color: #c34f02;
			        .georgia(15px);
			        .italic;
			        .bold;
				}
				#dates .selected span {
					border-bottom: 1px solid;
    				padding-bottom: 2px;
				}

				#dates .selected img {
					display: block;
					margin: 0 auto;
					.rel;
				}
		
		#issues {
			width: 980px;
			overflow: hidden;
			margin-top: 50px;
		}	
			#issues li {
				width: 980px;
				height: 350px;
				list-style: none;
				float: left;
			}
				#issues li.selected img {
					-webkit-transform: scale(1.1,1.1);
					-moz-transform: scale(1.1,1.1);
				    -o-transform: scale(1.1,1.1);
				    -ms-transform: scale(1.1,1.1);
				    transform: scale(1.1,1.1);
				}
				#issues li img {
					float: left;
					margin: 10px 30px 10px 50px;
					background: transparent;
				}
				#issues li h1 {
					
					font-size: 48px;
					margin: 20px 0;
					text-shadow: #000 1px 1px 2px;
				}
				#issues li p {
					color:  @gray;
					.helvetica(12px);
					.upper;
					line-height: 17px;
					width: 800px;
					margin: 0 auto;
				}

				#issues li p strong {
					color: #007941;
					.bold;
					.italic;
					.georgia(24px);
					display: block;
					margin-bottom: 20px;
				}
		
				

		#grad_left,
		#grad_right {
			width: 100px;
			height: 350px;
			position: absolute;
			top: 0;
		}
			#grad_left {
		        left: 0;
		        background: url('../js/timelinr/images/grad_left.png') repeat-y;
			}
			#grad_right {
		        right: 0;
		        background: url('../js/timelinr/images/grad_right.png') repeat-y;
			}
		
		#next,
		#prev {
			position: absolute;
			top: 0;
			font-size: 70px;
			top: 170px;
			width: 22px;
			height: 38px;
			background-position: 0 0;
			background-repeat: no-repeat;
			text-indent: -9999px;
			overflow: hidden;
			width: 18px;
			height: 40px;
			display: block;
			.abs;
			top: 210px;
		}
			#next {
				right: 0;
				background-image: url('../img/right-arrow-disco.png');
			}
			#prev {
				left: 0;
				background-image: url('../img/left-arrow-disco.png');
			}
			#next.disabled,
			#prev.disabled {
				opacity: 0.2;
			}