@import url(/styles/reset.css);
@import url(/styles/base.css);

/* --------------------------------------------------------------
  
   Screen Stylesheet
   * imports reset.css & global.css
   * defines site specific styles for screen
   
   Copyright Fusionary Media
   
-------------------------------------------------------------- */

/***************************************
   =defaults
************************************** */

body {
	font: 12px/1.5em Georgia, "Times New Roman", Times, serif;
	color: #2f1301;
}

a           { color: #b80000; text-decoration: none; }
a:hover     { color: #b80000; background-color: #f3ddd8;; }

h1,h2,h3,h4,h5,h6 {
	color: #462a10;
	font-family: Georgia, "Times New Roman", Times, serif;
	line-height: 1.5em;
}

h1 {
	font-size: 30px;
}
h2 {
	font-size: 20px;
}
h3 {
	font-size: 16px;
}
h4 {
	font-size: 14px;
}
h5 {
	font-size: 14px;
}
h6 {
	font-size: 12px;
	font-weight: bold;
}

hr {
	display: none;
}

/***************************************
   =structure
************************************** */

body {
	background: url(/images/ui/bg-noise-dark.gif) repeat 0 0;
}
#container {
	background: url(/images/ui/bg-top-gradient.gif) repeat-x 0 0;
}


#header,
#body,
#footer,
#body-wrapper {
  width: 824px;
	margin: 0 auto;  
}

#header {
  position: relative;
  height: 131px;
}

#body {
	clear: both;
 background: url(/images/ui/bg-noise-grad.gif) no-repeat;
}
#body-wrapper {
  background: url(/images/ui/bg-noise-light.gif) repeat-y 0 0;
}
#footer {
  background: url(/images/ui/bg-footer.gif) no-repeat 1px 0;
  color: #bd8f6b;
}

/***************************************
   =shared
************************************** */

.swf,.swf object {
	display:block;
}

/***************************************
   =alphabet / fancy letter
************************************** */


.fancy-letter {
  display: block;
  float: left;
  width: 18px;
  height: 28px;
  margin-top: .5em;
  padding-right: 3px;
  text-indent: -9000em;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.home .fancy-letter {
  margin-top: .25em;
}

.ltr-a {width: 29px;}
.ltr-b {width: 21px;}
.ltr-c {width: 25px;}
.ltr-d {width: 29px;}
.ltr-e {width: 18px;}
.ltr-f {width: 18px;}
.ltr-g {width: 28px;}
.ltr-h {width: 30px;}
.ltr-i {width: 12px;}
.ltr-j {width: 12px;}
.ltr-k {width: 29px;}
.ltr-l {width: 19px;}
.ltr-m {width: 37px;}
.ltr-n {width: 30px;}
.ltr-o {width: 29px;}
.ltr-p {width: 20px;}
.ltr-q {width: 33px;}
.ltr-r {width: 28px;}
.ltr-s {width: 15px;}
.ltr-t {width: 23px;}
.ltr-u {width: 28px;}
.ltr-v {width: 30px;}
.ltr-w {width: 40px;}
.ltr-x {width: 27px;}
.ltr-y {width: 28px;}
.ltr-z {width: 22px;}

 
/***************************************
   =header
************************************** */
h1 {
  position: absolute;
  left: 50%;
  top: -1px;
  margin-left: -425px;
  width: 135px;
  height: 125px;
  z-index: 120;
  background: url(/images/ui/canons-crest.gif) no-repeat 0 2px;
}

h1 a {
  position: absolute;
  text-indent: -9000em;
  background: url(/images/ui/canons-regular.gif) no-repeat 0 12px;
  margin-left: 135px;
  display: block;
  width: 400px;
  height: 80px;
  outline: 0;
}
h1 a:hover {
  background-color: transparent;
}
#search-global {
  float: right;
  line-height: 1em;
  padding-top: 24px;
  margin-bottom: 12px;
}
#search-global input {
  padding-left: 2px;
  padding-right: 2px;
  vertical-align: top;
}  

#keywords {
  padding: 3px;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #715336;
  background: #f1e8cd url(/images/ui/bg-form-input) repeat-x 0 0;
  border: 1px solid #d6b06f;
}
input.default-text {
  font-style: italic;
}
/***************************************
   =body
************************************** */
#body {
  overflow: hidden;
  padding-bottom: 24px;
}

#body h2 {
  margin-bottom: 12px;
  padding: 12px 0 12px 28px;
  background: url(/images/ui/hr-page-title.gif) no-repeat 50% 100%;
}
#content-wrapper {
/*  overflow: hidden;*/
  background: url(/images/ui/bg-sidebar.gif) repeat-y 22px 0;
  position: relative;
}
#content {
  float: right;
  display: inline;
  width: 582px;
  margin-right: 22px;
}
#content-end {
  position: absolute;
  width: 186px;
  height: 60px;
  left: 22px;
  top: 100%;
  margin-top: -60px;
  background: url(/images/ui/bg-sidebar-bottom.jpg) no-repeat 0 0;
}
#sidebar {
  float: left;
  display: inline;
  width: 186px;
  margin-left: 22px;  
  background: url(/images/ui/bg-nav-sidebar-top.gif) no-repeat 0 0;
	padding-bottom: 60px; /*CHANGED: content-end covering up sidebar*/
}

.right,
.left {
  color: #90491c;
  display: inline;
  background: #f5e6ca url(/images/ui/bg-image-matte-bl.gif) no-repeat 0 100%;
}

.right {
  float: right;
  margin: 0 0 4px 4px;
}

.left {
  float: left;
  margin: 0 4px 12px 0;
}

.right img,
.left img,
p img,
#features img {
  padding: 1px;
  border: 1px solid #c5a585;
}

.right .caption,
.left .caption {
  background: url(/images/ui/bg-image-matte-br.gif) no-repeat 100% 100%;
  padding-bottom: 8px;
}
.right p,
.left p {
  margin: 4px 8px 0;
  padding: 0;
}

#features {
  margin: 0;
  padding: 0;
  list-style: none;
}
#features li {
  overflow: hidden;
  margin-bottom: 24px;
}
#features img {
  float: left;
  margin-bottom: 18px;
}
#features h3 {
  line-height: 1em;
  margin-bottom: 6px;
  color: #9e6232;
}
#features h3,
#features p {
  margin-left: 198px;
}

#content h3.page-title {
	font-size:18px;
	padding-bottom:20px;
}

#content h4.date {
	font-size:14px;	
	padding-top:20px;
}

#content h3.title {
	font-size:16px;	
	padding-bottom:0;
}

/***************************************
   =footer
************************************** */

.prayer-requests,
#copyright {
  text-align: center;
  margin: 18px;
}
.prayer-requests {
  text-indent: -9000em;
  background: url(/images/ui/bg-prayer-requests.gif) no-repeat 50% 0;
}
.prayer-requests a {
  margin: 18px auto;
  display: block;
  width: 215px;
  height: 22px;
  overflow: hidden;
}
.prayer-requests a:hover {
  background-color: transparent;
}
/***************************************
   =navigation
************************************** */
/* global nav */

#nav-global {
  float: right;
  clear: right;
  list-style: none;
  overflow: hidden;
  margin-right: 0;
}
#nav-global li {
  float: left;
  padding: 0 6px 0 12px;
  background: url(/images/ui/bullet-decor-global.gif) no-repeat 0 50%;
}
#nav-global a {
  color: #ffda99;
}
#nav-global li.news {
  background: none;
}
#nav-global a:hover,
#nav-global a.active {
  background-color: transparent;
  color: #fff;
  border-bottom: 1px solid #745437;
}

/* main nav */

#nav-main {
  padding: 0 4px;
  position: relative;
  clear: both;
  list-style: none;
	line-height: 1.0;
	margin: 0;
	z-index: 100;
	width: 824px;
	height: 36px;
}
ul#nav-main ul {
	position: absolute;
	top:-999em;
}

#nav-main li {
	float:left;
	position:relative;
	z-index: 9;
}
#nav-main a {
  display: block;
	height: 36px;
  background: url(/images/ui/bg-nav-main.png) no-repeat 0 0;
  text-indent: -9000em;
  overflow: hidden;
}
#nav-main a:hover {
  background-position: 0 -36px;
}

#nav-main li.home a {
  width: 185px;
}

#nav-main li.home a:hover,
#nav-main li.home a.active { background-position: 0 -36px; } /*CHANGED: adding missing active/hover for home*/

#nav-main li.about a {
  width: 112px;
  background-position: -185px 0;
}
#nav-main li.about a:hover,
#nav-main li.about a.active { background-position: -185px -36px; }  

#nav-main li.patron a {
  width: 132px;
  background-position: -297px 0;
}
#nav-main li.patron a:hover,
#nav-main li.patron a.active { background-position: -297px -36px; }

#nav-main li.apostolates a {
  width: 173px;
  background-position: -429px 0;
}
#nav-main li.apostolates a:hover,
#nav-main li.apostolates a.active { background-position: -429px -36px; }

#nav-main li.giving a {
  width: 93px;
  background-position: -602px 0;  
}
#nav-main li.giving a:hover,
#nav-main li.giving a.active { background-position: -602px -36px; }

#nav-main li.vocations a {
  width: 121px;
  background-position: -695px 0;
}
#nav-main li.vocations a:hover,
#nav-main li.vocations a.active { background-position: -695px -36px;}

/* second level */

#nav-main li:hover ul,
ul#nav-main li.sfHover ul {
	left:-1px;
	top: 36px;
	border-right: 1px solid #dac7ac;
	border-bottom: 1px solid #a9815a;
	border-left: 1px solid #a9815a;
}

#nav-main li ul {
  background: #900;
  margin-left: 0;
  padding-left: 0;
}
#nav-main li li {
  padding: 0;
  display: block;
  float: none;
  border-bottom: 1px solid #dac7ac;
  border-right: 1px solid #a9815a;
	
}

#header #nav-main li li a,
#header #nav-main li li a:hover {
  height: auto;
  text-indent: 0px;
  background-image: none;
  padding: 5px 8px;
  text-decoration: none;
	width: 14em;
}
#header #nav-main li li,
#header #nav-main li li a {
  background-color: #f5e6ca;
}
#header #nav-main li li a:hover {
  background-color: #fff5e3;
}


/* sidebar nav */

#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidebar .primary-nav a {
  display: block;
  height: 24px;
  padding: 6px 12px 0 12px;
  background: url(/images/ui/bg-nav-sidebar.gif) no-repeat 0 0;
}

#sidebar .primary-nav a:hover,
#sidebar .primary-nav a.active {
  background-image: url(/images/ui/bg-nav-sidebar-active.gif)
}

#sidebar .secondary-nav {
  margin: 18px 8px;
}
#sidebar .secondary-nav li {
  width: 168px;
  margin-top: 11px;
  margin-bottom: 11px;
  background: #edddbf url(/images/ui/bg-nav-secondary.gif) no-repeat 0 0;
}  
#sidebar .secondary-nav a {
  display: block;
  background: url(/images/ui/bg-nav-secondary.gif) no-repeat -168px 100%;
  padding: 12px;
  font-weight: bold;
}
#sidebar .secondary-nav a span {
  display: block;
  color: #2f1301;
  font-weight: normal;
}
/* footer nav */

#nav-footer {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

#nav-footer ul {
  list-style: none;
}
#nav-footer li {
  display: inline;
  padding: 4px 5px 4px 14px;
  background: url(/images/ui/bullet-decor-footer.gif) no-repeat 0 50%;
}
#nav-footer li.home {
  background-image: none;
}  
/***************************************
   =home page
************************************** */

#welcome {
background: url(/images/ui/bg-home-welcome-area.gif) repeat-y 12px 0;
margin: 0 4px; 
}
#welcome-inner {
  background: url(/images/ui/bg-home-welcome-area-inner.gif) no-repeat 0 0;
  padding: 20px 30px 0;
  min-height: 228px;
}
#slideshow {
  float: left;
  position: relative;
  overflow: hidden;
  width: 364px;
  height: 208px;
  background: url(/images/ui/border-slideshow.png) no-repeat 0 0;
	list-style: none;
	margin: 0;
}
#slideshow li {
  position: absolute;
  top: 5px;
  left: 5px;
}
#slideshow li,
#slideshow a {
	display: block;
	width:354px;
	height: 198px;
	position: relative;
}
#slideshow a:hover {
  background: none; /*CHANGED: fixed hover*/
}
#slideshow span {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 344px;
  padding: 5px;
  color: #fff;
  background: #000;
}


#welcome .message {
  margin-left: 390px;
}

.home #content {
  float: none;
  width: auto;
  display: block;
  margin: 0 20px;
  padding: 25px 2px;
  background: none;
  border-top: 1px solid #c3b0a0;
}
.home #content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home #content li {
  margin: 0 0 4px;
  padding: 0;
}

.home #features {
  float: left;
  width: 450px;
  padding: 12px 12px 0 0; 
}
.home #features h3,
.home #features p {
  margin-left: 174px;
}

.home #sidebar {
  float: right;
  width: 318px;
  margin-left: 0;
  background: none;
}
.home #sidebar a:hover {
  background-color: transparent;
}
.home #news {
  margin-top: 24px;
  padding-top: 24px;
  background: transparent url(/images/ui/hr-decor-narrow.gif) no-repeat 50% 0;
}
.home #news h2 {
  margin: 0;
  padding: 0;
  background: none;
  font-size: 18px;
  color: #9e6232;
}
.home #news ul {
  border-top: 1px dotted #dccbb7;
}

.home #news li {
  border-bottom: 1px dotted #dccbb7; 
  padding: 2px 0 4px;
}


/***************************************
   =gallery page
************************************** */

#gallery {
	margin: 0 20px;
} 

/***************************************
   =javascript styles
************************************** */
.js-show { display: none; }
.js .js-show { display: block;}

.js-hide { display: block;}
.js .js-hide { display: none;}

.notice a {
  color: #B80000;
}

/***************************************
   =perpetual society
************************************** */ 

.col-4 {
  width: 284px;
  float: left;
}

.perpetual-society-enroll .text label,
.perpetual-society-enroll .text input {
  width: 284px;
}

.text {
  padding: 3px 0;
}
.perpetual-society-enroll .radio {
  margin-bottom: 4px;
}
.perpetual-society-enroll .radio input {
  float: left;
}
.perpetual-society-enroll .radio label { 
  padding-left: 6px;
}
.perpetual-society-enroll .actions {
  padding-top: 1.5em;
}

.error-inline {
  color: #b80000;
}

/** =fancy zoom
************************************************************/
#booklet-images a {
  display: block;
  float: left;
  margin-right: 5px;
  background-color: transparent;
  height: 162px;
}

#zoom {
  z-index: 1001;
}
#zoom a {
  background-color: transparent;
}
.zoom-plus {
  position: relative;
}
.zoom-icon {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  margin: -2px 0 0 -2px;
  width: 11px;
  height: 12px;
  z-index: 4;
  background:  url(/images/fancyzoom/zoom-plus.png) no-repeat 0 0;
}

/** =hform
************************************************************/
.hform .text label,
.hform .select label,
.hform .file label,
.hform .text input,
.hform .select input,
.hform .file input,
.hform select,
.hform textarea {
  float: left
}
.hform .select, 
.perpetual-society-enroll fieldset {
  padding-top: 4px;
  padding-bottom: 4px;
  clear: left;
}
.hform .text,
.hform .select,
.hform fieldset {
  margin-bottom: 0;
}

.hform .text input {
  width: 214px;
}
.hform select {
  width: 90px;
}
.hform #phone,
.hform #postalcode {
  width: 85px;
}
.hform label {
  text-align: left;
}
.hform .select label,
.hform .text label {
  padding: 6px 4px 0 4px;
  width: 56px;
}

.radio label span {
  display: block;
  padding-left: 26px;
}

.hform #street2 {
  margin-left: 64px;
}