/* style8.css
* ver a 20090127
* ver b 20090131 compact layout and reduce redundancy
*
*/
/* Layout ----------------------------------------------------------------------------- */
body {
min-width: 747px; /* 800 window leaves 767 with scrollbar on */
padding: 5px 10px;
margin: auto; /* override browser default */
}
p {
margin: 0.5em 0;
}
ul, ol, dl {
padding-left: 1em;
margin: 0.5em 0;
margin-left: 1em;
}
hr {
margin-top: 0.5em;
margin-bottom: 0.5em;
height: 1px;
width: 75%;
border-style: none;
clear: both;
}
p.citation {
font-size: 90%;
font-style: italic;
}
/* list elements */
dt {
font-family: Georgia, serif;
font-weight: bold;
display: list-item;
list-style-type: disc;
margin: 0.5em 0;
}
dd {
font-family: Arial, sans-serif;
font-size: 90%;
margin: 0.5em 0;
}
img {
margin: 0.3em 1.0em;
border-width: 2px;
border-style: solid; /* MUST not be none */
}
blockquote {
font-style: italic;
font-size: smaller;
}
/* Headlines ------------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
clear: both;
text-align: left;
}
h1 {font-size: 1.90em; margin: 0.48em 0 0.24em 0;}
h2 {font-size: 1.50em; margin: 0.38em 0 0 0;}
h3 {font-size: 1.40em; margin: 0.35em 0 0 0;}
h4 {font-size: 1.19em; margin: 0.30em 0 0 0;}
h5 {font-size: 1.15em; margin: 0.28em 0 0 0;}
h6 {font-size: 0.9em; margin: 0.50em 0 0.20em 0;}
h2 + h1,
h4 + h3,
h6 + h4 {margin-top: 0 !important;}
body > h1,
.column12 .inner > h1,
.column23 .inner > h1,
.column2 .inner > h1 {
text-align: center; /* won't work if container was inline-block! */
margin-top: 0.2em;
}
.column12 .inner > h2,
.column23 .inner > h2,
.column2 .inner > h2 {
margin-top: 0.2em;
}
/* Typography ------------------------------------------------------------------------*/
.alt, .ff-sans-serif
{ font-family: Arial, Helvetica, Verdana, sans-serif;}
.main, ff-serif, body {
font-family: Georgia, "Palatino Linotype", Palatino, "Century Schoolbook",
"Times New Roman", serif;}
dt {
font-family: Georgia, serif;
font-size: 1.19em;
margin: 0.30em 0;
font-weight: bold;
display: list-item;
list-style-type: disc;
}
/* --------------------------------------------------------------- color and typography */
.styleA {
font-size: 90%;
font-family: Arial, Helvetica, Verdana, sans-serif;
}
.styleA h1,
.styleA h3,
.styleA h5 {
font-family: Georgia, "Palatino Linotype", Palatino, "Century Schoolbook",
"Times New Roman", serif;
}
.styleA h2,
.styleA h4 { text-transform: uppercase; }
/* ------------------------------------------------------------------------- */
.styleB {
font-size: 85%;
font-family: Arial, Helvetica, Verdana, sans-serif;
}
.styleB h1,
.styleB h3,
.styleB h5 {
font-family: Georgia, "Palatino Linotype", Palatino, "Century Schoolbook",
"Times New Roman", serif;
}
.styleB h2,
.styleB h4 { text-transform: uppercase; }
/* ------------------------------------------------------------------------------------ */
.styleC {
font-size: 80%;
font-family: Arial, Helvetica, Verdana, sans-serif;
}
.styleC h1,
.styleC h3,
.styleC h5 {
color: navy;
}
.styleC h2,
.styleC h4,
.styleC h6 {
font-family: Georgia, "Palatino Linotype", Palatino, "Century Schoolbook",
"Times New Roman", serif;
}
.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 Navication Column-------------------------------------------- */
.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: 1em; /* percentage mishandled by IE6 */
}
.navcol h1,
.navcol h3,
.navcol h5 {
color: navy;
font-family: Arial, Helvetica, Verdana, sans-serif;
}
.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;
}
.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;
}
.navbar-top p {
text-align: right;
margin: 0;
padding-right: 1em;
}
.colbox { /* purpose - to preserve hn margins below floats */
clear: both;
border: 1px solid; /* color set as background elsewhere */
}
/* Color -----------------------------------------------------------
* ** palette **
* #118321 green in omnia 'm'
* #4F0F0F dark brick red
* #2F4F4F darkslategray
* #B0C4DE aka lightsteelblue
* #C0D4EE aka xtralightsteelblue
* #C8DCF6 aka xtraxtralightsteelblue
* #000080 navy
*/
/* Palettes ----------------------------------------------------------------- */
.P02 { background-color: #efefd1;
background-color: #ffffef;
}
.L3Cf {
background-color: #FAFAEC; /* want to lighten #F0F0E3 */
background-color: #ffffef;
}
.P01 hr {
color: #6f6f62; /* used by FF for
*/
background-color: #6f6f62; /* used by IE */
border-color: #6f6f62;
}
/* Palettes: color */
.P01 .sold {color: #ff0033;}
/* Hue 60 color panel
increase saturation in 7% steps
decrease value in 5% steps
#fcfceb hsv 30 07d 99d bg-ground
#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
*/
.P01,
.P01 .navbar-top,
.P01 .navbar-top a:link,
.P01 .navbar-top a:visited,
.P01 .navbar-top a:hover,
.P01 h2,
.P01 h4 { color: #4c0f0f;} /* 0 80 30 deep red */
.P01 h1,
.P01 h3,
.P01 h5,
.P01 h6,
.P01 dt,
.P01 strong,
.P01 .crumbs { color: #004010;} /* dk grn */
.P01 h3 a:link,
.P01 h3 a:visited { color: #004010;}
.P01 a:link,
.P01 .navcol a:visited,
.P01 #banner a:visited { color: #0d5583;} /* 203 90 51 */
.P01 a:visited { color: #5d5c1c;} /* 59 70 36 */
/* Palettes: border-color */
.P01 { border-color: #bdbd63;}
.P01 a:link img,
.P01 a:visited img,
.P01 img { border-color: #bdbd63;} /* xxdark */
.P01 a:hover img,
.P01 a:active img { border-color: #fcfceb;} /* ground */
.P01 a.more:active { border-color: #fffff7;}
.P01 .colbox, /* ground: workaround IE6 */
.P01 .inner { border-color: #fcfceb;} /* transparency bug */
.navcol h3,
.P01 .bc-dark { border-color: #d6d69a;} /* dark */
/* palette: background-color */
.P01 .navbar-top,
.P01 #banner span, /* so text in a long menu will mask the logo */
.P01 .bg-ground,
.P01 { background-color: #fcfceb;} /* ground */
.P01 .navbar,
.P01 .navcol ul,
.P01 .navcol ul :hover,
.P01 .bg-light { background-color: #f0f0ce;} /* light */
.P01 .bg-medium,
.P01 .navcol h3,
.P01 .navcol h5,
.P01 #banner { background-color: #d1d1b6;
background-color: #e3e3b3; }
.P01 .bg-dark { background-color: #c4c4ab; } /* v 86% */
.P01 a:hover,
.P01 a.more:hover { background-color: #f7f7e4;}
.P01 a:active { background-color: #fffff7;} /* */
.P01 a.more,
.P01 p.more,
.P01 span.more { background-color: #E5E5C8;}
/* links ----------------- important: preserve order of these rules -- LVHA */
a:link,
a:visited { text-decoration: underline; }
.navcol a:link,
.navcol a:visited { text-decoration: none; }
.navcol a:hover,
.navcol a:active { text-decoration: underline; }
.navbar-top a:link,
.navbar-top a:visited { text-decoration: none; }
.navbar-top a:hover,
.navbar-top a:active { text-decoration: underline; }
a:link { color: #006400;} /* DarkGreen */
a:visited { color: #008b8b;} /* DarkCyan */
a:hover { background-color: #DCF0FF;} /* lighten default background color */
a:active { background-color: #f8f8f8;} /* not quite white */
/* visually active border around link images */
a:link img { border-color: #008000;} /* green */
a:visited img { border-color: #808000;} /* olive */
a:hover img { border-color: #32CD32;} /* lime green */
a:active img { border-color: #00FF00;} /* lime */
a:hover {
font-weight: bold;
font-weight: normal;
text-decoration: underline;
}
a.more, p.more, span.more { /* "more" -- continued link to appear inline */
background-color: #f7f7e4;
border-color: #118321; /* logo green */
border-style: solid;
border-width: 1px;
padding-left: 5px;
padding-right: 5px;
font-weight: normal;
text-decoration: none;
font-size: 90%;
text-align: right;
margin: -1px 0 -1px 0.2em;
margin: 0.25em 0 0.25em 0.5em;
display: block;
display: inline-block;
float: right;
}
a.more:hover { background-color: #fff4d4; }
a.more:active { border-color: #00ff00; }
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;
}
/* Layouts --------------------------------------------------------------------- */
.inner {
padding: 0 0.5em; /* border contains margins of contained elements */
border: 1px solid;
border-color: transparent; /* unrecognized by IE6 */
}
/*
* 0.1% tolerance between adjacent s works for IE7 not IE6
* use 0.2% gap for portability
*
* columnN classes have no border/margin/padding so that width works as needed
* margin/border/padding to be provided by contained elements
* design intent is to line columnN div's with 'class="inner"' div's
*/
.L3Ca .banner { width: 100%; } /* are these two obsolete ?? */
.L3Ca .banner .inner { display: block; }
.L3Ca .column12 { float: left; width: 67.4%; }
.L3Ca .column1 { float: left; width: 29.9%; }
.L3Ca .column2 { float: right; width: 69.9%; }
.L3Ca .column3 { float: right; width: 32.4%; }
/* L3Cb -- structure 20 [ 40 40 ] 1(23) */
/* Use for internal pages with navigation column on left */
.L3Cb .column1 { float: left; width: 19.9%; }
.L3Cb .column23 { float: left; width: 79.9%; } /* was float: left */
.L3Cb .column2 { float: left; width: 49.9%; }
.L3Cb .column3 { float: right; width: 49.9%; }
/* L3Cc -- structure 20 [ 50 30 ] 1(23) */
/* Use for internal pages with navigation column on left */
.L3Cc .column1 { float: left; width: 19.9%; }
.L3Cc .column23 { float: right; width: 79.9%; }
.L3Cc .column2 { float: left; width: 62.4%; }
.L3Cc .column3 { float: right; width: 37.4%; }
/* L3Ce -- structure [ 33 33 ] 33 (12)3 */
.L3Ce .column12 { width: 66.6%; float: left; }
.L3Ce .column1 { width: 49.9%; float: left; }
.L3Ce .column2 { width: 49.9%; float: right; }
.L3Ce .column3 { width: 33.3%; float: right; }
/* L3Cf -- structure [ 37.5 37.5 ] 25.0 */
/* Use for soaysheep.com home page */ /* obsolete !? */
.L3Cf .column12 { width: 74.9%; float: left; }
.L3Cf .column1 { width: 49.9%; float: left; }
.L3Cf .column2 { width: 49.9%; float: right; }
.L3Cf .column3 { width: 24.9%; float: right; }
/* L2C -- structure 50 50 */
.L2C .columnLeft { width: 49.9%; float: left; }
.L2C .columnRight { width: 49.9%; float: right; }
.L2C .column1 { width: 49.9%; float: left; }
.L2C .column2 { width: 49.9%; float: right; }
/* L2Cb -- structure 20 80 */
.L2Cb .column1 { width: 19.9%; float: left; }
.L2Cb .column2 { width: 79.9%; float: right; }
/* L1Ca -- */
.L1Ca .column { width: 100%; float: left; } /* float for consistency */
/* ------------------------------------------------------------------------------------ */
#banner {
height: 52px;
border-width: 1px; /* need a border to hold p.menu margin inside */
border-style: hidden;
background-color: inherit;
background-image: url(/images/banner-v4-smr.jpg);
background-repeat: no-repeat; /* seems to default to repeat */
background-position: 25% 0%;
background-position: 50% 50%;
font-family: arial, helvetica, verdana, sans-serif;
}
#banner.ssc {
border-bottom-width: 0;
background-image: url(/images/banner-v4-ssc.jpg)
}
#banner.homepage {
background-position: center;
}
#banner .menu {
margin: 0pt auto 0 auto;
text-align: right;
font-size: 100%;
font-weight: normal;
}
#banner span {
background-color: inherit; /* so text in a long menu will mask the logo */
padding: 0 1.0em 0 0.5em;
}
/* bannerframe: to mimic blue mountain green frame */
#bannerframe1 { border-color: #00ad56 #103321 #103321 #00ad56; }
#bannerframe2 { border-color: #006633; }
#bannerframe3 { border-color: #103321 #00ad56 #00ad56 #103321; }
#bannerframe1,
#bannerframe2,
#bannerframe3 { border-width: 1px; border-style: solid; }
/* footer for all pages */
#footer {
clear: both; /* below any floating elements */
width: auto; /* should expand to full width */
padding: 2px; /* keep content a tad away from border */
margin: 0 -1px 0 -1px;
margin: 0.5em 0 1em 0;
border: none;
border-top-color: inherit;
border-top-width: 2px;
border-top-style: solid;
}
#footer {
font-size: 6pt;
text-align: right;
font-family: verdana, arial, sans-serif;
color: inherit;
padding-right: 1em;
}
#copyright {
float: left;
text-align: left;
padding-left: 1em;
display: inline-block;
}
#timestamp { /* used only within #footer */
text-align: right;
}
/* ======================================================================
* Sidebar
* not much used anymore (just gestation.shtml)
*/
.sidebar {
background-color: #D2B48C; /* tan */
color: black;
font-family: Verdana, serif;
padding: 0.5em;
}
.sidebar.left {
float: left;
margin: 0em 1em 0em 0em;
}
.sidebar.right {
float: right;
margin: 0em 0em 0em 1em;
}
.sidebar ul.nomarker {
list-style-type: none;
}
/* ---------------------------------------------------------------------- classes */
.c { clear: both; }
.cl { clear: left; }
.cr { clear: right; }
.cn { clear: none; }
img.h10em { height: 10em; }
.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%; }
.w50 { width: 50%; }
.w49 { width: 49%; }
.w48 { width: 48%; }
.w47 { width: 47%; }
.w45 { width: 45%; }
.w40 { width: 40%; }
.w33 { width: 33%; }
.w30 { width: 30%; }
.w25 { width: 25%; }
.w20 { width: 20%; }
.w17 { width: 17%; }
.w10 { width: 10%; }
.h100 { height: 100%; } /* calculate wrt container width */
.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%; }
.left { float: left; }
.right { float: right; }
.center {margin-left: auto; margin-right: auto;} /* may not work if higher specificity */
img.center { margin-left: -2px;
margin-right: -2px; }
img.left { margin-left: -2px; } /* to align with .center images */
img.right { margin-right: -2px; } /* to align with .center images */
/* Lamb-O-Meter */
.lambometer {
height: 34px;
text-align: center;
float: right;
display: inline;
color: white;
background-color: #006400 !important; /* darkgreen */
font-size: 2em;
letter-spacing: 4px;
font-family: arial;
font-weight: bold;
padding: 0.1em 8px 0.1em 10px;
margin: 3px 13%;
margin: 3px 5%;
border-style: double;
border-style: outset;
border-width: medium;
border-color: #4F0F0F;
border-color: 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;
}
/* blue mountain box ------------------------------------------------------------------ */
#BMheader {
display: block;
color: #006633; /* Kate's green */
background-color: #F0F0E3; /* mimic Kate's background color */
text-align: center;
padding: 0.1em 0;
font-family: Helvetica, Arial, sans-serif;
}
#BMheader a:link,
#BMheader a:visited { text-decoration: none;}
#BMheader:hover { text-decoration: underline; }
#BMheader .line1 { font-size: 1em; font-weight: bold;}
#BMheader .line2 { font-size: 0.83em; font-weight: normal; text-transform: capitalize;}
#BMhf1 { background-color: #f0f0e3; } /* heritable */
#BMhf1 { border-color: #00ad56 #103321 #103321 #00ad56; }
#BMhf2 { border-color: #006633; }
#BMhf3 { border-color: #103321 #00ad56 #00ad56 #103321; }
#BMhf1, #BMhf2, #BMhf3 {
border-width: 2px;
border-style: solid;
}
#BMhf1 { margin: 0.5em 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;
}
/* 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;
}
.blocknote {
margin-left: 3em;
border: 1px solid;
padding: 0.3em;
font-size: 90%;
}
/* brml -- British Matrilineage display */
.brml ul { margin: 0.2em 0 1em 0;}
.brml ul ul { margin: 0.2em 0 0.2em 5em;}
.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 li {
margin: 0;
list-style-type: none;
margin-bottom: 0.2em;
display: list-item;
}
ul > li {border-right: 1px solid; } /* shouldn't display in IE6 which groks it anyway */
ul > li {border-right: none; } /* shouldn't display in IE6 which groks it anyway */
.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;}
/* IE6 does not understand the child '>' selector */ /* save save save save */
/* ------------------------------------------------------------------------------------ */
@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 */