/* * Theme Name: BeautyMatters * Theme URI: http://www.beautymatters.de * Theme Description: Responsive Bootstrap Theme from Emanuel Seibold * Author: Emanuel Seibold (SeiboldSoft) * Author URI: http://www.seiboldsoft.de * Version: 0.3 * Tags: twitter bootstrap, white * License: license.txt * License URI: */ @import (css) url('http://fonts.googleapis.com/css?family=Tangerine|Life+Savers'); @import (reference, less) "../../libs/bootstrap/less/bootstrap.less"; @color: #4D926F; @hoverColor: #448BB7; @colorFooter: #242424; //@defaultFont: 'Droid serif'; @defaultFont: 'Life Savers', cursive; @defaultBackgroundImage:url('../images/repeat/2.jpg') repeat; @headingsColor: #303030; @primary-background: #F7F9FB; @secondary-background: white; .border-radius(@radius){ .border-top-radius(@radius); .border-right-radius(@radius); .border-bottom-radius(@radius); .border-left-radius(@radius); border-radius:@radius; } html, body { border: 0 none; font-size: 100%; vertical-align: baseline; font-family: @defaultFont; background: @defaultBackgroundImage; height:100%; margin:0 !important; padding:0 !important; } /* styles for shortcodes */ .divider { margin-bottom: 25px; padding-top: 25px; clear: both; display: block; margin-bottom: 15px; padding-top: 15px; width: 100%; } .nopadding { padding:0 !important; } .nomargin{ margin: 0; } /* Pagenavi */ .wp-pagenavi{ margin-bottom: 25px; text-align: center; } /*Breadcrumbs*/ .breadcrumb { margin:10px 0 !important; height:100% !important; } .breadcrumb-arrow { height: 36px; padding: 0; line-height: 36px; list-style: none; background-color: white; border:1px solid #C0C0C0; } .breadcrumb-arrow li:first-child a { border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px } .breadcrumb-arrow li, .breadcrumb-arrow li a, .breadcrumb-arrow li span { display: inline-block; vertical-align: top } .breadcrumb-arrow li:not(:first-child) { margin-left: -5px } .breadcrumb-arrow li+li:before { padding: 0; content: "" } .breadcrumb-arrow li span { padding: 0 10px } .breadcrumb-arrow li a, .breadcrumb-arrow li:not(:first-child) span { height: 36px; padding: 0 10px 0 25px; line-height: 36px } .breadcrumb-arrow li:first-child a { padding: 0 10px } .breadcrumb-arrow li a { position: relative; color: #fff; text-decoration: none; background-color: #3bafda; border: 1px solid #3bafda } .breadcrumb-arrow li:first-child a { padding-left: 10px } .breadcrumb-arrow li a:after, .breadcrumb-arrow li a:before { position: absolute; top: -1px; width: 0; height: 0; content: ''; border-top: 18px solid transparent; border-bottom: 18px solid transparent } .breadcrumb-arrow li a:before { right: -10px; z-index: 3; border-left-color: #3bafda; border-left-style: solid; border-left-width: 11px } .breadcrumb-arrow li a:after { right: -11px; z-index: 2; border-left: 11px solid #2494be } .breadcrumb-arrow li a:focus, .breadcrumb-arrow li a:hover { background-color: #4fc1e9; border: 1px solid #4fc1e9 } .breadcrumb-arrow li a:focus:before, .breadcrumb-arrow li a:hover:before { border-left-color: #4fc1e9 } .breadcrumb-arrow li a:active { background-color: #2494be; border: 1px solid #2494be; } .breadcrumb-arrow li a:active:after, .breadcrumb-arrow li a:active:before { border-left-color: #2494be } .breadcrumb-arrow li span { color: #434a54 } .breadcrumb-arrow li.active { padding-left:20px; } /* meta data */ .meta{ font-size: 0.9rem; } .cats{ margin-left: 5px; margin-right: 10px; } .tags{ margin-left: 5px; margin-right: 10px; } /* Sidebar */ .sidebar-wrapper{ padding-top: 0px; padding-bottom: 30px; margin-bottom: 30px; border-left: 1px solid transparent; border-color: #dcdcdc; } /* Widgets */ .widget{ margin-bottom: 40px; } .widget ul { padding: 0; line-height: 18px; } ul, menu, dir { display: block; list-style-type: disc; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 40px; } li { display: list-item; text-align: -webkit-match-parent; } .widget ul { list-style-type:none; padding:0; } .widget h4 { margin-bottom:5px; } .widget ul li { margin-bottom: 10px; padding-bottom: 10px; position:relative; padding-left: 18px; } .widget_categories ul li:before { content: ""; font-family: 'FontAwesome'; font-size: 12px; left: 4px; position: absolute; text-transform: lowercase; } .widget ul li a:hover { color:@hoverColor; } .widget_categories ul li span { float: right; } .widget ul li a { text-decoration:none; } .widget ul li a, .widget ul li, .widget ul li span, .widget ul li { font-size:.9rem; } .widget ul li span.positive { color:green; font-weight:500; } .widget ul li span.negative { color:red; font-weight:400; } /* code in comments*/ code { white-space: normal; } /* Footer */ .site-footer{ color:gray; font-size:.8rem; background-color: @colorFooter; font-style:italic; padding:40px 0; } footer h4, footer h3, footer h2, footer h5 { font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; color: #ffffff; text-transform: uppercase; letter-spacing: 2px; padding: 0 0 14px; margin: 0 0 16px; position: relative; border-bottom: 1px solid #363636; } footer ul { padding:0; list-style-type:none; } footer a { color: gray; } footer ul li a:hover { color: white; } ul.footer-highlight { background-color: lighten( @colorFooter, 1%); color:white; } /* Copyright*/ .copyright { width: 100%; font-size: 0.8rem; background-color: #212121; padding:40px 0; color:white; } /* MEDIA QUERIES */ .content-wrapper { width: 70%; margin:auto; } /* Regular and Post Blocks on Homepage */ .thumbnail .caption { padding-left:20px;padding-right:20px; } .thumbnail .image_wrap { max-height:250px; overflow:hidden; } .thumbnail img { width:100%; min-height:250px; } span.roll { // background:url(../images/mag.png) center center no-repeat #000; background: #000; position: absolute; z-index: 10; -webkit-box-shadow: 0px 0px 4px #000; -moz-box-shadow: 0px 0px 4px #000; box-shadow: 0px 0px 4px #000; opacity:0; } span.roll i { font-size:3em; color:white; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .post_format_image a:hover { text-decoration:none; } /* headings */ .text-seperator { color: #91B4AE; font-family: 'Droid serif', serif; font-size: 36px; font-weight: 400; font-style: italic; line-height: 44px; margin: 0 0 12px; text-align: center; border-bottom: 1px solid #91B4AE; } h2, h4 { color: @headingsColor; margin-bottom: 30px; } h2 { font-size: 24px; text-transform: uppercase; font-weight: 600; } h4 { font-size: 19px; line-height: 1.375em; font-weight: 400; } /* buttons **/ .btn-primary { background-color:#91B4AE; } /* home stuff */ .primary-block { background-color: @primary-background; } .secondary-block { background-color: @secondary-background; } .primary-block, .secondary-block { padding:20px 0; } .home-info-line { text-align:center; font-size:1.5rem; font-style: italic; padding:0 15px; } .home-info-line, .home-info-blocks { margin:0; color:white; } .home-info-blocks { padding:10px 0; } .home-info-blocks > .thumbnail { padding:2px; margin:0 auto; width:20px; height:20px; } #simple-gallery { padding-left:20px; padding-right:20px; } .home-info-blocks h3 { font-size: 36px; font-weight: 400; font-style: italic; line-height: 44px; margin: 0 0 12px; text-align: center; border-bottom: 1px solid #91B4AE; } /* slide animations for rows */ .sliding-middle-out { display: inline-block; position: relative; } .sliding-middle-out:after { content: ''; display: block; margin: auto; height: 1px; width: 0px; background: transparent; transition: width .5s ease, background-color .5s ease; } .sliding-middle-out:hover:after { width: 100%; background: @hoverColor; } .sliding-middle-out { display: inline-block; position: relative; } .sliding-middle-out:after { content: ''; display: block; margin: auto; height: 1px; width: 0px; background: transparent; transition: width .5s ease, background-color .5s ease; } .sliding-middle-out:hover:after { width: 90%; background: @hoverColor; } .sliding-u-l-r-l { position: relative; margin:0; } .sliding-u-l-r-l:before { content: ''; display: block; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; transition: width 0s ease, background 3s ease; } .sliding-u-l-r-l:after { content: ''; display: block; position: absolute; right: 0; bottom: 0; height: 1px; width: 0; background: white; transition: width 3s ease; } .sliding-u-l-r-l:hover:before { width: 100%; background: white; transition: width 3s ease; } .sliding-u-l-r-l:hover:after { width: 100%; background: transparent; transition: all 0s ease; } /* List in Block Line */ .paired-list { margin:0; padding:0; border: none; } ul.paired-list li{ padding: 0.5em; list-style-type:none; } .paired-list span{ float: right; font-size: 90%; font-weight:400; color:@color; } .paired-list li:before, .paired-list li:after { content: " "; display: table; } .paired-list li:after { clear: both; } ul.paired-list li:before{ display: none; } .regular-block { padding:20px; } /** testing **/ .border-title { display:inline-block; margin:0px 0px 20px; padding:0px; text-align:center; width:100%; } .border-title h1, .border-title h2, .border-title h3, .border-title h4, .border-title h5, .border-title h6 { margin-bottom: 15px; } .border-title h1 { font-size: 40px; } .border-title h2 { font-size: 36px; line-height: 30px; } .border-title h3 { font-size: 32px; } .border-title h4 { font-size: 24px; } .border-title h5 { font-size: 20px; } .border-title h6 { font-size: 18px; } .border-title .tag-line { color: #787878; display: block; font-size: 27px; font-style: normal; line-height: 30px; margin: 0; } .border-title h1, .border-title h2, .border-title h3, .border-title h4, .border-title h5, .border-title h6, .border-title .tag-line, .dt-sc-box-title span, .dt-sc-box-title h3 { font-weight: 300; } .border-title h2 { display: inline-block; padding-bottom: 5px; position: relative; } .border-title h2:before { content: ""; position: absolute; width: 25%; height: 1px; bottom: 0; left: 40%; border-bottom: 3px solid black; } .bbar-text, .border-title .tag-line { font-family: 'Tangerine', cursive; } .border-title .tag-line { color: #787878; display: block; font-size: 27px; font-style: normal; line-height: 30px; margin: 0; } .glyphicon { margin-right:10px; } .panel-body { padding:0px; } .panel-body table tr td { padding-left: 15px } .panel-body .table {margin-bottom: 0px; } /** testing 2 **/ .navbar, .navbar-inner, .btn-navbar { background-color:white; border:0 !important; padding:15px !important; margin:0 !important; } #navbar ul li { padding:0; } .icon-bar { background-color: black; } .navbar-brand { padding: 0px !important; /* firefox bug fix */ } .navbar-brand img { height: 100% !important; padding:1px; /* firefox bug fix */ width: auto; margin:auto; } .navbar .brand { float:left; margin:0 10px; line-height:10px; } .navbar .brand h1 { font-size:2em; display:inline; } .navbar .brand small { display:block; font-size:.7rem; } .navbar a.brand:hover, .navbar a.brand:active, .navbar a.brand:visited, .navbar a.brand:focus, .navbar a.brand:link { text-decoration:none; } .navbar-collapse { padding:0 !important; } ul.nav li { display:block; } ul.nav li a { height:100%; display:block; font-weight:500; background:none !important; } ul.nav li a:hover, a.dropdown-toggle:hover { background-color:white !important; color: black !important; } ul.nav li.active a { color:@hoverColor !important; background:none !important; } .open > .dropdown-menu li a { color:black !important; } .open > .dropdown-menu { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .dropdown ul.dropdown-menu:before { content: ""; border-bottom: 10px solid #fff; border-right: 10px solid transparent; border-left: 10px solid transparent; position: absolute; top: -10px; left: 16px; z-index: 10; } .dropdown ul.dropdown-menu:after { content: ""; border-bottom: 12px solid #ccc; border-right: 12px solid transparent; border-left: 12px solid transparent; position: absolute; top: -12px; left: 14px; z-index: 9; } /** ** Single Post and Page **/ .featured-image img { float:left; padding:10px; } .featured-image img.fullwidth { width:100%; margin-bottom:10px; } .entry-content img { max-width:100%; } h1.entry-title{ font-size:1.5rem; } .widget-title, .lined-title { font-size: 14px; line-height: 25px; position: relative; text-align: center; text-transform: uppercase; } .widget-title span, .lined-title span{ padding: 0 15px; background: #fff !important; position: relative; z-index: 1; } .widget-title:before, .lined-title:before { background: #e1e1e1; content: ''; display:block; position: absolute; top: 50%; width: 100%; height: 1px; left: 0; } .lined-title { font-size:1rem; } .rpwe-block, widget-content { margin-top:10px; } section.content, section.sidebar .widget, article.content, section.archive, section.woocommerce-content { border:1px solid #C0C0C0; background-color:white; padding:20px; margin:10px 0; .border-radius(3px); } section.category-boxed { margin:10px 0; } .entry-details .meta { font-size:0.7rem; font-style: italic; } .entry-tags { margin:10px 0; } .entry-tags a:hover { text-decoration:none; } .media-body h3 { /* remove margin from title in archive/cartegories */ margin:0 !important; } .post .media-left img { max-width:250px; } /* tag cloud widget **/ .tagcloud a { background-color:#242424; border:1px solid #dcdcdc; padding:4px; color:white; text-decoration:none; } /** google maps **/ #map-container { margin:0; padding:0; } /** scroll to top **/ #toTop-right { display:none; text-decoration:none; position:fixed; bottom:20px; right:20px; outline:none; z-index: 100; } /** comments **/ #comments { margin:10px 0; } .blog-comment::before, .blog-comment::after, .blog-comment-form::before, .blog-comment-form::after{ content: ""; display: table; clear: both; } .blog-comment{ padding-left: 15%; padding-right: 15%; } .blog-comment ul{ list-style-type: none; padding: 0; } .blog-comment img{ opacity: 1; filter: Alpha(opacity=100); -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .blog-comment img.avatar { position: relative; float: left; margin-left: 0; margin-top: 0; width: 65px; height: 65px; } .blog-comment .post-comments{ border: 1px solid #eee; margin-bottom: 20px; margin-left: 85px; margin-right: 0px; padding: 10px 20px; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background: #fff; color: #6b6e80; position: relative; } .blog-comment .meta { font-size: 13px; color: #aaaaaa; padding-bottom: 8px; margin-bottom: 10px !important; border-bottom: 1px solid #eee; } .blog-comment ul.comments ul{ list-style-type: none; padding: 0; margin-left: 85px; } .blog-comment-form{ padding-left: 15%; padding-right: 15%; padding-top: 40px; } .blog-comment h3, .blog-comment-form h3{ margin-bottom: 40px; font-size: 26px; line-height: 30px; font-weight: 800; } .tab-content { padding: 50px 15px; border: 1px solid #ddd; border-top: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .comment-form-author, .comment-form-email, .comment-form-url { width: 50%; } /** top and bottom header **/ .top-header { background-color:#fff; padding:15px; } .top-header-bar { background-color:#eff2f5; color:#777; font-size:0.8rem; height:30px; padding:10px 0; } /** image stuff **/ /** fix for same row height in bootstrap. Thanks to minimit **/ .inside { background: #ededed; background: -webkit-gradient(linear, left top, left bottom,color-stop(0%, #f4f4f4), color-stop(100%, #ededed)); background: -moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%); background: -ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%); } .inside-full-height { height: 100%; margin-top: 0; margin-bottom: 0; } .row-height { display: table; table-layout: fixed; height: 100%; width: 100%; } .col-height { display: table-cell; float: none; height: 100%; } .col-top { vertical-align: top; } .col-middle { vertical-align: middle; } .col-bottom { vertical-align: bottom; } @media (min-width: 480px) { .row-xs-height { display: table; table-layout: fixed; height: 100%; width: 100%; } .col-xs-height { display: table-cell; float: none; height: 100%; } .col-xs-top { vertical-align: top; } .col-xs-middle { vertical-align: middle; } .col-xs-bottom { vertical-align: bottom; } } @media (min-width: 768px) { .row-sm-height { display: table; table-layout: fixed; height: 100%; width: 100%; } .col-sm-height { display: table-cell; float: none; height: 100%; } .col-sm-top { vertical-align: top; } .col-sm-middle { vertical-align: middle; } .col-sm-bottom { vertical-align: bottom; } } @media (min-width: 992px) { .row-md-height { display: table; table-layout: fixed; height: 100%; width: 100%; } .col-md-height { display: table-cell; float: none; height: 100%; } .col-md-top { vertical-align: top; } .col-md-middle { vertical-align: middle; } .col-md-bottom { vertical-align: bottom; } } @media (min-width: 1200px) { .row-lg-height { display: table; table-layout: fixed; height: 100%; width: 100%; } .col-lg-height { display: table-cell; float: none; height: 100%; } .col-lg-top { vertical-align: top; } .col-lg-middle { vertical-align: middle; } .col-lg-bottom { vertical-align: bottom; } } /** scroll to top link **/ #top-link-block.affix-top { position: absolute; /* allows it to "slide" up into view */ bottom: -82px; right: 10px; } #top-link-block.affix { position: fixed; /* keeps it on the bottom once in view */ bottom: 18px; right: 10px; } /** get the divider back from bootstrap 2 **/ .divider-vertical { height: 50px; margin: 0 9px; border-right: 1px solid #333333; border-left: 1px solid #f2f2f2; } /** mobile styles **/ @media (max-width: 767px) { body, html, * { } .navbar-collapse .nav > .divider-vertical { display: none; } .navbar-brand>img { float:left; } .post .media-left img { display:none; } .breadcrumb { display:none; } .navbar-header { float: left; padding: 15px; text-align: center; height:80px; width: 100%; } .top-header-bar { padding:10px; } .navbar-toggle { float:left !important; } .navbar-nav { float:left; width:100%; margin:0 !important; padding:0 !important; } #navbar { width:100% !important; float:left; margin: auto; } .quote { display:none; } .border-title h2, .border-title h3 { text-align:center; word-break: break-word; font-size:1.3em; } .tag-line { font-size:.9em; } #top-link-block { left: 10px; right:0; bottom:10px; opacity: .5; } .copyright .text-right { /** this will fix the position on a mobile device **/ text-align:left; } div.blog-comment { margin:10px; padding:10px; } li.comment ul.children { margin-left:25px; padding:0; } @mobile-avatar-width-height: 20px; li.comment .avatar { width:@mobile-avatar-width-height; height:@mobile-avatar-width-height; } li div.post-comments { margin-left:@mobile-avatar-width-height+5 !important; } } /** ads **/ .content-ad { padding:5px; } .content-header { margin:10px 0; } /*Image alignment and Caption*/ #content .wp-caption{background:#F5F5F5;line-height:18px;margin-bottom:20px;text-align:center;padding:4px;} #content .wp-caption img{margin:5px 5px 0;} #content .wp-caption p.wp-caption-text{color:#888;font-size:12px;margin:5px;} #content .attachment img{max-width:620px;} #content .alignleft,#content img.alignleft{display:inline;float:left;margin-right:24px;margin-top:4px;} #content .alignright,#content img.alignright{display:inline;float:right;margin-left:24px;margin-top:4px;} #content .aligncenter,#content img.aligncenter{clear:both;display:block;margin-left:auto;margin-right:auto;} #content img.alignleft,#content img.alignright,#content img.aligncenter{margin-bottom:12px;} #content .attachment img {display: block;margin: 0 auto;} .sticky .post {background: #efefef; border: 3px solid #fff; } .sticky .post .post-content{ background-color:transparent; } .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } .commentlist .bypostauthor {border-top: 10px solid #e18728;} .commentlist li ul.children li.bypostauthor {border-top: 10px solid #e18728;}