body { 

	background-color: #FFFFFF; color: #333333;

	margin: 0; padding: 0;

	font: 12px/150% Helvetica, Arial, "Trebuchet MS", sans-serif;

	background: inherit; color: #6E6B62;

}

a:link, a:visited {

	font-weight: bold;

	color: #6BB1DA; background-color: inherit;

	text-decoration: none;

}

a:hover, a:active {

	text-decoration: underline;

}

div#container { /* border: 1px solid green; */

	position: relative;

	width: 755px;

	left: -10px;

	margin: 0 auto;

}

div#page { /* outline: 1px solid black;  */

	position: relative;

	width: 780px; height: 100%;

	margin: 0 auto;

}

div#left { /* outline: 1px dotted red; */

	position:absolute;

	width:256px;

	left: 0; top: 0; 

	padding: 0 !important;

	margin: 0 2px 0 0;

	line-height: 0;

	z-index: 1;

}

#beigetextbox {

	background-color: #eeeecc;

	padding: 15px;

	border: thin solid #000000;

}

div#leftcontent { /* outline: 1px dotted green; */

	width: 220px;

	margin-top: 2px;

}

div#leftcontent.topmargin{ /* outline: 1px dotted green; */

	width: 220px;

	margin-top: 1.6em;

}

div.leftimage {

	margin-top: 1.8em; 

	font-weight: bold;

}

div#main { /* outline: 1px dotted blue; */

	position: relative;

	width: 522px !important;

	left: 258px; top: 0;

	z-index: 5 !important;

}

div#content { /* border: 1px dashed teal;  */

	position:relative; 

	top: 35px;

	min-height:261px;

	padding: 0 0 50px 25px;

}

#preloads {  /* This preloads the link hover graphics out of sight */

	position: absolute;

	top: -1000px;

}

ul#menu { /* outline: 1px solid #FF0000; */

	position: relative;

	top: 2px;

	margin: 0; padding: 0;

	width: 522px; height: 35px; 

	list-style-type: none;

	z-index: 100;

}

ul#menu li{ 

	position: absolute;

	display: inline; 

	height: 35px; 

} 

ul#menu li a {

	display: block;

	height: 35px;

	color: #FFFFFF;	

	text-decoration: none; 

}



li#AboutSusan { margin-left:0; width:96px; }

li#AboutSusan a:link, ul#menu li#AboutSusan a:visited { 

	width: 96px; background-image:url(../images/AboutSusan-m.png); }

ul#menu li#AboutSusan a:hover, ul#menu li#AboutSusan a:active { 

	width: 96px; background-image:url(../images/AboutSusan-mH.png); }

	

ul#menu li#Compositions { margin-left:98px; width:93px; }

ul#menu li#Compositions a:link, ul#menu li#Compositions a:visited { 

	width: 93px; background-image:url(../images/Compositions-m.png); }	

ul#menu li#Compositions a:hover, ul#menu li#Compositions a:active { 

	width: 93px; background-image:url(../images/Compositions-mH.png); }

	

ul#menu li#Reviews { margin-left:193px; width:68px; }

ul#menu li#Reviews a:link, ul#menu li#Reviews a:visited { 

	width: 68px; background-image:url(../images/Reviews-m.png); }

ul#menu li#Reviews a:hover, ul#menu li#Reviews a:active { 

	width: 68px; background-image:url(../images/Reviews-mH.png); }

	

ul#menu li#Tools { margin-left:263px; width:100px; }

ul#menu li#Tools a:link, ul#menu li#Tools a:visited { 

	width: 100px; background-image:url(../images/Tools-m.png); }

ul#menu li#Tools a:hover, ul#menu li#Tools a:active { 

	width: 100px; background-image:url(../images/Tools-mH.png); }

	

ul#menu li#Studio { margin-left:365px; width:52px; }

ul#menu li#Studio a:link, ul#menu li#Studio a:visited { 

	width: 52px; background-image:url(../images/Studio-m.png); }

ul#menu li#Studio a:hover, ul#menu li#Studio a:active { 

	width: 52px; background-image:url(../images/Studio-mH.png); }

	

ul#menu li#Links { margin-left:419px; width:43px; }

ul#menu li#Links a:link, ul#menu li#Links a:visited { 

	width: 43px; background-image:url(../images/Links-m.png); }	

ul#menu li#Links a:hover, ul#menu li#Links a:active { 

	width: 43px; background-image:url(../images/Links-mH.png); }

	

ul#menu li#Contact { margin-left:464px; width:58px; }

ul#menu li#Contact a:link, ul#menu li#Contact a:visited { 

	width: 58px; background-image:url(../images/Contact-m.png); }

ul#menu li#Contact a:hover, ul#menu li#Contact a:active { 

	width: 58px; background-image:url(../images/Contact-mH.png); }



h1 {  /* This loads a hidden page title */

	position: absolute; 

	margin-left: 10px;

	width: 236px; 

	font: normal normal 8px/1em sans-serif; 

	color: #000000; background: inherit;

	top: -200px; 

	z-index:-1; 

/* 	top: 0; background: #CFF; z-index:200; */  /* THIS LINE FOR TESTING TITLES ONLY */

}	



div.imgcentre { 

	text-align: center; 

	margin: 50% 50%; 

	border: 1px solid #CCC;

}



#masthead { 

	margin: 0; padding: 0;

	width:522px; height:121px; 

	font-weight: bold; font-size: 30px;

	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;

	text-align: center; 

	color: #7C6A56; background: inherit;

}

#masthead img { border: 0; padding-bottom: 31px; }

#masthead a:hover { text-decoration: underline !important; }



h2 { border: /* 1px dotted brown;*/		/*  FIRST TITLE  */

	margin-top: 0; margin-bottom: 0; padding-bottom: 0;

	font: bold 1.17em/100% Helvetica, Arial, "Trebuchet MS", sans-serif;

	text-transform: uppercase;

	color: #7C6A56; background: inherit;

}

p.first {		/*  First Paragraph  */

	margin-bottom: 1.5em; margin-top: 1em; padding: 0;

	font: bold 1em/200% Helvetica, Arial, "Trebuchet MS", sans-serif;

	color: #58595B; background: inherit;

}

h3 {		/*  Subheads  */

	font: bold 1.17em/130% Helvetica, Arial, "Trebuchet MS", sans-serif;

	color: #7C6A56; background: inherit;

}

h3.nobottom {		/*  Subheads  */

	margin-bottom: -0.8em; padding-bottom: 0;

}

p {		/*  Standard Paragraph  */

	margin-top: 1em;

	font: normal 1em/150% Helvetica, Arial, "Trebuchet MS", sans-serif;

	color: #58595B; background: inherit;

}

p.prequote {

	margin-bottom: -1.5em; 

}

blockquote {		/*  Quote in Main Column  */

	margin: 1.65em 0 1.65em; padding: 0;

}

blockquote p {		/*  Quote in Main Column  */

	font: italic normal 1em/150% Helvetica, Arial, "Trebuchet MS", sans-serif;

	color: #7C6A56; background: inherit;

}

.source {		/*  Name of person to be quoted  */

	font: bold 1em/150% Helvetica, Arial, "Trebuchet MS", sans-serif;

	color: #58595B; background: inherit;

}

.title {		/*  Title of person quoted  */

	font: normal 1em/150% Helvetica, Arial, "Trebuchet MS", sans-serif;

	color: #58595B; background: inherit;

}

#leftcontent blockquote p {		/*  People Quotes, Left Panel  */

	margin: 1.57em 0 1.5em; padding: 0;

	width: 241px;

}

#leftcontent blockquote p {		/*  People Quotes, Left Panel  */

	font: italic normal 0.92em/136% Helvetica, Arial, "Trebuchet MS", sans-serif;

	color: #648F9E; background: inherit;

}

#leftcontent .source {		/*  Name under quote, Left Panel  */

	font: italic normal 0.92em/136% Helvetica, Arial, "Trebuchet MS", sans-serif;

	color: #7C6A56; background: inherit;

}

#leftcontent ul { /* border: 1px solid magenta; */

	list-style-type: disc;

	color: #648F9E; background: inherit;

}	

#leftcontent li { /* border: 1px solid lightblue; */

	margin-left: -28px; margin-top: 0.8em;

	font: italic normal 0.92em/130% Helvetica, Arial, "Trebuchet MS", sans-serif;

}

#left #nav {		/*  Navigation Box, Left Panel  */

	position: relative;

	top: 0;

	margin-top: 0; padding-top: 0;

	font: italic bold 1.2em/208% Helvetica, Arial, "Trebuchet MS", sans-serif;

	color: #7C6A56; /*background-color: #DDE0A7;*/

	z-index: 4;

}

.navtitle {font-size:1.8em; font-style:normal; margin-bottom: -1em;}

#left #nav ul { /* outline: 1px dotted brown; */

	margin-top: 2px;

	padding: 2em 0;

	list-style-type: none;

}

#left #nav li {

	margin-left: 55px;

}

#left #nav a:link, #nav a:visited {		/*  Links, Navigation Box, Left Panel  */

	color: #648F9E; background: inherit;

}

#left #nav a:hover, #nav a:active {		/*  Hover, Active, Navigation Box, Left Panel  */

	text-decoration: underline;

}

div.figure-R {

	text-align: right;

	margin-top: 30px;

	border: 0;

}

div.figure-C {

	text-align: center;

	margin-top: 30px;

	border: 0;

}

div.figure-R img, div.figure-C img { 

	border: 0; padding-bottom: 31px; 

}

div.image-LC { /* outline: 1px dashed green;  */

	width: 256px;

	padding-top: 30px;

	text-align: center;

}

div.image-LC img {

	padding: 0;

}



/* LISTED LINKS ON THE "LINKS" PAGE: */



#ullinks {  /* outline: 1px magenta solid; *//*  border: 1px magenta solid; */

	width: 460px;

	list-style-type: none; 

	font-weight:bold;

}

 

#ullinks li { /* border: 1px dotted black;  */

	position: relative;

	left: -20px;

	padding: 0; 

	text-indent: -14px;

}



#ullinks a {

	position: relative;

	display: block;

	margin-bottom: 1.1em;

	padding: 0 10px;		

	font-weight: bold;

	line-height: 1.1em;

	text-decoration: none;

}



#ullinks a:link, #ullinks a:visited {

	background: inherit; color: #58595B;

}



#ullinks a:link span, #ullinks a:visited span {

	visibility: hidden;

}



#ullinks a:hover, #ullinks a:active {

	visibility: visible;	

}



#ullinks a:hover { 

	background: inherit; color: #6BB1DA;

}



#ullinks a:hover span, #ullinks a:active span { /* border: 1px solid orange; */

	visibility: visible;

	margin-left: 2em;

}



#ullinks a:hover span {

	background: inherit; color: #FFFFFF; background: transparent;

	background: inherit; color: #58595B;

}



#ullinks a:active { 

	background: inherit; color: #58595B; 

}



#ullinks a:active span {

	background: inherit; color: #58595B; 

}



/* STYLES FOR THE "CONTACT" PAGE: */



#form .req {

	font-size: 1.5em;

	vertical-align: bottom;

	color: #FF0000; background: inherit;

}



#form span.col2 {

	position: absolute; 

	left: 90px;

	margin-bottom: 1.5em;

}



#form span.nameline {

	position: relative;

	top: 1.7em !important;

	margin-left: 85px;

}



#form input.name {

	width: 140px;

}



#form input.right {

	width: 286px;

}



#form #spacer {

	margin-right: 110px;

	margin-left: 20px;

}



#form p.leftcol1 {

	position: relative;

	margin-bottom: 2em; margin-bottom: -0.5em;

}



#form p.leftcol2 {

	position: relative; 

	top: 2.5em !important;

	height: 2em;

}



#form textarea, #form input {

	background-color: #98B0B6 !important;

	overflow: auto;	

}



#contact1 p#submitform {

	position: relative;

	margin-top: 120px; margin-top: 160px;

	text-align: center;

}



p#submitform input {

	color: #FFFFFF; background: inherit;

	cursor: pointer !important;

}



#formresponse {

	width: 90%;

	padding: 5%;

	background: inherit; color: #333333;

}



#formresponse a:link, #formresponse a:visited {

	padding: 0; margin: 0;

	color: #5588BB; background: inherit;

}



#formresponse a:hover, #formresponse a:active {

	color: #003399; background: inherit;

}



#formresponse p {

	text-indent: 0;

	text-align: left;

	line-height: 1.1em !important;

	padding-bottom: 0;

}



#formresponse .boldred {

	font-weight: bold;

	line-height: 1em;

	color: #D63334; background: inherit;

}



#formresponse .returnbutton {

	margin-top: 2em;

	padding-top: 3px;

	padding-bottom: 5px;

	text-align: center;

}



#formresponse .returnbutton a:link, #formresponse .returnbutton a:visited {

	width: 16em;

	padding: 4px 6px;

	font: normal 12px Verdana, Arial, sans-serif;

	color: #000000; background: #999999;

	border: 3px solid;

	border-left-color: #CCCCCC; border-top-color: #CCCCCC;

	border-right-color: #777777; border-bottom-color: #777777;

}



#formresponse .returnbutton a:hover, #formresponse  .returnbutton a:active {

	color: #FFFFFF; background-color: #999999;

	border-left-color: #777777; border-top-color: #777777;

	border-right-color: #CCCCCC; border-bottom-color: #CCCCCC;

	text-decoration: none;

}



#form a.formresponse2 {

	display: block; 

	height: 1.1em; width: 5em; 

	margin: 1em auto; 

	font: 1em bold Arial, sans-serif; 

	text-align:center;

}



#form a.formresponse2:link, #form a.formresponse2:visited {

	background: #CCCCCC; color:#000000; 

	border-left-color: #E6E6E6; border-top-color: #E6E6E6;

	border-right-color: #888888; border-bottom-color: #888888;

}



#form a.formresponse2:hover, #form a.formresponse2:active {

	background: #AAAAAA; color:#000000; 

	border-left-color: #888888; border-top-color: #888888;

	border-right-color: #CCCCCC; border-bottom-color: #CCCCCC;

}



.h-rule {

	border: 1px solid;

	border-top-color: #545454; 

}



/*  VISIONWEAVER link styling:  */



p.credit {

	text-indent: 0 !important; 

	padding-left: 2em;

}



ul#credit {

	list-style-type: square;

}

.credit a#visionweaver:link, .credit a#visionweaver:visited {

	background : #006699;

	color : #FFFF99;

	font-family : Verdana, Arial, Helvetica, sans-serif;

	font-size : 9px;

	font-style : italic;

	font-weight : bold;

	padding : 1px;

}



.credit a#visionweaver:hover {

	background : #FFFF99;

	color : #006699;

}



/*  COMPOSITIONS PAGE  */

table#compositions {

	font-size: 12px; 

	line-height: 150%;

	line-height: 22px;

}

table#compositions {

	position: relative;

	left: -282px;

	width: 778px;
	
	top: 80px;

	border-collapse: collapse;

	/*border: 1px solid #999999;*/
	border: none;

}

.composition {font-weight:bold;}
.compositiontitle {font-size:1.4em;}
.compositionlevel {font-size:1.2em;}
.compositionprice {font-size:1.1em;}

table#compositions th, table#compositions td {

	/*border: 1px solid #CCBAA6;*/
	border:none;
	vertical-align: top;

}



table#compositions col#pix { width: 251px; }

table#compositions col#category { width: 313px; }

table#compositions col#level { width: 80px; }

table#compositions col#price { width: 45px; }

table#compositions col#cart { width: 74px; }



table#compositions td.level div, table#compositions td.price div, table#compositions td.cart div  {

	padding: 0; margin: 0;

	line-height:1.2em;

}

table#compositions col#cart { 	

	text-align: center;

}

table#compositions td.pix p {

	padding: 0 10px;

	/*text-align: justify;*/

}

a.oceanna {

	display: block;

	margin: -12px auto;

	width: 60px !important;

	text-align: center;

	font-size: 11px;

	line-height: 1.1em;

	padding: 4px 0;

	border: 2px solid;

}

table#compositions td.cart a.oceanna:link, table#compositions td.cart a.oceanna:visited  {

	background-color: #98B0B6 !important; color: #FFFFFF;

	border-top-color: #B8D0D6;

	border-left-color: #B8D0D6;

	border-right-color: #587076;

	border-bottom-color: #587076;



}

table#compositions td.cart a.oceanna:hover, table#compositions td.cart a.oceanna:active  {

	background-color: #789096 !important; 

	border-top-color: #587076;

	border-left-color: #587076;

	border-right-color: #B8D0D6;

	border-bottom-color: #B8D0D6;



}

table#compositions td.cart form { /* outline: 1px solid magenta; */

	margin: 2px 0 4px; padding: 0;

	height: 25px;

	line-height: 0;

}

table#compositions th {

	font-weight: normal;

	text-align: center;

	line-height: 1.3em;

	vertical-align:middle;

	padding-top: 5px;

}

table#compositions th.category {

	font-weight: bold;

	text-align: left;

	padding-top: 2px;

}

table#compositions td  {

	padding-top: 23px; padding-bottom: 6px;

	text-align: center;

	line-height: 29px;

}

table#compositions td img {

	border: 0;

}

table#compositions td a {

	font-weight: normal;

	text-decoration: none;

}

table#compositions td a:link, table#compositions td a:visited, table#compositions td a:active {

	background: inherit;  color: #6E6B62;

	text-decoration: none;

}

table#compositions td li span {

	background: inherit;  color: #CC0000 !important;

}

table#compositions a:hover {

	background: inherit; color: #6BB1DA;

	text-decoration: none;

}

table#compositions td.pix, table#compositions td.level, table#compositions td.price, table#compositions td.cart  {

	padding-top: 0px; padding-bottom: 6px;

	text-align: center;
	
	color:#000000;
	
	font-weight: bold;

}

table#compositions td.category, table#compositions td {

	padding-top: 0;

	text-align: left;

}

table#compositions h2, table#compositions h3 {

	margin: 0px 10px 3px 15px;

}

table#compositions ul li {

	margin-left: 0; 

}

table#compositions ul.indent {

	margin-left: 15px;

	line-height: 20px;

}

table#compositions .note1, table#compositions .note2, table#compositions .note4, table#compositions .note5, table#compositions .note6, table#compositions .note7, table#compositions .note8 {

	font-size: 9px;

	line-height: 10px;

	margin-right: 5px; margin-left: 13px;

	text-indent: -13px;

}

table#compositions .note7 {

	margin-left: 10px;

}

table#compositions .note3 {

	font-style: italic;

	margin: 0 25px;

} 

table#compositions h2 {

	font-size: 150%;

}

table#compositions h2, table#compositions h3 {

	margin-bottom: 0;

}

table#compositions h3 {

	padding-top: 0px;

}

table#compositions ul {

	list-style-type: none;

	margin: 0 auto 0 -20px;

}

table#compositions ul.indent h3 {

	margin-left: 0;

}

table#compositions td.category li img { 

	vertical-align: text-top; 

	margin-left: 0px; 

}

#left #nav ul.compositions {

	padding: 1em 0 0;

}

#left #nav ul.compositions li#bkg {

	height: 116px !important;

	width: 256px;

	margin-left: 0;

	color: #7C6A56; /*background-color: #DDE0A7;*/

}

#left div.playingclip { /*  outline: 1px dashed magenta;   display: none; */

	position: absolute;

	margin-left: 15px;

	top: 190px;

	z-index: 1;

}

#left div.playingclip object {

	z-index: 0 !important;

}

#left div#bordertop-white { 

	margin-top: -90px;

	width: 256px;

	line-height: 0;

	border-top: 2px solid #FFFFFF;

	z-index: 101;

}

#left div.playingclip p {

	margin-bottom: 0;

	margin-top: 8px;

}

#left div.playingclip a { /* outline: 1px dotted #999; */

	display: block;

	text-align: center;

	width: 4em;

	margin: -25px 0 0 175px;

	padding: 2px 0;

	font-size: 11px;

	line-height: 12px;

	border: 2px solid;

	text-decoration: none !important;

}

#left div.playingclip a:link, #left div.playingclip a:visited  {

	background-color: #D2D69D !important;

	border-top-color: #F2F6BD;

	border-left-color: #F2F6BD;

	border-right-color: #8D9057;

	border-bottom-color: #8D9057;



}

#left div.playingclip a:hover, #left div.playingclip a:active {

	background-color: #C2C67E !important;  color: #0099FF;

	border-top-color: #8D9057;

	border-left-color: #8D9057;

	border-right-color: #F2F6BD;

	border-bottom-color: #F2F6BD;

}

#left div.playingclip p {

	margin-bottom: 0;

}

div#error {

	 position: absolute; 

	 left: -14px; top: -175px; 

	 width: 220px;  

	 padding: 10px; 

	 font: normal bold 12px/130% Arial, Helvetica, sans-serif;"

	 border: 2px solid #98B0B6;

	 background:#FFFFFF; color:#CC0000; 

}



.red, td.category li span { 

	color:#CC0000 !important; background: inherit;

	font-weight: normal; 

	font-style: normal;

	font-size: 12px;

} 

/*  TEMPORARY STYLES  */



.tempImage {

	margin:0; padding:0;

	text-align: center;

	font: 16px/16px bold Arial, sans-serif;

	color: white; background: #C00;

	z-index: 200;

}



/* BELOW ARE THE PRODUCT CSS POPUP BOX RULES */



@media screen {

/* DOM JavaScript popups below */



#mainpg #js-popups div {

	position: fixed;

	top: 15px;

	left: 48%;

	width: 46%;

	border-color: #DC9000;

	border: 4px solid #DC9000;

	background-color: #FFD; color: #003;

	padding: 10px;

	z-index: 10;

}

/*

* html #mainpg #js-popups div {

	position: absolute;

	left: 25%;

	width: 75%;

}

*/

#mainpg #js-popups div img {

	float: right;

	margin-left: 10px;

}

	

#js-popups { 

	visibility: hidden; 

}  



.hide, #compositions div#js-popups div.popups { display: none !important; }  



.pop { cursor: default; }



.show {

	display: block; visibility: visible;

	position: fixed;

	top: -93px;

	padding: 10px;

	width: 216px; 

	border: 1px solid #666; 

	background-color: #FFD; color: #4E4B42; 

	z-index: 300;

	margin: 100px auto 100px -273px; 

}



p.printmessage {

	display: none;

}

}



/* END OF PRODUCT POPUP BOX RULES */