@import url("common.css");
@import url("footer.css");
@import url("header.css");
@import url("gallery.css");

body {
    background: #d4dce4;
}

#global {
    padding-bottom: 130px;
}

.sprite {
	background-image: url(../images/sprites/homepage@1x.png);
	background-image: -webkit-image-set(url(../images/sprites/homepage@1x.png) 1x, url(../images/sprites/homepage@2x.png) 2x);
	background-repeat: no-repeat;
	background-size: 560px 200px;
}

#homepage-header {
    background-color: #7a94af;
    height: 180px;
    text-align: center;
    width: 100%;
}

#homepage-header-wrapper {
    margin: 0px auto;
    position: relative;
    width: 1100px;
}

#logo {
    background-position: 0px -50px;
    height: 110px;
    width: 560px;
}

#content {
    margin: 0px auto;
    width: 1100px;
}

#column-left {
    float: left;
    width: 770px;
}

#news-wrapper {
    height: 430px;
    position: relative;
    width: 770px;
}

#news {
    background-color: #e9eff4;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.10);
    height: 460px;
    left: 0px;
    padding: 20px;
    position: absolute;
    top: -70px;
    width: 730px;
}

#news .img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 370px;
    width: 730px;
}

#news-content {
    height: 77px;
    margin-top: 13px;
    width: 100%;
}

#mb-description {
    float: left;
    height: 77px;
    width: 590px;
}

#mb-description .title {
    color: #6a7076;
    font-size: 22px;
    font-weight: 600;

}

#mb-description .subtitle {
    color: #898c8f;
    font-size: 13px;
    margin-top: 10px;
}

#workshop-button {
    background-color: #71c279;
    color: #fff;
    display: block;
    float: right;
    font-size: 14px;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
    margin-top: 7px;
    padding: 0px 15px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}

#workshop-button:hover {
    background-color: #55985b;
}

#gallery {
    margin-top: 35px;
    position: relative;
    width: 770px;
}

#gallery > .title {
    border-bottom: 2px solid #c4cdd7;
    color: #676e75;
    font-size: 15px;
    margin-bottom: 20px;
    padding-bottom: 3px;
    width: 100%;

}

#gallery > .title .bold {
    color: #43484d;
    font-weight: 800;
}

#gallery > .title .more {
    color: #676e75;
    display: block;
    float: right;
    font-size: 10px;
    font-weight: 800;
    margin-top: 5px;
    text-decoration: none;
    text-transform: uppercase;

}

#gallery > .title .more::before {
    background-image: url(../images/sprites/homepage@1x.png);
    background-image: -webkit-image-set(url(../images/sprites/homepage@1x.png) 1x, url(../images/sprites/homepage@2x.png) 2x);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-size: 560px 200px;
    content: "";
    display: block;
    float: left;
    height: 8px;
    margin-top: 3px;
    margin-right: 3px;
    width: 8px;
}

#gallery > .title .more:hover {
    color: #43484d;
}

#gallery > .title .more:hover::before {
    background-position: -10px 0px;
}

/* MODEL PREVIEW */
#models-grid {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px;
    width: 770px;
}

/* RENDER PREVIEW */
#renders-grid {
    list-style-type: none;
    margin: 0px 0px 30px 0px;
    padding: 0px;
    width: 770px;
}

/* RIGHT COLUMN */
#column-right {
    float: right;
    width: 310px;
}

#search-wrapper {
    background-color: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    height: 40px;
    margin-top: 20px;
    width: 310px;
}

#search-button {
	background-color: #fff;
    background-position: -20px 0px;
    cursor: pointer;
    float: left;
    height: 40px;
    width: 40px;
}

#search-input {
    background-color: #fff;
    color: #6f757b;
    font-size: 13px;
    font-weight: 400;
    height: 40px;
    padding-left: 0px;
    width: 270px;
}

#search-input::-webkit-input-placeholder {
    color: #939aa2;
}

#search-input::-moz-placeholder {
    color: #939aa2;
}

#search-input:-ms-input-placeholder {
    color: #939aa2;
}

#ad-wrapper {
    background-color: #ffffff;
    border: 5px solid #ffffff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    height: 250px;
    margin-top: 20px;
    width: 300px;
}

/* TWITTER */
#twitter-wrapper {
    background-color: #e9eff4;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    position: relative;
    width: 310px;
}

#twitter-title {
    color: #6a7076;
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    padding: 0px 10px;
    width: 290px;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

#twitter-timeline {
    height: 350px;
    padding: 0px 5px 5px 5px;
}

#twitter-wrapper .mask {
	background-color: #ffffff;
    height: 5px;
    position: absolute;
    width: 5px;
}

#twitter-wrapper .mask.top {
    top: 48px;
}

#twitter-wrapper .mask.top.left {
    left: 5px;
}

#twitter-wrapper .mask.top.right {
    right: 5px;
}

#twitter-wrapper .mask.bottom {
    bottom: 5px;
}

#twitter-wrapper .mask.bottom.left {
    left: 5px;
}

#twitter-wrapper .mask.bottom.right {
    right: 5px;
}

#facebook {
	background-color: #fff;
	margin-top: 20px;
	min-height: 154px;
	overflow: hidden;
	width: 310px;
}