/*
 *     style10.css
 *     2-01-09 16:04:33
 *
 *     ©  (utf-8 hint)
*/


/* HTML Elements --------------------------------------------------LAYOUT-------- */


body {
    max-width:         1200px;
    min-width:         747px;      /* 800 window leaves 767 with scrollbar on */
    padding:           20px 30px;
    margin:            auto;       /* center body */
    margin-top:        20px;
    margin-bottom:     20px;
    border-radius:     15px 15px 0 0;
}
p {
    margin:                 0.5em 0;
}
h1:first-of-type,
.column1 > h2:first-child,
.column2 > h2:first-child,
section > h2:first-child {
    margin-top:         0;
}
body > h1 {
    text-align:     center;    /* won't work if container was inline-block! */
    margin-top:     0.2em;
}
hr {
    margin-top:             0.5em;
    margin-bottom:          0.5em;
    height:                 1px;
    width:                  75%;
    border-style:           none;
    clear:                  both;
}
hr {
    color:                  #6f6f62;            /* used by FF for <hr> */
    background-color:       #6f6f62;            /* used by IE  */
    border-color:           #6f6f62;
}
/* HTML5 containers           alphabetical */
article { margin: 0 0 1.5em 0; }

aside {
    margin-bottom:      0.5em;
    clear:              both;       /* experimental 1/26/2014 16:39:21 */
}
aside.right {   margin-left: 1em; }
aside.left {    margin-right: 1em; }
aside {                 /*  for text materials; use figure for images */
    border-style:       solid;
    border-width:       2px;
    padding:            0.5em 1em;
}
figure {        margin: 0 }        /* reset browser defaults */
figure {        margin-bottom: 1em; }
figcaption {    margin: 0.5em 0; }

figure.right {  margin-left: 1em; }
figure.left {   margin-right: 1em; }

section {
    clear:              both;
    padding-top:        1em;
}
section:first-child {
    padding-top:        0;
}
section::after {        /* clearfix hack */
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

.clearfix:after {
    content: " "; /* Older browser do not support empty content */
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

header {
    position:               relative;   /*  to place menus with position: absolute; */
    height:                 110px;
    background-image:       url(/images/banner-v4-smr.jpg);
    background-repeat:      no-repeat;   /* seems to default to repeat */
    background-position:    10% 40%;
    border-radius:          20px 20px 0 0;
    margin-bottom:          10px;
}
.ssc header {
    background-image:       url(/images/banner-v4-ssc.jpg) /* soaysheep.com */
}


footer {
    clear:                  both;     /* important to bring down the body container */
    padding:                0 1em;
    margin:                 0.5em 0;
    border-top-width:       2px;
    border-top-style:       solid;
    border-top-color:       inherit;
    font-size:              6pt;
    font-family:            verdana, arial, sans-serif;
}
/* img ------------------------------------------------------------------- */
img {
    max-width:          100%;     /* 2014-01-16 11:28:44 test */
    border-style:       solid;      /* MUST not be none */
    border-width:       3px;
    margin:             -3px;    /* so  border will overhang container */
    -webkit-border-radius: 15px;
    -moz-border-radius:    15px;
    -ms-border-radius:     15px;
    -o-border-radius:      15px;
    border-radius:         15px;
}


p img {  margin: 0.5em 1em 0.5em  1em; }

a:link img,
a:visited img {  border-style: double; }

a:hover img,                          /* visually active border around link images */
a:active img {   border-style:       solid; }



/*  list elements ------------------------------------------------------------ */
ul, ol, dl {
    padding-left:       1em;
    margin:             0.5em 0;
    margin-left:        1em;
}
ul > li {
    border-right:       none;   /* shouldn't display in IE6 which groks it anyway */
}
ul.nomarker {  list-style-type:      none;}

dt {
    display:            list-item;
    font-family:        Georgia, serif;
    font-weight:        bold;
    list-style-type:    disc;
    font-size:          1.19em;
    margin:             0.30em 0;
}
dd {
    font-family:        Arial, sans-serif;
    font-size:          90%;
    margin:             0.5em 0;
}

/* Alignment: left right center top */
p img.alignTop { margin-top: 0 }    /* convert and eliminate this class */
p img.align-top { margin-top: 0 }

.left {
    float:              left;
    margin-left:        0;
    margin-right:       1em;        /* experimental 1/26/2014 17:07:11 */
}
.right {
    float:              right;
    margin-right:       0;
    margin-left:        1em;        /* exprimental 1/26/2014 17:07:39 */
}
.center,
.center2 { display: block; clear: both; margin-left: auto; margin-right: auto;}
table.center { display: table; margin-left: auto; margin-right: auto; }

h3.center {text-align: center;}

blockquote {
    font-style:         italic;
    font-size:          smaller;
}

p img.left {margin-right: 1.0em; }
p img.right {margin-left: 1.0em; }
/*
p > a > img.left {margin-right: 1.5em; }
p > img.right {margin-left: 1.5em; }
p > a > img.right {margin-left: 1.5em; }
*/

/*******************************************************************************
 *  Hue 60 color panel
 *  increase saturation in 7% steps
 *  decrease value in 5% steps
 *      #fcfceb     hsv 30 07d 99d      bg-ground
 *      #f5f5dc     hsv 30 10d 96d      bg-xlight
 *      #f0f0ce     hsv 30 14d 94d      bg-light
 *      #e3e3b3     hsv 30 21d 89d      bg-medium
 *      #d6d69a     hsv 30 28d 84d      bg-dark
 *      #c9c983     hsv 30 35d 79d      bg-xdark
 *      #bdbd63     hsv 30 42d 74d      bg-xxdark
 *
 * Other colors
 *
 *      #118321         green in omnia 'm'
 *      #4F0F0F         dark brick red
 *      #2F4F4F         darkslategray
 *      #B0C4DE         aka lightsteelblue
 *      #C0D4EE         aka xtralightsteelblue
 *      #C8DCF6         aka xtraxtralightsteelblue
 *      #000080         navy
 */

/* color ********************************************************************************/
body {        color:    #4c0f0f; }   /* 0 80 30 deep red */

h1, h2, h3, h4, h5, h6,
dt, .crumbs { color:   #004010; }   /* dk grn */

h3 a:link,
h3 a:visited { color:   #004010;}

a:link {       color:   #0d5583;}   /* 203 90 51 */
a:visited {    color:   #5d5c1c;}   /* 59 70 36 */


/* background-color */

html {      background-color:   #ccc;       }
body {      background-color:   #fcfceb;    }
header {    background-color:   #e3e3b3;    }
aside {  background-color:   #e3e3b3;    }



.P02 {      background-color:   #ffffef;    }
.L3Cf {     background-color:   #ffffef;    }

/* border-color (NOT inherited) */
body {      border-color:       #bdbd63;}

img,
aside {       border-color:       #bdbd63; }



/* typography ***************************************************************************/
body {
    font-size:          100%;
    font-family:        Arial, Helvetica, Verdana, sans-serif;
    font-family:        ff-dagny-web-pro, pt-sans,  Arial, "Gill Sans MT", Verdana;
}
p {
    line-height:        normal;   /* Firefox: 1.25 */
    line-height:        1.3;
}
h1, h2, h3, h4, h5, h6{
    font-family: ff-meta-serif-web-pro, droid-serif, serif;
    font-style: normal;
    font-weight: 400; /*droid had 400 700 normal italic*/
}
article > h2:first-of-type,
h4:first-of-type {
/*    font-family:        Arial, Helvetica, Verdana, sans-serif;
*/}

figcaption {
    font-size:          0.9em;
    font-style:         italic;
}
.sold {
    color: #ff0033;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-weight: bold;
}

/* <a> Links ---------------------------------------------------------------------------
 *      important: preserve LVHA order
 */

                                                    /* Normal palette */
a:link    {   color:              #006400;}   /* DarkGreen */
a:visited {   color:              #008b8b;}   /* DarkCyan */
a[title]:hover   {   background-color:   transparent;}   /* use to kill bgcolor on img links */

p > a:hover         {   background-color:   #dcf0ff;}   /* lighten default background color */
p > a:active        {   background-color:   #f8f8f8;}   /* not quite white */

p > a:link,
p > a:visited,
p > a:hover       {  text-decoration:    underline;   }

a:hover {
    font-weight:        bold;
    font-weight:        normal;
}
a.more:active {         border-color:       #fffff7;}

a.more:hover {          background-color:   #f7f7e4;}
a.more:hover {          background-color:   #fff4d4;    }
a.more:active {         border-color:       #00ff00;    }

a.faqmore:hover {          background-color:   #fff4d4;    }
a.faqmore:active {         border-color:       #00ff00;    }

a.more,
a.faqmore,
p.more,
span.more {
    background-color:     #E5E5C8;
    border-color:         #118321;                /* logo green */
    border-style:         solid;
    border-width:         1px;
    padding:              3px 5px 2px 5px;
    font-weight:          bold;
    text-decoration:      none !important;
    font-size:            90%;
    text-align:           right;
    margin:               0.25em 0 0.25em 0.5em;
    display:              inline-block;
    float:                right;
    -webkit-border-radius: 5px;
    -moz-border-radius:    5px;
    -ms-border-radius:     5px;
    -o-border-radius:      5px;
    border-radius:         5px;

}
a.more:visited,
a.faqmore:visited,
p.more:visited,
span.more:visited { color: #006400 }


/* Tables --------------------------------------------------------------------*/
table, td, th {
    background-color:   white;
    border-width:       1px;
    border-style:       solid;
    border-collapse:    separate;
    border-spacing:     1px;
    }
td, th, tr, th {background-color: inherit;}
td, th {padding:    0 3px; }
table.a {   background-color:    #f5f5dc;}
table.a{
    border-style:       solid;
    border-width:       2px;
    border-color:       #e3e3b3;
    border-collapse:    separate;
    border-spacing:     0;
    }
td, th, tr, thead, tbody {
    border-style:       inherit;        /* do these do anything ? */
    border-color:       inherit;        /* inherit not allowed ? */
    border-collapse:    inherit;
    border-spacing:     inherit;
    }
td {padding:    0 3px; }
td .a {background-color: white;}

.colorPattern td {text-align: center; }
.colorPattern td + td + td {text-align: left; }
table.genotypesAndPhenotypes td {width: 25%; text-align: center;}

/* CLASSES & IDs ============================================================ */


/**
 *  Column layouts
 *  0.1% tolerance between adjacent <div>s works for IE7 not IE6
 *  use 0.2% gap for portability
 */

.column1,
.column2 {
    margin-bottom: 1em;
}

.column1 + .column2 {border-left: 1px dotted grey; }

.L2Ca .column1  {width: 67.9%;  float: left;    padding-right: 2%;   }
.L2Ca .column2  {width: 27.9%;  float: right;   padding-left:  2%;   }

.L1Ca .column1  {width: 100%;   float:  left;   }   /* column1, float for consistency */

.L2Cb .column1  {width: 47.9%;  float: left;    padding-right: 2%; }
.L2Cb .column2  {width: 47.9%;  float: right;   padding-left:  2%; }

 /* crumbs ------------------------------------------------------------ crumbs */
.crumbs {
    position:       absolute;
    top:            40px;
    left:           110px;
    font-weight:    normal;
}
.crumbs ul, .crumbs li, .crumbs h6 {
    display:    inline;
    padding-left:    0.5em;
    margin:         0;
}
.crumbs ul ul li {
    background-image:       url(/images/gr_menu.gif);
    background-repeat:      no-repeat;
    background-position:    left;
    padding-left:           25px;
}

/*  navcol Typography for Navigation Column--------------------- navcol------ */
.navcol {
    font-size:              80%;
    font-family:            Arial, Helvetica, Verdana, sans-serif;
}
.navcol h1,
.navcol h2,
.navcol h3,
.navcol h4,
.navcol h5,
.navcol h6 {
    padding-left:           2em;        /* percentage mishandled by IE6 */
}

.navcol h1,
.navcol h3,
.navcol h5 {
    font-family:            Arial, Helvetica, Verdana, sans-serif;
}
.navcol h5 {margin: 0 0 0 0; padding-top: 0.5em; padding-bottom: 0.3em;}
.navcol h3 {
    border-top:             2px solid;
    padding-top:            0.3em;      /* thicken the contrast bar */
    padding-bottom:         0.3em;      /* thicken the contrast bar */
}

.navcol h2,
.navcol h4,
.navcol h6 {
    font-family:            Georgia, "Palatino Linotype", Palatino, "Century Schoolbook",
                            "Times New Roman", serif;
    text-transform:         uppercase;
}
.navcol ul  {
    margin-left:            0em;      /* used by FF */
    padding-left:           0em;      /* used by IE */
    list-style-position:    inside;
    list-style-type:        disc;
    margin-top:             0;
    margin-bottom:          0;
}

.navcol ul ul {
    margin-left:            1em;
    margin-top:             0;
    margin-bottom:          0;
}

.navcol li{
    list-style-image:       url(/images/list-image-green-navbar-13x.jpg);}
.navcol li.ssc {
    list-style-image:       url(/images/list-image-red-navbar-13x22.jpg);}
.navcol a {
    padding-left:           0em;
}
.navcol li {
    padding-left:           0em;
    margin-left:            0em;
}
.navcol a:link,
.navcol a:visited { text-decoration:    none;       }
.navcol a:hover,
.navcol a:active {  text-decoration:    underline;   }

.navcol a:visited{      color:              #0d5583;}   /* 203 90 51 */

/* MENU ***********************************************************************/
#topMenu {
    position:           absolute;
    top:                2%;
    right:              0%;
    padding:            0 1em;
    font-size:          90%;
    line-height:        1.4;
}
#topMenu ul {
    margin: 0;
    padding: 0
}
#topMenu ul li {
    display: inline-block;
}
#topMenu a {
    padding:            0 0.5em;
    border-radius:      3px;
    background-color:   transparent;
    text-decoration:    none;
    color:              #4c0f0f;         /* 0 80 30 deep red */
}
#topMenu a:hover {
    border:             1px solid rgba(100,100,100,0.2);
    background-color:   #f0f0c3;
}
/* drop-down menu at lower left of header banner */
#mainMenu  {
    color:              #004010;
    position:           absolute;
                        bottom: 0%;     /* within <header> element         */
                        left: 0%;       /* (which has position: relative)  */
    font-size:          90%;
 }

/* nav_menu dropmenu ***********************************************************
 *
 *    Dropdown Menu
 *    Menu rules for jquery.dropmenu-1.1.4.js and menu.js from a Lynda.com tutorial
 *
 *    Usage notes:
 *      .nav_menu class applies to nav container
 *      .dropmenu class applies to ul within it
 */

.nav_menu {z-index: 1000; margin: 0px; padding: 0px; xfont-family: pt-sans;}
.nav .dropmenu { margin: 0; padding: 0; height: 1.0em; height: 28px; display: none; /* displays after menu load */ }

/* all items  */
.nav_menu ul.dropmenu li { height: 28px; height: auto; } /* was height: 28px; */
.nav_menu ul.dropmenu li:hover { background-color: #e0e0b4; }
.nav_menu ul.dropmenu li.selected { background-color: #d1d19b; }
.nav_menu ul.dropmenu li a { color: #004010; text-decoration: none; padding: 0px; xline-height: 12px; xfont-weight: bold; }
.nav_menu ul.dropmenu li.selected a { color: yellow; }

/* topitems */
.nav_menu ul.dropmenu { margin: 0px; padding: 0px; }
.nav_menu ul.dropmenu a.toplevel { height: auto; margin: 6px 15px 6px 15px;
                                   padding: 0px 0px 4px 0px; color: #004010; font-weight: normal; text-decoration: none;}
.nav_menu ul.dropmenu a.toplevel.hover { color: #004010; }
.nav_menu ul.dropmenu a.toplevel.selected { color: yellow; }
.nav_menu ul.dropmenu a.toplevel.hover.selected {  }

/* subitems */
.nav_menu ul.dropmenu li ul li:hover { background-color: #d1d19b; }
.nav_menu ul.dropmenu li ul { background-color: #d1d19b; border-top: 1px solid #fff; }
.nav_menu ul.dropmenu li ul li a.sublevel { color: #004010; width: 150px; padding: 8px 5px 8px 5px; margin: 0px;}
.nav_menu ul.dropmenu li ul li a.sublevel { width: 14em; }
.nav_menu ul.dropmenu li ul li a.sublevel.hover { color: #004010; background-color: #e0e0b4;}
.nav_menu ul.dropmenu li ul li a.sublevel.selected { color: yellow; }
.nav_menu ul.dropmenu li ul li a.sublevel.hover.selected {  }

/* sub subitems */
.nav_menu ul.dropmenu li ul ul { left: -10px; border: none; border-left: 1px solid #fff; }

/* Sub Menu Indicators */
.nav_menu ul.dropmenu a.indicator { background: url(../images/arrow_right.gif) no-repeat right 50%; }
.nav_menu ul.dropmenu a.toplevel.indicator { background: url(../images/arrow_down.gif) no-repeat 0px bottom; }

.nav_menu ul.dropmenu li ul li a.sublevel  {
  border: 3px solid #d1d19b;
  padding: 5px 2px 5px 17px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 10px;
}
/* ----------------- Floating box at lower right to allow jump to top of page */
 /* #e3e3b3 #bdbd63 #118361*/
#backtotop {
    background: url("/images/page-up.png") no-repeat scroll 50% 50% #e3e3b3;
    background-color: #4f0f0f;
    bottom: 20px;
    color: #ffffff;
    cursor: pointer;
    display: none;
    font-size: 11px;
    height: 43px;
    line-height: 43px;
    margin-top: 22px;
    position: fixed;
    right: 20px;
    text-align: center;
    text-indent: -999em;
    text-transform: uppercase;
    width: 53px;
    z-index: 999;
    border: 3px double #bdbd63;
    border-radius: 5px;
}
#backtotop:hover {
    background-color: #bdbd63;
}

/* navbar ----------------------------------------------------------------- */

.navbar-top a:link,
.navbar-top a:visited { text-decoration:    none;       }

.navbar-top a:hover,
.navbar-top a:active {  text-decoration:    underline;   }

.navbar-top,
.navbar-top a:link,
.navbar-top a:visited,
.navbar-top a:hover {   color: #4c0f0f;}   /* 0 80 30 deep red */

.navbar-top ul {
    text-align:             right;
    margin:                 0;
    padding-right:          1em;
    padding-top:            0.5em;
    float: right;
}
.navbar-top ul li {    display: inline-block;}
/* colbox ----------------------------------------------------------------- */

.colbox {                           /* purpose - to preserve hn margins below floats */
    clear:              both;
    border:             1px solid;      /* color set as background elsewhere */
}


/* Class and ID selectors -------------------------------------------  classes */

 img.thumb {
  -webkit-border-radius: 5px;  /* -- provide smaller radius for funkky little thumbnails */
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
/* classes fractional column **************************************************/
.one-half,
.one-third, .two-thirds,
.one-fourth, .two-fourths, .three-fourths,
.one-fifth, .two-fifths, .three-fifths, .four-fifths,
.one-sixth, .two-sixths, .three-sixths, .four-sixths, .five-sixths,
.one-seventh {
    float:              left;
    display:            block;
}

.one-half img,
.one-third img { margin-left: -3px; margin-right: -3px; }

/* div a + p {font-size: 90%; color: inherit; font-style: italic;} */

/* -- 2 Columns -- */
.one-half { margin-left: 4%; } /* margin  =    (0.08 / cols)  * 100 */
.one-half { width:48% }       /* width = (( 0.92 / cols ) + ( 0.08 / cols**2 )) * 100   */

/* -- 3 Columns -- */
.one-third, .two-thirds { margin-left:2.6666%; }
.one-third { width:31.5555% }
.two-thirds { width:65.7777% }

/* -- 4 Columns -- */
.one-fourth, .two-fourths, .three-fourths { margin-left: 2%; }
.one-fourth { width:23.5% }
.two-fourths { width:49.0% }
.three-fourths { width:74.50% }

/* -- 5 Columns -- */
.one-fifth, .two-fifths, .three-fifths, .four-fifths  { margin-left: 1.6%;}
.one-fifth { width:18.72% }
.two-fifths { width:39.04% }
.three-fifths { width:59.36% }
.four-fifths { width:79.68% }

/* -- 6 Columns -- */
.one-sixth, .two-sixths, .three-sixths, .four-sixths { margin-left: 1.3333%; }
.one-sixth {     width: 15.5556%;  }
.two-sixths {    width: 32.4444%;  }
.three-sixths {  width: 49.3333%;  }
.four-sixths {   width: 66.2222%;  }
.five-sixths {   width: 83.1111%;  }

/* -- First Column --                                    IMPORTANT */
.first { margin-left: 0; }  /* this MUST come after the default margin-left declarations */


/* double-width with two images */
/* the first image should be class="left". the second shouldn't float in order that
the elements below line up with adjacent divs without floating img elements */
.twoImages img {width: 47.95%;}     /* same for all column numbers */


.thumb-panel.first {margin-left: 0 !important; }
.thumb-panel.one-half,
.thumb-panel.one-third,
.thumb-panel.two-thirds,
.thumb-panel.one-fourth,
.thumb-panel.two-fourths,
.thumb-panel.three-fourths,
.thumb-panel.one-fifth,
.thumb-panel.two-fifths,
.thumb-panel.three-fifths,
.thumb-panel.four-fifths,
.thumb-panel.one-seventh {
    margin-left:1%;
    margin-top:1em;
    margin-bottom:1em;
    float:left;
    display:block;
    }


/* -- 2 Columns -- */
.thumb-panel.one-half { width:50% }

/* -- 3 Columns -- */
.thumb-panel.one-third { width:33.33% }
.thumb-panel.two-thirds { width:66.66% }

/* -- 4 Columns -- */
.thumb-panel.one-fourth { width:24.25% }
.thumb-panel.two-fourths { width:50% }
.thumb-panel.three-fourths { width:75% }

/* -- 5 Columns -- */
.thumb-panel.one-fifth { width:19.2% }
.thumb-panel.two-fifths { width:39.4% }
.thumb-panel.three-fifths { width:59.6% }
.thumb-panel.four-fifths { width:79.8% }

/* -- 7 Columns -- */
.thumb-panel.one-seventh { width:13.429% }

/* wNacross classes ***********************************************************/
img.w2across,
.w3across,
img.w4across,
img.w6across { float: left; margin-top: 0; margin-bottom: 0.5%; margin-left: 0;}

img.w2across { width: 47.0%;    margin-right: 1.5%; }
img.w3across { width: 31.5%;    margin-right: 0.5%; }
   .w3across { width: 32.0%;    margin-right: 0.5%; }
img.w4across { width: 24.0%;    margin-right: 0.5%; }
img.w6across { width: 15.5%;    margin-right: 0.3%; }

/* facebook *******************************************************************/
.fb-like { /* facebook like box */
    background-color:   white;
    border: 2px solid   #bdbd63;
    padding: 7px 7px 3px 7px;
    border-width:       2px;
    -webkit-border-radius: 10px;
    -moz-border-radius:    10px;
    -ms-border-radius:     10px;
    -o-border-radius:      10px;
    border-radius:         10px;
    box-sizing:            border-box; /* neat trick to fix width issue */
    width:                 100%;
    margin:                0px auto; /* center it */
    overflow:              hidden;  /* try to clean up display on iOS */
}
/* chronicles **************************************************************************/
.chronicles {
  color: white !important;
  background-color: #5A8DB8 !important;
  border-color: white !important;
  font-family: 'Trebuchet MS','Lucida Grande',Verdana,Arial,Sans-Serif;
  font-weight: bold;
  padding: 1px 1em;
  border: 2px solid;
  display: inline-block ;
  text-decoration: none;
}
a.chronicles:hover {
  color: #5A8DB8 !important;  /* HSP 207 51 72 */
  border-color: #5A8DB8 !important;
  background-color: white !important;
}
.chronicles.reverse {    /* flip color scheme  */
  color: #5A8DB8 !important;  /* HSP 207 51 72 */
  border-color: #5A8DB8 !important;
  background-color: white !important;
}
a.chronicles.reverse:hover {
  color: white !important;
  background-color: #5A8DB8 !important;
  border-color: white !important;
}
a.chronicles {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
a.ofp {
    color:              #eef8cc !important;
    background-color:   #004000 !important;
    border-color:       #eef8cc !important;
    font-family:        Arial,Verdana,sans-serif;
    font-family: 'Trebuchet MS','Lucida Grande',Verdana,Arial,Sans-Serif;
    font-weight:        bold;
    padding:            1px 1em;
    border:             2px solid;
    display:            inline-block;
    text-decoration:    none;
}
a.ofp:hover {
    color:              #004000 !important;
    background-color:   #eef8cc !important;
    border-color:       #004000 !important;
    font-weight:        normal;
}
a.smr {
    font-weight:        bold;
}
img.canada-flag { border: none; border-radius: 0; }

/* chronicles logo -- block level link that looks like Chronicles header -------------- */
.P01 .chronicles-logo:link,
.P01 .chronicles-logo:visited,
.P01 .chronicles-logo {
    display:            block;
    margin:             0.5em 0 0.5em 1em;
    font-family:        'Trebuchet MS','Lucida Grande',Verdana,Arial,sans-serif;
    text-align:         center;
    padding:            0.5em 0.25em 0.5em 0.25em;      /* 0.5em L+R to match ofp */
    font-weight:        bold;
    color:              #ffffff;                /* white */
    background-color:   #5798d0;                /* copied from header bkgd */
    border:             1px solid #000080;      /* navy */
}
.P01 .chronicles-logo:hover {
    border-color:       #ffffff;
    text-decoration:    underline;
}
/* ------------------------------------------------------------------------------------ */



.colbox,                                                 /* ground: workaround IE6 */
.inner {               border-color:       #fcfceb;}     /* transparency bug */

.navcol h3,
.bc-dark {             border-color:       #d6d69a;}       /* dark */

/* palette: background-color */

.navbar-top { background-color: transparent; }

.navbar,
.navcol ul,
.navcol ul :hover,
.bg-light
 {            background-color:   #f0f0ce;}           /* bg-light */

.bg-medium,
.navcol h3,
.navcol h5    {           background-color:   #d1d1b6;
                       background-color:   #e3e3b3; }

.bg-dark {             background-color:   #c4c4ab; }      /* v 86% */




a.faqret:hover {          font-style: italic;    }
.faqa { clear: both; padding-top: 0.5em;}
a.faqret {  font-size: 80%; font-weight: bold; text-decoration: none; clear: right;
    float: right;
    border-bottom: 1px solid #118321;
    display: block;
    width: 100%;
    text-align: right; }
a:link.faqret,
a:visited.faqret,
a:hover.faqret,
a:active.faqret {text-decoration: none; color: #0d5583; }


span.linkarrow {
  float:                right;
  padding:              3px 0 0 0.5em;
  background-image:     url(/images/m_tiny_arrow-v1-18x30.jpg);
  background-position:  right;
  background-repeat:    no-repeat;
  width:                30px;
}

/* new stuff  */
span.superscript {vertical-align: super; font-size: x-small;}




/* Potentially deprecated selectors *******************************************/

.sidebar2 {
    background-color: #f0f0ce;
    padding:            1em;
    }
.sidebar2.right { margin-left: 0.5em; }

.sidebar2 {font-size: smaller}

/* clears ****************************************************************************/
.c  {     clear:  both;  }
.cl {     clear:  left;  }
.cr {     clear:  right; }
.cn {     clear:  none;  }

/* widths ***************************************************************************/
.wauto {  width:  auto;  }
.full {   width:  100%;  }
.w100 {   width:  100%;  }
.w95 {    width:  95%;   }
.w90 {    width:  90%;   }
.w80 {    width:  80%;   }
.w70 {    width:  70%;   }
.w67 {    width:  67%;   }
.w60 {    width:  60%;   }
.w55 {    width:  55%;   }
.w50 {    width:  50%;   }
.w49 {    width:  49%;   }
.w48 {    width:  48%;   }
.w47 {    width:  47%;   }
.w45 {    width:  45%;   }
.w40 {    width:  40%;   }
.w35 {    width:  35%;   }
.w33 {    width:  33.3%;   }
.w30 {    width:  30%;   }
.w25 {    width:  25%;   }
.w24 {    width:  24%;   }
.w20 {    width:  20%;   }
.w17 {    width:  17%;   }
.w10 {    width:  10%;   }


div.panel {float: left;}
.panel img { display: block; margin-left: auto; margin-right: auto; width: 96% }
.panel p {padding: 0 2%;}

/* heights ********************************************************************/
.h100 { height: 100%;  }     /* calculate wrt height of containing block */
.h95 {  height: 95%;   }
.h90 {  height: 90%;   }
.h80 {  height: 80%;   }
.h70 {  height: 70%;   }
.h67 {  height: 67%;   }
.h60 {  height: 60%;   }
.h50 {  height: 50%;   }
.h45 {  height: 45%;   }
.h40 {  height: 40%;   }
.h33 {  height: 33%;   }
.h30 {  height: 30%;   }
.h25 {  height: 25%;   }
.h20 {  height: 20%;   }
.h17 {  height: 17%;   }
.h10 {  height: 10%;   }



/* Lamb-O-Meter ***************************************************************/
#lambometer {
  height:               34px;
  position:             absolute; right: 10%; bottom: 10%;
  text-align:           center;
  color:                white;
  background-color:     #006400 !important;                /* darkgreen */
  font-size:            2em;
  font-family:          arial;
  font-weight:          bold;
  letter-spacing:       0.15em;                     /* effective right padding is */
  padding:              0.1em 0.1em 0.1em 0.25em;   /* letter-spacing + padding-right */
  border:               medium outset white;
}

span.colophon {
  background-image:     url(/images/m-tiny-12x21.jpg);
  background-position:  left;
  background-repeat:    no-repeat;
  padding:              0 0 0 25px;
  margin-left:          0.5em;
}
/* OFP logo -- block level link that looks like the OFP page banner */
.P01 .ofp-logo:link,
.P01 .ofp-logo:visited,
.P01 .ofp-logo {
    display:            block;
    margin:             0.5em 0 0.5em 1em;
    font-family:        Arial,Verdana,sans-serif;
    text-align:         left;
    padding:            0.5em 0 0.5em 0.5em;      /* 0.5em L+R to match chronicles */
    font-weight:        normal;
    font-size:          90%;
    color:              #004000;
    background-color:   #eef8cc;
    border:             1px solid;
}
.P01 .ofp-logo strong {
    font-family:        "Arial Black", Arial, sans-serif;
    font-size:          110%;
}
.P01 .ofp-logo:hover {
    border-color:       orange;
    text-decoration:    underline;
}

/* printer friendly */
h6.pfp {
    color:                  #FFFFFF;            /* white */
    background-color:       #FFA500;            /* orange */
    border:                 1px solid #008000;  /* green */
    font-family:            arial,
                            helvetica,
                            verdana,
                            sans-serif;
    padding:                0 0.5em;
    margin-top:             0;
    margin-bottom:          0.5em;
    float:                  right;
}

/*  Table Pedigrees ----------------------------------------------------------------------
 *  g0=animal; g1=parents; g2=grandparents etc
 */
.tped1 {
    font-family:        arial;
    color:              #004010;
    background-color:   #c4c498;
    border-width:       1px;
    border-style:       none;
    border-color:       #004010;
    border-spacing:     2px;
    border-collapse:    separate;
    margin-top:         0.5em;
    margin-bottom:      0.5em;
    width:              100%;   /* of container */
    }
table.tped1  thead  th {text-align: center;}
.g0, .g1, .g2, .g3, .g4 { background-color: #d4d4a8;     padding: 0 1em;}
.g0 {   font-size: medium; }
.g1 {   font-size: small;   }
.g2 {   font-size: x-small;   }
.g3 {   font-size: xx-small;   }
.g4 {   font-size: xx-small;   }

figure table.tped1 thead th {font-size: small; font-weight: bold;}

/* British Matrilineage ---------------------------------------------------------------
 *      used in genetics/mat2.html
 */
.brml ul {
    padding:            0;
    font-family:        Arial, sans-serif;
    font-weight:        bold;
    width:              10em;
    width:              50%;
}
.brml ul            {  width:  40%;    margin-left: 5%; }

.brml ul ul         {  width:  100%;   margin-left: 25%; }
.brml ul ul         {  margin: 0.2em 0 0.2em 5em;}

.brml li {
    margin:             0;
    list-style-type:    none;
    margin-bottom:      0.2em;
    display:            list-item;
}

.brml div{
    border-style:       solid;
    border-width:       1px 1px 1px 1px;;
    padding-left:       0.5em;
    margin-left:        0.5em;
}
.bmrl span.oi {
    display:    inline-block; float: right;
    padding-right:      1em;
}

.brml .uk {color: #008000; border-color: #000080;}             /* green */ /* 90 import */
.brml .qo {color: #808080;}              /* grey */ /* quebec only */
.brml .oi {color: #000080;}              /* navy */ /* oregon import */
.brml .cn {background-color: #85ffde;}   /* clan n - Ana */
.brml .cf {background-color: #afaa57;}   /* clan f - Aphrodite */
.brml .ca {background-color: #c060cc;}   /* clan n - Amy */
.brml .cs {background-color: #d0ff46;}   /* clan s - Saphire */
.brml .ct {background-color: #df4545;}   /* clan t - Theresa */
.brml .cb {background-color: #597cb2;}   /* clan b - Samba */
.brml .cp {background-color: #cc8049;}   /* clan p - Polka */
.brml .cm {background-color: #4fcc49;}   /* clan m - Maria */
.brml .cr {background-color: #ceffff;}   /* clan p - Rosemary */
.brml .ce {background-color: #7e48ff;}   /* clan e - Emerald */

.brml div.ind { float: right; display: inline-block; width: 1em;}

/* Recipe ------------------------------------------------------------
 *      styles for recipe pages
 */
#recipeMenu {
  border:   1px solid #4F0F0F;
  font-family: Arial;
  color:    #4F0F0F;
  background-color: #e3e3b3;
}
#recipeMenu p { font-size: small ; padding: 0 1em; }
#recipeMenu > p { font-size: inherit; font-weight: bold; border: 1px solid #4f0f0f;
  margin-left:  1em; border-radius: 2px; float: left; }
#recipeMenu a { color: inherit; }

.recipe { font-family: Georgia;}

.recipe .ingredients {
    font-family:        arial;
    background-color:   #FDEDCC;
    border:             1px solid;
    border-radius:      10px;
    width:              36%;
    float:              left;
    padding-left:       1.5em;
    padding-bottom:     0.5em;
    margin-bottom:      1em;
    margin-right:       3%;
}
.recipe .description,
.recipe .comment {      font-style: italic; }

.recipe h1,
.recipe p.description {  text-align: center; }

.recipe .bonappetit {
    color:              #118321;
    font-weight:        bold;
}
.recipe-list li > p {        /* used in index file */
    font-style:          italic;
    margin-left:         8%;
    margin-top:          0.2em;
}
.recipe-list li {
    margin-left:         5%;
    margin-top:          0em;
    list-style-type:     none;
    text-decoration:     none;
    color:               inherit;
}
.recipe-list ul a {
    margin-left:         2em;
    margin-top:          0em;
    text-decoration:     none;
    color:               inherit;
}
.recipe-list ul a {     font-size: 150%;}
.recipe-list ul ul a {  font-weight: bold; font-family: Arial; font-size: 130%; color: #004010;}
nav .recipe p { display: none }
nav .recipe { font-family: inherit; }

/* ------------------------------------------------------------------------------------ */
@media print {          /* only going to look good for page layout based on pct */
body {
    background-color:       transparent !important;
    font-size:              8pt;           /* aim for 7-1/2" page same as 1024 px */
}
hr {
    background-color:       #2F4F4F;    /* override transparency when printing */
}
#banner { display: block;}
#banner .menu {     display:            none;}

#footer { display: none;}
} /* @media print */


