body {
	color: #000000;
  	background-color: #121b44;
  	margin:0;
    padding:0;
    border:0;}				/* This removes the border around the viewport in old versions of IE */
	
.holder {
	margin:auto;		/* centers the content in the middle of the page */
	padding: 0px;
	width: 960px;}		/* This sets the over all width of the content */


							/* ******************************************** */
										/* Layout by div rows (7) */		
							/* ******************************************** */		
							
/* *********************** */							
/* 1st Row - Header / Logo */
/* *********************** */	
.header { 
	margin: 0px;
	padding: 0px;
	position:relative;
	width: 100%;
	height:110px;
	background-image:url('/images/macalesterheader.jpg');
	background-repeat:no-repeat;}
.header a{
	position: absolute;
	display:block;
	height: 75px;
	width: 600px;
	background-color: #CC6666;
	margin-left: 100px;}
.header link {
	}
	
/* ***************************************** */	
/* 2nd Row - Menu and Boaz & Jachin Capitals */
/* ***************************************** */	
.menurow {
	margin:0px;
	padding:0px;
	position:relative;
	width: 100%;
	height: 215px;
	z-index:7000; /* bug fix for IE < 8 */}
.menurow .left {
	background-image: url('/images/columns.jpg');
	background-repeat:no-repeat;
	background-position: top left;}
.menurow .right {
	background-image: url('/images/columns.jpg');
	background-repeat:no-repeat;
	background-position: top right;}
.menurow .center {
	background-image:url('/images/sandstone.jpg');
	background-repeat:no-repeat;
	background-position:15px -3px;
	z-index:6000; /* bug fix for IE < 8 */}
.menurow .ls {
	background-image:url('/images/leftshadow.png');
	background-repeat:no-repeat;
	width: 15px;
	height:inherit;
	position:absolute;
	left:100px;
	height: 215px;}
.menurow .rs {
	background-image:url('/images/rightshadow.png');
	background-repeat:no-repeat;
	background-position:right;
	width:15px;
	height: 215px;
	position:absolute;
	right:100px;}			

		/* ************************************** */	
		/* Menu: Configuration, Layout, & Elements */
		/* ************************************** */	
		
		.upper {
			height: 40px;				/* ***** the upper (3 tenants) menu ***** */
			margin-top: 28px;}	
		
		.upper a{
			display:block;
			float:left;
			height:40px;
			width: 105px;}
		#fellowship a {
			margin-left:104px;
			background:url('/images/threetenets.png') no-repeat left top;}
		#fellowship a:hover {
			background: url('/images/threetenets.png') no-repeat left bottom;}
		#ritual a{
			margin-left:118px;
			background:url('/images/threetenets.png') no-repeat -106px top;}
		#ritual a:hover {
			background: url('/images/threetenets.png') no-repeat -106px bottom;}
		#education a{
			margin-left:108px;
			background:url('/images/threetenets.png') no-repeat right top;}
		#education a:hover {
			background: url('/images/threetenets.png') no-repeat right bottom;}
				
									/*  ****** Lower (Main) menu ****** */
		#lower {
		   clear:both;
		   float:left;
		   margin:7px 0 0;
		   padding:0;
		   width:100%;
		   font-family: Georgia, "Times New Roman", Times, serif; /* Menu font */
		   font-size:90%; /* Menu text size */
		   z-index:5000; /* This makes the dropdown menus appear above the page content below */
		   position:relative;

		}
		
		#lower ul {
		   margin:0;
		   padding:0;
		   list-style:none;
		   float:right;
		   position:relative;
		   right:50%;
		}
		#lower ul li {
		   margin:0 0 0 1px;
		   padding:0;
		   float:left;
		   position:relative;
		   left:50%;
		   top:1px;
		}
		#lower ul li a {
		   display:block;
		   margin:0;
		   padding:.6em .5em .4em;
		   font-size:15px;
		   line-height:15px;
		   text-decoration:none;
		   color:#7b684b;
		   font-weight:bold;
		   text-transform:uppercase;
		}
		#lower ul li.submenu a {
		   color:#7b684b;}
		#lower ul li.submenu a:hover {
		   color:#660000;
		   background-color:#c6b695;}
		#lower  ul li.submenu:hover ,
		#lower  ul li.submenu.hover { /* This line is required for IE 6 and below */
			background:#c6b695; /* Top menu items background colour */
			color:#660000;}		
		#lower ul li a:hover {
		   /* background:#36f;  Top menu items background colour */
		   color:#660000;}
		#lower ul li:hover a,
		#lower ul li.hover a { /* This line is required for IE 6 and below */
		   /* background:#36f;  Top menu items background colour */
		   color:#660000;}
		
		/* Submenu items */
		#lower ul ul {
		   display:none; /* Sub menus are hiden by default */
		   position:absolute;
		   top:29px;
		   left:0;
		   right:auto; /*resets the right:50% on the parent ul */
		   width:10em; /* width of the drop-down menus */
		}
		#lower ul ul li {
		   left:auto;  /*resets the left:50% on the parent li */
		   margin:0; /* Reset the 1px margin from the top menu */
		   clear:left;
		   width:100%;
		}
		#lower ul ul li a,
		#lower ul li.submenu li a,
		#lower ul li:hover ul li a,
		#lower ul li.hover ul li a { /* This line is required for IE 6 and below */
		   font-size:.8em;
		   font-weight:normal; /* resets the bold set for the top level menu items */
		   background:#eee;
		   color:#7b684b;
		   line-height:1.4em; /* overwrite line-height value from top menu */
		   border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
		}
		#lower ul ul li a:hover,
		#lower ul li.submenu ul li a:hover,
		#lower ul li:hover ul li a:hover,
		#lower ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
		   background:#c6b695; /* Sub menu items background colour */
		   color:#660000;
		}
		
		/* Flip the last submenu so it stays within the page */
		#lower ul ul.last {
		   left:auto; /* reset left:0; value */
		   right:0; /* Set right value instead */
		}
		
		/* Make the sub menus appear on hover */
		#lower ul li:hover ul,
		#lower ul li.hover ul { /* This line is required for IE 6 and below */
		   display:block; /* Show the sub menus */
		   /*z-index: 1500;*/}

	.zed {z-index: 4000;}
	.zed div {z-index:3500; background-color:#990066;}
	.zed ul {z-index: 3000; background-color:#CC6666;}
	.zed li {z-index: 2900;}
	.zed li a {z-index: 2800; background-color:#009999;}	
									/* ****** Page Title, which is part of the menu row ****** */	
		.menurow h1 {
			display:block;
			width: 760px;
			margin:0;
			position:absolute;
			bottom: 0;
			text-align: center;
			font-family: Georgia, "Times New Roman", Times, serif;
			font-variant:small-caps;
			left:100px; /* necessary for IE 7 (and lower?)*/}
		.menurow h1 img {
			padding:0px;
			margin: 0px 20px; 
			vertical-align: middle;}

/* ********************************************************** */	
/* 3rd Row - Content and Pillar-main done by the 'holy grail' */
/* ********************************************************** */

/* the following "Holy Grail 3-Column Layout" it adapted from the work of CSS genius from MatthewJamesTaylor.com most comments are my own */
#colmask {
	position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	clear:both;
/*	float:left; */
	width:100%;				/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
	background-image: url('/images/column-middle-left.png'); /* Left column background */
	background-repeat:repeat-y;   	
}
#colmid {
	float:left;
	width:200%;
	position:relative;
	left:100px;				/* left column + margins */
	background:#efeee8;    	/* Centre column background colour */
}
#colright {
	float:left;
	width:100%;
	position:relative;
	left:50%;
	margin-left:-200px;		/* Left column & margins + Right Column & margins */
	background-image:url('/images/column-middle-right.png'); /* Right column background colour */
	background-repeat:repeat-y;    	    	/* Right column background colour */
}
#col1wrap {
	float:right;
	width:50%;
	position:relative;
	right:100%;
}
#col1pad {
	margin:0 0 0 200px;			/* center column (1) right margin; Left & Right columns & Margins + center column left margin */
	overflow:hidden;
}
#col1 {
	width:730px;
	padding: 15px 20px;				/* ------ ------ center column padding ------ ------ */
	min-height: 200px;
	overflow:hidden;
}
#col2 {
	float:left;
	width:100px;				/* left column width */
	position:relative;
	margin-left:-50%;
	left:100px;					/* ??? Left column & margins + some other margin */
	overflow:hidden;
}
#col3 {
	float:left;
	width:100px;				/* right column width */
	position:relative;
	left:0px;					/* right column left margin */
	overflow:hidden;}
/* End the Holy Grail 3 Column Layout and the adaptation from MatthewJamesTaylor.com */	


/* *************************************************** */
/* 4th Row - Checkered floor with logos & Pillar Bases */
/* *************************************************** */

.checkerrow {
	margin:0px;
	padding:0px;
	position:relative;
	width: 100%;
	height:136px;}
.checkerrow .left {
	background-image: url('/images/columns.jpg');
	background-repeat: no-repeat;
	background-position: bottom left;}
.checkerrow .right {
	background-image: url('/images/columns.jpg');
	background-repeat:no-repeat;
	background-position:bottom right;}

/* ****** Checker Floor Image Layout ****** */
.checkerrow #leftcf {
	margin:0px;
	padding: 0px;
	width: 200px;
	height: 130px;
	background: url('/images/checkerfloor.jpg');
	background-repeat: no-repeat;
	background-position: left 0;
	float:left;}

.checkerrow #macalester {
	float:left;
	margin: 0px;
	padding: 0px;}
.checkerrow #macalester a {   
    display: block;   
    background:  url('/images/macalester-pl.jpg') 0 top;   
	width: 110px;   
	height: 130px;}
.checkerrow #macalester a:hover {   
	background:  url('/images/macalester-pl.jpg') no-repeat 0 bottom;}

.checkerrow #middle {
	float:left;
	margin:0px;
	padding: 0px;
	width: 150px;
	height: 130px;
	background: url('/images/checkerfloor.jpg');
	background-repeat: no-repeat;
	background-position: -201px 0;}
	
.checkerrow #grandlodge {
	float:left;
	margin: 0px;
	padding: 0px;}
.checkerrow #grandlodge a {   
    display: block;   
    background:  url('/images/grandlodge-pl.jpg') 0 top;   
	width: 100px;   
	height: 130px;}
.checkerrow #grandlodge a:hover {   
	background:  url('/images/grandlodge-pl.jpg') no-repeat 0 bottom;}

#rightcf {
	float:left;
	margin:0px;
	padding: 0px;
	width: 200px;
	height: 130px;
	background: url('/images/checkerfloor.jpg');
	background-repeat: no-repeat;
	background-position: right 0;}

/* ************************************* */
/* 5th Row is the Appendent Bodies title */
/* ************************************* */
.subtitlerow {
	margin:0px;
	padding:0px;
	position:relative;
	width: 100%;
	height:45px;}
.subtitlerow .left{
	background-image: url('/images/ls.png');
	background-repeat:repeat-y;}
.subtitlerow .right{
	background-image: url('/images/rs.png');
	background-repeat:repeat-y;}
.subtitlerow .center{
	padding: 5px 0px;
	height: 35px;
	text-align:center;
	vertical-align:middle;}
.subtitlerow .center img{
	vertical-align:middle;}

/* ******************************** */
/* 6th Row - Appendent Bodies Logos */		
/* ******************************** */
.appendantrow {
	margin: 0px;
	padding: 0px;
	position:relative;
	width: 100%;
	height:81px;}
.appendantrow .left{
	background-image: url('/images/ls.png');
	background-repeat:repeat-y;}
.appendantrow .right{
	background-image: url('/images/rs.png');
	background-repeat:repeat-y;}
	
.appendantrow img{
	margin: 0px 3.5px;
	border: 0px;
	opacity:1.0;
	filter:alpha(opacity=100);}
.appendantrow img:hover{
	opacity:0.7;
	filter:alpha(opacity=70);}
#yorkrite a {
	width: 77px;
	height: 77px;
	background-image:url('imgdev/Appendant Bodies/appendantlogos.png');
	background-repeat:no-repeat;
	background-position: 0 0;}	
#scotishrite {
	width: 77px;
	height: 77px;
	background-image:url('imgdev/Appendant Bodies/appendantlogos.png');
	background-repeat:no-repeat;
	background-position: 78px 0px;}
#shrine {
	width: 77px;
	height: 77px;
	background-image:url('imgdev/Appendant Bodies/appendantlogos.png');
	background-repeat:no-repeat;
	background-position: 156px 0;}
#oes {
	width: 77px;
	height: 77px;
	background-image:url('imgdev/Appendant Bodies/appendantlogos.png');
	background-repeat:no-repeat;
	background-position: 247px 0;}

/* ******************************* */
/* 7th Row - Bottom Curve of Frame */
/* ******************************* */
.bottomrow {
	margin:0px;
	padding:0px;
	position:relative;
	width: 100%;
	height:38px;}
.bottomrow .center{
	background-image:url('/images/bb.png');
	background-repeat:repeat-x;}
.bottomrow img{
	margin: 0px;
	padding: 0px;
	border: 0px;}

/* ****** Configure 3 interior layout columns ****** */
.side {						/* both left and right, unless otherwise specified */
	margin:0px;
	padding: 0px;
	width: 100px;
	height: 100%;
	float:left;}

.center {
	margin:0px;
	padding: 0px;
	background-color:#efeee8;
	width: 760px;
	height:100%;
	float:left;}



	
.bar {
	background-image:url('/images/macalesterbar5.gif');
	background-repeat:repeat-x;
	height:5px;
	width: 760px;
	margin:0px;
	padding:0px;
	position: relative;}
/* End Menu Configuration, Layout, & Elements */



/* Various Modifiers and Formaters for all or specific pages */

p.indent{ 
	text-indent: 2em;
	text-align:justify;
}
p.signature {
	margin-left: 60%;}

/* For Lodge of Sorrows */
h2.prayer {
	text-align:center;
	font-size: 1.5em;}
	
p.prayer {
	text-align:justify;
	width: 60%;
	margin: auto;
	font-style:italic;
	font-size: 120%;
	padding-bottom: 8px;
	text-indent:25px;}

h2.pastbrother {
	text-align:center;
	font-size: 1.8em;
	font-weight:bold;}
	
p.pastbrother {
	text-align:justify;
	width: 90%;
	margin: auto;
	text-indent: 2em;
	padding-bottom: 8px;}
/* End Lodge of Sorrows */

.multicolumn {
	column-count: 3;
	text-align: justify;
}
.multicolumn ul{
	list-style-type:none;}
	
.inline-list{
	margin: 0;
	padding: 0;
	display: inline;
	list-style-type:decimal;}
.inline-list li{
	margin: 0;
	padding: 0;
	display: inline;}

	
.conditionalbox {
	display:block;
	height: 200px;
	width:200px;
	position:relative;
[if IE 8]background-color:#99FF66;
[if ! IE 8]background-color: #FFFF33;
[if lte IE 7] background-color: #006600;
	border: 4px solid green;
}