app/soc/content/less/soc/ie8-and-down.less

// ie 8 and down styles!

/* import mixins again */
@import "mixins";

//all those breakpoint styles


// ==========================================================================
// projects
// ==========================================================================


.projects {
	width: 960px;
	max-width: 100%;
	.clearfix;
}

.project {
	float: left;
	width: 455px;
	margin: 10px;
}

.project-image {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{images_soc_location}/non-bg.png', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{images_soc_location}/non-bg.png', sizingMethod='scale')";

	.active & {
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{images_soc_location}/active-bg.jpg', sizingMethod='scale');
		-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{images_soc_location}/active-bg.jpg', sizingMethod='scale')";
	}

	a:hover & {
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{images_soc_location}/non-bg-hover.png', sizingMethod='scale');
		-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{images_soc_location}/non-bg-hover.png', sizingMethod='scale')";

		.active & {
			filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{images_soc_location}/active-bg-hover.png', sizingMethod='scale');
			-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/active-bg-hover.png', sizingMethod='scale')";
		}
	}
}
.one-active {

		// this makes all projects the size of the small one
		/////////////////////////////////////////////////////
		.project {
			width: 300px; 
			float: right;
			margin-top: 70px;
			min-height: 360px;
		}

		.project-image {
			height: 190px;
		}

		.project-title {
			padding: 0 10px;
		}
		.project-info {
			padding: 20px 35px 0;
		}
		.project-description {
			margin: 0 0 1.5em 0;

			p {
				display: none;
				&.unactive-description {
					display: block;
				}
			}
		}

		.project-button {
			font-size: .9em;
			width: 50px;

			&:before {
				background: url('@{images_soc_location}/house-icon-small.png');
				width: 14px;
				height: 14px;
			}
		}

		a:hover .project-button:before {
			background: url('@{images_soc_location}/house-icon-small.png');
			width: 14px;
			height: 14px;
			background-position: 100%;
		}


		// this makes the active project look big
		/////////////////////////////////////////////////////
		.active {

			&.project {
				width: 660px;
				z-index: 100;
				height: 400px;
				position: absolute;
				left: 0;
				top: 0;
				margin-top: 10px;

				a {
					.clearfix;
				}
			}

			.project-image {
				float: left;
				width: 400px;
				height: 100%;
				padding: 50px 40px;
			}

			.project-info {
				text-align: left;
				padding: 50px 20px 20px 420px;
			}

			.project-title {
				padding: 0;
				font-size: 1.95em;
			}

			.project-description {
				margin: 0 0 1.5em 0;
	
				p {
					display: block;
					&.unactive-description {
						display: none;
					}
				}
			}

			.active-banner {
				right: 140px;
			}

			.project-button {
				position: absolute;
				bottom: 20px;
				font-size: 1em;
				width: 60px;

				&:before {
					background: url('@{images_soc_location}/house-icon.png');
					width: 18px;
					height: 18px;
					background-position: 100%;
				}
			}

			a:hover .project-button:before {
				background: url('@{images_soc_location}/house-icon.png');
				width: 18px;
				height: 18px;
				background-position: 0;
			}

		}
}


.main-footer {

	.powered, .empowered {
		display: inline;
		margin: 0;
	}
}