/*======================================*
** rp-stylesheet.css
** ------------------------------------------------------------*
** Created: 010908 
** Author: M Murphy 
**======================================*/


/*------------------------------------------------------------*
**  Global
**------------------------------------------------------------*/
body {
	background: #9A99FF url(../img/grad.jpg) repeat-x;	 /* The whole screen is given a background colour #9A99FF" which
															is light blue. "grad.jpg" is a long, thin vertical strip with
															colour changing from dark blue at top to light blue at bottom.
															The strip height is 498 pixels. "repeat-x" repeats this
															horizontally across the width of the screen. This repeated image
															is planted on the screen, at the top, thus filling the top 
															of the screen. The bottom of the screen has the same colour as
															the light blue at the bottom of the grad.jpg strip, so the
															bottom of the screen merges seamlessly with the top. */
	font-family: Geneva, Arial, Helvetica, sans-serif;	/* Controls the font of all the writing on all pages
															- Geneva should be the one used, automatically. */
	text-align: center;
	margin: 0; 		/* A figure of 20px here would move everything down by 20 pixels. */
	padding: 0; 	/* A figure of 20px here would also move everything down by 20 pixels. */
	color: #555; 	/* Colour (grey) of almost all of the text on all pages. */
	}
img { border: 0; padding: 2%}	/* For all images unless over-ridden. */
ul,p { line-height: 17px; font-size: 13px; margin: 10px 0; }  /* For unordered lists and paragraphs. */
h2 { margin: 0; color: #fff; font-weight: normal; padding: 45px 170px 40px 10px; font-size: 26px; }
h3 { font-size: 20px; font-weight: normal; color: #000; margin: 0; padding-left: 7px }
h4, h5 { font-weight: normal; color: #000; margin: 0; }
h4 { font-size: 16px; padding-left: 10px }
h5 { font-size: 14px; }
a { color: #339; text-decoration: none;  }	/* Colour (blue) of the text in links to other pages (excluding main menu links
												above the page). */		
a:hover { border-color: #06c; text-decoration: underline;}	/* Does this affect any actual links?? */
.l1 { border: none !important; margin: 0 !important; }

ul { 
	padding: 0;
	list-style-type: none;
	line-height: 1.4em;
	margin: 5px 0 15px ; 
	}

		
/*------------------------------------------------------------*
**  Container
**------------------------------------------------------------*/		
#container {
	width: 995px;	/* Controls the width of the page (main panel + side panel). */
	margin: 0 auto;
	text-align: left;
	}
* html #container { width: 40px; }	
	
/*------------------------------------------------------------*
**  Header
**------------------------------------------------------------*/			
#header { width: 780px; background: url(../img/dove2.jpg) no-repeat 0% 30px; padding: 10px 0 50px;
	 }										/* This puts the dove image at top left of screen. */
#header:after	{ 
	content: "."; 
	display: block; 
	clear: both; 
	visibility: hidden; 
	height: 0;
	}
/* Controls font and position of header h1 "Dunhill & Fenor Parish" at top of screen. */
#header h1 { font-weight: normal; font-size: 30px; padding: 13px 0 0px 120px; margin: 0; }
/* This makes h1 headers into links (why?) and colours the text white. */
#header h1 a { color: #fff; text-decoration: none; border: none; }

/* Controls font and position of header h2 "Co. Waterford, Ireland" at top of screen. */
#header h2 { font-weight: normal; font-size: 15px; padding: 0 0 0 160px; margin: 0;  }
/* This makes h2 headers into links (why?) and colours the text white. */
#header h2 a { color: #fff; text-decoration: none; border: none; }


/** Navigation **/
#container{margin:auto;font-size:11pt;}
#menu{position:absolute; margin:24px 0 0 240px;}	/* Controls the position of the main top-of-page menus. */
#menu ul{width:120px;float:left;margin:0px;padding:1px;list-style:none;}
#menu ul li { 
	float: left;
	text-align: center;			/* Controls text alignment in the main top-of-page menus. */
	background: transparent;	/* Text (white) appears against the blue background. */
	padding: 0;
	width:120px;   				/* Controls the width of the main top-of-page menus. */
	}	
#menu ul li a { 
	display: block;
	text-decoration: none; 
	color: #fff; 			/* Controls the colour (white) of the text in the main top-of-page menus. */
	padding: 5px 5px;		/* Controls the padding around the text in the main top-of-page menus. */
	font-size: 15px;		/* Controls the size of the text in the main top-of-page menus. */
	}	
#menu ul li a:hover {  border-bottom: 2px solid #fff;	 }	/* Controls the size of the border immediately below the text in
															the main top-of-page menus when hovered over */
#menu ul li a.on,
#menu ul li a.on:hover { border-color: #fff; }
#menu ul li a:selected {  border-bottom: 2px solid #fff;	 }	
		
#menu ul .item {display:none;}
#menu ul:hover .item{display:block;background:#9A99FF; border-top: 5px solid #fff;}
#menu ul:hover .item a{color:#fff;text-decoration:none; line-height: 14px; background:#9A99FF; font-size: 12px;}
#menu ul:hover .item a:hover{color:#06c; }
.clear{clear:both;height:10px;}

#menu #item1 {width: 120px;}
#menu #item2 {width: 120px;}
#menu #item3 {width: 120px;}
#menu #item4 {width: 120px;}
#menu #item5 {width: 120px;}


/*------------------------------------------------------------*
**  Body
**------------------------------------------------------------*/
/* Provides the grey border across the top of the page */
#body { background: #fff url(../img/body_.jpg) repeat-x; }
/* Provides the top left corner for the grey border across the top of the page */
#body div { background: transparent url(../img/body_left.jpg) no-repeat; }
/* Provides the top right corner for the grey border across the top of the page */
#body div div { background: transparent url(../img/body_right.jpg) no-repeat 100% 0%; height: 1%; padding: 0 20px 30px; }
* html #body div div { width: 100%; }
#body div div:after	{ 
	content: "."; 
	display: block; 
	clear: both; 
	visibility: hidden; 
	height: 0;
	}	
#body div div div { background-image: none; padding: 0; }

/*------------------------------------------------------------*
**  Content
**------------------------------------------------------------*/
#body #content { 
	float: right; 
	height: auto !important;
	min-height: 300px; 
	height: 300px;
	width: 690px;	/* Controls the width of the main panel. */
	background: #fff url(../img/content_shadow.jpg) no-repeat;	
	padding: 23px 25px 0 38px;
	}
#body #content ul.img { list-style-type: none; padding: 0; margin: 0; width: 100%; }	
#body #content ul.img:after	{ 
	content: "."; 
	display: block; 
	clear: both; 
	visibility: hidden; 
	height: 0;
	}	
#body #content ul.img li { float: left; display: block; margin-left: 10px; margin-bottom: 10px; padding: 0; background: transparent; }
#body #content ul.img li a { border: none; }
#body #content ul.img li img { border: 7px solid #9A99FF; padding: 1px; margin: 0 5px;}	
#body #content ul.img li a:hover img { border-color: #039; }	

#body #content table { background-color: #f4f4f4; width: 100%; margin: 5px 0 20px 0;}
#body #content td { padding: 10px; text-align: left; vertical-align: top; }
#body #content td.right { width: 200px;}

#body #content p { padding-left: 10px; }

#body #content ul { 
	list-style-type: disc;
	}

form { background-color: #f4f4f4; padding: 20px; margin-top: 20px;  }
form p { margin: 10px 0; }
form p label { width: 100px; display: block; float: left; }
form p input, 
form p textarea { border: 1px solid #999; padding: 4px; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 1.3em; width: 240px; }
textarea { height: 100px; } 
input.btn { width: auto; }
	
/*------------------------------------------------------------*
**  Breadcrumb
**------------------------------------------------------------*/
#body #content .breadcrumb {  
	background-color: #039; 
	background-repeat: repeat-y; 
	margin-bottom: 20px;
	}

/** specific pages **/
#body #content .home { background: #039 url(../img/header_home.jpg) no-repeat 100% 0; }
#body #content .parish-life { background: #039 url(../img/header_life.jpg) no-repeat 100% 0; }
#body #content .parish-teams { background: #039 url(../img/header_team.jpg) no-repeat 100% 0; }
#body #content .communicating { background: #039 url(../img/header_comm.jpg) no-repeat 100% 0; }
#body #content .information { background: #039 url(../img/header_who.jpg) no-repeat 100% 0; }
#body #content .contact-us { background: #039 url(../img/header_contact.jpg) no-repeat 100% 0; }

/*------------------------------------------------------------*
**  Submenu
**------------------------------------------------------------*/
#body #sub { 
	float: left; 
	margin: 33px 0 0 0;		
	background-color: #fff; 
	height: auto !important;
	min-height: 267px; 
	height: 267px;
	width: 172px;
	padding: 10px 10px 0 20px;
	}
#body #sub h4 { padding: 0; } 

#body #sub ul li { background: url(../img/bullet.gif) no-repeat 0% 52%; padding-left: 25px; }	/* For lists in left column */


#body #sub div.img img { 
	border: 7px solid #9A99FF; padding: 1px; 	
	width: auto; margin-bottom: 10px;  }

#body #sub .newsbox {
background-color: #EFEFFF;
border: 1px solid #9A99FF;
width: 100%;
margin: 0 0 10px 0;
}

#body #sub .newsbox ul {
margin: 3px;0;
}

#body #sub .newsbox li {
background: none;
padding: 0 4px;
font-size: 12px;
line-height: 14px;
}
#body #sub .newsbox li.date {
text-align: right;
font-size: 11px;
color: #9A99ff;
padding-bottom: 2px;
}
#body #sub .newsbox h5 {
padding: 4px ;

/*------------------------------------------------------------*
**  Footer
**------------------------------------------------------------*/
#footer { 
	width: 900px;
	background: transparent url(../img/footer_.gif) repeat-x;
	}
#footer a { border: none; }	
#footer p { color: #fff; padding: 10px; margin: 0; }
#footer span { float: right; margin: 0 10px 0 0; }