body { background:url(../images/stjo_bg.jpg); 
	margin: 0;
	padding: 0;
	}
                           
 #container { 
	width: 850px; 
	margin: auto;
	background-color: #7E0204;
	}
	 
 .header  { padding-bottom:5px;  }
 
 a img {
	text-decoration: none;
	border: 0 none;
	}
			

 /* Special things for pages with the new NavBar

	
/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */
/*------------------------------------*\
	NAV - Drop Down Navigation Bar
\*------------------------------------*/
#nav{
	list-style: none;
	font-weight: bold;
	margin-bottom: 10px;
	text-align: center;
	background-color: #7E0204;
	float:left;
	border-color: 2px thin #FFEE99;
	/* Bring the nav above everything else--uncomment if needed.*/
	position:relative;
	z-index:5;
	margin-left: 75px;
}
#nav li{
	float:left;
	margin-right:10px;
	position:relative;
}
#nav a{
	display:block;
	/*padding:15px;
	color:#fff;
	background:#333;*/
	text-decoration:none;
	color: #7E0204;
	background-color: #FFEE99;
	padding: 5px 10px;
}
#nav a:hover{
	color:#7E0204;
	background:#7E0204;
	text-decoration:underline;
}

/*--- DROPDOWN ---*/
#nav ul{
	background: #7E0204; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
	border: thin solid #7E0204;
}
#nav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	background:#FFEE99;
	text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background:#FFEE99;
	text-decoration: underline;
}
 .content 	{clear: both;
	background-color: #FFFFFF;

	text-align: left;
	margin-top: 12px;
	padding: 7px}
	
.content p {margin: 10px;}
 
 .leftSide {float: left;
	width: 200px;
	margin-left: 5px;
	background:#FFFFFF;
	
	}

.main {float: right;
	width: 600px;
	margin: 5px;
	
	border-left: 1px solid #7E0204;
	padding: 10px;
	}
	
.main img {margin: 5px;}
 
 .foot	{ background-color:#FFEE99; 
	/*font-family:Arial, sans-serif; 
	font-size:11px; border-top:1px solid 1px; */
	margin-top: 12px;
	padding-bottom:12px;
	clear: both;}
                          
 .script { font-family:Brush Script MT, Monotype Corsiva, Sylfaen, Georgia, serif;} 
                                    
  h1,h2,h3,h4,h5,h6 { font: Georgia, "Times New Roman", Times; font-weight:bold;
	color: #7E0204;
	text-align: center;}
	
	/*h1 { font-size:22px; color:#7E0204; line-height:22px;}
	h2 { font-size:18px; color:#7E0204; line-height:18px;} 
	h3 { font-size:16px; color:#7E0204; line-height:16px;} 
	h4 { font-size:16px; color:#290000; line-height:16px;}
	h5 { font-size:14px; color:#290000; line-height:14px;}
	h6 { font-size:12px; color:#290000; line-height:12px;}*/

  hr {color: #7E0204}
  p          { font-family:Arial, sans-serif; font-size:12px; color:#222;}
  li         { font-family:Arial, sans-serif; font-size:12px; color:#222;}
  blockquote { font-family:Arial, sans-serif; font-size:12px; color:#222;}
 

a:link {
	text-decoration: none; color:blue;
}
a:visited {
	text-decoration: none; color:blue;
}
a:hover {
	text-decoration: underline; color:blue;
}
a:active {
	text-decoration: none; color:blue;
}

	
#reg {
	width: 185px;
	left: auto;
}
#daily {
	width: 285px;
	padding-left: 200px;
}
#sacrament {
	width: 225px;
	float: right;
}
#smallFont {
	font-size: 35%;
	}
#index table{
	margin-left:auto; 
    margin-right:auto;
	border: 2px solid #7E0204;
	border-collapse:collapse;
		}
#index h1{
	font-size: 200%;
	
	}

#index td, tr{
	text-align: center;
	border: 2px solid #7E0204;
	table-layout: fixed;
	width: 25%;
	}

#index th{
	background-color: #7E0204;
	color: white
	}
	
.table a:link {
	text-decoration: none; 
	color:white;
	/*font-size: 110%;*/
	}
.table a:visited {
	text-decoration: none; 
	color:white;
	/*font-size: 110%;*/
	}
.table a:hover {
	text-decoration: underline; 
	color:white;
	/*font-size: 110%;*/
	}
.table a:active {
	text-decoration: none; 
	color:white;
	/*font-size: 110%;*/
	}
	
#sacPrep table{
	margin-left: auto; 
    margin-right: auto;
	border: 2px solid #7E0204;
	border-collapse: collapse;
	}
	
#sacPrep h1{
	/*font-size: 200%;*/
	}

#sacPrep td, tr{
	text-align: justify;
	border: 2px solid #7E0204;
	table-layout: fixed;
	width: 45%;
	padding: 15px;
	vertical-align: top;
	}

#sacPrep th{
	background-color: #7E0204;
	color: white
	}
	
 .youth table{
	margin-left:auto; 
    margin-right:auto;
	width: 95%;
	border: 2px solid #7E0204;
	border-collapse: collapse;
		}
		
 #event table{
	margin-left:auto; 
    margin-right:auto;
	border-collapse: collapse;
	}
	
#event td, tr, th {
	font-size: 50%;
	text-align:center;
	}
	
	
#bigStrong{
	font-size: 110%;
	font-style: bold;
	color: #2E9AFE;
		}

		
.peri{
	color: #2E9AFE;
	/*font-size: 125%;*/
	}
.peri h1{
	color: #2E9AFE;
	/*font-size: 125%;*/
	}
	
.left {text-align: left;}
	
.green{
	color: green;
	font-style: italic;
	text-align: center;
	}
	
.picture table{
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	color: #7E0204;
	
		}
.picture th{
	/*font-size: 100%;*/
	border-style: none;
	text-align: center;
	text-align: center;
	}
.picture td {
	text-align: center;
	border-style: none;
	}
.align-right { float:right; margin: 0 0 15px 15px; }
.align-left { float:left; margin: 0 15px 15px 0; }	

#list ul{
	list-style-type: none;
	list-style-image: none;
	list-style-position: inside;
	}
	

.justify {
	text-align: justify;
	margin-right: 20px;
	margin-left: 20px;
	}
.left{text-align:left;}
	
.yellow-background{
		background-color: #FFEE99;
		padding: 5px;
		border: thin solid #7E0204;
		margin: 5px;}
		
		
.mission{
	background-color:#7E0204;
	text-align: center;
	font-size: 110%;
	color: #FFEE99;
	margin: 0;
	font-family:Brush Script MT, Monotype Corsiva, Sylfaen, Georgia, serif;
	} 
 
	
.background{
	background-color:#7E0204;
	text-align: center;
	font-size: 120%;
	color: #FFEE99;
	margin: 0;
	}

.center {text-align:center}
.left {text-align:left}
.right {text-align:right}
	
.float-left{float:left;
	margin: 5px;
	padding: 10px;}
	
.nobullet ul li {list-style:none}
	
.float-right{float:right;}

.photo { width: 390px; font-size: 14px; font-weight: bold; height: 160 px;
	margin: 5px 5px 5px 20px; text-align: center; padding: 10px; float: left;
	border-right: thin solid #7E0204;}

.half_border { width: 390px; 
	height: 160 px;
	padding: 10px; 
	float: left;
	border-right: thin solid #7E0204;
	}
	
.half { width: 390px;  height: 160 px;
	padding: 10px; float: left;	}

	
.clear {	clear: both;}

.youth {color: #7E0204;}
	.youth a:link    { color:#7E0204;
					font-style: bold;}
	.youth a:visited { color:#7E0204; }
	.youth a:active  { color:#7E0204; }
	.youth a:hover   { color:#7E0204; 
					text-decoration: underline;}
 .youth td, tr, th{
	text-align: center;
	border: 2px solid #7E0204;
	font-size: 110%;
	border-collapse: collapse;
	}
.youth img 
					
.jrhigh { color: #008000;}
	.jrhigh a:link    { color:#008000;
					font-style: bold;
					padding: 5px;
					border: 2px solid #008000;}
				
	.jrhigh a:visited { color:#008000; }
	.jrhigh a:active  { color:#008000; }
	.jrhigh a:hover   { color:#008000; 
					text-decoration: underline;}
.srhigh {color: #FF0000}
	.srhigh a:link    { color:#FF0000;
					font-style: bold;
					padding: 5px;
					border: 2px solid #FF0000;}
	.srhigh a:visited { color:#FF0000; }
	.srhigh a:active  { color:#FF0000; }
	.srhigh a:hover   { color:#FF0000; 
					text-decoration: underline;}
.bible {color: #800080}

.small{font-size: 99%}

#gallery {
    border: 10px solid #7E0204;
    /*ight: 300px;*/
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    background: #7E0204;
    /*box shadow effect in Safari and Chrome*/
    -webkit-box-shadow: #272229 10px 10px 20px;
    /*box shadow effect in Firefox*/
    -moz-box-shadow: #272229 10px 10px 20px;
    /*box shadow effect in IE*/
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10);     
    /*box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
     box-shadow: #272229 10px 10px 20px;
}
/*this margin given to the unordered list sets the position in the center of the div.*/
#gallery ul{
    /* This position the ul content in the middle of the gallery*/
    margin-left:-30px; 
}
/*Now to each item of the unorded list we eliminate the list style and give a padding of 10 pixels for better appearance and display inline-table to fix the position of the image to display with the mouseover.*/
#gallery ul li {
    /* In order to create the proper effect with hover we should use display inline-table
        This will display the big picture right next to its thumbnail
    */
    list-style:none; 
    display:inline-table; 
    padding:10px;	     
 }
/*Here is where we create animation with the CSS property transition which is part of the CSS3. The properties from CSS3 used are transition and box-shadow.*/
/* This is the pic to display when the hover action occur over the li that contains the thumbnail  */
#gallery ul li .pic{
    /* Animation with transition in Safari and Chrome */
    -webkit-transition: all 0.6s ease-in-out;
    /* Animation with transition in Firefox (No supported Yet) */
    -moz-transition: all 0.6s ease-in-out;
    /* Animation with transition in Opera (No supported Yet)*/
    -o-transition: all 0.6s ease-in-out;
    /* The the opacity to 0 to create the fadeOut effect*/
   opacity:0;
   visibility:hidden; 
   position:absolute; 
   margin-top:10px; 
   margin-left:-20px; 
   border:1px solid black;
   /*shadow box effect in Safari and Chrome*/
   -webkit-box-shadow:#272229 2px 2px 10px;
   /*shadow box effect in Firefox*/
   -moz-box-shadow:#272229 2px 2px 10px;
   /*shadow box effect in IE*/
   filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
   /*shadow box effect in Browsers that support it, Opera 10.5 pre-alpha release*/
   box-shadow:#272229 2px 2px 10px;
}
/*Adding the pointer cursor to the thumbnail at the mouseover action.*/
#gallery ul li .mini:hover{
    cursor:pointer;
}
/*To finish we create the effect of the animated gallery, modifying the opacity and height of the image gradually with the mouseover action.*?
/* This create the desired effect of showing the image when we mouseover the thumbnail*/
#gallery ul li:hover .pic {
    /* width and height is how much the picture is going to growth with the effect */
   width:400px; 
   height:300px;
   opacity:1; 
   visibility:visible; 
   float:right;}