@import "defaults";
@import "common_mixins";

// @viewport_width: unit(`window.innerWidth`, px);
// @viewport_height: unit(`window.innerHeight`, px);

@media (min-width: 1200px) {
	.container {
		width: 970px;
	}
}

body {
	height: 100%;

	margin: 0px;

	font-size: 17px;
	.font_copy;
	font-weight: 300;
	line-height: normal;

	background-color: @lift_yellow;
	background-size: 128px;

	-webkit-backface-visibility: hidden;
}

h1, h2, h3, h4 {
	margin: 0px;
	margin-bottom: @inner_gutter;
}

h1 {
	font-weight: 700;
}

a {
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

@header_height: 140px;
.header {
	.size_to_width {
		.size_to_box;
	}

	@height: @header_height;

	position: fixed;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	height: @height;

	-webkit-backface-visibility: hidden;

	z-index: @z_index_max;

	&.shadowed {
		.add_shadow_under_lighter;
	}

	a, .logo {
		display: inline-block;
		position: relative;

		margin-right: @inner_gutter;

		vertical-align: top;

		color: @lift_blue;
		font-size: 1.1em;
		font-size: 1.0em;
		font-size: 1.05em;
		text-decoration: none;
		font-weight: 500;

		.animated;
		outline: 0px;
	}

	.logo {
		display: inline-block;
		width: 225px;
		height: @height;

		color: transparent;

		background-image: url(/images/logo.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center bottom;
	}

	.login {
		position: absolute;
		top: 0px;
		right: 0px;

		padding: @inner_gutter;
		padding-bottom: @inner_gutter/2;
		padding-top: @header_height/5;

		color: @lift_yellow;
		text-transform: uppercase;

		box-shadow: @drop_shadow_light;
		background-color: @lift_blue;

		&:before {
			content: '';
			display: block;
			position: relative;
			top: -9px;

			width: 0px;
			height: 0px;

			margin-left: auto;
			margin-right: auto;

			border-style: solid;
			border-width: 0 14px 14px 14px;
			border-color: transparent transparent @lift_yellow transparent;
		}
	}

	.navigation {
		position: absolute;
		bottom: 0px;
		right: 0px;
	}
}

.section {
	position: relative;
	padding-top: @gutter * 1.5;
	padding-bottom: @gutter * 1.5;

	color: @lift_blue;

	&.white {
		color: @lift_blue;
		text-shadow: none;

		background-color: @white;

		hr.arrow {
			top: -18px;
			background-image: url(/images/triangle_white.png);
		}
	}
	
	&.blue {
		color: @lift_yellow;
		background-color: @lift_blue;
	}
	
	&.yellow {
		background-color: @lift_yellow_light;
	}

	p {
		line-height: 1.5em;
	}

	.icon {
		@size: 155px;
		width: @size;
		height: @size;

		margin-bottom: 20px;

		border: dotted 3px @lift_blue;
		border-radius: @size/2;

		background-repeat: no-repeat;
		background-size: cover;
		background-clip: padding-box;
		background-position: center center;
	}

	.btn.right {
		float: right;
	}
}

.section.footer {
	background-color: @lift_blue;

	color: @white;

	img.logo_color {
		width: 335px;
	}

	.contact {
		a.social {
			margin-left: 10px;
		}

		a.mail {
			color: inherit;
		}

		h3 {
			margin-top: @gutter;
			margin-bottom: @inner_gutter/2;
		}

		text-align: right;
	}
}

.section.legal {
	background-color: @white;

	h4 {
		margin-bottom: 10px;

		font-size: 0.8em;
		font-weight: 600;
	}

	p {
		font-size: 0.8em;
	}
	
	.sponsors {
		img {
			display: block;
			width: 170px;
			margin-bottom: 20px;
		}
	}
}

// HOMEPAGE

.section.primary {
	min-height: 800px;

	padding-top: @header_height + @gutter*2 + 130px;

	background-color: #F9E929;
	._box-shadow(inset 0px 0px 300px fade(#ECC124, 90%));

	.grandma_face {
		position: relative;
		top: -90px;
		width: 260px;
	}

	.btn {
		margin-top: @gutter;
		float: right;
	}

	.learn_more {
		display: block;

		color: @lift_blue;
		font-size: 1.1em;

		padding-left: 130px;

		&:before {
			@size: 64px;

			content: '';
			display: block;
			position: absolute;
			left: 30px;
			top: -17px;
			width: @size;
			height: @size;

			border-radius: @size/2;
			border: dotted 3px @lift_blue;
		}
		&:after {
			content: '';
			display: block;
			position: absolute;
			top: 11px;
			left: 50px;

			width: 0px;
			height: 0px;

			border-style: solid;
			border-width: 12px 12px 0 12px;
			border-color: @lift_blue transparent transparent transparent;
		}
	}
}

.section.brief {
	color: @lift_yellow;
	background-color: @lift_blue;

	.icon {
		border-color: @lift_yellow;
	}
}

.section.actions {
	background-color: @lift_yellow_light;

	.volunteer_row {
		margin-top: 75px;
		margin-bottom: @gutter;
	}

	.volunteer_box,
	.donation_box {
		padding: @gutter;
	}

	.volunteer_box {
		border: solid 5px average(@lift_yellow, @lift_yellow_light);
		background-color: @lift_yellow;

		&:before {
			@size: 150px;

			content: '';
			display: block;
			width: @size;
			height: @size;

			margin-left: auto;
			margin-right: auto;
			margin-top: -@size/2 - @gutter;
			margin-bottom: 20px;

			border-radius: @size/2;
			background-color: inherit;

			background-image: url(/images/clock.png);
			background-size: @size * 0.68;
			background-position: center center;
			background-repeat: no-repeat;
		}

		form {
			padding-top: @inner_gutter;

			label.control-label {
				font-weight: 600;
				text-transform: uppercase;
			}

			input[type="text"],
			input[type="email"] {
				color: @lift_blue;
				font-family: inherit;
				font-size: 1em;

				box-shadow: none;

				border-radius: 0px;
				border: none;
				border-bottom: solid 2px @lift_blue;

				background: none;

				&:focus {
					border-color: @white;

				}

				@placeholder_color: average(@lift_yellow, @lift_blue);
				&::-webkit-input-placeholder { /* WebKit browsers */
					color: @placeholder_color;
				}
				&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
					color: @placeholder_color;
				}
				&::-moz-placeholder { /* Mozilla Firefox 19+ */
					color: @placeholder_color;
				}
				&:-ms-input-placeholder { /* Internet Explorer 10+ */
					color: @placeholder_color;
				}
			}
		}

		.bottom {
			position: relative;
			padding-top: @gutter;

			.or_call {
				@height: 45px;

				position: absolute;
				left: -@gutter - 5;
				height: @height;

				padding-left: @gutter + 5;
				padding-right: @gutter * 2/3;

				line-height: @height + 2;

				background-color: @white;
			}

			.btn {
				float: right;
				color: @lift_yellow;
				background-color: @lift_blue;
			}
		}
	}

	.testimonial {
		.photo {
			@size: 300px;
			width: @size;
			height: @size;

			margin-left: auto;
			margin-right: auto;

			box-shadow: inset 0px 0px 30px rgba(0,0,0,0.2);
			border-radius: @size/2;

			background-color: @grey_light;
			background-repeat: no-repeat;
			background-size: cover;
			background-clip: padding-box;
		}
		.text {
			padding-top: 40px;
			padding-bottom: 30px;

			font-style: italic;
			font-size: 1.4em;

			&:before,
			&:after {
				content: '"';
			}
		}
		.name {
			.font_hand;
			font-size: 1.6em;
			text-align: right;
		}
		
		a {
			position: absolute;
			top: 150px - 30;
			width: 0;
			height: 0;
			border-style: solid;
			
			&.previous {
				left: 0px;
				border-width: 30px 30px 30px 0;
				border-color: transparent @lift_yellow transparent transparent;
			}
			
			&.next {
				right: 0px;
				border-width: 30px 0 30px 30px;
				border-color: transparent transparent transparent @lift_yellow;
			}
		}
	}

	.donation_box {
		color: @white;

		border: solid 5px average(@lift_blue, @lift_yellow_light);
		background-color: @lift_blue;

		h2 {
			color: @lift_yellow;
		}

		img {
			display: block;
			width: 65px;
			margin: @gutter;
			margin-left: auto;
			margin-right: auto;
		}

		.btn {
			display: block;

			margin-left: 50px;
			margin-right: 50px;

			color: @lift_blue;
			background-color: @lift_yellow;
		}
	}

	.statistics_box {
		p {
			padding-bottom: @inner_gutter;
		}
		
		dl {
			dd {
				margin-bottom: 20px;
			}
		}
	}
}

// SUPPORT PAGE

.section.support_top {
	color: @lift_yellow;
	background-color: @lift_blue;

	.icon {
		border-color: @lift_yellow;
	}

	.btn {
		color: @lift_blue;
		background-color: @lift_yellow;

		&:hover {
			color: @lift_blue;
		}
	}
}

.section.event {
	font-size: 0.8em;

	background-color: @white;

	.icon {
		@size: 65px;
		width: @size;
		height: @size;

		margin-right: @gutter;

		float: left;

		border-radius: 0px;
		border: none;
	}
}

// BOOTSTRAP

.btn,
.btn.btn-primary {
	display: inline-block;
	color: @lift_yellow;
	text-transform: uppercase;
	background-color: @lift_blue;

	&:hover {
		color: @lift_yellow;
	}
}

.modal-dialog {
	position: absolute;
	top: 50%;
	left: 50%;

	margin-top: -200px;
	margin-left: -175px;

	width: 350px;
	font-family: "Helvetica Neue","Helvetica",Arial,sans-serif;


	.modal-content {
		color: @black;
		background-color: #f5f5f7;

		overflow: hidden;

		.modal-header,
		.modal-footer {
			text-align: center;
			text-transform: uppercase;

			text-shadow: 0 1px 0 #fff;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 1.1em;
			text-align: center;

			border: none;
		}

		.modal-header {
			background-color: #efeff0;
			._simple_gradient(#f5f5f7,#e9e9ea);
			border-bottom: solid 1px #d3d3d4;
		}

		.modal-body {
			border-top: solid 1px ##FFFFFF;
		}
	}

	.btn {
		position:relative;

		width: 128px;
		height: 37px;
		border: none;

		background: #45b1e8;
		background-image: -webkit-linear-gradient(#45b1e8,#3097de);
		background-image: -moz-linear-gradient(#45b1e8,#3097de);
		background-image: -ms-linear-gradient(#45b1e8,#3097de);
		background-image: -o-linear-gradient(#45b1e8,#3097de);
		background-image: -webkit-linear-gradient(#45b1e8,#3097de);
		background-image: -moz-linear-gradient(#45b1e8,#3097de);
		background-image: -ms-linear-gradient(#45b1e8,#3097de);
		background-image: -o-linear-gradient(#45b1e8,#3097de);
		background-image: linear-gradient(#45b1e8,#3097de);
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-ms-border-radius: 4px;
		-o-border-radius: 4px;
		border-radius: 4px;
		-webkit-font-smoothing: antialiased;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
		cursor: pointer;
		outline: none;
		font-family: "Helvetica Neue","Helvetica",Arial,sans-serif;
		font-weight: bold;
		font-size: 17px;
		line-height: 36px;
		color: #fff !important;
		text-shadow: 0 -1px 0 rgba(46,86,153,0.3);
		-webkit-box-shadow: 0 1px 0 rgba(46,86,153,0.15),0 0 4px rgba(86,149,219,0),inset 0 2px 0 rgba(41,102,20,0);
		-moz-box-shadow: 0 1px 0 rgba(46,86,153,0.15),0 0 4px rgba(86,149,219,0),inset 0 2px 0 rgba(41,102,20,0);
		-ms-box-shadow: 0 1px 0 rgba(46,86,153,0.15),0 0 4px rgba(86,149,219,0),inset 0 2px 0 rgba(41,102,20,0);
		-o-box-shadow: 0 1px 0 rgba(46,86,153,0.15),0 0 4px rgba(86,149,219,0),inset 0 2px 0 rgba(41,102,20,0);
		box-shadow: 0 1px 0 rgba(46,86,153,0.15),0 0 4px rgba(86,149,219,0),inset 0 2px 0 rgba(41,102,20,0);
		-webkit-transition: box-shadow .15s linear;
		-moz-transition: box-shadow .15s linear;
		-ms-transition: box-shadow .15s linear;
		-o-transition: box-shadow .15s linear;
		transition: box-shadow .15s linear;

		&:active {
			background-image: -webkit-linear-gradient(#328ac3,#277bbe);
			background-image: -moz-linear-gradient(#328ac3,#277bbe);
			background-image: -ms-linear-gradient(#328ac3,#277bbe);
			background-image: -o-linear-gradient(#328ac3,#277bbe);
			background-image: -webkit-linear-gradient(#328ac3,#277bbe);
			background-image: -moz-linear-gradient(#328ac3,#277bbe);
			background-image: -ms-linear-gradient(#328ac3,#277bbe);
			background-image: -o-linear-gradient(#328ac3,#277bbe);
			background-image: linear-gradient(#328ac3,#277bbe);
		}

		span {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border: 1px solid rgba(46,86,153,0.1);
			border-bottom-color: rgba(46,86,153,0.4);
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			-ms-border-radius: 4px;
			-o-border-radius: 4px;
			border-radius: 4px;
		}
	}

	input {
		text-align: right;
	}

	.small {
		margin-top: @inner_gutter;
		margin-bottom: 0px;
	}

	.modal-footer {
		margin-top: 0px;
	}
}

// markdown styles
.markdown_content {
}