/* li, 6/08 for journeywork

known bugs: 
 NN4 navbar width, footer border, photo margin, strange printing for navbar, 
 		extra space btw navbar & content, map border creates extra empty box,
 		map imgs won't load next to each other,
 		14px bold appears as 12px bold (highlight, listhead, contrast)
 NN4 doesn't support content centering or list-style-image
 NN4 & IE5 don't support a:hover or a:active
 IE5 ul>li margin doesn't work
 
*/

body { 
	background-color: #CDCDCD;  /* very light periwinkle D5D8EB    black 000 periwinkle 8E98CE   dark periwinkle 7B86C6 */
/*    background: #8E98CE url(/images-working/rxytile07.jpg) repeat top left; */  /* 11jul08: for mtg, we had purple  rxytile03.png  */
	color: #333333; /*  404040  #000; */
	font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-size: 12px;
	text-align: left;
	margin-left: 15px;
	margin-right: 15px;
	margin-top: 0;
}

div#container {
    width: 960px;  /* 780 for 3w */

	background: #fff;
	margin-left: auto; /* 35px; */
	margin-right: auto; /* 35px; */
	margin-top: 0;  /* 20px;  */
	padding-top: 0;  /* 10px; */
	padding-bottom: 0px;  

	border-left: 1px solid #595959;  /* periwinkle BBBBFF  dk gray 404040 */
	border-right: 1px solid #595959;

}

div#banner {
	text-align: left;
    background: white url(/images/jwglass-grad.jpg) repeat top left; 
    height: 75px;
	margin-top: 0;
	margin-left: 0;
}

div#banner img {
	border:0;
    margin: 0;
}
div#banner img.gfaj {
    float: right;
}

div#content {
/*	border: 1px solid #BBBBFF; */
	border-top: 1px solid #BBBBFF;  
	margin-top: 0; 
	margin-bottom: 10px;
	text-align: left;


}

/* ========= side nav =================================== */

div#sidenav {
	background-color: #fff;  /* aqua #B0DDD7; */
	width: 150px;   /* was 188px   necklaces-mixnmatch */
	float:left; 
	min-height: 400px;
	text-align: left;
	margin-top: 0;
	border-right: 1px solid #BBBBFF;
	padding-top: 10px; 
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right:10px; 
}

div#sidenav h1 {
	margin: 0;
	font-size: 14px;
	font-weight: normal;
	color: #A48DCE;    /* 28oct: was 7777EE, but not sure why  */
	background-color: #fff;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 5px;
	border-bottom: 1px solid #BBBBFF; /*   lt periwinkle BBBBFF */
}

/*   dark lime 4F9A42   lime green 58AB49     med purple A48DCE    lilac C48DCE  magenta BF69A1   teal 4989AB  */

div#sidenav h1.this {
	color: #fff;
	background-color: #A48DCE;  /* med purple */  /* ========================= */
	font-weight: bold;
}
div#sidenav h1.listfollow {
	border-top: 1px solid #BBBBFF;  /* lt periwinkle BBBBFF */
}
div#sidenav a:link, div#sidenav a:visited {
	color: #8769BF;  /* med purple 8769BF */   /* ========================= */
	background-color: #fff;
	text-decoration: none;
}
div#sidenav a:hover, div#sidenav a:active {
	font-weight: bold;
	color: #A48DCE;  /* med purple */  /* ========================= */
	background-color: #fff;
	text-decoration: none;
}
div#sidenav h1.thissect, div#sidenav h1.thissect a:link, div#sidenav h1.thissect a:visited {
	color: #fff;
	background-color: #A48DCE;   /* med purple */  /* ========================= */ 
	font-weight: bold;
}
div#sidenav h1.thissect a:link, div#sidenav h1.thissect a:visited {
	text-decoration: none;
}

div#sidenav h1.thissect a:hover, div#sidenav h1.thissect a:active {
	color: #E6E6E6;  /* beige E3DEBF */
	background-color: #A48DCE;    /* med purple */  /* ========================= */
	font-weight: bold;
	text-decoration: none;
}

div#sidenav ul {                       /* ========================= */    /* black? */
	list-style-type: square;
/*
	color: #000;      
	font-weight: bold;
*/

	font-weight: bold;
	list-style-image: url(/images/squares-purple.jpg); 
}
div#sidenav ul li.this, div#sidenav li span.this {
	color: #fff;       
	background-color: #A48DCE;
	padding-left: 2px;
	padding-right: 2px;
}

/* --------------------------------------------- (end experim) -------------------------------- */


div#sidenav ul a {
	font-weight: normal;
}
div#sidenav ul.nospacebefore {
	margin-top: 0;
}
div#sidenav ul.nospacebeforeafter {
	margin-top: 0;
	margin-bottom: 0;
}
div#sidenav li.plain, li.plain {
  list-style: none;
}
ul.level2 {
	list-style-type: none;
	margin-left: 12px;
	margin-top: 0;
	margin-bottom: 0;
}
ul.level2 li {
	list-style-image: url(/images/1square3-purple.jpg); 
}
/*
ul.level3 {
	list-style-type: none;
	margin-left: 25px;
	margin-top: 0;
	margin-bottom: 0;
}
ul.level3 li {
	list-style-image: url(/images/1square3-purple.jpg); 
}
div#sidenav li.thisitem a {
	color: #fff;
	background-color: #A48DCE;  
	font-weight: bold;
}
div#sidenav li.thisitem a:hover, div#sidenav h1.thissect a:active {
	color: #E3DEBF; 
}
*/


/* ========= right content =================================== */

div#rightcontent {
	margin-top: 30px;
	margin-left: 178px;  /* 28oct: was 225px for sidenav 188px, diff=37 */
	margin-right: 20px;  /* 28oct: was 30px   breathing space */
	text-align:left;  /* needed for NN4 */
	padding-left:10px;
	margin-bottom: 30px;
	min-height: 400px;
}  
div#rightcontent h1 {  /* 28oct: not in use */
	font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 0;
	color: #9A427B;  /* magenta 9A427B  purple 8C429A  lime green 58AB49   royal blue 4958AB  dark rose AB4958  teal 4989AB */
/*	background-color: #D4E4ED;   */
}

div#rightcontent li {
	list-style-image: url(/images/1square3-purple.jpg); 
}

div.bordertest {
	width: 100%;
	height: 75px;
	background: #8E98CE url(/images-working/rxytile07.jpg) repeat top left;
}
p.hometext, p.hometextfirst, p.hometextafter {  /* top of site, top of jewelry, top of decor */
	margin-left: 30px;
	margin-right: 30px;
	text-align: justify;
}
p.hometextfirst {  /* top of site, top of decor */
	margin-top: 30px;
}
p.hometextafter {  /* top of jewelry */
	margin-bottom: 25px;
}
              /* ========= item photos ======================= */

h3.product {  /* series name, e.g. "dichroic" */ /* tried several ways to handle anchor links, couldn't find any that are good with both IE + FF */
	font-size: 12px;
	font-weight: bold;
	background-color: #BBBBFF;  /* lt periwinkle */
	padding: 3px;
	float: left;
	width: 745px; 
	margin-top: 12px;
	margin-bottom: 10px;
}
table.rightrow {  /* necklaces, process, galleries */ /* argh! giving up on css float for this many levels */
	margin-left: 7px;
	margin-bottom: 10px;
	width: 745px;
	float: left;
}

table.rightrow td.demoimg {
	width: 175px;
	vertical-align: top;
}
td.demoimg img {
	margin-bottom: 1px;
}
table.rightrow td.demotxt {
	vertical-align: top;
	margin-top: 0;
	padding-top: 0;
	padding-left: 10px;
}

div.demorow {
}
div.demoimg {
	float: left;
	clear: left;
	width: 175px;
	margin-right: 5px;
}
div.demotext {
	float: left;
	overflow: auto;
}

div.product {
	clear: both; 
}
div.itemrow {
	float: left;
	width: 748px;   /* 745px gacks in IE */
}
div.item {  /* item photos */
	padding-left: 10px; 
/*	padding-right: 10px; */
	margin-bottom: 10px;
	float: left;
	width: 175px;
}
div.item img {
/*	border: 1px solid #000; */
}
p.caption {
	margin: 0;
	padding: 0;
	margin-top: 2px;
	margin-bottom: 4px;
	text-align: center;
	font-weight: bold;
	color: #404040;
}
br.clearleft {
	clear: left;
}
br.clearboth {
	clear: both;
}
div.floatleft {
	float: left;
}	

div.floatleft300 {
	float: left;
	width: 300px; 
}	


              /* ========= gallery locations ======================= */
div.gallery {
/*	float: left; */
/*	min-width: 700px;   prevent from floating together w/o using clear, which breaks in FF2 */
	margin-bottom: 15px;  /* needed for IE; doesn't work in FF */
}
div.gallery img {
	float: left;
	margin-right: 10px;
	margin-bottom: 15px;  /* needed for FF; doesn't work in IE */
}
div.gallery p {
	margin-top: 0;
}

              /* ========= festivals ======================= */
img.booth {
	vertical-align: top;
	margin-right: 10px;
	margin-top: 15px;
}

              /* ========= process ======================= */
div.process {
	float: left; 
	padding-left: 10px;
	margin-bottom: 0px;
	width: 175px;
}

div.rightsect {  /* row of rightcontent */
/*	float: left; */
/*	clear: left; */
float: none;
}

div.birth {
	margin-right: 10px;
	margin-top: 5px;
/*	margin-bottom: 10px;  */
/* comment these 2 out to run all inline (and also uncomment the 2 margin-bottoms on the images) */
	float: left;
	width: 745px; 
}
div.birth img {
/*	float: left;
	margin-right: 10px; */
}
img.birthleft {
	float: left;
	margin-right: 10px; 
/*	margin-bottom: 5px; */
}
img.birthright {
	float: right;
	margin-left: 10px; 
/*	margin-bottom: 5px; */
}
div.birth p {
	margin-top: 0;
	margin-top: 20px; 
	vertical-align: middle;
}

/* ========= footer =================================== */
div#copyright { 
	clear:both;   /* affects spacing in opera */
/*	border-top: 1px solid #BBBBFF;   lt periwinkle BBBBFF */
	margin-top: 0px; 
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px; 
	color: #000;  /* dk purple 7957B7 */
	background-color: #BBBBFF;  /* lt blue D6D6FF   lt periwinkle BBBBFF */
	border-bottom: 1px solid #595959; 
}
#copyright a.subtle {  /* link to infotamers */
	background-color: #BBBBFF; /* lt periwinkle BBBBFF */
	color: #000;  /* dk purple 7957B7  */
	text-decoration: none;  /* underline; */
}
#copyright a.subtle:hover {
    text-decoration: underline;
}
/* ========= headings =================================== */

/* ========= images =================================== */

img.floatleft { 
	float: left;
	border: 0;
	margin-left: 10px;  /* earring options */
}

img.floatright {   /* about artist */ 
	float: right;
	margin-left: 20px;
    margin-bottom: 15px;
}

div.imgcenter {  /* past festivals */ /* process */
	text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
}
/*div.imgcenter img {
	border: 1px solid #737373;  
} */
img {
	border: 1px solid #595959;   /*  737373   */
}

/* ========= text =================================== */
p {
	font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-size: 12px; 
}
p.sidefor {  /* left nav, For men:  */
	margin-bottom: 0;
	padding-bottom: 0;
	padding-left: 10px;
	color: #A48DCE;  /* med purple A48DCE  magenta BF69A1  teal 4989AB   lime green 66B757  */
	font-weight: bold;
}
p.contact {  /* contact page */
/*	margin-left: 15px; */
}

div.clearboth { 
	clear: both;
}

.fraction {
	font-size: 80%; 
	vertical-align: 20%;
}
sub {
	font-size: 70%;
}
sup {
	font-size: 50%;
}

.emph { 
	color:#900;
	background-color:#fff;
}

.admin { 
	color: red;
	background-color: yellow;
}