@import "compass/layout/sticky-footer";

@media only screen and (max-width: 480px) {
	#login-page {

		section {
			&.page {
				margin: 5px;
				width: auto;
			}
		}

		form {
			margin: 0 auto;
			padding: 10px;
			[type="text"],
			[type="password"] {
				width: 220px;
			}
		}
	}
}

@media only screen and (max-width: 960px) {
	#login-page {
		background: url("../images/bg-small.jpg") repeat center center;
	}
	
	body {
		> header {
			top: 5px;
			left: 20px;
			bottom: inherit;
			width: auto;
			z-index: 999;
			background-color: transparent !important;
		}
		> .page {
			width: 100%;
			position: relative;
		}
	}
	// Menu 
	header {
		nav {
			width: auto;

			margin: auto;

			.logo {
				display: none;
			}
			> ul {
				margin: auto
			}

			li {
				@include inline-block;
				padding: 5px 0;

				&:first-child {
					display: none;
				}

				a {
					display: block;
					color: $theme-background-highlight;

					&[href*="action=more"] {
						width: 35px;
						height: 35px;
						line-height: 35px;
						@include flat-box($theme-background-highlight, $button-background-grey, 5px);

						&:before {
							height: 100%;
							width: 100%;
							line-height: inherit;
						}
					}
					&:before {
						color: $theme-background-highlight;
					}
				}
			}
		}
	}

	.page {
		.page-header {
			h2 {
				visibility: hidden;
			}

			ul {
				li {
					a,
					a:after {
						width: 35px;
						height: 35px;
						line-height: 35px;
					}
				}
			}
		}
	}

	// Menu mobile 
	.menu-more {
		margin-top: 50px;

		li {
			display: block;

			@include flat-box($theme-background-highlight, $button-background-grey, 5px);
			margin: 10px auto;

			a {
				display: block;
				// height: 100%;
				padding: 10px 20px;
				text-decoration: none;
				width: 100%;
			}
		}
	}
	.items {
		article {
			.preview {
				display: none;
			}
		}
	}
	#current-item {
		padding-top: 35px;

		nav {
			&.top {
				display: none;
			}
			&.bottom {
				display: block;
			}
		}
		> h1 {
			float: none;
		}

		iframe {
			width: 100%;
		}
	}
	form {
		label {
			display: block;

			&[for*="form-"] {
				width: auto;
			}
		}
	}
	.alert {
		&.alert-normal {
			ul {
				margin: 10px 5px;
			}
		}
	}

	.hide-mobile {
		display: none !important;
	}
	.hide-desktop {
		display: block;
	}
}