/* ------ Section 1 - Global Body, Font and Link Settings ------ */

body {
background: url(image-files/mosaico.gif) top left repeat;
margin: 0;
padding: 0;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
color: #000;
font-size: 1em; /* hl default ws 84%; */
}

h1, h2, h3, h4, h5, h6 {
background-color: transparent;
color: #369; /* denim blue, headlines */
/* hl changed clear: both; */
}

h2, h3, h4, h5, h6 {
margin-top: 24px;
}

h1 {
margin-top: 5px;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
border-bottom: 0 solid #369;
text-align: center;
}

h2 {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
border-bottom: 0px solid #369;
}

h3 {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
border-bottom: 1px solid #369; /* hl changed from 0 to 1px */
}

h4 {/* hl added.  Was too much space below h4 */
	margin-bottom: -2px;
}


blockquote {
margin: 12px 56px;
color: #006;
font-size: 100%;
line-height: 20px;
font-family: 'Courier New', Courier, monospace;
}

code {
color: navy;
}

img {
border: 0 solid #ddd;
}

a:link img {
border: 0;
}


/* -- General Link Styling -- */

a:link {
color: #000066; 
text-decoration: underline;
}

a:visited {
color: purple;
text-decoration: underline;
}

a:hover {
color: #963;
text-decoration: underline;
}



/* ------ Section 2 - Global Page Structure ------- */

#PageWrapper {
width: 1000px; /* hl changed from 960px; */
border: 0px solid #963;   /* color is leather brown but no wrap in this design */
}

#Header {
position: relative;
height: 216px;
}

#ContentWrapper {
float: left;
width: 100%;
}

#ContentColumn {
margin: 0 180px 0 180px;    /* STEP 1: set to "0 ExtraColumnWidth 0 NavColumnWidth" */
padding: 0 10px 0 10px;
}

#NavColumn {
float: left;
width: 179px;               /* STEP 2: to set left column at 180, set 1 less than 180 here */
margin-left: -1000px;        /* STEP 3: set to the same width specified in #PageWrapper above (but with minus sign)  */
}

#ExtraColumn {
float: left;
width: 179px;               /* STEP 4: to set right columns at 180, set 1 less than 180 here */
margin-left: -180px;        /* STEP 5: set to -(ExtraColumnWidth) */
}

#Footer {
clear: both;
width: 100%;
padding: 8px 0;
border-top: 0px solid #f0f5fb;
}

.Liner {
padding: 10px;
}

#Header .Liner {
padding: 0;
}

#Footer .Liner {
margin: 0;
padding: 0 190px;
}



/* ------ Section 3 - Page Structure Details ------ */

#PageWrapper {
margin: 0px auto 10px auto;
background-image: url(image-files/background.jpg);
background-repeat: repeat-y;
}

#Header {
background-image: url(image-files/header-image.jpg);
background-repeat: no-repeat;
background-color: transparent;
background-position: top left;
}

#ContentWrapper {
background-image: url(image-files/background.jpg);
background-repeat: repeat-y;
background-color: transparent;
}

#NavColumn {
background-image: url();
background-repeat: no-repeat;
background-color: transparent;
text-align: center;
}

#ContentColumn {
background-image: url();
background-repeat: no-repeat;
background-color: transparent;
}

#ExtraColumn {
background-image: url();
background-repeat: no-repeat;
background-color: transparent;
text-align: center;
}

#Footer {
background-image: url(image-files/footer-background.jpg);
background-repeat: no-repeat;
background-color: transparent;
background-position: bottom;
text-align: center;
font-size: 85%;
}

#NavColumn {
font-size: 90%;
color: #633;
}

#ExtraColumn {
font-size: 90%;
}

#NavColumn h4 {
font-size: 90%;
color: #633;
margin-top: 0;
}

#ExtraColumn h4 {
font-size: 90%;
color: #633;
margin-top: 0;
}


/* ------ Section 4 - Left Column Navigation ------ */

.Navigation {
width: 100%;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
background-color: transparent;
}


/* -- Nav Headers -- */

.Navigation h3 {
padding: 0;
font-size: 110%;
color: #633;
border-bottom: 1px solid #963;
margin: 12px 0; 
}

/* -- Nav List -- */

.Navigation ul {
list-style-type: none;
padding: 0 0 8px 5px;
margin: -6px 0 0 0;
}

.Navigation li {
background-color: #ffc;        /* pale yellow, for button and RSS box backgrounds -- */
border: 1px solid #8f8fb3;
margin-bottom: 3px;
}

/* -- Navigation Link styles -- */

.Navigation a:link {
color: #666;
/*display: block;  hl removed */   /*  this makes the whole box highlight rather than just the text */
padding: 3px 0 3px 4px; 
text-decoration: none;
}

.Navigation a:visited {
color: purple;
/* display: block; hl-removed    /*  this makes the whole box highlight rather than just the text */
/* padding: 3px 0 3px 4px; */ /* hl-removed */
text-decoration: none;
}

.Navigation a:hover {
color: #369;
/* display: block;    /*  this makes the whole box highlight rather than just the text */
/* padding: 3px 0 3px 4px; */ /* hl-removed */
/* background-color: #ccc;  hl-removed /* grey used in center column and for lit buttons both navbars and AdSenseBox bg color */
text-decoration: underline;
}



/* ------ Section 5 - Additional Navigation ------ */

/* -- Thumbnail-with-Caption Navigation -- */

.ThumbnailLink {
text-align: center;
}

.ThumbnailLink a:link {
text-decoration: none;
}

.ThumbnailLink a:hover .Caption {
text-decoration: underline;
color: red;
}


/* -- Horizontal Text NavBar -- */

.ExtraNav {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
}

.ExtraNav ul {
list-style-type: none;
padding: 0;
}

.ExtraNav ul li {
background-color: transparent;
text-align: center;
}

.ExtraNav a:link {
color: #336699; /* orig was black */
text-decoration: none;
text-align: center;
padding: 0 4px;
}

.ExtraNav a:visited {
color: #336699; /* orig: purple; */
text-decoration: none;
}

.ExtraNav a:hover {
color: white;
background-color: #963;
text-decoration: underline;
}

#Header .ExtraNav { 
font-size: 85%; 
position: absolute; 
top: 85px; /* Top, right, left and bottom define the corners of the box */ 
right: 15px; 
left: 790px; 
bottom: 10px; 
text-align: center; /* This always has the entries centered in the box */ 
}

#Header .ExtraNav ul { 
margin: 0;
text-align: center;
}

#Footer .ExtraNav {
margin: 0px auto;
background-color: transparent;
}

#Footer .ExtraNav ul{
position: relative;
top: 5px;
right: 0px;
}

#Footer .ExtraNav ul li {
display: inline;
text-align: center;
}



/* ------ Section 6 - Boxes ------ */

.CalloutBox {
background-color: #fff;
width: 85%;
border: 1px solid #633; 
margin: 18px auto 24px auto;
padding: 4px;
color: #369;
}

div.CalloutBox p {
margin: 13px;
}

p.CalloutBox {
padding: 13px;
}

div.CalloutBox h1,
div.CalloutBox h2,
div.CalloutBox h3,
div.CalloutBox h4,
div.CalloutBox h5,
div.CalloutBox h6 {
margin: 13px 0 0 13px;
}

.ReminderBox {          
background-color: #ccc;
width: 24%;
border: 1px solid #369;
margin: 0 0 12px 18px;
float: right;             /* adding float enables text to flow around it */
color: #006;
padding: 3px; /* hl added */
text-align: center; /*hl added */
}


.ReminderBox h4 {
margin: 0;
padding: 2px;
text-align: center;
background-color: #fff;
}

.ReminderBox p {
font-size: 80%;
padding: 0 4px;
line-height: 120%;
text-align: left; /* hl added */
}

.AdSenseBoxLeft, .AdSenseBoxRight, .AdSenseBoxCenter468, .AdSenseBoxExtraColumn {
padding: 0px; /* hl changed from 5 */
background-color: transparent;
border: 0px;
}

.AdSenseBoxLeft {
margin: 0 18px 12px 18px;
float: left;
}

.AdSenseBoxRight {
margin: 0 18px 12px 18px;
float: right;
}

.AdSenseBoxCenter468 {
width: 468px;
margin: 0 auto 12px auto;
clear: both;
}

.AdSenseBoxExtraColumn {
padding: 0;
margin: 0 auto 12px auto;
text-align: center; /* hl added */
clear: both;
}

.ReturnToNavBox {
clear: both;
background-color: #E6D9B9; /* hl orig transparent; */
width: 100%; /* hl orig 90%; */
border-top: 1px solid #369;
border-bottom: 0px solid #369;
margin: 0 auto 12px auto;
padding: 4px;
text-align: left; /* hl orig center; */
}



/* -- RSS Box -- */

#RSSbox {
width: 148px;
background-color: #ccc;
border: 1px solid #369;
margin: 8px auto 10px 3px;
padding: 2px 2px 10px 2px;
font-size: 100%;
font-weight: bold;
color: #369;
line-height: 120%;
text-align: center;
}



/* ------ Section 7 - Frequently Used Styles ------ */

.Clear {
clear: both;
}

.Caption {
font-size: 85%;
font-weight: bold;
color: #000;
display: block;
line-height: 150%;
margin-bottom:10px;
text-align: center; /* hl added */
}

/* -- floats -- */

.ItemRight {
float: right;
margin: 2px 0 12px 18px;
text-align: center;
}

.ItemCenter {
margin: 2px auto 12px auto;
text-align: center;
clear: both;
}

.ItemLeft {
float: left;
margin: 2px 18px 12px 0;
text-align: center;
}

#ContentColumn ul { 
list-style-type: none; 
padding-left: 0; 
margin-left: 10px; 
} 

#ContentColumn li { 
background: url(image-files/bullet.gif) left top no-repeat; 
padding-left: 30px; 
padding-bottom: 15px; 
} 

/* ==================================================== */
/* from here: helena's */
.BigCalloutBox { /* customizing the CalloutBox */
background-color: #fff;
width: 85%;
border: 4px double #633; 
margin: 18px auto 24px auto;
padding: 4px;
color: #369;
}

#ContentColumn li li { /* modifyiing this to have sub-lists */
background: none;
list-style-type: circle;
list-style-position: inside;
}

#ContentColumn ol li { /* hl added because ol coming up with bullets as well */
background: none; 
padding-left: 10px; 
} 

img.bdr {
border: 1px solid #000000;
}

hr.half {
	width: 50%;
}
table.line, table.fullline {
	/* to form lines all round table and cells */
	border: 1px solid #999999;
	/* width:100%; */
}
table.line th, table.fullline th, table.blueline th {
	/* for table's header row*/
	background-color: #DCDCDC;
}
table.line td, table.fullline td, table.blueline td {
/* ensure each row is lined and top-aligned*/
	border-bottom: 1px solid #E6E6FA;
	padding: 2px;
	font-size: 13px;
	vertical-align: top;
}
table.fullline td {
	/* ensures that a fulllined-table has lines in the cells as well */
	border-left: 1px solid #E6E6FA;
}

table.pxthumb { /* this is specifically for Swarov's Product Thumbnails table */
	border: 1px solid #999999;
	border-bottom: 1px solid #E6E6FA;
	padding: 2px;
	font-size: 13px;
	vertical-align: top;
	width: 600px;
	background-color: #EEF0E2;
}


ul.con li {
	/* a con-negative bullet point */
	list-style-image: url(image-files/iconcrossgrey.gif);
}
ul.pro li {
	/* a pro-positive bullet point */
	list-style-image: url(image-files/icontickblue.gif);
}

/* =================== boxes ============= */
.AmazonCalloutBox { /* modifying CalloutBox from above.  This used for T3 pages to highlight Amazon widgets - below content */
background-color: #fff;
width: 100%;
border: 1px dotted #633;
margin: 18px auto 24px auto;
padding: 4px;
color: #369;
text-align: center;
}

.fyi, .nb, .smnb, .note, .sn, .tip, .warn {
	background-position: top left;	
	background-repeat: no-repeat;	
	padding: 15px 10px 15px 10px;	
	margin-left: 10px;
	width: 90%;	
	min-height: 18px;	
	margin-top: 5px;	
	margin-bottom: 5px;	
}
.fyi {
	/* to make a note, usu used with a div */
	background-image: url(image-files/fyi.gif);
	background-color: #EEF0E2;
	border: 1px #000000 dotted;
	color: #333333;
	font-size: 90%;
}
.nb, .smnb {
	/* to make a note, usu used with a div */
	background-image: url(image-files/iconnote.gif);
	border: 1px #ffffff dotted;
	color: #708090;
}
.smnb { /* a sm note box */
	width: 160px;
	font-size: 0.85em;
}
.note { 
	/* to make a BIG note, that site is moving to new sites*/
	background-color: #ffffff;
	background-image: url(support-files/image-files/iconnote.gif);
	background-position: top left;
	background-repeat: no-repeat;
	padding-left: 50px;
	padding-right: 10px;
	border: 3px #FF0000 dotted;
	padding-top:15px;
	padding-bottom: 15px;
	margin-bottom: 20px;
	min-height: 32px;
	color: green;
	width: 85%;
	font-size: large;
	font-weight: bold;
	margin-top: 15px;
	margin-bottom: 15px;
}
.sn { /* side note */
	background-image: url(image-files/note-side.gif);
	background-color: #ECE6E6;
	font-family: Georgia, "Times New Roman", "Bitstream Vera Serif", serif;	
	border: 1px dotted gray;
	font-size:0.85em;
	color: gray;
}

.tip {
	/* to make a note, usu used with a div */
	background-image: url(image-files/tips.gif);
	border: 1px #999999 dotted;
	color: #666666;
}
.warn {
	/* to set up warning text */
	background-image: url(image-files/warnanim.gif);
	color: red;
	padding-left: 50px;
	vertical-align: middle;
}



/* =================== miscellaneous styles ============= */
.clr {
/* just clears float from any preceding style */
	clear: both;
}
.clrright {
/* first clears, then floats (img) right */
	clear: both;
	float: right;
	margin-top: 10px;
	margin-left: 10px;		
}
.clrleft {
/* first clears, then floats (img) left */
	clear: both;
	float: left;
	margin-top: 10px;
	margin-right: 10px;		
}
#date {/* for articles' Date Written */
	clear: both;
	font-size: 10px;
	color: gray;
	float: right;
	margin-bottom: 10px;
}

#date:before {/* for articles' Date Written - adding default text */
	content: "Date written: ";
}

.left {
	/* float left with right-padding */
	float: left;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.right {
	/* float right with left-padding */
	float: right;
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.leftgallery { /* for container to include series of 100x100 thumbnails on the left */
	width: 110px;
	float: left;
}

/* these linkXXX are for links/directory listings */
.linkname {
	font-size: 12px;
	font-weight: bold;
}
.linkdesc {
	font-size: 10px;
}
.linkurl {
	font-size: 10px;
	color: green;
}
/* end these linkXXX are for links/directory listings */

.quote, .myquote {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #2A4B6F;
}
.myquote { /* more emphasis - esp when I want to say something */
font-size: 1.1em;
}


.sm {
	font-size: .85em;
}
.smgray {
	font-size: .85em;
	color: gray;
}


/* ======= COLOURS ===== */
.gray {
	color: gray;
}
.red {
	color:red;
}

.hi { /* highlight using border color */
background-color: #E7DAB8;
}	

/* ######## IFRAMED THUMBNAIL GALLERY PAGES ######## */
/* this is for the IFRAME in T2 jewelry-design.html */
iframe.gallery {
	width: 600px;
	height: 600px;
}

/* these affect the "framed" pages like jewelry-design-handicrafts01.html */
body.GalleyThumbnails {
background-image: none; 
background-color: #D8DACD;
}

body.GalleyThumbnails h1 { /*hl makiing the h1 less prominent for pg contained in iframe */
	color: black;
	font-size: 1.1em;
	border-bottom: none;
}

body.GalleyThumbnails table.fullline {
	width: 500px;
}

body.GalleyThumbnails tfoot {
	text-align: center; 
	vertical-align:middle;
	background-color: #DCDCDC;
}

body.GalleyThumbnails tbody {
	text-align: center;
}
.Navigation {
min-width: 130px;
}

#PageWrapper #NavColumn .Navigation {
min-width: 122px;
}

#PageWrapper #NavColumn .Navigation h3 {
margin-left: -4px;
margin-right: -4px;
}

.Navigation h3 {
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
font-weight: bold;
font-style: normal;
color: #000000;
text-align: left;
text-decoration: none;
letter-spacing: 0px;
line-height: 23px;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
margin: 0;
padding: 0;
background: none;
display: block; 
}

#PageWrapper #NavColumn .Navigation ul {
margin-left: -4px;
margin-right: -4px;
}

.Navigation ul {
list-style-type: disc;
width: 130px;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
margin: 0;
padding: 0;
background: none;
}

.Navigation li {
text-align: left;
font-variant: normal;
display: block;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
margin: 0;
padding: 0;
background: none;
}

.Navigation a {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
font-weight: normal;
font-style: normal;
font-variant: normal;
color: #000000;
text-align: center;
text-decoration: none;
letter-spacing: 0px;
line-height: 26px;
height: 26px;
display: block;
overflow: hidden;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
margin: 0;
padding: 0;
background: none;
*zoom: 1;
}