@charset "UTF-8"; /** * @import */ @import '../trendpress/assets/css/default.css'; @import 'assets/less/formalize.less'; @import 'assets/less/mixins.less'; /** * @variables */ @body-background: #FFFFFF; @text-color: #4D4D4D; @heading-color: #4C4C4C; @link-color: #C6AF7F; @border-color: #D9D9D9; @primary-color: #CAB287; @secondary-color: #050600; @text-font: 'Helvetica Neue', sans-serif; @heading-font: 'Merriweather', sans-serif !important; /** * @mixins */ .border-box { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .rotate(@deg) { -webkit-transform: rotate(@deg); -moz-transform: rotate(@deg); -o-transform: rotate(@deg); -ms-transform: rotate(@deg); transform: rotate(@deg); } .animate(@what, @speed, @ease) { -webkit-transition: @what @speed @ease; -moz-transition: @what @speed @ease; -o-transition: @what @speed @ease; -ms-transition: @what @speed @ease; transition: @what @speed @ease; } /** * @typography */ body { background: @body-background; color: @text-color; font-family: @text-font; font-size: 14px; line-height: 1.75; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; // links a { color: @link-color; text-decoration: underline; &:hover { color: darken(@link-color, 17.5%); text-decoration: underline; } } // headings h1, h2, h3, h4, h5, h6 { color: @heading-color; font-family: @heading-font; line-height: 1.25; a { text-decoration: none; &:hover { text-decoration: underline; } } } h1 { font-size: 40px; font-weight: 400; margin: 12px 0; } h2 { font-size: 30px; font-weight: 400; margin: 12px 0; } h3 { font-size: 22px; font-weight: 400; margin: 12px 0; } h4 { font-size: 18px; margin: 12px 0; } h5 { font-size: 16px; margin: 0 0 12px 0; } h6 { font-size: 14px; margin: 0 0 12px 0; } // regular text p, ul, ol, address { margin: 0 0 24px 0; &:last-child { margin-bottom: 0; } } ul, ol { line-height: 24px; list-style-position: outside; margin: 0 0 24px 24px; ul, ol { margin-bottom: 0; } } ul { list-style-type: square; } pre { color: #000; padding: 24px; margin-bottom: 24px; } } // selection ::selection { background-color: @link-color; color: #fff; text-shadow: none; } ::-moz-selection { background-color: @link-color; color: #fff; text-shadow: none; } // forms ::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder { color: #b2b2b2 !important; } /** * @wysiwyg styles */ .cta { .box-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); .border-radius(3px); display: inline-block; font-size: 16px; font-weight: 400; height: 40px; line-height: 40px; padding: 0 20px; position: relative; text-decoration: none; &.primary { .vertical-gradient(#CEB989, #B6975D); color: #FFF; text-shadow: 0 1px 0 #937D53; &:hover { .vertical-gradient(lighten(#CEB989, 5%), lighten(#B6975D, 5%)); } &:active, &:focus { .vertical-gradient(lighten(#B6975D, 5%), lighten(#CEB989, 5%)); } } &.secondary { .vertical-gradient(#f0f0f0, #e8e8e8); color: #4d4d4d; text-shadow: 0 1px 0 #FFF; &:hover { color: #000 !important; .vertical-gradient(lighten(#f0f0f0, 5%), lighten(#e8e8e8, 5%)); } &:active, &:focus { .vertical-gradient(lighten(#e8e8e8, 5%), lighten(#f0f0f0, 5%)); } } &.arrow { background: #FFF url('assets/img/search-header-bg.png') repeat-x top right; padding-right: 55px; &:hover { background: #FFF url('assets/img/search-header-bg.png') repeat-x bottom right; } } &:hover { color: #FFF; text-decoration: none; .box-shadow(0 0 3px rgba(0, 0, 0, 0.25)); } &:active { top: 1px; } } .more-link { text-decoration: underline; &:after { content: ' \00bb'; } } .more { font-weight: bold; } .prev-post, .next-post { margin: 0; width: 40%; } .prev-post { float: left; } .next-post { float: right; text-align: right; } .share-and-back { clear: both; float: left; position: relative; margin: 20px 0 60px 0; width: 100%; .back-link { float: left; font-weight: bold; position: absolute; top: 8px; width: 75%; .left { float: left; } .right { float: right; } } .share { float: right; position: absolute; right: 10px; p { margin-top: -4px;} } p { display: inline-block; float: left; padding-right: 10px; } .addthis_toolbox { float: right;} } .arrow-list { .remove-list; li { .animate(background, 0.2s, ease-in-out); background: url('assets/img/gold-arrow.gif') no-repeat 16px 12px; display: block; line-height: 35px; overflow: hidden; padding-left: 35px; position: relative; text-overflow: ellipsis; white-space: nowrap; &:hover { background-position: 18px 12px; } &:last-child { border-bottom: none; } a { color: @text-color; text-decoration: none; &:hover { color: @link-color; text-decoration: underline; } } ul { margin-bottom: 10px; padding-top: 10px; li { background: none; line-height: 26px; padding-left: 0; text-indent: 0; } } } } /** * @images */ img.alignleft, img.alignright { margin-top: 6px; margin-bottom: 12px; } img.size-thumbnail, .wp-caption { background: #F7F7F7; border: 1px solid @border-color; padding: 4px; .wp-caption-text { font-size: 12px; } } /** * @classes */ .remove-list { list-style-type: none; margin: 0; padding: 0; } /** * @lay-out */ body { background: #040409; } // header #header { background: @body-background; color: @text-color; height: 130px; a { color: @text-color; } #logo { margin: 16px 0 23px 10px; a { position: relative; &:active { top: 1px; } } } #search { margin-top: 44px; margin-left: -23px; form { float: right; position: relative; input[type="text"], input[type="submit"] { display: block; float: left; height: 28px; &:focus, &:active { .box-shadow(none); } } input[type="text"] { .border-radius(1px); border: 1px solid @border-color; color: #b2b2b2; font-style: @text-font !important; font-style: italic; font-size: 16px; font-weight: 200 !important; height: 38px; line-height: 38px; margin: 0 -43px 0 0 !important; margin-top: 0 !important; padding-left: 40px; width: 300px; &:focus { color: @text-color; } } input[type="submit"] { .border-radiuses(3px, 3px, 0, 0); background: #FFFFFF url('assets/img/search-submit.png') no-repeat center center; border: none; height: 33px; left: 2px; position: absolute; text-transform: uppercase; text-indent: -999999px; top: 2px; width: 38px; } } } } // main-nav #mainnav { background: #000 url('assets/img/blurred-background.png') no-repeat top center; height: 60px; margin: 0; .mainnav-wrap { background: url('assets/img/menu-ul-bg.png'); clear: both; float: left; height: 60px; position: relative; z-index: 99999999; width: 100%; } ul { .remove-list; margin-left: -5px; li { display: inline; line-height: 60px; &:hover, &.hover { background: url('assets/img/menu-ul-bg.png'); a { color: @link-color; } } a { color: #FFF; display: block; float: left; padding: 0 15px !important; &:hover, &.hover { color: @link-color; text-decoration: none; } } ul { background: #000; margin-top: 20px; margin-left: 0; padding: 10px 0; width: 240px; li { line-height: 34px; } ul { margin-left: 100px; } } ul li a, ul ul li a, ul ul ul li a { .border-box; color: #FFF !important; padding: 0 0 0 15px; text-transform: none; width: 100%; &:hover { color: @link-color !important; } } } } li.current-menu-item a, li.current_page_item a, li.current-menu-parent a { color: @link-color !important; } ul > li a { font-size: 15px; font-weight: 400; letter-spacing: 0.1em; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); text-transform: uppercase; } select { width: auto; } } .sidebar { &.horizontal { padding-bottom: 20px !important; .widget { clear: none !important; float: left; margin: 10px; padding: 15px 20px 0 20px; width: 230px !important; ul { margin-left: 30px !important; } &.widget-text-image-button { padding: 0; height: 360px; width: 300px !important; .featured-widget-image { .rotate(0deg); .box-shadow(0 0 6px rgba(0, 0, 0, 0.5)); border: 5px solid #FFF; float: left; height: auto !important; overflow: visible !important; left: -10px !important; width: 290px !important; top: 0 !important; img { .rotate(-2.5deg); .box-shadow(0 0 6px rgba(0, 0, 0, 0.65)); border: 5px solid #FFF; display: block; float: left; margin-left: -5px; width: 290px; } } .content-wrap { left: 15px; position: absolute; top: 225px !important; h2 { font-size: 22px; } p { margin-bottom: 15px; } .cta.primary { background: #FFF url('assets/img/search-header-bg.png') repeat-x top right; padding-right: 55px; &:hover { background-position: bottom right; } } } } } } .widget { font-size: 13px; margin: 0 0 20px 0; .widgettitle { font-size: 22px; margin-top: 0; } ul { .remove-list; li { border-bottom-style: solid; border-bottom-width: 1px; display: block; line-height: 2; a { display: block; } } ul li { border: none; text-indent: 14px; } } .phone { .border-box; background: url('assets/img/telephone.png') no-repeat center left; display: block; font-family: @heading-font; font-size: 17px; font-weight: 700; padding-left: 50px; text-align: left; width: 100%; } p.small { font-size: 12px; font-style: italic; } } } #main { background: #F5F5F5; padding-top: 13px; padding-bottom: 40px; #content { width: 660px; padding-top: 3px; padding-bottom: 20px; input[type="submit"] { .box-shadow(none) !important; background: @primary-color; border-color: 1px solid @primary-color; color: #FFF; font: bold 13px "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 6px 18px; text-shadow: 0 1px 0 darken(@primary-color, 12.5%); } .article-title { font-size: 22px; font-weight: 800; margin-bottom: 0; } .search-title { font-size: 26px; } .page-title { font-size: 30px; } .meta { color: lighten(@text-color, 20%); font-size: 13px; margin: 6px 0 18px 0; } } .sidebar { width: 260px; padding: 7px 0 0 0; margin-top: 22px; margin-bottom: 10px; .widget { clear: both; float: left; margin-bottom: 40px; width: 240px; ul, li { border-color: #CCC; } &.submenu { h3 { font-size: 19px; } } &.widget-find-artists { strong { display: none; } ul { .arrow-list; } ul ul { padding-top: 0 !important; } .categories { clear: both; float: left; height: auto; width: 100%; li { .border-box; display: block; width: 100%; a { font-family: @heading-font; font-weight: 700; font-size: 14px !important; } } } .search { clear: both; float: left; height: auto; margin: 0 0 10px 0; position: relative; width: 240px; input[type="text"] { border: 1px solid @border-color; color: #b2b2b2; font-family: @text-font !important; font-weight: 200; font-size: 15px; font-style: italic; height: 42px; padding-left: 40px; width: 240px; &:focus { color: @text-color; } } input[type="submit"] { background-color: transparent; background: #FFF url('assets/img/search-submit.png') no-repeat 12px 10px; border: none; display: block; height: 35px; left: 2px; position: absolute; top: 2px; margin-top: 0 !important; text-indent: -999999px; text-transform: uppercase; width: 35px; &:focus, &:active { .box-shadow(none) !important; } } } .budget { clear: both; float: left; margin-bottom: 20px; border: 1px solid @border-color; background: #FFF url('assets/img/select-background.png') no-repeat top right; display: block; float: left; overflow: hidden; padding-left: 0; height: 40px; text-indent: 5px; width: 240px; select { background: transparent !important; border: none; color: #888888; display: block; font-family: @text-font !important; font-weight: 200; font-size: 15px; font-style: italic; height: auto; line-height: auto; padding-top: 11px; padding-left: 13px; width: 120%; &:focus, &:active { .box-shadow(none) !important; } &:focus, &:active { outline: none !important; } } } } &.widget_tag_cloud { a { font-weight: bold; text-decoration: none; &:hover { text-decoration: none; } } } &.widget_categories, &.widget_archive, &.submenu { ul { .arrow-list; } } &.widget_reallysimpletwitterwidget { margin-top: 19px; ul { margin: 26px 0 0 0 !important; li { .border-radius(0px 0px 0px 0px); background: #F5F5F5; padding: 12px 15px; position: relative; line-height: 25px; min-height: 60px; img { float: right; margin: 5px 0 10px 10px; .border-radius(999px); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } a { display: inline; } &:first-child { padding: 15px 15px 12px 15px; .border-radius(5px 5px 0px 0px); } &:last-child { padding: 12px 15px 15px 15px; .border-radius(0px 0px 5px 5px); border: none; &:after { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(245, 245, 245, 0); border-top-color: #F5F5F5; border-width: 10px; left: 30px; } } } } .rstw_link_user { display: block; margin-top: 20px; } } &.widget_nav_menu, &.widget_recent_entries { h3 { line-height: 35px; padding-top: 5px; text-indent: 30px; } ul { .arrow-list; } } &.widget_recent_entries h3 { background: url('assets/img/date-ico.gif') no-repeat center left; } &.widget_nav_menu h3 { background: url('assets/img/star-ico.gif') no-repeat center left; } &.widget-text-image-button { .inner { position: relative; } .featured-widget-image { position: absolute; height: 180px; left: -40px; overflow: hidden; top: -31px; width: 300px; } .content-wrap { position: absolute; top: 170px; } } } } } #footer { background: #040409; color: #FFFFFF; font-size: 13px; padding: 50px 0 20px 0; a { color: #FFFFFF; } h4 { color: @link-color; font-size: 22px; margin-left: 10px; } aside { float: left; margin: 0; width: 100%; ul { .remove-list; li { display: inline; a { float: left; margin: 0 10px; width: 220px; text-decoration: none; &:hover { color: @link-color; text-decoration: underline; } } } } } } #credits-sitemap { font-size: 13px; padding: 12px 0 30px 0; * { color: #7d7d7f; } a { color: #7d7d7f; text-decoration: none; &:hover { color: @link-color; text-decoration: underline; } } #copyright { float: left; } #footernav { float: right; ul { .remove-list; li { display: inline; &:last-child a, &.last-child a { padding-right: 0; } a { float: left; padding: 0 5px; } } } } } /** * @specific-layout */ // home .home { .sidebar.twelvecol { width: 940px !important; } #sub-header { padding-bottom: 50px; .container-inner { width: 962px; } } #main { background: #FFF; padding-bottom: 0 !important; } } #sub-header { background: #030301 url('assets/img/blurred-background-60.png') no-repeat top center; * { text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); } h1, h2 { color: #FFF; line-height: 1.2; font-weight: 400; } h1 { color: #FFF; } #introduction { float: left; margin-left: 10px; width: 447px; h1 { margin-top: 60px; } ul { .remove-list; margin-top: 26px; li { font-size: 22px; } a { background: url('assets/img/gold-bullet.png') no-repeat 0 20px; color: #FFF; display: block; float: left; line-height: 50px; padding-left: 30px; text-decoration: none; width: 180px; &:hover { color: @link-color; text-decoration: underline; } } } } #breadcrumbs { color: #FFF; padding: 5px 0; * { color: #FFF; font-size: 13px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } strong { font-weight: normal; } } #slider { background: url('assets/img/slider-bg.png') no-repeat top left; float: left; height: 369px; margin-top: 56px; margin-left: 13px; position: relative; width: 492px; .slide { float: left; position: absolute; height: 319px; overflow: hidden; margin: 20px 0 0 20px; width: 453px; } .caption { display: none; } .cycle-prev, .cycle-next { cursor: pointer; height: 40px; opacity: 0.8; position: absolute; text-indent: -999999px; top: 160px; width: 40px; z-index: 999999; &:hover { opacity: 1; } } .cycle-prev { background: url('assets/img/slider-prev.png') no-repeat top left; left: -20px; } .cycle-next { background: url('assets/img/slider-next.png') no-repeat top left; right: -20px; } img { display: block; float: left; margin: 0; height: auto; width: 453px; } } #homesearch { margin-top: 30px; h2 { float: left; margin-left: 0; margin-top: 12px; width: 180px; } form { float: left; margin-left: 16px; input[type="text"] { .border-radiuses(0, 0, 3px, 3px); background: #FFF url('assets/img/search-submit.png') no-repeat 12px 11px; border: none; color: #b2b2b2; float: left; font-family: @text-font !important; font-weight: 400 !important; font-size: 15px; font-style: italic; margin-top: 10px; height: 40px; line-height: 40px; padding-left: 40px; text-shadow: none; width: 547px; &:focus { color: @text-color; } } input[type="submit"] { .border-radius(0); background-color: transparent; background: url('assets/img/search-header-bg.png') no-repeat top right; border: none; font-family: 'Helvetica Neue', sans-serif !important; font-weight: 100 !important; color: #FFFFFF; float: left; font-size: 16px; letter-spacing: 0.15em; height: 40px; margin-top: 10px; padding-left: 30px; padding-right: 60px; width: auto; } } p { clear: both; color: #FFF; float: left; font-style: italic; font-size: 16px; margin-left: 260px; width: 600px; } } } #sub-main { border-top: 1px solid #D9D9D9; background: #F5F5F5; padding: 60px 0 75px 0; #sub-content { float: left; margin-left: 10px; width: 610px; } aside.sidebar { float: right; margin-top: 15px; margin-right: 10px; width: 220px; } } .cta-block { clear: both; float: left; width: 100%; br { display: none; } .cta, .or, .other-option { float: left; margin: 0 15px 0 0; } .or { font-family: @heading-font; font-size: 20px; margin-top: 2px; } .cta { .arrow { display: none; } } .or, .other-option { height: 40px; line-height: 40px; } } // search - 404 .search-no-results, .error404 { #main .search { input[type="text"] { height: 1.85em; } input[type="submit"] { margin-top: 10px; } } } .search-results { h2 a, p { .search-highlight { background-color: @link-color; color: #FFF; padding: 1px 2px; text-shadow: none; } } } // index.php (and single.php) .news .post, #content.single { .meta { color: lighten(@text-color, 15%); a { color: @link-color; font-weight: bold; text-decoration: none; &:hover { color: @text-color; } } } .post-image { float: right; height: auto; width: auto; img { .box-shadow(0 0 2px rgba(0, 0, 0, 0.55)); border: 4px solid #FFF; display: block; float: left; height: auto; margin: 0 0 20px 20px; width: auto; } } } // index.php .news, .search-results { .post { border-bottom: 1px solid @border-color; margin: 20px 0 0 0; padding-bottom: 20px; &:last-child { border-bottom: none; } h2 { font-size: 24px; margin: 0 0 6px 0; a { color: @heading-color; } } } } .search-results { .article-title { margin-bottom: 6px !important; } .post p { margin-bottom: 10px; } } #content.single { margin-left: 10px; width: 610px; } // archive-artists.php .artist-archive { h1#page-title { margin-left: 10px; } .category { float: left; margin: 0 0 40px 0; height: auto; width: 300px; h2 { font-size: 24px; margin-bottom: 12px; } } } // taxonomy-artistcategory .artist { border-bottom: 1px solid @border-color; clear: both; float: left; margin: 0 0 20px 0; padding-bottom: 6px; width: 100%; &:last-child { border-bottom: 0; } h2 { clear: both; display: block; font-size: 24px; margin-bottom: 12px !important; width: 100%; a { color: @link-color; } } .artist-photo { float: left; margin-top: 5px; height: 80px; margin-right: 20px; width: 80px; img { display: block; } } .artist-info { float: left; width: 380px; } .artist-budget-genre-link { float: left; margin: 0 0 20px 20px; width: 150px; p { color: lighten(@text-color, 20%); line-height: 1.6em; } &:hover p { color: @text-color; } .cta { font-size: 14px; font-weight: 600; margin-top: -10px; } } } // single-keyword.php .single-keyword-image { .border-radius(3px); .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.5)); float: right; margin: 0 0 20px 0; img { .border-radius(3px); display: block; } } .single-keywords { #relatedartists { float: right; } } // single-artist.php .cta-photo { float: right; clear: both; margin: 5px 0 30px 40px; position: relative; width: 220px; img { .border-radius(3px); .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.5)); display: block; float: left; left: 0; position: relative; z-index: 1; width: 100%; margin: 0 0 15px 0; } .cta-wrap { .cta.primary.arrow { width: 145px !important; margin: 0 0 10px 0; } .cta.primary { width: 180px; } } } .related-artists { clear: both; float: left; margin: 0 0 30px 0; width: 100%; h3 { background: url('assets/img/star-ico.gif') no-repeat center left; padding-top: 5px; text-indent: 30px; } ul { .arrow-list; .border-box; margin-bottom: 10px; li { border-bottom: 1px solid @border-color; float: left; margin: 0 20px 0 30px; width: 225px; &:last-child { border-bottom: 1px solid @border-color !important; } } } p { clear: both; display: block; float: left; margin: 20px 0 0 0; width: 100%; a { font-weight: bold; } } } .tags { clear: both; float: left; margin: 40px 0 20px 0; } .abouteba { font-size: 13px; font-style: italic; } /** * @plugins */ .share { clear: both; margin: 10px 0 20px 0; } // .gform_wrapper { .gform_heading, .gform_footer { clear: both; margin-bottom: 1em; width: 100%; } .validation_error { background: #FFF; border: 1px solid #C44741; color: #C44741; display: block; margin-bottom: 1em; padding: 2%; width: 96%; } .gform_body { .gform_fields { list-style-type: none; margin: 0; padding: 0; .gform_bottom_note { //Note at bottom of form font-weight: bold; margin-left: 35%; } .gfield { display: block; margin-bottom: 1em; width: 100%; .gfield_label { float: left; font-size: 12px; font-weight: bold; width: 35%; } .gfield_description, .instruction { font-size: 13px; margin: 1em 0 0 35%; width: 50%; &.validation_message { color: #C44741; } } .small, .medium, .large { font-size: 13px; } .small { width: 25%; } .medium { width: 40%; } .large { width: 55%; } .gfield_checkbox, .gfield_radio { float: left; font-size: 13px; list-style-type: none; margin: 0.5em 0 1em 0; padding: 0; width: 65%; label { position: relative; top: -2px; } label, input[type="text"] { margin-left: 10px; } } .ginput_complex { float: left; margin: 0 0 1em 0; width: 65%; span { clear: both; float: left; font-size: 13px; margin-bottom: 1em; width: 100%; label { float: left; margin-left: 2.5%; width: 40%; } input[type="text"] { float: left; width: 50%; } } } } } } .gform_footer { clear: both; .gform_button { margin: 1em 0 0 35%; } } }