// Colors (text and border colors and backgrounds)
body {
	color: $primary-color;
	background: $primary-background;
}

h2 {
	color: $ternary-color;
}

h3,
.as_h3 {
	color: $secondary-color;
}

h4,
.as_h4 {
	color: $ternary-color;
}

h5 {
	color: $ternary-color;
}

h6 {
	color: $ternary-color;
}


/* ---------------------------------------------------------------- layout: main */

#header {
	color: $white;
	background: $ternary-background;
	border-bottom: 4px solid $light-blue;
}

#wrapper {
	background: $secondary-background url(bg_wrapper.png) repeat-y 14em;
}

#content {
	background: $white;
}

#main-menu {
	background: $secondary-background;
}

#footer {
	background-color: $white;
	border-top: 1px solid $gray-light; // #ccc;
}


/* to hide main-menu */

#collapser {
	//	background: $light-blue;
	background: $gray-light;
	// background: $light-blue url(../images/collapser-hide.png) no-repeat center bottom;
	&:hover,
	&:focus {
		// background: $gray-dark;
		background: $light-blue;
	}
	.hide-mm & {
		// background: $gray-dark;
		background: $light-blue;
		// background: $light-blue url(../images/collapser-show.png) no-repeat center bottom;
		&:hover,
		&:focus {
			background: $gray-light;
		}
	}
}


/* if main-menu is hidden */

#wrapper.hide-mm {
	background: $white;
}


/* ---------------------------------------------------------------- layout: popups */

.popup h1 {
	color: $white;
	background: $ternary-background;
}


/* ------------------------------------------------------------------------------------
															UN POIL DE MEDIA QUERIES
------------------------------------------------------------------------------------ */

@media screen and (max-width: $xl-screen) {
	#header,
	h1 {
		background: $gray-very-dark;
	}
	#top-info-user {
		background: $ternary-background;
		a.active {
			color: $white;
			background: $gray-semi-dark;
		}
	}
	#wrapper {
		background: $secondary-background url(bg_wrapper.png) repeat-y 17em;
	}
}

@media screen and (max-width: $s-screen) {
	#help-button {
		background-color: $light-blue;
	}
}

@media screen and (max-width: $xs-screen) {
	h1 a {
		&:link {
			border-right: 1px solid $gray-light;
		}
		&:hover,
		&:focus {
			border-right: 1px solid $light-blue;
		}
	}
	.pseudo-tabs li {
		border-top: 1px solid $gray-light;
	}
}

@media screen and (max-width: $xxs-screen) {
	h1,
	h1 a {
		border-right: $gray-very-dark !important;
	}
	.pseudo-tabs li {
		border-top: 1px solid $gray-light !important;
	}
}
