Customize". Updates to this theme will be published here. You can also get theme support at that page posting your questions in the comment section. If you want to monetize your website, then please visit Programorama.com to find many of the world's best affiliate programs!
* Version: 1.2
* License: GNU General Public License v2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: affiliateblogwriter
* Tags: two-columns, right-sidebar, custom-menu, featured-images, footer-widgets, post-formats, sticky-post, theme-options, threaded-comments
*
* @package affiliateblogwriter
*/
?>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
html,
body {
margin: 0;
padding: 0;
}
body {
color: #000;
background: #FFF;
font-family: "Open Sans", sans-serif;
font-size: 16px;
text-align: center;
height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Open Sans", sans-serif;
font-weight: 700;
}
p {
margin: 15px 0;
}
img {
max-width: 100%;
height: auto;
}
#site-wrap {
width: 1000px;
max-width: calc(100% - 40px);
margin: 0px auto;
padding: 20px;
-webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.11);
box-shadow: 0 0 40px rgba(0, 0, 0, 0.11);
text-align: left;
background: white;
display: inline-block;
}
#site-header {
margin-top: -15px;
}
#site-header h1 {
line-height: 43px;
font-size: 43px;
text-align: center;
margin: 30px 0;
}
#site-header h1 a {
color: black;
text-decoration: none;
}
#site-header h2 {
text-align: center;
margin: -25px 0 20px 0;
font-size: 20px;
}
#content-wrap {
float: left;
width: 700px;
max-width: 70%;
margin: 10px 0 50px 0;
}
/* Menus */
.menu {
float: left;
width: 100%;
padding: 0;
}
.menu ul {
margin: 15px 0;
padding: 0;
}
.menu li {
list-style-type: none;
display: inline-block;
margin: 0 10px 0 0;
}
.menu li:last-of-type {
margin-right: 0;
}
.menu li a {
color: black;
text-decoration: none;
}
.menu li a:hover {
text-decoration: underline;
}
#main-menu,
#top-menu,
#footer-menu,
#small-mobile-menu {
text-align: center;
padding: 5px 20px 0 20px;
color: white;
background: #1685cb;
text-decoration: none;
float: left;
margin: 0 0 0 -20px;
}
#main-menu.fixed {
position: fixed;
top: 0px;
width: 1000px;
}
.static #main-menu.fixed {
position: static;
}
#main-menu .menu-item-has-children a::before,
#top-menu .menu-item-has-children a::before {
content: ">";
margin: 0 5px 0 0;
display: inline-block;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#main-menu .menu-item-has-children .sub-menu a::before,
#top-menu .menu-item-has-children .sub-menu a::before {
content: "";
margin: 0;
}
#main-menu .sub-menu .menu-item-has-children a::after,
#top-menu .sub-menu .menu-item-has-children a::after {
content: ">";
margin: 0 0 0 5px;
display: inline-block;
}
#main-menu .sub-menu .menu-item-has-children .sub-menu a::after,
#top-menu .sub-menu .menu-item-has-children .sub-menu a::after {
content: "";
margin: 0 0 0 0;
display: inline-block;
}
#main-menu .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children a::after,
#top-menu .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children a::after {
content: ">";
margin: 0 0 0 5px;
display: inline-block;
}
#main-menu .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu a::after,
#top-menu .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu a::after {
content: "";
margin: 0 0 0 0;
display: inline-block;
}
#main-menu>li>a,
#top-menu>li>a,
#footer-menu>li>a,
#small-mobile-menu>li>a {
border-radius: 5px;
padding: 5px 10px;
background: #1685cb;
color: white;
text-decoration: none;
float: left;
}
#main-menu>li>a:hover,
#top-menu>li>a:hover {
text-decoration: underline;
}
#main-menu li ul,
#top-menu li ul {
display: none;
position: absolute;
background: white;
padding: 0;
margin: 32px 0 0 0;
-webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.18);
;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.18);
;
border-radius: 5px;
}
#main-menu li:hover>ul,
#top-menu li:hover>ul {
display: block;
}
#main-menu li ul li,
#top-menu li ul li {
display: block;
padding: 10px;
text-align: left;
white-space: nowrap;
}
#main-menu li ul li a,
#top-menu li ul li a {
text-decoration: none;
padding: 0;
background: none;
background-image: none;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
float: none;
color: #000;
text-shadow: none;
}
#main-menu li ul li a:hover,
#top-menu li ul li a:hover {
-webkit-transition: none;
transition: none;
margin: 0;
border-bottom: 2px solid #1685cb;
}
#main-menu li ul li ul,
#top-menu li ul li ul {
position: absolute;
margin: -25px 0 0 -10px;
left: 100%;
}
#top-menu {
margin: -35px 0 20px -20px;
background: #fff;
font-size: 90%;
}
#top-menu>li>a {
background: none;
color: #000;
}
#top-menu li ul {
margin-top: 30px;
}
#footer-menu {
text-align: center;
margin: 0 0 20px -20px;
}
#main-menu-placeholder {
float: left;
margin: 0;
height: 42px;
width: 100%;
display: none;
}
#main-menu-placeholder.show {
display: block;
}
#small-mobile-menu {
display: none;
padding: 5px 10px 0 10px;
margin: 0 0 0 -10px;
}
/* Posts & Pages */
article {
margin-bottom: 20px;
float: left;
width: 100%;
overflow: hidden;
}
h2.post-title {
font-size: 28px;
margin: 10px 0;
}
h2.post-title a {
color: black;
text-decoration: none;
}
.post-content {
float: left;
width: 100%;
}
.has-thumbnail .post-content {
min-height: 150px;
}
.post-content iframe {
max-width: 100%;
}
.post-content figure {
margin: 15px 0;
text-align: center;
}
.featured-image {
float: right;
max-width: calc(50% - 20px);
height: auto;
margin: -11px 0 10px 10px;
}
.featured-image {
float: left;
max-width: 100%;
margin: 15px 15px 15px 0;
}
.featured-image.large {
margin: 15px 0;
}
.single .featured-image {
float: right;
margin: 15px 0 15px 15px;
}
.single .featured-image.large {
margin: 15px 0;
}
.featured-image img {
max-width: 100%;
height: auto;
border-radius: 3px;
}
.featured-image-large img {
max-width: 100%;
height: auto;
border-radius: 3px;
}
.featured-image a,
.featured-image a:hover {
border: 0;
}
.post-meta {
font-size: 90%;
}
.sticky-notice {
margin: 15px 0 0 0;
color: #1685cb;
text-transform: uppercase;
font-size: 14px;
}
.post-content a.read-more,
.blue-button,
.comment-form input.submit {
padding: 5px 10px;
background: #1685cb;
color: white;
border-radius: 3px;
text-decoration: none;
float: left;
margin-right: 10px;
margin-bottom: 20px;
-webkit-transition: background-color 0.5s;
transition: background-color 0.5s;
}
.post-content a.read-more:hover,
.blue-button:hover,
.comment-form input.submit:hover {
background: #0b5c8f;
}
.post-content a.cta,
.green-button {
padding: 5px 10px;
border-radius: 3px;
color: white;
background: #2cca1b;
text-decoration: none;
float: left;
margin-right: 10px;
margin-bottom: 20px;
-webkit-transition: background-color 0.5s;
transition: background-color 0.5s;
}
.post-content a.cta:hover,
.green-button:hover {
background: #31ad23;
}
.post-meta-bot {
float: left;
width: 100%;
font-size: 90%;
}
/* Various */
.affiliate-notice,
.no-comments {
font-size: 90%;
font-style: italic;
}
blockquote {
background: #f9f9f9;
padding: 10px 20px;
border: 1px dashed #ccc;
border-radius: 10px;
float: left;
width: 100%;
max-width: calc(100% - 42px);
margin: 10px 0;
}
code {
font-size: 0.9em;
background: #333;
color: #cdcdcd;
padding: 10px;
float: left;
width: 100%;
max-width: calc(100% - 20px);
margin: 10px 0;
border-radius: 10px;
}
ul,
ol {
margin: 0;
padding: 0;
padding-inline-start: 20px;
margin-inline-start: 0;
}
li {
margin-top: 5px;
}
dt {
margin-top: 5px;
}
dd {
margin: 0;
padding: 0;
margin-inline-start: 20px;
padding-inline-start: 0;
}
th,
td {
padding: 5px;
}
tr:nth-of-type(even) {
background: white;
}
tr:nth-of-type(odd) {
background: white;
}
thead tr {
background: #f9f9f9 !important;
}
table {
background: #f9f9f9;
}
.wp-block-media-text {
margin: 15px 0;
}
.alignleft {
float: left;
margin: 15px 15px 15px 0;
}
.wp-block-image .alignleft {
float: left;
margin: 15px 15px 15px 0;
}
.alignright {
float: right;
margin: 15px 0 15px 15px;
}
.wp-block-image .alignright {
float: right;
margin: 15px 0 15px 15px;
}
.aligncenter {
float: none;
margin: 15px auto;
}
.wp-block-image .aligncenter {
float: none;
display: table;
margin: 15px auto;
}
.wp-block-image .figcaption {
margin-top: .5em;
margin-bottom: 1em;
color: #555d66;
text-align: center;
font-size: 13px;
}
.wp-caption {
text-align: center;
max-width: 100%;
}
.wp-caption-text {
font-size: 13px;
color: #555d66;
}
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption,
.gallery-caption {
background: rgba(0, 0, 0, 0.30);
text-shadow: 1px 1px 1px black;
padding: 10px;
width: calc(100% - 20px);
color: white;
position: absolute;
max-height: calc(100% - 20px);
overflow: hidden;
font-size: inherit;
bottom: 0;
text-align: center;
}
.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
max-width: 100%;
height: auto;
}
/* Comments */
.post-comments {
float: left;
width: 100%;
}
.comment-respond {
float: left;
width: 100%;
margin-top: 20px;
}
.comment-form label {
float: left;
width: 100%;
margin-bottom: 10px;
}
.comment-form input,
.comment-form textarea,
.comment-form select,
.comment-form button {
font-family: "Open Sans", sans-serif;
font-size: inherit;
}
.comment-form input,
.comment-form textarea {
padding: 10px;
background: #fff;
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #e7e7e7;
max-width: 100%;
max-width: calc(100% - 30px);
font-size: inherit;
}
.comment-form input:hover,
.comment-form input:focus,
.comment-form textarea:hover,
.comment-form textarea:focus {
background: #fff;
outline: none;
}
.comment-form-cookies-consent {
margin: 10px 0;
float: left;
width: 100%;
}
input#wp-comment-cookies-consent {
float: left;
margin: 0 10px 0 0;
}
.comment-form label[for="wp-comment-cookies-consent"] {
width: auto;
float: left;
}
.comment-form input[type="checkbox"]:checked:after {
content: '\2714';
font-size: 14px;
position: absolute;
margin: -10px 0 0 -5px;
color: #0092ff;
}
.comment-form input.submit {
border: 0;
cursor: pointer;
}
.post-content .comment-author a {
border-bottom: none;
color: black;
}
.post-content .comment-meta a {
border-bottom: 0;
text-decoration: none;
color: #1685cb;
font-size: 80%;
}
.post-content .comment-author a:hover,
.post-content .comment-meta a:hover {
border-bottom: 0;
text-decoration: underline;
color: black;
}
.comment-author img {
float: right;
border-radius: 3px;
margin: 0 0 15px 15px;
}
.comment-author .fn {
font-style: normal;
}
.no-comments {
margin: 20px 0;
float: left;
width: 100%;
}
.comment-count {
margin-top: 5px;
}
.comment-list {
margin: 0;
padding: 0;
}
.comment-list li {
list-style-type: none;
}
.comment-list .comment-body {
float: left;
width: 100%;
width: calc(100% - 42px);
border: 1px solid #e7e7e7;
margin: 10px 0;
padding: 20px;
border-radius: 3px;
}
.comment-list ol ol ol {
margin: 0;
padding: 0;
}
.comments-notice {
float: left;
width: 100%;
width: calc(100% - 22px);
margin: 20px 0 -20px 0;
padding: 10px;
border: 1px dashed #ccc;
text-align: center;
border-radius: 3px;
}
.bypostauthor .comment-body {
border-color: #1685cb;
}
/* About the Blogger */
.about-the-blogger .profile-photo {
width: 250px;
height: auto;
max-width: 100%;
border-radius: 3px;
}
/* Reviews */
.review-rating {
float: left;
width: 100%;
margin: 10px 0 20px 0;
cursor: default;
}
.in-the-loop .review-rating {
float: right;
width: 285px;
}
.review-details-wrap {
float: left;
width: 100%;
}
.review-box {
float: left;
width: 270px;
margin: 0 0 20px 0;
padding: 0 20px 20px 20px;
background: #f9f9f9;
border: 1px solid #e6e6e6;
border-radius: 3px;
}
.item-reviewed {
float: left;
width: 100%;
}
.review-by {
margin-top: 10px;
float: left;
width: 100%;
}
.review-rating.in-content {
float: right;
margin: 20px 0 20px 20px;
cursor: default;
background: #f9f9f9;
border: 1px solid #e6e6e6;
padding: 20px;
border-radius: 3px;
text-align: center;
width: 270px;
}
.review-rating h3 {
text-transform: uppercase;
margin: 10px 0;
color: #444;
}
.review-rating h3 .rating-value {
color: #fbab00;
}
.review-rating.in-content h3 {
margin-top: 0;
font-size: 1em;
}
.review-star {
width: 50px;
height: 50px;
float: left;
margin-right: 5px;
}
.review-star:last-of-type {
margin-right: 0;
}
.star-on {
background: url(images/programorama-star-rating/star-flat-3d.png) no-repeat;
background-size: contain;
}
.star-half {
background: url(images/programorama-star-rating/star-flat-3d-half.png) no-repeat;
background-size: contain;
}
.star-off {
background: url(images/programorama-star-rating/star-flat-3d-off.png) no-repeat;
background-size: contain;
}
.flat .star-on {
background: url(images/programorama-star-rating/star-flat.png) no-repeat;
background-size: contain;
}
.flat .star-half {
background: url(images/programorama-star-rating/star-flat-half.png) no-repeat;
background-size: contain;
}
.flat .star-off {
background: url(images/programorama-star-rating/star-flat-off.png) no-repeat;
background-size: contain;
}
.smooth-glossy .star-on {
background: url(images/programorama-star-rating/star-smooth-n-glossy.png) no-repeat;
background-size: contain;
}
.smooth-glossy .star-half {
background: url(images/programorama-star-rating/star-smooth-n-glossy-half.png) no-repeat;
background-size: contain;
}
.smooth-glossy .star-off {
background: url(images/programorama-star-rating/star-smooth-n-glossy-off.png) no-repeat;
background-size: contain;
}
.smooth-no-border .star-on {
background: url(images/programorama-star-rating/star-no-border.png) no-repeat;
background-size: contain;
}
.smooth-no-border .star-half {
background: url(images/programorama-star-rating/star-no-border-half.png) no-repeat;
background-size: contain;
}
.smooth-no-border .star-off {
background: url(images/programorama-star-rating/star-no-border-off.png) no-repeat;
background-size: contain;
}
.glossy .star-on {
background: url(images/programorama-star-rating/star-glossy.png) no-repeat;
background-size: contain;
}
.glossy .star-half {
background: url(images/programorama-star-rating/star-glossy-half.png) no-repeat;
background-size: contain;
}
.glossy .star-off {
background: url(images/programorama-star-rating/star-glossy-off.png) no-repeat;
background-size: contain;
}
.black-border .star-on {
background: url(images/programorama-star-rating/star-black-border.png) no-repeat;
background-size: contain;
}
.black-border .star-half {
background: url(images/programorama-star-rating/star-black-border-half.png) no-repeat;
background-size: contain;
}
.black-border .star-off {
background: url(images/programorama-star-rating/star-black-border-off.png) no-repeat;
background-size: contain;
}
.yellow-black .star-on {
background: url(images/programorama-star-rating/star-black-border.png) no-repeat;
background-size: contain;
}
.yellow-black .star-half {
background: url(images/programorama-star-rating/star-black-border-half-black.png) no-repeat;
background-size: contain;
}
.yellow-black .star-off {
background: url(images/programorama-star-rating/star-black.png) no-repeat;
background-size: contain;
}
.pink .star-on {
background: url(images/programorama-star-rating/star-pink.png) no-repeat;
background-size: contain;
}
.pink .star-half {
background: url(images/programorama-star-rating/star-pink-half.png) no-repeat;
background-size: contain;
}
.pink .star-off {
background: url(images/programorama-star-rating/star-pink-off.png) no-repeat;
background-size: contain;
}
.black .star-on {
background: url(images/programorama-star-rating/star-black.png) no-repeat;
background-size: contain;
}
.black .star-half {
background: url(images/programorama-star-rating/star-black-half.png) no-repeat;
background-size: contain;
}
.black .star-off {
background: url(images/programorama-star-rating/star-black-off.png) no-repeat;
background-size: contain;
}
/* Archives */
.archive-meta {
font-size: 90%;
}
/* 404 */
.error404 article p {
float: left;
width: 100%;
}
.error404 article ul li {
margin-bottom: 10px;
}
/* Sidebars */
a,
a:visited,
.sidebar a,
.sidebar a:visited,
.post-meta-bot a,
.post-meta-bot a:visited {
text-decoration: none;
color: #1685cb;
border-bottom: none;
-webkit-transition: color 0.5s;
transition: color 0.5s;
}
a:hover,
.sidebar a:hover,
.post-meta-bot a:hover {
color: #0b5c8f;
text-decoration: underline;
border-bottom: none;
}
.sidebar p {
margin: 0;
}
.sidebar .widget,
.sidebar .affiliate-notice {
margin: 10px 0 20px 0;
float: left;
width: 100%;
}
.sidebar .widget:nth-of-type(1) {
margin-top: 0;
}
.sidebar .widget_categories ul {
margin-bottom: 0;
}
.sidebar .widget-title {
margin: 0 0 10px 0;
}
.about-the-blogger .widget-title {
margin-top: 10px;
}
.sidebar ul {
margin: 15px 0;
padding: 0;
}
.sidebar ul li {
list-style-type: none;
margin-bottom: 5px;
}
#main-sidebar {
float: right;
width: 250px;
max-width: 25%;
margin-top: 30px;
}
#bottom-sidebar {
float: left;
width: 100%;
text-align: center;
}
#outer-right-sidebar img,
#outer-left-sidebar img,
.banner {
border-radius: 3px;
-webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.07);
box-shadow: 0 0 40px rgba(0, 0, 0, 0.07);
}
#outer-right-sidebar {
position: fixed;
width: 160px;
top: 100px;
margin-left: 1050px;
}
#outer-left-sidebar {
position: fixed;
width: 160px;
top: 100px;
margin-left: -210px;
}
/* Search */
.searchform {
float: left;
width: 100%;
}
.searchform label {
width: 0px;
height: 0px;
overflow: hidden;
float: left;
}
.search-input {
float: left;
width: calc(100% - 20px);
padding: 10px;
border: 1px solid #e6e6e6;
background: #f9f9f9;
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.search-input::-webkit-input-placeholder {
color: #000;
}
.search-input:-ms-input-placeholder {
color: #000;
}
.search-input::-ms-input-placeholder {
color: #000;
}
.search-input::placeholder {
color: #000;
}
.search-input:focus {
outline: none;
}
.search-submit {
float: right;
height: 25px;
width: 25px;
background: url(images/search.svg) no-repeat transparent;
background-size: cover;
margin: -31px 6px 0 0;
border: none;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.search-header {
margin-top: 20px;
}
.search-header p {
margin: 20px 0 10px 0;
float: left;
width: 100%;
text-align: center;
}
.top-search {
float: right;
position: relative;
margin: -57px 0 0 0;
}
.top-search input {
outline: none;
}
.top-search input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
box-sizing: content-box;
appearance: textfield;
font-family: inherit;
font-size: 100%;
}
.top-search input::-webkit-search-decoration,
.top-search input::-webkit-search-cancel-button {
display: none;
}
.top-search input[type=search] {
background: url(images/search.svg) no-repeat 5px 5px;
background-size: 20px;
border: none;
width: 8px;
height: 20px;
padding: 5px 10px;
color: transparent;
cursor: pointer;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.top-search input[type=search]:focus {
width: 200px;
background-color: #fff;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
padding-left: 40px;
color: #000;
background-color: #fff;
cursor: auto;
}
.top-search input:-moz-placeholder {
color: transparent;
}
.top-search input::-webkit-input-placeholder {
color: transparent;
}
/* Social */
/* Generated by http://responsive-css.spritegen.com Responsive CSS Sprite Generator */
.facebook,
.github,
.instagram,
.linkedin,
.pinterest,
.reddit,
.rss,
.snapchat,
.twitter,
.youtube {
max-width: 100%;
background-size: 100%;
background-image: url('images/sociocon/social.png');
}
.facebook {
background-position: 0 0%;
background-size: 100%;
}
.github {
background-position: 0 11.111111%;
background-size: 100%;
}
.instagram {
background-position: 0 22.222222%;
background-size: 100%;
}
.linkedin {
background-position: 0 33.333333%;
background-size: 100%;
}
.pinterest {
background-position: 0 44.444444%;
background-size: 100%;
}
.reddit {
background-position: 0 55.555556%;
background-size: 100%;
}
.rss {
background-position: 0 66.666667%;
background-size: 100%;
}
.snapchat {
background-position: 0 77.777778%;
background-size: 100%;
}
.twitter {
background-position: 0 88.888889%;
background-size: 100%;
}
.youtube {
background-position: 0 100%;
background-size: 100%;
}
.social-icon {
width: 32px;
height: 32px;
float: left;
}
.social-wrap {
margin-top: 10px;
text-align: center;
}
.social-wrap-footer {
text-align: center;
}
.social-wrap-footer .social-wrap {
margin: 5px auto 15px auto;
display: table;
}
.social-wrap-footer h3 {
margin: 0;
}
/* Pagination */
.pagination-links-wrap {
margin: 0 auto;
display: table;
}
.pagination {
float: left;
width: 100%;
text-align: center;
cursor: default;
text-align: center;
}
.pagination div.nav-links {
display: flex;
flex-wrap: wrap;
}
.pagination span.current {
padding: 5px 10px;
border-radius: 3px;
color: white;
background: #0b5c8f;
text-decoration: none;
float: left;
margin-right: 5px;
margin-bottom: 3px;
}
.pagination a {
padding: 5px 10px;
border-radius: 3px;
color: white;
background: #1685cb;
text-decoration: none;
float: left;
margin-right: 5px;
margin-bottom: 3px;
-webkit-transition: background-color 0.5s;
transition: background-color 0.5s;
}
.pagination a:last-of-type {
margin-right: 0;
}
.pagination a:hover {
background: #0b5c8f;
}
.pagination .dots {
padding: 5px;
border: none;
float: left;
margin-right: 5px;
margin-bottom: 3px;
}
/* Footer */
footer {
float: left;
width: 100%;
text-align: center;
}
/* Mobile */
#menu-toggle {
display: none;
position: fixed;
top: 5px;
right: 5px;
z-index: 999;
background: #fafafa;
padding: 6px 6px 3px 6px;
cursor: pointer;
border: 0;
border-radius: 3px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.13), 0 2px 2px rgba(64, 64, 64, 0.27);
z-index: 101;
}
#main-menu.mobile-menu {
background: white;
border: 0;
}
.mobile-menu.menu li {
clear: both;
margin: 5px 0;
float: left;
}
#main-menu.mobile-menu .menu-item-has-children a::before {
content: "";
margin: 0;
}
#main-menu.mobile-menu li ul {
display: block;
position: static;
font-size: 90%;
margin-left: 10px;
margin-top: 10px;
float: left;
box-shadow: none;
width: 100%;
}
#main-menu.mobile-menu li ul li {
display: block;
position: static;
font-size: 90%;
margin-top: 5px;
float: left;
box-shadow: none;
padding: 0;
}
#main-menu.mobile-menu li ul li a {
border-radius: 5px;
padding: 5px 10px;
color: white;
background: #1685cb;
text-decoration: none;
float: left;
}
#main-menu.mobile-menu li ul li a:hover {
border: none;
}
#main-menu.mobile-menu li ul ul {
display: none;
}
#main-menu.mobile-menu .sub-menu .menu-item-has-children a::after {
content: "";
margin: 0;
}
.mobile-menu-search-form {
display: none;
margin-top: 20px;
float: left;
width: 100%;
}
.mobile-menu-branding {
display: none;
}
#site-header .mobile-menu-branding h2 {
font-size: 20px;
margin: 20px 0 10px 0;
float: left;
}
#site-header .mobile-menu-branding h3 {
font-size: 13px;
font-weight: normal;
margin: 0;
float: left;
}
.central-cta-sidebar {
margin-top: 10px;
float: left;
width: 100%;
}
.central-cta-mobile {
display: none;
text-align: center;
margin-top: -3px;
float: left;
width: 100%;
}
.sidebar .central-cta-sidebar a,
.central-cta-mobile.central-cta-sidebar a {
padding: 5px 10px;
border-radius: 3px;
color: white;
background: #2cca1b;
text-decoration: none;
float: none;
margin-right: 10px;
margin-bottom: 0;
transition: none;
display: block;
margin: 0 auto;
text-align: center;
-webkit-transition: background-color 0.5s;
transition: background-color 0.5s;
}
.central-cta-mobile.central-cta-sidebar a {
float: none;
margin: 0 auto;
}
.sidebar .central-cta-sidebar a:hover,
.central-cta-mobile.central-cta-sidebar a:hover {
background: #31ad23;
}
.sidebar select#cat {
float: left;
width: 100%;
padding: 10px;
margin-top: 10px;
border: 1px solid #e6e6e6;
background: #f9f9f9;
border-radius: 3px;
}
.screen-reader-text {
width: 1px;
height: 1px;
overflow: hidden;
color: transparent;
float: left;
}
/* Responsive */
@media all and (max-width:1440px) {
#outer-right-sidebar,
#outer-left-sidebar {
display: none;
}
}
@media all and (max-width:1070px) {
.featured-image {
max-width: 50%;
}
.featured-image.large {
margin: 15px 15px 15px 0;
}
.in-the-loop .review-rating {
float: right;
width: calc(50% - 20px);
}
.in-the-loop .review-star {
width: 25px;
height: 25px;
}
}
@media all and (min-width:601px) and (max-width:900px) {
.review-rating.in-content {
width: 195px;
}
.review-rating.in-content h3 {
font-size: 11px;
}
.review-rating.in-content .review-star {
width: 35px;
height: 35px;
}
}
@media all and (max-width:600px) {
#site-wrap {
max-width: calc(100% - 20px);
padding: 10px;
}
#top-menu,
#footer-menu {
padding-left: 10px;
padding-right: 10px;
margin-left: -10px;
margin-right: 10px;
}
#top-menu {
margin-top: -25px;
}
#site-header h2 {
margin-bottom: 10px;
}
#content-wrap {
width: 100%;
max-width: 100%;
margin-top: 0;
margin-bottom: 0;
}
.central-cta-mobile {
display: block;
}
.main-menu-wrap {
display: none;
height: 100%;
height: calc(100% - 40px);
width: 100%;
width: calc(100% - 40px);
background: white;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 20px;
z-index: 100;
float: none;
border: none;
overflow-y: scroll;
}
.mobile-menu-search-form,
.mobile-menu-branding {
display: block;
}
#menu-toggle {
display: block;
}
#menu-toggle:focus {
outline: none;
}
#small-mobile-menu {
display: block;
}
#main-sidebar {
width: 100%;
max-width: 100%;
text-align: center;
}
.top-search {
display: none;
}
.top-search input[type=search]:focus {
width: 100%;
width: calc(100% - 30px);
margin: 0 0 0 -10px;
border-radius: 0;
}
.social-inner-wrap {
margin: 0 auto;
display: table;
}
.featured-image {
width: 100%;
max-width: 100%;
text-align: center;
}
.in-the-loop .review-rating {
float: left;
width: 100%;
margin-top: 0;
text-align: center;
}
.in-the-loop .review-star {
width: 50px;
height: 50px;
margin-right: 0;
}
.review-box {
float: left;
margin: 0 0 20px -10px;
padding: 0 20px 20px 20px;
background: #f9f9f9;
border: 1px solid #e6e6e6;
width: 100%;
width: calc(100% - 20px);
border-right: 0;
border-left: 0;
text-align: center;
border-radius: 0;
}
.review-rating.in-content {
margin: 0 -10px 15px 0;
width: 100%;
width: calc(100% - 20px);
border-radius: 0;
border-right: 0;
border-left: 0;
}
.review-rating .review-star {
float: none;
display: inline-table;
}
.pagination span.current,
.pagination a {
margin-right: 0;
float: left;
margin-right: 3px;
margin-bottom: 3px;
}
.pagination .dots {
float: left;
margin-right: 3px;
margin-bottom: 3px;
}
}