/*****************************************************************
 * LAYOUT: Christ Church of Zionsville                           *
 *         www.zionsvillelutheran.org                            *
 * AUTHOR: Matthew M. DeLoera                                    *
 * DATE:   August 23, 2008                                       *
 *****************************************************************/


/*****************************************************************
 * COLOR KEY:                                                    *
 *                                                               *
 * #FFFFFF - black                                               *
 * #000000 - white                                               *
 * #FFEFAB - light yellow (main text body)                       *
 * #282E8C - Maennerchor blue                                    *
 *****************************************************************/


/*****************************************************************
 *                     MAIN PAGE DIRECTIVES                      *
 *                                                               *
 * These cover the entire page and it's background, outside of   *
 * the specified layout.                                         *
 *****************************************************************/

html, body{
    height: 100%;
    background-color: #282E8C; }

body {
	margin: 0;
	padding: 0;
	color: #000000;
	font-size: .8em;
	font-family: Georgia, Times, serif;}


/*****************************************************************
 *                       TOP STRETCHY BAR                        *
 *                                                               *
 * These 2 divs work together to stretch the entire width of the *
 * browser for a fixed height, and then center the same-height   *
 * header graphic in the center. Note that the fixed height is   *
 * set on the container for immunity against any clears or       *
 * overflow rules that might be specified later on.              *
 *****************************************************************/

/* Due to rendering differences between Mozilla and IE, a variation of the      */
/* faux-column trick is used here. When it was initially just a blue bar,       */
/* everything worked in Mozilla but IE stretched the blue down to the bottom    */
/* of the whole layout. So the trick is to set it to the same color as the      */
/* desired page background, and run a background graphic repeating horizontally */
/* to get the desired bar color.                                                */
#topstretchybar {
	height:100px;
	background-color: #282E8C; }

/* The margin in this div seems to be required to keep the graphic centered. */
#topstretchybar-logo {
	width: 900px;
	height:136px;
	margin: 0 auto;
    background-image:url(images/header900.jpg);
    background-repeat:no-repeat;
	background-position: center center; }


/******************************************************************
 *                        MAIN PAGE BODY                          *
 *                                                                *
 * These divs implement a left sidebar, main body area, and right *
 * sidebar. The various widths are slightly tweaked so that       *
 * they all nestle together.                                      *
 *****************************************************************/

#mainbody {
	width: 900px;
    background-image:url(images/fauxcolumn.jpg);
	margin-left: auto;
	margin-right: auto;
	overflow:auto; }

#mainbodynorightsidebar {
	width: 900px;
    /* background-image:url(fauxcolumn.jpg); */
	margin-left: auto;
	margin-right: auto;
	overflow:auto; }

#sidebarleft {
	width: 150px;
	margin: 0 auto;
	padding: 0px;
	background-color: #282E8C;
    float: left; }

#sidebarright {
	width: 200px;
	margin: 0px 0px 0px 0px;
	border-left: 2px solid #000000;
	background-color: #FFEFAB;
    float: right; }

#content {
	width: 548px;
	margin: 0 auto;
	background-color: #FFEFAB;
    float: left; }

#contentnorightsidebar {
	width: 750px;
	margin: 0 auto;
	background-color: #FFEFAB;
    float: left; }

#upperright {
	width: 250px;
	margin: 10px 20px 0px 0px;
	background-color: #FFEFAB;
    float: right; }


/******************************************************************
 *                     SIDEBAR MENUS                              *
 *                                                                *
 * These rules apply to menus or lists in either of the sidebars. *
 *                                                                *
 *   - The class name must be specified with EACH element below   *
 *     (ul/li/a). Don't expect any inheritance                    *
 ******************************************************************/

ul.lefthandmenu {
	list-style: none;
	margin: 0px;
	padding: 4px;
	font-family: Georgia, Times, serif;
	font-weight: bold;
	font-size: 1.4em; }

li.lefthandmenu {
	margin: 0px;
	padding: 4px; }

a.lefthandmenuselected {
	color: #FFEFAB;
    border: 1px solid #FFEFAB;
    padding: 3px;
    text-decoration: none; }

a.lefthandmenu {
	color: #ccc;
	text-decoration: none; }

a:hover.lefthandmenu {
	background: #FFEFAB;
	text-decoration: underline;
	color: #000000; }

ul.righthandmenu {
	background: #FFEFAB;
	color: #000000; 
	list-style: none;
	margin: 0px 0px 0px 0px; }

li.righthandmenu {
	list-style: none;
	margin: 0px 0px 15px 0px; }

a.righthandmenu {
	text-decoration: none;
	font-weight:bold; }

a:hover.righthandmenu {
	text-decoration: underline; }


/*******************************************************************************************************
 *                                       CALENDAR POPUPS                                               *
 *                                                                                                     *
 * These rules implement small tool-tips for front page calendar items. Some notes along the way:      *
 *   - The font family seemed to require specifying in th/td. Specifying in parent table did not work. *
 *******************************************************************************************************/

#ToolTip {
	position: absolute;
	width: 200px;
	top: 0px;
	left: 0px;
	z-index: 4;
	visibility: hidden; }

table.tooltip {
	background-color: #ffffff;
	color: #000000;
	padding: 0px;
	margin: 0px; }

th.tooltip {
	text-align: center;
	text-decoration: none;
	font-family: Georgia, Times, serif;
	font-weight: bold;
	font-size: 18px;
	background-color: #000000;
	color: #ffffff;
	padding: 0px; }

td.tooltip {
	text-align: left;
	font-family: Georgia, Times, serif;
	font-weight: normal;
	font-size: 12px;
	padding: 0px; }


/*****************************************************************
 *                            FOOTER                             *
 *                                                               *
 * These 2 divs are similar to the top stretchy bar, but instead *
 * are set to the page's background color so as to not stretch   *
 * the entire browser width. The container's height is not set   *
 * here because it's at the bottom of the page and hence not     *
 * necessary. The height seems to be required here, also...      *
 * Also note that a top border can't be specified here due to    *
 * the various columns and their colors above (it would show up  *
 * over the blue in the left sidebar at the bottom).             *
 *****************************************************************/

#bottombar {
	background-color: #282E8C; }
	
#bottombar-logo {
	width: 900px;
	height: 60px;
	margin: 0 auto;
    padding-bottom: 5px;
    background-image:url(images/footer900.jpg);
    background-repeat:no-repeat;
	background-position: center center; }


/*****************************************************************
 *                         FORMATTING                            *
 *****************************************************************/

/***** Header defaults. *****/
h1, h2, h3, h4, h5, h6 {
	margin: 10px 0px 5px 10px;
	padding: 0;
	font-family: Georgia, Times, serif;
	font-weight: bold;
	color: #2B353F; }

/***** Tweaks to each level of header. *****/
h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; font-style: italic; }
h4 { font-size: 1.1em; font-style: italic; }

/***** Paragraph defaults. *****/
p {
	margin: 5px 10px 5px 10px;
	padding: 5px 0 5px 0;
	color: #222222;
	font-size: 1em;
	line-height: 150%; }

/***** Paragraph defaults. *****/
p.verse {
	margin-left: 70px;
	margin-right: 70px; }


/***** General tables. *****/
table.general {
	margin: 10px 20px 10px 20px;
	/* width: 700px; */
	text-align: center;
	color: #fff;
	background-color: #666;
	border: 0px;
	border-collapse: collapse;
	border-spacing: 0px;}

th.general {
	background-color: #666;
	color: #fff;
	padding: 4px;
	text-align: left;
	border-bottom: 2px #fff solid;
	font-family: Georgia, Times, serif;
	font-size: 12px;
	font-weight: bold;} 

td.general {
	background-color: #CCC;
	color: #000;
	padding: 4px;
	font-family: Georgia, Times, serif;
	text-align: left;
	border: 1px #fff solid;}


/***** Full Calendar Table *****/
table.calendar {
	margin: 10px 20px 10px 20px;
	width: 700px;
	text-align: center;
	color: #fff;
	background-color: #666;
	border: 0px;
	border-collapse: collapse;
	border-spacing: 0px;}

th.calendar {
	background-color: #666;
	color: #fff;
	padding: 4px;
	text-align: left;
	border-bottom: 2px #fff solid;
	font-family: Georgia, Times, serif;
	font-size: 12px;
	font-weight: bold;} 

td.calendar {
	background-color: #CCC;
	color: #000;
	padding: 4px;
	font-family: Georgia, Times, serif;
	text-align: left;
	border: 1px #fff solid;}


/***** Full Music Library Table *****/
#musiclibrary table {
	margin: 10px 20px 10px 20px;
	width: 500px;
	text-align: center;
	color: #fff;
	background-color: #666;
	border: 0px;
	border-collapse: collapse;
	border-spacing: 0px;}

#musiclibrary th {
	background-color: #666;
	color: #fff;
	padding: 4px;
	text-align: left;
	border-bottom: 2px #fff solid;
	font-family: Georgia, Times, serif;
	font-size: 12px;
	font-weight: bold;} 

#musiclibrary td {
	background-color: #CCC;
	color: #000;
	padding: 4px;
	font-family: Georgia, Times, serif;
	text-align: left;
	border: 1px #fff solid;}


/***** Upper right photo *****/
img.upperright {
	float: right;
	margin : 15px 15px 15px 15px;
	border: 1px solid #666;
	padding: 2px; }


/***** Upper right div *****/
div.upperright {
	float: right;
    width: 200px;
	margin : 15px 15px 15px 15px;
	border: 2px solid #666;
	padding: 2px; }


/***** Roster details. *****/
#memberdetails {
	float: right;
	margin : 15px 15px 15px 15px;
	border: 1px solid #666;
	padding: 2px; }


/***** Generic images. This assumes that the photo is in-line with a paragraph. *****/
img {
	padding: 0px 10px 0px 0px; }


/***** Left menu images. *****/
img.nopadding {
	padding: 0px 0px 0px 0px; }


/***** Centered photos. *****/
img.centered {
    padding: 2px;
    border: 1px solid black;
    display: block;
    margin-left: auto;
    margin-right: auto }
#centerphoto {
	float: left;
	width: 649px;
	margin: 10px 0px 10px 0px;
	/* border: 1px solid #666; */
	text-align: center; }