/* CSS for Annunciation */
body {
     background-color:#1B2544;
     font-family:Verdana, helvetica, arial, sans-serif;
      }
/* NAVIGATION AREA - thanks to http://javascript-array.com for drop-down menu.  Need to place link on site.*/     


table.sddm {
  position:relative;
  top:0%;
  height:35px;
  font-size:small;
  text-align:left;
  width:100%;
  border-collapse:collapse;
  }   

.sddm td {	
  margin: auto;
  width:auto;
  padding-bottom: 0px;
  font-size:small;
}
#menu td a {	
 margin-bottom:0px;
 padding: 2px 20px 2px 20px;
 width: 155px;
 color: #fff;
 font-weight:bold;
 font-size:small;
 text-align: justify;
 text-decoration: none;
 border-left-style:ridge;
 border-left:1px black;
}
.sddm td a:hover {	
 text-decoration:none;
 padding:0 20px;
 color:#000;
 width:150px;
}
.sddm div {
 position: absolute;
 visibility: hidden;
 margin: 0;
 padding: 0;
 background: #B30000;
 border-left: 2px solid #B30000;
 border-bottom: 2px solid #B30000;
 z-index:200;
}
.sddm div a	{
 position: relative;
 display: block;
 margin-top: 12px;
 padding: 2px 6px 2px 2px;
 width: 160px;
 white-space: nowrap;
 font-size:small;
 text-align: left;
 text-decoration: none;
 background:#B30000x; /*color for ddmenubgd*/
 color: #000;  /* text color for ddmenubgd*/
 z-index:300;
}
.sddm div a:hover	{
 background-color: #B38F8F; /*highlight color on dd menu */
 color: #000;
 width:160px;
 font-size:small;
 font-weight:bold;
 padding: 2px 6px 2px 2px;
} 
.nav {
 background-color: #B30000; 
} 
.nav:hover {
 background-color: #B30000; 
}

/* End Navigation*/                         
      
/* PAGE LAYOUT*/
#page {
 position:relative;
 width:850px;
 margin-left:auto; 
 margin-right:auto; 
 background-color:#ffffff;
 border:3px solid #B3B3B3;
 }
    
      
/* HEADER AREA */
#header {
 position:relative;      
 top:0px;
 left:0%;
 width:100%;
 height:100px;
 font-family:garamond,arial,helvetical,sans-serif;
 background:#fff url(backgrounds/header.png);
 border-top:1px solid #808080;
 line-height:140%;
 }
     

h1, h2 {
 font-family:Lucida Sans;
  }  
h1 {
 font-style:oblique;
 font-weight:normal;
 padding-left:0px;
 padding-top:10px;
 color:#B36B00;
 font-size:large; 
 clear:both;}       
h2 {
 font-size:medium;
 padding: 4px 0 4px 0;
 }
.subtitle {
 font-size:medium;
 padding-left:2em;
 padding-top:1em;
 color:#B30000;
 border:0px green solid;
 } 
.title3 {
 font-family:comic-sans-serif;
 font-weight:normal;
 font-style:normal;
 font-size:x-large;
 padding-left:1em;
 padding-top:0.3em;
 color:#3333FF;
 border:0px dashed green;
 }
.titletemp {
 font-family:Lucida Sans;
 font-style:oblique;
 font-size:large;
 padding-left:0.3em;
 padding-top:0.3em;
 padding-bottom:0.3em;
 margin-left:1em;
 margin-right:8%;
 color:#000000;
 background-color:#ECF2C8;
 border:0px dashed green;
 }        
.subtitle2 {
 font-family:garamond;
 font-style:normal;
 font-weight:800;
 font-size:large;
 padding-left:2em;
 padding-top:1.5em;
 color:#B30030;
 }      
        
/* Image Panel */
#imagepanel {
 position:relative;
 top:0px; 
 left:0px;
 border-top:solid #B3B3B3 3px;
 border-bottom:solid #B3B3B3 3px;
 width:850px;
 height:243px;
 }
#image-text a{
 font-variant:small-caps;
 color:#ffffff;
 text-decoration:none;
 }
#image-text a:link {
 color:#ffffff;
 }
#image-text a:visited {
 color:#ffffff;
 }
#image-text a:hover {
 color:#808080;
 }
#image-text a:active {
 color:#ffffff;
 }
#ul img {
 position:absolute; top:20px; left:0px;
 height:100px;
 width:170px;
 border-bottom:2px solid silver;
 border-top:0px solid silver;
 }
.ul-text{
 position:absolute;top:0px; left:0px;
 height:20px;
 width:20%;
 color:#ffffff;
 font-family:arial, helvetica, sans-serif;
 background-color:#202268;
 text-align:center;
 border-top:0px solid silver;
 } 
#calbutton {
 position:relative;      
 top:4px;
 left:0%;
 width:100%;
 height:px;
 margin-bottom:10px;
 color:#ffffff;
 border:0px solid red;
 }          

#calbutton p {
           text-align:center;
           color:#000000;
           font-family:"Arial";
           font-size:small;
             }
      
#calbutton a{
           font-family:Lucida Sans;
           font-style:oblique;
           font-size:medium;
           text-decoration:none;
           color:#000000;
            } 
            
#calbutton a:hover {
            color:#ffffff;
            }
            
.left-button {
         position:relative;top:3px; left:5%;
         height:25px;
         margin-top:3px;
         width:40%;
         color:#000000;
         font-family:Lucida Sans;
         background-color:#ecf2c8;
         text-align:center;
         color:#000000;
         background-color:#ecf2c8;
         border:1px solid black;          
         }
         
.right-button {
         position:relative;top:3px; left:55%;
         height:25px;
         margin-top:3px;
         width:40%;
         color:#000000;
         font-family:Lucida Sans;
         background-color:#ecf2c8;
         text-align:center;
         background-color:#ecf2c8;
         border:1px solid black;          
         }         
         
#ur img {position:absolute; top:20px; left:20%;
        height:100px;
        width:170px;
        border-left:3px solid #B3B3B3;
        border-right:3px solid #B3B3B3;
        border-top:0px solid silver;
        border-bottom:2px solid #B3B3B3;
        }
.ur-text{
         position:absolute;top:0px; left:20%;
         height:20px;
         width:20%;
         color:#ffffff;
        border-left:3px solid #B3B3B3;
        border-right:3px solid #B3B3B3;
         font-family:arial, helvetica, sans-serif;
         background-color:#202268;
         text-align:center;
         border-top:0px solid silver;
         }
          
#ll img {position:absolute; top:121px; left:0px;
        height:100px;
        width:170px;
        border-top:3px solid #B3B3B3;

        }
.ll-text{
         position:absolute;top:222px; left:0px;
         height:20px;
         width:20%;
         color:#ffffff;
         font-family:arial, helvetica, sans-serif;
         background-color:#202268;
         text-align:center;
         border-bottom:2px solid #B3B3B3;
          } 
#lr img {position:absolute; top:121px; left:20%;
        height:100px;
        width:170px;
        border-left:3px solid #B3B3B3;
        border-top:3px solid #B3B3B3;
        border-right:3px solid #B3B3B3;
        }
.lr-text{
         position:absolute;top:222px; left:20%;
         height:20px;
         width:20%;
         color:#ffffff;
        border-left:3px solid #B3B3B3;
        border-right:3px solid #B3B3B3;
         font-family:arial, helvetica, sans-serif;
         background-color:#202268;
         text-align:center;
         border-bottom:2px solid #B3B3B3;
          }
#main img {position:absolute; top:0px; left:342px;
        height:243px;
        width:506px;
        border-left:2px solid #B3B3B3;
        }
.slideshowleft {
 position:relative;
 left:343px;       
 top:0px;
 height:243px;
 width: 508px;
 border-right: 1px solid #C8CD98;
 border-top: 1px solid #C8CD98;
 } 
 
/*lower contents */ 
#textbox {
        position:relative;
        font-family:Arial, Helvetica, san-serif;
        color:#000000;
        line-height:120%;
        font-size:small;
        width:100%;
        border:0px solid red;
         }
p {
 text-align:justify;
  }         
a.link {
       color:#000000;
       font-size:small;
       text-decoration:underline;
        } 
a.link:hover {
      color:#545400;
      background-color:#E8E8E8;
      }
.link2 a {
       color:#004F3B;
       font-size:medium;
        } 
.link2 a:hover {
      color:#545400;
      background-color:#B0B38F;
      }               
                 
#leftside {
      position:relative;
      float:left;
      width:380px;
      padding-top:0;      
      margin-left: 20px;
      padding-right:0em;
      border:0px solid green;
      }
#home-left {
      position:relative;
      float:left;
      width:450px;      
      padding-left:25px;
      padding-right:0em;
      border:0px solid green;
      }      
.center {
 color: #261f3b;
 background-color:#F1F2E8;
 padding: 4px 4px;
 margin-right:6px;
 font-weight:bold;
      }
        
#leftside-2 {
      position:absolute;
      top:0em;
      left:0px;
      width:50%;
      padding-top:0.5em;      
      padding-left:0;
      padding-right:0em;
      border:0px solid green;
      } 
                    
#rightside {
      position:relative;
      float:right;
      top:0em;
      width:380px;
      padding-top:0em;
      margin-right: 20px;
      border:0px dotted navy;
      }
#sidebar {
 position:relative;
 float:right;
 width: 280px;
 margin-right:25px;
 margin-top:10px;
 border:0px solid red;
  }

#menu2top {
        background-image:url('backgrounds/menutop.jpg');
        background-position:top;
        background-repeat:no-repeat;
        background-color:#fdf8d5; 
        font-size:small;
        padding-top:0.5em;
        margin-top:1em;
        margin-bottom:0em;
        margin-left:3em;
        margin-right:4em;      
        padding-bottom:.5em;
        }               
#menu2bottom {
        background-image:url('backgrounds/menubottom.jpg');
        background-position:bottom;
        background-repeat:no-repeat;
        background-color:#fdf8d5; 
        font-size:small;
        padding-top:0em;
        margin-left:3em;
        margin-top:0em;
        margin-right:4em;      
        padding-bottom:0.5em;
        }
#menu2bottom p
        {
        margin-top:0em;
        }        
#wide {
 width:720px;
 margin:auto;
  }
.wide p {
        font-family:arial, helvetica, sans-serif;
        line-height:125%;
        padding-top:0em;
        padding-bottom: 0em;
        margin-left:4em;
        margin-right:4em;
        padding-left: 3em;
        padding-right:3em;
        border:0px dashed red;
        }        
.wide-3 {
        width:80%;
        margin-left: auto;
        margin-right:auto; }
.wide-3 p {
        font-family:arial, helvetica, sans-serif;
        line-height:125%;
        padding-top:0em;
        padding-bottom: 0em;
        margin-left:4em;
        margin-right:4em;
        padding-left: 3em;
        padding-right:3em;
        border:0px dashed red;
        }

        
.italic {
         font-style:italic;
         line-height:115%;
          }                 
                 
table.events {border-collapse: collapse;
             position:relative;
             margin-top:2px;
             margin-right:1px;
             margin-left:1px;
             padding:0.4em;
             font-family:Verdana,Helvetica, Arial, sans-serif;
             font-size:small;
             }
             
tr.month {background-color:#FF8040;
         }
         
table.events th, table.events td {padding:1px;
               border:1px solid #000000;
             }
table.priests {
              margin-left:2em;
               }
table.priests th, table.priests td {padding:1px;
               border:0px solid #000000;
             }
.groups { 
  padding: 5px;
  margin-left:2em;   
  }
.photosidebar {
 width: 170px;
 height: 230px;
  }                            
.pagephotoleft-s {
           float:left;
           height:140px;
           border:2px solid silver;
           margin-right:0.5em;
           margin-bottom:2px;
           clear:both;
           }

.pagephotoright-s {
           float:right;
           max-width:220px;
           max-height:140px;
           border:2px solid silver;
           margin-left:0.5em;
           margin-bottom:0.1em;
           clear:both;
           }
.pagephotoleft-xs {
           float:left;
           max-width:110px;
           max-height:85px;
           border:0px solid silver;
           margin-right:1em;
           margin-bottom:0.1em;
           }           
.fixphotoleft-xs {
           float:left;
           max-width:110px;
           max-height:100px;
           border:0px solid silver;
           padding: 5px 10px 5px 5px;
           }    
.fixphotoright-xs {
           float:right;
           width:110px;
           max-height:85px;
           border:0px solid silver;
           padding: 5px 5px 5px 10px;
           }       
.pagephotoleft-l {
           float:left;
           max-width:300px;
           max-height:250px;
           border:2px solid silver;
           margin-right:0.5em;
           margin-bottom:0.5em;
           clear: both;
           }
.w300c {
 display:block;
 margin:0 auto;
 width:300px;
 }           
.pagephotoleft-w {
           float:left;
           width:150px;
           border:4px solid silver;
           margin-right:0.5em;
           margin-bottom:0.5em;
           }           

.pagephotoright-l {
           float:right;
           height:200px;
           border:4px solid silver;
           margin-left:1em;
           margin-bottom:1em;
           margin-right:0em;
           }
.menuphoto {
           float:left;
           height: 140px;
           border:1px solid black;
           margin: 1em;
           clear:both;
           }                                 
#footer {
  height:40px;
  background-color:#B30000;
  border-top:2px solid #6D89A7;
  border-bottom:0px solid #6D89A7;
  clear:both;
}
table.footer {
  position:relative;
  color:#ffffff;
  top:1px;
  height:30px;
  font-size:small;
  text-align:center;
  width:100%;
  border-top:0px solid #6D89A7;
}    
#footer a {
  background-color:#B30000;
  color:#ffffff;
  font-weight:normal;
}        
#footer a:hover {
  color: silver;       
 }           
              

.orgphoto-l {
           float:left;
           height:120px;
           border:2px solid silver;
           margin-right:1em;
           margin-bottom:0.3em;
           border:2px solid silver;
          } 
        
.orgphoto-r {
           float:right;
           height:120px;
           border:2px solid silver;
           margin-left:1em;
           margin-bottom:0.3em;
           border:2px solid silver;
          }        
          

.eventphoto {
           float:left;
           height:200px;
           border:2px solid silver;
           margin-right:1em;
           margin-bottom:4em;
           border:1px solid black;
          } 
#calendar {
          margin-left:3%; }          
ul.text {
        margin-left:2em;
        margin-right:2em;
        line-height:150%;
        padding-left:3em;
 }        
 
p.emphatic {
           font-size:x-large;
           line-height:200%;
           text-align:left;
           }                     
                    
#book-form {
           margin-top:2em;
           margin-left:2em;
           }
.offset {
 margin-left:15%;
 } 
li {
 padding:0.2em 0em;
 }                            
p.offset {
         margin-left:10%;
         line-height:90%;
         padding-bottom:0.3em;
         border:0px blue solid; 
         }            
         
p.wideoffset {
         margin-left:25%;
         line-height:40%; 
         }         

#menu1top {
        float:right;
        width:80%;
        background-image:url('backgrounds/menutop.jpg');
        background-position:top;
        background-repeat:no-repeat;
        background-color:#fdf8d5; 
        font-size:small;
        padding-top:1em;
        margin-left:2.5em;
        margin-top:1em;
        margin-right:3em;
        margin-bottom:0em;      
        padding-bottom:0em;

        }                  
#menu1top p {
        text-align:left;
        border:0px solid green;
        margin:0px;
        padding-top:0.2em;
        padding-bottom:0.2em;
                  }         
#menu1bottom {
        float:right;
        width:80%;
        background-image:url('backgrounds/menubottom.jpg');
        background-position:bottom;
        background-repeat:no-repeat;
        background-color:#fdf8d5; 
        font-size:small;
        padding-top:0em;
        margin-left:2.5em;
        margin-top:0em;
        margin-right:3em;      
        padding-bottom:1.5em;
        border:1px solid green;
        }                  
#menu1bottom p {
        text-align:left;
        border:0px solid green;
        margin:0px;
        padding-top:0.2em;
        padding-bottom:0.2em;
                  }          
#menu3top {
                 background-image:url('backgrounds/menutop.jpg');
                 background-position:top;
                 background-repeat:no-repeat;
                 background-color:#fdf8d5;
                 font-size:small;
                 padding-top:1em;
                 margin-left:2em;
                 margin-top:0.2em;
                 margin-right:1.5em;
                 margin-bottom:0em;      
                 padding-bottom:0em;
                 border-top:0px solid #B30000;
                 border-bottom:0px solid #B30000;
                  }
#menu3top p {
                 text-align:left;
                 border:0px solid green;
                 margin:0px;
                 padding-top:0.2em;
                 padding-bottom:0.2em;
                  }          
#menu3bottom {
                 background-image:url('backgrounds/menubottom.jpg');
                 background-position:bottom;
                 background-repeat:no-repeat;
                 background-color:#fdf8d5;
                 font-size:small;
                 padding-top:0em;
                 margin-left:2em;
                 margin-top:0.em;
                 margin-right:1.5em;
                 margin-bottom:0em;      
                 padding-bottom:1.3em;
                 border-top:0px solid #B30000;
                 border-bottom:0px solid #B30000;
                  }
#menu3bottom p {
                 text-align:left;
                 border:0px solid green;
                 margin:0px;
                 padding-top:0em;
                 padding-bottom:0.2em;
                  }                            
#announcement p {
              color:red;
              font-size:large;
              line-height:130%; }                  
              
p.comment {
          font-size:large;
          color:blue;
          line-height:120%; }            
          
.signature {
           font-style:italic;
           font-family:lucidia-handwriting;
           color:brown; }          
           

#photosection p{
              margin-top:5em;
              margin-left:0em;
              width:100%;

               }              
img.photopage {
              margin-left:4em;
              width:180px;
              border:2px solid #C0C0C0;
               }           

.wide-2 p {
        font-family:arial, helvetica, sans-serif;
        font-size:small;
        line-height:120%;

        padding-top:0em;
        padding-bottom: 0em;
        margin-left:2em;
        margin-right:2em;
        padding-left: 2em;
        padding-right:2em;
        border:0px dashed red;
        }   
                      
.caption {
         margin-left:0;
         width:60%;
         margin-bottom:4em; }              
         
p.indent {
        line-height:120%;
        text-align:left;
        padding-top:-2px;
        padding-bottom: -2px;
        margin-left:8em;
        margin-top:-2px;
        margin-bottom:-2px;
        padding-left: 3em;
         border:0px dashed red;
         }          
         
#note {
      position: absolute;
      top:25%;
      left:2px;
      width: 14%;
      border:0px solid navy;
      }
      
#note p{color:#8080FF;
      font-size:small;
      margin-left:2px;
      margin-right:2px;
      text-align: left;
      }      
      
.garamond {
      font-style:italic;
      font-family:Garamond;
      font-size:large;
      }
.fancy {
       color:#0000A0;
       font-size:medium;
       font-weight:bold;
        }      
      
iframe {
       margin-top:5px; }
       
p.colorcode {
            margin-top:65px;
            margin-left:16%;
            text-align:left;
            
             }                   
      
.buttonA {
      position:absolute;
      margin-left: 110px;
}

.buttonB {
      position:absolute;
      margin-left: 390px;
}

.button li {
   
    padding: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 15px;
    list-style-type: none;
    height: 15px;
    width: 250px;
    margin: 10px;
    text-align:center;
}

.button li a {

    text-decoration: none;
    height: 100%;
    width: 100%;
    display: block;
    background-color: #2B2B43;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
}

.button li a:link {
    color: #E3ECB0;
    font-weight: bold;
    background-color: #000080;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
}

.button li a:visited {
    color: #E3ECB0;
    font-weight: bold;
    background-color: #000080;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
}

.button li a:hover {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #777777;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
}

.button li a:active {

    font-weight: bold;
    color: #000000;
    background-color: #ECF2C8;
    border-style: solid;
    border-top-color: #333333;
    border-left-color: #555555;
    border-right-color: #BBBBBB;
    border-bottom-color: #DDDDDD;
}      

.invisible {
           visibility: hidden;
           }
.spacer {
  visibility:hidden ;     
  float:left;
  padding-bottom:1em 0 1em 0;
  height: 50px;
  clear:both;
 }
.relative {
 position:relative;
 clear:both;
 }
.big {
  width: 80%;
  margin-left:10%;
  margin-top: 2em;
  }
.top {
  margin-left:2em;
  font-size:small;
  color: black; 
} 
.align_center {
 text-align:center;
  }  
a.id {
  color: #FFFFFF;
  text-decoration:none; 
 }
a.committee {
  color:#B30000;
  text-decoration:none;
 } 
a.top {
  font-family:arial;
  font-size:x-small;
  text-decoration:none;
  border:none; }

a.top:visited {
  text-decoration:none;
 }
.red {
  color:#B30000;
}
li.plain  {
 list-style-type:none;
 }
.video {
 height:200px;
 width:360px;
 margin-left: 10px;
 }
.teal {
 color: #004040;
 }
.blue {
 color:#1B2544;
 font-weight:bold;
  } 
.box {
 font-style:normal;
 font-family:Arial;
 text-align:justify;
 color: #000;
 background-color: #FCDFA3;
 margin: 15px 25px;
 padding: 10px 15px;
 }
.box2 {
 font-style:normal;
 font-family:Arial;
 text-align:justify;
 color: #ff0000;
 background-color: #FFFF00;
 margin: 15px 25px 15px 15px;
 padding: 4px 6px 4px 2px;
 border:1px solid blue;
  }
a.plain  {
 text-decoration:none;
 }
.underline {
 text-decoration:underline;
 }

p.date {
 color: #B34800;
 width:280px;
 margin: 0px 0px 0 0px;
 padding:4px 0px 0px 0px;
 font-weight:bold;
 border-top:2px solid #9CA03B;
  } 
.firstdate {
  color: #B34800;
 width:280px;
 margin: 0px 0px 0 0px;
 padding:4px 0px 0px 0px;
 font-weight:bold;
 border:none;
  }  
.entry {
 color:#000;
 text-align:left;
 width:270px;
 margin:4px 0px 5px 4px;
 padding-bottom:10px;
 font-size:11px;
 line-height:130%;
 font-weight:normal;
 border-bottom:0px solid #888888;
   }
.lastentry {
 margin:4px 0px 10px 4px;
 border: none;
  }   
p.learn {
 color:#fff;
 padding:0 10px;
 margin-top:0px;
 border:0px solid red;
  }                 
.intro  {
 color: #261f3b;
 font-size:large;
 }
.sidebar {
 font-weight:bold;
 color: #fff;
 padding:4px 0 4px 4px;
 background-color:#AF8E49; 
 }
.no_border {
 border:none;
 } 
.icon {
 vertical-align:middle; } 
.note {
 position:absolute;
 top:90px;
 left:800px;
 z-index: 10;
  }