blob: 4f27232fca3be792555ccc3295880870319a935b [file] [log] [blame]
// 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;
}
}