/* * Less is a CSS pre-processor, meaning that it extends the CSS language, adding features * that allow variables, mixins, functions and many other techniques that allow you to * make CSS that is more maintainable, themeable and extendable. * * Read more about Less here http://lesscss.org. * * You CAN include regular CSS here and it'll work just fine. */ @color_BG: #000; @color_FG: #fff; body{ background-color: @color_BG; color: @color_FG; } .text-center{ text-align: center; } h1 { font-size: 2em; margin: 45px 0 15px; } .main h2.page-title, .next_info{ font-family: 'Oswald', sans-serif; } .main{ article{ header{ background-image: url(../images/common/car_back.png); background-position: center 0; background-repeat: no-repeat; background-size: contain; h1 { font-size: 1.2em; text-align: center; font-weight: normal; margin-bottom: 5px; margin-top: 25px; } .catch { font-size: 1.2em; text-align: center; font-weight: normal; margin-bottom: 25px; margin-top: 5px; } p { font-size: 0.9em; } .next_info{ background: rgba(255,255,255,0.15); text-align: center; margin: 5px auto; font-size: 19px; height: inherit; line-height: 40px; width: 100%; img{ height: 18px; margin-top: -4px; padding-right: 3px; } } } .entries_top{ letter-spacing: -.40em; padding-left: 0; list-style: none; margin-left: -5px; margin-right: -5px; li{ display: inline-block; letter-spacing: normal; width: 50%; a{ padding-left: 15px; padding-right: 15px; padding: 0 5px; display: block; .thumb{ position: relative; height: 130px; width: inherit; overflow: hidden; img{ // width: 100%; width: auto; height: 130px; -moz-transition: -moz-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; transition: transform 0.1s linear; bottom: -40%; height: auto; left: -40%; margin: auto; max-height: 140%; max-width: 140%; min-height: 100%; min-width: 100%; position: absolute; right: -40%; top: -40%; } } &:hover{ .thumb{ img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } } } } } } .entries_info{ margin-top: 50px; .date{ padding-left: 10px; } h2{ text-align: left; background: rgba(255,255,255,0.15); padding: 10px; font-size: 18px; } } .entries{ padding-left: 0; list-style: none; letter-spacing: -.40em; margin-left: -5px; margin-right: -5px; li{ display: inline-block; letter-spacing: normal; width: 50%; vertical-align: top; a{ display: block; padding: 0 5px; font-size: 0.9em; text-decoration: none; color:@color_FG; .thumb{ width: 100%; // height: auto; // overflow: hidden; position: relative; display: inline-block; height: 130px; margin: 0 3px; overflow: hidden; img{ width: 100%; height: auto; -moz-transition: -moz-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; transition: transform 0.1s linear; bottom: -40%; height: auto; left: -40%; margin: auto; max-height: 140%; max-width: 140%; min-height: 100%; min-width: 100%; position: absolute; right: -40%; top: -40%; width: auto; } } .date{ padding-left: 5px; padding-right: 5px; } .title{ text-decoration: underline; display: block; line-height: 1.5; text-align: left; margin-top: 10px; margin-bottom: 15px; } &:hover{ .thumb{ img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } } } } } .first{ width: 100%; a{ .thumb_wrap{ letter-spacing: -.40em; .thumb{ width: auto; height: inherit; overflow: hidden; display: inline-block; letter-spacing: normal; width: 50%; // height: auto; // overflow: hidden; position: relative; display: inline-block; height: 130px; margin: 0; overflow: hidden; position: relative; img{ width: 100%; height: auto; bottom: -40%; height: auto; left: -40%; margin: auto; max-height: 140%; max-width: 140%; min-height: 100%; min-width: 100%; position: absolute; right: -40%; top: -40%; width: auto; } } } .date{ } .title{ display: inline-block; } } } } } h2.page-title{ background: rgba(255,255,255,0.15); margin: 30px 0 50px; padding: 15px; font-size: 18px; text-align: center; } .partner_list{ padding: 0; list-style: none; letter-spacing: -0.4em; li{ display: inline-block; letter-spacing: normal; width: 100%; margin-bottom: 50px; text-align: center; a{ display: inline-block; color: #fff; text-decoration: none; font-size: 15px; overflow: hidden; img{ display: block; margin: 0 auto; transition: transform 0.1s linear; max-width: 100%; height: auto; } p{ text-align: center; margin: 5px; } &:hover{ img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } } } } .gazoo{ width:100%; } .logo{ width:100%; margin-top: 50px; } } } .footer-container{ footer { color: white; padding: 0 0 20px; /* border-top: 5px solid rgba(255,255,255,0.15); */ ul.banner { padding-left: 0; margin-top: 0; li { display: block; margin-top: 15px; margin-bottom: 15px; a{ padding: 5px; } } li.gazoo { padding-right: 0; } li.logo { a{ padding-top: 70px; padding-left: 15px; background-image: url(../images/common/car_side.png); background-position: center 20px; background-repeat: no-repeat; background-size: 130px auto; display: inline-block; } } } } } .category{ } .category.news{ background-image: url(../images/common/category_news.png); background-position: left center; background-repeat: no-repeat; background-size: 50px 20px; padding: 5px 25px; } .category.report{ background-image: url(../images/common/category_report.png); background-position: left center; background-repeat: no-repeat; background-size: 50px 20px; padding: 5px 25px; } .category.result{ background-image: url(../images/common/category_result.png); background-position: left center; background-repeat: no-repeat; background-size: 50px 20px; padding: 5px 25px; } @media only screen and (min-width: 480px) { .main{ article{ header{ background-image: url(../images/common/car_back.png); background-position: center 0; background-repeat: no-repeat; background-size: auto 260px; h1 { font-size: 1.2em; text-align: center; font-weight: normal; margin-bottom: 5px; margin-top: 25px; } .catch { font-size: 1.2em; text-align: center; font-weight: normal; margin-bottom: 25px; margin-top: 5px; } p { font-size: 0.9em; } .next_info{ background: rgba(255,255,255,0.15); text-align: center; margin: 5px auto; font-size: 30px; height: inherit; line-height: 50px; width: 95%; img{ height: 25px; margin-top: -7px; padding-right: 3px; } } } .entries_top{ letter-spacing: -.40em; padding-left: 0; list-style: none; margin-left: -15px; margin-right: -15px; li{ display: inline-block; letter-spacing: normal; width: 50%; a{ padding-left: 15px; padding-right: 15px; display: block; .thumb{ height: 182px; width: inherit; overflow: hidden; img{ width: auto; } } } } } .entries_info{ margin-top: 50px; .date{ padding-left: 10px; } h2{ text-align: left; background: rgba(255,255,255,0.15); padding: 10px; font-size: 18px; } } .entries{ padding-left: 0; list-style: none; letter-spacing: -.40em; margin-left: -15px; margin-right: -15px; li{ display: inline-block; letter-spacing: normal; width: 50%; vertical-align: top; a{ display: block; padding: 5px 15px; font-size: 0.9em; text-decoration: none; color:@color_FG; .thumb{ height: 182px; overflow: hidden; display: block; img{ height: auto; } margin-bottom: 10px; } .date{ padding-left: 16px; padding-right: 16px; } .title{ text-decoration: underline; display: block; line-height: 1.5; text-align: left; margin-top: 10px; } &:hover{ .thumb{ img { } } } } } .first{ width: 100%; a{ .thumb_wrap{ letter-spacing: -.40em; .thumb{ height: 180px; overflow: hidden; display: inline-block; letter-spacing: normal; width: 50%; img{ height: auto; } } } .date{ } .title{ display: inline-block; } } } } } h2.page-title{ background: rgba(255,255,255,0.15); margin: 30px 0 50px; padding: 15px; font-size: 18px; text-align: center; } .partner_list{ padding: 0; list-style: none; letter-spacing: -0.4em; li{ display: inline-block; letter-spacing: normal; width: 50%; margin-bottom: 50px; text-align: center; a{ display: inline-block; color: #fff; text-decoration: none; font-size: 15px; img{ display: block; margin: 0 auto; transition: transform 0.1s linear; max-width: 100%; height: auto; } p{ text-align: center; margin: 5px; } &:hover{ img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } } } } .gazoo{ width:100%; } .logo{ width:100%; margin-top: 50px; } } } .category.news{ background-image: url(../images/common/category_news.png); background-position: center center; background-repeat: no-repeat; background-size: 69px 25.5px; padding: 5px 35px; } .category.report{ background-image: url(../images/common/category_report.png); background-position: center center; background-repeat: no-repeat; background-size: 69px 25.5px; padding: 5px 35px; } .category.result{ background-image: url(../images/common/category_result.png); background-position: center center; background-repeat: no-repeat; background-size: 69px 25.5px; padding: 5px 35px; } .footer-container{ footer { color: white; padding: 0 0 20px; ul.banner { padding-left: 0; li { display: block; a{ padding: 5px; } } li.gazoo { padding-right: 0; } li.logo { a{ padding-top: 70px; padding-left: 15px; background-image: url(../images/common/car_side.png); background-position: center 20px; background-repeat: no-repeat; background-size: 130px auto; display: inline-block; } } } } } } @media only screen and (min-width: 768px) { .main{ article{ header{ background-image: url(../images/common/car_back.png); background-position: center 0; background-repeat: no-repeat; background-size: auto 260px; h1 { font-size: 1.2em; text-align: center; font-weight: normal; margin-bottom: 5px; margin-top: 25px; } .catch { font-size: 1.2em; text-align: center; font-weight: normal; margin-bottom: 25px; margin-top: 5px; } p { font-size: 0.9em; } .next_info{ background: rgba(255,255,255,0.15); text-align: center; margin: 5px auto; font-size: 46px; height: inherit; line-height: 78px; width: 100%; img{ height: 36px; margin-top: -12px; padding-right: 3px; } } } .entries_top{ letter-spacing: -.40em; padding-left: 0; list-style: none; margin-left: -15px; margin-right: -15px; li{ display: inline-block; letter-spacing: normal; width: 50%; a{ padding-left: 15px; padding-right: 15px; display: block; .thumb{ height: 215px; overflow: hidden; img{ height: auto; width: 100%; } } } } } .entries_info{ margin-top: 50px; .date{ padding-left: 10px; } h2{ text-align: left; background: rgba(255,255,255,0.15); padding: 15px; font-size: 22px; } } .entries{ padding-left: 0; list-style: none; letter-spacing: -.40em; margin-left: -15px; margin-right: -15px; li{ display: inline-block; letter-spacing: normal; width: 33.3%; vertical-align: top; a{ display: block; padding: 5px 15px; font-size: 0.9em; text-decoration: none; color:@color_FG; .thumb{ height: 193px; overflow: hidden; img{ height: auto; } margin-bottom: 10px; } .date{ padding-left: 16px; padding-right: 16px; } .title{ text-decoration: underline; display: block; line-height: 1.5; text-align: left; margin-top: 10px; } &:hover{ .thumb{ img { } } } } } .first{ width: 100%; a{ .thumb_wrap{ letter-spacing: -.40em; .thumb{ height: 225px; overflow: hidden; display: inline-block; letter-spacing: normal; width: 50%; img{ height: auto; width: 100%; } } } .date{ } .title{ display: inline-block; } } } } } h2.page-title{ background: rgba(255,255,255,0.15); margin: 30px 0 50px; padding: 15px; font-size: 2em; text-align: center; } .partner_list{ padding: 0; list-style: none; letter-spacing: -0.4em; li{ display: inline-block; letter-spacing: normal; width: 33.3%; margin-bottom: 50px; text-align: center; a{ display: inline-block; color: #fff; text-decoration: none; font-size: 15px; img{ display: block; margin: 0 auto; max-width: 100%; height: auto; transition: transform 0.1s linear; } p{ text-align: center; margin: 5px; } &:hover{ img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } } } } .gazoo{ width:100%; } .logo{ width:100%; margin-top: 50px; } } } .footer-container{ footer { color: white; padding: 0 0 20px; ul.banner { padding-left: 0; margin-top: 50px;; li { display: inline-block; a{ padding: 5px; } } li.gazoo { display: block; padding-right: 0; margin-bottom: 30px; } li.logo { display: block; margin-top: 30px; display: block; a{ padding-top: 70px; padding-left: 15px; background-image: url(../images/common/car_side.png); background-position: center 20px; background-repeat: no-repeat; background-size: 130px auto; display: inline-block; } } } } } } @media only screen and (min-width: 1000px) { .main{ article{ header{ background-image: url(../images/common/car_back.png); background-position: center 0; background-repeat: no-repeat; background-size: auto 260px; h1 { font-size: 1.2em; text-align: center; font-weight: normal; margin-bottom: 5px; margin-top: 25px; } .catch { font-size: 1.2em; text-align: center; font-weight: normal; margin-bottom: 25px; margin-top: 5px; } p { font-size: 0.9em; } .next_info{ background: rgba(255,255,255,0.15); text-align: center; margin: 5px auto; font-size: 60px; height: inherit; line-height: 85px; padding-bottom: 5px; width: 90%; img{ height: 50px; margin-top: -13px; padding-right: 3px; } } } .entries_top{ letter-spacing: -.40em; padding-left: 0; list-style: none; margin-left: -15px; margin-right: -15px; li{ display: inline-block; letter-spacing: normal; width: 50%; a{ padding-left: 15px; padding-right: 15px; display: block; .thumb{ height: 286px; overflow: hidden; img{ height: auto; width: 100%; } } } } } .entries{ padding-left: 0; list-style: none; letter-spacing: -.40em; margin-left: -15px; margin-right: -15px; li{ display: inline-block; letter-spacing: normal; width: 33.3%; vertical-align: top; a{ display: block; padding: 5px 15px; font-size: 0.9em; text-decoration: none; color:@color_FG; .thumb{ width: 321px; height: 214px; overflow: hidden; display: block; img{ width: 100%; height: auto; } margin-bottom: 10px; } .date{ padding-left: 16px; padding-right: 16px; } .title{ text-decoration: underline; display: block; line-height: 1.5; text-align: left; margin-top: 10px; margin-bottom: 15px; } &:hover{ .thumb{ img { } } } } } .first{ width: 100%; a{ .thumb_wrap{ letter-spacing: -.40em; .thumb{ width: 512px; height: 295px; overflow: hidden; display: inline-block; letter-spacing: normal; width: 50%; img{ width: 100%; height: auto; } } } .date{ } .title{ display: inline-block; } } } } } h2.page-title{ background: rgba(255,255,255,0.15); margin: 30px 0 50px; padding: 15px; font-size: 2em; text-align: center; } .partner_list{ padding: 0; list-style: none; letter-spacing: -0.4em; li{ display: inline-block; letter-spacing: normal; width: 33.3%; margin-bottom: 50px; text-align: center; a{ display: inline-block; color: #fff; text-decoration: none; font-size: 15px; img{ display: block; margin: 0 auto; transition: transform 0.1s linear; } p{ text-align: center; margin: 5px; } &:hover{ img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } } } } .gazoo{ width:100%; } .logo{ width:100%; margin-top: 50px; } } } .footer-container{ footer { color: white; padding: 0 0 20px; _ul.banner { padding-left: 0; margin-top: 0; li { display: inline-block; padding-top: 70px; a{ padding: 5px; } } li.gazoo { padding-right: 30px; display: inline-block; } li.logo { display: inline-block; padding-left: 15px; background-image: url(../images/common/car_side.png); background-position: center top; background-repeat: no-repeat; background-size: 130px auto; a{ padding-top: 0; padding-left: 0; background-image: none; display: inline-block; } } } } } } @media only screen and (min-width: 1140px) { .main{ article{ header{ background-image: url(../images/common/car_back.png); background-position: center 0; background-repeat: no-repeat; background-size: auto 260px; h1 { font-size: 1.2em; text-align: center; font-weight: normal; margin-bottom: 5px; margin-top: 25px; } .catch { font-size: 1.2em; text-align: center; font-weight: normal; margin-bottom: 25px; margin-top: 5px; } p { font-size: 0.9em; } .next_info{ background: rgba(255,255,255,0.15); text-align: center; margin: 5px auto; font-size: 60px; height: inherit; line-height: 85px; padding-bottom: 5px; width: 90%; img{ height: 50px; margin-top: -13px; padding-right: 3px; } } } .entries_top{ letter-spacing: -.40em; padding-left: 0; list-style: none; margin-left: -15px; margin-right: -15px; li{ display: inline-block; letter-spacing: normal; width: 50%; a{ padding-left: 15px; padding-right: 15px; display: block; .thumb{ width: 512px; width: auto; height: 332px; overflow: hidden; img{ width: 100%; height: auto; } } } } } .entries{ padding-left: 0; list-style: none; letter-spacing: -.40em; margin-left: -15px; margin-right: -15px; li{ display: inline-block; letter-spacing: normal; width: 33.3%; vertical-align: top; a{ display: block; padding: 5px 15px; font-size: 0.9em; text-decoration: none; color:@color_FG; .thumb{ width: 321px; height: 214px; overflow: hidden; img{ width: 100%; height: auto; } margin-bottom: 10px; } .date{ padding-left: 16px; padding-right: 16px; } .title{ text-decoration: underline; display: block; line-height: 1.5; text-align: left; margin-top: 10px; margin-bottom: 15px; } &:hover{ .thumb{ img { } } } } } .first{ width: 100%; a{ .thumb_wrap{ letter-spacing: -.40em; .thumb{ width: 512px; height: 332px; overflow: hidden; display: inline-block; letter-spacing: normal; width: 50%; img{ width: 100%; height: auto; } } } .date{ } .title{ display: inline-block; } } } } } h2.page-title{ background: rgba(255,255,255,0.15); margin: 30px 0 50px; padding: 15px; font-size: 2em; text-align: center; } .partner_list{ padding: 0; list-style: none; letter-spacing: -0.4em; li{ display: inline-block; letter-spacing: normal; width: 33.3%; margin-bottom: 50px; text-align: center; a{ display: inline-block; color: #fff; text-decoration: none; font-size: 15px; img{ display: block; margin: 0 auto; transition: transform 0.1s linear; } p{ text-align: center; margin: 5px; } &:hover{ img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } } } } .gazoo{ width:100%; } .logo{ width:100%; margin-top: 50px; } } } .footer-container{ footer { color: white; padding: 0 0 20px; _ul.banner { padding-left: 0; margin-top: 0; li { display: inline-block; padding-top: 70px; a{ padding: 5px; } } li.gazoo { padding-right: 30px; display: inline-block; } li.logo { display: inline-block; padding-left: 15px; background-image: url(../images/common/car_side.png); background-position: center top; background-repeat: no-repeat; background-size: 130px auto; a{ padding-top: 0; padding-left: 0; background-image: none; display: inline-block; } } } } } }