/* @font-face */ @font-face { font-family: 'DIN-Medium'; src: url('../fonts/DINWeb-Medium.eot?') format('eot'), url('../fonts/DINWeb-Medium.woff') format('woff'), url('../fonts/DINComp-Medium.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'DIN-Bold'; src: url('../fonts/DINWeb-Bold.eot?') format('eot'), url('../fonts/DINWeb-Bold.woff') format('woff'), url('../fonts/DINComp-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @blue: #0099cc; @green: #a0c11e; @red: #cc3301; @orange: #ff9933; @bluedark: #1c3762; @greendark: #5f7212; @reddark: #7d371f; @orangedark: #cc6600; @copy: #666666; .blue { color: @blue!important; } .green { color: @green; } .red { color: @red!important; } .orange { color: @orange!important; } .bg-blue { background-color: @blue!important; } .bg-green { background-color: @green!important; } .bg-red { background-color: @red!important; } .bg-orange { background-color: @orange!important; } .radius-5 { -border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .din-bold { font-family: 'DIN-Bold'; font-weight: bold; color: #333; } h1, h2, h3 { margin: 0; } h1 { font-size: 26px; color: #333; text-transform: uppercase; font-family: 'DIN-Bold'; line-height: 125%;} h2 { font-family: 'DIN-Medium'; font-weight: normal; line-height: 125%; } h3 { font-style: italic; color: #666666; font-weight: normal; font-size: 14px; font-family: Arial, Helvetica, sans-serif; text-transform: capitalize; } cufon { vertical-align: top!important; } p { line-height: 1.5; margin: 0 0 20px; } a { text-decoration: none; cursor: pointer; } a:hover {text-decoration: underline; } hr { height: 1px; background-color: #e5e5e5; width: 100%; margin: 20px 0 0 30px; padding: 0; float: left; border-top: none; } .view-more { a { color: #000; font-size: 12px; padding-right: 10px; text-transform: uppercase; font-weight: bold; margin-top: 10px; display: block; &.red { background: url('../img/view-more-arrow-red.png') no-repeat right center; } &.blue { background: url('../img/view-more-arrow-blue.png') no-repeat right center; } &.orange { background: url('../img/view-more-arrow-orange.png') no-repeat right center; } } } .square-link { font-family: 'DIN-Medium'; float: left; color: #fff!important; display: block; padding: 11px 10px 9px; margin-right: 5px; text-transform: uppercase; margin-top: 10px; border: 1px solid #333; .square-link-hover (@textcolor: #000) { color: @textcolor!important; background-color: transparent; text-decoration: none; } .square-link-color (@color: #000) { background-color: @color; border-color: @color; } &.blue { .square-link-color(@blue); } &.blue:hover { .square-link-hover(@blue); } &.green { .square-link-color(@green); } &.green:hover { .square-link-hover(@green); } &.red { .square-link-color(@red); } &.red:hover { .square-link-hover(@red); } &.orange { .square-link-color(@orange); } &.orange:hover { .square-link-hover(@orange); } } .container { width: 1020px; margin: 0 auto; padding: 22px 0 0; overflow: hidden; } .container-padding { padding: 0 30px; width: 960px; } #content-container { float: left; width: 100%; background-color: #f2f2f2; } header { float: left; width: 100%; .container-padding; .logo { float: left; display: block; margin: 41px 0 10px 0; } #utility { float: right; font-size: 12px; a { color: #777777; line-height: 20px; } } .fb-like { float: right; margin-right: -22px; margin-left: 5px; } nav { float: left; clear: right; margin-top: 36px; margin-left: 105px; @good-life-width: 185px; @active-life-width: 175px; @communities-width: 240px; .din-bold { font-size: 18px; } a { color: #777; text-transform: uppercase; text-decoration: none!important; display: block; padding: 10px 0 10px 10px; } a.main-nav {font-family: 'DIN-Medium'; font-weight: normal; line-height: 125%; background-color: #fff; color: #777; } a:last-child { margin-right: 0!important; } div { float: left; position: relative; ul { position: absolute; top: 55px; background-color: #fff; z-index: 100; display: none; li a { padding: 10px; color: #777!important; font-size: 12px; border: 1px solid #eee; border-top: none; } } } #good-life { a { width: @good-life-width - 70; } a.main-nav:hover, a.main-nav.hover {background-color: @orange; color: #fff; span {color: #fff !important;} } ul { width: @good-life-width; a { width: @good-life-width - 22; } a:hover { color: #fff!important; background-color: @orange; text-decoration: none!important; border-color: @orange!important; } } } #nav-active-life { a { width: @active-life-width - 50; } a.main-nav:hover, a.main-nav.hover {background-color: @blue; color: #fff; span {color: #fff !important;} } ul { width: @active-life-width; a { width: @active-life-width - 22; } a:hover { color: #fff!important; background-color: @blue; text-decoration: none!important; border-color: @blue!important; } } } #nav-communities { a { width: @communities-width - 90; } a.main-nav:hover, a.main-nav.hover {background-color: @red; color: #fff; span {color: #fff !important;} } ul { width: @communities-width; a { width: @communities-width - 22; } a:hover { color: #fff!important; background-color: @red; text-decoration: none!important; border-color: @red!important; } } } } #search { float: right; margin: 42px 0 0 0; clear: right; label { display: none; } input { float: left; border: none!important; } #s { width: 197px; height: 32px; padding-top: 10px; background: url('../img/search-box.jpg') no-repeat top left; font-size: 12px; color: #999999; font-family: Arial, Helvetica, sans-serif; padding: 0 0 0 15px!important; } #searchsubmit { background: url('../img/search-submit.jpg') no-repeat top left; text-indent: -9999px; width: 28px; height: 32px; padding: 0!important; } } } #gallery { float: left; img { float: left; } } #single-gallery { width: 730px; background-color: red; #gallery; } #left-sidebar { border-top: 5px solid #999933; width: 30px; background: #ffffff url('../img/left-sidebar-bg.png') no-repeat top right; display: block; float: left; height: 552px; &.single { border-top: none!important; } } .main-block { float: left; width: 730px; background-color: #fff; &.first { margin-top: -70px;/* background: url('../img/main-content-bg.png') no-repeat;*/ } } .sidebar { float: left; width: 290px; &.single { float: right!important; width: 290px; &.orange { h2 { color: @orange!important; font-family: 'DIN-Bold'; } #color-block { background-color: @orange; p { font-family: 'DIN-Bold'; } } } } &.red { #color-block { .bg-red; .tags { a { color: #a42609!important; background-color: #f16b55; border-color: #f16b55; } a:hover { background-color: #fff; text-decoration: none; } } } #twitter-feed h2 { color: @red!important; } } &.blue { #color-block { .bg-blue; .tags { a { color: #5d96b1!important; background-color: #def1fb; border-color: #def1fb; } a:hover { background-color: #fff; text-decoration: none; } } } #twitter-feed h2 { color: @blue!important; } } &.green { #color-block { .bg-green; } #twitter-feed h2 { color: @green!important; } } .driver {text-align: center; margin: 15px 0;} } .featured-post-meta { .view-more { float: right; a { margin-top: 0; } } .comments-share { float: left; text-transform: uppercase; font-size: 11px; color: #666; a { color: #666; text-decoration: underline; } a:hover { text-decoration: none;} } .date-author { float: left; margin-left: 20px; font-size: 10px; font-style: italic; margin-top: 1px; a { text-decoration: underline; color: #666; } a:hover { text-decoration: none; } } .square-link{ float: right; margin: -10px 0 0 0; } } #featured-post { padding: 20px 20px 20px; overflow: hidden; border-bottom: 1px solid #e5e5e5; margin: -70px 0 0 30px; background-color: #fff; .featured-post-meta; h1 { font-size: 44px; color: #333; text-transform: uppercase; margin-bottom: 5px; a { color: #333; } } } #most-popular { padding: 20px 20px 0 20px; overflow: hidden; .view-more { float: right; } .popular-story { float: left; width: 240px; margin-top: 15px; img { width: 100%; height: 75px; float: left; border-bottom: 5px solid @orange; } h2 { font-size: 16px; text-transform: uppercase; float: left; padding-top: 10px; a { color: #333; } } p { font-size: 11px; margin-bottom: 0; clear: left; } &.big { width: 400px; margin-right: 20px; img { height: 130px; margin-bottom: 0; } .info { padding: 0 0 20px; overflow: hidden; clear: left; h2 { font-size: 24px; margin-bottom: 0px; padding-top: 20px; a { font-size: 24px; color: #333; } } p { font-size: 14px; } a { font-size: 11px; color: @copy; } .meta { float: left; color: #666666; font-style: italic; font-size: 10px; margin-top: 20px; line-height: 1; /*width: 250px;*/ a { text-decoration: underline; } a:hover { text-decoration: none; } } .read-more { float: left; margin-top: 20px; line-height: 1; font-size: 11px; text-transform: uppercase; a { text-decoration: underline;} a:hover { text-decoration: none;} } } } } } #active-life { margin: 20px 0 0 50px; width: 251px; float: left; h1 {font-size: 24px; } img { margin-top: 20px; width: 100%; float: left; border-bottom: 5px solid @blue;} h2 { font-size: 16px; text-transform: uppercase; float: left; padding-top: 10px; color: #333; } p { color: #666; font-size: 11px; margin-bottom: 0; clear: left; } .view-more { margin: 20px 20px 0 0; float: left; } } #tour { float: left; width: 389px; margin: 24px 20px 0 20px; h2 { font-size: 20px; text-transform: capitalize; color: #333; } h3 { text-transform: none; } .embed { margin-top: 20px; width: 100%; } a { font-size: 12px; color: #333333; display: block; width: 100%;} #youtube-embed { background: #ebebeb url(../img/youtube-logo.jpg) no-repeat bottom right; overflow: hidden; margin: 20px 0; p { margin: -2px 0 0 10px; display: block; line-height: 28px; height: 30px;} } } #ask { float: right; width: 389px; margin: 0 20px 20px 20px; h2 { font-size: 20px; text-transform: capitalize; color: #333; } h3 { text-transform: none; } p { margin: 10px 0 0 0; height: 29px; .radius-5; } } #communities { padding: 20px 20px 20px 50px; overflow: hidden; float: left; h3 { text-transform: none; } #flickrgallery { margin-top: 20px; float: left; background-color: #EBEBEB; text-align: center; width: 418px; margin-right: 20px;} #images {min-height: 300px;} #images #img-full {display:block; width: 418px;} #images img.thumb {margin: 5px; width: 73px;} #flickr {font-size: 11px; text-align: left; padding: 0 0 5px 5px;} h4, ul { float: right; width: 220px; margin-left: 20px; clear: right; } h4 { color: @red; padding: 0; margin: 20px 0 5px 0; font-size: 12px; text-transform: uppercase; } ul { list-style: none; padding: 0; margin: 0; li { float: left; width: 100%; font-size: 12px; padding-bottom: 5px; a { color: #111010; text-decoration: none; } a:hover { text-decoration: underline; } } } } .sidebar-div { overflow: hidden; padding: 20px 20px 20px 60px; background-color: #f2f2f2; .icon { width: 25px; height: 25px; margin-left: -40px; float: left;} h2 { color: @green; font-size: 18px; text-transform: uppercase; } h3 { font-size: 12px; color: #333; margin: 10px 0; } } .sidebar-ul { ul { list-style: none; margin: 0; padding: 0; float: left; li { float: left; width: 100%; padding: 8px 0; border-bottom: 1px solid #e1d8c7; a { color: #999; font-weight: bold; font-size: 12px; margin: 0; text-transform: none; } } } a { font-size: 12px; color: #777; float: left; margin-top: 15px; margin-bottom: 0; text-transform: uppercase; font-weight: bold; } } #events { overflow: hidden; background-color: @green!important; background: url('../img/sidebar-left-shadow.png') repeat-y top left; .sidebar-div; padding-top: 28px!important; padding-right: 0!important; .sidebar-ul; position: relative; h2, h3, ul li a { color: #fff!important; } h2 { letter-spacing: -0px; } a { color: #333333; } h3 { margin-right: 20px; } ul li { border-color: #fff; a { margin-right: 20px; } } .icon { background: url(../img/icon-side-events.png) no-repeat; } a.more-events {color: @greendark; padding-right: 25px; background: url(../img/arrow-green.png) no-repeat 100% 50%;} &.blue { .bg-blue; ul li { border-color: #fff; } a { color: #1c3762; } a.more-events {color: @bluedark; background-image: url(../img/arrow-blue.png);} } &.red { .bg-red; a.more-events {color: @reddark; background-image: url(../img/arrow-red.png);} } &.orange { .bg-orange; a.more-events {color: @orangedark; background-image: url(../img/arrow-orange.png);} } } #facebook { .sidebar-div; background: #f2f2f2 url('../img/icon-home-facebook.png') no-repeat 20px 20px; padding-bottom: 10px!important; .fb-activity { padding: 5px; background-color: #fff; } } #newsletter { .sidebar-div; .icon { background: @green url('../img/icon-side-newsletter.png') no-repeat 0 0;} input { border: none; } #email { float: left; width: 162px; height: 34px; background: url(../img/newsletter-input-bg.jpg) no-repeat; font-size: 10px; color: #999999; padding: 0 0 0 15px!important; } #submit { float: left; width: 30px; height: 34px; background: url(../img/newsletter-submit.png) no-repeat; text-indent: -9999px; } } #color-block { .sidebar-div; .sidebar-ul; color: #fff!important; &.events-contests {background: url('../img/icon-right-eventsandcontests.png') no-repeat 20px 20px;} &.food-wine {background: url('../img/icon-right-foodandwine.png') no-repeat 20px 20px;} &.health-wellness {background: url('../img/icon-right-healthandwellness.png') no-repeat 20px 20px;} &.home-garden {background: url('../img/icon-right-homeandgarden.png') no-repeat 20px 20px;} &.travel-leisure {background: url('../img/icon-right-travelandleisure.png') no-repeat 20px 20px;} h2, h3, a { color: #fff!important; } a { font-weight: normal!important; } p { margin-bottom: 0px; margin-top: 15px; opacity: 0.8; float: left; } li { border-color: #e6bc8e!important; } .tags { p { width: 100%; } a { display: block; float: left; text-transform: lowercase!important; color: #cc6600!important; background-color: #ffcc99; padding: 3px 8px; margin-right: 5px; border: 1px solid #ffcc99; .radius-5; font-size: 12px; margin-top: 0!important; margin-bottom: 5px; } a:hover { background-color: #fff; text-decoration: none; } } } #twitter-feed { .sidebar-div; padding-right: 0!important; padding-left: 50px!important; .icon { background: @green url('../img/icon-side-twitter.png') no-repeat 0 0; margin-left: -30px;} h2 { margin-left: 10px; } .twtr-doc { width: 238px!important; background: none!important; } .twtr-hd, .twtr-ft { display: none; } .twtr-bd { padding: 0!important;} .twtr-timeline { height: auto!important; background: none!important; } .twtr-tweet-wrap { padding: 10px!important; } .twtr-tweet { border-bottom: 1px solid #e1e1e1!important; } .twtr-tweet em a { color: #999999!important; } .follow-us { margin-top: 20px; margin-left: 10px; } .twtr-avatar { display: none!important; } .twtr-tweet-text { margin-left: 0!important; } .twtr-new-results { display: none; } } #ask-form { float: left; width: 100%; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #e5e5e5; p { margin-bottom: 0; } label, input, textarea { margin-top: 20px; } label { margin-top: 18px; } label { float: left; width: 110px; font-style: italic; margin-right: 10px; } input, textarea { float: left; width: 176px; border: 1px solid #cccccc; margin-right: 30px; } textarea { width: 504px; } input.wpcf7-submit { border-color: @blue!important; float: right; width: auto!important; margin-right: 30px; } .wpcf7-form-control-wrap { position: relative; float: left; } .wpcf7-not-valid-tip-no-ajax { position: absolute; top: 39px; left: 0px; font-size: 11px; color: @red; } .wpcf7-response-output { clear: left; float: right; padding: 12px 10px 11px; color: white; margin-top: 20px; font-size: 12px; margin-right: 10px; } .wpcf7-validation-errors { .bg-red; } .wpcf7-mail-sent-ok { .bg-green; } .captcha-image {float: left; margin: 20px 20px 0 0;} } #faq { ul { margin: 0; padding: 0; list-style: none; } li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee; } h3 { font-size: 14px; font-style: normal; font-weight: bold; cursor: pointer; padding-right: 10px; background: url(../img/faq-arrow.jpg) no-repeat right center; float: left; } h3.open { background: url(../img/faq-arrow-down.jpg) no-repeat right center; } #acc .acc-section { overflow:hidden; background:#fff; clear: left; } #acc .acc-content { padding-top: 10px; } p { margin-bottom: 0; } } /* * SINGLE STYLES */ #content { padding: 20px 20px 0; overflow: hidden; margin: -70px 0 0 30px; background-color: #fff; h1 { font-size: 44px; color: #333; text-transform: uppercase; margin-bottom: 5px; a { color: #333; } } .date-author { float: right; margin: 5px 0 0 20px; font-size: 10px; font-style: italic; text-align: right; a { text-decoration: underline; } a:hover { text-decoration: none; } } img { margin: 20px; &.alignright {float: right} &.alignleft {float: left} &.aligncenter { display: block; margin-left: auto; margin-right: auto; } } iframe { margin: 20px 0 20px 120px; width: 420px; } } #post-share { float: left; margin-left: 50px; padding-top: 5px; width: 435px; .share-menu { float: left; margin-right: 20px; text-transform: uppercase; font-size: 11px; color: #666; } .fb-like, .twitter { float: left; } } #tags { float: left; margin-top: 20px; clear: left; p { float: left; margin-right: 5px; font-size: 10px; margin-top: 5px; color: #777!important; } a { display: block; float: left; text-transform: lowercase!important; color: #5d96b1!important; background-color: #def1fb; padding: 3px 8px; margin-right: 5px; border: 1px solid #def1fb; .radius-5; font-size: 12px; margin-top: 0!important; margin-bottom: 5px; } a:hover { background-color: #fff; text-decoration: none; } &.orange { a { color: #cc6600!important; background-color: #ffcc99; border-color: #ffcc99; } a:hover { background-color: #fff; text-decoration: none; } } &.red { a { color: #cc6600!important; background-color: #ffcc99; border-color: #ffcc99; } a:hover { background-color: #fff; text-decoration: none; } } } #post-nav { float: right; width: 222px; margin-right: 20px; a { color: #fff; margin-top: 0; float: right; margin-right: 5px; } /* .prev a { padding-left: 20px; background: url('../img/view-more-arrow-white-left.png') no-repeat 10px 13px; } .next a { padding-right: 20px; background: url('../img/view-more-arrow-white-right.png') no-repeat 96px 13px; }*/ } #comments { margin-left: 50px; margin-top: 30px; margin-bottom: 20px; float: left; } /* * CATEGORY PAGE STYLES */ .category-item { float: left; width: 730px; overflow: hidden; &.events-contests .content {background: url('../img/icon-cat-events.png') no-repeat 655px 20px;} &.food-wine .content {background: url('../img/icon-cat-foodandwine.png') no-repeat 655px 20px;} &.health-wellness .content {background: url('../img/icon-cat-healthandwellness.png') no-repeat 655px 20px;} &.home-garden .content {background: url('../img/icon-cat-homeandgarden.png') no-repeat 655px 20px;} &.travel-leisure .content {background: url('../img/icon-cat-travelandleisure.png') no-repeat 655px 20px;} .wp-post-image { float: left; } /*#left-sidebar { max-height: 140px; }*/ .content { padding: 20px 20px 0; overflow: hidden; margin-top: -130px; background-color: #fff !important; margin-left: 30px; .featured-post-meta; padding-bottom: 20px; /*border-bottom: 1px solid #e5e5e5; margin-bottom: 20px; */ h1 { font-size: 44px; color: #333; text-transform: uppercase; margin-bottom: 5px; padding-right: 30px; a { color: #333; } } } #item-img { display: block; min-height: 240px; } .comments-share, .date-author { margin-bottom: 0; a { text-decoration: underline;} a:hover { text-decoration: none;} } } .green-cat .category-item { &.events-contests .content {background: url('../img/icon-search-eventsandcontest.png') no-repeat 655px 20px;} &.food-wine .content {background: url('../img/icon-search-foodandwine.png') no-repeat 655px 20px;} &.health-wellness .content {background: url('../img/icon-search-healthandwellness.png') no-repeat 655px 20px;} &.home-garden .content {background: url('../img/icon-search-homeandgarden.png') no-repeat 655px 20px;} &.travel-leisure .content {background: url('../img/icon-search-travel.png') no-repeat 655px 20px;} } .red-cat .category-item { &.events-contests .content {background: url('../img/icon-cat-community-eventsandcontests.png') no-repeat 655px 20px;} &.food-wine .content {background: url('../img/icon-cat-community-foodandwine.png') no-repeat 655px 20px;} &.health-wellness .content {background: url('../img/icon-cat-community-healthandwellness.png') no-repeat 655px 20px;} &.home-garden .content {background: url('../img/icon-cat-community-homeandgarden.png') no-repeat 655px 20px;} &.travel-leisure .content {background: url('../img/icon-cat-community-travelandleisure.png') no-repeat 655px 20px;} } /* * PAGE STYLES */ .page-item { float: left; width: 730px; overflow: hidden; .content { padding: 20px 20px 0; overflow: hidden; margin-top: -200px; background-color: #fff; margin-left: 30px; margin-bottom: 20px; min-height: 727px; h1 { font-size: 44px; color: #333; text-transform: uppercase; margin-bottom: 5px; a { color: #333; } } } #item-block { display: block; background-color: red; min-height: 240px; &.blue { .bg-blue; } &.red { .bg-red; } &.green { .bg-green; } &.orange { .bg-orange; } } } /* * SEARCH RESULTS STYLES */ #search-header {background-color: @green; padding: 20px 20px 12px 20px; h2 {text-transform: uppercase; color: #333; span {color: #fff !important;} } } /* * FOOTER STYLES */ footer { background-color: #e5e5e5; float: left; width: 100%; display: block; padding-bottom: 20px; .container { padding-left: 50px; padding-top: 0!important; } #archive-nav { margin-top: 30px; width: 200px; border-right: 1px solid #cfcece; overflow: hidden; float: left; ul { margin: 0; padding: 0; list-style: none; a { padding: 10px 0 10px 18px; display: block; border-bottom: 1px solid #dfdfdf; font-size: 14px; color: #040404; font-weight: bold; } a:hover { text-decoration: underline; } li:first-child a { padding-top: 0; } } #footer-share { margin-top: 0px; overflow: hidden; padding-left: 20px; float: left; p { color: #111010; margin-bottom: 10px; font-size: 11px; margin-top: 20px; } a { float: left; display: block; margin-right: 5px; width: 26px; height: 26px; text-indent: -999999px; &.facebook { background: url('../img/icon-footer-facebook.png') no-repeat top left; } &.twitter { background: url('../img/icon-footer-twitter.png') no-repeat top left; } &.youtube { background: url('../img/icon-footer-youtube.png') no-repeat top left; } &.rss { background: url('../img/icon-footer-rss.png') no-repeat top left; } &.flickr { background: url('../img/icon-footer-flickr.png') no-repeat top left; } } } } #footer-nav { float: left; width: 520px; margin: 30px 0 0 0; h2 { font-size: 14px; float: left; color: #111010; font-weight: normal; } ul { padding: 0; float: left; margin: 0 0 0 20px; list-style: none; li { margin-bottom: 5px; a { color: #666666; margin-bottom: 5px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; } } } } #footer { float: right; width: 200px; margin-top: 20px; margin-right: 55px; img { margin: 10px 0 40px 20px; } p { font-size: 11px; color: #666; font-family: Arial, Helvetica, sans-serif; a { color: @green; } } } }