/*----------------------------------------------
 CSS by John Ailor for Saint Luke Lutheran Church
 Devon, PA
 (C) 2008 MyOhMy Design
 ----------------------------------------------*/

/* MAIN */

body {
	background-color: white;	
	color: black;
}

#wrapper {	
	position:relative;
	width: 900px;	
	margin: 20px auto 0px auto;
	background-color:  #F8F5F5;	
	border:solid 1px #47135B;	
	font-family: Arial, sans-serif;
	font-size: 9pt;
	line-height: 1.7em;
	border:solid 1px #47135B;	
}

#header{
width:100%;
height: 300px;
background-color: #47135B;
background-image: url(../images/BannerStLuke.jpeg);
background-position: top left;
background-repeat: no-repeat;
}	

#content{
float:left;
min-height:500px;
margin:auto;
width:100%;
}

img{
	border:none;
	padding:10px;
}

.announce, .article, .thisWeek, .eventDetail, .today, ul#thisWeek, ul#today {
	font-family: Arial, sans-serif;	
	font-size:9pt;
}

/***************************
			HOME PAGE
****************************/	
	
#leftColumn, #rightColumn, #middleColumn {	
	min-height:500px;	
	float:left;
	position:relative;
	color: black;
	padding:10px;
	}

/* left column*/
#leftColumn {			
	/* width:230px;*/
	width:1px;
		
}

#middleColumn {
	width:580px;	
}

/* right column*/
#rightColumn {	
	width:230px;		
}	


ul#links, ul#photos{
	font: Arial, sans-serif normal 9pt none;
}

ul#links li, ul#photos li{
	list-style: none;
	line-height: 1.9em;
}

a.quick{
	font-family: Arial, sans-serif;
	font-size: 10pt;
	text-decoration: none;
}

a.quick:link{text-decoration: none; color:#47135B;}
a.quick:hover {text-decoration: none; color: Maroon;}
a.quick:active {text-decoration: none; color:#47135B;}
a.quick:visited {text-decoration: none; color:gray;}

/*************************************
ANCILLARY PAGES
******************************************/	
	
#leftColumnAncillary, #rightColumnAncillary, #middleColumnAncillary {	
	min-height:500px;	
	float:left;
	position:relative;
	color: black;
	padding:10px;
	margin:10px auto;
	}

/* left column*/
#leftColumnAncillary {			
	width:230px;
	border-right:dotted 1px #96D3F2;
}

#middleColumnAncillary {
	width:378px;		
}

/* right column*/
#rightColumnAncillary {	
	width:230px;	
	
}	

p.today{
	width:100%;
	text-align: center;
	font-size: 10pt;
	text-transform: uppercase;
	letter-spacing: 1.1em;
}

#oneColumn{
	width:80%;
	margin:20px auto;
}

/*******************************
		MORE
*******************************/

#more {
	position:relative;
	top:30px;
	width:80%;
	margin: 20px auto;
}

#emailAFriend{
	width:80%;
	margin: 30px auto;
	font-size: 9pt; 
	background-color: #FAFBFD;
	color: #4C4C4C; 
	padding: 20px;
	background-image: url(../images/postage.gif);		
	background-position: top right;	
	background-repeat: no-repeat;		
	border:1px solid black;
}

/*emailTo*/
ul#emailTo, ul#emailFrom, ul#emailComment
{
	display:inline;	
	padding:0px;
	margin: 0px;
}

li.emailLeft, li.emailRight
{	
	float:left;
	position:relative;
	list-style: none;	
	clear:right;
	margin-left: 0px;
}

li.emailLeft
{
	width:200px;
	font-weight:bold;
}


ul#thisWeek, ul#today, ul#thisDay{
	display:inline;
	padding:0px;
}

ul#thisDay{
	margin:20px auto;
}

ul#thisWeek li.day, ul#thisWeek li.date, ul#thisWeek li.time, ul#thisWeek li.title,
ul#today li.day, ul#today li.time, ul#today li.title, ul#thisDay li.description, ul#thisDay li.location,
ul#thisDay li.time, ul#thisDay li.title
{
	clear:right;
	float:left;
	position:relative;
	list-style: none;	
	line-height: 1.5em;		
	margin-left:0px;
	width: 25px;
}

ul#thisWeek li.time, ul#today li.time{
	width: 60px;
	padding-left:0px;
	text-align:right;
}

ul#thisWeek li.title, ul#today li.title {
	width: 130px;
	padding-left:5px;
}

ul#thisWeek li.date{
	width: 45px;
	}
	
ul#thisDay li.time{
	width:100px;
	list-style: none;
}

ul#thisDay li.title{
	width:150px;
	padding-left: 10px;
	list-style:none;
}
	
ul#thisDay li.description{
	width:350px;
	padding-left: 5px;
	list-style: none;
	vertical-align: top;
}

ul#thisDay li.location{
	width:150px;
	padding-left: 10px;
	list-style: none;
}

.emailSpacer{
	clear:both;
	width:100%;
	height: 1px;
	margin: 0px ;
	padding: 0px;	
}

#CalendarDay{
	width: 95%;
	margin: 20px auto;
}

.calendarDay{
	width:100%;
	margin: 15px auto;
}


h2 {
	font-family: Arial, sans-serif;
	font-size: 14pt;
	text-align: center;
	padding: 10px 10px;
	margin: 10px auto;
	background-color: transparent;
	border-bottom: dashed 1px #47135B;
}

h3 {
	font-family: Arial, sans-serif;
	font-size: 10pt;
	text-align: center;
	padding: 0px 10px;
	margin: 10px auto;
	background-color: transparent;
}

a.h3:link{text-decoration: none; color:#47135B; font-weight: normal;}
a.h3:hover {text-decoration: none; color: Maroon;font-weight: normal;}
a.h3:active {text-decoration: none; color:#47135B;font-weight: normal;}
a.h3:visited {text-decoration: none; color:gray;font-weight: normal;}


.Today {
	background-color: #990000;
	text-align: center;	
	text-transform: uppercase;
	color: White;	
	padding-top: 5px;
	padding-bottom: 5px;
	}
		
	
.EventDetail {
	background-color: #FAE14F;
	font: 11px Arial, sans-serif;
	text-decoration: none;	
	color: Black;
	padding-left: 3px;
}

/**************************************
		FOOTER
**************************************/

#footer
	{	
	clear:both;
	width: 900px;
	font-size: 8pt;
	font-family: Arial, sans-serif;
	color: white;
	background-color: #47135B;
	text-align: center;
	margin: 0px auto;
		}	
		
ul#footer{
	width:267px;
	margin:auto;
	font-size: 9pt;
	list-style: none;
}		

ul#footer li.footer{
	list-style: none;
}

p.footer{
	width:70%;
	margin:0px auto;
	padding: 5px 0px;
}

	
/* TABLE */
	

table#ThisWeek {	
	font-family: "MS Sans Serif", sans-serif;
	font-size: 9pt;
	background-color: transparent;
}
	
td.default_left 
{
	background-color: #020590;	
	width: 200px;
	vertical-align: top;
	}

td.default_center 
{	background-color: #F0EFFF;
	width: 400px;
	vertical-align: top;
}

td.default_right 
{
	background: #A8A9E4;
	width: 200px;
	vertical-align: top;
}


td.hatpage_center 
{
	background: #F4F0F0;
	width: 400px;
	vertical-align: top;
}

	
a.more:link 
{	
	background-color:Transparent;
	text-decoration: none;	
	color: black;	
	font-size: .85em;			
} 
	
a.more:visited {
	background-color:Transparent;
	text-decoration: none;	
	color: black;		
	font-size: .85em;	
	}

a.more:hover {
	background-color:Transparent;
	text-decoration: none;	
	color: red;	
	font-size: .85em;	
	}
	
a.credit:link 
{	
	background-color:Transparent;
	text-decoration: none;	
	color: white;	
	font-size: 1em;			
} 
	
a.credit:visited {
	background-color:Transparent;
	text-decoration: none;	
	color: silver;		
	font-size: 1em;	
	}

a.credit:hover {
	background-color:Transparent;
	text-decoration: none;	
	color: orange;	
	font-size: 1em;	
	}	
	
a.Saints:link 
{	
	background-color:Transparent;
	text-decoration: none;
	text-align: right;	
	color: silver;	
	font-size: .9em;			
} 
	
a.Saints:visited {
	background-color:Transparent;
	text-decoration: none;
	text-align: right;	
	color: sliver;		
	font-size: .9em;	
	}

a.Saints:hover {
	background-color:Transparent;
	text-decoration: none;	
	text-align: right;
	color: red;	
	font-size: .9em;	
	}	
	
.Credit {
	text-align: center;
	font: 9px;
	text-decoration: none;
}

.navMenu {
	font-family: Arial, sans serf;
	font-size: 12pt;
	width: 100%;
	height: 25px;
}

/*Staff Page Styles*/

table.staff
{	
	
	width: 100%;
	text-align: center;
	font-size: 9pt;
	margin-left:auto;
	margin-right: auto;
	border-collapse: collapse;
	border: 0px;	
	}	

td.Title
{	
	width: 310px;
	padding-left: 8px;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: left;
	
	}	
	
td.Name
{	
	width: 200px;
	padding-left: 8px;
	text-align: left;
	text-decoration: none;
	}
	
td.Phone
{	
	width: 110px;	
	text-align: center;
	}

td.Ext
{	
	width: 60px;
	text-align: left;
	
	}	

td.Email
{	
	width: 190px;
	padding-left: 8px;
	text-align: left;
	}
	
/*Direction Page Styles*/
	
table.directions
{		
	width: 100%;
	text-align: center;
	font-size: 9pt;
	margin-left:auto;
	margin-right: auto;
	border-collapse: collapse;
	border: 0px;	
	}	

p.directions{
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;	
}

#bottom
	{	
	width: 800px;
	font-size: 8pt;
	font-family: Arial, sans-serif;
	color: white;
	background-color: #015BFF;
	text-align: center;
	padding-top: 5px;		
	padding-bottom: 5px;
		}	
		
fieldset{
	color: white;
	font-size: 8pt;
	text-align: center;
	padding: 8px 3px;
	margin: 5px 0px;
	line-height: 1.8em;
}	




/******************************
				GALLERIES
*******************************/
#proofsheet{
position:relative;
top:30px;
width:80%;
margin:10px auto;
}

.button{	
	width: 100%;
	text-align: center;
	margin: 15px auto;	
	padding:5px;
}

.note{
	width:100%;
	margin: 15px auto;
	padding: 10px 0px;
	text-align: center;
}

#slides{
	width:700px;
	margin:auto;
}

/*************************
		CALENDARS
**************************/

#calendar{
float:left;
width:100%;
margin:auto;
border:none;
}

#calendarTable{
	width:100%;
	border:solid 1px #47135B;
	margin: 10px auto;
}


/****************************
		CONTACT PAGE
****************************/

#contact{
	width: 80%;
	margin:20px auto;
	padding: 20px 0px;
}

table.staff{
	width: 70%;
	margin: 0px auto;
}

ul#contactLeft, ul#contactRight{
	float:left;
	position:relative;
	list-style: none;
}



li.contactLeft, li.contactRight{
	list-style: none;
	line-height: 24px;	
}



li.contactLeft{
	font-weight:bold;
}


#moreContact{
	clear:both;
	margin-left:120px;
	width:400px;
	background-color:transparent;

}

fieldset#fsContactUs{
	color: black;
	font-size: 10pt;
	width:70%;
	margin:20px auto;
	border: groove 2px solid;
}

ul#contactUs{
	list-style: none;
	text-align: center;
	line-height: 1.8em;
}

ul#contactUs li.contactUs
{
	list-style: none;
}

/***********************************
				MESSAGES
**********************************/

p.messages{
	font-size: 10pt;
	width: 70%;
	margin:50px auto;
	text-align:center;
}

/***********************************
				Niffty Corners
**********************************/

ul.postnav {width:150px; float:right; margin:105px 40px 0 0;}
ul.postnav,ul.postnav li{list-style-type:none;}
ul.postnav li{width:150px; font-size:10pt; margin: 0px auto 15px auto;}

ul.postnav a{

	display:block;
	width:150px; 
	font: normal 100% Verdana,Arial,sans-serif;
    background: #C1B7BF;
	color: #000;
    text-decoration:none;
	text-align:center}

ul.postnav a:hover{background: #47135B;color:#FFF}

/***********************************
				HEADER BUTTONS
***********************************/

ul#postnav2 {width:190px; float:right; margin:12px 12px 12px 0px;}
ul#postnav2 li.headerButton {


	background-image: url(../images/SaintLuke_HeaderButtons.jpg);
	background-repeat:none;
	font: normal 10pt Verdana,Arial,sans-serif;
	text-align:center;
	veritical-align: center;
	list-style-type:none;
	height: 35px;
	padding-top:15px;
	width: 190px;
	margin: 5px 0px;

}

ul#postnav2 a {text-decoration:none;}
ul#postnav2 a:link {color: #47135B;} 
ul#postnav2 a:visited {color: #47135B;} 
ul#postnav2 a:hover {color:#97E2F2;} 
ul#postnav2 a:active {color: #e86534;}	


/**************************************************

			SERMON AUDIO

***************************************************/

#SermonAudio {
	width:100%; 
	float:left;
	position:relative;
    margin:10px auto; 
	background-color:  #F8F5F5;	
	min-height: 600px;}

 ul#ulSermonAudio {
      display: inline;
      list-style: none;
      width: 720px;
      margin:auto;
     }
     
ul#ulSermonAudio li.sAudio300 a{}
ul#ulSermonAudio li.sAudio300 a:link, a:visited {color: #47135B; text-decoration: none;}
ul#ulSermonAudio li.sAudio300 a:hover, a:active {color: #96D1F1; text-decoration: none;}
ul#ulSermonAudio li.sAudio300 a.more:link, a.more:visited {text-decoration:none; color: #3399FF; font-size:12px;}
ul#ulSermonAudio li.sAudio300 a.more:hover, a.more:active {text-decoration:none; color: #ffa300; font-size:12px;}   
      
 li.sAudio60 {
      color: #005ca5;
      font-size: 12px;
      text-align: center;
      font-weight: bold;
      width: 60px;
      padding:15px 0px;
      height: 50px;
      vertical-align:middle;
      float:left;
      margin: 5px 5px 15px 5px;}     
      
li.sAudio150 {
      color: #005ca5;
      font-size: 12px;
      text-align: center;
      font-weight: bold;
      width: 150px;
      padding:15px 0px;
      height: 50px;
      vertical-align:middle;
      float:left;
      margin: 5px 5px 15px 5px;} 
      
li.sAudio280 {     
      width: 280px;
      text-align: center;
      font-size: 12px; /* Needed for Safari */
      height: 50px;
      vertical-align:middle; 
      float:left;
      margin: 5px 5px 15px 5px;}   
      
 li.sAudio300   
 { 	  color: #47135B;
   	  font-weight: bold;
      width: 300px;
      text-align: center;
      font-size: 12px; /* Needed for Safari */      
      padding:15px 0px;
      height: 50px;
      vertical-align:middle; 
      float:left;
      margin: 5px 5px 15px 5px;}       
      
 .dlAudioSermons
 {
 	width:800px;
 	margin:auto;
 }