/* CSS Document */
/* IN CREATING THIS CSS DOCUMENT, I LISTED ALL DIVS AND HTML TAGS 
USED IN ALL OF THE SITE DOCUMENTS.  THIS WILL LOAD ONCE AND BE 
CALLED ON BY EACH PAGE.  INDIVIDUAL PAGES MAY CONTAIN CSS CODE THAT
WILL OVERRIDE THESE SPECS FOR THAT PAGE ONLY. i.e. NAVIGATION TAGS
TO LET YOU KNOW WHERE YOU ARE IN THE SITE.
This sets the size and properties of the box which contains all. */

/* border:0px solid red; tags are for easy troubleshooting:  change the 0 to 1 and you
can see just where a div or other element is sitting. */
#container {
	width:950px; 
	height:598px; 
	margin:0; 
	padding:0;
	margin-top:0px;
	margin-left:auto; 
	margin-right:auto;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	border:3px solid #202020;
	background-color:#333333;
	color:#ccc;
	}
/*The next set of styles were added to solve the Firefox outlining the edges of 
links in the navigation bar. */
a {
	user-focus: none; 
	outline : none; 
	-moz-user-focus: none; 
	-moz-outline: none; 
	behavior: url(/includes/userfocus.htc)
	}
a:focus {
	user-focus: none; 
	outline : none; 
	-moz-user-focus: none; 
	-moz-outline: none; 
	behavior: url(/includes/userfocus.htc)
	}
/*end of Firefox border fix.*/
	
/*The body back-ground color is the rest of the browser window, outside the "container" */
body {
	margin:0; 
	padding:0; 
	border:0;
	background-color:#BABABA;
	color:white;
	}
/*The next declarations concern the banner area. */
#banner {
	width:100%;
	height:139px;
	background-color:#6b774f;
	background-image:url(Assets/Wall_Table_Closeup.jpg);
	background-repeat:no-repeat;
	margin:0;
	padding:0;
	border:0px solid red;
	margin-top:-14px;
	border-bottom: 0px solid black;
}

/*Firefox Mac was adding a 14px gray space above the banner.
The declaration above fixes this for Firefox.  The styles below fix it back
for IE */

* html #banner {margin-top:0px; }
* html #banner {ma\rgin-top:0px; }

/*The text area of the banner, not the text itself, which is an image.
There is text in the banner area, but it does not display -- it is only for
the sake of someone using a text reader or other adaptive equipment. */
#bannertext {border:0px solid green;}
#bannertext p {
	padding-top:30px;  
	padding-left:446px; 
	}
#bannertext h1 {display:none;}

/*These declarations control the vertical navigation area */
#vertnav {
	width:190px; 
	float:right; display:inline;
	padding-top:20px;
	background-color:#35516c;
	color:#333333;
	height:438px;
	border:0px solid red;
	z-index:100;
	}
/*after fixing Firefox above, the next line needed to be added to
get nav bar in correct location for IE Mac */
* html #vertnav {margin-top:-17px; }
/* Now, change back to 0 for IE Win, but hide from IE Mac \*/
* html #vertnav {margin-top:0px; }
/* End of hide from Mac IE 5 */

#nav{
	border:0px solid blue;
	display:block;
	list-style:none;
	white-space:nowrap;
	overflow:hidden;
	margin-left:-50px;
	} 
/*for IE the margin-left for div#nav needs to be -10px;
for Foxfire and others, the value needs to be -50px;
The following "fix" makes this work for all.  Only IE
browsers will "see" the * html line of code!*/
* html #nav {margin-left:-10px; }

#vertnav li {
	list-style:none;
	padding-top: 6px;
	margin-left:-20px;
	}
#tabletypes li, #guitarsub li, #mandossub li {
	margin-left:-20px;
	}
#vertnav a {border:0px solid white;
	text-decoration:none;
	padding-left:50px;
	height:2em;
	background-color:transparent;
	color:#ccc;
	}
#vertnav a:link, #rightnav a:visited {
	background-color:transparent;
	color:#ccc;
	}
#vertnav a:hover {
	text-decoration:none;
	background-color:transparent;
	color:white;
	}
/*to avoid "double spacing" in menus these list items need 0 padding: */
li#homesub, li#finesub, li#musicalsub, li#moresub, li#contactsub, li#tabletypes, li#guitarsub, li#mandossub {padding-top:0px;}
/*to avoid "double spacing in IE6/WIN, but not IE5 these ALSO need less padding: \*/
* html li#about, * html li#beds, * html li#coffee, * html li#guitars, * html li#cutaway, * html li#OM-001 {padding-top:4px;}
/*end of IE5 MAC hack */
/*IE6WIN still messing up, but adding a border seems to fix it   here's a border that matches the background\*/
* html #vertnav li {border:1px solid #35516c;}
/*end of IE hack */

#homesub ul, #finesub ul, #musicalsub ul, #moresub ul, #contactsub ul  {
	list-style-type:none;
	 }
#homesub a:link, #finesub a:link, #musicalsub a:link, #moresub a:link, #contactsub a:link  {
	background-color:transparent;
	color:#ccc;
	}
#homesub a:visited, #finesub a:visited, #musicalsub a:visited, #moresub a:visited, #contactsub a:visited  {
	background-color:transparent;
	color:#ccc;
	}
#homesub a:hover, #finesub a:hover, #musicalsub a:hover, #moresub a:hover, #contactsub a:hover {
	text-decoration:none;
	background-color:transparent;
	color:white;
	}

/* This begins the styling for content within the main content area. */
#main {
	position:relative;
	margin-top:35px;
	margin-left:15px;
	z-index:1;
	/*the declaration of width:740px was causing links to not work in IE Mac 
	but it was fine to overlap the vertnav for Firefox */
	width:740px;
	border:0px solid green;	
	}
/*below fixes main overlapping vertnav for IE Mac */
* html #main {width:540px;}
/* Now, change back to 740 for IE Win, but hide from IE Mac \*/
* html #main {width:735px; }
/* End of hide from Mac IE 5 */

/* #image is the large image on the home page and each section page.  It 
may be replaced by a javascript to rotate among a folder of images, or 
a flash slide show or other.  The code below sets the location for that 
image / slide show / etc. */
#image {
	margin-top:65px;
	float:right;
	margin-left:30px;
	margin-bottom: 20px;
	}
#thumbnails {
	border:0px solid red; 
	height:164px; 
	z-index:999; 
	overflow:hidden;
	}
#thumbnails div {float:left; margin-left:35px; display:inline; }
/* Thumbnails have a certain space between them, dictated by the margin-left
spec above.  This can be overridden for any or all by more specific code 
included in the head of a particular page. */ 

/*Fix for IE left margin issue  is to include the display:inline in the 
declaration above. */

#thumbnails a {
	color:#CCCCCC; 
	text-decoration:none;
	}
#thumbnails img {border:0px solid red;}
div#tn1 p { 
	font-size:80%; font-weight:lighter; text-align:center; 
	}
div#tn2 p { 
	font-size:80%; font-weight:lighter;  text-align:center;
	}
div#tn3 p { 
	font-size:80%; font-weight:lighter; text-align:center;
	}
div#tn4 p { 
	font-size:80%; font-weight:lighter; text-align:center;
	}
div#tn5 p { 
	font-size:80%; font-weight:lighter; text-align:center;
	}
#maintext {
	border:0px solid yellow;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:37px;
	width: 415px;
	font-size:100%;
	height:250px;
	padding-right:20px;
	overflow:auto;
	text-align:left;
	}
/*for IE WIN proper display add top margin for a bit more space between thumbnails and label\*/
* html #maintext {margin-top:20px;}
/*end IE hack */

.lotsright {
	float:right;
	margin-left:40px;
	margin-bottom:40px;
	padding-top:15px;
	padding-bottom:0px
	}

.lotsleft {
	float:left;
	margin-bottom:40px;
	padding-top:10px;
	margin-right: 30px;
	}

h1 {
	padding-top:4px;
	font-size:140%;
	font-weight: 500;
	}
/*font size was 130%
 *font weight was not specified */	
	
#maintext p {
	padding-top:5px;
	line-height: 150%;
	}
/*line height was 1.4 ems */	

/*Instructions and lowernav areas include the "click on image for more info" */

#lowernav {
	position:absolute;
	top:370px;
	left:495px;
	text-align:right;
	margin-top:10px;
	margin-right:40px;
	}
p.instructions {
	font-size:80%;
	color:#AAAAAA;
	font-style:italic;
	}

/*Smalltext style is used in the popup windows */


p.smalltext {
	font-size:86%;
	line-height:135%;
	}
p.smalltexth {
	font-size:110%; 
	font-weight:600;
	}
/*for IE Mac, which doesn's seem to recognize font-weight:600 */
* html p.smalltexth {
	font-weight:normal;
	}
	
/*Note:  6 other css files control the 6 variations of the popup windows. */