* {  margin: 0; padding: 0; }
* html { height: 1%;} }
html, body { height: 100%; }
body { 	text-align: center;    margin: 0;  border: 0;  padding: 0;
  		background-color: #ffffff; font-family:  Arial, Verdana, Helvetica, sans-serif; 
  		font-size: 11px;color: #828282;   font-size: 11px;   line-height: 18px;   
  		text-decoration: none;  text-align: center;}

#container-page { margin: 0 auto; width: 950px; position: relative; min-height: 100%; height: auto !important; height: 100%; text-align: center;}

#container-page-bare { padding: 10px;}

#container-head { float: left; width: 950px; clear: both;}
/*#container-content {  padding: 0 0 20px 0; float: left; clear: both; z-index: 1;}*/
#container-content { padding: 0 0 5px 0; float: left; clear: both; z-index: 1; }

#content { width: 950px; position: relative; top: 0px; left: 0px; /* 25 */ clear: both; background-color: #ffffff; display: none;  /* gets faded in */}

#content_wide { width: 950px; position: relative; top: 0px; left: 0px; /*left: 25px */;background-color: #ffffff; }

#container-foot { width: 100%;height: 20px; float: left; clear: both; }

#footer  { background-color: #ffffff;  padding: 0; line-height: 18px;}

/* table, tr, td { font-size: 12px; text-align: left; margin-left: auto; margin-right: auto; } */
table, tr, td { font-size: 12px; margin-left: auto; margin-right: auto; text-align: left; }
/* td {  padding: 3px;  } */
a { color: #828282; text-decoration: none; outline: none;  }
a:hover { color: #474747; }

.menu_text, a.menu_text, table.menu_text, tr.menu_text, td.menu_text { font-size: 11px; }

INPUT
{ 
  font-family: Arial;  font-size: 11px;  font-weight: bold;
  border-color: #828282;  border-style: solid;  border-width: 1px;
  color: #828282; 
 }

 
#header      { position: relative; width: 950px; height: 90px; background-color: #ffffff;  } 

#header_menu { float: left; width: 950px;  }
/* #header_logo { position: absolute; top: 1px; left: 8px; width: 300px; height: 90px; }*/
#header_logo {  float: left; position: relative; width: 950px; height: 83px;} 
#header_logo img {  position: absolute; left: 35.5%; top: 0; width: 275px; border: 0px;} 


/* div that will hold the ul-li layout */
#navigation_module {float: left; width: 950px; position: relative; padding-top: 0px;}
/* remove the bullets and list types */
#navigation_module ul { padding: 0px; margin: 0px; list-style-type: none; }
/* making the sub levels be shown: 
hide the sub levels and give them an abolsute position, so they will show up on hover of the menu item, they will not take any room when not being shown */
/* HORIZONTAL MENU - top: to show below the parent item (vertical top 0px), left: 0px so it shows next to its parent (veritcal left : width of parent) */
#navigation_module ul ul { visibility: hidden; position: absolute; top: 35px; /* from this parent menu item */ 
left: 0px; /* from this parent item */ width: 95px; }
/* When hovering over the UL parent item, make the second UL level visible */
#navigation_module ul :hover ul { visibility: visible; }


/* in order to position the sub levels ABSOLUTE, the parent level must have RELATIVE position*/
/* HORIZONTAL MENU : FLOAT the LI so they line up , position relative to position sub level */
#navigation_module li { position: relative; float: left;}
/* style the HREF links */
#navigation_module a, #navigation_module a:visited { display: block; text-decoration: none; width: 95px;/* the width will make them look the same */
 text-align: center; font-weight: normal;  color: #474747;  line-height: 35px; font-size: 12px;  letter-spacing: normal; height: 20px;}
/* make the cursor a HAND so the user knows he can click there */
#navigation_module a:hover, #navigation_module li a:hover, #navigation_module li ul li a:hover { cursor: pointer; color:red;}

#navigation_module a.selected, #navigation_module a.selected:hover, #navigation_module li ul li a.selected , #navigation_module li ul li a.selected:hover{  color: #000; }

/* Style the PARENT LI*/
#navigation_module li { background-image: url(/static/images/menu_parent.png); width: 95px; height: 35px; }

#navigation_module li.first_menu_item { background-image: url(/static/images/menu_parent_first.png); width: 95px; height: 35px; }

/* Style the CHILD LI*/
#navigation_module li ul li { width: 95px; overflow: hidden; z-index: 99; /* sub menu backgd*/ background-image: url(/static/images/menu_child.png); height: 35px;}
/* style the CHILD A link*/
#navigation_module li ul li a { color: #474747;  }

/* PARENT level: add a background color on HOVER over the links, even though there's no child item*/
#navigation_module li:hover { /* first level link*/ /*background-image: url(test03.png);*/}
/* change the color of the LINK on HOVER */
#navigation_module li:hover a { color: #000;  }

/* Must repeat style so it doesn't cascade to the sub menu */
#navigation_module li:hover ul li { /* first level link */background-image: url(/static/images/menu_child.png); z-index: 99; }  
#navigation_module li:hover ul li a { color: #474747; text-align: center; }

/* ACTIVE Effects *****************/
/* First level*/
#navigation_module li a.active {  color: #000; }
/* first level ACTIVE, on HOVER on Sub menu*/
#navigation_module li ul li:hover { background-image: url(/static/images/menu_child_rollover.png); z-index: 99;  }
#navigation_module li:hover ul li:hover a{ color: #000; }
#navigation_module li ul li:hover a { color: #000; }

/* if there's NO Submenu links don't keep the top level style after being visited, so OVERRIDE inherited style again */
#navigation_module li.active a{ color: #000; /*background-image: url(side_menu_rollover.png);*/ }
#navigation_module li.active:hover {  /* nothing */ }

/* Ensure that sub menu links do NOT keep top level inherited style after being visited */
#navigation_module li ul li a:visited { color: #474747; }
/* unless they are selected ***********/
#navigation_module li ul li a.selected, #navigation_module li ul li a.selected:hover, #navigation_module li ul li a:hover { color: #000; }

/* When menu item is ACTIVE, define the styles for the sub menu 
Active item will  change color */
#navigation_module li.active a {  font-weight: normal; color: #000; } 
/* for ACTIVE parent , style child item changing color */
#navigation_module li.active a:hover {  color: #000; }
#navigation_module li.active ul li.active a {  color: #000; }

/* for ACTIVE parent, sub menu text is normal */
#navigation_module li.active ul li a { font-weight: normal; color: #474747; }

/* for ACTIVE parent sub menu items must have a HOVER effect for the text, not the backgd
Repeat style for the background so it doesn't get inherited and change on Hover or Selected */
#navigation_module li.active ul li:hover { background-image: url(/static/images/menu_child_rollover.png); z-index: 99; }
#navigation_module li.active ul li:hover a { color: #000; width: 95px; }
/*  when both parent and child are ACTIVE */
#navigation_module li.active ul li.active a { color: #474747; }


#front_page_image { float: left; clear: both; width: 950px; padding-bottom: 10px; }

/* Style for the new frontpage */

/* Main Containers */

.frontpage_main_container { width: 950px; position: relative; top: 0px; left: 0px; clear: both; background-color: #ffffff; z-index: 1; /* gets faded in */}


/* center column */
.artwork_container {float: left; width:950px ;height: 500px; clear: right;} /* in index4 main container */

.bottom_container {float: left; width:950px ; height: 132px; clear: right; padding-bottom: 10px; }

#event_artwork_container{position:relative; float: left; width:950px ;height: 500px; clear: right;} /* contains the div w/ artwork and navigation*/
.event_artwork_photo_container {float: left; width:950px; height: 500px; text-align: center;}/* just for the 2 artworks, in show_event_artwork`*/

#event_artwork_navigation{position: relative; top: 473px; float: right;}
#event_previous{ position: absolute; right: 30px;}
#event_next{ position: absolute; right: 10px;}

#share_button{position: absolute; bottom: 8px;  right: 63px;}
#mailing_list{ position: absolute; bottom: 10px; right: 170px;}
#rsvp_before11{ position: absolute; bottom: 10px; right: 410px;}
#survey{ position: absolute; bottom: 10px; right: 340px;}


#event_artwork_front {float: left; width: 475px; text-align: center;}
#event_artwork_back {float: left; width: 475px; text-align: center;}
#event_artwork_full_page {float: left; width: 950px; text-align: center;}

#prana_link_to_menu { float: left;clear: right;}
#prana_link_to_reservation { float: left;  clear: right;}

/* bottom section with the different images and links */
.frontpage_box { float: left; position: relative;  }
#album_cover { position: absolute; top: 5px; left: 40px; width: 90px; height: 90px; }


/* end of style of frontpage */    

#rsvp_container         { float: left; width: 300px; text-align: left; }
#response               { float: left; width: 350px; text-align: center; }
#mailing_list_container { float: left; width: 300px; text-align: right; }

.selected, .selected a, .selected a:hover { color: #000000; }
.error   { color: red;   }
.message { color: green; }

#generic_content {  position: relative; left: 200px; width: 550px; text-align: justify; padding: 10px; clear: right; }
#generic_content a:hover { color: #474747; }
#generic_content a { color: #828282; font-weight: bold; }

#cart {  position: relative; left: 75px; width: 800px; text-align: center; padding: 10px; clear: right; }
/*#mediaplayer {  position: relative; margin-left: auto; margin-right: auto; text-align: center; left: 0; }*/
#mediaplayer { width: 950px; float: left; clear: both; padding-bottom: 10px;}


.tooltip { 

 background-color:#fff; background:#fff; color:#828282; font-size:1.2em; border: 1px solid #474747; padding: 0;margin: 0;

 }
.tooltip_title { background: #fff; border-bottom: 1px solid #474747; margin: 3px;}
.tooltip_content { background: #fff; margin: 3px; text-align: left;}

#green_info {text-align: left; width: 950px;}
#green_info ul {list-style-type: disc; list-style-image: url("/static/images/bullet.gif");list-style-position: inside; padding-left: 30px;}
#green-info li { margin-left: 10px;}
#green_info h4 { text-align: left; color: green; padding: 3px}
#green_info a:hover { color: #000000; }
#green_info a { color: #474747; font-weight: bold; }
#green_info p ul li { text-align: justify; clear: right; color: #474747;padding: 3px; }

IMG { border: 0; }

INPUT.invalid
{ 
    background-color:   #FFE0E0;
    border-color:       red;
    border-style:       solid;
}


.popup_title { font-size: 1.4em; text-align: left; }
.popup_content { font-size: 1.1em; height: 300px; text-align: justify; overflow-y: scroll; width: 400px; padding: 2px; }
.popup_content_long { font-size: 1.1em; height: 348px; text-align: justify; width: 400px; padding: 2px; }
.popup_content td { font-size: 1.1em; padding: 4px; }
.popup_content_compact td { font-size: 1.1em; padding: 1px; text-align: justify; width: 400px; }

.popup_buttons { width: 400px; padding: 2px;}
.popup_buttons INPUT { font-size: 1.1em;}
.popup_photo { float: left; width: 250px; padding-right: 10px; }
.popup_info { float: left; width: 350px; }

.padded_table td { padding: 4px; font-size: 1.1em; }


#phone_number { font-size: 9px; letter-spacing: 0.3px;}