/****************************************************************************/
/* NOTE: This file is duplicated in all translations of Palouse Mindfulness */
/*       IF CHANGES ARE MADE                                                */
/*           (1) COPY TO /actual, /english, /es, /it, etc.)                 */
/*           (1) THEN *** TEST *** (unless want to orphan that version)     */
/****************************************************************************/
/*  See _core.css for styles common to all pages */

.centered {
/*	border:1px ridge green;*/
	margin: auto;	/* Center */
}

.phone-only {			
	display: none;		/* DO NOT to execute anything in this class */
}

.tablet-only {	
	display: none;		/* DO NOT to execute anything in this class */	
}

.tablet-and-smaller {
	display: none;		/* DO NOT to execute anything in this class */
}

.tablet-and-larger {
	display: inline;	/* Execute EVERYTHING in this class */
}

.laptop-and-larger {
	display: inline;	/* Execute EVERYTHING in this class */
}

.desktop-only {	
	display: inline;	/* Execute EVERYTHING in this class */
}

#wrapper {				/* Basic page... */
	padding:0;
	border:2px ridge #000066;
	width: 950px;	/* So won't "spread" too wide on larger screens. On smaller viewports it is "100%". */
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
    background-color: #ffffff;
}

#wrapper-graduate-map {	/* Special wrapper for Graduate Map */
	padding:0;
	border:2px ridge #000066;
	width: 975px;
	height: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
    background-color: #ffffff;
}

#wrapper-visitor-map {/* Special wrapper for Visitor Map */
	padding:0;
	border:2px ridge #000066;
	width: 720px;
	height: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
    background-color: #ffffff;
}

/* can also use: @media screen and (min-width: 500px) and (max-width: 600px) */

/*************************************************************************************************/
/*  Generic definitions                                                                          */
/*************************************************************************************************/

p, .default {
	color: #333;
/*	font & color specified in #content */
}

#content {
	background-color: #fff;
	height: 100%;
	overflow: hidden;	/* allows box to expand with content */
	margin-top:0px;
	margin-bottom:0px;
	margin-right:0px;
	margin-left:0px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #333;
}
/*************************************************************************************************/
/*  Forms                                                                         */
/*************************************************************************************************/

input, textarea {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	padding: 5px;
	border-radius: 3px;
	background-color: #f8f8f8;
}

.message_form {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}

/*************************************************************************************************/
/*  Definitions describing layout common to most pages                                           */
/*************************************************************************************************/

#bannertop {		/* if no language links in top, otherwise use the three banner_ id's below */
	width: 100%;
	height: 22px;
	float: left;
	padding: 0;
	margin: 0;
	background-image: url(https://palousemindfulness.com/art/clouds1_950x22.jpg);	/* remove http? to make direct ref? */
}

/*   bannertop_left_lang, bannertop_middle, bannertop_right form very top.    */
/* 3 styles for top banner so background-color can come closer to matching.   */
/*   These are re-defined for the smaller viewports because background-image  */
/* "slides" as screen gets smaller.                                           */
#bannertop_left_lang {
	width: 40%;	
	height: 22px;
	float: left;
	padding: 0;
	margin: 0;
	background-color: #203769; /* sampled from left side of title banner */
}
	
#bannertop_middle1 {		
	width: 15%;
	height: 22px;
	float: left;
	padding: 0;
	margin: 0;
	background-color: #1f3566; /* sampled from next part of title banner */
}

#bannertop_middle2 {		
	width: 20%;
	height: 22px;
	float: left;
	padding: 0;
	margin: 0;
	background-color: #22335f; /* sampled from next part of title banner */
}

#bannertop_right {
	width: 25%;
	height: 22px;
	float: left;
	padding: 0;
	margin: 0;
	background-color: #1e2d4c; /* sampled from right side of title banner */
}

#banner_title {			/* 950x115 - goes underneath "banner_top" pieces, above */
	width: 100%;		/* Holds the "Palouse Mindfulnesss" title               */
	height: 115px;
	overflow: hidden;	/* clips the content, the photo in this case            */	
	clear:both;			/* puts image on next line w/out regard to float:right  */
}

.banner_menu {		/* Holds the horizontal menu */
	border-top: 1px #cccccc solid;
	border-bottom: 1px #cccccc solid;
	width: 100%;
	height: 24px;
	background-image: url(art/clouds3_topmenu_950x24.jpg);	
	font-family: "Century Gothic", "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
	font-size: 11pt;
	padding:0;
	margin:0;
}

.banner_menu a:link, .normal-hover a:visited{	/* For some reason, without this, hovering didn't */
	font-weight: bold;							/* work correctly on banner_menu                  */
	color: #006666;	/*  blue green - used for links */
	text-decoration: none;
}
.banner_menu a:hover {
	color: #cc5533;	/* brown/salmon: cc5533, light blue: 3355ff */
	text-decoration: none;
}

.normal-hover a:link, .normal-hover a:visited{	/* For some reason, without this, hovering didn't */
	font-weight: bold;							/* work correctly on banner_menu                  */
/*	color: #cc5533; */
	color: #006666;	/* blue/green - used for links */
	text-decoration: none;
}
.normal-hover a:hover {
	color: #cc5533;	/* brown/salmon: cc5533, light blue: 3355ff */
	text-decoration: none;
}

.whats-new {		/* Different colors for "What's New" on horizontal banner */
	color: #00b600;	/* green */
	font-style: italic;
	font-weight: bold;
	font-family: "Century Gothic", "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
	font-size: 11pt;
}
.whats-new a:link, .whats-new a:visited {
	color: #00b600;	/* green */
}
.whats-new a:hover {
	color: #cc5533;/* brown/salmon: cc5533 */
}

/*******************************************************************************************************/
/*  1st column: left_menu declarations - WILL NEED TO CHANGE MBSR.LBI to use left_menu_subtitle        */
/*******************************************************************************************************/

#left_menu_wrapper{	/* Basically empty - only used as place-holder for Templates. */
}

#left_menu {
	width: 17%;
	height:auto;
	float: left;
	padding: 15px 5px 10px 0px; /* top, right, bottom, left */
	margin-bottom: 0px;
	border-right: 1px #eee solid;
	background-image: url(art/clouds4_leftmenu_950x201.jpg);
	background-repeat:no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 19px;
	text-align: center;
}
#left_menu a:link, #left_menu a:visited {
	font-weight: 500;
	color: #006666;
	text-decoration: none;
}
#left_menu a:hover {
	color: #cc5533;
	text-decoration: none;
}

#left_menu_manual {	/* based on left_menu but for printed manual */
	width: 39px;	/* 40 counting 1px border on right */
	height: auto;
	float: left;
	padding: 40px 0px 10px 0px; /* top, right, bottom, left */
	margin-bottom: 0px;
}

/*  The following "left_menu" definitions are used for titles. */
/* Because in some cases, we needed several titles, tried to make "left_menu_title" a class def (".")    */
/* rather than "#" (id), but for some reason, when we do this, the "bold" attribute is over-ridden,     */
/* we've left "left_menu_title" as id(#) and used instead left_menu_subtitle and didn't make them links.*/

.left_menu_subtitle {	
	font-family: "Century Gothic", "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
	color: black;/* #006666;*/
	height: 17px;
	font-size: 10pt;
	font-weight: bold;
	font-style: italic;
	text-align: center;
	padding: 0px 10px 10px 10px; /* top, right, bottom, left */
}

.mobile-left_menu_subtitle { /* For mobile, font-size needs to be larger than 10pt, no padding on top */
	font-family: "Century Gothic", "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
	color: black;/* #006666;*/
	height: 17px;
	font-size: 14pt;
	font-weight: bold;
	font-style: italic;
	text-align: center;
	padding: 0px 10px 10px 10px; /* top, right, bottom, left */
}

#left_menu_title {	
	font-family: "Century Gothic", "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
	color: #006666;
	height: 17px;
	font-size: 10pt;
	font-weight: bold;
	font-style: italic;
	text-align: center;
	padding: 10px 10px 10px 10px; /* top, right, bottom, left */
}
#left_menu_title a:link, #left_menu_title a:visited {
	color: #006666;
	font-weight: bold;
	text-decoration: none;
}
#left_menu_title a:hover {	
	color: #cc7733;
	font-weight: bold;
	text-decoration: none;
}

#left_menu_title_twolines {	
	font-family: "Century Gothic", "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
	color: #006666;
	height: 34px;
	font-size: 10pt;
	font-weight: bold;
	text-align: center;
	padding: 10px 10px 10px 10px; /* top, right, bottom, left */
}
#left_menu_title_twolines a:link, #left_menu_title_twolines a:visited {
	color: #006666;
	font-weight: bold;
	text-decoration: none;
}
#left_menu_title_twolines a:hover {
	color: #cc7733;
	font-weight: bold;
	text-decoration: none;
}

/*******************************************************************************************************/
/*  2nd column: middle_text declarations - body of the text (between left_menu and right _photo.       */
/*******************************************************************************************************/

#middle_text {
	width: 60%;
	height: 100%;
	float: left;
	padding: 10px 20px 0px 20px; /* top, right, bottom, left */
	margin-bottom: 10px;
}
#middle_text_manual {	/* Based on middle_text but for printed manual */
	width: 749px;		/* More room for text, can be 170 pixels wider */
	height: 100%;
	float: left;
	padding: 10px 20px 0px 20px; /* top, right, bottom, left */
	margin-bottom: 0px;
}

.middle_text_header {
	height: 100%;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 22px;
	font-weight: bold;
	font-style: italic;
	color: #000088;
}
.middle_text_header_materials {
	height: 100%;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 22px;
	font-weight: bold;
	font-style: italic;
	color: #cc5533;
}

/*******************************************************************************************************/
/*  3rd column: right_photo declarations.  Holds photo and quote.                                      */
/*******************************************************************************************************/

#right_photo {				/* Right column - holds photo & quote */
	width: 18%;
	height: 100%;
	float: right;
	padding: 0px 0px 10px 0px; /* top, right, bottom, left */
	margin-bottom: 0px;
	margin-top: 0px;
/*	border-left: 1px #eee solid;*/
}

#right_photo-mobile {	/* do nothing, let sidenav position.  Explicitly used, even for larger viewports */
}						/* because html doesn't allow id ("right_photo") to be referenced twice.         */

#right_photo_manual {		/* Based on right_photo but for printed manual */
	width: 120px;			/* Width reduced from 170px */ 
	height: 100%;
	float: right;
	padding: 0px 0px 10px 0px; /* top, right, bottom, left */
	margin-bottom: 0px;
	margin-top: 0px;
}

.quotes_wrapper a:link, .quotes_wrapper a:visited {	
	font-weight: 500;
	color: #333;
	text-decoration: none;
}
.quotes_wrapper a:hover {
	color: #cc5533;
	text-decoration: none;
}

/* Don't know why I need identical declarations but with diff name "-mobile" to work */
.quotes_wrapper-mobile a:link, .quotes_wrapper_mobile a:visited {	
	font-weight: 500;
	color: #333;
	text-decoration: none;
}
.quotes_wrapper-mobile a:hover {
	color: #cc5533;
	text-decoration: none;
}

/* Defines the font used in the text for the quote under the photo. */
.right_quote {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
	padding: 10px 5px 10px 3px; /* top, right, bottom, left */
}


/*************************************************************************************************/
/*  Miscellaneous definitions                                                                          */
/*************************************************************************************************/

ul {
/*	font & color specified in #content */
}

ul.refs {
	list-style-type:none;
	padding-left: 10px;
}
li.refs {
	padding-bottom: 8px; /* top, right, bottom, left */
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
}

.center_list_top{			/* For titles of ul lists (used on lists for Resources pages) */
	text-align: center;
	font-size: 15px;
	font-style: italic;
	margin: 0px;
	padding: 0px 0px 5px 0px;/* top, right, bottom, left */
	
}
.center_list{			/* For titles of ul lists (used on lists for Resources pages) */
	text-align: center;
	font-size: 15px;
	margin: 0px;
	font-style: italic;
	padding: 10px 0px 5px 0px;/* top, right, bottom, left */
	
}

a:link, a:visited {
	color: #006666;	/* blue/green - used for links */
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	color: #cc5533;
	text-decoration: none;
}

.clear
{
clear:both;	/* puts image on next line without regard to float:right or float:left */
}

.floatright {
	float:right;
	margin:10px 10px 10px 10px;
}

.photo-floatleft {
	height: 100%;
	float: left;
	padding: 0px 15px 0px 0px; /* top, right, bottom, left */
	margin-bottom: 0px;
}

.photo-floatright {
	height: 100%;
	float: right;
	padding: 0px 0px 0px 10px; /* top, right, bottom, left */
	margin-top: 0px;
	margin-bottom: 0px;
}

.photo-floatleft-tightright {
	height: 100%;
	float: left;
	padding: 5px 5px 0px 0px; /* top, right, bottom, left */
	margin-bottom: 0px;
}

.center_photo{
	text-align: center;
	margin: 0px;
	padding: 10px;
}

/*************************************************************************************************/
/*  Definitions for special pages                                                                */
/*************************************************************************************************/

/* For quotes.html page */
.quote {
	padding-left: 10px;
	text-align: center;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 16px;
}

/* For testimonial pages */
.testimonial {
	padding-left: 8px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	font-style: italic;
	line-height: 18px;
}

.testimonial_signature {
	color: #cc5533;
	padding-left: 8px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	font-style: italic;
	line-height: 18px;
}

/* for FAQ.html page */
.FAQ-list {
	line-height: 24px;	/* This gives a space above anchor (this would be 22px normally) */
	font-size: 15px;
	font-style: italic;
}
.FAQ-list-title {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 33px;
	font-weight: bold;
	font-style: italic;
	color: #cc5533;
}
.FAQ-title {
	font-size: 18px;
	color: #cc5533;
    line-height: 18px; 
	font-style: italic;
	text-align: center;
}

ul.quote {
	list-style-type:none;
	padding-left: 10px;
}
li.quote {
	padding-bottom: 8px; /* top, right, bottom, left */
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 16px;
}

.skip_to_commentary {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 14px;
	padding: 10px 5px 10px 3px; /* top, right, bottom, left */
}

/*************************************************************************************************/
/*  Definitions for titles, different fonts                                                                   */
/*************************************************************************************************/

.pagetitle {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 18px;
	color: #000088;
    line-height: 26px; 
	text-align: center;
	margin-top: 10px;
}

.pagesubtitle {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 16px;
	font-style: italic;
	font-weight: bold;
	color: #000088;
    line-height: 20px; 
	text-align: center;
	margin-top: 10px;
}

.font_5pt {
	font-size: 5px;
    line-height: 5px; 
}

.graduate_date {
	font-size: 10px;
    line-height: 15px; 
	font-style: italic;
	text-align: center;
}

.graduate_videos {
	font-size: 12px;
    line-height: 16px; 
	font-style: italic;
	text-align: center;
	color: #000088;
}

.graduate_offering {
	font-size: 11px;
    line-height: 11px; 
	font-style: italic;
	color: #0000ff;
}

.fineprint-standalone {
	font-size: 9px;
    line-height: 9px; 
	color: #9ea7c4; /* So will show up on banner_topright for Stand-alone version */
}

.fineprint {
	font-size: 9px;
    line-height: 9px; 
	font-style: italic;
}
.fineprint10px {
	font-size: 10px;
    line-height: 10px; 
	font-style: italic;
}
.fineprint12px {
	font-size: 12px;
    line-height: 12px; 
	font-style: italic;
}
.fineprint_center {
	font-size: 8px;
    line-height: 8px; 
	font-style: italic;
	text-align: center;
}
.fineprint_right {
	font-size: 9px;
    line-height: 9px; 
	font-style: italic;
	text-align: right;
}

.italic_red {
	font-style: italic;
	color: #F00;
}

.color_amber {
	color: #cc5533;
}

/***********************************************************************************************************************************/
/*  To display email address as graphic so doesn't appear as text (and therefore searchable by spamm-bots.                         */
/*  RETIRED                      */
/***********************************************************************************************************************************/

/*
.emailaddr {
   display: block;
   width: 156px;
   height: 18px;
   background-image: url(art/PalouseMindfulness-email.jpg);
   border: none;
   text-decoration: none;
}
.emailaddr:hover {
   background-image: url(art/PalouseMindfulness-email-hover.jpg);
}
*/