/* CSS Document */
/**
* BEGIN CSS SELECTOR OVERWRITES
*
* The following selectors are intended to overwrite the main style sheet.
* Note that the link to this style sheet must be placed AFTER the link
* to the main style sheet as in the following example.
*
*
* Western States Marriage Search Form
*
*
*
*
* NOTE: To avoid confusion over what is being inherited and what is not,
* place the entire content of the selection tag in this section,
* NOT just part of it. This will allow you to see any changes made
* without unwanted influence from the inheritance hierarchy.
*
* For example, if you want to override the width of the content area,
* do the following:
*
* Copy the content selection tag from the main style sheet (style.css)
*
* div#content
* {
* position: relative;
* width: 700px;
* margin-left: 70px;
* border: 1px solid #A4A4A4;
* border-top: 0;
* margin-bottom: 15px;
* background: #edead9 url(../images/contentback.gif) repeat-y top left;
* overflow: hidden;
* }
*
* And paste the ENTIRE tag and ALL of its content into this document, changing
* the width tag as in the following.
*
* div#content
* {
* position: relative;
* width: 999px; /* <-- Overridden */
/* margin-left: 70px;
* border: 1px solid #A4A4A4;
* border-top: 0;
* margin-bottom: 15px;
* background: #edead9 url(../images/contentback.gif) repeat-y top left;
* overflow: hidden;
* }
*
* Notice that the overridden attribute is clearly marked that has been
* overridden.
*
* DO NOT do the following (or you will create a maintenance nightmare!):
*
* div#content
* {
* width: 700px;
* }
*
* Further note that this does not avoid inheritance problems associated with
* class selectors (e.g. a selector such as "body.subpage div#content").
*/
div#content
{
position: relative;
width: 700px;
margin-left: 70px;
border: 1px solid #A4A4A4;
margin-bottom: 15px;
background: #edead9; /* <-- Overridden */
color: inherit;
overflow: hidden;
}
div#content h3,div#content h2
{
margin: 10px 10px 0 10px; /* <-- Overridden */
}
div#breadcrumbs
{
margin: 10px 4px 0 18px;
/*padding-top: 4px;*/
font-size: 11px;
}
/* ----------------------- END CSS SELECTOR OVERWRITES ----------------------- */
/* ----------------------- BEGIN FLOATING NAVIGATION TAGS -------------------- */
/**
* USAGE EXAMPLE:
*
*
* Western States Marriage Search Form
*
*
*
*
*
*
*
*
*/
/**
* Contains the content of the page and the nested navigation float
*/
div#content div#nav
{
float: right;
width: 40%;
margin-left: 15px;
margin-bottom: 3px;
padding-top: 15px;
background-color: #dcd7ce;
color: inherit;
height: auto;
overflow: hidden;
}
/**
* Contains both of the floatNavContentHeader and floatNavHeader (the colored bars
* that say "About the Western States Marriage Record Index" and
* "Other Resources."
*/
div#contentHeaderBlock
{
text-align: center;
font-family: "Trebuchet MS", Trebuchet;
font-weight: bold;
font-size: 11px;
text-transform: uppercase;
text-shadow: #222222 -1px 1px 10px;
background-color: inherit;
color: white;
height: 16px;
letter-spacing: 2px;
}
div#contentHeaderBlock div#contentHeader
{
float: left;
background-color: #9bb0af;
color: inherit;
width: 60%;
padding: 4px 0 2px 0;
}
div#contentHeaderBlock div#floatNavHeader
{
float: right;
background-color: #959f9e;
color: inherit;
width: 40%;
padding: 4px 0 2px 0;
}
/* The h3 header is used to display the rectangular headers with the
cream background over the Western Marriage Index search form */
div#content h3,div#content h2
{
margin: 14px 0 0 0;
background-color: #f0e9bd;
color: inherit;
padding: 2px 0 2px 20px;
width: 43%;
font-size: 13px;
}
/**
* div#readableFont
*
* Use to change the font style when there is a significant amount of text.
* This is a similar effect to the main style sheet's body.subpage font, with
* the exception that ems are scalable in Internet Explorer, whereas pxs are
* are not.
*/
div#readableFont
{
font-size: .9em;
line-height: 1.5em;
}
div#content li
{
font-size: 12px;
margin: 2px 0 6px 32px;
}
div#content ul li
{
list-style: square outside url(../images/vbullet.gif);
}
div#nav li
{
font-weight: bold;
margin-bottom: 10px;
}
/**
* To quote an article found on the "MX developer's journal" website
* (available at http://mxdj.sys-con.com/read/45288.htm as of 28 Oct
* 2005):
*
* Containing Floats
*
* Keep in mind while using floats to create columnar layouts that
* floats, not just absolutely positioned boxes, are removed from
* the flow of the document. This means that a parent box doesn't
* know the float is there and thus will not expand to hold the
* child float. This may seem illogical at first, but think about
* when you are not using floats for columns, but for images placed
* in paragraphs - the most traditional use of floats. In this case,
* you want all the text to flow around the image - not just the
* text of the first paragraph where the image is placed, but all
* subsequent paragraphs that encounter the float as well. If the
* float made its container, a paragraph, expand to hold it, the
* next paragraph wouldn't start until the image ended, leaving a
* potentially large gap (see Image V). So, floats naturally stick
* out of their parent elements instead.
*
* But don't worry - there is a way to overcome this behavior when
* your layout calls for it! All you need is a block-level element,
* set to clear the float, placed within the container but after
* the floated element. This forces the container to expand down
* around the element beneath the float, enclosing the float in the
* process.
*
* Hence the following br.clear tag.
*/
br.clear
{
clear: both;
height: 0;
margin: 0;
font-size: 1px;
line-height: 0;
}
/* ----------------------- END FLOATING NAVIGATION TAGS -------------------- */
