/* Cascading Style Sheet for Flutopedia.com
*/

body {
	background-color: #fcfaf2;
	background-image: url(../img/FPbkg1.gif);
	background-repeat: repeat;
	color: black;
	margin: 0px;
}

/* Core attributes for all basic elements */

p, td, th, ul, ol, li, caption {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	/* Tried Calibri 11/7/10 as primary font - nice, but **much** smaller than Verdana -
		would need substantial adjustments to use this! */
	/* font-family: Verdana, Arial, Helvetica, sans-serif; */
	/* font-size: x-small; A tad too *small* in IE7. Changed 5/29/10 to make default reading font larger */
	/* font-size: small; A tad too *large* in IE7. */
	/* One issue with this 14px setting is that Safari seems to take a LONG time to resize the
		window, on a CTRL-+
	*/
	font-size: 15px;
	
	/* line-height: 1.3em; Original setting */
	line-height: 1.6em;
}


/* Lists */

ul {
	/* line-height: 1.5em; */
	list-style-image: url(../img/bullet_5x13_brown_trans.gif);
	list-style-type: square;
	margin: 0em;
	padding: 0.0em 0.3em 0.2em 1.8em;		/* Top Right Bottom Left */
}
ul ul {
	list-style-image: none;
	list-style-type:disc;
}
ul ul ul {
	list-style-image: none;
	list-style-type:square;
}


ol {
	/* line-height: 1.5em; */
	list-style-type: decimal;
	margin: 0em;
	padding: 0.0em 0.3em 0.2em 1.8em;		/* Top Right Bottom Left */
}
ol ol {
	list-style-type:upper-alpha;
}
ol ol ol{
	list-style-type:lower-alpha;
}


li {
	margin: 0.5em 0.0em 0.5em 0.0em;		/* Top Right Bottom Left */
}

/* Special style classes */

.small {
	font-size: 85%;
}


.footnote {
	font-size: 90%;
}

/* General emphasis within text, as in THIS IS REALLY IMPORTANT. */

.emphasis {
	font-style: italic;
	font-weight: bold;
}
.bold {
	font-weight: bold;
}

/* A single word or phrase that is being defined or discussed.
	It might typically be included in "quotations" in other typesetting situations.
*/

.keyword {
	font-weight: bolder;
}


/* Style for SNAFT finger diagrams */
.snaft {
	font-family: "Courier New", Courier, monospace;
	font-size: 120%;
	font-weight: bold;
}

/* Preformatted - used for code */
pre {
	font-family: "Courier New", Courier, monospace;
	font-size: 120%;
	font-weight: normal;
}

code {
	font-family: "Courier New", Courier, monospace;
	font-size: 120%;
	font-weight: normal;
}

.expression {
	font-style: italic;
}

.QED {
	text-align:right;
	font-weight: bold;
}

/* Comments that are part of preformatted code */

.comment {
	color: #000066;
	font-style: italic;
}

/* Highlight specifically in red for very special cases */

.red {
	color:#CC0000;
}

/* Format for a URL */
.url {
	font-family: "Courier New", Courier, monospace;
	font-weight: bold;
}

/* Format for a file path or file name */
.fileName {
	font-family: "Courier New", Courier, monospace;
	font-weight: bold;
}

/* Title of a Book */
.bookTitle {
	font-style: italic;
}


/* Indented paragraph */

.paraIndent {
	padding: 0.5em 3em 0.5em 3em;		/* Top Right Bottom Left */
}

/* Styles for References in the Bibliography.
	.Biblio is set up for hanging indent.
	.BiblioAbstract is the optional abstract paragraph following a citation.
*/

.Biblio {
	margin-left: 2em;
	text-indent: -2em;
}

.CitationTag {
	font-weight: bold;
}

.BiblioAbstract {
	margin-left: 4em;
	margin-right: 4em;
}


/* Paragraph leading text. Usually used for things like definitions ... */

.paraLead {
	font-weight: bold;
}


/* Page footer text */

.footer {
	font-size: 70%;
	text-align: center;
}


/* Internal and external link definitions across this site */

A:link {
	color: #522817;
	text-decoration: underline;
}

/* Tried to use a dotted underline for these links, but it just looked different and
	didn't work the same. For example, it did not change to green when we had an
	external link. So, we now just make it darker.
*/

A:visited {
	color: #000000;
	text-decoration: underline;
/*	text-decoration: none;
	border-bottom: 1px dotted #522817;
*/
}

A:hover {
	color: #733820;
	text-decoration: underline;
}

A:active {
	color: #994a2b;
	text-decoration: underline;
}

/* Additional attributes for external link definitions to pages on other web sites,
	done explicitly in the Anchor tag with a style="external" attribute.
*/

A.external:link, A.external:visited, A.external:hover, A.external:active {
	font-style:italic;
}

/* Definition for the top-right text "www.Flutopedia.com " plus the icon graphic. These are links
	to the home page, done explicitly in the Anchor tag with a style="headURL" attribute.
*/

.headURL {
	color: #d4c9be;		/* was cfa493 - changed 10/15/2010 */
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}
A.headURL:link, A.headURL:visited, A.headURL:hover, A.headURL:active {
	color: #d4c9be;		/* was cfa493 - changed 10/15/2010 */
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}


/* Headers
	The margin-top seems to be 1em by default, so set it to something larger.
*/

h1, h2, h3, h4, h5, h6 {
	color: #522817;
	font-weight: bold;
	margin-left:-0.75em; /* Dangerous, but seems to work ... the CenterBox (below) is padded by 1.5em on the left */
}

/* This is used *only* for the page title.
	Note that Papyrus, used for the .pageTitle, is *substantially* smaller for a given font-size than Verdana.
	This creates an issue: if the browser does not have Papyrus and falls back to Verdana, the page title
	will appear much larger than intended.
	For Verdana, 130% seems about right.
	For Papyrus, 180% seems good.
*/

h1 {
	font-size: 180%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.4em;
}

h1.pageTitle {
/*	line-height: 0em;
	margin-top: 0em;
*/
	font-family: ClintFont, Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}

/* Standard page major heading */

h2 {
	font-size: 120%;
	margin-top: 2em;
}

h3 {
	font-size: 110%;
	margin-top: 1.6em;
}

h4 {
	font-size: 100%;
	margin-left: 0em;
	margin-top: 1.5em;
}

h5 {
	font-size: 90%;
	margin-left: 1em;
	margin-top: 1.4em;
}

h6 {
	font-size: 80%;
	margin-left: 2em;
	margin-top: 1.3em;
}



/* Left Panel titles and boxes for tables containing UL Links */

.LPBoxTitle {
	background: none transparent scroll repeat 0% 0%;
	/*display: inline;*/
	font-size: 90%;
	margin: 0em;
	padding: 1.5em 0em 0.2em 0.4em;		/* Top Right Bottom Left */
	white-space: nowrap;
	width: 15em;
	/*text-transform: lowercase;*/
}

.LPBox {
	background-color: white;
	border-collapse: collapse;
	border-top: #e3d7cc 1px solid;
	border-left: #e3d7cc 0px solid;
	border-right: #e3d7cc 1px solid;
	border-bottom: #e3d7cc 1px solid;
	color: black;
	font-size: 90%;
	width: 14em;
}

.LPBox UL {
/* not needed ... currently inherited from the main UL definition */
/*	font-size: 95%;
	line-height: 1.5em;
*/
/*	list-style-image: url(../img/bullet_5x13_brown_trans.gif);
	list-style-type: square;
	margin: 0em;
	padding: 0.4em 0.3em 0.2em 1.8em;
*/
}

.ShareBox {
	line-height: 0.6em;
	margin: 0em;
	padding: 0.2em 0.2em 0.3em 0.5em;		/* Top Right Bottom Left */
}

/* Main Content area */

.ContentBox {
	background-color: white;
	border-top: #e3d7cc 1px solid;
	border-bottom: #e3d7cc 1px solid;
	border-left: #e3d7cc 1px solid;
	border-right: #e3d7cc 0px solid;
	/* Note that the major Headers (H1, H2) above are outdented ) by margin-left
	    by 0.75em. */
	padding: 1em 1em 2em 1.5em;		/* Top Right Bottom Left */
}

/* Styles for images */

/* Tables for special fancy boxed-photos on the left, right, and center of a page.
	Note that there is no "float: center" ... this must be done with the margin-left and -right properties,
	which seem to work on all browsers.
	align=center in the <table> tag, except that only works on IE!!
   */
   
table.photoLeft, table.photoCenter, table.photoRight {
	background-color:#fcfaf2;
	border-top:#d3c7bc 2px solid;
	border-left:#c3b7ac 2px solid;
	border-right:#a3978c 2px solid;
	border-bottom:#93877c 1px solid;

}
	
table.photoLeft {
	float:left;
		margin: 0.6em 1.0em 0.6em 0.6em;		/* Top Right Bottom Left */
}

table.photoRight {
	float:right;
		margin: 0.6em 0.0em 0.6em 0.6em;		/* Top Right Bottom Left */
}

/* Approved way to center a table, according to http://theodorakis.net/tablecentertest.html
	It does seem to work on all browsers, except IE 7, which requires the <table align=center ...>
*/

table.photoCenter {
	margin-left: auto;
	margin-right: auto;
}

.photoLeft td, .photoCenter td, .photoRight td {
	background-color:#fcfaf2;
	border-top:#93877c 1px solid;
	border-left:#a3978c 1px solid;
	border-right:#c3b7ac 1px solid;
	border-bottom:#d3c7bc 1px solid;
}

/* Paragraph tag for the <p> contents of the lower box in a .photoLeft/Right/Center table */
.photoCaptionCenter {
	font-size: 100%;
	font-style:italic;
	line-height:1.33;
	margin: 2px 5px 2px 5px;		/* Top Right Bottom Left */
	text-align: center;
}


/* Quoted text ...
	NOTE that the <p> tag CANNOT be used inside this, or the font will revert back to
	the paragraph font and the padding will be overridden.
*/

blockquote {
	background-color: #fcfaf2;  /* Light tan */
	/* font-family: Palatino, "Times New Roman", Times, serif; */
	/* Trying for a slightly hand-written type of font, like Tekton.
		Comic Sans MS is PC, Skia is a Mac font 1999 and after.
		font-family: "Comic Sans MS", Skia;
		font-size: 115%;
	*/
	font-family: "Times New Roman", Times, serif;
	font-size: 130%;
	line-height: 1.3em;
	padding: 0.5em 1em 0.5em 1em;		/* Top Right Bottom Left */
}

/* In-line quoted text */

.quotedText {
	font-style: italic;
}

/* Span tag for biblical citations, typically INSIDE of a BLOCKQUOTE.
*/

.biblicalRef {
	font-style: italic;
}

/* Sidebar stories - set of paragraph tags. */
/* Margin is space outside the paragraph-box.
	Padding is space inside the paragraph-box around the text.
	margin and padding are Top Right Bottom Left
*/

.sidebar {
	background-color: #ddFFdd;
	margin: 0em 2em 0em 2em;
	padding: 1em 2em 1em 2em;
}

/* Paragraph style for displaying HTML code (on the link_to_us.htm page) */

.displayHtmlCode {
	background-color: #ddFFdd;
	font-family: "Courier New", Courier, monospace;
	font-weight: bold;
}

/* Imported table definitions */

TABLE.greytable {
	background: #f9f9f9;
	border-top: #aaa 1px solid;
	border-left: #aaa 1px solid;
	border-right: #aaa 1px solid;
	border-bottom: #aaa 1px solid;
	border-collapse: collapse;
	margin: 1em 1em 1em 0px;		/* Top Right Bottom Left */
}
TABLE.fancytable {
	background: #f9f9f9;
	border-top: #aaa 1px solid;
	border-left: #aaa 1px solid;
	border-right: #aaa 1px solid;
	border-bottom: #aaa 1px solid;
	border-collapse: collapse;
	margin: 1em 1em 1em 0px;		/* Top Right Bottom Left */
}
.greytable TH {
	border-top: #aaa 1px solid;
	border-left: #aaa 1px solid;
	border-right: #aaa 1px solid;
	border-bottom: #aaa 1px solid;
	padding-top: 0.2em;
	padding-left: 0.2em;
	padding-right: 0.2em;
	padding-bottom: 0.2em;
}
.greytable TD {
	border-top: #aaa 1px solid;
	border-left: #aaa 1px solid;
	border-right: #aaa 1px solid;
	border-bottom: #aaa 1px solid;
	padding-top: 0.2em;
	padding-left: 0.2em;
	padding-right: 0.2em;
	padding-bottom: 0.2em;
}
.fancytable TH {
	border-top: #aaa 1px solid;
	border-left: #aaa 1px solid;
	border-right: #aaa 1px solid;
	border-bottom: #aaa 1px solid;
	padding-top: 0.2em;
	padding-left: 0.2em;
	padding-right: 0.2em;
	padding-bottom: 0.2em;
}
.fancytable TD {
	border-top: #aaa 1px solid;
	border-left: #aaa 1px solid;
	border-right: #aaa 1px solid;
	border-bottom: #aaa 1px solid;
	padding-top: 0.2em;
	padding-left: 0.2em;
	padding-right: 0.2em;
	padding-bottom: 0.2em;
}
.greytable TH {
	background: #f2f2f2;
	text-align: center;
}
.fancytable TH {
	background: #f2f2f2;
	text-align: center;
}
.greytable CAPTION {
	font-weight: bold;
}
.fancytable CAPTION {
	font-weight: bold;
}

/* FP  Standard 3D table colors */

table.fptable {
	background-color:#ece4d8;
	border-top:#e3d7cc 1px solid; /*Brown very light */
	border-left:#e3d7cc 1px solid; /*Brown very light */
	border-right:#d4c9be 1px solid; /*Brown light */
	border-bottom:#d4c9be 1px solid; /*Brown light */
/*	margin: 0px 0px 0.8em;		/* Top Right Bottom Left */
	/* Approved way to center a table, according to http://theodorakis.net/tablecentertest.html
	It does seem to work on all browsers. */
	margin-left: auto;
	margin-right: auto;
}

.fptable caption {
	background-color:#ece4d8;
	border-top:#e3d7cc 2px solid;
	border-left:#e3d7cc 2px solid;
	border-right:#d4c9be 2px solid; /*Brown light */
	border-bottom:#d4c9be 2px solid; /*Brown light */
	font-weight: bold;
}

.fptable th {
	background-color:#f0ece2;
	border-top:#ffffff 1px solid;
	border-left:#ffffff 1px solid;
	border-right:#d4c9be 1px solid; /*Brown light */
	border-bottom:#d4c9be 1px solid; /*Brown light */
}

.fptable td {
	background-color:#fcfaf2;
/* Might want to try later with a subtle gradient for a nicer look
	background-image: url(../img_menu/FPmenu_0_sel.gif);*/
	border-top:#ffffff 1px solid;
	border-left:#ffffff 1px solid;
	border-right:#e3d7cc 1px solid; /*Brown very light */
	border-bottom:#e3d7cc 1px solid; /*Brown very light */
}

/* Second choice for alternating row tables! */
.fptable2 td {
	background-color:#f6f2e8;
	border-top:#ffffff 1px solid;
	border-left:#ffffff 1px solid;
	border-right:#e3d7cc 1px solid; /*Brown very light */
	border-bottom:#e3d7cc 1px solid; /*Brown very light */
}

.fptablewhite td {
	background-color:#ffffff;
	border-top:#ffffff 1px solid;
	border-left:#ffffff 1px solid;
	border-right:#e3d7cc 1px solid; /*Brown very light */
	border-bottom:#e3d7cc 1px solid; /*Brown very light */
}

/* FP  Standard 3D table colors, but with no Backgroun-Color for <TD> fields,
	so that colors can be set using bgcolor=
*/

table.fptableNoBG {

	border-top:#e3d7cc 1px solid; /*Brown very light */
	border-left:#e3d7cc 1px solid; /*Brown very light */
	border-right:#d4c9be 1px solid; /*Brown light */
	border-bottom:#d4c9be 1px solid; /*Brown light */
	margin-left: auto;
	margin-right: auto;
}

.fptableNoBG caption {
	background-color:#ece4d8;
	border-top:#e3d7cc 2px solid;
	border-left:#e3d7cc 2px solid;
	border-right:#d4c9be 2px solid; /*Brown light */
	border-bottom:#d4c9be 2px solid; /*Brown light */
	font-weight: bold;
}

.fptableNoBG th {
	background-color:#f0ece2;
	border-top:#ffffff 1px solid;
	border-left:#ffffff 1px solid;
	border-right:#d4c9be 1px solid; /*Brown light */
	border-bottom:#d4c9be 1px solid; /*Brown light */
}

.fptableNoBG td {

	border-top:#ffffff 1px solid;
	border-left:#ffffff 1px solid;
	border-right:#e3d7cc 1px solid; /*Brown very light */
	border-bottom:#e3d7cc 1px solid; /*Brown very light */
}


/* FP Blue table colors - OLD and NOT USED */

table.fpblue {
	background-color:#c7d0e0;
	border-left:#cccccc 1px solid;
	border-top:#cccccc 1px solid;
	margin: 0px 0px 0.8em;		/* Top Right Bottom Left */
}

.fpblue th {
	background-color:#e0e7f7;
	border-top:#ffffff 1px solid;
	border-left:#ffffff 1px solid;
	border-right:#cccccc 1px solid;
	border-bottom:#cccccc 1px solid;
}

.fpblue td {
	background-color:#f0f7ff;
	border-top:#ffffff 1px solid;
	border-left:#ffffff 1px solid;
	border-right:#cccccc 1px solid;
	border-bottom:#cccccc 1px solid;
}
/* Second choice for alternating row tables! */
.fpblue2 td {
	background-color:#e7f0fa;
	border-top:#ffffff 1px solid;
	border-left:#ffffff 1px solid;
	border-right:#cccccc 1px solid;
	border-bottom:#cccccc 1px solid;
}

/* Grid3D table colors - OLD and NOT USED */

th {
	font-weight: bold;
}

table.grid_3d {
	background-color:#c7d0e0;
	border-left:#cccccc 1px solid;
	border-top:#cccccc 1px solid;
	margin: 0px 0px 0.8em;		/* Top Right Bottom Left */
}
td.grid_3d {
	background-color:#e7f0fa;
	border-bottom:#cccccc 1px solid;
	border-left:#ffffff 1px solid;
	border-right:#cccccc 1px solid;
	border-top:#ffffff 1px solid;
}
td.grid2_3d {
	background-color:#f0f7ff;
	border-bottom:#cccccc 1px solid;
	border-left:#ffffff 1px solid;
	border-right:#cccccc 1px solid;
	border-top:#ffffff 1px solid;
}
td.gridch_3d {
	background-color:#e0e7f7;
	border-bottom:#cccccc 1px solid;
	border-left:#ffffff 1px solid;
	border-right:#cccccc 1px solid;
	border-top:#ffffff 1px solid;
}
th.gridch_3d {
	background-color:#e0e7f7;
	border-bottom:#cccccc 1px solid;
	border-left:#ffffff 1px solid;
	border-right:#cccccc 1px solid;
	border-top:#ffffff 1px solid;
}
td.gridrh_3d {
	background-color:#e0e7f7;
	border-bottom:#cccccc 1px solid;
	border-left:#ffffff 1px solid;
	border-right:#cccccc 1px solid;
	border-top:#ffffff 1px solid;
}
td.gridth_3d {
	background-color:#c7d0e0;
	border-bottom:#999999 1px solid;
	border-left:#e0e7f7 1px solid;
	border-right:#999999 1px solid;
	border-top:#e0e7f7 1px solid;
}
th.gridth_3d {
	background-color:#c7d0e0;
	border-bottom:#999999 1px solid;
	border-left:#e0e7f7 1px solid;
	border-right:#999999 1px solid;
	border-top:#e0e7f7 1px solid;
}

/* Alternate Media settings */

@media print {

/* Style for elements that should not be printed */

.noprint {
	display: none;
}

/* Eliminate the border box on printouts */

.ContentBox {
	background-color: white;
	border: none;
	padding: 1em 1em 2em 1.5em; /* Top Right Bottom Left */ /* Note that headers (above) are moved to the left (margin-left) by 0.75em */
}

}