@charset "utf-8";

/* ----------------------------------------------------------------------------------

CSS STYLESHEET
--------------
WEBSITE: The Roman Catholic Diocese of Helena, MT
URL: www.diocesehelena.org
DESCRIPTION: Official website of the Catholic Diocese of Helena, MT
VERSION: 2.0
WEB DESIGNER: Brooke Thomas
PROJECT DIRECTOR: Renée St. Martin-Wizeman


INDEX:
--------------------------------------------------------------------------------------
- BODY (defaults)
- FONTS & IMAGES (defaults)
- TABLES (defaults)
- MAIN TABLE 
- HEADER (logo & title)
- TOP NAVIGATION (links & search)
- IMAGE BANNER
- SPRY HORIZONTAL MENU & SUBMENU
- PAGE (container for sidebar & content)
- SIDEBAR
- CONTENT
- FOOTER
------------------------------------------------------------------------------------- */


/* HTML (defaults)
---------------------------------------------------------- */

* {margin:0;padding:0;border:none;}

html {overflow-y:scroll;height:100%;}  /* forces vertical scrollbar in FF - eliminates 'shifting' of alignment in FF  */  


/* BODY (defaults)
---------------------------------------------------------- */
body {
	height:100%;
	font-size:100%;
	color:#111;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#A4C6CF;
	background-image:url(../_images/website/bodybg.jpg);
	background-repeat:repeat-x;
	margin:0;
} 


/* FONTS & IMAGES (defaults)
---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {font-family:Georgia, "Times New Roman", Times, serif;font-variant:small-caps;text-transform:none;line-height:1;} /* default styles for all headings */
h1 {font-size:36px;font-weight:normal;color:#D6E7ED;margin:0 20px 5px -7px;text-align:center;vertical-align:middle;} /* Website heading */
h2 {font-size:22px;font-weight:bold;color:#333;margin:0 0 5px 0;} /* Page heading */
h3 {font-size:18px;font-weight:600;color:#333;margin:0 0 5px 0;} /* Sidebar heading */
h4 {font-size:18px;font-weight:bold;color:#D6E7ED;margin:2px 8px 0 0;text-align:center;} /* Website subheading */
h5 {font-size:13px;font-weight:bold;color:#555;text-transform:uppercase;margin:0 0 5px 1px;} /* Page subheading */
h6 {font-size:18px;font-weight:normal;color:#555;font-family:Arial, Helvetica, sans-serif;font-variant:normal;margin:0 0 10px 0;line-height:20px;} /* Content subheadings */
img {margin:0;padding:0;border:0;text-align:center;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {float:left;margin:0 10px 10px 0;padding:3px;border:1px solid #000;} /* images placed within heading tags */
p {font-size:13px;margin:0;} /* regular paragraph text (page content) */
p.right {text-align:right;}
p.center {text-align:center;}
p img {float:left;margin:0 10px 10px 0;padding:3px;border:1px solid #000;} /* images within p tags, left-positioned */
p img.right {float:right;margin:0 0 10px 10px;} /* images within p tags, right-positioned */
p img.noborder {border:none;padding:0;margin:-5px 2px 2px 2px;}
a {color:#64301E;text-decoration:none;} /* links */
a:focus {color:#AE5402;} /* highlighted links (current section/page) */
a:hover {color:#AE5402;} /* mouse-over effects for links */
a:visited {color:#64301E;} /* visited links */
blockquote {margin:0;margin-left:15px;color:#333;font-style:italic;font-size:13px;} /* quote / excerpt */
cite {float:right;padding-right:20px;color:#111;font-size:13px;font-style:italic;} /* quote citation */
address {margin:10px 0 0 20px;font-size:13px;font-style:normal;} /* address (if you want it indented) */
b {font-weight:bold;color:#444} /* bold text */
em {font-style:italic;} /* italic text */
abbr, acronym {border-bottom:1px dotted #666;}
li ul, li ol {font-family:Georgia, "Times New Roman", Times, serif;margin:0 1.5em;} /* individual list items */
ul, ol {font-family:Arial, Helvetica, sans-serif;position:relative;vertical-align:top;} /* ordered and unordered lists */
ul {list-style-type:disc;} /* unordered lists */
ol {list-style-type:decimal;} /* ordered lists */

span.small {font-size:10px;font-weight:normal;}
span.author {font-size:12px;font-weight:normal;font-style:italic;}
.center {text-align:center;}
.right {text-align:right;}
.cite {text-align:right;padding-right:20px;color:#111;font-size:13px;font-style:italic;} /* quote citation */
.side {display:inline;}


/* DIVS (defaults) 
---------------------------------------------------------------- */

.borderbottom {border-bottom:1px dotted #000;padding-bottom:10px;margin-bottom:10px;height:auto;}
.floatleft {width:100%;float:left;clear:both;display:inline;}
.lastupdated {margin:0 auto;width:auto;text-align:center;font-style:italic;}
.clearboth {clear:both;}
.invisible {color:#CCE1E4;}  /* use this to expand elements with 'width:auto' (that aren't filled) to fill their container */


/* TABLES (defaults) 
---------------------------------------------------------------- */

table {
width:auto; /* this keeps it from messing up the sidebar/content area widths */
margin:auto; /* this centers the main table */
padding:0; /* this makes padding = 0 */
border-collapse:collapse; /* this makes cell-spacing = 0 */
}

td {margin:0;padding:0;border-collapse:collapse;}
th {margin:0;padding:0;border-collapse:collapse;}
tr {margin:0;padding:0;border-collapse:collapse;}
tbody {}
tfoot {}
caption {}


/* MAIN TABLE (fixed-width, contains all tables except footer) 
---------------------------------------------------------------- */
.maintable {
width:780px;
height:auto;
margin:0 auto;
border-left:1px solid #000;
border-right:1px solid #000;
background-color:#CCE1E4;
background-image:url(../_images/website/containerbg.jpg);
background-repeat:repeat-x;
}


/* HEADER (top blank bar) 
---------------------------------------------------------- */
.topbar {
height:26px;
width:780px;
background-color:transparent;
margin-bottom:7px;
}


/* TOP NAVIGATION (links & search bar) 
------------------------------------------------------------- */
#topnav {
width:780px;
height:23px;
margin-top:5px;
margin-bottom:5px;
vertical-align:middle;
background-color:transparent;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}

#topnav #home {
width:auto;
text-align:right;
border-right:1px dotted #000;
}

#topnav #contact {
width:69px;
text-align:center;
border-right:1px dotted #000;
}

#topnav #directory {
width:78px;
text-align:center;
border-right:1px dotted #000;
}

#topnav #search {
width:66px;
text-align:center;
border:none;
}

#topnav td a {
color:#111;
display: block;
padding:4px 5px 4px 9px;
}

#topnav td a:focus, #topnav td a:hover {
color:#111;
display:block;
background-color:#BAD6DA;
}

#topnav #home a:focus, #topnav #home a:hover {
color:#111;
}


/* HEADER IMAGE BANNER 
---------------------------------------------------------- */
.header {
background-image:url(../_images/headers/header2.jpg);
background-repeat:no-repeat;
background-position:top center;
position:relative;
height:110px;
width:780px;
padding:0;
margin:0;
}

.header a {
float:left;
clear:right;
height:auto;
width:auto;
padding:0;
margin:0;
}

.header a img {
float:left;
clear:right;
height:110px;
width:780px;
padding:0;
margin:0;
}



/* SPRY HORIZONTAL MENU & SUBMENU
---------------------------------------------------------- 
(Separate stylesheet: SpryMenuBarHorizontal.css)           */


/* PAGE (container for sidebar & content) 
---------------------------------------------------------- */
.page {
width:780px;
height:auto;
margin-top:37px;
background-color:transparent;
position:relative;
}


/* SIDEBAR 
---------------------------------------------------------- */
.sidebar {
width:169px;  /* add l+r padding, borders, margins to this width to determine actual width it takes up within container */
max-width:169px;
min-width:169px;
height:auto;
border-right:1px dotted #333;
padding:20px 20px 33px 20px;
vertical-align:top;
position:relative;
overflow:hidden;
}

.sidebar ul {
padding:0; /* this corrects a huge margin discrepancy between IE and other browsers */
margin-left:0; /* this indents the list */
margin-top:5px;
margin-bottom:22px;
line-height:17px;
list-style-type:none;
font-family:Arial, Helvetica, sans-serif;
font-weight:500;
font-size:12px;
}

.sidebar li {
border-bottom:1px dotted #444;
padding:2px 0;
}

.sidebar a {
	margin-top:10px;
	color:#64301E;
}

.sidebar a:hover, .sidebar a:focus {
	color:#B95837;
}

.sidebar li.current a {
	color:#9E3B19;
	font-style:italic;
}

.sidebar ul.twolevel {
color:#5A2B1B;
}

.sidebar ul.twolevel li, .sidebar ul.twolevel li ul {
margin-left:3px;
border-bottom:none;
padding-bottom:3px;
font-weight:bold;
}

.sidebar ul.twolevel li ul li {
border-bottom:1px dotted #333;
font-weight:normal;
}

.sidebar img {
width:161px;
max-width:161px;
margin:0;
margin-bottom:15px;
padding:3px;
border:1px solid #000;
display:block;
}

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

.sidebar ul.multimedia li {
background-repeat: no-repeat;
background-position: left center;
padding-left:44px;
height:44px;
font-weight:bold;
}

.sidebar h3.multimedia {margin-bottom:15px;}
.sidebar ul.multimedia li h3 {padding-top:13px;font-size:16px;}

.sidebar ul.multimedia li.newmm {background-image:url(../_images/website/icons/bullet-newmm.png);}
.sidebar ul.multimedia li.audio {background-image:url(../_images/website/icons/bullet-audio.png);}
.sidebar ul.multimedia li.video {background-image:url(../_images/website/icons/bullet-video.png);}
.sidebar ul.multimedia li.photo {background-image:url(../_images/website/icons/bullet-photo.png);}
.sidebar ul.multimedia li.slide {background-image:url(../_images/website/icons/bullet-slide.png);}
.sidebar ul.multimedia li.exhibit {background-image:url(../_images/website/icons/bullet-exhibit.png);}


/* CONTENT 
----------------------------------------------------------- */
.content {
width:550px; /* add l+r padding, borders, margins to this width to determine actual width it takes up within container */
max-width:550px;
height:auto;
padding:17px 10px 33px 10px; 
vertical-align:top;
position:relative;
} 

.content img.contentlogo {border:none;padding:0;} /* logos within content area */
.content img.noborder {border:none;padding:0;margin:-5px 2px 2px 2px;} /* note: doesn't work if within <p> tags */
.content img.centered {margin:0 auto;} /* note: doesn't work if within <p> tags */

.content p img {
float:left;
max-width:515px;
margin:2px 12px 3px 0;
padding:3px;
border:1px solid #000;
}

.content p img.right {
float:right;
margin:3px 3px 4px 8px;
}

.contenthead {
width:535px;
max-width:535px;
text-align:left;
background-color:transparent;
padding:0 5px 10px 10px;
border-bottom:1px dotted #333;
}

.mtc {
width:549px;
max-width:549px;
text-align:center;
background-color:transparent;
padding:0;
border-bottom:none;
}

.mtc h5 {padding:0 0 6px 0;border-bottom:1px dotted #333;margin-top:0;}
.mtc h6 {margin-top:0;padding-top:0;}
.mtc img {width:549px;max-width:549px;border:none;padding:0;}

.fullwidth {
width:99%;
max-width:99%; 
margin:0;
padding:0;
border:none;
float:left;
clear:both;
}

.fullwidth img, .fullwidth p img {display:block;margin-bottom:10px;}

.contentbody {
width:535px;  /* add l+r padding, borders, margins to this width to determine actual width it takes up within container */
font-size:13px;
line-height:17px;
background-color:transparent;
padding:15px 5px 0 10px; 
}

.contentbody ul, .contentbody ol {
padding:0; /* this corrects a huge margin discrepancy between IE and other browsers */
margin-left:20px; /* this indents the list */
margin-top:0;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
}

.contentbody ul {
list-style-type:disc;
}

.contentbody p {
margin:0;
}

/* MONTANA CATHOLIC MULTIMEDIA PORTAL-PAGE (NO SIDEBAR)
----------------------------------------------------------- */

.nosidebar .content{
width:760px;
max-width:760px;
}

.nosidebar .mtc {
width:759px;
max-width:759px;
}
.nosidebar .mtc img {width:759px;max-width:759px;}

.nosidebar .contentbody {
width:740px;
max-width:740px;
padding:15px 10px 0 10px;
}

.mtcspread { /* <-------- 3-column table of mini-teasers */
border-collapse:collapse;
position:relative;
height:auto;
width:740px;
max-width:740px;
border:none;
margin:0 auto;
padding:0;
border:1px solid #000;
}

.mtcspread tr, .mtcspread td {border:none;border-collapse:collapse;margin:0;padding:0;}

.mtcspread td, .mtcspread td a, .mtcspread td img { 
height:auto;
width:185px;
max-width:185px;
margin:0;
padding:0;
border:none;
}

.mtcspread td a, .mtcspread td img {display: block;}

.mtcspread td div {width:auto;float:left;clear:none;display:inline;}
.mtcspread td div img {width:90px;border:1px solid #000;padding:3px;margin-right:4px;}


/* TEASERS/BRIEFS (thumbnails + descriptions)
----------------------------------------------------------- */
.teaserbox { /* <-------- table containing teasers - make same width as */
width:535px;
margin:0;
padding:0;
border-collapse:collapse;
background-color:transparent;
}

.teaser { /* <-------- teaser (thumbnail + text/description) */
width:100%;
margin:0;
padding:0;
}

.teaser td { /* <-------- teaser text/description (place text within <p> or <h> tags inside the <td>) */
width:auto;
height:auto;
margin:0;
padding:10px 0 5px 0;
border-bottom:1px dotted #333;
vertical-align:top;
text-align:left;
}

.teaser td.thumb { /* <-------- teaser thumbnail image container */
margin:0;
padding:13px 10px 13px 0;
text-align:center;
}

.teaser td.thumb img { /* <-------- teaser thumbnail image (within container) */
max-width:110px;
padding:3px;
margin-top:2px;
border:1px solid #000;
}

img.smallsquare {width:50px;height:50px;}
img.square {width:100px;height:100px;}
img.news {width:110px;padding-bottom:0;margin-bottom:0;}

.teaser td h6 {margin-bottom:3px;}
.teaser td p {margin-bottom:5px;}

.teaser td.last, .teaser td.thumb .last{ /* <-------- last teaser (no bottom border) */
border-bottom:none;
}

.teaser td.first, .teaser td.thumb .first { /* <-------- first teaser (no top padding) */
padding-top:0;
}


/* MULTIMEDIA version of TEASERS/BRIEFS (icon + heading + description)
------------------------------------------------------------------------------- */
.multimedia .teaser td {
padding:6px 0 0 0;
line-height:normal;
}

.multimedia .teaser td.thumb {
width:40px;
height:auto;
padding:0;
}

.multimedia .teaser .thumb img.noborder { /* <-------- thumbnail image without border (i.e. - for icons) */
padding:0;
border:none;
}

.multimedia .teaser td p {margin-bottom:3px;}


/* CNS News Feed  (CNS script)
----------------------------------------------------------- */
.cnsfeed {width:535px;margin:auto;background-color:transparent;}
.cnsfeed td {color:#64301E;font-size:12px;font-weight:normal;text-align:left;padding:2px;}
.cnsfeed td a:hover {color:#B95837;}


/* EVENTS CALENDARS  (3-column table)
----------------------------------------------------------- */
.calendar {  
width:525px;
margin:0;
background-color:transparent;
border:1px solid #000;
line-height:25px;
}

.calendar tr.month {
background-color:#A4C6CF;
}

.calendar tr.month td {  
text-align:center;
position:relative;
border-bottom:1px solid #000;
font-size:14px;
font-weight:bold;
line-height:25px;
}

.calendar tr.categories { 
background-color:#BFDBE2;
}

.calendar tr.categories td {
border-bottom:1px solid #000;
line-height:16px;
font-size:14px;
font-weight:bold;
}

.calendar tr.data {  
background-color:transparent;
}

.calendar tr.data td {
border-bottom:1px dotted #666;
line-height:16px;
font-size:13px;
font-weight:normal;
}

.calendar td.date {
width:50px;
border-right:1px dotted #000;
padding:3px 4px 3px 6px;
}

.calendar td.day {
width:70px;
border-right:1px dotted #000;
padding:3px 4px 3px 6px;
}

.calendar td.event {
width:auto;
padding:3px 4px 3px 6px;
}


/* 2-COLUMN content layout
----------------------------------------------------------- */

.steno {
width:100%;
margin:0;
border:none;
}

.steno td {
width:50%;
margin:0 2px;
padding:5px 1px;
position:relative;
vertical-align:top;
}

.steno ul {position:relative;vertical-align:top;}
.steno img {width:45%;height:auto;}


ul.onelevel li {
border-bottom:1px dotted #333;
padding:2px 0;
}

ul.nobullets {margin:0;padding:0 5px 0 3px;}
ul.nobullets li {list-style-type:none;line-height:16px;}

ul.twolevel, ul.twolevel li ul {  /* <-------- 2-level list without bullets (ie: for contact info) */
list-style-type:none;  
line-height:16px;
}

ul.twolevel {
font-weight:bold;
color:#555;
margin:0;
}

ul.twolevel {
margin-bottom:8px;
}

ul.twolevel li ul {
color:#333333;
margin-left:3px;
margin-bottom:4px;
border-bottom:1px dotted #333;
padding-bottom:6px;
}

ul.twolevel li ul.noborder {  /* <-------- 2-level list without bullets & without bottom border */
border-bottom:none;
}

ul.twolevel li ul.bulleted {  /* <-------- 2-level list with bullets on sub-list items & without bottom border */
list-style-type:disc;
margin-left:20px;
margin-top:10px;
margin-bottom:10px;
border-bottom:none;
}


/* 2-COLUMN simple data tables (with visible borders)
----------------------------------------------------------- */

.twocolumn, .reversetwocolumn {  
width:auto;
margin:0;
background-color:transparent;
border:1px solid #000;
line-height:25px;
}

.reversetwocolumn {border:none;}

.twocolumn tr.head, .reversetwocolumn tr.head {
background-color:#A4C6CF;
font-size:14px;
font-weight:bold;
line-height:25px;
}

.twocolumn tr.head td, .reversetwocolumn tr.head td {border-bottom:1px solid #000;text-align:center;}

.twocolumn tr.categories, .reversetwocolumn tr.categories { 
background-color:#BFDBE2;
line-height:20px;
font-size:14px;
font-weight:bold;
}

.twocolumn tr.categories td, .reversetwocolumn tr.categories td {border-bottom:1px dotted #000;}

.twocolumn tr.data, .reversetwocolumn tr.data {  
background-color:transparent;
line-height:20px;
font-size:13px;
font-weight:normal;
}

.twocolumn tr.data td, .reversetwocolumn tr.data td {border-bottom:1px dotted #666;}

.twocolumn tr.space, .reversetwocolumn tr.space {
background-color:transparent;
line-height:6px;
}

.twocolumn tr.space td, .reversetwocolumn tr.space td {border-bottom:none;}

.twocolumn td.left {
width:140px;
border-right:1px dotted #000;
padding:0 3px 0 4px;
}

.twocolumn td.right {
width:350px;
padding:0 3px 0 4px;
}

.reversetwocolumn td.left {
width:350px;
border-right:none;
padding:0 3px 0 4px;
}

.reversetwocolumn td.right {
width:140px;
padding:0 3px 0 4px;
}


/* 3-EQUAL-WIDTH COLUMNS simple data table
----------------------------------------------------------- */

#threecolumn {position:relative;border:0;width:auto;margin:0;padding:0;}
.threecolumn {position:relative;}
.threecolumn td {width:158px;text-align:left;}
.threecolumn td img {margin-top:8px;}


/* SEMI-INVISIBLE THREE-column data table (subtle dotted lines)
----------------------------------------------------------- */

.subtle {
width:auto;
margin:10px 0 30px 0;
border:none;
background-color:transparent;
}

.subtle tr.categories {
color:#666;
background-color:transparent;
line-height:22px;
font-size:14px;
font-weight:bold;
}

.subtle tr.data {
background-color:transparent;
line-height:20px;
font-weight:normal;
}

.subtle tr.categories td {border-top:1px dotted #999;border-bottom:1px dotted #666;}
.subtle tr.data td {border-bottom:1px dotted #999;}
.subtle tr.last td {border-bottom:none;}

.subtle td.one {
width:150px;
padding:1px 3px 1px 4px;
border-right:1px dotted #999;
}

.subtle td.two {
width:90px;
padding:1px 3px 1px 4px;
border-right:1px dotted #999;
}

.subtle td.three {
width:260px;
padding:1px 3px 1px 4px;
}


/* SEMI-INVISIBLE TWO-column data table (subtle dotted lines)
----------------------------------------------------------- */

.subtle td.left {
width:60px;
padding:1px 5px 1px 5px;
border-right:1px dotted #999;
text-align:left;
}

.subtle td.right {
width:440px;
padding:1px 0px 1px 5px;
text-align:left;
}


/* PHOTO SPREAD - THUMBNAILS WITH CAPTIONS (3-columns)
---------------------------------------------------------- */

.photospread {width:515px;max-width:515px;margin:0 auto;padding:0;}

.photospread a img {border:none;}

.photospread ul.captions {
	width:515px;
	margin:0 auto;
	background-color:transparent;
	list-style:none;
	padding:0;
}

.photospread ul.captions li {
	width:150px;
	padding:0;
	margin:8px;
	border:none;
	background-color:transparent;
	color:#000;
	font-weight:normal;
	display:-moz-inline-box;/* mozilla only */
	display:inline-block;/* browsers that support display:inline-block like safari/opera/ff3 */
	vertical-align:top;
}

.photospread ul.captions li span {
	display:block;
	text-align:center;
}

.photospread ul.captions li img {
	width:140px;
	padding:3px;
	border:1px solid #000;
}


/* FOOTER (fluid width, separate from main table)
---------------------------------------------------------- */
.footer {
color:#D6E7EE;
background-color:transparent;
background-image:url(../_images/website/footerbg.jpg);
background-repeat:repeat-x;
width:100%;
line-height:18px;
text-align:center;
position:relative;
height:170px;
padding-top:40px;
}

.footer td {
margin:0 auto;
}

.footer p {text-align:center;line-height:18px;color:#D6E7EE;} /* text within footer */
.footer p a {font-size:14px;color:#D6E7EE;} /* links within footer */
.footer p a:hover {color:#FFF;} /* links within footer when hovered-over */