` wraps around the content title, subtitle, and meta information.
```html_example
Putting God First
January 2015 | 2 comments
```
*/
.content-title {
margin-bottom: 1rem;
}
@media screen and ( min-width: 781px ) {
.excerpt img ~ .content-title,
.excerpt img ~ .content-title + .entry {
margin-left: 137px;
}
}
#wrapup .content-title h1 {
margin: 0;
}
.content-title .subtitle {
font-size: 1.375rem;
}
/*doc
---
title: Excerpt Metadata
name: excerpt-metadata
category: Content
---
Information about a post or page that appears underneath the title. Styles vary for information in an excerpt and a normal page itself.
```html_example
```
Example:
http://www.ananda.org/clarity-magazine/tag/ananda/
*/
.excerpt-metadata,
.excerpt-metadata a {
font-size: 1rem;
color: #808080;
}
.excerpt-metadata-tags {
margin-top: 1rem;
}
.excerpt-metadata-tags,
.excerpt-metadata-tags a {
color: #C8C8C8;
}
/*doc
---
title: More Content
name: content-more
category: Content
---
More content, further information about an article, or about an author
```html_example
This article is excerpted from a talk given by Swami Kriyananda in Assisi, Italy on October 24, 1999.
Related reading: Autobiography of a Yogi by Paramhansa Yogananda
The New Path – My Life with Paramhansa Yogananda by Swami Kriyananda
```
*/
.content-more {
font-style: italic;
}
/*doc
---
title: Banners
name: banner
category: Content
---
A large banner with text that goes across the top of the content, usually
including the title of a page and its description.
*/
/**
* Banner styles
*
* For large screens, a background image is used to take advantage of the background-size: cover; property.
* For small screens, an actual image is used to place the background
*/
.banner-image {
background-size: cover;
background-repeat: no-repeat;
}
.page-id-23958 .banner-image.crop-right {
background-position: 100% 0%;
}
.banner-text {
font-size: 18px;
}
.banner-text p {
margin-top: 0;
}
.banner-black .banner-heading {
color: #000;
}
.banner-black .banner-text {
color: #1A1A1A;
}
.banner-black .banner-fade {
background-color: #FFF;
}
.banner-white .banner-heading,
.banner-white .banner-text {
color: #FFF;
}
.banner-white .banner-fade {
background-color: #000;
}
.banner-fade {
height: 100%;
width: 100%;
position: absolute;
margin-left: -1em;
}
.banner-fade-0 {
opacity: 0;
}
.banner-fade-20 {
opacity: 0.2;
}
.banner-fade-30 {
opacity: 0.3;
}
.banner-fade-40 {
opacity: 0.4;
}
.banner-fade-20,
.banner-fade-30,
.banner-fade-40 {
filter: blur(40px);
-webkit-filter: blur(40px);
-moz-filter: blur(40px);
-o-filter: blur(40px);
-ms-filter: blur(40px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='35'); /* IE9 */
}
.banner-fade-50 {
opacity: 0.5;
}
.banner-fade-60 {
opacity: 0.6;
}
.banner-fade-70 {
opacity: 0.7;
}
.banner-fade-50,
.banner-fade-60,
.banner-fade-70 {
filter: blur(70px);
-webkit-filter: blur(70px);
-moz-filter: blur(70px);
-o-filter: blur(70px);
-ms-filter: blur(70px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='70'); /* IE9 */
}
.banner-slider .soliloquy-container {
max-width: 100% !important;
max-height: none !important;
height: auto !important;
}
.banner-slider .soliloquy-container .soliloquy-image {
width: 100%;
}
/* Hide the normal h1 when there is a banner */
.banner-page #mainArticleInner .post > h1 {
display: none;
}
.banner-single #currentPathLine {
padding: 0;
opacity: 0.3;
}
.banner-black #currentPathLine {
color: #777;
}
.banner-black #currentPathLine a {
color: #000;
}
.banner-white #currentPathLine {
color: #999;
}
.banner-white #currentPathLine a {
color: #F0F0F0;
}
/**
* Banner btn overrides
*/
#wrapup .banner .btn {
margin-right: 12px;
max-width: 256px;
}
@media screen and (min-width: 781px) {
#wrapup .banner-btns {
padding-left: 0;
}
}
#wrapup .banner-btns li {
list-style: none;
}
.banner-caption {
z-index: 2;
}
.banner-title {
/* Same specs as the "mainContent" area, so the texts align */
max-width: 974px;
margin: 0 auto;
height: 100%;
position: relative;
z-index: 2;
}
@media screen and ( min-width: 1325px ) {
.layout-3-column .banner-title {
max-width: 1200px;
}
}
.banner-title-inner {
position: absolute;
bottom: 0;
left: 0;
width: 73%;
padding: 0 10px;
}
@media screen and ( max-width: 781px ) {
.banner-title-inner {
width: 100%;
}
}
.single-post .banner-title-inner {
padding: 0;
left: 13.5%;
}
@media screen and ( min-width: 1325px ) {
.layout-3-column.single-post .banner-title-inner {
left: 12.5%;
}
}
@media screen and ( min-width: 781px ) {
.banner-title-inner {
padding: 0 20px;
}
}
@media screen and (max-width: 780px) {
.single-post .banner-title-inner {
padding-left: 12px;
padding-bottom: 15px;
left: 0;
}
.layout-1-column .banner-title-inner {
left: 13.5%;
padding-left: 0;
}
}
/**
* Bring the author information up into the banner
*/
.layout-1-column .banner-title-inner {
bottom: 45px; /* half the height of the author image */
}
.layout-1-column.banner-page .content-titlemeta {
margin-top: -45px;
}
.layout-1-column.banner-page .content-titlemeta .author-photo {
position:absolute;
z-index: 100;
width: 100%;
margin-top: -12px;
}
.layout-1-column.banner-page .content-titlemeta .author-name {
margin-top: 90px; /* Height of the author image */
}
/**/
.banner-title-inner #currentPathLine,
.banner-title-inner #currentPathLine > a {
color: #dedcd8;
opacity: 0.9;
font-size: 0.938rem;
}
.single-post .banner-title-inner #currentPathLine,
.single-post .banner-title-inner #currentPathLine > a {
color: white;
}
.banner-title-inner #currentPathLine > a:hover {
color: #ffffff;
}
@media screen and ( max-width: 781px ) {
/* Hide banner breadcrumbs on mobile, they can take up a lot of space */
.banner-title-inner #currentPathLine {
display: none;
}
}
.banner-title-inner .content-title > h1 {
color: #FEFCF8;
font-size: 2.6rem;
line-height: 1.05;
text-shadow: 1px 1px 1px rgba(30, 30, 30, 1);
}
@media screen and ( max-width: 781px ) {
.banner-title-inner .content-title > h1 {
font-size: 2rem;
}
}
@media screen and ( min-width: 1325px ) {
.layout-3-column .banner-title-inner .content-title > h1 {
font-size: 3rem;
}
}
.banner-title-inner .content-title.with-subtitle,
.banner-title-inner .content-title > h1 + .subtitle,
.banner-title-inner .content-title > .content-titlemeta .metadata {
margin-top: 0.3rem; /* Space things out a little better */
}
.banner-title-inner .content-title > h1 > .subtitle,
.banner-title-inner .content-title > h1 + .subtitle,
.banner-title-inner .content-title > .content-titlemeta .metadata > a {
color: #dedcd8; /* #ceccc8 is a nice gray */
}
.banner-fade-effect {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.59;
background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 60%, rgba(0,0,0,0.81) 100%);
z-index: 1;
display: none;
}
@media screen and ( max-width: 500px ) {
/* Move the fade effect higher when the text goes higher */
.banner-fade-effect {
background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 30%, rgba(0,0,0,0.81) 100%);
}
}
/* Only displays the fade effect when the h1 title is being shown on top of the banner) */
.banner-title + .banner-fade-effect {
display: block;
}
.mobile-banner-text {
padding: 0 12px;
}
/**
* On mobile and smaller layouts, the banner image, caption and buttons are all stacked.
*
* To do this, we hide the background-image and show the real image.
*/
@media screen and (max-width: 780px) {
.banner {
margin-bottom: 1em;
}
.banner-image {
background-size: auto 250px; /* This should probably be done according to height of screen */
padding-top: 0;
height: 250px;
position: relative;
}
.banner-single .soliloquy-container {
margin-bottom: 0 !important;
}
/* This lines the caption up with the article */
.banner-caption,
.banner-btns {
padding: 0 16px 0 11px;
}
.banner-caption p {
margin: 10px 0;
}
.banner-fade,
.banner-heading.invisible,
.banner-text.invisible {
display: none;
}
/* The caption no longer overlaps, so default back to black text. */
.banner-white .banner-heading {
color: #262626;
}
.banner-white .banner-text {
color: #222;
}
/* The breadcrumbs move back outside the banner. Restore them to their default colors. */
.banner-black #currentPathLine,
.banner-white #currentPathLine {
color: #BBBBBB;
}
.banner-black #currentPathLine a,
.banner-white #currentPathLine a {
color: #888888;
}
}
/* IE doesn't support the blur filter, so let's make text more readable in a simpler way.
*
* IE10+ specific styles go here.
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (min-width: 781px) {
.banner-image {
/*opacity: 0.4;*/
}
.banner-black .banner-fade,
.banner-white .banner-fade {
background-color: transparent;
}
/* Let's make all text black */
.banner-white .banner-heading,
.banner-white .banner-text {
color: #000;
}
}
@media screen and (min-width: 781px) {
.banner {
position: relative;
margin-bottom: 0;
}
.banner-image {
height: 250px;
overflow: hidden;
position: relative; /* Makes overflow: hidden; work */
}
.banner-image.crop-equal {
background-position: 50% 50%;
}
.banner-image.crop-left {
background-position: 10% 50%;
}
.banner-image.crop-right {
background-position: 90% 50%;
}
.banner-fade {
-webkit-transform: translate3d(0, 0, 0); /* Makes overflow: hidden; work in Safari 8 */
}
h1.banner-heading {
margin: 16px 0 8px 0;
font-size: 3.375rem;
font-weight: normal;
letter-spacing: -0.5px;
}
.banner-heading .subtitle {
line-height: 1.4;
font-size: 2.5rem;
}
.banner-btns {
position: absolute;
bottom: 0;
transform: translateY(50%);
left: 50%;
margin: 0 0 0 -350px;
}
.banner-btns li {
float: left;
}
.banner-caption {
font-family: Georgia, serif;
line-height: 1.3;
position: absolute;
width: 430px;
min-width: 20em;
left: 50%;
margin-left: -350px;
}
/*doc
---
title: Banner Quotes
name: banner-quotes
category: Content
---
Quotes that go in the banner, in the caption area.
```html_example
Quote text goes here. Quotes are added automatically.
—Who the Quote Is By
```
*/
.banner-text q,
.banner-text .attribution {
opacity: 0.6;
font-size: 1.25rem;
line-height: 1.4;
}
.banner-text q {
font-style: italic;
}
}
/* Soliloquy sliders are full-width for this media selector */
@media screen and ( max-width: 1199px ) {
.banner-slider .soliloquy-item .fade {
display: none;
}
}
@media screen and ( min-width: 1200px ) {
/* Image will fill the width */
.banner {
margin-bottom: 0;
}
.banner-image {
height: 300px;
}
.banner-image.crop-equal {
background-position: 50% 70%;
}
.banner-image.crop-left {
background-position: 10% 70%;
}
.banner-image.crop-right {
background-position: 90% 70%;
}
.banner-btns {
transform: translateY(-40%);
}
.banner-slider .soliloquy-container .soliloquy-image {
width: 80%;
}
.banner-slider .soliloquy-item .fade {
max-width: none;
width: 80% !important;
margin-left: -40% !important;
}
}
@media screen and ( min-width: 1700px ) {
.banner-image {
height: 400px;
}
}
/* If a child site's homepage has a banner, use these styles to reposition the site's navigation menu over the banner */
.banner-page.page-template-template-child-site-home-page-no-posts .sectionnav {
position: absolute;
width: 100%;
max-width: none !important;
height: 250px;
left: 50%;
transform: translateY(-250px) translateX(-50%);
}
.banner-page.page-template-template-child-site-home-page-no-posts #wrapup .sectionnav img {
max-height: 66%;
}
.banner-page.page-template-template-child-site-home-page-no-posts .sectionnav-title h1 {
font-size: 2.5rem !important;
}
@media screen and (min-width: 1200px) {
.banner-page.page-template-template-child-site-home-page-no-posts .sectionnav {
height: 300px;
transform: translateY(-300px) translateX(-50%);
}
}
@media screen and (min-width: 1700px) {
.banner-page.page-template-template-child-site-home-page-no-posts .sectionnav {
height: 400px;
transform: translateY(-400px) translateX(-50%);
}
}
/*doc
---
title: Breadcrumbs
name: breadcrumb
category: Content
---
Breadcrumbs telling what section(s) the content is in.
*/
.breadcrumbs {
margin-bottom: 0.25rem;
}
#currentPathLine {
color: #bbbbbb;
font-size: 0.875rem;
line-height: 1.4;
clear: both;
}
#currentPathLine a {
color: #6B9BCA;
}
/*doc
---
title: Images
name: image
category: Content
---
*/
/* These styles could probably be cleaned up so that they are not overrides -- limiting changes for now though */
@media screen and ( max-width: 500px ) {
#wrapup .size-medium,
#wrapup .size-large,
#wrapup .size-full {
float: none;
width: 500px;
max-width: 100%;
margin-bottom: 1rem;
}
}
/**
* Images
*
* Borders and more.
*
*/
#mainArticle img,
#articleInfoColumn img,
#rightColumnContent img,
#bookBox img,
#tooltip img,
#wrapup .largeBorder {
float: left;
clear: left;
margin: 4px 12px 18px 0;
max-width: 100%;
}
.cs-content #mainArticle img,
.cs-content #articleInfoColumn img,
.cs-content #rightColumnContent img,
.cs-content #bookBox img,
.cs-content #tooltip img,
.cs-content #wrapup .largeBorder {
float: none;
clear: none;
margin: 4px 12px 18px 12px;
}
/* Let Cornerstone selection box work correctly on Cornerstone preview */
#mainArticle .cs-preview-element-wrapper > img.x-img {
float: none;
}
.container_12 img /* Featured item on homepage */ {
max-width: 100%;
height: auto;
}
.wp-caption {
max-width: 100%;
}
#mainArticle img {
height: auto;
}
#mainArticle .aligncenter {
float: none;
clear: both;
margin: 0 auto 12px;
display: block;
}
/* Add a margin if the photo is inside a paragraph, which WordPress is likely to add */
#mainArticle p img {
margin-top: 12px;
}
#wrapup .pair img,
#wrapup .tooltipContent img {
margin-bottom: 2px;
margin-top: 2px;
}
#articleInfoColumn img,
#rightColumnContent img {
margin: 1px 8px 12px 0;
}
#articleInfoColumn div.pair img {
margin-bottom: 4px;
}
#articleInfoColumn .pair img {
margin-bottom: 4px;
}
#mainArticle img.icon {
padding: 0;
background: none;
border-width: 0;
float: none;
margin: 0;
}
#videoInfoColumn .carousel img {
margin-bottom: 0;
}
#wrapup .noBorder {
padding: 0;
border-width: 0;
background: none;
}
#wrapup .noFloat {
float: none;
}
.caption,
.wp-caption {
margin: 4px 12px 18px 0;
float: left;
clear: left;
}
.caption{ font-style: italic; }
#wrapup .caption img,
#wrapup .wp-caption img {
margin-bottom: 4px;
margin-top: 0; /* The div.caption will have its own margins, we expect */
float: none;
}
#wrapup .caption p,
#wrapup .wp-caption p {
font-size: 0.875rem; /* 2 extra pixels margin left and right because it will usually be under an image with a border
The margin was 12px on the bottom, but it was doubling up with the floated div.caption bottom margin */
margin: 0;
}
#mainArticle .caption p em {
font-style: normal;
}
/* Extra IDs here to override other styles, for IE 8 */
#wrapup #mainContent .caption h2,
#wrapup #mainContent .wp-caption h2 {
margin: 0 2px 0;
}
#mainArticle .verticalStack img {
margin-top: 4px;
margin-bottom: 4px;
}
#mainArticle .verticalStack {
margin-bottom: 18px;
}
/**
* Excerpts
*
*/
.excerpt {
margin: 18px 0;
}
body.author .excerpt {
margin-bottom: 26px;
}
body.author #mainArticle .excerpt p {
margin-bottom: 5px;
}
/* for author photo */
.excerpt > .author {
float: left;
}
@media screen and ( max-width: 580px ) {
.excerpt > .author {
float: right;
}
#wrapup .excerpt > .author > .author-photo > a > img {
margin: 0 0 12px 12px;
}
}
@media screen and ( min-width: 581px ) {
/* make sure entry text doesn't wrap around author photo */
.excerpt > .entry p {
overflow: hidden;
}
/**
* Help text to stay indented, e.g. on http://ananda.staging.wpengine.com/clarity-magazine/2015/02/.
* Not a perfect solution if the excerpt text is very short... see http://ananda.staging.wpengine.com/clarity-magazine/2014/page/3/
*
* @since 2015-July-26
*/
#wrapup .excerpt .author-photo > a > img {
margin-bottom: 3em;
}
}
/*doc
---
title: Emphasis Block
name: emphasis-block
category: Content
---
A block of text, such as the goal of a page, that needs a significant highlight.
```html_example
Sign Up
Click on the button below.
Sign Up
```
*/
/* */
.emphasis {
background: #eff7ff; /* EFF7FF light blue; 5673AD is dark */
padding: 1em;
margin: 0 0 10px 0;
}
#wrapup .emphasis>:first-child {
margin-top: 0;
}
/*doc
---
title: Content Blocks
name: content-blocks
category: Content
---
"More content" blocks, which can include sliders, arbitrary HTML, multi-column layouts, etc.
*/
.content-block:last-child {
border-width: 0;
}
.content-block-event {
margin-bottom: 25px;
}
.content-block .full-width {
max-width: 576px;
margin: 0 auto;
}
.content-block-event p a.button {
display: inline;
width: auto;
}
.content-empty .content-block-1 {
padding-top: 0;
}
@media screen and (max-width: 551px) {
/* Wrap UL around floated images */
.indent-thumbnail ul {
display: inline-block;
}
}
@media screen and (min-width: 651px) {
.indent-thumbnail {
margin-left: 135px;
}
}
#mainArticle .clearfix > h3 {
margin-top: 0;
}
#mainArticle .entry > h3 {
margin-top: 24px;
margin-bottom: 12px;
}
#mainArticle .content-block h2:first-child {
margin-top: 0;
}
/*doc
---
title: Accordions
name: accordion
category: Content
---
Accordions as used in [Frequent Questions][http://www.ananda.org/support-ananda/frequent-questions/]
*/
.accordion-title {
color: #0575CA;
cursor: pointer;
}
.accordion-title:before {
content: url(/wp-content/themes/ananda-worldwide/images/faq-triangle.svg);
position: absolute;
display: inline-block;
-ms-transform: rotate(270deg) translateY(-36px) translateX(-10px);
-webkit-transform: rotate(270deg) translateY(-36px) translateX(-10px);
transform: rotate(270deg) translateY(-36px) translateX(-10px);
}
.accordion-title.open:before {
-ms-transform: translateX(-40px) translateY(12px);
-webkit-transform: translateX(-40px) translateY(12px);
transform: translateX(-40px) translateY(12px);
}
#mainArticle .accordion > h2:first-child {
margin-top: 0;
}
/*doc
---
title: Slider
name: slider
category: Content
---
Changes to the default slider CSS created by Soliloquy.
*/
/* Overrides that we can remove someday */
#mainArticle .soliloquy-slider img {
margin: 0;
}
#mainArticle.fullWidth ul.soliloquy-slider,
#wrapup > .soliloquy-container {
max-width: 100% !important;
padding: 0;
margin: 0;
}
#mainArticle .soliloquy-slider li {
padding-right: 0;
overflow: hidden; /* We had a scroll bar appearing sometimes */
}
#mainArticle .soliloquy ul {
padding: 0;
}
/** INTEGRATE INTO ALL CODE **/
/* Fade out the edges of an image */
.soliloquy-item .fade {
height: 100% !important;
width: 100% !important;
max-width: 974px;
margin: 0 auto !important;
left: 50%;
margin-left: -487px !important; /* It will always be 974px, we hide it otherwise */
position: absolute !important;
top: 0;
display: block;
}
@media screen and ( max-width: 974px ) {
.soliloquy-item .fade {
display: none; /* Homepage slider doesn't show on mobile anyway, but just in case */
}
}
/**
*
*/
/*doc
---
title: Form after content
name: form-after-content
category: Content
---
Form that follows the content (like a subscribe form or something). For an example,
see [Clarity Magazine posts][http://ananda.staging.wpengine.com/clarity-magazine/2015/01/29/hello-world/].
*/
.widget-area-after-post-content > .gform_widget {
background: rgba( 107, 155, 202, .07 );
padding: 1.75em 1.75em 1em 1.75em;
}
#mainArticleInner .widget-area-after-post-content > .gform_widget > h2 {
margin-top: 0;
}
/* Line it up with .bottom-label */
.subscribe_wrapper.gform_wrapper input[type=text] {
text-indent: 0.9em;
}
.subscribe_wrapper.gform_wrapper {
margin: 0;
}
/* Position email input and subscribe button next to each other horizontally */
@media screen and ( min-width: 781px ) {
.widget-area-after-post-content .subscribe_wrapper .gform_body {
margin-top: 0;
width: 69%;
margin-right: 1%;
float: left;
}
.widget-area-after-post-content .subscribe_wrapper .gform_footer {
width: 30%;
clear: none;
display: inline-block; /* It should work without this, but it don't */
}
/* Modifying .btn styles */
.widget-area-after-post-content .subscribe_wrapper input[type="button"],
.widget-area-after-post-content .subscribe_wrapper input[type="submit"] {
margin: 0;
}
}
/*doc
---
title: Gravity Form Image
name: gravity-form-image
category: Base CSS
---
Example in the subscribe form after the content here, sort of an icon for the form:
http://ananda.staging.wpengine.com/clarity-magazine/2015/01/29/hello-world/
This code is problematic in that, as written, every form in the widget area
after the content must have an image.
*/
.gform-image svg,
.gform-image img {
width: 100%;
}
#mainArticle .gform-image {
position: absolute;
}
/* Scale and screen the image */
@media screen and ( max-width: 781px ) {
.widget-area-after-post-content > .gform_widget {
overflow: hidden;
}
.gform-image {
top: 21%;
left: -14%;
transform: scale(4);
z-index: -1;
opacity: 0.8;
}
.gform-image > svg > path {
fill: #eee !important;
}
}
/* Position image to left of content */
@media screen and ( min-width: 781px ) {
#mainArticle .gform-image {
padding: 1.75em;
top: 0;
right: 10%;
width: 20%;
}
#mainArticle .widget-area-after-post-content > .gform_widget > h2,
.widget-area-after-post-content > .gform_widget .gform_heading {
width: 70%;
margin-right: 26%;
}
}
/***************************************************
*
* LAYOUT: METABAR
*
***************************************************/
/**
* Metabar
*
* Shows additional information / actions connected to the article, such as author, share, etc.
*
*/
.metabar .widget:first-child {
margin-top: 0px;
}
.metabar .widget {
margin: 3.25em 0px;
}
.author-photo {
margin-bottom: 12px;
}
@media screen and ( max-width: 780px ) {
.single-post .author-photo {
float: left;
margin-bottom: 12px;
width: 121px;
}
.author-name.metadata {
margin-top: 15px;
}
}
#wrapup .author-photo > a > img {
border-radius: 100px; /* Should be the width of the column, or more */
width: auto;
height: auto; /* The plugin that outputs the image adds a width and height */
display: block;
max-width: 90px;
}
#wrapup .metabar .author-photo > a > img {
max-width: 80px;
}
@media screen and ( min-width: 1325px ) {
.layout-3-column #wrapup .metabar .author-photo > a > img {
max-width: 100px;
width: 100px;
}
}
/* Note: I don't know what the above rule is intending to target, but I know this is the size we want for posts, hence the new rule. Better safe than sorry! -- Heze */
.single-post #wrapup .metabar.with-banner .author-photo > a > img {
max-width: 100px;
}
.single-post .metabar.with-banner .author {
position: absolute;
top: -50%;
z-index: 7;
}
/***************************************************
*
* LAYOUT: SIDEBAR
*
***************************************************/
/* IE 6 likes to wrap text when Firefox wouldn't; therefore we clear by default */
#wrapup #rightColumn p,
#wrapup #articleInfoColumn p {
clear: both;
}
#utilities {
font-size: 0.875rem;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
background-image: url(images/layout/horizontal-dotted-border.gif);
background-repeat: repeat-x;
background-position: bottom;
}
#utilities a {
color: #777777;
line-height: 18px;
}
/**
* Hide the utilities above the footer, on the home page
*/
body.home #wrapup .articleActionsBar ul {
/*display: none;*/
}
#rightColumn .articleActionsBar {
margin-top: 5px;
padding-top: 0; /* Overriding default for .articleActionsBar, used near the footer */
padding-left: 10px;
font-size: 0.875rem;
height: 65px;
background-image: none;
}
body #mainCenter .articleActionsBar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: visible;
}
#rightColumn .articleActionsBar li {
line-height: 3;
display: block;
float: none;
}
#wrapup #rightColumn .articleActionsBar a {
color: #777777;
}
#utilities p,
#utilities form,
#utilities input {
margin: 0;
}
#utilities a {
line-height: 2;
}
#rightColumn h2 {
font-size: 1.125rem;
margin-top: 12px;
margin-bottom: 4px;
font-weight: 600;
}
#rightColumn h3 {
font-size: 1rem;
margin-top: 12px;
margin-bottom: 4px;
font-weight: 600;
}
#rightColumn .widget h3 {
font-size: 1rem;
}
#rightColumnContent {
padding: 0px 12px;
}
.home #rightColumnContent {
padding-top: 12px;
}
#articleInfoColumn blockquote {
margin: 0 0 4px 0;
padding: 0;
}
#articleInfoColumn p,
#rightColumnContent p {
margin: 0 0 12px;
padding: 0;
line-height: 1.2;
}
#articleInfoColumn li p,
#rightColumnContent li p {
font-size: 1rem;
}
#articleInfoColumn h1 a,
#articleInfoColumn h2 a {
color: #4d97e3;
}
#articleInfoColumn h2 {
color: #555;
}
#articleInfoColumn h2,
#supportAnandaBox h1 {
font-size: 1.25rem;
font-weight: 600;
}
#articleInfoColumn h2 {
margin-top: 18px;
margin-bottom: 4px;
clear: both;
}
#articleInfoColumn h2 + h3,
#articleInfoColumn h2 + div > h3:first-child {
margin-top: 4px;
}
#articleInfoColumn > h2:first-child,
#articleInfoColumn div:first-child > h2:first-child,
#articleInfoColumn span:first-child > h2:first-child /* Front-End Editor plugin adds
s */ {
margin-top: 0;
}
#articleInfoColumn h3 {
font-size: 1rem;
margin: 22px 0 4px 0;
}
#articleInfoColumn h3 .subtitle {
font-weight: normal;
}
#articleInfoColumn h4 {
font-size: 0.875rem;
font-style: italic;
margin: 18px 0 4px 0;
}
#articleInfoColumn p.subtitle,
#articleInfoColumn div.subtitle {
font-style: italic;
margin: 4px 0 4px 0;
}
#supportAnandaBox a {
display: inline;
}
#articleInfoColumn ul,
#rightColumnContent ul {
/* margin: 4px 0 8px 0; */
padding: 0;
list-style-type: none;
line-height: 1.2;
}
#articleInfoColumn ol,
#rightColumnContent ol {
padding: 0 0 0 20px;
line-height: 1.2;
}
#articleInfoColumn li {
clear: left;
}
#wrapup #articleInfoColumn li,
#wrapup #rightColumnContent li {
margin: 0.5em 0 0 0;
}
#wrapup #articleInfoColumn {
color: #808080;
}
#wrapup #articleInfoColumn li a,
#wrapup #rightColumnContent li a {
color: #4d97e3;
}
#wrapup #articleInfoColumn strong, #wrapup #articleInfoColumn li strong, #wrapup #rightColumnContent li strong {
color: #707070;
}
#wrapup #articleInfoColumn h2 > a,
#wrapup #articleInfoColumn h3 > a,
#wrapup #articleInfoColumn h4 > a {
color: #4d97e3;
}
.home #wrapup #rightColumnContent a {
color: #4d97e3;
}
/* Subscription form */
#rightColumn .gform_wrapper {
/* background: url(images/layout/horizontal-dotted-border.gif) repeat-x bottom left; */
/* padding-bottom: 1em; */
}
#wrapup #rightColumn .gform_wrapper .ginput_complex label {
color: #999;
}
#rightColumn .gform_wrapper .gform_heading {
margin-bottom: 0;
}
#rightColumn {
margin-top: 20px;
}
.home #rightColumn {
margin-top: 0;
}
#articleInfoColumn > #rightColumn:first-child {
margin-top: 0;
padding-top: 0;
}
/**
* Homepage right column overrides
*/
.home #rightColumnContent h1 {
margin-top: 15px;
clear: left;
}
.home #rightColumnContent h1:first-child {
margin-top: 0;
}
.home #utilities,
.home #donateSidebar,
.home #rightColumnContent p {
font-size: 1rem;
}
.home #rightColumn h3 {
font-size: 1rem;
margin-top: 0 !important;
}
.home #wrapup #rightColumn p {
clear: none;
}
/* Mini-site navigation */
#articleInfoColumn ul li.current_page_item a {
font-weight: 600;
color: #222;
}
@media screen and ( min-width: 781px ) {
/**
* Adjustments for not having a right column, in appropriate cases
*/
.withRightVideoColumn {
margin-right: 180px;
}
/* This makes #mainArticle one column, 100% width */
.withoutRightInfoColumn {
margin-right: 0;
}
/* Oh, but normal content needs the right margin or it gets too long */
#wrapup .withoutRightInfoColumn h1,
#wrapup .withoutRightInfoColumn h2,
#wrapup .withoutRightInfoColumn h3,
#wrapup .withoutRightInfoColumn p,
#wrapup .withoutRightInfoColumn li {
margin-right: 27%;
}
#wrapup .withoutRightInfoColumn .articleActionsBar li {
margin-right: 25px;
}
#wrapup .withoutRightInfoColumn .searchResults p {
margin-right: auto;
}
/* Ah, but some content should still not have the right margin; it needs the full width */
#wrapup .indexList li {
margin-right: 0 !important;
}
/**
* Fixing sidebar img + caption
*/
/* Clearfix from http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.pair:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
.pair {
display: inline-block;
}
* html .pair {
height: 1%;
}
.pair {
display: block;
}
#wrapup .pair img {
float: left;
}
#wrapup .pair img.alignright {
float: right;
}
#wrapup #rightColumn .pair p,
#wrapup #articleInfoColumn .pair p {
clear: none;
}
}
/*doc
---
title: Section Navigation
name: sectionnav
category: Sidebar
---
Title, logo, and navigation for a section of the website (e.g. Your Spiritual Questions Answered, Clarity Magazine, etc.).
```html_example
```
*/
@media screen and ( min-width: 781px ) {
.sectionnav {
margin-top: 30px;
}
}
#wrapup .sectionnav img {
margin: 0 auto;
display: block;
float: none;
width: auto;
max-height: 185px;
}
.sectionnav-with-logo-background {
position: relative;
}
.sectionnav-with-logo-background img {
position: absolute;
z-index: -1;
margin: auto !important; /* Centered vertical and horizontal */
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.2;
height: 100%;
width: auto;
}
.sectionnav-title {
clear: both;
}
.sectionnav h1 {
text-align: center;
font-size: 1.625rem;
margin-top: 1.2em;
margin-bottom: 0;
}
.sectionnav-with-logo-stacked .sectionnav-title > h1 {
margin-top: 0;
}
#wrapup .sectionnav-navigation > ul {
width: 90%;
margin: 0 auto;
list-style: none;
}
#wrapup .sectionnav-navigation > ul > li {
width: 49%;
float: left;
clear: none;
font-size: 0.875rem;
letter-spacing: 1px;
}
#rightColumn .sectionnav-navigation > ul > li:nth-child(2n+1) {
clear: left;
}
#rightColumn .sectionnav-navigation > ul > li:last-child:nth-child(odd) {
width: 100%;
}
#wrapup .sectionnav-navigation > ul > li > a {
color: #818181;
display: block;
padding: 4px;
text-align: center;
text-transform: uppercase;
}
/**
* Sectionnav on the main page of a section
*/
#mainCenter > .sectionnav {
max-width: 570px;
margin: -1.3rem auto 1.7rem; /* -1.5rem reverses the margin of #mainCenterBorderRight */
}
#mainCenter > .sectionnav-with-logo-background img {
opacity: 0.15;
top: 25px;
}
#mainCenter > .sectionnav > .sectionnav-title > h1 {
font-size: 2.25rem;
}
#mainCenter > .sectionnav > .sectionnav-title:after {
content: "";
border: 0;
background: rgba( 151, 151, 151, 0.37 );
margin: 1.5rem 0 0.5rem;
height: 1px;
width: 100%;
display: block;
visibility: visible;
}
.sectionnav .sectionnav-subtitle {
text-align: center;
margin: 0;
}
#mainCenter > .sectionnav + hr {
display: none;
}
/*doc
---
title: Bookbox
name: bookbox
category: Base CSS
---
A table of contents in the sidebar, used for online books.
*/
#bookBox {
margin: 0 0 25px 0;
padding: 10px 10px 0 10px;
}
#bookBox p,
#bookBox li {
margin-top: 0;
}
#bookBox p {
margin-bottom: 8px;
}
#rightColumn #bookBox ol,
#rightColumn #bookBox ul {
margin-left: 0;
margin-top: 0;
padding-left: 0;
list-style-type: none;
}
#bookBox li {
margin: 0 0 2px 0;
}
#wrapup #bookBox h3,
#wrapup #bookBox .menu-item-has-children > a {
color: #808080;
}
/*doc
---
title: Side Navigation
name: side-navigation
category: Base CSS
---
Side navigation block, for navigation within a page or for consistent use within a section. It should be placed on the right side of the content, or above the content in a collapsed form when responsive.
```html_example
Section Name
```
#Examples
[The Heart of Yogananda](http://www.ananda.org/heart-of-yogananda/), in-page navigation
*/
.secondary-navigation {
padding: 20px 0;
background: #fcf6e2;
}
#wrapup .secondary-navigation > h1,
#wrapup .secondary-navigation > h2 {
margin: 0 20px 8px;
}
#wrapup .secondary-navigation > ul,
#wrapup .secondary-navigation > ul > li {
margin: 0;
padding: 0;
list-style: none;
}
#wrapup .secondary-navigation > ul > li > a {
padding: 0.2em 20px;
display: block;
}
#wrapup .secondary-navigation > ul > li > a:hover {
background: #fae8ba;
text-decoration: none;
}
@media screen and (max-width: 780px) {
/* They'll be stacked */
.secondary-navigation {
margin: 1em 0;
}
}
/**
* Further reading
*
* Related and most popular
*/
@media screen and ( min-width: 781px ) {
.further-reading.with-menu {
width: auto;
margin-left: -50px;
}
}
@media screen and ( min-width: 981px ) {
.further-reading.with-menu {
width: auto;
margin-left: -130px;
}
}
#mainArticle .further-reading .menu-most-popular-container ol {
list-style-type: none;
counter-reset: further-reading-counter;
padding-left: 0;
}
.further-reading .menu-most-popular-container li:before {
content: counter( further-reading-counter );
counter-increment: further-reading-counter;
font-weight: bold;
color: #9B9B9B;
width: 30px;
display: block;
float: left;
}
#mainArticle .further-reading .omega .title {
white-space: nowrap;
}
/* Clear class gets added automatically sometimes, but probably, a grid_4 immediately following a grid_8 are meant to go side by side -- Hezequiel */
#wrapup .grid_8.alpha + .grid_4.omega.clear {
clear: none;
}
/***************************************************
*
* LAYOUT: FOOTER
*
***************************************************/
.footer {
margin: 0 !important;
width: auto !important;
padding-top: 8px;
padding-bottom: 10px;
padding-right: 3px;
padding-left: 3px;
line-height: 1.2em;
text-indent: 0;
position: relative;
background-repeat: repeat-x;
background-position: 2px bottom;
clear: both;
}
.footer.container {
padding: 10px 6% 40px;
}
.footer.relatedLinks {
color: white;
background: #297ed4;
}
.footer.relatedLinks h2,
.footer.relatedLinks a {
color: white;
}
.footer.relatedLinks a:hover {
color: white;
text-decoration: underline;
}
/* Reverse link underlining for one area */
.footer.relatedLinks .footerBox1 p a {
text-decoration: underline;
}
@media screen and (max-width: 780px) {
.footerBox2 {
margin-top: 40px;
}
}
#wrapup .footer a:hover {
color: #fff;
text-decoration: underline;
}
#logo p,
#copyright p {
font-size: 0.75rem;
}
.footer p,
.footer li {
font-size: 0.875rem;
}
.footer p {
margin: 0 0 8px 0;
}
.footer ul {
margin: 0;
padding: 0;
margin-bottom: 12px;
list-style: none;
}
.footer li {
margin-top: 2px;
}
.footer-special-block h2,
.footer-special-block p {
color: #000;
}
.footer-special-block p {
font-size: 1rem;
}
.footer h2 {
font-size: 1.25rem;
font-weight: 600;
margin: 24px 0 4px;
}
.footer.relatedLinks {
overflow: auto;
margin-bottom: 16px !important;
}
@media screen and (min-width: 781px) {
#wrapup .footer-special-block {
/* text-align: center; */
/* padding: 20px 20%; */
font-size: 1rem;
}
#wrapup .footer-special-block .subtitle {
font-size: 1rem;
font-weight: 400;
}
#wrapup .footer-special-block .button {
margin: 16px auto;
}
}
.footerBox1 form {
margin-bottom: 8px;
}
.footerBox1 .searchSite {
width: 163px;
height: 27px;
}
.alignBottom {
display: block;
position: absolute;
bottom: 11px;
}
#copyright,
.footerExtra {
position: relative;
margin: 0;
padding-bottom: 20px;
padding-right: 7px;
padding-left: 7px;
background-image: url(images/layout/horizontal-dotted-border.gif);
background-repeat: repeat-x;
background-position: 2px bottom;
clear: both;
}
#copyright p,
.footerExtra p {
margin: 0;
/*was color: #4d97e3;*/
color: #777777;
text-align: center;
font-weight: 600;
}
.footerExtra p a {
color: #777;
font-weight: 600;
}
#logo {
padding-top: 10px;
text-align: center;
min-height: 108px;
}
/**
* Footer
*/
#footerOuter {
margin-top: 12px;
background-color: transparent;
}
#wrapup .footer {
padding: 20px 3.7%;
}
/* This would be better achieved with footer content containers that have max-widths */
@media screen and ( min-width: 1000px ) {
#wrapup .footer {
padding: 20px 10%;
}
}
@media screen and ( min-width: 1200px ) {
#wrapup .footer {
padding: 20px 20%;
}
}
#footerOuter > div:last-child {
background-image: none;
}
.footer-special-block {
overflow: visible;
position: relative;
margin-top: 80px !important;
background-image: url(/wp-content/themes/ananda-worldwide/images/sunburst-background.jpg);
background-size: cover;
background-position: 50% 50%;
}
.footer-special-block > img {
margin: -80px auto 0;
width: 250px;
display: block;
}
.footer-special-block h2 {
font-size: 1.5rem;
line-height: 1.2;
}
.footer-special-block-copy {
width: 60%;
float: left;
}
/***************************************************
*
* LAYOUT: WIDGETS
*
***************************************************/
/**
* Widget styles
*/
#rightColumn .widget,
.home #rightColumn .widget:first-child {
margin: 3rem 0;
/* padding: 12px 0; */
}
.home #rightColumn .widgets {
padding: 0 12px;
}
/* The first widget */
#rightColumn .widget:first-child {
margin-top: 0;
background-image: none;
}
#rightColumn .widgets h2 {
margin-top: 0;
}
#rightColumn .widget_mylinkorder h2 {
display: none;
}
#rightColumn .widget_categoryposts a {
font-weight: 600;
}
#rightColumn .widget p {
margin-bottom: 8px;
}
#rightColumn .widget li {
margin: 0 0 2px 0;
}
#rightColumn .widget_categoryposts ol,
#rightColumn .widget_categoryposts ul {
padding-left: 0;
}
#mainContent #rightColumn #utilities ul {
list-style: none;
margin-top: 0;
margin-bottom: 0;
}
#rightColumn #utilities .widget {
padding-left: 0px;
margin: 0;
}
#rightColumn #utilities .widget ol,
#rightColumn #utilities .widget ul {
margin-left: 0px;
padding-left: 0em;
}
/**
* After the post content, e.g. http://ananda.staging.wpengine.com/clarity-magazine/2015/01/29/hello-world/
*/
.widget-area-after-post-content > .widget,
.further-reading.widget {
margin-top: 2.5em;
margin-bottom: 2.5em;
}
/***************************************************
*
* COMPONENTS
*
***************************************************/
/*doc
---
title: Swiftype
name: swiftype
category: Components
---
Styles for the Swiftype search features, including autocomplete and the search results
*/
.st-default-search-input {
background-image: none !important;
}
/* When the overlay is active, the user will use that */
.st-ui-overlay-active .st-default-autocomplete {
display: none !important;
}
.ananda-quotations-main-search .ananda-search {
text-align: center;
}
.post-type-archive-ananda_quotes #mainCenter > .sectionnav {
margin-bottom: 0;
}
/**
* Search results page
*/
@media screen and ( max-width: 700px ) {
.st-ui-injected-container-interface-designer.st-ui-injected-on-page-container .st-ui-header input {
max-width: 80% !important;
}
.st-position-container {
margin: 0px !important;
float: none !important;
padding: 0px !important;
}
}
body .st-ui-injected-on-page-container,
body .st-overlay-search-input {
font-family: "myriad-pro", MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
}
/**
* While results are loading
*/
.st-search-container {
min-height: 700px;
background: transparent url(/wp-content/themes/ananda-worldwide/images/preloader.gif) center top no-repeat;
}
.st-ui-injected-container-interface-designer {
background-color: #fefcf8; /* The same color as the real background */
}
/*doc
---
title: Search
name: search
category: Components
---
*/
.searchSite {
background: url(images/layout/search-combined.png) transparent no-repeat;
width: 163px;
height: 36px;
position: relative;
right: 10px;
}
.searchSiteGo {
background-image: url(images/layout/search-right.png);
}
.searchSite input.text {
top: 6px;
left: 9px;
width: 120px;
color: #777777;
background: transparent;
border: 0 solid #ffffff;
position: absolute;
}
.searchSite input.submit {
right: 0px;
position: absolute;
}
#mainCenter .searchSite {
right: 3px;
font-size: 0.875rem;
}
.pagination {
margin: 1em 0;
}
/*
* SEARCH BOX
*/
input#ananda-search {
line-height: 25px;
width: 73%;
height: 25px;
padding: 6px 0 6px 2%;
margin-bottom: 0;
vertical-align: top;
border-right: 0;
color: #777;
-moz-border-radius: 6px 0 0 6px;
-webkit-border-radius: 6px 0 0 6px;
border-radius: 6px 0px 0px 6px;
border: 1px solid;
border-color: #bbbbbb;
}
.searchcss input[type="text"] {
font-size: 1rem;
margin-bottom: 16px;
outline: 0;
padding: 8px;
width: 97%;
border: 1px solid;
border-color: #bbbbbb;
color: #333;
background-color: #fff;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
button.search-submit{
cursor: pointer; cursor: hand;
line-height: 38px;
position: relative;
/*left: -5px;*/
margin: 0;
width: 20%;
max-width: 65px;
height: 39px;
padding: 0 2%;
border: 1px solid;
border-color: #89C3E0;
border-left: none;
color: #fff;
background: #5c96b8;
background linear-gradient(bottom, #5C96B8 39%, #89C3E0 70%);
background: -o-linear-gradient(bottom, #5C96B8 39%, #89C3E0 70%);
background: -moz-linear-gradient(bottom, #5C96B8 39%, #89C3E0 70%);
background: -webkit-linear-gradient(bottom, #5C96B8 39%, #89C3E0 70%);
background: -ms-linear-gradient(bottom, #5C96B8 39%, #89C3E0 70%);
-moz-border-radius: 0 6px 6px 0;
-webkit-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
-webkit-transition: border-color .3s ease;
-moz-transition: border-color .3s ease;
-o-transition: border-color .3s ease;
transition: border-color .3s ease;
}
input#ananda-search-small {
font-size: 0.875rem;
line-height: 16px;
width: 73%;
max-width: 210px;
height: 17px;
padding: 4px 0 3px 4px;
margin-bottom: 0;
vertical-align: top;
/*border-right: 0;*/
color: #777;
-moz-border-radius: 6px 0 0 6px;
-webkit-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px;
border: 1px solid;
border-color: #bbbbbb;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
input#ananda-search-small:focus {
max-width: 420px;
}
input#ananda-search-ask {
font-size: 0.875rem;
line-height: 16px;
width: 63%;
height: 17px;
padding: 4px 0 3px 12px;
margin-bottom: 0;
vertical-align: top;
/*border-right: 0;*/
color: #777;
-moz-border-radius: 6px 0 0 6px;
-webkit-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px;
border: 1px solid;
border-color: #bbbbbb;
}
button.search-submit#small {
line-height: 0;
height: 26px;
}
button.search-submit#small-ask {
left: -5px;
line-height: 0;
height: 26px;
}
button.search-submit#small:hover {
text-decoration: none;
background: #c2dcf0;
/*background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);*/
}
button.search-submit#small-ask:hover {
text-decoration: none;
background: #4d97e3;
/*background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);*/
}
#ananda-search-top {
position: absolute;
top: 14px;
right: 53px;
width: 40%;
min-width: 150px;
max-width: 700px;
text-align: right;
}
@media screen and (max-width: 780px) {
#ananda-search-top {
top: 5px;
right: 5px;
}
}
/*doc
---
title: Share
name: share
category: Components
---
Social media sharing, print, email, etc.
*/
.articleActionsBar {
clear: both;
font-size: 0.875rem;
padding: 10px 0 0 0;
height: 33px;
}
/* Video pages */
.pods .articleActionsBar {
clear: both;
}
#mainCenter .articleActionsBar {
background-image: none;
}
#mainCenter .articleActionsBarSeparator {
height: 2px;
background-repeat: repeat-x;
background-position: 2px bottom;
/* background-image: url(images/layout/horizontal-dotted-border.gif); */
clear: both;
}
/* Within a WordPress post */
#mainCenter .post, /* Clear past logo */
#mainCenter .post .articleActionsBarSeparator {
clear: left;
}
/* WordPress: actions bar in the center of the page */
#wrapup .post .articleActionsBar {
padding: 0;
}
/* Line up the background line flush against the side */
#wrapup .post .articleActionsBarSeparator {
position: relative;
left: -11px;
}
#wrapup .articleActionsBar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/* Not applied to right column */
.articleActionsBar li {
line-height: 3;
float: left;
margin-right: 25px;
}
#wrapup .articleActionsBar a {
color: #777777;
display: block;
}
/**
* AddThis.com's Share Button
*/
.addthis_toolbox,
.addthis_toolbox .custom_hover,
li div#printUtility
{
position: relative;
font-size: 0.875rem;
}
.addthis_toolbox .custom_hover .custom_button.active
{
background-color: #eee;
}
.addthis_toolbox .hover_menu
{
display: none;
position: absolute;
background: #fff;
line-height: 2;
z-index: 100;
}
/* The toolbox after the article */
#mainCenter .addthis_toolbox .hover_menu {
bottom: 30px;
}
/* Within WordPress */
#mainCenter .post .addthis_toolbox .hover_menu {
bottom: auto;
}
.addthis_toolbox .custom_hover .tower
{
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius-topleft: 0;
}
.addthis_toolbox .hover_menu
{
width: 136px;
padding: 10px 0 10px 0;
border: 2px solid #eee;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.addthis_toolbox .hover_menu .column1 {
padding: 0 8px;
}
.addthis_toolbox .hover_menu a
{
width: 20px;
height: 20px;
float: left;
display: block;
text-decoration: none;
}
.addthis_toolbox .hover_menu a:hover
{
text-decoration: underline;
}
.addthis_toolbox .hover_menu .more
{
margin: 10px 10px 0 10px;
color: #777777;
}
.addthis_toolbox .hover_menu .more a
{
width: 75px;
clear: both;
float: none;
margin: 0;
}
.printIcon {
cursor: pointer;
}
.home .widget .addthis_toolbox > div {
display: inline-block;
margin-bottom: 0;
}
.widget .addthis_toolbox > div {
display: block;
margin-bottom: 9px;
}
@media screen and ( max-width: 781px ) {
.widget .addthis_toolbox > div {
width: 24%;
float: left;
margin-right: 1%;
}
}
/* The pinterest share bubble floats up and sometimes covers things above it */
.pinterest-share {
margin-top: 38px;
}
.widget .addthis_toolbox > a[data-pin-log="button_pinit"] {
display: block !important;
margin-bottom: 9px;
margin-top: 38px;
}
.addthis_toolbox .hover_menu .more span,
.addthis_toolbox .emailIcon span,
.addthis_toolbox .facebookIcon span,
.addthis_toolbox .printIcon span {
display: none !important;
}
.addthis_before_content > a,
.addthis_toolbox .custom_button a {
display: block;
}
.addthis_before_content > a {
margin: 8px 0;
}
.addthis_before_content .at15t_print {
display: none;
}
.home .addthis_toolbox > a,
.home .addthis_toolbox > div,
.home .addthis_toolbox > iframe
{
margin-right: 8px;
}
/* Slight adjustment to make buttons line up */
.home .addthis_button_tweet {
position: relative;
top: 2px;
}
.home .addthis_button_facebook_like {
position: relative;
top: 1px;
}
/* Something that addthis adds for analytics */
#atffc {
display: none;
}
/***************************************************
*
* COMPONENTS: QUIZ FORM
*
***************************************************/
/**
* These are styles that apply to forms which are quizzes
* or questionnaires.
*
* Examples:
* - http://www.ananda.org/meditation/meditation-support/articles/10-questions-to-increase-your-concentration/
* - http://www.ananda.org/meditation/deepen-your-meditations/guided-introspection/
*/
.quiz_wrapper .gform_page_footer .button {
cursor: pointer;
}
#wrapup .quiz_wrapper .gform_previous_button {
float: right;
width: 10em;
color: #aaa;
background-color: transparent;
display: inline;
font-weight: normal;
}
#wrapup .quiz_wrapper .gform_previous_button:hover {
text-decoration: underline;
}
/**
* Radio buttons or check boxes lined up horizontally
*/
.multiple-choice-grid li {
float: left;
margin-right: 20px !important;
}
/***************************************************
*
* COMPONENTS: DONATION
*
***************************************************/
.home #donateSidebar {
}
.home #rightColumn #donateSidebar h3 {
font-weight: normal;
margin-bottom: 4px;
font-size: 1rem;
}
.home #wrapup #rightColumnContent #donateSidebar a {
color: #fff;
margin-top: 0;
}
.donateGauge {
-moz-border-radius: 8px 8px 8px 8px;
background: none repeat scroll 0 0 #4d97e3;
color: #FFFFFF;
font-weight: 600;
margin: 16px 0;
text-align: center;
width: 12em;
padding: 1px;
}
/**
* Fundraising stuff
*/
#wrapup .thermometer {
line-height: 16px;
color: #000;
height: 170px;
background-repeat: no-repeat;
background-position: center 10px;
}
.ubermenu .thermometer {
margin-top: 30px;
height: 260px;
background-repeat: no-repeat;
background-position: center top;
}
#wrapup #fundDriveBanner .thermometer {
float: right;
width: 48%;
}
#wrapup #fundDriveBanner {
background-image: none;
background-position: center bottom;
background-repeat: repeat-x;
color: #222222;
font-size: 1rem;
margin: 0;
position: relative;
top: -30px;
}
#rightColumn #donateText {
width: 48%;
float: left;
}
/***************************************************
*
* COMPONENTS: FIND ANANDA NEAR YOU
*
***************************************************/
#map_search code input,
#map_search code select {
border: 1px #777777 solid;
border-radius: 4px;
}
#map_search code select {
font-size: 0.875rem;
}
#map_search code input {
margin-bottom: 14px;
margin-top: 4px
;
padding: 4px;
font-size: 0.875rem;
}
#map_search .location_search_title {
padding-bottom: 10px;
}
.location_search_title, .location_search_distance_cell, .location_search_taxonomy_cell {
font-weight: 600;
}
/***************************************************
*
* COMPONENTS: FORMS
*
***************************************************/
.genericForm fieldset {
border: 0;
padding: 0;
margin: 32px 0 4px;
}
.genericForm label {
display: block;
clear: left;
margin: 5px 0;
}
.genericForm .labelName,
.genericForm .wpcf7-list-item-label,
.genericForm .radio .groupName,
.genericForm .checkbox .groupName {
display: block;
float: left;
clear: left;
font-size: 1rem;
text-align: right;
padding-right: 7px; /* This needs to adjust the left padding in the .details line */
}
/* An exception to the above rule, for full-width names */
.genericForm .fullWidth .groupName {
float: none;
text-align: left;
}
.genericForm textarea {
margin: 4px 0 4px;
}
.genericForm fieldset label .labelName,
.genericForm .radio .groupName,
.genericForm .checkbox .groupName {
width: 95px; /* Adjust this on every page, as necessary */
}
/*
* .details is for detailed help, more like a full sentence or more
* .help is for short tips, or "What is this?"-type links
*
*/
.genericForm fieldset .details,
.genericForm .radio label,
.genericForm .checkbox label,
.genericForm label .error,
.genericForm label .wpcf7-not-valid-tip-no-ajax {
margin-left: 95px; /* Adjust this to match the above width */
display: block;
padding-left: 7px;
}
/* For when the detailed help message appears within a label and applies to a specific radio button */
.genericForm .checkbox label .details,
.genericForm .radio label .details {
/* Should line up underneath the label and not the button */
/* margin-left: 24px; this works locally?? */
margin-left: 15px;
}
#wrapup .genericForm .fullWidth label {
margin-left: 0;
padding-left: 0;
}
#mainArticle .genericForm .textarea .labelName,
#mainArticle .genericForm .radio .labelName,
#mainArticle .genericForm .checkbox .labelName,
#mainArticle .genericForm .wpcf7-checkbox .wpcf7-list-item-label {
width: 100%;
float: none;
clear: none;
margin-left: 0;
display: inline;
font-size: 1rem;
}
#mainArticle .genericForm .checkbox .labelName {
display: block;
text-align: left;
margin-left: 2em;
}
#mainArticle .genericForm .wpcf7-checkbox .wpcf7-list-item {
clear: left;
display: block;
margin-bottom: 4px;
}
.genericForm .radio .groupName,
.genericForm .checkbox .groupName {
display: block;
font-size: 1rem;
margin: 4px 0;
}
/* When a fieldset is nested inside another, that fieldset shouldn't have margins */
.genericForm fieldset fieldset.radio,
.genericForm fieldset fieldset.checkbox {
margin: 0;
}
.genericForm fieldset .wpcf7-checkbox {
display: block;
}
/* Undoing above float: left; that applies to all labels */
.genericForm .radio label,
.genericForm .checkbox label,
.genericForm .wpcf7-checkbox .wpcf7-list-item {
float: none;
clear: none;
}
.genericForm .submit,
.genericForm input.button /* Fancy blue button */ {
margin: 1em 0 1em 0;
}
.genericForm .checkbox input,
.genericForm .radio input,
.genericForm .wpcf7-checkbox input {
float: left;
}
/* Exception: when the input is inside a span.details */
.genericForm .checkbox .details input,
.genericForm .radio .details input {
float: none;
}
.genericForm .checkbox label .labelName,
.genericForm .radio label .labelName,
.genericForm .wpcf7-checkbox .wpcf7-list-item-label {
margin-left: 24px;
}
/* This is the input box that displays the X in "You have X characters left" */
#mainArticle .genericForm .charactersLeft {
width: 3em;
display: inline;
top: 0;
left: 0;
font-size: 1rem; /* Because it will be inside a paragraph or something */
}
#mainArticle .genericForm fieldset h2 {
font-size: 1.25rem;
margin-bottom: 12px;
}
#mainArticle .genericForm fieldset h2,
#mainArticle .genericForm fieldset h3 {
margin-top: 0;
}
/* The label tag already decreases the font size some */
.genericForm label .help,
.genericForm label .error,
.genericForm label .wpcf7-not-valid-tip-no-ajax {
font-size: 0.875rem;
margin-bottom: 0;
font-style: normal;
}
#mainArticle .genericForm .details {
color: #9B9B9B;
font-style: italic;
font-size: 0.875rem;
margin-bottom: 0;
}
/* For other pages */
.help {
font-size: 0.875rem;
font-style: italic;
}
.genericForm select {
margin-top: 4px;
}
.genericForm input,
.genericForm select {
margin-right: 4px;
color: black;
font-size: 1rem;
/* margin-top: 4px; */
}
.required {
color: #bb5050;
}
/**
* Forms
*
* Errors
*
*/
/* The box that appears at the top of an error-ridden form */
.errorBox,
.wpcf7-validation-errors,
.gform_validation_error {
padding: 11px;
margin: 1em 0 1em 0;
background: #ffdfdf;
color: #790000;
}
.gform_validation_error .gform_description {
display: none;
}
#mainCenter .validation_error,
.gform_wrapper li.gfield.gfield_error,
.gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
border-width: 0;
padding: 0;
margin-bottom: 1em;
}
#mainCenter .gform_wrapper .gfield_description+.gform_wrapper .gfield_description.validation_message,
#mainCenter .gform_wrapper .ginput_container+.gfield_description.validation_message {
margin: 0;
font-style: normal;
line-height: 1.2
}
#mainCenter .gform_wrapper li.gfield.gfield_error.gfield_contains_required div.gfield_description,
#mainCenter .gform_wrapper li.gfield.gfield_error.gfield_contains_required div.ginput_container,
#mainCenter .gform_wrapper li.gfield.gfield_error.gfield_contains_required fieldset legend.gfield_label,
#mainCenter .gform_wrapper li.gfield.gfield_error.gfield_contains_required label.gfield_label {
margin-left: 0;
}
#mainArticle .errorBox h1,
#mainArticle .errorBox h2,
#mainArticle .errorBox h3,
#mainArticle .wpcf7-validation-errors h1,
#mainArticle .wpcf7-validation-errors h2,
#mainArticle .wpcf7-validation-errors h3 {
margin-top: 0;
color: #790000;
}
.errorBox a,
.wpcf7-validation-errors a {
color: #790000;
}
.genericForm label .error,
.genericForm label .wpcf7-not-valid-tip-no-ajax {
background-position: 6px 3px;
background-repeat: no-repeat;
padding-right: 0;
padding-left: 22px;
background-image: url(images/icons/icon-error.png);
color: #bb5050;
margin-bottom: 1em;
display: block;
}
.genericForm fieldset.fullwidth label .error,
.genericForm fieldset.fullwidth label .wpcf7-not-valid-tip-no-ajax {
margin-left: 0;
}
/**
* Gravity Forms styles
*
* Applied on top of the default gravity form styles.
*
* @section forms
* @subsection gravity_form
*/
#wrapup .gform_wrapper,
#wrapup ul.gform_fields {
overflow: visible; /* Hides extra space */
}
#wrapup .gform_wrapper ul {
padding-left: 0;
}
#mainArticle .gfield_list_icons > img {
margin: 0;
}
/* Overwrite Gravity Forms defaults */
body .gform_wrapper h1,
body .gform_wrapper h2,
body .gform_wrapper h3 {
font-weight: 600;
}
#wrapup .gform_wrapper li.gfield_html_formatted ul {
margin: 0 0 12px 0;
padding: 0 0 0 40px;
overflow: hidden;
list-style-type: disc;
}
.gfield_html_formatted table {
border-collapse: collapse;
}
.gfield_html_formatted th,
.gfield_html_formatted td {
padding: 0 2px 2px 0; /* Or whatever li has */
vertical-align: top;
}
.hide_heading .gform_heading {
display: none;
}
#field_1_1 {
margin-top: 0;
}
.gform_wrapper .right_label div.ginput_complex,
.gform_wrapper .left_label div.ginput_complex {
width: 73%;
}
#wrapup .gform_wrapper .top_label .gfield_label {
margin-top: 14px;
width: 100%;
}
.home #wrapup .gform_wrapper .top_label .gfield_label {
margin-top: 8px;
}
.gform_wrapper .top_label .gfield_description {
padding-bottom: 0;
font-size: 1rem;
}
.gform_wrapper input {
padding: 2px 4px;
}
#wrapup .gform_wrapper .gfield_label {
width: 20%;
}
body .gform_wrapper input[type=text] {
padding: 0.4em 0 0.3em; /* Better balance than the default */
}
/* Overriding Ananda.org default */
#wrapup .gform_wrapper .top_label .gfield ul {
margin-bottom: 0;
}
body .gform_wrapper .gfield_date_day label,
body .gform_wrapper .gfield_date_month label,
body .gform_wrapper .gfield_date_year label,
body .gform_wrapper .gfield_time_ampm label,
body .gform_wrapper .gfield_time_hour label,
body .gform_wrapper .gfield_time_minute label,
body .gform_wrapper .ginput_complex label,
body .gform_wrapper .instruction {
letter-spacing: normal;
font-style: italic;
}
#wrapup h2.gsection_title,
#wrapup h3.gform_title {
margin: 18px 0 4px !important;
font-family: inherit;
font-size: 1.125rem;
}
#wrapup .gform_wrapper .gsection {
margin: 0;
padding: 0;
border-width: 0;
border-bottom: none !important;
}
/* Lots of nesting can increase the margins too much */
#wrapup .ginput_container ul.gfield_checkbox,
#wrapup .ginput_container ul.gfield_radio {
margin-bottom: 0;
}
.gform_wrapper ul.right_label li,
.gform_wrapper form ul.right_label li,
.gform_wrapper ul.left_label li,
.gform_wrapper form ul.left_label li {
margin-bottom: 12px;
}
/* If the label is hidden, add the padding back in */
#wrapup .gform_wrapper .left_label .no_label ul.gfield_checkbox,
#wrapup .gform_wrapper .right_label .no_label ul.gfield_checkbox,
#wrapup .gform_wrapper .left_label .no_label ul.gfield_radio,
#wrapup .gform_wrapper .right_label .no_label ul.gfield_radio {
padding-left: 23%;
}
/* Undo the above for checkboxes and radios */
#wrapup .gform_wrapper .gfield_checkbox li,
#wrapup .gform_wrapper .gfield_radio li {
margin-bottom: 4px;
}
.gform_wrapper .ginput_complex label,
.gform_wrapper .gfield_time_hour label,
.gform_wrapper .gfield_time_minute label,
.gform_wrapper .gfield_date_month label,
.gform_wrapper .gfield_date_day label,
.gform_wrapper .gfield_date_year label,
.gform_wrapper .instruction {
letter-spacing: 0;
font-size: 0.875rem;
margin-bottom: 4px;
margin-top: 0;
margin-left: 6px;
}
.gform_wrapper .description,
.gform_wrapper .gfield_description,
.gform_wrapper .instruction {
font-size: 0.875rem;
padding-top: 0;
padding-bottom: 0;
font-style: italic;
}
.gform_wrapper .gsection_description,
.gform_wrapper .description_above .gfield_description {
padding-top: 0;
padding-bottom: 0;
font-size: 1rem;
font-style: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.gform_wrapper .right_label .gfield_description,
.gform_wrapper .left_label .gfield_description,
.gform_wrapper .left_label .instruction,
.gform_wrapper .right_label .instruction {
margin-left: 20%;
}
.left_label li.gfield_html_formatted,
.right_label li.gfield_html_formatted {
margin-left: 0;
}
/* Taking captcha out of horizontal indentation
*
* It looks ugly, but better than having it clipped off because of overflow: hidden measures
*/
.gform_wrapper .left_label #recaptcha_area,
#recaptcha_table,
.gform_wrapper .right_label #recaptcha_area,
#recaptcha_table {
/* margin-left: 20%; Disabled because it doesn't fit /* IE 8 needs 24% */
margin-left: 0;
padding-top: 4px;
clear: left;
}
.gform_wrapper .gfield_required {
color: #bb5050;
}
/* When you want to hide the label, add this class */
#wrapup .no_label > label:first-child {
display: none;
}
/* This was messing up an HTML form field top margin */
.gform_wrapper li.gfield_html_formatted {
overflow: visible;
}
/* Remove excessive padding above button */
#wrapup .gform_wrapper .gform_footer {
margin: 0;
padding: 0;
}
/* ReCaptcha styles */
/* Undoing all Ananda image styles */
#wrapup #recaptcha_table img,
/* Undo image styles for datepicker icon */
#wrapup .ui-datepicker-trigger {
background: transparent;
border-width: 0;
clear: none;
float: none;
margin: 0;
padding: 0;
}
.recaptcha_theme_clean {
background: white;
}
#recaptcha_logo,
#recaptcha_tagline {
display: none;
}
/**
* Input fields
*/
/*
* Disabling special styling
*/
/*.gform_wrapper input,
.gform_wrapper select {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #cccccc;
}*/
.gform_wrapper .gfield_radio input,
.gform_wrapper .gfield_checkbox input {
border-width: 0;
}
.gform_wrapper .gfield_radio input[value="Other"],
.gform_wrapper .gfield_checkbox input[value="Other"] {
border-width: 2px;
}
/* Overriding defaults */
.gform_wrapper ul.gfield_radio li input[type="radio"]:checked + label,
.gform_wrapper ul.gfield_checkbox li input[type="checkbox"]:checked + label {
font-weight: normal;
}
.gform_wrapper .ginput_complex select {
width: 94% !important; /* Other similar fields are 92% */
}
/**
* Overriding certain Gravity Forms defaults
*/
#wrapup .gform_wrapper textarea.textarea {
width: 95%;
margin: 4px 0 4px;
resize: auto;
font-size: inherit;
padding: 4px;
}
/**
* Submit button
*/
/* Always align submit button flush left */
#wrapup .gform_wrapper .gform_footer.right_label,
#wrapup .gform_wrapper .gform_footer.left_label {
padding: 0; /* Flush left */
/*padding: 0 0 0 20%;*/
}
/**
* Errors
*/
.gform_wrapper .validation_error {
padding: 11px;
margin: 0 0 1em 0;
background: #ffdfdf;
color: #790000;
font-weight: normal;
font-family: inherit;
}
.validation_error:first-line {
font-weight: 600;
}
.validation_error a {
color: #790000;
}
.validation_error,
.gfield_error {
border: 1px dotted #c89797;
}
/**
* Success
*/
/* Undoing all default styles */
#gforms_confirmation_message {
background: transparent;
border-width: 0;
text-align: left;
margin: 0;
padding: 0;
font-size: inherit;
color: inherit;
}
/* DAILY MEDITATOR NEWSLETTER COMMENTS STYLE */
.genericForm fieldset {
border: 0 none;
margin: 18px 0 4px;
padding: 0;
}
h2 + .genericForm fieldset {
margin-top: 4px;
}
.genericForm label {
clear: left;
display: block;
margin: 5px 0;
}
.genericForm .labelName, .genericForm .radio .groupName, .genericForm .checkbox .groupName {
clear: left;
display: block;
float: left;
font-size: 1rem;
padding-right: 7px;
text-align: right;
}
.genericForm .fullWidth .groupName {
float: none;
text-align: left;
}
.genericForm textarea {
margin: 4px 0 18px;
}
@media screen and (max-width: 780px) {
.genericForm textarea {
box-sizing: border-box;
width: 100%;
}
}
.genericForm fieldset label .labelName, .genericForm .radio .groupName, .genericForm .checkbox .groupName {
width: 95px;
}
.genericForm fieldset .details, .genericForm .radio label, .genericForm .checkbox label {
display: block;
margin-left: 95px;
padding-left: 7px;
}
.genericForm .checkbox label .details, .genericForm .radio label .details {
margin-left: 15px;
}
#wrapup .genericForm .fullWidth label {
margin-left: 0;
padding-left: 0;
}
#wrapup .genericForm .fullWidth p, #wrapup .genericForm .fullWidth h2 {
margin-right: 0;
}
textarea {
font-size: 0.875rem;
padding: 1em;
}
/* Form after single videos, to edit description */
#mainArticle .pods-form .pods-field-input textarea {
width: 100%;
border: 1px solid #eee;
}
#mainArticle .genericForm .textarea .labelName,
#mainArticle .genericForm .radio .labelName,
#mainArticle .genericForm .checkbox .labelName {
clear: none;
display: inline;
float: none;
font-size: 1rem;
margin-left: 0;
width: 100%;
}
#mainArticle .genericForm .checkbox .labelName {
display: block;
margin-left: 2em;
text-align: left;
}
.genericForm .radio .groupName, .genericForm .checkbox .groupName {
display: block;
font-size: 1rem;
margin: 4px 0;
}
.genericForm fieldset fieldset.radio, .genericForm fieldset fieldset.checkbox {
margin: 0;
}
.genericForm .radio label, .genericForm .checkbox label {
clear: none;
float: none;
}
.genericForm .submit, .genericForm input.button {
margin: 1em 0;
}
.genericForm .checkbox input, .genericForm .radio input {
float: left;
}
.genericForm .checkbox .details input, .genericForm .radio .details input {
float: none;
}
.genericForm .checkbox label .labelName, .genericForm .radio label .labelName {
margin-left: 24px;
}
#mainArticle .genericForm .charactersLeft {
display: inline;
font-size: 1rem;
left: 0;
top: 0;
width: 3em;
}
#mainArticle .genericForm fieldset h2,
#mainArticle .genericForm fieldset h3 {
margin-top: 0;
}
.gform_wrapper .gfield_error .ginput_complex .ginput_right input[type=email], .gform_wrapper .gfield_error .ginput_complex .ginput_right input[type=number], .gform_wrapper .gfield_error .ginput_complex .ginput_right input[type=password], .gform_wrapper .gfield_error .ginput_complex .ginput_right input[type=tel], .gform_wrapper .gfield_error .ginput_complex .ginput_right input[type=text], .gform_wrapper .gfield_error .ginput_complex .ginput_right input[type=url], .gform_wrapper .ginput_complex input[type=email], .gform_wrapper .ginput_complex input[type=number], .gform_wrapper .ginput_complex input[type=password], .gform_wrapper .ginput_complex input[type=tel], .gform_wrapper .ginput_complex input[type=text], .gform_wrapper .ginput_complex input[type=url] {
width: 92.5% !important;
padding: 4px;
font-size: 1rem;
font-family: Georgia, serif;
}
/* In a small area, make the input wider */
.grid_5 .gform_wrapper .top_label input.medium,
.grid_5 .gform_wrapper .top_label select.medium,
.grid_4 .gform_wrapper .top_label input.medium,
.grid_4 .gform_wrapper .top_label select.medium,
.grid_3 .gform_wrapper .top_label input.medium,
.grid_3 .gform_wrapper .top_label select.medium {
width: 95%;
}
html body .gform_wrapper label.gfield_label+div.ginput_container {
margin-top: 0;
}
/* Fancy select dropdown default */
.gform_wrapper .chosen-container-single .chosen-single span {
font-size: 0.875rem;
}
#gform_7.button {
width: auto;
}
.gform_wrapper .gform_footer input[type=submit]:hover,
.button:not(.add_media):hover {
cursor: hand;
}
/* Media Poll template */
a.button.add-media {
width: 8em;
}
/**
* Pods Framework forms, for editing pods from the front-end
*/
.video-edit-form {
clear: both;
}
#wrapup .pods-form-fields {
padding: 0;
}
#wrapup .pods-submit {
float: none;
margin-left: 20%;
}
#wrapup .pods-submit-button {
font-size: 1.25rem;
}
/***************************************************
*
* COMPONENTS: RELATED
*
***************************************************/
/**
* Related area below content
*/
#mainArticle.grid_9 .further-reading {
width: 159%;
}
.layout-3-column #mainArticle.grid_8 .further-reading {
width: 151%;
}
@media screen and (max-width: 975px) {
#mainArticle.grid_9 .further-reading,
.layout-3-column #mainArticle.grid_8 .further-reading {
width: 100% !important;
}
}
#wrapup .further-reading.prevent-overlapping-with-sidebar {
width: 100% !important;
}
#wrapup .further-reading.prevent-overlapping-with-sidebar .grid_9,
#wrapup .further-reading.prevent-overlapping-with-sidebar .grid_3,
#wrapup .further-reading.prevent-overlapping-with-sidebar .grid_8,
#wrapup .further-reading.prevent-overlapping-with-sidebar .grid_4 {
width: 100%;
}
@media screen and (min-width: 700px) {
#wrapup .further-reading .related {
width: 100%;
max-width: 660px;
}
}
#wrapup .further-reading .related.thumbnails ul {
list-style: none;
padding: 0;
margin: 1em 0 0;
width: 100%;
}
#wrapup .further-reading .related.thumbnails li {
display: inline-block;
vertical-align: top;
width: 32%;
box-sizing: border-box;
padding: 0 30px 0 0 !important;
margin-bottom: 42px;
line-height: 1.2;
/* Hyphenation turns out making things looks really odd.
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;*/
}
@media screen and (min-width: 764px) and (max-width: 1326px) {
#wrapup .further-reading .related.thumbnails li {
width: 48%;
}
}
@media screen and (max-width: 650px) {
#wrapup .further-reading .related.thumbnails li {
width: 48%;
}
}
@media screen and (max-width: 414px) {
#wrapup .further-reading .related.thumbnails li {
width: 100%;
padding: 0;
}
}
#wrapup .further-reading .related li .category {
text-transform: uppercase;
letter-spacing: 0.5px;
}
#wrapup .further-reading .related.thumbnails li {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-word;
}
#wrapup .further-reading .related.thumbnails h3 {
margin-bottom: 4px;
margin-top: 0;
font-weight: normal;
}
/* For when an excerpt is shown */
#wrapup .further-reading .related.thumbnails li p {
color: #4a4a4a;
margin: 0;
font-weight: 400;
font-size: 0.938rem;
line-height: 1.286;
}
#wrapup .further-reading .related.thumbnails li h3 {
font-size: 1.5rem;
line-height: 1.21;
}
@media screen and (max-width: 650px) {
#wrapup .further-reading .related.thumbnails li h3 {
line-height: 1;
}
}
#wrapup .further-reading .related.thumbnails li a {
color: #2062A2;
/* line-height: 1.28; */
}
#wrapup .further-reading .related.thumbnails img {
display: block;
margin: 0 0 10px;
width: 99%;
float: none;
}
/***************************************************
*
* COMPONENTS: COMMENTS
*
***************************************************/
/**
* Comments
*/
#comments {
clear: left;
}
#comments a.add-comment-link,
#comments .reply a {
color: #2062A2;
font-size: 1rem;
line-height: 1.125;
margin: 15px 0 31px;
display: block;
}
#comments ol.commentlist {
margin: 12px 0 0 0;
padding: 0;
list-style-type: none;
}
#comments ol.commentlist li {
margin: 0 0 18px 0;
}
/* Remove the margin, or it doubles the bottom margin in certain cases */
#comments ul.children li {
margin: 0;
}
#comments ol.commentlist ul.children {
margin: 18px 0 0 0;
padding: 0 0 0 2em;
list-style-type: none;
}
/**
* Single comments
*/
#comments .comment-author img {
display: block;
margin: 0;
border: 0;
border-radius: 50%;
float: none;
position: absolute;
top: 0;
left: 0;
}
#comments .comment-body {
position: relative;
padding-left: 121px;
}
/* The author name */
#comments cite.fn {
color: #2062A2;
font-weight: 600;
font-style: normal;
font-size: 1.25rem; /* Same as h3 */
line-height: 1.2;
}
#comments span.says {
display: none;
}
/* The date and link */
#comments .comment-meta a {
color: #B2B2B2;
font-size: 1rem;
line-height: 1.25;
font-style: italic;
}
#comments li.comment .reply {
opacity: 0;
transition: opacity ease-out 0.3s;
}
#comments li.comment:hover > div > .reply {
opacity: 1;
}
/* 4px before, 12px total after, 8px before a reply link */
#comments li.comment p {
margin: 4px 0 12px 0;
color: black;
font-size: 1rem;
line-height: 1.5;
}
/**
* Responding
*/
#respond textarea {
width: 93%; /* It gets cut off otherwise */
}
#respond .form-allowed-tags {
display: none;
}
/**
* Comments mobile
*/
@media screen and (max-width: 480px) {
#comments .comment-body {
padding-left: 0;
}
#comments .comment-author,
#comments .comment-meta {
padding-left: 54px;
}
#comments .comment-author img {
max-width: 45px;
}
#comments ol.commentlist ul.children {
padding-left: 1rem;
}
}
/***************************************************
*
* COMPONENTS: ESSENTIAL GRID
*
***************************************************/
/**
* Grid layout plugin
*
* @doc https://www.themepunch.com/essgrid-doc/essential-grid-documentation
*/
#mainArticle .esg-grid ul {
max-width: none;
}
#mainArticle .esg-grid ul li {
position: absolute;
padding-right: 0;
}
#mainArticle .esg-grid img {
margin: 0;
}
.esg-entry-cover .esg-overlay {
background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.81) 100%);
}
/***************************************************
*
* COMPONENTS: IMAGE GALLERY
*
***************************************************/
/**
* WordPress Image Gallery
*
* Uses standard WordPress-generated styling.
*
* @link http://www.ananda.org/swami-kriyananda-remembered/swami-kriyanandas-body-laid-to-rest/
*/
.gallery-caption {
margin: 0; /* Override default dd styling */
clear: both;
}
@media screen and ( min-width: 650px ) {
.gallery-item {
float: left;
padding-right: 1%;
}
.gallery-columns-6 .gallery-item {
width: 16%;
padding-right: 0.6%;
}
.gallery-columns-5 .gallery-item {
width: 19%;
}
.gallery-columns-4 .gallery-item {
width: 24%;
}
.gallery-columns-4 .gallery-item:nth-of-type( 4n ) {
padding-right: 0;
}
.gallery-columns-3 .gallery-item {
width: 32%;
}
.gallery-columns-3 .gallery-item:nth-of-type( 3n ) {
padding-right: 0;
}
.gallery-columns-2 .gallery-item {
width: 48%;
padding-right: 2%;
}
.gallery-columns-2 .gallery-item:nth-of-type( 2n ) {
padding-right: 0;
}
.gallery-columns-1 .gallery-item {
width: 100%;
padding-right: 0;
}
}
/***************************************************
*
* COMPONENTS: VIDEO LIBRARY
*
***************************************************/
/**
* Video library
*/
#videoInfoColumn #articleInfoColumn {
padding-left: 12px;
}
#wrapup #videoDestinationRelatedVids ul,
#wrapup #videoDestinationRelatedVids ol {
}
#wrapup #videoInfoColumn li {
padding: 1px 0;
text-indent: 0;
}
#wrapup #videoInfoColumn h3 {
font-style: normal;
}
#videoDestinationRelatedVids {
padding-right: 15px;
position: relative;
margin-bottom: 24px;
}
#wrapup #videoDestinationRelatedVids ul {
margin: 0 0 20px 0;
padding: 0;
list-style-type: none;
}
#articleInfoColumn .video {
margin: 1em 0;
}
#articleInfoColumn .video p {
margin: 0;
}
body #wrapup .video .thumbnail {
position: relative;
width: 159px;
float: left;
}
body #wrapup .video .thumbnail img,
body #wrapup .mp3 .thumbnail img {
margin: 0;
padding: 0;
border-width: 0;
width: 159px;
}
.home #rightColumnContent .video {
margin-bottom: 15px;
}
#wrapup .carousel .thumbnail .more {
font-size: 1.25rem;
text-align: center;
padding: 0;
margin: 0;
}
.carousel .thumbnail .more a {
height: 115px;
width: 159px;
display: block;
padding-top: 50px;
}
#wrapup #videoDestinationRelatedVids p {
margin: 0;
}
#wrapup #videoDestinationRelatedVids .relatedVideo li:first-child,
#wrapup #videoDestinationRelatedVids .relatedVideo li:first-child .video {
margin-top: 0;
}
#wrapup #videoDestinationRelatedVids .relatedVideo p.name {
font-size: 1rem;
clear: left;
padding-top: 4px;
}
.home #wrapup .video .thumbnail {
margin-right: 12px;
}
#wrapup #mainArticle .video .thumbnail p.length {
font-size: 0.875rem;
margin: 0;
}
#wrapup .video .thumbnail p.length {
position: absolute;
width: auto;
right: 0;
bottom: 5px;
padding: 3px 6px 2px;
margin: 0;
background-color: #000;
opacity: 0.75;
filter: alpha(opacity=75);
color: #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#wrapup li .video p {
margin-right: 0;
}
#wrapup .series li .mp3 p {
margin: 0;
}
#wrapup .series li p.date,
#wrapup .series li p.author {
font-size: 1rem;
}
#wrapup #videoDestinationRelatedVids p.edit {
display: none;
}
#wrapup .relatedVideo p a {
line-height: 1.2;
}
#wrapup .relatedVideo li {
padding: 4px 0;
}
#wrapup .video-content h3 {
margin-top: 0;
}
#wrapup .series .video-content .metadata > a {
font-size: 1rem;
}
#wrapup .excerpt-from {
margin-top: 12px;
}
.video-series-list {
position: relative;
}
.video-series-list-item {
display: inline-block;
text-align: center;
vertical-align: top;
box-sizing: border-box;
width: 24%;
padding: 25px 15px;
color: lightgray;
min-width: 200px;
}
.video-series-list-item img {
display: block;
float: none !important;
margin: 0 auto 5px !important;
}
.video-series-list-item h3 {
font-size: 1.1rem !important;
margin-top: 9px !important;
}
/**
* Hide buttons normally, but show them if the carousel class
* is a parent.
*/
#relatedVidsScrollBar,
.jcarousel-prev,
.jcarousel-next,
#wrapup .noButtons .jcarousel-prev,
#wrapup .noButtons .jcarousel-next {
display: none;
visibility: hidden;
}
.carousel #relatedVidsScrollBar,
.carousel .jcarousel-prev,
.carousel .jcarousel-next {
display: block;
visibility: visible;
}
/**
* Hide the image meta int he Moksha Mandir page
*/
.page-id-32459 .jp-carousel-image-meta {
display: none;
}
.jp-carousel-transitions .jp-carousel-close-hint {
top: 28px;
left: 8%;
}
.jp-carousel-transitions .jp-carousel-close-hint span {
font-size: 2.3rem !important;
}
@media screen and (max-width: 780px) {
/**
* Video carousels
*
* Showing all items, no scrolling yet
*/
#mainArticle .indexList.carousel li {
margin-bottom: 1em;
height: 187px !important;
}
.carousel .indexListInner {
padding-left: 0 !important;
padding-right: 0 !important;
}
.indexList .jcarousel-list-horizontal {
width: auto !important;
left: auto !important;
}
.jcarousel-skin-ananda3 .jcarousel-clip-horizontal,
.jcarousel-skin-ananda3 .jcarousel-container-horizontal {
height: auto;
width: auto !important;
}
.jcarousel-prev,
.jcarousel-next {
display: none !important;
}
/* Simplify the information being shown */
#mainArticle .indexList .jcarousel-list li p.metadata {
display: none;
}
}
/**
* Related video scroll bar: not jCarousel specific, but should only show up when javascript is enabled
*/
body.jsEnabled #relatedVidsScrollBar
{
background-color: #e0e0e0;
height: 145px;
width: 10px;
position: absolute;
top: 38px;
right: 14px;
}
#ie7andup #relatedVidsScrollBar,
#ie6only #relatedVidsScrollBar
{
top: 40px;
right: 15px;
}
#videoActions ul {
list-style-type: none;
font-size: 1rem;
margin: 0;
padding: 0;
}
#videoActions li {
float: left;
padding-right: 20px;
margin: 0;
}
#videoEmbedSpace {
clear: left;
margin: 0 0 0 0;
padding: 7px 0 10px 0;
}
#videoEmbedSpace embed {
width: 100%;
}
/* Outermost */
.indexList {
margin-bottom: 15px;
position: relative;
}
#mainArticle .indexList ul {
margin: 0;
padding: 0;
overflow: hidden;
}
#mainArticle .indexList li {
height: 200px;
list-style: none;
float: left;
margin: 0;
padding: 0;
width: 171px;
}
/* This should be overriden in individual pages, if the image widths are different */
#mainArticle .video .video-content p {
width: 90%;
margin-bottom: 0;
}
#mainArticle .indexList .jcarousel-list li p {
clear: both;
line-height: 1.3;
padding-top: 4px;
margin-bottom: 0;
padding-right: 8%;
font-size: 0.875rem;
}
#mainArticle .indexList .jcarousel-list li p.metadata {
padding-top: 0;
}
#mainArticle .indexList li img {
margin-bottom: 4px;
}
/* List that scroll (carousel) need room for buttons on left and right */
.carousel .indexListInner {
position: relative;
padding: 10px 37px 0 0; /* previously padding: 10px 47px 0 41px; */
max-width: 100%;
}
/**
* Containers
*/
.jcarousel-skin-ananda3 .jcarousel-container-horizontal {
width: 100%;
min-height: 200px;
}
/* Import page sometimes has very long titles, this makes it hard to find the edit link */
.page-template-media-templatesmedia-import-php .jcarousel-skin-ananda3 .jcarousel-container-horizontal {
height: 400px;
}
#ie6only .jcarousel-skin-ananda3 .jcarousel-container-horizontal {
width: 103%;
height: 200px;
}
.jcarousel-skin-ananda3 .jcarousel-clip-horizontal {
width: 682px; /* Adjusting this affects whether there are a few extra pixels or not, left over after the scroll; 440px with 4 items */
}
.jcarousel-skin-ananda3 .jcarousel-item-horizontal {
height: 200px;
width: 108px;
}
.jcarousel-skin-ananda3 .jcarousel-item-vertical {
height: 86px;
width: 163px;
}
.jcarousel-skin-ananda3 .jcarousel-container-vertical {
height: 190px;
width: 163px;
margin: 0 0 10px 0;
}
.jcarousel-skin-ananda3 .jcarousel-clip-vertical {
height: 190px;
width: 163px;
}
/**
* Horizontal Buttons
*/
#mainArticle .jcarousel-skin-ananda3 .indexList li {
height: auto;
}
.jcarousel-skin-ananda3 .jcarousel-prev-horizontal
{
position: absolute;
left: -35px; /* Was: left: -40px;, then 10px, then 0 */
top: 50px;
width: 24px;
height: 36px;
cursor: pointer;
background: transparent url(/images/layout/large-arrow-left-combined.png) no-repeat 0 0;
}
#ie6only .jcarousel-skin-ananda3 .jcarousel-prev-horizontal,
#ie5-5only .jcarousel-skin-ananda3 .jcarousel-prev-horizontal,
#ie5-01only .jcarousel-skin-ananda3 .jcarousel-prev-horizontal
{
background: transparent url(/images/layout/large-arrow-left-combined.gif) no-repeat 0 0;
}
.jcarousel-skin-ananda3 .jcarousel-prev-horizontal:hover {
background-position: -30px 0;
}
.jcarousel-skin-ananda3 .jcarousel-prev-horizontal:active {
background-position: -28px 2px;
}
.jcarousel-skin-ananda3 .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-ananda3 .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-ananda3 .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -160px 0; /* -60 is what actually works */
}
.jcarousel-skin-ananda3 .jcarousel-next-horizontal
{
position: absolute;
right: -10px; /* was: -5px;, then 25px */
top: 50px;
width: 24px;
height: 36px;
cursor: pointer;
background: transparent url(/images/layout/large-arrow-right-combined.png) no-repeat 0 0;
}
#ie6only .jcarousel-skin-ananda3 .jcarousel-next-horizontal,
#ie5-5only .jcarousel-skin-ananda3 .jcarousel-next-horizontal,
#ie5-01only .jcarousel-skin-ananda3 .jcarousel-next-horizontal
{
background: transparent url(/images/layout/large-arrow-right-combined.gif) no-repeat 0 0;
}
.jcarousel-skin-ananda3 .jcarousel-next-horizontal:hover {
background-position: -30px 0;
}
.jcarousel-skin-ananda3 .jcarousel-next-horizontal:active {
background-position: -28px 2px;
}
.jcarousel-skin-ananda3 .jcarousel-next-disabled-horizontal,
.jcarousel-skin-ananda3 .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-ananda3 .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -160px 0; /* -60px is what really works */
}
/**
* Vertical Buttons
*/
.jcarousel-skin-ananda3 .jcarousel-next-vertical {
position: absolute;
top: 189px;
right: 11px;
/*
Was:
top: 171px;
right: -3px;*/
height: 12px;
width: 16px;
cursor: pointer;
background: transparent url(/images/layout/small-arrow-down-combined.png) no-repeat 0 0;
}
#ie6only .jcarousel-skin-ananda3 .jcarousel-next-vertical,
#ie5-5only .jcarousel-skin-ananda3 .jcarousel-next-vertical,
#ie5-01only .jcarousel-skin-ananda3 .jcarousel-next-vertical
{
background: transparent url(/images/layout/small-arrow-down-combined.gif) no-repeat 0 0;
}
.jcarousel-skin-ananda3 .jcarousel-next-vertical:hover {
background-position: -20px 0;
}
.jcarousel-skin-ananda3 .jcarousel-next-vertical:active {
background-position: -20px 2px;
}
.jcarousel-skin-ananda3 .jcarousel-next-disabled-vertical,
.jcarousel-skin-ananda3 .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-ananda3 .jcarousel-next-disabled-vertical:active {
cursor: default;
background-position: -40px 0;
}
.jcarousel-skin-ananda3 .jcarousel-prev-vertical {
position: absolute;
top: 22px;
right: 11px;
/*
Was:
top: 6px;
right: -3px;*/
height: 12px;
width: 16px;
cursor: pointer;
background: transparent url(/images/layout/small-arrow-up-combined.png) no-repeat 0 0;
}
#ie6only .jcarousel-skin-ananda3 .jcarousel-prev-vertical,
#ie5-5only .jcarousel-skin-ananda3 .jcarousel-prev-vertical,
#ie5-01only .jcarousel-skin-ananda3 .jcarousel-prev-vertical
{
background: transparent url(/images/layout/small-arrow-up-combined.gif) no-repeat 0 0;
}
.jcarousel-skin-ananda3 .jcarousel-prev-vertical:hover {
background-position: -20px 0;
}
.jcarousel-skin-ananda3 .jcarousel-prev-vertical:active {
background-position: -20px 2px;
}
.jcarousel-skin-ananda3 .jcarousel-prev-disabled-vertical,
.jcarousel-skin-ananda3 .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-ananda3 .jcarousel-prev-disabled-vertical:active {
cursor: default;
background-position: -40px 0;
}
#wrapup .series .video .thumbnail,
#wrapup .series .mp3 .thumbnail {
float: left;
margin-right: 8px;
}
#wrapup .series .video .video-content,
#wrapup .series .mp3 .thumbnail + .content {
margin-left: 166px;
max-width: 520px;
}
#wrapup .series li {
width: 100%;
height: auto;
margin-bottom: 12px;
}
#wrapup .series li h2,
#wrapup .series li h3,
#wrapup .series li h4,
#wrapup .series li p {
width: 100%;
}
#wrapup .series li .short-description {
color: #777;
}
#wrapup .series li .short-description p {
margin-bottom: 0;
}
#articleInfoColumn #series-information .short-description p {
margin-bottom: 8px;
}
#articleInfoColumn #series-information h3 {
margin-top: 8px;
}
#videoActions {
margin-bottom: 12px;
}
#videoInformation {
margin-top: 10px;
}
#videoDescription {
max-width: 510px;
}
.recommended-media {
clear: both;
}
.recommended-media .carousel .indexListInner {
padding-left: 0;
}
/**
* It would be better to change the code output, rather than hiding these
*/
.recommended-media .jcarousel-prev,
.recommended-media .jcarousel-next,
.recommended-media .jcarousel-item-5 {
display: none !important;
}
div#video-search {
width: 350px;
display: table;
}
div#video-search h2 {
margin: 24px 0 4px 0;
}
div#video-search div.hr {
display: block;
background: url("images/layout/horizontal-dotted-border.gif") repeat-x scroll left bottom transparent;
height: 2px;
width: 320px;
margin: 0 0 0 30px;
}
div#video-search div.hr hr {
display: none;
width: 400px;
height: 2px;
margin: 0;
}
div#video-search form.searchFormLarge {
margin: 10px 0 10px 40px;
}
div#video-search form.searchFormLarge {
display: table-row;
}
div#video-search form.searchFormLarge .searchsubmit {
float: right;
}
body.pod-page-video div#video-search {
margin-top: -20px;
margin-bottom: 50px;
}
@media screen and (max-width: 780px) {
/**
* Video search forms
*
* @see www.ananda.org/video/
*/
div#video-search {
width: auto;
display: block;
}
div#video-search form.searchFormLarge {
display: block;
margin-left: 0;
}
div#video-search form.searchFormLarge .searchsubmit {
float: none;
}
}
@media screen and (max-width: 480px) {
body.pod-page-video div#video-search select,
body.pod-page-video div#video-search input {
font-size: 1.3em;
}
div#video-search form input.searchsubmit {
padding: 5px 12px;
}
}
.video.thumbnail-youtube .thumbnail {
overflow: hidden;
height: 115px;
}
.video.thumbnail-youtube .thumbnail img {
width: 210px !important;
position: absolute;
top: -20px;
left: -25px;
max-width: none !important;
}
#wrapup .video.youtube .thumbnail p.length {
bottom: 0px;
}
.video .edit a,
.mp3 .edit a {
color: #888;
/* Because it's inside .audio, and the way those rules work */
background-image: none;
padding: 0;
}
#mainArticle .video .edit a {
display: block;
font-size: 0.875rem;
}
/**
* Hide Blip videos for now
*/
.video.blip {
display: none;
}
/***************************************************
*
* COMPONENTS: TABLES
*
***************************************************/
/**
* Simple table
*
* First column is by default short and emphasized, and alternate rows may be highlighted in some fashion
* (Javascript is recommended for that purpose.)
*/
table.simple {
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 12px;
}
table.simple td {
vertical-align: top;
padding: 0.2em 1em 0.2em 1em;
background: #fff;
background-position: 1px top;
border: 1px solid #ddd;
border-width: 1px;
/* Horizontal dotted border */
/* background: #fff url(/images-common-1.0/layout/horizontal-dotted-border.gif) 0 top repeat-x; */
}
table.simple td.column1 {
width: 5em; /* This can be customized per-page */
font-weight: 600;
/* Vertical dotted border */
/* background-image: url(/images-common-1.0/layout/vertical-dotted-border.gif);
background-position: right 1px;
background-repeat: repeat-y; */
}
table.simple td.highlighted {
background: #eee;
}
table.simple caption {
display: none;
}
/***************************************************
*
* COMPONENTS: SEARCH RESULTS
*
***************************************************/
#google {
/* Needed if Advanced Search Results or Help link are shown
margin-top: 1em;*/
}
/* Search results without the heading */
#google .s,
#google .f,
#google .f a {
font-size: 0.875rem;
}
/* Individual dearch listings */
#mainArticle #google blockquote {
font-style: normal;
}
/* "Search for X */
#google .t {
background-color: #d7e6ef;
}
/* Search results */
#google div {
margin-top: 1em;
}
#google div .l {
}
#google div .l b {
}
/* Current result page */
#google .i {
color: #222;
}
#google p {
margin-top: 1em;
}
/* No results */
#google #noResults {
font-size: 1rem;
}
/***************************************************
*
* COMPONENTS: TABLES
*
***************************************************/
/**
* table.datedItemsDates
*
* Dates are like Sep 14, Aug 24, etc.
*/
#wrapup table.datedItems {
margin: 4px 0 12px 0;
}
#wrapup table.datedItems td.date {
color: #777777;
width: 4.5em;
padding-right: 0.5em;
vertical-align: top;
}
#wrapup table.datedItems p {
margin-top: 1em;
}
/***************************************************
*
* SECTIONS: THE YOGIS SAY
*
***************************************************/
.blog-yogi #mainArticle .post > h2 {
font-size: 1.25rem;
}
/***************************************************
*
* SECTIONS: CLARITY MAGAZINE
*
***************************************************/
/**
* Make the sidebar links the standard blue rather than the lighter blue
*/
.site-clarity #articleInfoColumn h1 a,
.site-clarity #wrapup #articleInfoColumn li a {
color: #0575CA;
}
/**
* Add numbers to Readers Favorites and All-Time Favorites
*/
.site-clarity #articleInfoColumn .widget_nav_menu ul {
padding: 0 0 0 20px;
list-style-type: decimal;
}
#mainCenter > .sectionnav > .sectionnav-navigation > ul {
text-align: center;
padding-left: 0;
}
#mainCenter > .sectionnav > .sectionnav-navigation > ul > li {
padding: 0 12px;
display: inline-block;
box-sizing: border-box;
float: none;
width: auto;
}
/* Clarity Magazine wants smaller headings */
.site-clarity.single-post #mainArticle h2,
.site-clarity.single-post #mainArticle .h2 {
font-size: 1.375rem;
}
.site-clarity.single-post #mainArticle h3,
.site-clarity.single-post #mainArticle .h3 {
font-size: 1.125rem;
}
/* All "blocks" should have a full, escalating, background */
div[class^='block-'],
div[class*=' block-'],
section[class^='block-'],
section[class*=' block-'] {
background-size: cover !important;
}
@media screen and ( min-width: 781px ) {
/* Since there are only three section nav items, center the third */
.site-clarity #articleInfoColumn .sectionnav-navigation > ul > li:nth-child(3) {
width: 100%;
}
/* Home page */
.site-clarity #mainArticle.grid_9 {
width: 70%;
}
.site-clarity #articleInfoColumn.grid_3 {
width: 27.5%;
}
/*doc
---
title: Issue Banner
name: issue-banner
category: Clarity Magazine
---
Show a banner image at the top of an issue.
*/
.site-clarity.date #wrapup .precontent > img {
width: 100% !important;
height: auto;
}
/*doc
---
title: Print Issue Button
name: print-issue-btn
category: Clarity Magazine
---
Appears at the top of an issue page, to let people know how to print the entire issue at once.
```html_example
Print Entire Issue
```
Example:
http://ananda.staging.wpengine.com/clarity-magazine/
*/
.site-clarity.date #wrapup .precontent > .print-issue-btn {
float: right;
margin: 0 0 0 1em;
}
}
/**
* Wisdom in a Nutshell
*
* @link http://ananda.staging.wpengine.com/clarity-magazine/2014/12/
*/
.site-clarity #mainArticle .wisdom-in-a-nutshell h2 {
margin-top: 0;
}
.site-clarity .wisdom-in-a-nutshell .container_12 {
margin: 16px 0;
}
/***************************************************
*
* SECTIONS: YOUR SPIRITUAL QUESTIONS ANSWERED
*
***************************************************/
#wrapup #ask blockquote p {
margin-left: 0;
}
#wrapup span.cke_skin_kama {
padding: 0;
}
#wrapup #ask .caption p {
font-size: 1rem;
}
#wrapup .positioncontrolstop {
font-size: 0.875rem;
}
/************************************************
*
* SECTIONS: ANANDA QUOTATIONS
*
***********************************************/
.container_12.ananda-quotations-precontent {
margin: 0;
}
.ananda-quotations-precontent-tags,
.ananda-quotations-precontent-authors {
margin: 0;
}
.ananda-quotations-precontent-tag {
display: inline-block;
width: 32%;
min-width: 121px;
vertical-align: top;
box-sizing: border-box;
padding: 0 7px;
}
.ananda-quotations-precontent-author {
display: inline-block;
width: 49%;
min-width: 210px;
vertical-align: top;
}
/***************************************************
*
* TEMPLATES: LIST CHILD PAGES
*
***************************************************/
/**
* List Child Pages (e.g. used to list teacher pages)
*
*/
#mainArticle .child-list .child h2 {
margin-top: 0;
}
.child-list .child {
margin-bottom: 18px;
}
.child-list .child img {
width: 125px;
}
/* Fixes bizarre bug */
.fb-like.fb_iframe_widget > span {
width: 250px !important;
}
/* I don't know what bug it fixes, but it causes another bug in small screens.
* Therefore, the following code. -- Heze. */
@media screen and (max-width: 500px) {
/* width: 49px !important; */
}
/*
* Forgive the hack (time critical)... makes I-Day of Yoga banner look good
*
* @author Prashad
*/
.page-id-32656 .banner-image.crop-equal {
background-position-y: 0% !important;
}
.i-day-yoga {
display: none !important;
}
@media screen and (max-width: 750px) {
.page-id-32656 .banner {
display: none;
}
img.i-day-yoga {
display: block !important;
}
}
/***************************************************
*
* PLUGINS: SIMPLEMAP
*
***************************************************/
#mainCenter #results h2 {
font-size: 1.625rem;
margin-top: 1.21em;
}
#mainCenter #results > div:last-child > .result {
border: 0;
}
@media screen and (max-width: 600px) {
/* Unfortunately, simple maps offers only the generic "results" to grab hold to as a selector. That's why I made it more specific by using
#simplemap + #results ( #results that are placed immediately after #simplemap). That should narrow it down quite nicely :) */
#simplemap + #results .result_address,
#simplemap + #results .result_phone,
#simplemap + #results .result_links {
float: none;
display: block;
width: 100%;
text-align: left;
}
#simplemap + #results .result_address > address {
margin-left: 0;
}
}
/***************************************************
*
* PLUGINS: Bricks Masonry (bricks.js)
*
***************************************************/
/* Precise widths are needed in order for bricks to work fine */
.bricks-container {
width: 100% !important;
}
@media screen and (max-width: 940px) {
.bricks-container > div {
width: 46%;
}
}
@media screen and (max-width: 600px) {
.bricks-container > div {
width: 100%;
}
}
/***************************************************
*
* PLUGINS: Give (for donations)
*
***************************************************/
.banner-page .give-form-wrap {
padding: 20px;
background: #f2f2f2;
border-radius: 4px;
}
@media screen and ( min-width: 900px ) {
.banner-page .give-form-wrap {
margin-top: -5em;
}
}
@media screen and ( min-width: 1200px ) {
.banner-page .give-form-wrap {
margin-top: -7em;
}
}
/* Hide this until it has a purpose */
#give-payment-mode-select {
display: none;
}
.give-form-title {
display: none;
}
.give-form-content-wrap > h2:first-child {
margin-top: 0;
}
body ul#give-donation-level-radio-list {
padding-left: 4px; /* Otherwise the radio circle gets cut off */
margin-left: 0;
}
#give-donation-level-radio-list>li {
float: left;
}
body .give-recurring-donors-choice {
border: none;
background: transparent;
padding: 0;
}
/* Make the headings like h2s */
#give-recurring-form h3.give-section-break, #give-recurring-form h4.give-section-break, #give-recurring-form legend, form.give-form h3.give-section-break, form.give-form h4.give-section-break, form.give-form legend, form[id*=give-form] h3.give-section-break, form[id*=give-form] h4.give-section-break, form[id*=give-form] legend {
font-size: 1.625rem;
font-weight: 600;
margin: 0 0 4px 0;
padding-top: 24px; /* Top margin won't do the job because of floated form fields */
line-height: 1.2;
border: none;
}
#give-final-total-wrap {
display: none;
}
/* Same classes as .btn */
.give-btn {
background: #317FCB;
color: #fff;
text-align: center;
display: inline-block;
margin: 1rem 0;
padding: 12px 24px;
border-width: 0;
-moz-border-radius: 6px;
-webkit-border-radius: 0;
border-radius: 6px;
font-size: 1.18rem;
line-height: 1;
-webkit-appearance: none; /* Disable certain defaults in Safari */
}
.give-btn:hover {
background: #317FCB;
color: #fff;
}
#give-recurring-form .form-row input[type=text].required, #give-recurring-form .form-row input[type=tel].required, #give-recurring-form .form-row input[type=email].required, #give-recurring-form .form-row input[type=password].required, #give-recurring-form .form-row select.required, #give-recurring-form .form-row textarea.required, #give-recurring-form .give-tooltip:hover, form.give-form .form-row input[type=text].required, form.give-form .form-row input[type=tel].required, form.give-form .form-row input[type=email].required, form.give-form .form-row input[type=password].required, form.give-form .form-row select.required, form.give-form .form-row textarea.required, form.give-form .give-tooltip:hover, form[id*=give-form] .form-row input[type=text].required, form[id*=give-form] .form-row input[type=tel].required, form[id*=give-form] .form-row input[type=email].required, form[id*=give-form] .form-row input[type=password].required, form[id*=give-form] .form-row select.required, form[id*=give-form] .form-row textarea.required, form[id*=give-form] .give-tooltip:hover, form.give-form .form-row input[type=text] {
padding: 4px;
font-size: 1rem;
}
.give-label,
.give-form-wrap label {
font-family: Georgia, serif;
}
.give-form-wrap select {
height: 1.9rem;
font-size: 1rem;
}
/* Override */
#wrapup #give-recurring-form .form-row-one-third,
#wrapup form.give-form .form-row-one-third,
#wrapup form[id*=give-form] .form-row-one-third {
margin-left: 3%;
}
/***************************************************
*
* PLUGINS: Cornerstone
*
***************************************************/
#cs-content .x-accordion-heading .x-accordion-toggle.collapsed:hover, #cs-content .x-accordion-heading .x-accordion-toggle, #cs-content .x-nav-tabs > li > a:hover, #cs-content .x-nav-tabs > .active > a, #cs-content .x-nav-tabs > .active > a:hover, #cs-content .x-recent-posts a:hover .h-recent-posts {
color: #0083ca !important;
}
#cs-content .x-accordion-heading .x-accordion-toggle.collapsed, #cs-content .x-nav-tabs > li > a, #cs-content .x-recent-posts .h-recent-posts, #cs-content .x-recent-posts .x-recent-posts-date {
color: #272727 !important;
}
/*************************************************************
**************************************************************
*** ***
*** EXCEPTIONS ***
*** ***
*** New layouts made by Cornerstone lack specific ***
*** CSS selectors. Therefore, these styles are very ***
*** specific and one-pointed. (Much like like the mind ***
*** after Hong Sau) ***
*** ***
**************************************************************
*************************************************************/
.page-id-40805 #x-section-4 .x-column img {
width: 100%;
float: none;
}
/***************************************************
*
* PLUGINS: Preparing for X Theme
*
***************************************************/
body #cs-content .x-dropcap {
margin: 0;
font-weight: normal;
font-size: 5em;
line-height: 0.55em;
padding: 0.1em 0.1em 0.075em;
margin-bottom: -0.1em;
color: #000;
background-color: transparent;
}
/***
*
* PLUGINS: Cookie Consent
*
*/
body #catapult-cookie-bar {
bottom: 20px;
max-width: calc(100vw - 120px); /* To stop overlap with Intercom */
padding: 20px;
}
#catapult-cookie-bar h3 {
display: none;
}
.cookie-bar-block #catapult-cookie-bar span {
margin-top: 0;
margin-bottom: 0;
}
.cookie-bar-block #catapult-cookie-bar span:first-of-type {
margin-bottom: 1em;
}
#catapult-cookie-bar a {
text-decoration: underline;
}
button#catapultCookie {
font-size: 14px;
color: #222;
margin-bottom: 0;
}