/* CSS for Jennifer Thomson website - copyright Jennifer Thomson, Parthian Systems */



.navigation  a:link { color: #888888; text-decoration:none; }
.navigation  a:visited { color: #888888; text-decoration:none; }
.navigation  a:hover {color: #636363;  text-decoration:underline; }
.navigation  a:active { color: #636363; text-decoration:none; }

  a:link { text-decoration:none; }
  a:visited { text-decoration:none; }
  a:hover { text-decoration:none; }
  a:active { text-decoration:none; }


  /* Technique to Centre an entire page - copes with browser oddities - from CC Forum*/
  body {/* MSIE 5 doesn't center based on auto left/right margins,
           but 'text-align:center' does center top-level divs: */
        text-align: center;
        font-family:"calibri", "arial", sans-serif;
                font-size: 62.5%;
        line-height: 150%;
           /* Specify a min-width for the body as wide as the 'wrapper'
           element itself. This prevents negative (i.e. inaccessible)
           left-margins in narrow browser windows when using
           Navigator 6+/Mozilla on Win32: */
        min-width: 902px; /* was 770px */
        /* Background only works if some simple CSS before body section !!!!!  */
                /* links are relative to CSS file */
        background-color: white;
        color: black;
        background-attachment: scroll; /* was fixed */
        /* background-repeat: repeat;  probably not required */
        overflow: visible; /* hidden Adds ScrollBars to Wrapper...
        visible on FF3 scrolls to bottom (NO) it scrolls so Anchor is at top e.g. #paInfo
        In FF an Open and Close of Accordion where window is close to size requiring a Scroll bar causes
        the scroll bar to appear momentarily. This causes the screen to jump around. Auto is best for FF and IE  */
        margin: 0px 10px 0px 10px; /*  Cut down the space to squeeze as much in */
        padding: 0px;
       /*         -moz-opacity:.5; filter:alpha(opacity: 50); opacity: .5; */
   }

   /* The IEH HTC :hover pseudoclass workaround - http://www.xs4all.nl/~peterned/csshover.html
   don't include the behavior in the main body declaration */
   body { behavior: url("IEFixes.htc"); }

  .wrapper {/* Reset alignment to compensate for 'text-align:center': */
            text-align: left;
            /* Specify the width of the element. This should be the same as 'body min-width': */
            width: 902px;/* Value is accordion_toggle width plus its padding value  See also ms/pa_infoblock*/
            height: auto; /* was auto for Feonic*/
                        font-size: 1.4em; /* 14px */
                        line-height: 120%;
            /* Set left and right margins to auto, thus centering the
                element in the containing (body) tag: */
            margin-left: auto;
            margin-right: auto;
            padding: 0px;
                        position: relative; /* to enable right block to absolute relative to this not body */
        /* #A4D480 Block out background image*/
    /* overflow - auto is a disaster on IE7(adds scrollbars)
    But visible on FF3 when browser to short causes scroll to bottom - cannot see top AND NO SCROLLBARS
    hidden in FF3 causes a blank page if the whole page cannot be seen...*/
    }

.clearFloat { clear:both; }

#jenniferhome { /* position absolute to top right */
                top: 0px; left: 0px; width: 902px; height: auto;
        margin-left: auto;
        margin-right: auto;}

.navigation { /* Menu goes here */
        position: relative;
                /* top: 10px; left: 10px; */
        width: 900px; height: auto;
        left: 0px;
        line-height: 150%;
                color: #B7B7B7;
                font-family:"calibri", "arial", sans-serif; font-size:1.6em;
                list-style-type:none;
                margin: 0 0 0 0;
                z-index: 2;
                }

/* .navItems {margin-left: 50px; float:left; } /* all items inc. subNavs */
/* only float horizontally the immediate List Items. This uses a selector parent > child - .navigation > li - but this doesn't work in IE6 so
repeat the li to cancel those changes at .subNav li */
.navigation  li {
        float:left; margin-bottom: 30px;
        margin-left: 40px; /* Change this to move main menu */
        }
.subNav {
                position: absolute;
                font-size:0.8em; /* Like a percentage of parent. So half of 1.6em from above */
                background-color: #FFF;
                z-index: 10; clear:both; padding: 0; line-height:100%; list-style-type:none; }
.subNav li {
                border: 1px solid #EEE; padding: 2px; width:100%;
                } /* width:100% makes the box big enough for biggest text. But on IE6 appears to be inherited down to li */

/* now fixes for .navigation > li IE6 failure. Shown separately for comment purposes */
.subNav li { clear: both; margin: 0 0 0 0; } /* ie6.css specific code */

/* make the subNav disappear */
.navigation li ul {
                display:none; clear:both; margin-left: 0px; line-height:100%;
                }
/* show subNav ul on rollover - this replaces onmouseover js but :hover doesn't work in IE6 see behavior URL in body above */
.navigation li:hover ul {
                display:block;
                }

/* breadcrumb .active a { color: red; } */
.self a { color: black; }

.canvas { /* to give something for gallery BC to fill to bottom */
        position:relative; width: 100%; height: auto;}

#intro { /* Text to Left */
              width: 420px; /* 434 - 50 */
       height: auto;
       float: left;
           position: relative;
           top: 20px; left: 20px; /* THIS MAY NOT BE WORKING */
           text-align: justify;
           /*font-family:"calibri", "arial", sans-serif; font-size:1.2em; line-height: 120%; */
       padding: 0 0 20px 0;}

#mailing { position: relative; top: 20px; left: 150px; width: 180px; height: 100px; margin: 0 0 0 0; }
#mailing img { margin-left: 40px; }

#home-gallery { width: 420px; height: auto;
              /* To get the BC to go to bottom cannot use floats. These take elements out of canvas element. But works now perhaps due to png
                                and position relative but float puts element on top of everything including menus        */
              float: right; position: relative; top: 20px; right: 20px; padding: 0 0 22px 0;
              background-color: #DDD;
              text-align: center; z-index: 0; }

#home-gallery p { margin: 4px 4px 8px 4px;}
#home-gallery p img { margin: 12px auto 0 auto; }

#about { /* Text to Left */
       width: 880px;
       height: auto;
       float: left;
           position: relative;
           top: 20px; left: 40px; /* THIS MAY NOT BE WORKING */
           text-align: justify;
           /* font-size: 1.8em;  was 18px */
           line-height: 100%;
       padding: 0 0 20px 0;}
#about img { /* Centre the image */
margin-left: auto; margin-right: auto; display:block;
           }

.dittonews { margin: 0 0 40px 40px; } /* Move the news items apart */
.ditto_paging {
                border-top: 1px solid #ccc; padding: 10px; font-size: 86%; color: black;
                }
#ditto_pages .ditto_currentpage {
                border: 1px solid black; padding: 1px 5px 2px; margin-right: 1px;
                background-color: #008CBA; color: #fff;
                }
#ditto_pages .ditto_off {
                border: 1px solid #ccc; padding: 1px 5px 2px; margin-right: 1px; color: #ccc;
                }
#ditto_pages a, #ditto_pages a:link, #ditto_pages a:visited  {
                border: 1px solid #008CBA; padding: 1px 5px 2px; margin-right: 1px; text-decoration: none !important; color: black;
                }
#ditto_pages a:hover { background-color: #fff; color: #000; }

.footer_image {
  /* position absolute the image at the bottom of the fixed height page */
  clear: both;
  position: relative; bottom: 0px; /* Move up to overlap white area  */
  width: auto; height: 60px;
  z-index: 2; /* lift footer over home-gallery */
  /* left: 29px; /* half of the 960 to 902 */
  }

.footer { /* Menu goes here */
        position: absolute;
        height: 40px;
        bottom: -10px; right: 30px;
        color: #FFF;
                }
.footer a { margin-right: 30px; color: white; font-size:medium;}