/* Project notes - This file is the current Master StyleSheet for Site and sub-sites */
/* Date of last edits: 17 April 2010   */

/* Change Log: */
/* 17 April 2010 cleanups to fix w3c validation problems */
/* 16 Jan 2010 mods to masthead set of divs, added img.ARight to masthead design */
/* 16 Jan 2010 added p.gold for text on dark background (telephone number in masthead first use) */
/* 14 Nov 2009 added img.OnLeft and img.OnRight styles */
/* 6 Nov 2009 added "no top margin or padding" when nesting lists */
/* 3 Nov 2009 added repair-page-masthead set of 3 divs  */
/* Date documentation standard implemented: 24 October 2009   */
/* 24 October 2009 Because it looked weird for links embeded in text to stay the same size as the text resized, convert to percents */
/* Prior, but recent changes: Modified the logostrip from full-fluid to fixed total width */
/* Prior, but recent changes: Collected notes about box-model, colors and font sizes, dropped copies several places */


body {
	font-family: verdana, arial, helvetica, sans-serif;
	background-color: #3366CC; /* a rich blue */
	margin-top: 0px;
	margin-bottom: 0px;
}

/* standard box-model notes */
/* padding contains/surrounds the box contents, is the same color as the contents */
/* the border contains/surrounds the padding, has its own color */
/* the margin contains/surrounds the border, transparent */

/* our color scheme */
/* #3366CC; or #36c; a rich blue */
/* #CCCC99; or #cc9; light olive */
/* #DDDDAA; or #dda; lighter olive */
/* #FFFF00; or #ff0; gold-yellow */
/* #000000; or #000; Solid black */
/* #FFFFFF; or #fff; White */

/* Sizes remark  px=pixel, 1 dot on the screen  */
/* Sizes remark  pt=point, 1/72 inch on the paper */
/* Sizes remark  pc=pica, 12 points  */
/* Sizes remark  ex=ex, one x-height, about half the font height  */
/* Sizes remark  em=em, the current font size  */

.PageTitle {
	color: #FFFFFF; /* white font */
	font-family: Trekker, serif;
	font-size: 36pt;	/* 36 points */
}

dl.navigation dt {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 110%;	/* 14 points */
	color: #000000;
}
dl.navigation dt i {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 75%;		/* 8 points */
	color: #000000;
}
p.navigation {
	background-color: #CCCC99; /* light olive */
}
p.gold {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 110%;	/* 14 points */
	text-align: center;	/* used for heading-sub head type text, not body, so we center it */ 
	color: #FFFF00; /* gold-yellow, for dark backgrounds */
}

.BannerDiv {  /* The background image behind the site banner */
	background-image: url(../images/MusicArt/musicbg323.jpg);
	background-repeat: repeat-y;
	background-position: center center;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	color: #FFFFFF;
}
.LogostripDiv {  /* The background image with all the logo images */
 /* this version uses a fixed graphic pasted up from a set of logo images */
 /* As a single graphic, it does not flow onto the next line, as a background, it does not force scrollbars */
	height: 120px; /* edit this to match any changes in the size of the background image */
	background-image: url(../tools/MakerBanner.gif);
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	color: #FFFFFF;
}

div.LogoBack {  /* A white background div to contain logo images in floating divs */
	background-color: #FFFFFF; /* white */
	/* width: 1840px; enough for one long strip of all current logos */
	/* width: 850px; enough for two lines using current logos, if sorted to split right */
	width: 850px; /* testing, will a fixed width work well?  Verdict: Excelent! */
	min-width: 850px;	/* min and max width are needed to cover non-standards compliant browsers */
	max-width: 850px;	/* preliminary testing, floating in a fixed container freezes fluid */
	margin-bottom: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	color: #CCCC99; /* light olive */
}
.RSide {	/* the right side sidebar */
	padding-top: 5ex; /* padding is inside the background color */
	vertical-align: top;
	width: 15ex; /* for all the compliant browsers */
	min-width: 15ex; max-width: 15ex; /* for IE */
	background-color: #DDDDAA; /* lighter olive */
	color: #000; /* Black */
}
div.floatLogo {  /* Special feature == container for content blocks. Containers can move to another line */
	float: left;
	margin: 5px;
	height: 33px; /* this is the "32 pixels Tall Logo image" version */
/* inactive, too crowded on screen. */
}
div.floatLogo2 {  /* Special feature == container for content blocks. Containers can move to another line */
	float: left;
	margin: 2px;
	height: 17px; /* this is the "16 pixels Tall Logo image" version */
/* inactive, logos mostly too small to identify */
}
div.floatLogo3 {  /* Special feature == container for content blocks. Containers can move to another line */
	float: left;
	margin: 2px;
	height: 25px; /* this is the "24 pixels Tall Logo image" version */
/* ACTIVE - this is current, but may be deactivated soon */
/* plan to replace the floating logos with a single composite mashup in the pipe */
/*  A-B testing of float/fixed to decide as soon as both versions ready to roll out */
/* alternate scheme to lock the floating logos is in test - the container is now fixed width */
/* goal of fixing is to _NOT_ have logos flow onto a last line of orphans. */
}

/* Center elements on page - due to cross-browser compatibility issues
  centering content on the page in a fluid design requires two nested divs,
  place the content inside div class center, and that div inside div class ctr */

 div.ctr {
text-align: center;
}
div.center {
margin-left:auto;
margin-right:auto;
text-align:left;
width:730px;  /* for the table on index.html */
}


td {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
}

td ul li {
	margin-right: 1ex;
	padding-right: 1ex;
}


.Home {  /* special style for home page indentation in list */
	text-indent: -2em;
}
p {
	color: #000000;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	text-indent: 2ex;
}

th {
	font-family: verdana,arial,helvetica;
}

.BannerText {  /* The site banner text, laid on the BannerDiv background */
	font-size: 80px;
	font-family: Trekker, "Palatino Linotype", serif;
	color: #FFFFFF;
	margin-top: 15px;
	margin-bottom: 15px;
}
a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 110%;	/* 12 points */
	font-style: normal;
	color: #000066;
	text-decoration: underline;
}
a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #0033FF;
}
a:active {
	color: #336600;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

a.alt:visited {  /* Alternate anchor text, white text for a dark background */
	color: #ffffff; text-decoration: none
}
a.alt:link {
	color: #ffffff; text-decoration: none
}
a.alt:hover {
	color: #ffffff; text-decoration: underline
}
a.alt:active {
	color: #ffffff; text-decoration: underline
}

.pageName {  /* The page title is part of the header, this is for a caption inside the body */
	font-size: x-large;
	color: #00FF00;
  /* the same list of fonts as used for the site banner -- we _WILL_ match the look. */
	font-family: Trekker, "Palatino Linotype", serif;
	text-align: center;
}

hr.box { /* Distinctive "two yellow lines" horizontal break, used under page heading */
	border-top: #ff0 3px solid;
	border-bottom: #ff0 3px solid;
	background-color:#3366CC;
	color: #3366CC;
	height: 15px;
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 1px;
	width: 100%;
	float: none;
}

h1, h2, h3, h4, h5, h6 {
  /* ALL the heading class text on the page will be the same font */
	font-family: Arial, Helvetica, sans-serif;
}
h1 {
	color: #0066CC;
}
h2, h3 {
	color: #000000;
}
h4, h5, h6 {
	color: #CCFF00;
}
h4 {
	margin: 1ex 1em 1ex 1em;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
 h1 a:visited, h2 a:visited,
 h3 a:visited, h4 a:visited,
 h5 a:visited, h6 a:visited {  /* Every link placed inside a heading is underlined black */
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: underline;
}

.EditRegionCenter {  /* This is the style for the main content area of each page!!! */
	background-color: #FFFFFF;
	color: #000000;
	width: auto;
/*	margin-right: 10em; */
	padding-top: 1ex;
	padding-bottom: 1ex;
	padding-left: 1ex;
	padding-right: 2ex;
	vertical-align:top
}
.EditRegionCenter h6, .EditRegionCenter h5, .EditRegionCenter h4, .EditRegionCenter h3, .EditRegionCenter h2, .EditRegionCenter h1 {
	color: #000000;
}

/* == Special feature not seen on most websites == link images show a border on hover == */
/* == the border does not cause a re-size and move of the rest of the page!!!! */

.EditRegionCenter table tbody tr td a img {  /* link images inside the main content */
	border-width: 3px;  /* fat border */
	border-style: solid;
	border-color: transparent;  /* The fat border is there, but not seen */
}

.EditRegionCenter table tbody tr td a:hover img { /* hover on a link image -- */
	border-color: Red;  /* show the border by turning it red without any resize */
}

/* == Feature broke!?  re-structure from table layout to fluid design with floating div */
/*    elements disconnected the above two selectors - fluid design version selectors follow */

.EditRegionCenter div a img {  /* link images inside the main content */
	border-width: 3px;  /* fat border */
	border-style: solid;
	border-color: transparent;  /* The fat border is there, but not seen */
}

.EditRegionCenter div a:hover img { /* hover on a link image -- */
	border-color: Red;  /* show the border by turning it red without any resize */
}

/* == end special feature -- simple once you know the trick.  */

/* Sizes remark  px=pixel, 1 dot on the screen  */
/* Sizes remark  pt=point, 1/72 inch on the paper */
/* Sizes remark  pc=pica, 12 points  */
/* Sizes remark  ex=ex, one x-height, about half the font height  */
/* Sizes remark  em=em, the current font size  */

.EditRegionCenter table tbody tr td dl dt {
	font-family: "Palatino Linotype", serif;
	font-size: 110%;	/* 12 points */
	font-weight: bold;
}
.EditRegionCenter table tbody tr td dl dd {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%;		/* 8 points */
	font-weight: normal;
}

img.OnRight{
	float: right;
	clear: right;
	margin: 1ex;
}
img.OnLeft{
	float: left;
	clear: left;
	margin: 1ex;
}
div.floatc {
	clear: both; /* close any fluid areas and start clean */
	height: 5px;
	width: 100%;
}
div.floatc2 {
	clear: both; /* close any fluid areas and start clean; Plus hold a heading */
	height: 35px;
	width: 100%;
}

div.floatp {  /* Special feature == container for content blocks. Containers can move to another line */
	float: left;
	margin: 1ex;
	width: 32ex;	/* This div is sized by font, for textual matter */
	height: 20ex;	/* about ten lines of text height */
	vertical-align: top;
}

div.floatl2 {  /* Special feature == container for content blocks. Containers can move to another line */
	float: left;
	margin: 2ex;
	width: 290px;  /* This is the smaller "l" cell version for text-data pages */
	height: 110px;
	vertical-align: top;
}

div.floatl {  /* Special feature == container for content blocks. Containers can move to another line */
	float: left;
	margin: 1ex;
	width: 290px;  /* This is the larger "l" cell version for low count "lines" pages */
	height: 390px;
	vertical-align: top;
}
/* this pair of selectors should have managed the conversion from table to fluid, did not..? */
div.floatl img {
	border-width: 3px;
	border-style: solid;
	border-color: transparent;
}
div.floatl  a:hover img {
	border-color: Red;
}
div.floats {  /* Special feature == container for content blocks. Containers can move to another line */
	float: left;
	margin: 1ex;
	width: 175px; /* this is the "s" version, smaller cells for crowded catalog pages */
	height: 210px;
	vertical-align: bottom;
}
div.floats2 {  /* Special feature == container for content blocks. Containers can move to another line */
	float: left;
	margin: 1ex;
	width: 175px; /* this is the "s2" version, Shorter cells for text/thumbnail pages */
	height: 110px;
	vertical-align: bottom;
}
div.floats3 {  /* Special feature == container for content blocks. Containers can move to another line */
	float: left;
	margin: 1ex;
	width: 270px; /* this is the "s3" version, Cells sized for 266 wide and 200 high illustrations */
	height: 210px;
	vertical-align: bottom;
}
div.floatb {  /* Special feature == container for content blocks. Containers can move to another line */
	float: left;
	margin: 5px;
	width: 145px; /* this is the "b" version, For buttons */
	height: 30px;
}
/* 'repair-page-masthead' order - div.rpmc div.rpmr[right] div.rpml[img.ARight[Left]] end-div.rpmc */

div.rpmc {
	background: #ffffff;
	padding: 0; margin: 5px; width: 100%; height: 202px; float:left; min-width:540px;
}
div.rpmr {
	float:right;
/*	align: left; fails validation */
	width: 48%;
}
div.rpml {
	float:left;
	width: 48%;
}
img.ARight{
	float: right;
}



/* 'badge' order - div.badge div.bdright right-content div.bdleft left-content end-div.badge */
div.badge { /* build a 'badge' for validation claims and links */
	background: #999999;
	padding: 3px; margin:5px; width:175px; float:left;
}
div.bdright {
	background:#000000; color:#ffffff;
	padding:2px 5px; float:right; font-weight:bold;
}
div.bdright a, div.bdright a:hover {
	color:#ffffff; font-weight:bold;
}
div.bdleft { /* badge left-hand section */
	background: #FFE23C; color: #0002C4;
	padding: 2px 5px; font-weight: bold;
}
div.hocp {	/* Hammond Organ Company Price-badge */
	background: #999999;
	padding: 6px; margin:5px; width:135px; float: left;
}
div.pRight {
	background:#0099ff; color:#ffffff;
	padding:3px 1ex; float: right;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
}
div.pLeft {
	background:#2e5afb; color:#ffffff;
	padding:3px 1ex;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
}
div.OurPrice { 	/* Markdown Price-badge */
	background: #FF8C00;
	padding: 6px; margin: 5px; width: 135px; float: left;
}
div.opLeft {
	background: #FFB962; color: #000;
	padding: 3px 1ex;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
}
div.opRight {
	background: #FFF808; color: #000;
	padding: 3px 1ex; float: right;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
}


.Color1 {
  Color: #91BACF;
}

.Color2 {
  Color: #91A6CF;
}

.Color3 {
  Color: #9B91CF;
}

.Color4 {
  Color: #BA91CF;
}

.Color5 {
  Color: #CF91B2;
}

.Color6 {
  Color: #D88E88;
}

.Color7 {
  Color: #D8A988;
}

.Color8 {
  Color: #D8BB88;
}

.Color9 {
  Color: #D8CB88;
}

.Color10 {
  Color: #D6D888;
}

.Color11 {
  Color: #B7CA7B;
}

.Color12 {
  Color: #77C57F;
}

.Color13 {
  Color: #FF6600;
}

.Color14 {
  Color: #FFB280;
}
.Color16 {
	color: #006699;
}


.Color15 {
  Color: #000000;
}
li dl, li ul, li ol, dd ul, dd ol {	/* when nesting lists, close-up the whitespace so the child list looks like part of the parent list */
	margin-top: 0;
	padding-top: 0;
	margin-bottom: 0;
	padding-bottom: 1ex; /* a defined, slight bit of leading */
}

.highlight {	/* Keep this close to the end, after all _a_ selectors */
	color: #990033;
}

.PanelLeft {  /* this is the background for our navigation section on the left */
	width: 300px;
	max-width: 300px;
	min-width: 300px;
	vertical-align: top;
	background-color: #CCCC99;
	padding-right: 1ex;
	padding-left: 1ex;
}

td.PanelLeft dl dt a, td.PanelLeft dl dt {  /* List format used for anchor in list */
	font-size: 110%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
td.PanelLeft img {  /* Left panel clipart */
	margin: 5px;	/* give some whitespace */
/* 	vertical-align: center;  bad value, fails validation */
}