/*
    Document   : WLSstyles
    Created on : May 31, 2010, 7:12:34 PM
    Author     : steve
    Description:
        Main style sheet for WhiteLotusDharma.org

*/

/*
   TODO Someone with graphics arts skills please help!
        need eneral cleanup, a consistent theme (Dharma)
        background, other images
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

/* body
 * used by all pages
 * unless over-written
 * set site-wide fonts, background image and color here
*/
html {
    height: 100%;
}
body {
    font-size: 13px;
    color: #222;
    line-height: 16px;
    font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
    text-align: center;
    border-right: 0;
    margin: 0;
    padding: 0;    
    background-color: #a2ca7c; /* url(../images/png/bkgd_grad.png) repeat-x fixed;
    background-position: -130px 0px;*/
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: linear-gradient(bottom, #ffffff, #a2ca7c 31%);
    /* for IE 5.5 - 7 */
   /* filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#a2ca7c,endColorstr=#ffffff); */
    /* For Internet Explorer 8 */
/*    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#a2ca7c', EndColorStr='#ffffff')"; */
    background-image: -o-linear-gradient(bottom, #a2ca7c, #a2ca7c 31%);
    background-image: -moz-linear-gradient(bottom, #ffffff, #a2ca7c 31%);
    background-image: -webkit-linear-gradient(bottom, #ffffff, #a2ca7c 31%);
    background-image: -ms-linear-gradient(bottom, #ffffff, #a2ca7c 31%); 
    height: 100%;
    width: 100%;
}

h1{
    padding: 0;
    margin: 0;
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 8px;
    /*color: #4a4a4a;*/
    color: #669933;
    line-height: 1.3em;
    font-family: "Trebuchet MS", Arial, sans-serif;
    letter-spacing: 0.05em
}

h2{
    margin-top: 10px;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 8px;
    color: #4a4a4a;
    line-height: 16px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    letter-spacing: 0.05em
}

h3{
    margin-top: 10px;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
    color: #4a4a4a;
    line-height: 16px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    letter-spacing: 0.05em
}
h4{
    margin-top: 10px;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
    color: #4a4a4a;
    /*color: #000000;*/
    line-height: 16px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    letter-spacing: 0.05em
}
h5{
    margin-top: 10px;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 0px;
    /*color: #4a4a4a;*/
    color: #000000;
    line-height: 16px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    letter-spacing: 0.05em
}
.maintable {
    background-color: #ffffff
}
.logo {
    background-image: url(../images/logo5.jpg)
}

.menutext {
    font-size: 13px;
    margin-left: auto;
    color: #ebdca7;
    line-height: 16px;
    margin-right: auto;
    font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
    text-align: center;
}
.menutext A:link {
    color: #ffffff;
    text-decoration: none
}
.menutext A:visited {
    color: #ffffff;
    text-decoration: none
}
.menutext A:hover {
    color: #96bcf5;
    text-decoration: none
}
A:link {
    /*color: #06f;*/
    /*color: #bb2202; */
    /*color: #20099c;*/
    /*color: #0b014a;*/
    color: navy;
    text-decoration: none
}
A:visited {
    /*color: #26d;*/
    color: navy;
    text-decoration: none
}
A:hover {
    color: #df3801;
    text-decoration: none;
}
h1 .title {
    color: #003300;
}
.subhead {
    margin-top: 10px;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: -8px;
    /*color: #4a4a4a;*/
    color: black;
    background-color: #ffffff;
    line-height: 16px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    letter-spacing: 0.05em
}
.list1 {
    font-weight: bold;
    font-size: 13px;
    font-family: Tahoma, Arial, sans-serif
}
.list2 {
    font-weight: bold;
    font-size: 12px;
    font-family: Tahoma, Arial, sans-serif
}
.photocredit {
    font-size: 10px;
    color: #666;
    line-height: 11px
}
.quote {
    font-size: 13px;
    margin-bottom: 2px;
    margin-left: 20px;
    color: #4a4a4a;
    line-height: 18px;
    margin-right: 20px;
    font-style: italic;
    font-family: Georgia, serif;
}
.quoteauthor {
    margin-top: -2px;
    font-size: 12px;
    color: #4a4a4a;
    line-height: 18px;
    margin-right: 40px;
    font-family: Georgia, serif;
    text-align: right
}

.pullquote {
    font-size: 13px;
    margin-bottom: 2px;
    margin-left: 20px;
    color: #765;
    line-height: 18px;
    margin-right: 20px;
    font-style: italic;
    font-family: Georgia, serif;
}
.pullquoteauthor {
    margin-top: -2px;
    font-size: 12px;
    color: #765;
    line-height: 18px;
    margin-right: 40px;
    font-family: Georgia, serif;
    text-align: right
}
.subnav {
    font-size: 13px;
    margin-bottom: -2px;
    line-height: 13px;
    font-family: Verdana, sans-serif
}
.copyright {
    font-size: 11px;
    color: #888;
    line-height: 9px
}
.small {
    font-size: 10px;
    line-height: 13px
}
.indent {
    PADDING-right: 10px;
    margin-left: 10px
}
.dots {
    background-IMAGE: url(../images/vertline_orange.gif)
}
.seo {
    font-size: 11px;
    margin-left: 30px;
    color: #888;
    line-height: 9px;
    margin-right: 10px
}
.centeralign {
    text-align:center
}
.rightalign {
    text-align:right
}
/* one way is to size banner div absolutely to 830 and
   let img and menu fill it
   other way is to let banner fill container
   and absolutely size img and menu
*/
#banner {
    text-align: center;
    /*background-color: #669933;*/
    /* background-color: #a2ca7c; good background color, but lighter than the banner pic*/
    background-color: #013300;
    /* width: 830px */
    width: 100%;
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    height: 140px;
    margin: auto;
    margin-bottom: 15px;
    margin-top: 10px;
    padding: 0px;
    padding-top: 10px;
    /* padding-bottom: 20px; */
    /*   margin-bottom: 0; */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 3px 3px 5px #888;
    -webkit-box-shadow: 3px 3px 5px #888;
    /* For IE 5.5 - 7 */
    /* filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#888'); */
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#888')";    
    box-shadow: 3px 3px 5px #888;
}
#bannerText {
    height: 118px;
    width: 830px;
    padding-top: 0.8em;
    font-family: "Times New Roman", serif;
    color: white;
    font-size:14px;
    background-image: url(../images/wlotus_banner2.jpg);
    background-repeat: no-repeat;
    margin: 0
}

#bannerText h1 {
    color: white;
    font-size: 34px;
    line-height: 0.9em;
    font-family: inherit;
    margin: 0
}
#bannerText h2 {
    color: white;
    font-size: 24px;
    font-style: italic;
    line-height: 1.0em;
    font-family: inherit
}

#bannerText a {
    text-decoration: none;
    color:white
}

/*
#banner img {
    width: 830px;
    height: 118px;
    padding: 0;
    margin: 0;
    border: none;
}
*/
#banner a {
    padding: 0;
    margin: 0;
}
#bannerMenu {
    margin: 0;
    background-color: #669933;
    height:22px;
    width:830px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    text-align: center;
    -moz-border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    -khtml-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}
#bannerMenu a {
    padding: 1.5em; /* to space the links horizontally */
}

.menu  {
    vertical-align: top;
    left:0;
    right:0;
    margin: auto;
    list-style-type:none;
    white-space:nowrap;
}
.excerpt {
    padding-bottom: 10px;
    padding-top: 10px;
    /*text-justify: newspaper;*/
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px solid #000;
}
.excerpt p {
    text-align: justify;
    /*font-style: italic;*/
}
.menu li {
    display:table-cell;      /* ignored by IE */
    float: left
}
* html .menu ul {
    display:inline-block;    /* for IE only */
    width:1px;               /* IE will expand 1px width to fit menu width */
    padding:0 2px;           /* fix bug in IE to get border spacing correct */
}
* html .menu li {
    display:inline;          /* for IE only */
}
#headlineLinks {
    text-align: center;
    margin: 0px auto;
    padding: .5em 0em .5em 0em;
    background-color: #ffffff;
    width: 100%;
    line-height: 1.2em;
    font-style: italic;
    float: left;
    clear:right
}
#headlineLinks div {
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -khtml-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}
#headlineLinks a {
    color: white;
    text-decoration: none
}
#pageHeader {
    margin-top: .5em;
    border-bottom: 3px solid  #eee; /* #96bcf5; #669933;   #7f6bb0; #8b6bd0; #ba84d0; #fffc79; */
    text-align: center;
}

.Header a {
    font-style: italic;
    font-weight: bold;
}
#wrapper {
    text-align: left;
    /*width:80%;*/
    width: 830px;
    position: relative;
    right: 0;
    left: 0;
    margin: auto;
    padding: 0;
    padding-bottom: 20px;
}
#container_wrap {
    /*width:80%;*/
    width: 840px;
    position: relative;
    right: 0;
    left: 0;
    margin: auto;
    overflow: hidden;
    background: #fff  url(../images/png/drop_shadow.png) repeat-y;
    background-position: 0px 0px;
}
/* container
 * wrapper for left, right, center
 * and other boxes
*/
#container {
    text-align: left;
    /*width:80%;*/
    width: 830px;
    position: relative;
    right: 0;
    left: 0;
    margin: 0px auto;
    background-color: #FFFFFF;
    overflow: hidden;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -khtml-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    padding: o;
    padding-top: 10px;
    margin-bottom: 30px;
    -moz-box-shadow: 5px 2px 5px #888;
    -webkit-box-shadow: 5px 2px 5px #888;
    /* For IE 5.5 - 7 */
    /* filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#888'); */
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#888')";   
    box-shadow: 5px 2px 5px #888;

}
/* main content area
 * used by all pages
*/
#centerBox {
    display: table-cell;
    text-align: left;
    margin: auto;
    min-height: 350px;
    height: auto !important;
    height: 350px;
    /* border: 3px solid yellow; */

}
/* left box
 * currently used for news on main page
 * exists (but hidden) on most pages
 * also used to center middle box
*/
#leftBox {
    float: left;
    width: 150px;
    text-align: left;
    margin-left: 0;
    padding-top: 3em; /* for alignment with top of main text section */
    clear: none;
    /*  border: 3px solid yellow;*/
}
#leftBox ul, leftBox li {
    list-style: none;
    padding-top: .3em;
    padding-bottom: .3em;
    margin-left: 0;
    padding-left: 0;
}

/* links for left news box */
#leftBox a {
    /* font-weight: bold;*/

}
#leftBox a i {
    font-weight: normal;
    font-size: smaller;
    color: #4a4a4a;
}
#leftBox a:link {
    /*  color:#669933; */

}
/* right box
 * currently used for upcoming events on main page
 * exists (but hidden) on most pages
 * but can be shown/hidden by changing visibility attribute
 * in supplimentary css files used by those pages
 * like WLSwide.css
*/
#rightBox {
    float:right;
    width:180px;
    /*margin: 0px; */
    text-align: left;
    padding-top:3em; /* for alignment with top of main text section */

}
#leftBox,
#rightBox,
#centerBox {
    padding-left: 1em;
    padding-right: 1em;
    margin: 0 auto
}
/* for first text block
 * on page
 * you can define fancy font
 * or formatting here
*/
#intro {
    margin-top: 2em;
    margin-bottom: 2em;
    line-height: 140%;
    font-size: 105%;
    text-align: center;
    /*text-justify: newspaper;*/
    /* margin-left: 10%;
    margin-right: 10%; */
}
/* footer: defines fonts, position of box
 * at bottom of all pages
*/
#footer {
    text-align: left;
    width:96%;
    position: relative;
    margin: auto;
    padding:2%;
    font-size: 10px;
    line-height: 13px;
    float: left;
    clear: right;
}
#footer .menu {
    text-align: left;
}
#footer ul {
    left: 0;
    text-align: left;
    /*margin-left: -3em;*/
    margin: 0 3px;
    padding: 0;

}
/* div for footer
 * provides border line after page content
*/
#footerMenu {
    left:0;
    margin-top: 2px;
    margin-left: 0;
    padding: 0;
    padding-top:2px;
    /*background-color: #fffdba;*/
    border-top: 1px solid black;
}
#footer li {
    font-size: 10px;
    line-height: 13px;
    padding-left:0px;
    padding-right: 10px;
    margin-left: 0px;
}
/* for right box
 * on main page, elsewhere
*/
.eventBox {
    border: 2px solid #efecc2;
    height: 95px;
    overflow: hidden;
   /* border: 2px solid #fffdba; */
    margin: 8px 0 8px 0;
    padding: 5px;
    /*margin-left: 0px;*/
    -moz-border-radius: 10px 0px 10px 0px;
    -webkit-border-radius: 10px 0px 10px 0px;
    -khtml-border-radius: 10px 0px 10px 0px;
    border-radius: 10px 0px 10px 0px;
}
/* inner content of small event box. cuts off text overflow */
.event {
    min-height:40px;
    max-height:80px;
    margin: 0;
    overflow: hidden
}

.event p {
    padding:0;
    margin:0
}

/* for events page
 * dark outline
*/
.eventBoxBig {
    border: 2px solid #efecc2;
    /*border: 2px solid #fffdba;*/
    margin: 8px 0 8px 0;
    /*text-align: justify;*/
    padding: .5em;
    padding-bottom: .8em;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -khtml-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
}
/* for blockquotes, etc */
.insert {
    /*  background-color: #fffdba;*/
    border: 2px solid #fffdba;
    margin: 0 auto;
    margin-top: .5em;
    margin-bottom: 1em;
    /* width:60%; */
    margin-left: 15%;
    margin-right: 15%;
    padding: .5em;
    padding-bottom: .8em;
    /* background: #ffffff url(../images/paper.gif); */
    background-position: bottom;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -khtml-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;

}
/* used by dynamic
 * calendar pages
 * to format text from PHP methods
*/
#calendarInclude {
    background-color: #fffdba;
    border: 2px solid #fffdba;
    text-align:justify;
    padding-left: 20px;
    padding-right: 20px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
.calendarInclude {
    background-color: #fffdba;
    border: 2px solid #fffdba;
    text-align:justify;
    padding-left: 20px;
    padding-right: 20px;
}
/* used by dynamic calendar pages
 * to format text from PHP methods
*/
#calendarInclude .dd {
    margin-top: 10px;
    font-weight: bold;
    font-size: 14px;
    /*margin-bottom: 8px;*/
    color: #4a4a4a;
    line-height: 16px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    letter-spacing: 0.05em;
    padding-top: 10px;
}

.imageInsertLeft {
    width:200px;
    /*height:188px; */
    float:left;
    clear:right;
    padding: 6px 10px 6px 0px; /* top right bottom left */
}

.imageInsertRight {
    width:200px;
    /*height:188px;*/
    float:right;
    padding: 6px 0px 6px 10px; /* top right bottom left */
}
.imageInsertLeft img,
.imageInsertRight img {
    width:200px;
    border: 1px groove #fffc79;

}
.imageInsertLeft300 {
    width:300px;
    /*height:188px; */
    float:left;
    clear:right;
    padding: 6px 10px 6px 0px; /* top right bottom left */
}
.imageInsertLeft300 img,
.imageInsertRight300 img {
    width:300px;
    border: 1px groove #fffc79;

}
.imageCenter {
    width:200px;
    /*height:188px; */
    margin-left:auto;
    margin-right:auto;
    padding: 6px 10px 6px 0px; /* top right bottom left */
}
.imageCenter img {
    width:200px;
    border: 1px groove #fffc79;
}
.singleCol #centerBox {
    padding-left: 5%;
    padding-right: 5%;
}
.singleCol #leftBox,
.singleCol #rightBox{
    visibility: hidden;
    display: none;

}

.twoCol #centerBox {
    padding-left: 5%;
    padding-right: 5%;
}
.twoCol #rightBox{
    visibility: hidden;
    display: none;

}

.linkList {
    list-style: none;
    padding-top: .5em;
    padding-bottom: .5em;
}

.newsItem {
    margin:0;
    margin-top: 1.5em;
    padding-bottom: 1.5em;
    border-bottom: 2px solid #eee;
}
/* for calendar upcoming events popups */
dt {
    font-family: "Trebuchet MS", Arial, sans-serif;
    /*  font-weight: bold;*/
    font-size: 14px;
    color: #000000;
}
dd {
    font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
    color: #3030a0;
    font-size: 13px;
}
/*
.popup {
  color: #ffffff;
  background-color: #d4e4ff;/*#3030a0; *//* #bb2202;*/ /* #ffffb0;*/
/* text-decoration: none;
 position: absolute;
 z-index: 20;
 visibility: hidden;
 top: 0px;
 left: 0px;
 border: 1px solid #bb2202; /*#000000;*/
/* padding: 3px;
}
.popup dl {
 margin: 0px;
 padding: 0px;
}
.popup dt {
 font-size: 10px;
 font-weight: bold;
 margin: 0px;
 padding: 0px;
 color: #4a4a4a;
}
.popup dd {
 font-size: 10px;
 margin-left: 20px;
 color:  #3030a0;;
} */

.dtstart,
.dtend,
.description,
.location,
.categories,
.url,
.rrule {
    visibility:hidden;
}

.popup {
    position:absolute;
    top:0;
    left:0;
    border:1px solid #000000;
    padding:3px;
    background-color: #FFFFFF;
    color:#000000;
    font-size:12px;
    text-decoration:none;
    visibility:hidden;
    z-index:20;
    -moz-border-radius:6px 6px 6px 6px;
    border-radius:6px 6px 6px 6px;
}
.tooltip {
    visibility: hidden;
}

.popup dl,
.popup dt {
    margin:0;
    padding:0;
}
.popup dt {
    font-weight:bold;
}
.popup dd {
    margin-left:20px;
}

/* for headline */
div.hllong, div.hlmed, div.hlshort {
    border: 2px double #fffc79;
    margin: 0px auto;
    height: 80px;
    padding: .2px;
}
div.hlmed, div.hlshort {
    float: left;
    margin-left: .5em;
    clear: none
}
div.hllong {
    width: 468px;
}
div.hlmed {
    width: 360px;
}
div.hlshort {
    width: 280px;
}
/* headline image */
.hllong img, .hlmed img, .hlshort img {
    /*border: 0px; */
    width: 79px;
    height: 79px;
    float: left;
    clear: right;
    border: .5px solid #efecc2
}
/* for headline text */
.hllong div, .hlmed div, .hlshort div {
    font-family: sans-serif;
    color: #fff;
    text-align: center;
    white-space: normal;
    overflow: hidden;
}
.hllong div {
    height: 98%;
    padding-top: 3%;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.hlmed div {
    height: 97%;
    padding-top: 4%;
    line-height: 1.1em;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.05em;
}
.hlshort div {
    height: 97%;
    padding-top: 4%;
    line-height: 1.1em;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.03em;
}
/* 1st headline */
#hl1 {
    background: #e12852; /* maroon */
}
/* 2nd headline */
#hl2 {
    background: #6f2898; /* purple*/
}
/* 3rd headline */
#hl3 {
    background: #008b00; /* green */
}

#layer1 {
    position: absolute;
    visibility: hidden;
    /*width: 400px;
    height: 300px;*/
    left: 20px;
    top: 300px;
    background-color: #ccc;
    border: 1px solid #000;
    padding: 10px;
}

#close {
    float: right;
}
#footerAddress {
    float: left;
    clear: both;
    height: 100%;
}
#footerAddress h5 {    
    text-align: left;
    font-family: inherit;
    font-weight: normal;
    padding-top:.1em;
    font-size:100%
}

.eventBox h5 {
    padding:0;
    margin:0
}

div.morediv {
  /*  position:relative;
    bottom: 0;*/
    float: left;
    width: 80px;
    height: 15px;
    margin:0;
    padding: 0;
    float:right;
    clear:none;
    text-align:right;
    background-color:#ffffff;
   /* opacity:0.7;
    filter:alpha(opacity=70);  For IE8 and earlier */
}
div.morediv p {
    height: inherit;
    margin: 0;
    padding: 0;
    font-weight:bold;
    font-style: italic;
    font-size: smaller;
    color:#000000;
    width:80px;
    float: right
}
.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(255, 255, 255) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(255, 255, 255);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}