/*********************************************************************************************************************************
 *
 * Sandwich Church of the Nazarene / www.sandwichnazarene.org
 *
 * Cascading Style Sheet for Site Style (v1.5)
 *
 * Author: Kerri Shotts
 *
 * Audit Trail
 * 03-10-2008 KAS: v1.4 Added Commenting and organized
 * 03-13-2008 KAS: v1.5 Removed IE-only, IE 5.5 hacks into their own file
 *
 *********************************************************************************************************************************/

/*
 * General Classes
 *
 * .LEFT, .RIGHT: Floats an object left or right.
 * .w25, .w50: Width 25%, width 50% respectively.
 * .trans(0-9): Applies transparency to the object. 0 = 0% transparency, 9 = 90% transparency.
 * .even, .odd: Applies alternating colors to even or odd table rows
 * .block: Applies block formatting to the object
 * .noclear: Overrides clearing of inherited styles
 * 
 *********************************************************************************************************************************/

.left
{
    float:left;
}
.right
{
    float:right;
}
.w25
{ 
    width:25%; 
}
.w50
{ 
    width:48%; 
}
.white
{
    color: #FFF !important;
}

.trans0
{
	opacity:1;
}
.trans1
{
	opacity:0.9;
}
.trans2
{
	opacity:0.8;
}
.trans3
{
	opacity:0.7;
}
.trans4
{
	opacity:0.6;
}
.trans5
{
	opacity:0.5;
}
.trans6
{
	opacity:0.4;
}
.trans7
{
	opacity:0.3;
}
.trans8
{
	opacity:0.2;
}
.trans9
{
	opacity:0.1;
}
.even
{
	background-color:#f4f4f4;
}
.odd
{
	background-color:#e8e8e8;
}
.noclear
{
    clear:none !important;
}

.block
{
	display:block;
}

/*
 * RSS Feed Subscription Styles
 *
 *********************************************************************************************************************************/
 
A.subscribe
{
	background-image:url('../images/feed-icon-14x14.png');
	background-repeat: no-repeat;
	background-position:  top left;
	padding-left:20px;
	text-decoration:none;
	color:#567;
	font-size:85%;
	display:block;
	line-height:16px;
	overflow:hidden;
}
A.subscribe:HOVER
{
	text-decoration:underline;
	color:#248;
}

/*
 * Background 
 *
 * BODY: green background color while background loads; background is green slate hatch and fixed (does not scroll)
 *       the margins and padding are 0, and the preferred font is Arial. Text is centered to force IE to center (yes, IE is nuts!)
 *
 * .SHADOW: Builds the shadow behind the content; repeats vertically.
 *
 *********************************************************************************************************************************/
 
BODY
{
    Background-Color:#576; 
    Background-Image: url("../images/greenslate_hatch.png");
    background-attachment: fixed;
    margin:0px;
    padding:0px;
    font-family: Arial, Helvetica, Sans-Serif;
    text-align:center;
}

DIV.shadow
{
    background-image: url("../images/shadow.png");
    background-position: center top;
    background-repeat: repeat-y;
}

/*
 * Body Area
 *
 * Auto margins (centering for non-IE), white background, left aligned text (for IE), 5px padding
 * 900 pixels wide. Font size a little smaller than normal.
 *
 *********************************************************************************************************************************/

DIV.body
{
    margin-left: auto;
    margin-right: auto;
    Background-Color: #FFF;
    text-align:left;
    padding:5px;
    width:890px;         
    font-size:95%;
}

/*
 * Banner Area
 *
 * .MENU: really mis-named; this is the main "Sandwich Church of the Nazarene" banner. Uses header2.jpg, and is 85px high.
 *        Forces a minimum width for non-IE browsers.
 *
 * .MENU_NOSTYLE: Allows screen readers to see the church name, but not have it display to normal browsers.
 *
 * .BODY .PAGETITLE: Positions the page's title (visible on pages save home page) to the right. Due to when the page knows if it
 *                   will display the title or not, this is not technically part of the DIV.MENU.
 *
 * .H1, .H2: No clue. Shouldn't have any effect. ** deprecated **
 *
 * .breadcrumb: The breadcrumb is also not technically part of the upper banner, even though visually it appears so. 
 *
 *********************************************************************************************************************************/

DIV.menu
{
    Background-Color: black;
    margin:-5px;
    height:75px;     
    Padding:5px;
    min-width:850px;         
    background-image: url('../images/header2.jpg');
}

DIV.menu_nostyle
{  
    display: none;
}
 
.body .pagetitle
{
	 float:right;
	 text-align:right;
	 margin-top:0.6em;
	 font-family: arial, helvetica, sans-serif;
	 font-size:24pt;
	 color:#777777;
}

.breadcrumb
{	text-align:right;
    font-size:11px;
    Padding:3px;
    color:#888;
    margin-top:0.5em;
    font-weight:bold;
    position:relative;
    right:-221px;
    top:-148px;
    height:1px;
    margin-bottom:-2.4em;
    
}
.breadcrumb A
{
	text-decoration:none;
	color:#369;
}
.breadcrumb A:HOVER
{
	text-decoration:underline;
}


/*
 * Just in case - because I can't figure out what these were there for!
 * 
DIV.menu H1
{
     margin:0px;
     Font-Family: Arial, Helvetica, Sans-Serif;
     Font-Size: 48pt;
     Font-Weight: Normal;
     Color: #455;
} 
DIV.menu H2
{
     margin:0px;
     Font-Family: Arial, Helvetica, Sans-Serif;
     Font-Size: 24pt;
     Font-Weight: Normal;
     Color: #571;
} 
 */
 
/*
 * The next declarations actually the scrolling area for the main menu
 *
 * .scroll_menu: container for the menu. It is 900px wide, no padding, expanded margins, 90px high, and hidden overflow (so the
 *               wide image underneath is clipped). The position is relative.
 * .scroller:    The actual menu image. The image is as wide as necessary (currently 1200px). Its position is relative, and it is
 *               set to 0px left. (This is offset by a script to simulate movement).
 * .scroll_left, .scroll_right
 *               These are the "glowing" arrows on the left and right sides of the menu. They appear only as necessary (determined
 *               by script), and are absolutely positioned to be in the correct place.
 *
 *********************************************************************************************************************************/
  
.scroll_menu
{
	width:900px !important;
	padding:0px !important;
	margin-left:-5px !important;
	margin-right:-5px !important;
	height:90px !important;
	line-height:90px !important;
	overflow: hidden !important;
	overflow-y:hidden !important;
	overflow-x:hidden !important;
	position:relative;
}

.scroller
{
	background-image: url(../images/menuimage.jpg);
	position:relative;
	left:0px;
	width:1200px;
}

.scroll_left
{
	background-image: url(../images/menuleft.png);
	position:absolute;
	float:left;
	left:0px;
	top:0px;
	width:45px;
}
.scroll_right
{
	background-image: url(../images/menuright.png);
	position:absolute;
	float:left;
	left:855px;
	top:0px;
	width:45px;
}


/*
 * Contact Area
 *
 * P.CONTACT: Arial text, 10pt font. Color is blue; background is white. Padding, margins 0, except for left and right margins
 *            which are -5px to ensure that the contact fills out to the 900 px (instead of 890). Text is centered, and floats
 *            are cleared.
 * .A, .A.HOVER: Styles for links within the contact area. When hovered, the link is underlined and colored darker blue.
 *
 *********************************************************************************************************************************/
 

P.contact
{
     Font-Family: Arial, Helvetica, Sans-Serif;
     Font-Size:10pt;
     Font-Weight: Normal;
     Color: #567;
     Background-Color: #F0F0F0;
     Padding:0px;
     Margin:0;
     margin-left:-5px;
     margin-right:-5px;
     margin-bottom:0;
     text-align: center;
     clear:both;
     border-top:1px solid #000;
     border-bottom:1px solid #E0E0E0;
}
P.contact A
{
     Text-Decoration:none;
     Color:#567;
}
P.contact A:HOVER
{
 	Text-Decoration:underline;
 	color:#248;
}


/*
 * Right-hand Site Menu
 *
 * .SITEMENU: Defines the general area; 200px wide, floated right
 * DIV.glass: The links within the sitemenu are styled "glassy", hence the name. The DIV surrounds the inner A, and provides the
 *            the constraints. 200px, 10px margins, except 5 on left and 0 on right (to ensure it butts up against the edge), 
 *            42px height (32px for centering), and hidden overflow. The background image is actually the selected image - this
 *            is because IE is nuts, again (who'd've thunk it?). This prevents flickering when the anchor is hovered over, because
 *            the anchor doesn't change the image - it just makes itself transparent, allowing this image to appear. Also, because
 *            IE is nuts, the position is relative and butted over 5px.
 * A.glass:   The actual anchor, styled with glass. Padding is 5px except left (20px). Overflow is hidden, and the color is white.
 *            No text underline.
 * A.glass:hover:
 *            Transparent, as above, allows the underlying DIV's image to show through, and no flicker :-)
 *
 * A.offsite: If the anchor is offsite, replace with the offsite image.
 * A.offsite:hover:
 *            Hover image. Yes, this one will flicker, but it's not used at all right now (and even if so, infrequently).
 * A.selected:Indicates that the link is selected. The left padding becomes apparent, because the graphic has a wide bar on the
 *            left to offset it from the remaining links.
 * A.selected:hover:
 *            Same transparent trick as glass:hover.
 * 
 *
 *********************************************************************************************************************************/
 

DIV.sitemenu
{
    float:right;
    width:200px;
}
DIV.sitemenu DIV.glass
{
    DIsplay:Block;
    Width:200px;
    Margin:10px;
    Margin-Left:5px;
    Margin-Right:0px;
    Background-Color:#248;
    Line-Height:32px;
    Height:42px;
    Overflow:hidden;
    Background-Image: url(../images/menubutton_select.gif);
}
DIV.sitemenu A.glass
{
    DIsplay:Block;
    Overflow:hidden;
    Padding:5px;
    Padding-Left:20px;
    Color:#FFF;
    Text-Decoration: None;
    Background-Image: url(../images/menubutton.gif);
}
DIV.sitemenu A.glass:HOVER
{
    background-image: none;
    background-color: transparent;
    Color:#248;  
}

DIV.sitemenu A.offsite
{
    background-image: url('../images/menubutton_offsite.gif');
}
DIV.sitemenu A.offsite:HOVER
{
    background-image: url('../images/menubutton_select_offsite.gif');
}

DIV.sitemenu A.selected
{
    Background-Image: url(../images/menubutton_current.gif);
    Background-Color: #E5E0A9;
    Color:#248;
}
DIV.sitemenu A.selected:HOVER
{
    background-image: none;
    background-color: transparent;
}

/*
 * Footer
 *
 *********************************************************************************************************************************/
div.footer
{
    clear:both;
    font-size:70%;
    color:#444;
    margin:-5px;
    margin-top:5em;
    padding-bottom:2em;
    padding-top:5px;
    border-top:1px dotted #567;
    background-color:#F0F0F0;
    line-height:1em;
    padding-left:25px;
    padding-right:25px;
}
div.footer A, div.footer A:LINK, div.footer A:VISITED
{
    color:#567;
    text-decoration:none;
}
div.footer A:HOVER
{
    text-decoration:underline;
}

div.footer div.quicklinks, div.footer div.icons, div.footer div.sitedesign
{
    float:left;
    width:187px;
    line-height:1.5em;
    padding-right:25px;
    
}
div.footer div.sitedesign
{
	padding-right:0px;
	width:212px;
}
div.footer div.quicklinks A, div.footer div.quicklinks A:link
{
    display:block;
    border-bottom:1px dotted #567;
    letter-spacing:2px;
    text-decoration: none;
}

div.footer div.quicklinks A:hover
{
    border-bottom:1px solid #567;
    background-color:#E0E0E0;
    text-decoration: none;
}
div.icons A, div.icons A:LINK
{
	display:block;
	text-decoration:none;
	border:0;
}
div.icons A img
{
	border:0;
}
div.footer h6
{
	margin:0;
	font-size:110%;
	color:#888;
	font-weight:bold;
	line-height:2em;
	letter-spacing:3px;
}
div.footer div.key
{
     clear:both;
     line-height:1.5em;
     padding-left:50px;
     padding-right:50px;
}

/*
 * Main Content Styles
 *
 * .text:         Specifies default formatting for the text - 1.25em line height, and justified text.
 * .innertext:    The text left of the menu is 650px wide, 20px margins, 10px padding
 * .innertext H1: The large headings for text; styled glass, green right border, black bottom border. Text is Georgia, with .5
 *                margen on top and bottom. 15px padding, white color, and blue background. Font size is 2em. Clears on the left
 *                and height is 50px.
 * .innertext H2: The smaller headings; colored gray, underlined same color, 3px padding (except left), Margin bottom is .5 em
 *                and font is Georgia. Line height is much smaller, .5em (.55em for IE)
 * .innertext H3: Much smaller headings; blue and bold.
 * .innertext H3+P: Ensures paragraphs butt up against h3 (for non IE browsers)
 * .innertext blockquote: Styles the quote a blue color, indented margins, and a quote graphic behind the text.
 * .innertext blockquote.noquotes: Overrides the quote graphic. Intended for short block quotes.
 * .innertext table: Brings the font size of the tables down to a more reasonable size
 *
 *********************************************************************************************************************************/

DIV.text
{
    line-height:1.25em;
    text-align:justify;
}
div.innertext
{
    Width:650px;
    margin-left:20px;
    padding-top:10px;
}

.innertext H1
{
    Background-Color:#248;
    Color:#FFF;
    Padding-Left:15px;
    Margin:0;
    margin-top:0.5em;
    Margin-bottom:0.5em;
    Font-Weight:Normal;
    Font-Family: Georgia, Times New Roman, Serif; 
    Font-Size:2em;
    clear:left;
    Height:50px;
    Line-Height:50px;
    Background-Image:url(../images/h1.gif);
}
.innertext H2
{
    Color: #555;
    border-bottom:1px solid #555;
    Padding:3px;
    Padding-Left:0px;
    Margin:0;
    Margin-bottom:0.5em;
    Font-Weight:Normal;
    Font-Family: Georgia, Times New Roman, Serif; 
    Font-Size:1.5em;
    line-height:0.5em;
    clear:left;
}
.innertext H3
{
	Font-size:12pt;
	Font-Weight:Bold;
	Margin:0px;
	Margin-Bottom:0;
	Color:#576;
}
.innertext H3 + p
{
    margin-top:0px;
}

.innertext blockquote
{
	background-image: url('../images/quote.gif');
	background-repeat: no-repeat;
	background-position:  8px 4px;
	color:#567;
}
.innertext blockquote.noquotes
{
    background-image: none !important;
}

.innertext TABLE
{
	text-align:justify;
	font-size:90%;
}


/*
 * General Anchors
 *
 * .offsite: Offsite anchor - offsite gif applied
 * .pdf:     pdf anchor - pdf gif applied
 *
 *********************************************************************************************************************************/

A.offsite
{
    background-image: url('../images/offsite.gif');
    background-repeat: no-repeat;
    background-position: top left;
    padding-left:16px;
    line-height:16px;
    
}

A.pdf
{
    background-image: url('../images/pdf.gif');
    background-repeat: no-repeat;
    background-position: center left;
    padding-left:24px;
    line-height:24px;
}

/*
 * Drop Text
 *
 * .DROP is applied to the first letter of certain paragraphs. It is very finicky, hence the overrides for IE over non-IE browsers.
 * Even so it'll never be perfect, but it looks good.
 *
 *********************************************************************************************************************************/

.drop
{ 
    font-size:2.9em !important;
    line-height:1.15em;
    float:left;
    font-weight:bold;
    margin-top:-0.10em;
    margin-bottom:-0.3em;
    color:#576;
}

/*
 * Photos
 *
 * The site uses two photo sizes: normal-sized and small. .photo is the larger size; .small_photo is the smaller size.
 * .small_photo can accept internal .captions; they are placed at the bottom of the image and partially transparent.
 *
 *********************************************************************************************************************************/


.photo
{
    background-image: url('../images/no_photo.gif');
    background-repeat: no-repeat;
    width:296px;
    padding:12px;
    height:222px;
    line-height:222px;
    overflow:hidden;  
    margin-right:5px;
    margin-left:5px;
    margin-bottom:1em;
}
.small_photo
{
    background-image: url('../images/no_photo_sm.gif');
    background-repeat: no-repeat;
    width:220px;
    padding:10px;
    padding-top:11px;
    height:162px;
    line-height:162px;
    overflow:hidden;  
    margin-right:3px;
    margin-left:3px;
}
.small_photo IMG
{
	width:220px;
	height:162px;
}

.small_photo .caption
{
	background-color:#000;
	color:white;
	text-align:center;
	width:220px;
	position:relative;
	top:-20px;
	left:0px;
	height:20px;
	line-height:20px;
	font-size:14px;
	opacity:0.65;
}

/*
 * Sidebar Content
 *
 *********************************************************************************************************************************/      

div.sidebar_events
{
    width:100%;
    margin-top:1em;
    font-size:75%;
}
div.sidebar_events .events
{
    width:100%;
    color:#555;
    font-size:8pt;
    padding:3px;
    margin-left:5px;
    margin-right:-5px;

}
div.sidebar_events .events .caption
{
    display:none;
}
div.events
{
    width:100%;
    margin-bottom:1em;    
}
div.events .caption
{
    font-size:90%;
    text-align:justify;
    padding-left:1em;
}
.events td
{
    vertical-align:top;
}

.sidebar_events h2
{
    background-color:#567;
    color:white;
    padding:2px;
    text-align:center;
    margin:0;
    margin-top:1.5em;
    margin-left:5px;
    margin-right:-5px;
    font-size:10pt;

}

/*
 * Specialized Styles
 *
 * .messageline: styled red on light-red; used to indicate problems on forms. 
 * .linksbar:    used to indicate internal links on the page (see resources page)
 * .linksbar A, hover: appropriate styling for the linksbar
 * .backtotop:   used to provide a "Top" link back to the top of the page
 * .footerbacktotop: the last "top" link has different styling to make it look right
 *    hover:     underlines back to top links when hovered
 *
 *********************************************************************************************************************************/


.messageline
{
    Background-Color:#F8F0E8;
    Color:#840;
    Padding:3px;
    Margin:0;
    Margin-top:1em;
    margin-bottom:1em;
    Font-Weight:Normal;
    Font-size:100%;
    text-align:center;
}
.linksbar
{
    Color:#124;
    Padding:3px;
    Margin:0;
    Margin-top:1.5em;
    margin-bottom:1.5em;
    Font-Weight:bold;
    Font-Size:80%;
    text-align:center;             
}
.linksbar A
{
    color:#369;
    text-decoration:none;
}

.linksbar A:HOVER
{
    text-decoration:underline;
}

.backtotop
{
    Color:#576;
    Padding:3px;
    Margin:0;
    Margin-top:0.5em;
    margin-bottom:0.5em;
    Font-Weight:bold;
    Font-Size:70%;
    text-align:right;
    display:block;
    text-decoration:none;
    clear:left;
}

.footerbacktotop
{
    Color:#576;
    Padding:3px;
    Margin:0;
    Margin-top:0.5em;
    margin-bottom:0.5em;
    Font-Weight:bold;
    Font-Size:70%;
    text-align:right;
    display:block;
    text-decoration:none;
    clear:both;
}

.backtotop:HOVER, .footerbacktotop:HOVER
{
    text-decoration:underline;
}


/*
 * Ad Rotator
 *
 * The ad rotator is used on the main page. 
 *
 *********************************************************************************************************************************/


.adrotator
{
	width:650px;
	height:350px;
	background-color:black;
}

.adarea
{
	width:648px;
	height:308px;
	position:relative;
	top:1px;
	left:1px;
	background-color:#444;
	background-image: url('../images/loading444.gif');
	background-repeat: no-repeat;
	background-position: center center;
}

.adselect
{
	text-align:center;
	width:648px;
	height:39px;
	border-top:1px solid #444;
	position:relative;
	top:1px;
 	left:1px;
 	z-index:1;
}
.adselect A, .adselect A:VISITED, .adselect A:LINK
{
	margin-top:10px;
	margin-left:10px;
	border:1px solid #888;
	color:#CCC;
	font-size:90%;
	height:20px;
	padding-left:5px;
	padding-right:5px;
	display:block;
	float:left;
	text-decoration:none;
}
.adselect A:HOVER, .adselect A.select
{
	border-color:#FFF;
	color:#FFF;
	background-color:#248;
}
.adarea img
{
	border:none;
	margin:0;
	padding:0;
	width:648px;
	height:308px;
}
.ad
{
	width:648px;
	height:308px;
	display:none;
	position:absolute;
	z-index:1;
}
.ad .caption
{
	position:absolute;
	top:318px;
	right:10px;
	color:#CCC;
	z-index:2;
}
.ad A
{
	text-decoration:none;
}
.adtext
{
	color:white; 
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	padding-top:15px;
	padding-right:15px;
	padding-left:415px;
	overflow:hidden;
	height:293px;
	text-decoration:none !important;
	cursor: hand;
}


/*
 * NCN RSS feed (home page only)
 *
 *********************************************************************************************************************************/


.Article
{
	padding-bottom:5px;
}
.ArticleLink
{
	text-decoration: none;
}


.ArticleDate
{
	display:none;
	color:#888;
	font-size:80%;
}

.NazNews
{
    text-align:left;
	Border:1px solid #888;
	Border-right:none;
	Background-color:#F0F0F0;
	line-height:1.25em;
	font-size:80%;
    Display:Block;
    Width:189px;
    Margin:10px;
    Margin-Left:5px;
    Margin-Right:0px;
    Padding:5px;
}

.NazNews H6
{
	font-weight:bold;
	border-bottom:1px solid #888;
	font-size:110%;
	margin:0;
	margin-bottom:5px;
}

/*
 * Calendar Styles
 *
 *********************************************************************************************************************************/

  		TABLE.Calendar
  		{
  			border:1px solid #888;
  			font-family: arial, helvetica, serif;
  			font-size:85%;
  		}
  		TABLE.small
  		{
  			width:200px;
		    Margin-Left:5px;
		    Margin-Right:0px;
  			
  		}
  		TABLE.Calendar TABLE
  		{
  			font-size:85%;
  		}
  		
  		TABLE.Calendar TABLE TD
  		{
  			vertical-align:top;
  			text-align:left;
  			padding-left:5px;
  			padding-right:5px;
  		}	
  		.gray
  		{
  			background-color:#EEE !important;
  		}
  		TABLE.Calendar TH
  		{
  			text-align:center;
  		}
  		TABLE.Calendar TH A
  		{
  			text-decoration:none;
  			color:white !important;
  		}
  		TR.Month
  		{
  			background-image: url('../images/menubutton.gif');
  			color:white;
  		}
  		TR.Days
  		{
  			background-image: url('../images/menubutton.gif');
  			background-position: -1.5em left;
  			color:white;
  		}
  		TR.big
  		{
  			height:80px;
  			vertical-align:top;
  		}
  		TD.small
  		{
  			text-align:center;
  		}
  		TD.big
  		{
  			width:90px;
  			height:90px;
  			overflow:hidden;
  			align:left;
  			background-color:#FFF;
  			border:1px solid #CCF;
  		}
  		.Calendar DIV.Content
  		{
  			width:90px;
  			height:80px;
  			overflow:hidden;
  			text-align:left;
  			text-decoration:none;
  			color:#333;
  		}  
  		DIV.today
  		{
  			font-weight:bold;
  			color:red !important;
  		}		
  		
  		DIV.dayContent
  		{
  			text-align:left;
  			text-decoration:none;
  			color:#333;
  			background-color:#F8F8F8;
  		}
  		TD.day A.dayHover DIV.dayContent
  		{
  			display:none;
  		}
  		TD.day A.dayHover:HOVER DIV.dayContent
  		{
  			position:absolute;
  			display:block;
  			width:200px;
  			height:100px;
  			border:1px solid #888;
  			padding:5px;
			margin-left:-100px;
			margin-top:-0.1em;
			overflow:auto;
			overflow-x:hidden;
			overflow-y:auto;
  		}
  		
  		TABLE.AgendaItem
  		{
  			Margin-left:15px;
  			Margin-Bottom:1em;
  			text-align:left;
  		}
  		TABLE.AgendaItem TD
  		{
  			vertical-align:top;
  			padding-left:5px;
  			padding-right:5px;
  		}
  		TD.time
  		{
  			width:3em;
  		}
  		TD.allday
  		{
  			font-weight:bold;
  		}


/*
 * Miscellaneous
 *
 *********************************************************************************************************************************/

.series_head
{
	color: #576;
	border-bottom:1px solid #888;
}
.media
{
    padding-left:5px; 
    padding-right:5px; 
    background-color:#E5E0A9;
}
.GoogleCSE
{
	margin-top:15px;
	padding-left:5px;
	text-align:center;
}