/* _______________________________________________________________________

   (c) 2009 Rockford Lutheran Schools, All Rights Reserved.

   Stylesheet prepared by Jonathan Powell (jdp@jonathandietrich.com)
   _______________________________________________________________________ */




/*_______________________________________________________________________ 
   Reset Styles
  _______________________________________________________________________ */

body, div, dl, dt, dd, li, pre,
form, fieldset, input, textarea, p, blockquote, th, td, button { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-size: 100%; font-weight: normal; }
address, caption, cite, code, dfn, em, strong, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; } 
caption, th { text-align: left; font-weight: normal; font-style: normal; }
acronym, abbr, fieldset, img { border: 0;}
:focus { outline: 0; }


/*_______________________________________________________________________ 
   Layout
  _______________________________________________________________________ */
 
#page-wrap {
	width: 900px;
	margin: 0 auto;	
}

#header {
	width: 900px;
	height: 108px;
}

#content_wrapper {
	width: 900px;
	height: 505px;
	background: url(http://www.rockfordlutheran.org/images/interface/homePhoto_main4.jpg) no-repeat;
}

#leadership{
	width: 350px;
	height: 90px;
	position: absolute;
	top: 280px;
}

	#leadership h2{
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 21px;
		font-weight: lighter;
		color: #52247F;
		margin-left: 85px;
	}

	#leadership p{
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 14px;
		color: #336699;
		text-align: center;
		line-height: 120%;
		margin: -10px 0 0 50px;
	}

#main_content {
	width: 900px;
	background: url(http://www.rockfordlutheran.org/images/interface/main_content_bg_middle.jpg) repeat-y;
}

#main_content img {
	z-index:1000;
}

	#main_content .inside {
		width: 570px;
 		min-height: 500px;
		margin-top: -340px;	
		padding-bottom: 20px;
	}
	
	#main_content .inside ul {
		list-style: disc;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 12px;
		color:#000;
		margin-left: 90px;
		padding: 10px 0 5px 0;
		line-height: 150%;
	}

	#main_content .inside ul ul {
		margin-left: 20px;
		list-style: circle;
	}

	#main_content .inside table {
		font-family: Helvetica, Arial, sans-serif;
		font-size: 12px;
		color:#000;
		margin-left: 0px;
		padding: 0px 0 0px 0;
		line-height: 100%;
	}

	#main_content .inside strong {
		font-weight: bold;
	}

	#main_content .inside em {
		font-style: italic;
	}

	#main_content .inside img {
		border: 1px #52247F solid;
	}



/*_______________________________________________________________________ 
   Begin css for no-circle pages - created by Karin Graddy 05-31-2010
  _______________________________________________________________________ */


	#main_content .no-circle {
		width: 825px;
 		min-height: 500px;
		margin-top: -400px;	
		padding-bottom: 20px;
	}
	
	#main_content .no-circle ul {
		list-style: disc;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 12px;
		color:#000;
		margin-left: 90px;
		padding: 10px 0 5px 0;
		line-height: 150%;
	}

	#main_content .no-circle ul ul {
		margin-left: 20px;
		list-style: circle;
	}

	#main_content .no-circle table {
		font-family: Helvetica, Arial, sans-serif;
		font-size: 12px;
		color:#000;
		padding: 0px 0 0px 0;
		line-height: 100%;
	}

	#main_content .no-circle strong {
		font-weight: bold;
	}

	#main_content .no-circle em {
		font-style: italic;
	}

	#main_content .no-circle img {
		border: 1px #52247F solid;
	}


/*_______________________________________________________________________ 
   End css for no-circle pages - created by Karin Graddy 05-31-2010
  _______________________________________________________________________ */



#upcoming_dates {
 	background-color: #CFCFCF !important;
 	width: 500px;
       border: 1px solid #000;
       margin-left: 65px;
       padding: 10px;
}

#upcoming_dates p, #upcoming_dates h2 {
       margin-left: 0px;
}

#upcoming_dates li {
       margin-left: -40px;
}

#main_content_text_area_bottom {
	width: 900px;
	height: 64px;
	background: url(http://www.rockfordlutheran.org/images/interface/main_content_bg_bottom.jpg) no-repeat;
}
	
	#main_content_text_area_bottom ul {
		margin-left: 22px;	
	}

	#main_content_text_area_bottom ul li a {
		width: auto;
  		float: left;
  		list-style: none;
		text-decoration: none; 
		color:#FFF;
		font-family: sans-serif;
		font-size: 11px;
		font-weight: 300;
		letter-spacing: 1px;
		margin-top: 35px;
		padding: 0 7px 0 7px;
	}
	
	#main_content_text_area_bottom ul li a:hover {
		color:#52247F;
	}

#round_content_image {
	width: 250px;
	margin: -300px 0 0 600px;
}

#footer {
	width: 838px;
	height: 161px;
	background: url(http://www.rockfordlutheran.org/images/interface/homepage_footer_bg.png) no-repeat;
	margin: -175px 0 0 28px;
}

#bottom_corner_image {
	width: 210px;
	height: 212px;
	background: url(http://www.rockfordlutheran.org/images/interface/globetrotter.png) no-repeat;
	margin: -212px 0 0 28px;
}

#upcoming_events p, #whats_new p, #teacher_spotlight p, #edline p, #scrip p {
		width: auto;
		margin-left: 0;
                text-align: left;
		font-size: 11px;
		padding: 0;
		line-height: 110%;
	}

#upcoming_events {
	width: 136px;
	height: 120px;
	margin: -140px 0 0 200px;
	padding-right: 7px;
	text-align: left;
	background: url(http://www.rockfordlutheran.org/images/interface/verticalline.jpg) no-repeat right;
}

	#upcoming_events h3{
	padding: 1px 0 5px 0;
        margin-left: 0px;
	}

	#upcoming_events p.date {
		font-weight: bold;
		letter-spacing: 1.5px;
	}

#whats_new {
	width: 110px;
	height: 120px;
	margin: -120px 0 0 350px;
	padding-right: 7px;
	text-align: left;
	background: url(http://www.rockfordlutheran.org/images/interface/verticalline.jpg) no-repeat right;
}

	#whats_new p {
		padding-top: 15px;
	}

       #whats_new li {
                list-style: none;
       }

#teacher_spotlight {
	width: 110px;
	height: 120px;
	margin: -120px 0 0 470px;
	padding-right: 7px;
	padding-left: 5px;
	text-align: left;
	background: url(http://www.rockfordlutheran.org/images/interface/verticalline.jpg) no-repeat right;
}

        #teacher_spotlight h3{
	margin-top: -10px;
        margin-left: 0px;
	}

#edline {
	width: 110px;
	height: 120px;
	margin: -120px 0 0 590px;
	padding-right: 7px;
        padding-left: 10px;
	text-align: left;
	background: url(http://www.rockfordlutheran.org/images/interface/verticalline.jpg) no-repeat right;
}

	#edline p {
	padding-top: 15px;
	}

#scrip {
	width: 110px;
	height: 120px;
	margin: -113px 0 0 715px;
	padding: 0 8px;
	text-align: left;
}

        #scrip h3{
	margin-top: -10px;
        margin-left: 0px;
	}

/*_______________________________________________________________________ 
   Standard Styles
  _______________________________________________________________________ */

body {
	background-image: url(http://www.rockfordlutheran.org/images/interface/stripe.jpg);
	background-repeat: repeat-x;
	background-color: #fff;
}

h1 { 
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 36px;
	font-weight: lighter;
	color: #52247F;
	margin-left: 65px;
	margin-top: -75px;
	padding: 100px 0 5px 0;	
}

h2 { 
	font-family: Helvetica, Arial, sans-serif;
	font-size: 21px;
	font-weight: lighter;
	margin-left: 65px;
	padding: 10px 0 5px 0;
}

h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	color:#9d3194;
	margin-left: 65px;
	padding: 10px 0 5px 0;
}

h4 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	margin-left: 65px;
}

p {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	color:#000;
	margin-left: 65px;
	padding: 10px 0 5px 0;
	line-height: 150%;
}

a, a:visited {
        color:#52247F;
}

/*_______________________________________________________________________ 
   Nav
  _______________________________________________________________________ */
.menu {
	width:900px; 
	position:relative; 
	font-family: Georgia, serif;
        margin-left: 3px;
        z-index: 100;
}

/* remove all the bullets, borders and padding from the default list styling */

.menu ul {
	padding:0;
	margin:0;
	list-style-type:none;
}

.menu ul ul {
	width:89px;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */

.menu li {
	float:left;
	width:89px;
	position:relative;
}

/* style the links for the top level */

.menu a, .menu a:visited {
	display:block;
	font-size:12px;
	text-decoration:none; 
	color:#9D3194; 
	width:89px; 
	height:30px; 
	border:1px solid #9D3194;
	line-height:30px;
	background:#fff;
	text-align: center;
}

/* style the second level background */

.menu ul ul a.drop, .menu ul ul a.drop:visited {
	background:#fff url(images/interface/grey-arrow.gif) no-repeat 130px center;
}

/* style the second level hover */

.menu ul ul a.drop:hover{
	background:#9D3194 url(images/interface/grey-arrow.gif) no-repeat 130px center;
}

.menu ul ul :hover > a.drop {
	background:#9D3194 url(images/interface/grey-arrow.gif) no-repeat 130px center;
}


/* style the third level background */

.menu ul ul ul a, .menu ul ul ul a:visited {
	background:#fff;
}

/* style the third level hover */

.menu ul ul ul a:hover {
	background:#9D3194;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */

.menu ul ul {
	visibility:hidden;
	position:absolute;
	height:0;
	top:31px;
	left:0; 
	width:149px;
	border-top:1px solid #9D3194;
}

/* position the third level flyout menu */

.menu ul ul ul{
	left:149px; 
	top:-1px; 
	width:149px;
}

/* position the third level flyout menu for a left flyout */

.menu ul ul ul.left {
	left:-149px;
}

/* style the table so that it takes no part in the layout - required for IE to work */

.menu table {
	position:absolute; 
	top:0; 
	left:0; 
	border-collapse:collapse;
}

/* style the second level links */

.menu ul ul a, .menu ul ul a:visited {
	color:#9D3194;
	background:#fff; 
	height:auto; 
	line-height:1em; 
	padding:5px 10px; 
	width:128px;
	border-width:0 1px 1px 1px;
}

/* style the top level hover */

.menu a:hover, .menu ul ul a:hover{
	color:#fff; 
	background:#9D3194;
}

.menu :hover > a, .menu ul ul :hover > a {
	color:#fff; 
	background:#9D3194;
}

/* make the second level visible when hover on first level list OR link */

.menu ul li:hover ul, .menu ul a:hover ul{
	visibility:visible;
}

/* keep the third level hidden when you hover on first level list OR link */

.menu ul li:hover ul ul{
	visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */

.menu ul li:hover ul li:hover ul{
	visibility:visible;
}

.menu ul a.bump {
	line-height: 12px;
	padding-top: 4px;
	height:26px;
}

/*_______________________________________________________________________
   Classes
  _______________________________________________________________________ */

div.clear { clear: both; }

.transparent {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}


/*_______________________________________________________________________
   Galleria
  _______________________________________________________________________ */

.galleria{list-style:none;width:200px;}
.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 10px 10px 65px;}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto;}
.galleria li .caption{display:block;padding-top:.5em}
.galleria_wrapper{padding-bottom:10px;}

.caption{font-style:italic;color:#887;}
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:702px;}
.gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
	
#main_image{margin:0 auto 60px auto;;height:438px;width:700px;background:black;}
#main_image img{margin-bottom:10px;}
	
.nav{text-align:center;width:700px;padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
	
.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
.info p{margin-top:1.6em;}