/* Stylesheet */ 

/* \*/
* html  {height: 1%;}
/* */

	a:link    { color: #665665 }    	/* unvisited links */
	a:visited { color: #665665 }   	/* visited links   */
	a:hover   { color: #665665 } 	/* user hovers     */
	a:active  { color: #665665 }   	/* active links    */
	
body
	{
 	margin: 0;
	padding: 0;
	font-size: 100.1%;
	text-align: center;	
	background-color: #5086BD;
	background-image:url(../gifs/background.gif);
	background-repeat: repeat-x;
	background-attachment: fixed;	
 	}
 	
 #page
	{
	font-size: 1em;
	position: relative;	
	width: 55em;	
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	margin-bottom: 3em;
	text-align: left;
	background-color: white;
	border:1px solid black;
	border-bottom:2px solid black;
	border-right:2px solid black;
	}

#hdr	/* header is 3em by 47em */
	{
	height: 3em;
	background:white;
	padding:1em;
 	}
 	
#hdr  img 	/* Moving Diamond Logo is 53 by 86 pixels --   divide by 16 */
	{
	position: absolute;
	top: 1em;
	left: 2em;
	height: 3.3em;
	width: 5.3em; 
	}

#hdr2	/* header is 3em by 47em */
	{
	height: 3em;
	background:white;
	padding:1em;
 	}
 		
#hdr2  img 	/* Moving Diamond Logo is 53 by 86 pixels --   divide by 16 */
	{
	position: absolute;
	top: 1em;
	left: 2em;
	width: 3.43em;
	height: 2.47em; 
	}
	
#hdr1  img  	/* Earth Stones Logo is 53 x 400 pixels --   divide by 16 */
	{
	position: absolute;
	top: 1em;
	left: 8em;	
	height:3.3em;
	width:25em;
	}
	
#bar	/* this just places a double line horizontally across the top of the page  */
	{
	height:1px;
 	margin-left:1em;
 	margin-right:1em;
 	border-bottom:double blue 3px;
 	}

#col		/* left column holding navigation and images -- will adapt width accordingly */
	{
	float: left;
	width:1em;
 	}

#col1  img 	/* ring  135 x 160 divide by 16 */
	{
	height: 8.4em;
	width:10em;
	margin-left:2em;	 /* this moves the image from left edge  */
	}
	
#col2  img 	/* angel/cat pendant 144 x 100 pixels -- divide by 16 */
	{
	height: 9em;
	width: 6.25em;
	margin-left: 3.2em;	 /* this moves the image from left edge  */
	}
	
#col3  img 	/* d/d pendant 106 x 100 pixels -- divide by 16 */
	{
	height: 6.625em;
	width: 6.25em; 
	margin-left: 3em;	 /* this moves the image from left edge  */
	}
	
#col4  img 	/* stone pendants 215 by 120 pixels -- divide by 16 */
	{
	height: 13.4em;
	width: 7.5em;
	margin-left:2.8em;	 /* this moves the image from left edge  */
	}
		
#cont	/* main column (right) holding all text and  images */
	{
	margin-left:  14em;
	width:29.5em;
	width:34em;
 	background:	white;
	color: #333333;
	font-family: "Times New Roman", Bodoni, Garamond, "Minion Web", "ITC Stone Serif", serif;
 	text-align:left;
  	padding: 1em;
	border-left:double blue 3px;
	 }
	 
#cont p
	{
	font-style: italic;
	font-size: 1.2em;
	}
	
#cont ul
	{
	font-style: italic;
	font-size: 1em;
	list-style: none;
	line-height: 1.2em;
	margin-bottom: 1em;
	}

#cont ul li
	{
	margin-bottom: 1em;
	}


#cont li:first-letter		/*  this make the first letter in the list larger */
	{
	color: blue;
	/* font-size: 1.1em; */
	}
				
#joa  img /* jewelers of america  65 x 160 pixels -- divide by 16 */
	{
	height: 4.06em;
	width: 10em; 
	float: right;
	}

/*  how to buy a diamond  */

#perfectDia  img /* perfect diamond  112 x 175 pixels -- divide by 16 */
	{
	height: 7em;
	width: 10.9em; 
	}

#diaProporations  img /* diamond  proporations 215 x 268 pixels -- divide by 16 */
	{
	height: 13.4em;
	width: 16.75em; 
	}	

#improperProporations  img /* improper  proporations 90 x 364 pixels -- divide by 16 */
	{
	height: 5.6em;
	width: 22.75em; 
	}
	
#inclusions  img /* inclusions 98 x 164 pixels -- divide by 16 */
	{
	height: 6.1em;
	width: 10.2em; 
	}	

#shape  img /* shape 173 x 266 pixels -- divide by 16 */
	{
	height: 10.8em;
	width: 16.6em; 
	}
	
/*  birth stones  */

.largeGems  img /* shape 244 x 216 pixels -- divide by 16 */
	{
	height: 15.25em;
	width: 13.5em; 
	}
	
.smallGems  img /* shape 81 x 72 pixels -- divide by 16 */
	{
	height: 5em;
	width: 4.5em; 
	}
	
.smallGems  a 
	{
	position:  relative;
	top:  -2.5em;
	margin-left:8em;
	}	

.pictures  img /* shape 300 x 300 pixels -- divide by 16 */
	{
	height: 18.75em;
	width: 18.75em; 
	}

.divider img /* shape 15 x 200 pixels -- divide by 16 */
	{
	position:  relative;
	top:  -2.5em;
	height: .94em;
	width: 12.5em;
	margin-left: 16em;
	}
			
#esLogo  img /* Earth Stones Logo 54 x 268 pixels -- divide by 16 */
	{
	height: 3.375em;
	width: 16.75em; 
	}

	
h1	/* this make the h1 declaration what I want while allowing SE's to index things */
	{
	font-style: italic;
	font-size: 1.6em;
	text-align:left;
	color: blue;
	}
 	
h2	/* this make the h1 declaration what I want while allowing SE's to index things */
	{
	font-style: italic;
	font-size: 1.2em;
	color: blue;
	}
	
em	/* this make the em declaration what I want while allowing SE's to index things */
	{
	font-style: italic;
	font-size: 1.2em;
	color: blue;
	}
	
#browsers		/* browser box */
	{
	left: 0;
	float: left;
	width:30em;
	padding: 0;
	text-align:left;
	}

#browsers	p	/* browser box */
	{
	font-family: arial, helvetica, gill sans, sans-serif;
	font-size: .8em;
	font-style: normal;
	text-decoration: none;
	color: #665665;
	}
	
#search2	/* --- search box --- */
	{
	width: 42em;
	left: 0;
	margin-left: 3em;
	padding-right: 2em;
	margin-bottom:1em;
	font-family: arial, helvetica, gill sans, sans-serif;
	text-align: right;
	color: #666666;
	/* border: 1px solid  red; */
	}

#search	/* --- search box --- */
	{
	left: 0;
	float: left;
	width:30em;
	padding: 0;
	text-align:left;
	color: #666666;
	/* border: 1px solid  red; */
	}
	
#search p form
	{
	font-size: .8em;
	text-align: left;
	}
		
 #validation	/* validation box */
	{
	left: 0;
	float: left;
	width:30em;
	padding: 0;
	text-align: center;
	}

#validation p
	{
	font-family: arial, helvetica, gill sans, sans-serif;
	font-size: .8em;
	font-style: normal;
	color: #665665;
	text-align: center;
	}
	
#validation img
	{
	height: .93em;	/* validation tags 15 x 80 divide by 16  */
	width: 5em; 
	}
		
 #copyright	/* --- copyright box --- */
	{
	left: 0;
	float: left;
	width:30em;
	padding: 0;
	text-align: center;
	margin-bottom:1em;
	font-family: arial, helvetica, gill sans, sans-serif;
	color: #665665;
	}

#copyright p
	{
	font-size: .7em;
	}

.clear
	{
	clear:both;
	}
	
os
	{
	display: inline;
	}

.os a
	{
	display: inline;
	float: right;
	font-family: arial, helvetica, gill sans, sans-serif;
	font-size: .7em;
	text-decoration: none;
	text-align: right;
	color: #666666;
	}
		
	/* ---=== nav code ===--- */
	
 #navcontainer
	{
	width: 7em;
	margin-left:  1em;
	font-family: Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif;
	font-style: italic;
	font-size: 1.2em;
	text-align: center;
	background-color: #90bade;
	color: #333;
	}

div>#ie6w-fix	/* everything except IE6 see's these statement which widen and center the buttons */
	{
	width: 10em;
	margin-left:  -.2em;
	}
	
 #navcontainer em
	{
	color: white;
	}
	
#navcontainer ul
	{
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	}

#navcontainer li
	{
	border-bottom: .5em solid white;
	margin: 0;
	}

#navcontainer li a
	{
	display: block;
	padding: 5px 5px 5px 0.5em;
	border-left: 1em solid #1958b7;
	border-right: 1em solid #508fc4;
	background-color: #2175bc;
	color: #fff;
	width: 100%;
	text-decoration: none;
	}

html>body #navcontainer li a { width: auto; }

#navcontainer li a:hover
	{
	border-left: 1em solid #1c64d1;
	border-right: 1em solid #5ba3e0;
	background-color: #2586d7;
	color: #fff;
	}
	
/*   end of style sheet  */