body
{
    height: 100%;
    overflow: auto;
    margin:0px 0px;
    font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
    font-size:small;
    color: #4D4D4D;
    background-color: #FFFFFF;
	width: 1001px;
	height:100%;
    text-align:center;
    margin-right:auto;
    margin-left:auto;
    background:#F7F3EB url("Images/body_background.png") repeat-y center;
}

body.firstPage
{
    height: 100%;
    overflow: auto;
    margin:0px 0px;
    font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
    font-size:medium;
    background-color: #000000;
	width: 1001px;
	height:100%;
    text-align:center;
    margin-right:auto;
    margin-left:auto;
}

#map_canvas
{
    z-index:0;
}

#wrapper
{
    background-color: #FFFFFF;
    border: 0px solid #aaa;
    text-align:center;
    width:998px;
    position:relative;
}

#header
{
    padding: 0px 0px 0px 0px;
    margin: 0px;
}

#footer
{
    left:0;
    margin-bottom:-2px;
    bottom:0;
    width:100%;
	font-size: 0.8em;
	text-align:center;
	padding: 0px 0px 0px 0px;
	height:26px;
	color:White;
	position:absolute;
	position:fixed;
	background: url("Images/menuitem.jpg") repeat-x left top;
	z-index:1999;
}

#content
{
    width: 998px; 
	margin:0px; /* Right and left margin widths set to "auto" */
	text-align:left; /* Counteract to IE5/Win Hack */
	background-color: #FFFFFF; /* white background within content box */
	margin-top: 0px;
	padding-top: 5px;
	border: 0px solid #aaa;
}

#dualpane_leftpane
{
    border: 1px solid red;
    float:left; 
    width:300px; 
    text-align:left;
    border: 0px;
    border-right-style:dotted;
    border-right-color:#629632;
    border-right-width: 1px;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding: 5px 0px 0px 10px;
}

#dualpane_rightpane
{
    float:right; 
    width:670px; 
    text-align:left;
    margin:5pt 0pt 0pt 0pt;

    border: 0px;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding: 5px 0px 0px 10px;
    z-index:-1;
}

#siteMap
{
    font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 13px;
	margin-right: 20px;
	margin-top: 0px;
}

.siteMap a
{
    border-width: 1px;
    border-style: none none dotted none;
    color: #629632;
    text-decoration: none;
    font-size: small;
    border-bottom-color: #629632;
}

hr
{
    text-align:left;
    border: 1px dotted #629632;
    width: 650px;
    height: 0px;
}

::-moz-selection{
	background:#629632;
	color:#fff;
}

::selection {
	background:#629632;
	color:#fff;
}

.coloredBackground
{
    background:#AFCA95;
}

p {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 13px;
	margin-left: 20px;
	margin-right: 20px;
}

table.simpleTable
{
    border: 1px solid #629632;
    width:90%;
}

tr.simpleTD td 
{
    border: 1px dotted #629632;
	background-color: #FFFFFF; 
	color: black;
}

tr a 
{
    border-width: 1px;
    border-style: none none dotted none;
    color: #629632;
    text-decoration: none;
    font-size: small;
    border-bottom-color: #629632;
}

.themedText
{
    font-family: Verdana, Arial, Times New Roman;
    color:#629632;
}

.themedBoldText
{
    font-family: Verdana, Arial, Times New Roman;
    font-weight:bold;
    color:#629632;
}

.textStyle
{
    font-family: Verdana, Arial, Times New Roman;
    font-weight:lighter;
    color:Gray;
    border:dotted 1px ff9933;
}

#fixedtipdiv{
    position:absolute;
    padding: 2px;
    border:1px solid black;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    background-color:#629632;
}

p {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 13px;
	margin-left: 20px;
	margin-right: 20px;
}

p.coloredText
{
    color:#629632;
}

a.footer
{
    color:White;
}

a.justurls
{
    border-width: 1px;
    border-style: none none dotted none;
    color: #629632;
    text-decoration: none;
    font-size: small;
    border-bottom-color: #629632;

}

h1 {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 22px;
	margin-left: 0px;
}

h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	margin-left: 0px;
}

h3
{
    font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 16px;
	margin-left: 0px;
	margin-top: 10px;	
	margin-bottom: 0px;
}

h4 
{
    font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}

h1.keys {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 9px;
	line-height: 9px;
	color: #dde;
	padding: 0; border: 0;
	margin: 10px auto;
	text-align: center;
	width: 610px;
}

.grayHeader
{
    font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 16px;
	margin-left: 0px; 
	color:Gray;
	font-weight:bold;
	font-size:small;
}

/* Calendar Grid */
.grid
{
    border: solid 1px #629632;
    font-family: Tahoma;
    font-size: 12px;
    width: 600px;
    height: 450px;
    overflow: scroll;
}
.grid H2
{
    background: #FFFFFF url(Images/menuitem.jpg);
    border-bottom: solid 1px #629632;
    height: 28px;
    line-height: 28px;
    margin: 0px;
    padding: 0px 0px 0px 5px;
    color: #000000;
    font-size: 15px;
}
.grid TABLE
{
    width: 96%;
}
.grid TH
{
    background: #FFFFFF url(Images/Menuitem.jpg) repeat;
    height: 20px;
    color: #FFFFFF;
}

.innerGrid
{
    border:solid 1px #629632;
    color: #000000;
}

.innerGrid TABLE
{
    border:dotted 1px #629632;
    color: #000000;
    font-weight:bold;
}

.innerGrid TH
{
    text-align:left;
    padding-left: 10px;
    background: #AFCA95 url(Images/Menuitem.jpg) repeat-x;
    color: #FFFFFF;
    font-weight:bold;
}

.innerGrid TD
{
    padding-left: 10px;
    border:dotted 1px #629632;
    color: #000000;
    font-weight:lighter;
}

/* grid headers */.grid #events .head TH
{
    background: #e9e9eb;
    height: 24px;
    line-height: 24px;
    padding-left: 6px;
    color: #629632;
    text-align: left;
}
.grid #events .head TH.first
{
    /* get rid of the first slash */
    background: #e9e9eb -3px;
    width: 20px;
}
/* group header */.grid #events .group TH
{
    padding: 10px 0px 2px 0px;
    color: #629632;
    text-align: left;
    border-bottom: solid 2px #a5a4bd;
}
.grid #events .group TH.first
{
    text-align: center;
    border-bottom: none;
}
/* data items */.grid #events .item TD
{
    padding: 3px 0px 3px 6px;
    border-bottom: solid 1px #eae9e1;
    color: #222222;
}
/* pager */.grid #pager .pager TD
{
    height: 40px;
}
.grid #pager .pager .commands
{
    height: 40px;
    padding: 4px 0px 0px 25px;
}
.grid #pager .pager .info
{
    padding: 4px 25px 0px 0px;
    text-align: right;
}
.hidden
{
    display: none;
    visibility: hidden;
}
/* End of Calendar Grid*/   

/* ####################   Navigation bar CSS styling   ################## */ 

.mynavbar 
{
  position: relative;
  width: 100%;
  height: 23px;
  padding: 0px 0px 0px 2px;
  margin: 0px 0px 0px 0px;
  text-align:left;
  background: url("Images/menuitem.jpg") repeat-x left top;
  z-index:1997;
}

a.navbartitle {
  display: block; 
  float: left;
  color: white;
  font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 500;
  margin: 0; border: 0; padding: 0;
  line-height: 23px; /* corresponds to 'top' value of .submenu below */
  text-align: center;
  text-decoration:none;
  background: url("Images/menuitem.jpg") repeat left top;
}

a.navbartitle:hover {
  background-color: Black;
}
/* menu title widths */
#t1 { width: 70px; }    /* Home */
#t2 { width: 100px; }    /* Events */
#t9 { width: 180px; }   /* Nityanandam Foundation*/
#t3 { width: 100px; }   /* Vedic Temples*/
#t4 { width: 90px; }    /* Worship Services*/
#t5 { width: 130px; }   /* Photos & Videos */
#t6 { width: 150px; }    /* Get Involved*/
#t7 { width: 80px; }    /* Temple */
#t8 { width: 90px; }    /* Contact Us */

/* We just specify a fixed width for each menu title. Then, down below we specify
    a fixed left position for the corresponding submenus (e.g. #products_submenu, etc.)
    Using these fixed values isn't as elegant as just letting the text of each 
    menu title determine the width of the menu titles and position of the submenus,
    but we found this hardwired approach resulted in fewer cross-browser/cross-OS 
    formatting glitches -- and it's pretty easy to adjust these title widths and the
    corresponding submenu 'left' positions below, just by eyeballing them whenever
    we need to change the navbar menu titles (which isn't often). */

.submenu {
  position:absolute;
  z-index: 1950;
  top: 23px; /* corresponds to line-height of a.navbartitle above */
  padding: 0;
  margin: 0; 
  color:white;
  border : 1px solid Black; /* box around entire sub-menu */
  font-family: Verdana, Arial, Geneva,  Helvetica, sans-serif;
  font-size: 11px;
  background: url("Images/menuitem.jpg") repeat-x left top;
}
/* Fix IE formatting quirks. */
* html .submenu { width: 148px; } /* IE needs narrower than width of .submenu above */
/* End */

/* position of each sub menu */
/* We just eyeball the position of each submenu here -- can move left or right as needed. 
   If you adjust menu title text, you might want to adjust these too. */
#home_submenu {  left: 0px; visibility: hidden;  }
#events_submenu {  left: 60px; visibility: hidden;  }
#nithyananda_submenu { left: 160px; visibility: hidden; }
#vedictemples_submenu {  left: 335px; visibility: hidden; }
#worshipsvcs_submenu { left: 440px; visibility: hidden; }
#photoalbum_submenu { left: 580px; visibility: hidden; }
#getinvolved_submenu { left: 710px; visibility: hidden; }
#temple_submenu { left: 810px; visibility: hidden; }
#contactus_submenu {  left: 830px; visibility: hidden; }

/* Note, each submenu is hidden when the page loads - then made visible when
    the mouse goes over the menu title. Using the 'visibility' property instead
    of using the 'display' property avoided a bug in some versions of Safari. 
    (The bug is pretty where esoteric: The browser ignored the 'hover' property 
    on 'li' objects inside an object whose display property was set to 'none' 
    when the page loaded...) Using the 'visibility' property instead of 'display'
    would normaly take up extra room on the page, but that's avoided here by putting
    the submenu on a second layer: see 'position: absolute' and 'z-index: 2'
    in .submenu definition, higher up this page. */

.submenu a
{
  display: block;
  color: White; 
  padding: 5px 20px 4px 10px;
  text-decoration: none;
  font-weight:300;
  border-bottom: Black solid 1px; 
  border-top: 0; border-left: 0; border-right: 0;
  background: #AFCA95 url("Images/menuitem.jpg") repeat-x left top;
  z-index:1951;
}

.submenubox { 
  margin: 0; padding: 0; border: 0;
}
.submenubox tr
{
  margin: 0; padding: 0; border: 0;
  list-style-type: none;
}

.submenubox tr td { 
  margin: 0; padding: 0; border: 0;
}

.submenubox tr td a:link { }
.submenubox tr td a:visited { }
.submenubox tr td a:hover
{
  color: Black; /* text color for submenu items */
  font-weight:bold;
  border-bottom: #447755 solid 1px; 
}