@charset "utf-8";
/**
 * Styles for Ananda.org
 *
 * Sections:
 *
 *	- General
 *	- Forms
 *	- Images
 *	- Icons
 *	- More
 *
 * If there were any general guidelines (for instance, margins should generally be on the bottom of content elements like paragraphs, headings, and images, and not on the top) to keep in mind when writing CSS for this site, this would be a good place for those guidelines.
 *
 * For font sizes, use this:
 * http://yuiblog.com/assets/pdf/cheatsheets/css.pdf
 *
 * This was written for CSS Version 2, supporting:
 *
 *	- IE 5.0 (Windows)
 *	- IE 5.5
 *	- IE 6.0
 *	- IE 7.0
 *	- Firefox 3
 *	- Safari 3
 *	- Opera 9
 *
 *
 * Colors:
 *
 *	- #777777	text color outside content
 *	- #444444	text color within content and info box
 *	- #0575bd	normal link 
 *	- #71a7df	visited link 
 *	- #0072bb	primary navigation headings
 *	- #cccccc	the common light gray border color
 *	- #b0cfe1	third level navigation
 *	- #d7e6ef	fourth level navigation
 *	- #338dc7	third and fourth level navigation hovered link
 *	- #888888	breadcrumb link
 *	- #bbbbbb	breadcrumb non-link text
 *	- #bb5050	intense red for error box background
 *	- #88ccff	light blue link color
 *
 *
 * Common margin and padding sizes:
 *
 *	- 11px 	left and right in the content column
 *	- 4px 	between things that are related (headings and following paragraphs)
 *	- 18px 	between things that are unrelated (above headings, for example)
 *	- 12px 	is a normal "equal" margin (between paragraphs, for example)
 *	- 2em	indentation on wrapped lines of poetry text
 *
 *
 * @author Hezequiel Castelli
 * @author Nabha Cosley
 * @version 1.0
 *
 */
 
/** 
 * Temporary
 *
 */
 
#thirdLevelLinksLine,
#fourthLevelLinksLine {
display: none;
}
 
 
 
/**
 * Main styles
 *
 */

body, html {
	margin: 0 !important;
	padding: 0;
	position: relative;
}

body {
	background:url(/images-common-1.0/layout/bg-extension.gif) center top repeat-y scroll;
	margin: 0 !important;
}

#wrapup {
	color: #777777;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	max-width: 974px;
	min-width: 800px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	border: 1px solid #cccccc;
    border-width: 0 1px;
    background: #fff0cf url(/images-common-1.0/layout/slicebg-medium-light.jpg) repeat-x scroll 0 0;
}

a img {
  border: none;
}

a,
#wrapup #google a {
	text-decoration: none;
	color: #0575bd;
}

a:visited {
	/*color: #71a7df;*/
}

th {
text-align: left;
}

/* (Less...) hidden by default, because (More...) is always the first option */
#dailyQuoteContainer .viewLess {
	display: none;
}

/* Whispers from Eternity */
#previous {
display: none;
}

.navigation:visited,
.navigation a:visited {
	color: #0575bd;
}

#wrapup a:hover,
#wrapup a:active {
	color: #0575bd;
	text-decoration: underline;
}

/* Make current things bold -- but not uls, or ols */
li.current a,
#wrapup h2.current a,
a.current
{
	font-weight: bold;
}

#wrapup .clear {
	clear: both;
}

#wrapup .clearLeft,
#wrapup .pair {
	clear: left;
}

#wrapup .clearRight {
	clear: right;
}

/* Used especially with .pair */
#wrapup #mainContent .hasSmallPints p,
#wrapup #mainContent .hasSmallPints h2,
#wrapup #mainContent .hasSmallPints h3,
#wrapup #mainContent .hasSmallPints h4,
#wrapup #mainContent .hasSmallPints ul,
#wrapup #mainContent .hasSmallPints ol,
#wrapup #mainContent .hasSmallPints blockquote {
margin-left: 88px;
}

/* Used especially with .pair */
#wrapup #mainContent .hasSmallPintsWithoutBorders p,
#wrapup #mainContent .hasSmallPintsWithoutBorders h2,
#wrapup #mainContent .hasSmallPintsWithoutBorders h3,
#wrapup #mainContent .hasSmallPintsWithoutBorders h4,
#wrapup #mainContent .hasSmallPintsWithoutBorders ul,
#wrapup #mainContent .hasSmallPintsWithoutBorders ol,
#wrapup #mainContent .hasSmallPintsWithoutBorders blockquote {
margin-left: 72px;
}

/* Used especially with .pair */
#wrapup #mainContent .hasLargePints p,
#wrapup #mainContent .hasLargePints h2,
#wrapup #mainContent .hasLargePints h3,
#wrapup #mainContent .hasLargePints h4,
#wrapup #mainContent .hasLargePints ul,
#wrapup #mainContent .hasLargePints ol,
#wrapup #mainContent .hasLargePints blockquote {
margin-left: 126px;
}

/* Used especially with .pair */
#wrapup #mainContent .hasSmallImages p,
#wrapup #mainContent .hasSmallImages h2,
#wrapup #mainContent .hasSmallImages h3,
#wrapup #mainContent .hasSmallImages h4,
#wrapup #mainContent .hasSmallImages ul,
#wrapup #mainContent .hasSmallImages ol,
#wrapup #mainContent .hasSmallImages blockquote {
margin-left: 159px;
}

#wrapup #mainContent .hasSmallImages ul.nextToFloat,
#wrapup #mainContent .hasSmallImages ol.nextToFloat {
padding: 0;
}

#wrapup #mainContent .hasSmallPints blockquote p,
#wrapup #mainContent .hasLargePints blockquote p,
#wrapup #mainContent .hasSmallImages blockquote p {
margin-left: 0;
}

#wrapup #mainContent .noClear {
clear: none;
}


#wrapup .left,
#wrapup .alignleft {
	float: left;
	clear: left;
	margin: 12px 12px 18px 0; 
}

#wrapup .right,
#wrapup .alignright {
	float: right;
	clear: right;
	margin: 12px 0 18px 12px; 
}

#wrapup .editor,
.note {
	font-style: italic;
}

/* This list will let the classes and ids show up in Dreamweaver's list */
.footnoteReference,
#footnotes,
.testimonial {
}

.testimonial {
font-style: italic;
}

/* Un-italicize emphasized text inside otherwise-italicized blocks */
.note em,
.testimonial em,
address {
	font-style: normal;
}

/* Read more, more links at end of things, used in New column on home page */
.more {
/*display: block; This caused external links icons to show up way too far to the right */
}

/* Trademark and registered trademark icons */
.trademark { 
	font-size: 85%;
}

h1 .trademark {
	vertical-align: super;
}

/* Removing styles on a list */
.unstyled {
list-style: none;
}

#wrapup #mainContent .top {
	margin-top: 5px; /* Align with the top of the paragraph it is next to, or whatever */
}

#wrapup .stack {
	clear: none;
}

pre {
width: 100%;
overflow: scroll;
padding: 1em;
border: 1px solid #777777;
background: white;
}

#mainContent code {
font-size: 100%;
}

#mainArticle blockquote {
font-size: 100%;
font-style: italic;
}

.testimonialPage blockquote {
	margin-left: 0;
	padding-left: 0;
}

#articleInfoColumn blockquote,
#mainArticle blockquote.visualization {
font-style: italic;
}

#mainArticle blockquote p {
margin: 12px 0 0 0;
}

#mainContent p code,
#mainArticle blockquote p,
#mainArticle blockquote li {
font-size: 100%;
}

/* This may be superfluous, it would be good to check where it is used */
	#mainArticle blockquote.short p {
	margin: 0;
	}
	
	#mainArticle blockquote.short {
	margin: 0;
	}

#mainArticle blockquote p {
margin: 12px 0 0 0;
}

#articleInfoColumn blockquote p {
margin: 8px 0 0 0;
}

#articleInfoColumn blockquote p:first-child {
margin: 0 0 8px 0;
}

#mainArticle blockquote .attribution {
font-style: normal;
}

#articleInfoColumn blockquote .attribution {
/*margin: 0;*/
font-style: normal;
}

#mainArticle blockquote.flushLeft {
margin-left: 0;
padding-left: 0;
}

/* Use .verse for songs lyrics, poetry, etc.
.poem is being phased out */
#mainArticle blockquote.verse p,
#mainArticle blockquote.poem p {
margin: 0;
text-indent: -2em;
padding: 0 0 0 2em;
}

div.stanza {
margin-top: 8px;
}

#templeBanner {
	background-image:url(/images-common-1.0/layout/arch-without-logo.jpg);
	height: 149px;
	background-position: top center;
	margin: 0;
	max-width: inherit;
	min-width: inherit;
	padding: 0;
	position: relative;
	background-position: bottom;
}

#templeBannerGrayGradiantLeft {
	height: 12px;
	background-image: url(/images-common-1.0/layout/banner-bottom-left.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	width: 101px;
	position: absolute;
	top: 160px;
	right: 873px;
}

#templeBannerGrayGradiantRight {
	height: 12px;
	background-image: url(/images-common-1.0/layout/banner-bottom-right.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	width: 82px;
	position: absolute;
	top: 160px;
	left: 892px;
}

#templeBannerGrayGradiantRight,
#templeBannerGrayGradiantLeft {
display: none;
}

#headLogo {
	height: 108px;
	width: 303px;
	margin: 0 auto;
	padding-left: 2px;
	padding-top: 29px;
}

#mainContent {
	margin: 0;
	margin-top: -5px;
	max-width: inherit;
	min-width: inherit;
	padding: 0;
	position: relative;
	color: #444444;
}

#primaryNavigation {
	position: absolute;
	top: 0;
	margin-top: 0;
	padding-top: 19px;
	margin-right: 14px;
	margin-bottom: 14px;
	margin-left: 0;
	padding-left: 20px;
	line-height: 1;
	background: url(/images-common-1.0/layout/vertical-dotted-border.gif) repeat-y 100% 1px;
	margin-right: 0;
	width: 197px;
}

#primaryNavigationInner {
	width: 182px;
}

#primaryNavigation .group {
	margin-bottom: 30px;
}

#primaryNavigation a {
	text-decoration: none;
	display: block;
}

#primaryNavigation ul {
	display: none;
	line-height: 1.2em;
}

#primaryNavigation ul.current {
	display: block;
}

#primaryNavigation h2
{
	margin: 0;
	padding: 0;
	width: 100%;
	font-size: 101%;
}

#primaryNavigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

#primaryNavigation li {
	margin: 0;
	padding: 0;
	width: 100%;
}

#primaryNavigation h2 {
	font-weight: normal;
}

#primaryNavigation h2,
#wrapup #primaryNavigation h2.closed {
	color: #0072bb;
	margin-top: 14px;
	padding-left: 16px;
	background: url(/images-common-1.0/layout/navigation-arrow-right.png) center left no-repeat;
}

#wrapup #primaryNavigation h2.home {
background-image: none;
}

#primaryNavigation h2.current {
font-weight: bold;
}

#primaryNavigation h2.current,
#primaryNavigation h2.opened {
	background: url(/images-common-1.0/layout/navigation-arrow-down.png) center left no-repeat;
}

#primaryNavigation h2 a {
	background: url(/images-common-1.0/layout/navigation-dotted-border.gif) bottom repeat-x;
	color: #0072bb;
	padding-bottom: 5px;
	padding-right:11px;
}

#primaryNavigation li {
	padding-left: 16px;
	padding-top: 5px;
}

#primaryNavigation li a {
	background: url(/images-common-1.0/layout/navigation-dotted-border.gif) bottom repeat-x;
	color: #777777;
	padding-bottom: 5px;
	font-size: 85%;
	padding-right:11px;
	width:168px;
}

#rightColumn {
	position: absolute;
	top: 0;
	right: 0;
	padding: 29px 0 0 0;
	margin: 0 0 20px;
	width: 166px;
}

#utilities {
	font-size: 85%;
	padding-left: 10px;
	background-image: url(/images-common-1.0/layout/horizontal-dotted-border.gif);
	background-repeat: repeat-x;
	background-position: bottom;
}

#utilities a {
	color: #777777;
	line-height: 18px;
}

#rightColumn .articleActionsBar {
	margin-top: 5px;
	padding-top: 0; /* Overriding default for .articleActionsBar, used near the footer */
	padding-left: 10px;
	font-size: 85%;
	height: 65px;
	background-image: none;
}

#rightColumn .articleActionsBar ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	
	
}

#rightColumn .articleActionsBar li {
	line-height: 3;
	display: block;
	float: none;
}

#wrapup #rightColumn .articleActionsBar a {
	color: #777777;
}

#mainContent .metadata a {
	color: #777777;
}

.searchSite {
	background: url(/images-common-1.0/layout/search-combined.png) transparent no-repeat;
	width: 163px;
	height: 36px;
	position: relative;
	right: 10px;
}

.searchSiteGo {
	background-image: url(/images-common-1.0/layout/search-right.png);
}
 
.searchSite input.text {
top: 6px;
left: 9px;
width: 120px;
color: #777777;
background: transparent;
border: 0 solid #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
position: absolute;
}
 
.searchSite input.submit {
right: 0px;
position: absolute;
}

#utilities p,
#utilities form,
#utilities input {
margin: 0;
}

#utilities a {
line-height: 2;
}

#rightColumn h2
{
	font-size: 85%;
	margin-top: 12px;
	margin-bottom: 4px;
	font-weight: bold;
}

#rightColumn h3
{
	font-size: 85%;
	margin-top: 12px;
	margin-bottom: 4px;
	font-weight: bold;
}


#bookBox {
	margin: 38px 0 25px 0;
	padding: 10px 10px 0 10px;
	background: url(/images-common-1.0/layout/horizontal-dotted-border.gif) repeat-x top left;
}

#bookBox p,
#bookBox li {
	margin-top: 0;
	font-size: 85%;
}

#bookBox p {
	margin-bottom: 8px;
}

#bookBox ol,
#bookBox ul {
	margin-left: 0;
	padding-left: 2em;
}

#bookBox li {
	margin: 0 0 2px 0;
}

#mainCenterBorderRight {
	min-width: 402px;
	margin-left: 216px;
	margin-right: 166px;
	position: relative;
	background-image: url(/images-common-1.0/layout/vertical-dotted-border.gif);
	background-repeat: repeat-y;
	background-position: right;
}

#mainCenter {
	background-image: url(/images-common-1.0/layout/vertical-dotted-border.gif);
	background-repeat: repeat-y;
	background-position: left;
	position: relative;
	color: #444;
}

#footer {
	padding-top: 8px;
	padding-bottom: 10px;
	padding-right: 3px;
	padding-left: 3px;
	font-size: 85%;
	line-height: 1.2em;
	text-indent: 0;
	position: relative;
	background-image: url(/images-common-1.0/layout/horizontal-dotted-border.gif);
	background-repeat: repeat-x;
	background-position: 2px bottom;
	clear: both;
}

#footer ul {
	margin: 0;
	padding: 0;
	margin-bottom: 12px;
	list-style: none;
}

#footer li {
	margin-top: 2px;
}

#footer a,
#footer p,
#footer h2,
#footer li {
	color: #777777;
}

#footer p {
	margin: 0 0 8px 0;
}

#footer h2
{
	font-size: 100%;
	font-weight: bold;
	margin: 0 0 4px;
}

.footerBox1
{
	width: 32%;
	float: left;
	margin-left: 8px;
}

.footerBox1 form {
	margin-bottom: 8px;
}

.footerBox1 .searchSite {
	width: 163px;
	height: 27px;
}

.footerBox2
{
	padding-left: 3px;
	width: 32%;
	float: left;
}

.footerBox3
{
	width: 32%;
	float: left;
}

.separator {
	clear: both;
}

.alignBottom {
	display: block;
	position: absolute;
	bottom: 11px;
}

#copyright {
	position: relative;
	margin: 0;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 7px;
	padding-left: 7px;
	background-image: url(/images-common-1.0/layout/horizontal-dotted-border.gif);
	background-repeat: repeat-x;
	background-position: 2px bottom;
}

#copyright p {
	margin: 0;
	/*was color: #0575bd;*/
	color: #777777;
	text-align: center;
	font-size: 85%;
}

#logo {
	padding: 10px 0;
	text-align: Center;
	min-height: 200px;
}

#tooltip div.body,
#tooltip h3 {
	margin: 0;
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	padding: 0 28px 0 16px;
	color: #0575bd;
}

#tooltip h3 {
	font-weight: normal;
}

#tooltip {
	padding: 11px 0 20px;
	background: url('/images-common-1.0/layout/tooltip-top.png') no-repeat top left;
	width: 250px;
	position: absolute;
	z-index: 3000;
}

#tooltip div.background {
	background: url('/images-common-1.0/layout/tooltip-middle.png') repeat-y top left;
	width: 100%;
}

#tooltip div.bottom {
	background: url('/images-common-1.0/layout/tooltip-bottom.png') no-repeat top left;
	height: 20px;
	width: 100%;
}

.tooltipContent {
display: none;
}


#currentPathLine {
	margin: 7px 0 0 0;
	padding: 0 11px 7px 11px;
	background-image: url(/images-common-1.0/layout/horizontal-dotted-border.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	color: #bbbbbb;
	font-size: 85%;
	line-height: 1.4;
}

#currentPathLine a {
	color: #888888;
}

#rightColumnContent {
	padding: 0 8px 0 8px;
}

#articleInfoColumn {
	width: 24%;
	float: right;
	padding: 10px 11px 0 0;
	/* Hezequiel made this right padding 5px, and the width 30% */
	
}

#videoInfoColumn #articleInfoColumn {
	width: 167px;
}

#articleInfoColumn blockquote {
margin: 0 0 18px 0;
padding: 0;
}

#articleInfoColumn p,
#rightColumnContent p {
	margin: 0 0 12px;
	padding: 0;
	font-size: 85%;
	line-height: 1.2;
}

#supportAnandaBox p {
	margin: 0;
	padding: 0;
	font-size: 85%;
	line-height: 1.2;
}

#articleInfoColumn h2,
#supportAnandaBox h1
{
	font-size: 100%;
	font-weight: bold;
}

#articleInfoColumn h2 {
	margin-top: 18px;
	margin-bottom: 4px;
	clear: both;
}

#articleInfoColumn h2:first-child {
	margin-top: 0;
}

#articleInfoColumn h3 {
	font-size: 85%;
	font-style: italic;
}

#articleInfoColumn h3 .subtitle {
	font-weight: normal;
}

#supportAnandaBox a {
	display: inline;
}


#articleInfoColumn ul,
#articleInfoColumn ol,
#rightColumnContent ul,
#rightColumnContent ol {
	margin: 4px 0 8px 0;
	padding: 0;
	list-style-type: none;
	font-size: 85%;
	line-height: 1.2;
}

#articleInfoColumn li {
	clear: left;
}

#articleInfoColumn li,
#rightColumnContent li {
	margin: 0.5em 0 0 0;
	/* Removed because it is ugly in normal lists.
	Was there some special purpose for it?
	padding: 0 0 0 42px;
	text-indent: -42px; */
}

#videoDestinationRelatedVids ul,
#videoDestinationRelatedVids ol {
	font-size: 84%;
}

#videoInfoColumn li {
	padding: 1px 0;
	text-indent: 0;
}


#supportAnandaBox {
	margin: 8px 5px 12px 5px;
}

.shadowLayer1, .shadowLayer2, .shadowLayer3
{
  display: inline-table;
  /* \*/display: block;/**/
}

.shadowLayer1
{
	margin-top: 18px;
	float: left;
	background-image: url(/images-common-1.0/layout/support-corner-and-sides-lg.png);
	background-repeat: no-repeat;
	background-position: bottom right;
}

.shadowLayer2
{
/*	background-image: url(/images-common-1.0/layout/support-bottom-left.png);
*/	background-repeat: no-repeat;
	background-position: bottom left;
}

.shadowLayer3
{
	/*background-image: url(/images-common-1.0/layout/support-top-right-shadow.png);*/
	background-repeat: no-repeat;
	background-position: top right;
	padding-right: 10px;
	padding-bottom: 10px;
}

.height1px {
	height: 1px;
}

#supportAnandaBoxTop {
	background-image: url(/images-common-1.0/layout/support-ananda-border.jpg);
	background-repeat: repeat-x;
	background-position: top;
}

#supportAnandaBoxBottom {
	background-image: url(/images-common-1.0/layout/support-ananda-border.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
}

#supportAnandaBoxLeft {
	background-image: url(/images-common-1.0/layout/support-ananda-border.jpg);
	background-repeat: repeat-y;
	background-position: left;
}

#supportAnandaBoxRight {
	background-image: url(/images-common-1.0/layout/support-ananda-border.jpg);
	background-repeat: repeat-y;
	background-position: right;
}

#supportAnandaBoxTopLeft {
	background-image: url(/images-common-1.0/layout/support-ananda-top-left.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}

#supportAnandaBoxTopRight {
	background-image: url(/images-common-1.0/layout/support-ananda-top-right.gif);
	background-repeat: no-repeat;
	background-position: top right;
}

#supportAnandaBoxBottomLeft {
	background-image: url(/images-common-1.0/layout/support-ananda-bottom-left.gif);
	background-repeat: no-repeat;
	background-position: bottom left;
}

#supportAnandaBoxBottomRight {	
	background-image: url(/images-common-1.0/layout/support-ananda-bottom-right.gif);
	background-repeat: no-repeat;
	background-position: bottom right;
}

#supportAnandaBox h1
{
	margin: 0;
}

#supportAnandaBox p {
	margin-top: 8px;
}

#videoDestinationRelatedVids {
	padding-right: 15px;
	position: relative;
}

#videoDestinationRelatedVids ul {
	margin: 0 0 20px 0;
	padding: 0;
	list-style-type: none;
}

#videoDestinationRelatedVids p {
	padding: 0;
}

#videoDestinationRelatedVids .relatedVideo p {
	padding-right: 20px;
	font-size: 100%;
}

.relatedVideo p a {
	font-style: italic;
}

.relatedVideo li {
	padding: 4px 0;
}


#mainArticle {
	position: relative;
	/*min-height: 25em;*/
	line-height: 1.4;
}

#mainArticleInner {
	padding: 0 16px 0 11px;
}


.withRightInfoColumn {
	margin-right: 27%;
}

.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%;
}

/* Ah, but some content should still not have the right margin; it needs the full width */
#wrapup .indexList li {
margin-right: 0;
}

#mainArticle h1
{
	font-size: 138%; /* BBC uses 230%, we used to use 116%, Nabha likes 123% */
	font-weight: bold;
	color: #0575bd;
	margin: 8px 0 12px 0;
	/* padding: 0 0 8px 0; Don't know what this is for, but it can cause problems */
	line-height: 1.3;
}

#mainArticle h2
{
	font-size: 108%;
	font-weight: bold;
	margin: 18px 0 4px 0;
	line-height: 1.3;
}

/* Rules for an h2 when it follows an h1 */
#mainArticle h1 + h2 {
	margin-top: 12px;
}

/* Rules for an h3 when it follows an h2 */
#mainArticle h2 + h3 {
	margin-top: 4px;
}

#mainArticle h3
{
	font-size: 100%;
	font-weight: bold;
	margin: 18px 0 4px 0;
	line-height: 1.3;
}

#mainArticle h4
{
	font-size: 100%;
	font-weight: 100;
	font-style: italic;
	margin: 6px 0 4px 0;
	line-height: 1.3;
}

/* Subtitles */

/* Give it a bottom margin bigger than an h1 or h2 without it  
This requires a display: block, which means that you shouldn't 
have a line break as the first thing in a span.subtitle */
.subtitle {
/*display: block; This causes problems with external links in an h2*/
margin-bottom: 12px;
}


#mainArticle h1 .subtitle,
#mainArticle h1 .attribution,
#mainArticle h1 .date {
	font-size: 85%;
	font-weight: normal;
}

#mainArticle h2 .subtitle,
#mainArticle h2 .attribution,
#mainArticle h2 .date,
#rightColumn h2 .subtitle,
#rightColumn h2 .attribution,
#rightColumn h2 .date {
	font-size: 85%;
	font-style: italic;
	font-weight: normal;
}

#articleInfoColumn h2 .subtitle {
	font-style: italic;
	font-weight: normal;
}

#mainArticle h3 .subtitle,
#mainArticle h3 .attribution,
#mainArticle h3 .date {
	font-size: 85%;
	font-style: italic;
	font-weight: normal;
}

#mainArticle h1 .attribution,
#mainArticle h2 .attribution,
#mainArticle h3 .attribution {
	font-style: normal;
}


#mainArticle p {
	font-size: 100%;
	margin: 0 0 12px 0;
}

#mainArticle ul,
#mainArticle ol {
	font-size: 100%;
	margin: 0 0 12px 0;
	padding: 0 0 0 40px;
}

#mainArticle ul ul,
#mainArticle ol ol,
#mainArticle ul h3,
#mainArticle ol h3 {
	font-size: 100%;
}

#mainArticle ul h3,
#mainArticle ol h3 {
	margin-top: 4px;
	margin-bottom: 0;
}

#mainArticle ol ol {
	list-style: lower-alpha;
}

li {
	margin: 0;
	padding: 0;
}

#mainArticle .indexList li {
	list-style: none;
}

/* When a list is next to a floated object */
#mainArticle .nextToFloat {
	list-style-position:inside;
}

#mainArticle input {
	font-size: 100%;
}

#mainCenter .searchSite {
right: 3px;
font-size: 85%;
}

#mainArticle ul p,
#mainArticle ol p {
	font-size: 100%;
	margin-left: 0;
	margin-right: 0;
}

.articleActionsBar {
	clear: both;
	font-size: 85%;
	padding: 20px 0 0 11px;
	height: 33px;
	background-repeat: repeat-x;
	background-position: 2px bottom;
	background-image: url(/images-common-1.0/layout/horizontal-dotted-border.gif);
}

#mainCenter .articleActionsBar {
	background-image: none;
}

#mainCenter .articleActionsBarSeparator {
	height: 2px;
	background-repeat: repeat-x;
	background-position: 2px bottom;
	background-image: url(/images-common-1.0/layout/horizontal-dotted-border.gif);

}

.articleActionsBar ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.articleActionsBar li {
	line-height: 3;
	float: left;
	margin-right: 25px;
}

.articleActionsBar a {
	color: #777777;
	display: block;
}

#videoActions ul {
	list-style-type: none;
	font-size: 100%;
	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 <div> */
.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: 110px;
}

/* This should be overriden in individual pages, if the image widths are different */
.indexList li p {
width: 89px;
}

#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 50px 0 65px;
	max-width: 456px;
}

a.viewAll {
	font-weight: bold;
}

.withTopDottedBorder,
div.hr {
	clear: both;
	margin: 25px auto 25px auto;
	width: 140px;
	height: 1px;
	/* This was used to make it flush left
	position: relative;
	right: 10px; */
	background-image: url(/images-common-1.0/layout/horizontal-dotted-border.gif);
	background-repeat: repeat-x;
	background-position: bottom;
}

hr {
display: none;
}

.withRightDottedBorder {
	background-image:url(/images-common-1.0/layout/vertical-dotted-border.gif);
	background-position: right;
	background-repeat: repeat-y;
	padding-top: 7px;
}

.rightColumnBlock .listnone {
	list-style-type: none;
}

/**
 * Forms
 *
 * Generic form
 *
 * @section forms
 * @subsection genericForm
 *	
 */
 
.genericForm fieldset {
border: 0;
padding: 0;
margin: 18px 0 4px;
}

.genericForm label {
display: block;
clear: left;
margin: 5px 0;
}

.genericForm .labelName,
.genericForm .radio .groupName,
.genericForm .checkbox .groupName {
display: block;
float: left;
clear: left;
font-size: 100%;
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 18px;
}

.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 {
	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 {
	margin-left: 15px; /* Should line up underneath the label and not the button */
}

#wrapup .genericForm .fullwidth label {
	margin-left: 0;
	padding-left: 0;
}

#mainArticle .genericForm .textarea .labelName,
#mainArticle .genericForm .radio .labelName,
#mainArticle .genericForm .checkbox .labelName {
width: 100%;
float: none;
clear: none;
margin-left: 0;
display: inline;
font-size: 100%;
}

#mainArticle .genericForm .checkbox .labelName {
display: block;
text-align: left;
margin-left: 2em;
}

.genericForm .radio .groupName,
.genericForm .checkbox .groupName {
display: block;
font-size: 100%;
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;
}

/* Undoing above float: left; that applies to all labels */
.genericForm .radio label,
.genericForm .checkbox label {
float: none;
clear: none;
}

.genericForm .submit {
margin: 1em 0 1em 0;
}

.genericForm .checkbox input,
.genericForm .radio 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 {
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: 100%; /* Because it will be inside a paragraph or something */
}

#mainArticle .genericForm fieldset h2,
#mainArticle .genericForm fieldset h3 {
margin-top: 0;
}

/* The label tag already decreases the font size some */
#mainArticle .genericForm .details,
.genericForm label .help,
.genericForm label .error {
font-size: 84%;
margin-bottom: 0;
font-style: normal;
}

/* For other pages */
.help {
font-size: 85%;
font-style: italic;
}

.genericForm input,
.genericForm select {
margin-right: 4px;
}

.required {
color: #bb5050;
}

/*
 * Forms
 *
 * Errors
 *
 */
 
 /* The box that appears at the top of an error-ridden form */
.errorBox {
	padding: 11px;
	margin: 1em 0 1em 0;
	background: #bb5050;
	color: white;
	border: 1px solid #444444;	
}

#mainArticle .errorBox h1,
#mainArticle .errorBox h2,
#mainArticle .errorBox h3 {
margin-top: 0;
color: #fff;
}

.errorBox a {
color: #88ccff;
}

.genericForm label .error {
	background-position: 0 0;
	background-repeat: no-repeat;
	padding-right: 0;
	padding-left: 16px;
	background-image: url(/images-common-1.0/icons/icon-error.png);
	color: #bb5050;
}
 

/**
 * Images
 *
 * Borders and more.
 *
 */
 
#mainArticle img,
#articleInfoColumn img,
#rightColumnContent img,
#bookBox img,
#tooltip img,
#wrapup .largeBorder {
	padding: 7px; 
	background: #fff; 
	border: 1px solid #ccc; 
	float: left; 
	clear: left;
	margin: 4px 12px 18px 0; 
}

/* Add a bigger margin if the photo is inside a paragraph */
#mainArticle img p {
margin-top: 12px;
}

#wrapup .pair img,
#wrapup .tooltipContent img {
margin-top: 2px;
}


#articleInfoColumn img,
#rightColumnContent img {
margin: 1px 4px 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;
}
 
#articleInfoColumn img,
#rightColumnContent img,
#newColumn img,
#bookBox img,
#wrapup .smallBorder {
	padding: 4px;
}

#wrapup .noBorder {
padding: 0;
border-width: 0;
background: none;
}

#wrapup .noFloat {
	float: none;
}

.caption {
margin: 4px 12px 18px 0;
float: left;
clear: left;
}

#mainArticle .caption img {
margin-bottom: 4px;
margin-top: 0; /* The div.caption will have its own margins, we expect */
float: none;
}

#mainArticle .caption p {
	font-size: 84%;
	font-style: italic;
	margin: 0 2px 0; /* 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 */
}

#mainArticle .caption p em {
font-style: normal;
}

#mainArticle .verticalStack img {
	margin-top: 4px;
	margin-bottom: 4px;
}

#mainArticle .verticalStack {
	margin-bottom: 18px;
}


/**
 * Icons
 *
 * Adds an icon on one side of links.
 *
 */

/* For XML, iTunes 1-click, and other icons */
img.icon {
display: inline;
} 


a.external {
	background: 0 url(/images-common-1.0/icons/icon-external.gif) no-repeat;
	background-position: right;
	padding-right: 15px;
}

/* Inside an H2 should be different */
h2 a.external {
	background: 0 url(/images-common-1.0/icons/icon-external.gif) no-repeat;
	background-position: right;
}

/* External icon shouldn't show in these places */
#primaryNavigation a.external,
#footer a.external {
	background-image: none;
	padding-right: none;
}

/* Shouldn't show with subtitles, because the heading will presumably already have the link */
h2 .subtitle a.external,
h3 .subtitle a.external,
h4 .subtitle a.external {
	background: none;
	padding-right: 0;
}

a.popup {
	background: 0 url(/images-common-1.0/icons/icon-popup.gif) no-repeat;
	background-position: right;
	padding-right: 19px;
}

a.audio {
	
	background: url(/images-common-1.0/icons/icon-sound.png) no-repeat 0 50%;
	padding-left: 26px;
	padding-right: 0;
}

/* Flips the Radio Ananda audio icon to the right side
#utilities a.audio {
	background-position: right 50%;
	padding-right: 26px;
	padding-left: 0;
}*/
     
a.video {
	background: url(/images-common-1.0/icons/icon-video.png) no-repeat 0 50%;
	padding-left: 25px;
	padding-right: 0;
}

a.go,
#home .more a,
#home a.more,
p.go a {
	background: 0 url(/images-common-1.0/icons/icon-go.gif) no-repeat;
	background-position: right;
	padding-right: 15px;
}

#home #dailyQuote .more a,
#home #dailyQuote a.more {
padding-right: none;
background-image: none;
}

a.audio,
a.video,
a.external,
a.popup,
a.go
{
padding-top: 1px;
padding-bottom: 1px;
}

a.printIcon,
a.donateIcon,
a.shareIcon,
a.emailIcon {
	background-position: left;
	background-repeat: no-repeat;
	padding-right: 0;
	padding-left: 22px;
}

a.printIcon {
	background-image: url(/images-common-1.0/icons/icon-print.png);
}

a.donateIcon {
	background-image: url(/images-common-1.0/icons/icon-donate.png);
	padding-left: 17px;
}

a.shareIcon {
	background-image: url(/images-common-1.0/icons/icon-share.gif);
}

.active a.shareIcon {
	background-image: url(/images-common-1.0/icons/icon-share-active.gif);
}

a.emailIcon {
	background-image: url(/images-common-1.0/icons/icon-email.png);
}

/* Disable the icon */
a.noIcon,
.addthis_toolbox .hover_menu a {
	background-image: none;
	padding: 0;
}

/*
 * Search results
 * search.ananda.org
 *
 */
 
#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: 85%;
}

/* 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: #444444;
}

#google p {
	margin-top: 1em;
}

/* No results */
#google #noResults {
	font-size: 95%;
}

/**
 * AddThis.com's Share Button
 */
.addthis_toolbox,
.addthis_toolbox .custom_hover,
li div#printUtility
{
    position: relative;
}

/*.addthis_toolbox .custom_hover .custom_button
{
    -moz-border-radius: 5px 5px 0 0;    
    -webkit-border-radius: 5px 5px 0 0;
}*/

.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: 1000;
}

/* The toolbox after the article */
#mainCenter .addthis_toolbox .hover_menu {
	bottom: 30px;
}

.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 a
{
    width: 75px;
    padding: 2px 0 2px 34px;
    position: relative;
    display: block;
    text-decoration: none;
    color: #777777;
}

.addthis_toolbox .hover_menu  a:hover
{
    text-decoration: underline;
}

.addthis_toolbox .hover_menu  span
{
    position: absolute;
    left: 14px;
    top: 4px;
}

.addthis_toolbox .hover_menu  .more
{
    margin: 10px 10px 0 10px;
	text-align: center;
}

.addthis_toolbox .hover_menu  .more a
{
    padding: 4px 0;
    margin: 0;
}

.addthis_toolbox .hover_menu .more span,
.addthis_toolbox .emailIcon span {
	display: none;
}

/**
 * Slide shows, videos, and all other flash objects 
 * These classes let inline popups and other fancy HTML boxes appear on top of the flash
 * Also necessary, possibly, is <param name="wmode" value="transparent"> and <embed wmode="transparent"  ... />
 */
	.flashWrap1 {
	height: 550px;
	}
	
	.flashWrap2 {
	position: absolute; 
	z-index: 1;
	}
	
	/* Is this necessary? */
	.flashWrap1 object {
	z-index: 1;
	}