/* Global Styles
----------------------------------------------- */

* {
   padding:0;
   margin:0;
}
img {
   padding:0;
   margin:0;
}
img a {
   border:0px none;
}
a {
   color:#CC0000;
   text-decoration:none;
}
a:hover {
   text-decoration:underline;
}
a img {
   border:none;
}
.breaker {
   clear:both;
   width:100%;
   height:1px;
   font-size:0.1em;
   overflow:hidden;
}
.none {
   display:none;
}
.alert {
   color:#CC0000;
}


/* Page Structure
----------------------------------------------- */

html body 
{
   background:#FFF;
   color:#333333;
   margin:0;
   text-align:center;
   font:x-small Verdana,Sans-serif;
   voice-family: "\"}\""; voice-family:inherit;
   font-size:small;
   background-image:url('http://www.stjohnpc.org/images/p_back.gif');
   /* background-image:url('http://localhost:1401/stjohnpc/images/p_back.gif'); */
   background-repeat: repeat;
   } 
   
html>body {font-size:small;}

#page {
   font-size:85%;
   width:760px;
   padding:0;
   margin:0 auto;
   text-align:left;
}
#main {
  background:#FFF;
  width:758px;
  margin:0 auto;
  border-left:1px solid #DBCFB9;
  border-right:1px solid #DBCFB9;
  border-bottom:1px solid #DBCFB9;
}
#left {
  float:left;
  padding:13px 0 13px 12px;
}
#content {
   width:359px;
   float:left;
   padding:13px 20px 20px 20px;
}
#content2 {
   width:540px;
   float:left;
   padding:13px 20px 20px 20px;
}
#content3 {
   width:715px;
   float:left;
   padding:13px 20px 20px 20px;
}
#right {
  float:right;  
  padding:13px 12px 13px 0;
}
#home_content {
   width:710px;
   float:left;
   padding:13px 15px 13px 15px;
}
#home_left {
  float:left;
  width:466px;
  padding:13px 0 13px 12px;
}
#home_right {
  float:right;
  width:247px;
  padding:13px 12px 13px 0;
}


/* Masthead
----------------------------------------------- */

#masthead {
   width:760px;
   margin:0 auto;
}


/* Topnav
----------------------------------------------- */

#topnav {
   width:760px;
   background:#884FA0;
   border-bottom:2px solid #FFF;
   margin:0 auto;
}
#topnav ul {
   font-family:Arial;
   padding:2px 0px 0px 0px;
}
#topnav ul li {
   font-weight:bold;
   list-style:none;
   display:inline;
}
#topnav ul a {
   float:left;
   display:block;
   color:#FFF;
   line-height:1em;
   text-decoration:none;
   background:url('graphics/top_divider.gif') no-repeat 0 6px;
}
#topnav ul a.first {
   background:none;
}
#topnav ul a:hover {
   color:#FFF;
   text-decoration:underline;
}
#topnav ul li a {
   padding:12px 7px 13px 18px;
}
#topnav .breaker {
  background-color:#CC0000;
}


/* Top tools
----------------------------------------------- */

#top_tools {
   width:744px;
   font-size:1.1em;
   padding:1px 0 1px 16px;   
   background:#DBCFB9;
   margin:0 auto;
}
#top_tools .breaker {
  background-color:#DBCFB9;
}
#top_tools .top_search form {
  float:left;
}
#top_tools .top_search td {
  padding:0 4px 0 0;
}
#top_tools label {
   font-family:Arial;
   font-weight:bold;
}
#top_tools .top_link {
  float:right;
  font-family:Arial;
  font-weight:bold;
  padding:4px 12px 0 0;
}


/* Leftnav
----------------------------------------------- */

#leftnav {
   width:166px;
   background:#DBCFB9;
}
#leftnav #section {
   font-family:Arial;
   font-size:1.3em;
   font-weight:bold;
   padding:15px 0 15px 8px;
}
#leftnav ul {
   list-style-type:none;
   padding:0px 8px 10px 8px;
}
#leftnav ul .nav2 {
   list-style-type:none;
   padding:0;
}
#leftnav ul.nav1 li {
   background:url('graphics/left_arrow.gif') no-repeat 0 3px;
   font-weight:bold;
   margin:0; padding-left:10px; padding-right:10px; padding-top:0px; padding-bottom:10px
}
#leftnav ul.nav2 li {
   background:none;
   padding:5px 0 0 0px;
   font-weight:normal;
   line-height:1.2em;
}
.print ul {
   list-style-type:none;
   padding:15px 8px 0px 0px;
}
.print ul li {
   background:url('graphics/printer.gif') no-repeat 0 3px;
   font-weight:bold;
   margin:0; padding-left:22px; padding-right:10px; padding-top:4px; padding-bottom:10px
}
.email ul {
   list-style-type:none;
   padding:5px 8px 10px 0px;
}
.email ul li {
   background:url('graphics/email.gif') no-repeat 0 3px;
   font-weight:bold;
   margin:0; padding-left:22px; padding-right:10px; padding-top:0px; padding-bottom:10px
}



/* Footer
----------------------------------------------- */

#footer {
   width:736px;
   font-size:85%;
   margin:0 auto;
   text-align:center;
}
#footer .col {
   border-top:1px dotted #D7AF69;
   padding:12px 0 12px 0;
}
#footer a {
   font-weight:bold;
}
#footer span a {
   color:#000;
}
#footer span a:hover {
   color:#000;
}


/* Content
----------------------------------------------- */

.header h1 {
   font-size:1.8em;
   font-weight:bold;
   font-family:Arial;
   margin:0 0 20px 0;
}
div.cms_content .date {
   font-family:Arial;
   font-weight:bold;
   margin:0 0 1.1em 0;
   font-size:1.3em;
}
div.cms_content {
   font-size:1.0em;
}
div.cms_content hr {
   border-left:0px solid #7D7BA0; border-right:0px solid #7D7BA0; border-top:1px solid #7D7BA0; border-bottom:0px solid #7D7BA0; color:#fff
}
div.cms_content a {
   font-weight:bold;
   text-decoration:underline;
}
div.cms_content h2 {
   font-family:Arial;
   font-size:1.4em;
   margin:0 0 0.5em 0;
   padding:0 0 5px 0;
}
div.cms_content h3 {
   font-size:1.2em;
   font-family:Arial;
   margin:0 0 4px 0;
   padding:0 0 1em 0;
}
div.cms_content p {
   line-height:1.6em;
   margin:0 0 1.5em 0;
}
div.cms_content ul {
   list-style:none;
   line-height:1.6em;
   margin:0 0 1.3em 0;
   padding:0;
}
div.cms_content ul li {
   background:url('graphics/page_arrow.gif') no-repeat 0px 4px;
   margin:0; padding-left:15px; padding-right:10px; padding-top:0px; padding-bottom:1.2em
}
ol {
   padding:0 0 0 26px;
}
ol li {
   padding-bottom:1em;
}
ol li a {
   font-weight:normal;
   text-decoration:none;
}
ol li a:hover {
   text-decoration:underline;
}
ol.alpha {
   list-style-type:upper-alpha
}


/* Inline Images
----------------------------------------------- */

div.cms_content img.left {
   float:left;
   padding:0;
   margin:0 10px 10px 0;
}
div.cms_content img.right {
   float:right;
   padding:0;
   margin:0 0 10px 10px;
}


/* Listing 
----------------------------------------------- */

div.listing h2 {
   background-color:#DBCFB9;
   font-size:1.2em;
   font-family:Arial;
   padding:0.5em 8px 0.5em 8px;
   margin:0 0 1px 0;
}
div.listing h3 {
   font-size:1em;
}
div.listing p {
   line-height:1.6em;
   margin:0 0 1.5em 0;
}
div.listing ul {
   line-height:1.4em;
   list-style-type:none; 
   margin:0;
}
div.listing ul li {
   background-image:url('graphics/list_arrow.gif');
   background-repeat:no-repeat;
   background-position: 10px 8px;
   background-color:#F4EEE4; margin-left:0; margin-right:0; margin-top:0; margin-bottom:1px; padding-left:22px; padding-right:2px; padding-top:4px; padding-bottom:0.5em
}
div.listing ul li.pdf {
   background-image:url('graphics/pdf.gif');
   background-repeat:no-repeat;
   background-position: 10px 6px;
   background-color:#F4EEE4; margin-left:0; margin-right:0; margin-top:0; margin-bottom:1px; padding-left:32px; padding-right:2px; padding-top:4px; padding-bottom:0.5em
}
div.listing ul li.mp3 {
   background-image:url('graphics/mp3.gif');
   background-repeat:no-repeat;
   background-position: 10px 6px;
   background-color:#F4EEE4; margin-left:0; margin-right:0; margin-top:0; margin-bottom:1px; padding-left:32px; padding-right:2px; padding-top:4px; padding-bottom:0.5em
}
div.listing ul li.word {
   background-image:url('graphics/word.gif');
   background-repeat:no-repeat;
   background-position: 10px 6px;
   background-color:#F4EEE4; margin-left:0; margin-right:0; margin-top:0; margin-bottom:1px; padding-left:32px; padding-right:2px; padding-top:4px; padding-bottom:0.5em
}
div.listing ul li.text {
   background-image:url('graphics/text.gif');
   background-repeat:no-repeat;
   background-position: 13px 6px;
   background-color:#F4EEE4; margin-left:0; margin-right:0; margin-top:0; margin-bottom:1px; padding-left:32px; padding-right:2px; padding-top:4px; padding-bottom:0.5em
}

div.listing ul li a {
   font-weight:bold;
   text-decoration:none;
}
div.listing ul li a:hover {

   text-decoration:underline;
}


/* Page nav
----------------------------------------------- */

.pagenav {
   color:#D4B066;
   padding:15px 0 0 0;
   margin:20px 0 0 0;
   border-top:1px dotted #D4B066;
}
.pagenav p {
   font-size:1.2em;
}
.pagenav a {
   font-weight:bold;
   text-decoration:none;
}
.pagenav a:hover {
   text-decoration:underline;
}
.pagenav img.left {
   float:left;
   padding:0;
   margin:0 10px 0 0;
}

/* Details 
----------------------------------------------- */

div.details h2 {
   background-color:#DBCFB9;
   font-size:1.2em;
   font-family:Arial;
   padding:0.5em 8px 0.5em 8px;
   margin:0 0 6px 0;
}
div.details p {
   line-height:1.6em;
   margin:0 0 1.5em 0;
}
div.details ul {
   line-height:1.4em;
   list-style-type:none; 
   margin:0 0 1em 0;
}
div.details ul li {
   background-image:url('graphics/bullet01.gif');
   background-repeat:no-repeat;
   background-position: 12px 5px;
   margin:0; padding-left:26px; padding-right:10px; padding-top:0px; padding-bottom:1em
}
div.details ul li a {
   text-decoration:none;
}
div.details ul li a:hover {
   text-decoration:underline;
}
div.details ul.events li, div.listing ul.searchresults li {
   background-color:#fff;
}
div.details ul.events li {
}


/* Forms
----------------------------------------------- */

#form form {
   border-top:1px dotted #D4B066;
   border-bottom:1px dotted #D4B066;
   padding:20px 0 15px 0;
   margin:30px 0 30px 0;
}
#form h2 {
   font-family:Arial;
   font-size:1.2em;
   margin:0 0 0.5em 0;
   padding:0 0 5px 0;
}
#form h3 {
   font-size:1.3em;
   font-family:Arial;
   margin:0 0 4px 0;
   padding:1em 0 0.5em 0;
}
#form p {
   line-height:1.6em;
   margin:0 0 1.5em 0;
}
#form fieldset {
   border:none;
}
#form input {
}
#form label {
   margin:0;
   padding:0;
}
#form form table td {
   padding:0 10px 5px 0;
} 


/* Left elements
----------------------------------------------- */

.boxout {
   width:166px;
   border-top:2px solid #FFF;
}
.boxout #blue {
   background:#7CA9D3;
   padding:8px 0 8px 0;
}
.boxout #yellow {
   background:#D5AF66;
   padding:8px 0 8px 0;
}
.boxout #purple {
   background:#9B91AA;
   padding:8px 0 8px 0;
}
.boxout span {
   font-family:Arial;
   color:#FFF;
   font-size:1.2em;
   line-height:1.3em;
   font-weight:bold;
}
.boxout .col {
   padding:5px 8px 0px 8px;
}
.boxout ul {
   list-style-type:none;
   font-size:85%;
   margin:4em 0 0 0;
}
.boxout ul li {
   background-image:url('graphics/leftbox_arrow.gif');
   background-repeat:no-repeat;
   line-height:1.2em;
   background-position: 0 4px;
   padding-left:8px; padding-right:10px; padding-top:0; padding-bottom:5px
}
.boxout ul li a {
   text-decoration:none;
   color:#FFF;
   font-weight:bold;
}
.boxout ul li a:hover {
   text-decoration:underline;
   color:#FFF;
}
.boxout_img {
   background:#F4EEE4;
   width:150px;
   text-align:center;
   padding:8px 8px 8px 8px;
}
.boxout_img img {
   margin:5px 0 5px 0;
}
.boxout_header {
   background:#DBCFB9;
   padding:8px 0 8px 0;
   margin:15px 0 0 0;
}
.boxout_header span {
   font-family:Arial;
   font-size:1.2em;
   font-weight:bold;
   padding:0 0 0 6px;
}
.boxout_img p {
   font-size:85%;
   line-height:1.3em;
}

/* Popup
----------------------------------------------- */

#popup {
   font-size:85%;
}
#popup img {
   margin:10px 0 10px 0;
}


/* Right elements
----------------------------------------------- */

.related {
   width:168px;
   padding:0 0 5px 0;
}
.related .gblue_header {
   background:#78A5A8;
   padding:8px 0 8px 0;
}
.related .green_header {
   background:#658377;
   padding:8px 0 8px 0;
}
.related .dblue_header {
   background:#496384;
   padding:8px 0 8px 0;
}
.related .yellow_header {
   background:#D5AF66;
   padding:8px 0 8px 0;
}
.related .purple_header {
   background:#9B91AA;
   padding:8px 0 8px 0;
}
.related .blue_header {
   background:#7CA9D3;
   padding:8px 0 8px 0;
}
.related span {
   font-family:Arial;
   color:#FFF;
   font-size:1.2em;
   font-weight:bold;
   padding:0 0 0 6px;
}
.related p {
   font-size:85%;
   line-height:1.3em;
   margin:0 0 1.5em 0;
}
.related ul {
   list-style-type:none;
   margin:1em 0 0 0;
}
.related ul li {
   background-image:url('graphics/related_arrow.gif');
   background-repeat:no-repeat;
   line-height:1.2em;
   background-position: 0 4px;
   padding-left:15px; padding-right:10px; padding-top:0; padding-bottom:15px
}
.related ul li.pdf {
   background-image:url('graphics/pdf.gif');
   background-repeat:no-repeat;
   line-height:1.2em;
   background-position: 0 2px;
   padding-left:25px; padding-right:10px; padding-top:0; padding-bottom:15px
}
.related ul li.mp3 {
   background-image:url('graphics/mp3.gif');
   background-repeat:no-repeat;
   line-height:1.2em;
   background-position: 0 2px;
   padding-left:25px; padding-right:10px; padding-top:0; padding-bottom:15px
}
.related ul li.word {
   background-image:url('graphics/word.gif');
   background-repeat:no-repeat;
   line-height:1.2em;
   background-position: 0 2px;
   padding-left:25px; padding-right:10px; padding-top:0; padding-bottom:15px
}
.related ul li.text {
   background-image:url('graphics/text.gif');
   background-repeat:no-repeat;
   line-height:1.2em;
   background-position: 0 2px;
   padding-left:25px; padding-right:10px; padding-top:0; padding-bottom:15px
}
.related ul li a {
   text-decoration:none;
}
.related ul li a:hover {
   text-decoration:underline;
}

.handpointer { cursor:hand; }