/*    ================ (c) Santa Fe Optical ====================*/

/* 	purple  	#9F27D6	*/
/* 	blue 		#2549DB;	*/
/* 	gold 		#E9A715	*/
/* 	green  	#99CC00 	*/

body { 
  background-color: white;
  /*font-family:      Georgia, "Times New Roman", Times, serif; */
  font-family:      Verdana, Geneva, Arial, "Arial Narrow", Times, san-serif;
  font-size:        14px; 
  margin:           0px;

}

/*================    JELLO  ===============*/
#jello {
  max-width:		1150px; 
  margin:			0 auto; 
  background-color: white; /*  E9A715;   E8C16A;   EDA747;  */
  /* background:       white url(images/bg_sandstone.jpg) top left; */
  padding-bottom:	1px
}

/*================    HEADER  ===============*/
#header {
  background-color: black;
  margin:           0;
  width:			1150px;
  height:           220px /*108px */  ;
  border:           2px solid black;
}
#header img {
  /* Santa Fe Optical in graphic -  marketing font: Univers Ultra Condensed (without the E on universe)*/
  width:			1146px;
  height:           216px;
  border:           2px solid black;
}
#header2 {
  background-color: black;
  margin:           0;
  width:			1150px;
  height:           150px /*108px */  ;
  border:           2px solid black;
}
#header2 img {
  /* Santa Fe Optical in graphic -  marketing font: Univers Ultra Condensed (without the E on universe)*/
  width:			1146px;
  height:           146px;
  border:           2px solid black;
}

h1 {
  font-size:        120%;
  /* color:            #954b4b; */
}
h2 { font-size: 		110%; 
}

/*================    MAIN CONTENT AREA  ===============*/
#main {
  /* IE6 & IE7 error:   morecollections columular list omits 1st two columns when background-color is used here.
         I was able to omit it because background was set in BODY above to the setting that I wanted.
	It will also work with background-color if you insert ZOOM:1  in this section but then the CSS fails validation */
  /* background:       white url(images/background.gif) top left; */
  /* background-color:	white; */
  padding:          15px;
  margin:           6px 10px 10px 260px; /*left margin larger than sidebar width */
  /* line-height:		1.2em; */
}
#main p {
  padding-top:		0;
  margin-top:		10px;
  margin-bottom:	10px;
}

/*-------------------   First Line & First Letter ----- some problems in IE ---------------*/

#main p.fancy:first-letter  {
	/*  change first letter using regular CSS...   
	font-size:	200%;
	font-weight:  600;
	color:	#99cc00; */

	font-size:		130%;
	background: 	#99cc00 url(images/fancyGreen.png) top left;
	padding: 		1em .2em .1em .2em;
	color:			black;
}

#main h1.fancy:first-line { /* space after first-line required for IE6 */
	font-size:		130%;
	background: 	#99cc00 url(images/fancyGreen.png) top left;
	padding: 		1em .2em .5em .2em;
	color:			#036;
	line-height:	1.8;
}

#main h1.fancy2:first-letter  {  /* looks more like old site */
	font-size:		130%;
	background: 	#99cc00 url(images/fancyGreen.png) top left;
	padding: 		.8em .2em .1em .2em;
	color:			#036;
	line-height:	1.4;
	}
#main h1.fancy3:first-letter  {  /* looks more like old site */
	font-size:	150%;
	font-weight:  600;
	color:	#99cc00; 

	padding: 		.1em .1em .1em .1em;
	line-height:	1.4;
	}

#main h1.trunkshow {
	font-size:		130%;
	color:			#99cc00;
}
#main p.trunkshow {
	padding-left:	2em;
}
#main  img.trunkshow{ 
  border:          	none;
  padding:			0px;
  margin:			0px;
}
#main  a.trunkshow{ 
  display:          block; /* block;  */
  width:			525px; /* added to keep outline from extending to edge panel */
  padding:			0px;
  margin:			0px;
}

#main p.note1 {
  margin-left:      60px;
  font-size:        90%;
}
	
/*-------------------   Location panels --------------------*/

#main p.hours {
  float:			right;
  padding-right:	10px;
  padding-top:		20px;
  font-size:        small;
}

#main h1.jefferson {
  color:			#E9A715;
  font-size:        150%;
}
#main .westlake {
  color:			#9F27D6;
  font-size:        150%;
}
#main .arbor {
  color:			#2549DB;
  font-size:        150%;
}

#main  img.jefferson {
  border:			10px solid #E9A715;
  margin-top:		10px;
  margin-left:		30px;
}
#main  img.westlake {
  border:			10px solid #9F27D6;
  margin-top:		10px;
  margin-left:		30px;
}
#main  img.arbor {
  border:			10px solid #2549DB;
  margin-top:		10px;
  margin-left:		30px;
  margin-bottom:	0;
}
#main  a.map {
  display:          block; 
  margin-top:		0;
  margin-left:		38px;
  color:            gray;
  width:            350px; 
  height:			10px;
  text-align:       right;
  text-decoration:  none;
}
	
/*-------------------   Collection panels --------------------*/	
#morecollections1 {     
  /* clear:  left;   not needed after adding br with clear */
  margin-left:		3em; 
}
#morecollections1 ul {
  float: 			left;
  width: 			50em; 
  margin: 			0;
  padding: 			0;
  list-style: 		none; 
  /* margin-left: 0;  */
}
#morecollections1 li {
  float: 			left;
  width: 			12em;
  margin: 			0;
  padding: 			0;
}

/*---- 2-----*/
#morecollections2 {     
	margin-left:	1em; 
}
#morecollections2 ol {
  margin: 			0;
  padding: 			0;
  list-style: 		none;
  margin-left: 		-10px;  
}
#morecollections2 li {
  margin: 			0;
  padding: 			0;
  line-height: 		1.3em;
  width: 			12em;
}
#morecollections2 li.col1 {margin-left: 3em;}
#morecollections2 li.col2 {margin-left: 15em;}
#morecollections2 li.col3 {margin-left: 27em;}
#morecollections2 li.col4 {margin-left: 39em;}

#morecollections2 li.coltopper16 {margin-top: -20.6em;}
#morecollections2 li.coltopper15 {margin-top: -19.3em;}
#morecollections2 li.coltopper14 {margin-top: -18.0em;}
#morecollections2 li.coltopper13 {margin-top: -16.7em;}
#morecollections2 li.coltopper12 {margin-top: -15.4em;}
#morecollections2 li.coltopper11 {margin-top: -14.3em;}
#morecollections2 li.coltopper10 {margin-top: -13.0em;}
#morecollections2 li.coltopper9 {margin-top: -11.7em;}
#morecollections2 li.coltopper8 {margin-top: -10.4em;}
#morecollections2 li.coltopper7 {margin-top: -9.1em;}  /* line-height * nbr of items in prev line */
#morecollections2 li.coltopper6 {margin-top: -7.8em;}
#morecollections2 li.coltopper5 {margin-top: -6.5em;}

/* - - - - */

#main h1.collection:first-line{ /* like FANCY above */
	font-size:		130%;
	background: 	#99cc00 url(images/fancyGreen.png) top left;
	padding: 		1em .2em .5em .2em;
	color:			#036;
	line-height:	1.4;
}
/*
#main  a.frameset {
  padding-left:		15px;
  margin-bottom:    2px;
}
**/
#main  p.frameset1 {
  padding-left:  	20px;
  text-align:       center;
}
#main  img.frameset1 {
  /*  width:			480px; */
  /* height:			215px;   */
  border:	10px solid #99CC00;  
}

#main  img.frameset {
  width:			175px;
  height:			75px;
  /*margin:  .2em .2em .2em 2em; */
  margin:  			10px 4px 4px 4px;  /* using margin instead of padding so borders acn be used later to frame the pic */
  /* border:			0;   use this one if JPEG contains the border */
  border:	5px solid #99CC00;  
}

/* large image size 500 X 235 */


/*==========================   FOOTER ===============================*/
#footer {
  background-color: #E4E8B6;  /*DAE3A2;   *  dark brown #A42C11;  med: D1550F  light::EDA747*/
  color:            #036;
  text-align:       center;
  padding:          15px;
  margin:           10px 2px 2px 2px;   /*2009*/
  font-size:        90%;
  clear:            left;
}

/*================    HORIZONTAL NAVIGATION BAR AT TOP ===============*/
#navbar  {
    padding:        0;
    margin:         0;
    list-style-type: none;
    float:          left;
    width:          1154px; /* width of header + borders    previously used 100%; */
    color:          #fff;
    background-color: #ACCB15; /*list green */
    margin-left:    0; /*10px; */
	font-family:    "Arial Narrow", Geneva, Arial, Verdana, Times, san-serif;
	font-size:		105%; 
	/* font-weight:	bold; */
	/* border-bottom:    2px solid #036; */
}
#navbar li { 
  display:          inline; 
  float:            left;
  color:            #fff;
  padding:          3px;
  /* padding: 0.2em 1em; */
  text-decoration:  none;
}
#navbar li a  {
  padding:          0.2em 1em; 
  color:            #fff;
  text-decoration:  none;
}
#navbar li a:hover  {
  background-color: #E3F194;
  color:            black;
  border-top:       1px solid #fff;
  border-right:     1px solid #fff;
  border-bottom:    1px solid #036;
  border-left:      1px solid #036;
}
#navbar li.slogan3   {
  /* Marketing font: Garamond */
  background-color: #4B8D71; /* slogan teal */
  color:            #fff;
  width:            247px;
  padding-left:     10px;
  text-align:		center;
  font-family:    	Garamond, Geneva, Arial, Verdana, Times, san-serif;
  font-weight:		bold; 
  letter-spacing: 	2px;
  border-bottom:    2px solid #4B8D71;

}

/*==============    LEFT SIDEBAR - NAVIGATION BUTTONS   ==============*/
#sidebar {
  background-color: #E4E8B6; /* DAE3A2; /*#FFFFCC;*/
  /*background:       #FFFFCC url(images/sb2.jpg) bottom right; */
  /*font-size:        105%; */
  /*font-weight:		bold; */
  padding-top:      20px; 
  padding-bottom:	30px;
  margin:           2px 6px 2px 2px;
  width:            258px;
  float:            left;
}
/*-------------------   Three location buttons  in left sidebar --------------------*/
#navlocs  { 
  margin-left:		10px;
}
#navlocs    a{ 
  display:          block;
  color:            #036;
  width:            183px; 
  height:			138px;
  margin-left:		24px;
  margin-bottom:    4px;
  text-decoration:  none;
  border:			2px solid #444444;
  border-style:		outset;
}
#navlocs    a:hover{ 
  border:			2px solid #666666;
}
#navlocs    a.jefferson { 
  background:       white url(images/nav_jefferson.jpg) center center;
}
#navlocs    a:hover.jefferson { 
  background:       white url(images/nav_jefferson_hover.jpg) center center;
}
#navlocs    a.westlake { 
  background:       white url(images/nav_westlake.jpg) center center;
}
#navlocs    a:hover.westlake { 
  background:       white url(images/nav_westlake_hover.jpg) center center;
}
#navlocs    a.arbor { 
  background:       white url(images/nav_arbor.jpg) center center;
}
#navlocs    a:hover.arbor { 
  background:       white url(images/nav_arbor_hover.jpg) center center;
}

/*---------------------   frame collection buttons in left sidebar --------------------------*/

#nav2collections {
  margin:           0;
  margin-left:		20px;
  padding:          0;
  list-style-type:  none;
}
/*#nav2collections ul li {
  margin:           0 0 .5em 1px;  
  width:            180px; /* 170px; 
  list-style-type:  none;
} */
#nav2collections    a {
  display:          block;
  margin:           0 0 .3em 1px;  
  width:            150px;
  /*width:            9em;  */
  color:            #036;
  background-color: white; /* transparent; */
  padding:          .3em 1em; 
  text-decoration:  none;
  border-top:       1px solid #CCCCFF;/*#F2F0F0;/*#A62AD8; */
  border-right:     1px solid #036;
  border-bottom:    1px solid #036; 
}
/* THIS ARE THE NAV2 CLASSES USED TO CREATED THE COLORED BLOCKS */
a.nav2color1   { /* purple border */
  /*border-top:       1px solid #9F27D6; */
  border-left:      20px solid #9F27D6;
}
a.nav2color2   { /* blue border */
  border-left:      20px solid #2549DB;
}
a.nav2color3  { /* gold border */
  border-left:      20px solid #E9A715;
}
a.nav2color4  { /* green border */
  border-left:      20px solid #99CC00;  /* 5bbd34 */
}
/*HOVER FOR COLLECTION NAVIGATION BUTTONS IN SIDEBAR */
#nav2collections a:hover  {
  color:            #FFF;
  border-top:       1px solid #036;
} 
#nav2collections a:hover.nav2color1
{ background-color: #9F27D6;
}
#nav2collections a:hover.nav2color2
{ background-color: #2549DB;
}
#nav2collections a:hover.nav2color3
{ background-color: #E9A715;
}
#nav2collections a:hover.nav2color4
{ background-color: #99cc00;
}
/*==================================================================*/