/* Theme Name: Bliss Author: Jesse Smith for Mardesco Theme URI: http://www.mardesco.com/themes/bliss/ Description: A blissful website experience. "Bliss" is a mobile-friendly, responsive WordPress theme with a clean, modern design. Feature-rich theme includes built-in slideshows, theme color switcher, a convenient site logo uploader, and more! Now with WooCommerce compatibility. Author URI: http://www.mardesco.com Version: 1.1.0 Tags: blue,brown,custom-header,custom-background,green,gray,featured-images,left-sidebar,responsive-layout,right-sidebar,theme-options License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bliss */ /* ========================================================================== Foundation, HTML5 & cross-browser normalization. ========================================================================== */ html, body{ margin: 0; padding:0; font-size:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family:"Helvetica Neu", Helvetica, Arial, sans-serif; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } html { overflow-y: scroll; } /* prevent BG image flicker upon hover */ .ie6 html { filter: expression(document.execCommand("BackgroundImageCache", false, true)); } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor:help; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } del { text-decoration: line-through; } dfn { font-style: italic; } mark { background: #ff0;/* blue */ color: #000; background-color: #fcd700;/* yellow */ color: #000; text-decoration: none; } ins { background-color: #fcd700; color: #000; font-style: italic; font-weight: bold; } figcaption{ font-size:80%; text-align:center; } code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } dl, menu, ol, ul { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol, .menu ul { list-style: none; list-style-image: none; } img { vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } form { margin: 0; } fieldset { border: 1px solid #c0c0c0; padding: 0.35em 0.625em 0.75em; margin: 0; } legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px; } button, input, select, textarea { font-size: 100%; margin: 0; font-family:sans-serif; } button, textarea{ vertical-align: baseline; *vertical-align: middle; } button { width: auto; overflow: visible; } input, select { vertical-align: middle; } input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } button, input { line-height: normal; } .clickable, label, button, html input[type="button"], input[type="reset"], input[type="submit"] { /* -webkit-appearance: button; */ cursor: pointer; *overflow: visible; } button[disabled], input[disabled] { cursor: default; } select, input, textarea { font: 99% sans-serif; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; } input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* Note: Tables still require cellspacing="0" in the markup! */ table { border-collapse: collapse; border-spacing: 0; font-size: inherit; font: 100%; } th { font-weight: bold; vertical-align: bottom; } td, td img { font-weight: normal; vertical-align: top; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } /* End HTML5 & cross-browser standardization. */ /* ========================================================================== Display classes. ========================================================================== */ .hidden, .none { display: none !important; visibility: hidden; } /* Hide visually, but make it available for screen readers */ .visuallyhidden, .screen-reader-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* and the opposite */ .show, .block, .visible{ display:block; visibility:visible; } .clear, .break, .spacer{ clear:both; } .break{ margin-top:1.125em; } .spacer{ margin-top:2.25em; } p.spacer{ margin-top:inherit; padding-top:2.25em; } .inlineSpacer{ display:inline-block; margin:0 0.75em;/*12px*/ text-align:center; } .clearfix:before, .clearfix:after { content: " ";/* some suggest the whitespace character "\0020" instead */ display: block;/* or you could use display:table; */ height:0; overflow:hidden; } .clearfix:after { clear: both; } .clearfix { *zoom: 1;/* IE6/7 */ } /* End display classes. */ /* ========================================================================== Some default styles. ========================================================================== */ html, body, button, input, select, textarea { color: #333;/* off-black. */ } body { font-size: 1em; line-height: 1.6; /* the font size, times 1.6 */ } a{ text-decoration:none; margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } a, a:visited{ color:#03F; } a:hover{ text-decoration:underline; color: #69f; } a:link { -webkit-tap-highlight-color: #fcd700; } a img{ border:0; } h1 { font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.75em; margin: 2.33em 0; } p, pre { font-size:1em; margin: 1em 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* new defaults added with version 1.0.4 */ th, td{padding:0.125em 0.25em;border:1px solid #eee; text-align:left;} .widget td, .widget th{text-align:center;} blockquote{border-left:1px solid #eee;padding-left:1em;} /* some classes required by ThemeCheck */ .wp-caption, .wp-caption-text, .gallery-caption{ font-size:85%; font-weight:bold; } .bypostauthor{ font-size:110%; padding:8px; background-color:#fdffc6; border:1px solid #f6ff00; } /* some more default classes */ .aligncenter, .center, #bliss_main p.center{ text-align:center; margin:0 auto; } img.center, img.aligncenter{ margin:1.2em auto; } .alignleft, .left, .pic{ float:left; text-align:left; } .pic{ margin:0 0.4375em 0.125em 0; } img.left, img.alignleft{ margin:1.2em 1.2em 0.875em 0; } .alignright, .right, .picR{ float:right; text-align:right; } .picR{ margin:0 0 0.125em 0.4375em; } img.right, img.alignright{ margin:1.2em 0 0.875em 1.2em; } /* when you want to demo a layout, but you don't want to actually use a distracting placeholder image. */ .demoPic{ text-align:center; height:10.3125em;/*165px;*/ width:17.1875em; background-color:#808080; } .profile-pic{ -ms-transform: rotate(-2.5deg); /* IE 9 */ -webkit-transform: rotate(-2.5deg); /* Chrome, Safari, Opera */ transform: rotate(-2.5deg); } .small{font-size:87%} .rounded{ /* Firefox */ -moz-border-radius: 3px; /* WebKit */ -webkit-border-radius: 3px; /* IE9, Opera 10.5+, dev channel releases of Google Chrome */ border-radius: 3px; /* useful if you don't want a bg color from leaking outside the border: */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .multi-column { text-align:justify; /* Firefox */ -moz-column-width: 13em; -moz-column-gap: 1em; /* WebKit */ -webkit-column-width: 13em; -webkit-column-gap: 1em; /* Standard */ column-width: 13em; column-gap: 1em; } .shadow { /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=0, Color='#000000'); /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=0, Color='#000000')"; /* Firefox */ -moz-box-shadow: 0px 0px 3px #000000; /* WebKit */ -webkit-box-shadow: 0px 0px 3px #000000; /* Standard */ box-shadow: 0px 0px 3px #000000; } .hidden-text{ text-indent:-99999px; } /* end default styles */ /* helper classes for multi-column grid layout sections */ .thirds, .halves{width:100%;position:relative;clear:both} .thirds{margin:2em 0} .thirds .one-third{display:block;position:relative;width:30%;padding:0;margin-right:3.333333333333%;float:left} .thirds .one-third:last-child, .thirds .one-third.last-child{margin-right:0} .halves{margin:0 0 1.5625em 0} .halves .one-half{width:44.4444444%;float:left} .halves .one-half:first-child, .halves .first_half{padding-right:11.11111%} .halves .one-half h2{padding-top:0} .one-half iframe,.one-half img{margin:auto;text-align:center;max-width:100%;height:auto} @media only screen and (max-width:850px){ .thirds .one-third{float:none;clear:both;width:auto;margin:0.1875em auto 1.25em auto} .thirds .one-third:first-child{margin-left:auto} .thirds .one-third:last-child{margin-right:auto} .halves .one-half{float:none;clear:both;width:100%;margin:0} .halves .one-half:first-child, .halves .first_half{padding-right:0} .halves .one-half h2{padding-top:1.736111em} } /* end column layouts */ /* ========================================================================== Layout ========================================================================== */ .site-header{ padding:0.4375em 0.75em 3em; margin-bottom:26px; } .site-header.no-button-nav{ margin-bottom:0; } .site-header .logo{ float:left; display:block; /* height:90px; */ margin-bottom:0; margin-top:13px; } .logotext{ font-size:1.40625em; /* within an h1 tag = 16 * 2 * 1.40625 = 45px. Formerly 1.875 = 60px */ line-height:1; } .site-header .site-slogan, .site-header h2.site-slogan{ float:right; } @media screen and (max-width:760px){/* was 680. */ .site-header .site-slogan, .site-header h2.site-slogan{ float:left; clear:both; font-size:1.25em; margin:0.25em 0; } } /* Header navigation styles, including suckerfish-style dropdown menus. */ #headerNavWrap{ clear:both; } #headerNavWrap ul{ z-index:150; } .bliss-header-nav{ text-align:left; } .bliss-header-nav ul{ padding-left:0; margin-left:0; } .bliss-header-nav ul li{ float:left; margin-left:1em; padding-left:0; } #headerNav > ul > li:first-child, .bliss-header-nav .menu > ul > li:first-child{/* the li that is the first child of the ul. */ margin-left:0; padding-left:0; } #headerNav > ul > li, .bliss-header-nav .menu > ul > li{position:relative} #headerNav ul li a, .bliss-header-nav .menu ul li a{ display:block; padding:6px 9px; } .rounded a.btn, .rounded #headerNav ul li a, .rounded .bliss-header-nav .menu ul li a{ border-radius:3px; } #headerNav a:hover, .bliss-header-nav .menu a:hover{text-decoration:none} .bliss-header-nav ul li ul{ position:absolute; margin:0; padding:0; opacity:0; background-color:#ffffff; width:220px; z-index:150; border:1px solid #666666; -webkit-transition:opacity 0.3s ease-out;-moz-transition:opacity 0.3s ease-out;-ms-transition:opacity 0.3s ease-out;-o-transition:opacity 0.3s ease-out; transition:opacity 0.3s ease-out; } .rounded .bliss-header-nav ul li ul{ -webkit-border-radius: 3px; border-radius: 3px; -moz-background-clip:border-box; background-clip: border-box; } .bliss-header-nav ul li ul li a{ display:block; max-height:0; -webkit-transition:max-height 1.5s ease-in;-moz-transition:max-height 1.5s ease-in;-ms-transition:max-height 1.5s ease-in;-o-transition:max-height 1.5s ease-in; transition:max-height 1.5s ease-in; } .bliss-header-nav ul ul li{ margin-left:0; width:220px; } .bliss-header-nav ul li ul li{ border-top:1px solid #666666; } .bliss-header-nav ul li:hover > ul{ opacity:1; box-shadow:0.25px 1px 3px #666 } .bliss-header-nav ul li:hover ul li a{ max-height:200px; overflow:hidden; } .bliss-header-nav ul li:hover ul li:first-child{ border-top:none; } .bliss-header-nav ul > li > ul > li > ul{ left:220px; top:38px; } .bliss-full-width-nav, #headerNav.bliss-full-width-nav, .bliss-full-wrap .menu{ padding-bottom:3px; } .bliss-full-width-nav > ul, #headerNav.bliss-full-width-nav > ul, .bliss-full-wrap .menu > ul{ padding:3px 2.9%; margin:0 auto; } /* underline top-level nav menu links on hover state */ .bliss-full-width-nav > ul > li > a:hover, #headerNav.bliss-full-width-nav > ul > li > a:hover .bliss-full-wrap .menu >ul >li > a:hover{text-decoration:underline} .bliss-full-width-nav li:hover a, .bliss-full-width-nav a:hover{text-decoration:underline;} /* but the dropdown menus should not get an underline. it looks terrible. */ .bliss-full-width-nav > ul > li > .sub-menu > li > a:hover, #headerNav.bliss-full-width-nav > ul > li > .sub-menu > li > a:hover, .bliss-full-wrap .menu >ul >li > .sub-menu > li > a:hover, .bliss-full-width-nav li:hover .sub-menu a, .bliss-full-width-nav .sub-menu a:hover{text-decoration:none;} /* If the user hasn't assigned a menu to a location, then the clearfix class is not applied. Instead, we apply the clearfix properties to the parent element. */ .bliss-header-nav .menu:after{ clear:both; display:block; content:" "; height:0; overflow:hidden; } /* begin collapsing-nav-menu.css */ #headerNavWrap .open_menu_button{ display:none; } #headerNavWrap.collapsed .open_menu_button{ display:block; text-align:center; padding:4px; width:50px; height:22px; background-color:#000; color:#FFF; cursor:pointer; position:absolute; top:80px; right:60px; } .rounded #headerNavWrap.collapsed .open_menu_button{ border-radius:4px; } button.btn, a.btn{padding:6px 8px;} /* adjust menu button position to account for the admin bar for logged-in users */ body.logged-in.admin-bar #headerNavWrap.collapsed .open_menu_button{ top:108px;/* the above, plus 28 pixels */ } #headerNavWrap.collapsed{ padding:0; margin:0; } #headerNavWrap.collapsed ul{ display:none; position:absolute; background:#FFF; border-top:1px solid #000; border-bottom:1px solid #000; border-right:0; border-left:0; left:0; } #headerNavWrap.collapsed ul li{ float:none; width:100%; border-bottom:1px solid #000; background:transparent; margin-left:0; } #headerNavWrap.collapsed ul li:last-child{ border-bottom:none; } #headerNavWrap.collapsed.open ul{ display:block; clear:both; float:none; width:100%; padding:0; } #headerNavWrap.collapsed ul li a{ padding-left:15px; border-radius:0; } /* hide mouse-oriented dropdown menus from touch screen mobile devices */ #headerNavWrap.collapsed ul ul, #headerNavWrap.collapsed ul li ul, #headerNavWrap.collapsed ul li:hover ul, #headerNavWrap.collapsed ul li ul li{ display:none; } .collapsed .bliss-full-width-nav, .collapsed #headerNav.bliss-full-width-nav, .bliss-full-wrap.collapsed .menu{ padding-bottom:0; } /* end collapsing-nav-menu.css */ #searchform, .searchform{ clear:right; float:right; margin-bottom:12px; } @media screen and (min-width:681px) and (max-width:760px){ #searchform{clear:none} } #searchform input[type=search]{margin-bottom:3px} #searchform button.search-submit{padding:4px 8px;} /* not 760. */ @media screen and (max-width:680px){ #searchform, .searchform{ float:none; margin-bottom:0; } } #breadcrumbs{ font-size:85%; font-style:italic; font-stretch:120%; margin-bottom:16px; } /* main content section */ #wrapper{ clear:both; width:100%; float:left; } #bliss_main{ } .featured-image-container{ margin-bottom:26px; } #bliss_main h1{ margin:0 0 1em 0; } #bliss_main h2, #bliss_main h3, #bliss_main h4, #bliss_main h5, #bliss_main h6, #bliss_main p, #bliss_main ul{ margin:1em 0; } #bliss_main p{ text-align:left; } #wrapper{padding-bottom:45px;} #wrapper, .rightSideNav, .leftSideNav, .sideNav{ padding-top:60px; padding-bottom:40px; } @media screen and (max-width:680px){ #wrapper{ padding-top:23px; } } .widget{ margin-bottom:20px; } .rightSideNav h2, .leftSideNav h2{ margin-top:0;/* else widget titles make sidebar layout uneven. */ padding-top:0; } .sideNav ul, .leftSideNav ul, .rightSideNav ul, .sideNav li, .leftSideNav li, .rightSideNav li{ list-style:none; } .sideNav ul, .leftSideNav ul, .rightSideNav ul, .sideNav li, .leftSideNav li, .rightSideNav li{ margin-left:0; padding-left:0; } .sideNav li, .leftSideNav li, .rightSideNav li{ margin-bottom:0.75em;/* 12px */ } footer{ clear:both; width:100%; } footer .content{ padding:6.25em 1.6666666666667% 2em 1.6666666666667%; } /* see above notes about wp_nav_menu and the case of the missing parent element. adding .site-footer .menu to all instances of #footerNav. */ #footerNav ul, .site-footer .menu ul{ margin:0; padding:0; clear:both; } #footerNav li, .site-footer .menu li{ float:left; margin-right:2em; } #footerNav > li > a:before, .site-footer .menu > li > a:before { content:' |'; position:relative; left:-1em; } .site-footer .social-menu .menu > li > a:before{ content: ' '; left:0; } #footerNav > li:first-child > a:before, .site-footer .menu > li:first-child > a:before { content:''; } #footerNav .sub-menu li, .site-footer .menu .sub-menu li{ clear:both; margin-left:3px; margin-right:0.6875em; max-width:173px; } #post-pagination { clear:both; float:right; } #post-pagination a:hover{ text-decoration:underline; } #post-pagination .current-post-page { font-weight:bold; } ul.page-numbers { margin: 20px 0 10px; width: 100%; padding: 0; font-size: 12px; line-height: normal; clear: both; float: left; } ul.page-numbers li { float: left; list-style:none; } ul.page-numbers a, ul.page-numbers span { background: -webkit-gradient(linear, left top, left bottom, from(#E4E3E3), to(#FFFFFF)); background: -moz-linear-gradient(top, #E4E3E3, #FFFFFF); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E4E3E3', endColorstr='#FFFFFF'); padding: 3px 4px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #ccc; color: #666; } .rounded ul.page-numbers a, .rounded ul.page-numbers span { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } ul.page-numbers a:hover, ul.page-numbers span.current { border: 1px solid #666; color: #444; } /* end default foundational layout styles. */ #comments{ padding:24px 12px; } #comments p, .comment-meta, .comment-reply-link{ font-size:13px; } #comments p.form-submit{font-size:16px} .comment-form-comment, .form-allowed-tags{ padding-top:7px; } /* styles for sticky posts are required by ThemeCheck */ .sticky, article.tag-sticky, article.tag-sticky-2{ font-size:110%; padding:20px; border:2px solid #777; clear:both; } .fixednav{ position:fixed; top:0; } #bliss_container.rounded .site-header{ -moz-border-radius-topright: 3px; -webkit-border-top-right-radius:3px; border-top-right-radius:3px; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius:3px; border-top-left-radius:3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip:padding-box; } #bliss_container.rounded .site-footer{ -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius:3px; border-bottom-right-radius:3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius:3px; border-bottom-left-radius:3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip:padding-box; } /* end basic layout */ /* ========================================================================== Responsive design considerations ========================================================================== */ img, object, embed, figure { max-width: 100%; height:auto; } /* Never apply padding to the #bliss_container. It breaks the layout when the browser is resized. Instead, apply padding to the elements within the container. */ #bliss_container{ width:1024px; margin:40px auto; } @media only screen and (max-width:1023px){ #bliss_container{ width:90%; margin:35px 5%; } } /* also, don't apply padding to the footer. instead, add the padding to footer .content */ .site-header{padding:10px 2.9%} footer .content{ padding:60px 2.9% 10px; } .hasRightNav #bliss_main{padding-right:2.9%;} .hasLeftNav #bliss_main{padding-left:2.9%;} /* the default: layout with no sidebars. */ #bliss_main{ margin:0; padding:0 2.9%; } /* * sidebars * * from standard desktop browsers, down to tablets. min 775px wide * only large screens get both sidebars. * these devices see sidebars on BOTH SIDES * (only these large screens get a left sidebar.) * */ .hasLeftNav #bliss_main{ margin-left:22.45%; padding-left:2.9%;/* must match right nav, below. */ } .sideNav, .leftSideNav{ float:left; width:19.55%;/*auto;/*16.775%;*/ margin-left:-100%; padding-left:2.9%; } /* specific to narrow browsers and tablet computers, less than 875px wide */ @media only screen and (max-width: 874px){ /* at this size, the left sidebar displays below #bliss_main. */ .hasLeftNav #bliss_main{ margin-left:0; } .sideNav, .leftSideNav{ clear:both; display:block; margin:0; width:auto;/* width:auto works, whereas width:100% breaks the layout if your sidebar has any padding. */ float:none; } .leftSideNav ul{ clear:both; } .leftSideNav li{ /* float:left; */ margin-right:2.5em; } } /*end tablet-specific with no left sidebar */ /* our default full width should be seen from large regular screens down to tablets and narrow browsers, min. 680px wide. */ .hasRightNav #bliss_main{ margin-right:22.45%; padding-right:2.9%;/* must match left nav, above. */ } .rightSideNav{ padding-right:0; padding-left:0; float:left; /* don't set a padding-right, just calculate the width and margin-left correctly. */ width:19.55%; margin-left:-22.45%;/* width of the sidebar, PLUS the "padding"... */ } /* small screens: no right hand sidebar either. */ @media only screen and (max-width:679px){ .hasRightNav #bliss_main{ margin:0; padding:0 2.9% 0 2.9%; } .rightSideNav{ clear:both; width:100%; margin:0.6875em auto 0 auto; padding-left:2.9%; } .rightSideNav ul{ clear:both; } .rightSideNav li{ /* float:left; */ margin-right:2.5em; } } /* don't float pics on very small screens: either very narrow browsers, or mobile handhelds. */ @media only screen and (max-width:650px){ /* don't try to wrap text around floated images/objects on small screens. */ #bliss_main .pic, #bliss_main .picR{ display:block; clear:both; float:none; text-align:center; margin:0 auto; } #bliss_main .pic:after, #bliss_main .picR:after{ content:""; display:block; clear:both; height:0; } } /* end general small screens */ /* make the slideshow more responsive */ #bliss_slideshow_container{ margin-top:45px; padding:0 2.9% 0.4375em 2.9%; text-align:center; z-index:10; } #bliss_slideshow{ overflow:hidden; } #bliss_slideshow_container .slide{ width:100%; height:auto; background-position:center; vertical-align:center; position:relative; margin:0 auto; } /* user-selectable color schemes */ #bliss_container{background-color:#efefef;}/* default is light grey */ body.blue{background-color:#007fb1;} body.blue-contrast{background-color:#d8ecf4} body.blue #bliss_container{background-color:#d8ecf4} body.blue a, body.blue h1, body.blue h2, body.blue h3, body.blue h4, body.blue h5, body.blue h6, body.blue-contrast a, body.blue-contrast h1, body.blue-contrast h2, body.blue-contrast h3, body.blue-contrast h4, body.blue-contrast h5, body.blue-contrast h6, body.blue-contrast .contrast, body.blue-contrast .contrast a{ color:#0066cc;/*#0074A2*/ } body.blue a:hover, body.blue-contrast a:hover{ color:#2ac3ff } body.blue a.btn, body.blue .site-header .menu > ul > li > a, body.blue #headerNav > ul > li > a, body.blue .bliss-full-wrap .menu > ul > li > a, body.blue .bliss-full-width-nav, body.blue .bliss-full-wrap .menu{ background-color:#0074A2;color:#d8ecf4 } body.blue-contrast a.btn, body.blue-contrast .site-header .menu > ul > li > a, body.blue-contrast #headerNav > ul > li > a, body.blue-contrast .bliss-full-wrap .menu > ul > li > a, body.blue-contrast .bliss-full-width-nav, body.blue-contrast .bliss-full-wrap .menu{ background-color:#0066cc; color:#d8ecf4 } body.blue a.btn:hover, body.blue .site-header .menu > ul > li > a:hover, body.blue #headerNav > ul > li > a:hover{ background-color:#007fb1;color:#d8ecf4 } body.blue-contrast a.btn:hover, body.blue-contrast .site-header .menu > ul > li > a:hover, body.blue-contrast #headerNav > ul > li > a:hover{ color:#d8ecf4 } body.blue .bliss-full-width-nav > ul > li > a:hover, body.blue #headerNav.bliss-full-width-nav > ul > li > a:hover, body.blue .bliss-full-wrap .menu > ul > li > a:hover{ background-color:#0074A2;color:#2ac3ff } body.blue-contrast .bliss-full-width-nav > ul > li > a:hover, body.blue-contrast #headerNav.bliss-full-width-nav > ul > li > a:hover, body.blue-contrast .bliss-full-wrap .menu > ul > li > a:hover{ color:#2ac3ff } body.blue .contrast, body.blue .contrast a{ color:#007fb1; } body.blue-contrast .logo a, body.blue-contrast .site-slogan, body.blue-contrast .site-slogan a, body.blue-contrast .site-footer a{ color: #d8ecf4; } body.blue .site-footer, body.blue-contrast .site-footer{border-top:1px solid #007fb1;} body.blue .site-footer{background-color:#e2e2e2} body.blue-contrast .site-footer, body.blue-contrast .site-header{background-color:#0094d9} body.green, body.green-contrast .site-header, body.green-contrast .site-footer{background-color:#018113} body.green-contrast{background-color:#c4ffc5} body.green #bliss_container{background-color:#c4ffc5} body.green a, body.green h1, body.green h2, body.green h3, body.green h4, body.green h5, body.green h6, body.green-contrast a, body.green-contrast h1, body.green-contrast h2, body.green-contrast h3, body.green-contrast h4, body.green-contrast h5, body.green-contrast h6{color:#00650f} body.green-contrast .site-slogan{color:#c4ffc5;/*#fff;*/} body.green a:hover, body.green-contrast a:hover{color:#018113}/*0F0*/ body.green a.btn, body.green .site-header .menu > ul > li > a, body.green #headerNav > ul > li > a, body.green .bliss-full-wrap .menu > ul > li > a, body.green .bliss-full-width-nav, body.green .bliss-full-wrap .menu, body.green-contrast a.btn, body.green-contrast .site-header .menu > ul > li > a, body.green-contrast #headerNav > ul > li > a, body.green-contrast .bliss-full-wrap .menu > ul > li > a, body.green-contrast .bliss-full-width-nav, body.green-contrast .bliss-full-wrap .menu{background-color:#00650f;color:#c4ffc5} body.green a.btn:hover, body.green .site-header .menu > ul > li > a:hover, body.green #headerNav > ul > li > a:hover, body.green-contrast a.btn:hover, body.green-contrast .site-header .menu > ul > li > a:hover, body.green-contrast #headerNav > ul > li > a:hover{background-color:#018113;} body.green-contrast .bliss-full-width-nav > ul > li > a:hover, body.green-contrast #headerNav.bliss-full-width-nav > ul > li > a:hover, body.green-contrast .bliss-full-wrap .menu > ul > li > a:hover{background-color:#00650f; color:#c4ffc5;} body.green .contrast, body.green .contrast a, body.green-contrast .contrast, body.green-contrast .contrast a{color:#018113} body.green .site-footer, body.green-contrast .site-footer{border-top:1px solid #018113;background-color:#e2e2e2;} body.maroon, body.maroon-contrast .site-header, body.maroon-contrast .site-footer{ background-color:#540e1f; } /* 949494 {background-color:#921936;} 540040 body.maroon-contrast efefef */ body.maroon .site-header, body.maroon-contrast{background-color:#9f9f9f;}/* That's grey. If you prefer pink, you could use: #ffd9e2;*/ body.maroon #bliss_container{background-color:#e2e2e2;} body.maroon a, body.maroon h1, body.maroon h2, body.maroon h3, body.maroon h4, body.maroon h5, body.maroon h6{color:#540e1f} body.maroon-contrast a, body.maroon-contrast h1, body.maroon-contrast h2, body.maroon-contrast h3, body.maroon-contrast h4, body.maroon-contrast h5, body.maroon-contrast h6{color:#540040} body.maroon a:hover, body.maroon-contrast a:hover{color:#921936} body.maroon a.btn, body.maroon .site-header .menu > ul > li > a, body.maroon #headerNav > ul > li > a{background-color:#540e1f;color:#9f9f9f}/*a3a7a9;*/ body.maroon-contrast a.btn, body.maroon-contrast .site-header .menu > ul > li > a, body.maroon-contrast #headerNav > ul > li > a{background-color:#9f9f9f;/*540e1f;*/color:#540040}/*a3a7a9;*/ body.maroon a.btn:hover, body.maroon .site-header .menu > ul > li > a:hover, body.maroon #headerNav > ul > li > a:hover body.maroon-contrast a.btn:hover, body.maroon-contrast .site-header .menu > ul > li > a:hover, body.maroon-contrast #headerNav > ul > li > a:hover{background-color:#921936/*;color:#540e1f*/} body.maroon .bliss-full-width-nav > ul > li > a:hover, body.maroon #headerNav.bliss-full-width-nav > ul > li > a:hover, body.maroon .bliss-full-wrap .menu > ul > li > a:hover{background-color:#540e1f;} body.maroon .bliss-full-width-nav, body.maroon .bliss-full-wrap .menu{background-color:#949494;/*333;*/} body.maroon-contrast .bliss-full-width-nav, body.maroon-contrast .bliss-full-wrap .menu{ background-color:#e2e2e2;/*540040;*/ } body.maroon-contrast .bliss-full-width-nav{ border-bottom:1px solid #540040; } body.maroon #headerNav.bliss-full-width-nav > ul > li > a, body.maroon .bliss-full-wrap .menu a{ background-color:#949494;color:#540e1f;} body.maroon-contrast #headerNav.bliss-full-width-nav > ul > li > a, body.maroon-contrast .bliss-full-wrap .menu a{color:#540040; background-color:#e2e2e2;} body.maroon #headerNav.bliss-full-width-nav > ul > li .sub-menu li > a, body.maroon .bliss-full-wrap .menu .sub-menu a, body.maroon-contrast #headerNav.bliss-full-width-nav > ul > li .sub-menu li > a, body.maroon-contrast .bliss-full-wrap .menu .sub-menu a{ background-color:inherit; } body.maroon #headerNav.bliss-full-width-nav > ul > li > a:hover, body.maroon .bliss-full-wrap .menu > ul > li > a:hover{/*color:#921936;*/color:#9f9f9f;} body.maroon .shadow, body.maroon-contrast .shadow{box-shadow: 0px 0px 3px #921936;} body.maroon #headerNav.bliss-full-width-nav > ul > li > ul > li > a, body.maroon .bliss-full-wrap .menu li li a{} body.maroon .contrast, body.maroon .contrast a{color:#540e1f} body.maroon-contrast .site-footer{color:#9f9f9f} body.maroon-contrast .contrast, body.maroon-contrast .contrast a, body.maroon-contrast .logo a, body.maroon-contrast .site-slogan, body.maroon-contrast .site-slogan a, body.maroon-contrast .site-footer a{color:#efefef} body.maroon .site-footer{border-top:1px solid #540e1f;background-color:#9f9f9f;} body.brown{background-color:#5a2a00;/*#401300;/*#521800;*/} body.brown #bliss_container{background-color:#fddec2} body.brown a, body.brown h1, body.brown h2, body.brown h3, body.brown h4, body.brown h5, body.brown h6{color:#774111}/*7F2500*//*7F1800*/ body.brown a:hover{color:#E86C0C} body.brown a.btn, body.brown .site-header .menu > ul > li > a, body.brown #headerNav > ul > li > a, body.brown .bliss-full-wrap .menu > ul > li > a, body.brown .bliss-full-width-nav, body.brown .bliss-full-wrap .menu{background-color:#774111;color:#fddec2} body.brown a.btn:hover, body.brown .site-header .menu > ul > li > a:hover, body.brown #headerNav > ul > li > a:hover{background-color:#5a2a00;color:#fddec2} body.brown .bliss-full-width-nav > ul > li > a:hover, body.brown #headerNav.bliss-full-width-nav > ul > li > a:hover, body.brown .bliss-full-wrap .menu > ul > li > a:hover{background-color:#774111;color:#E86C0C;} body.brown .contrast, body.brown .contrast a{color:#5a2a00} body.brown .site-footer{border-top:1px solid #5a2a00;background-color:#e2e2e2} /* make the header 774111 make the nav 5a2a00 ( change 774111 to 5a2a00 ) make the body fddec2 (change 5a2a00 to fddec2 ) update: replaced fddec2 with e9d8c9 replaced e9d8c9 with e9d7a1 */ body.brown-contrast{background-color:#e9d7a1;} body.brown-contrast a, body.brown-contrast h1, body.brown-contrast h2, body.brown-contrast h3, body.brown-contrast h4, body.brown-contrast h5, body.brown-contrast h6, body.brown-contrast .contrast, body.brown-contrast .contrast a{color:#5a2a00;} body.brown-contrast a:hover{color:#E86C0C} body.brown-contrast a.btn, body.brown-contrast .site-header .menu > ul > li > a, body.brown-contrast #headerNav > ul > li > a, body.brown-contrast .bliss-full-wrap .menu > ul > li > a, body.brown-contrast .bliss-full-width-nav, body.brown-contrast .bliss-full-wrap .menu{background-color:#5a2a00;color:#e9d7a1} body.brown-contrast a.btn:hover, body.brown-contrast .site-header .menu > ul > li > a:hover, body.brown-contrast #headerNav > ul > li > a:hover{background-color:#e9d7a1;color:#e9d7a1} body.brown-contrast .bliss-full-width-nav > ul > li > a:hover, body.brown-contrast #headerNav.bliss-full-width-nav > ul > li > a:hover, body.brown-contrast .bliss-full-wrap .menu > ul > li > a:hover{background-color:#5a2a00;color:#E86C0C;} body.brown-contrast .logo a, body.brown-contrast .site-slogan, body.brown-contrast .site-slogan a, body.brown-contrast .site-footer a{color:#e9d7a1} body.brown-contrast .site-footer{color:#c7b57f;} body.brown-contrast .site-header, body.brown-contrast .site-footer{ background-color:#774111; } body.brown-contrast .site-footer{border-top:1px solid #e9d7a1;} body.light{background-color:#EFEFEF;} body.light #bliss_container{background-color:#F8F8F8;} body.light a, body.light h1, body.light h2, body.light h3, body.light h4, body.light h5, body.light h6{color:#656869} body.light a:hover{color:#a3a7a9} body.light a.btn, body.light .bliss-header-nav .menu > ul > li > a, body.light #headerNav > ul > li > a, body.light .bliss-full-width-nav, body.light .bliss-full-wrap .menu{background-color:#656869;color:#F8F8F8} body.light a.btn:hover, body.light .site-header .menu > ul > li > a:hover, body.light #headerNav > ul > li > a:hover{background-color:#a3a7a9;color:#444647} body.light .bliss-full-width-nav > ul > li > a:hover, body.light #headerNav.bliss-full-width-nav > ul > li > a:hover, body.light .bliss-full-wrap .menu > ul > li > a:hover{background-color:#656869;color:#a3a7a9} body.light .contrast, body.light .contrast a{color:#656869} body.light .site-footer{border-top:1px solid #656869} body.dark{background-color:#666666;} body.dark #bliss_container{background-color:#eee;} body.dark .site-header{background-color:#a3a7a9} body.dark a, body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6{color:#444647} body.dark a:hover{color:#656869} body.dark a.btn, body.dark .site-header .menu > ul > li > a, body.dark .bliss-full-wrap .menu > ul > li > a, body.dark #headerNav > ul > li > a, body.dark .bliss-full-width-nav, body.dark .bliss-full-wrap .menu{background-color:#444647;color:#a3a7a9} body.dark a.btn:hover, body.dark .site-header .menu > ul > li > a:hover, body.dark #headerNav > ul > li > a:hover{background-color:#656869;color:#eee} body.dark .bliss-full-width-nav > ul > li > a:hover, body.dark #headerNav.bliss-full-width-nav > ul > li > a:hover, body.dark .bliss-full-wrap .menu > ul > li > a:hover{background-color:#444647;color:#a3a7a9;} body.dark .contrast, body.dark .contrast a{color:#666666} body.dark .site-footer{border-top:1px solid #666666;background-color:#a3a7a9;} /* new higher contrast color schemes. 'blue-contrast' 'green-contrast' 'maroon-contrast' 'brown-contrast' not now: 'dark-contrast' */ /* ========================================================================== Don't Put Custom Style Rules Here ========================================================================== */ /* Best practice is to create a child theme. That way, when you update this theme in the future your custom rules won't be overwritten. */ /* Print styles go last so they will override any style declarations that weren't assigned to a media query. */ /* ============================================================================= Print styles. ========================================================================== */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ a, a:visited { color: #444 !important; text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } .do-not-print { display: none; } #comments { page-break-before: always; } body { width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 1.4; word-spacing: 1.1pt; letter-spacing: 0.2pt; font-family: Garamond,"Times New Roman",Times, serif; color: #000; background: none; font-size: 12pt; } h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, sans-serif; } h1 { font-size: 19pt; } h2 { font-size:17pt; } h3 { font-size:15pt; } h4,h5,h6 { font-size:12pt; } code { font: 10pt Courier, monospace; } blockquote { margin: 1.3em; padding: 1em; } img { display: block; margin: 1em 0; } a img { border: none; } table { margin: 1px; text-align:left; } th { border-bottom: 1px solid #333; font-weight: bold; } td { border-bottom: 1px solid #333; } th, td { padding: 4px 10px 4px 0; } caption { background: #fff; margin-bottom: 2em; text-align: left; } thead { display: table-header-group; } tr { page-break-inside: avoid; } } /* END print media */