/* Natural Soap Directory - Mint */

:root           { --dark:#ccffcc; --light:#ebffeb; --medium:#e1ffe1 }

address		{ font:medium Georgia, "Frank Ruhl Libre", serif }

blockquote.soapcard
		{ font:italic normal smaller Arial, Helvetica, Arimo, sans-serif;
		  text-align:justify; color:dimgray; margin:0 }

body		{ background:var(--medium) url("soap-body.gif") no-repeat fixed 98% 2%;
		  text-align:center }

a.bar:link, a.bar:visited { display:inline-block;
		  background-color:white; border:thin outset white;
		  font:normal normal normal larger Arial, Helvetica, Arimo, sans-serif;
		  text-align:center; text-decoration:none; padding:1.5% }
a.bar:hover, a.bar:active { background-color:lemonchiffon; border:thin outset white }

a.button:link, a.button:visited { display:inline-block;
		  background-color:yellow; border:thin outset white;
		  font:normal normal normal larger Arial, Helvetica, Arimo, sans-serif;
		  text-align:center; text-decoration:none; padding:1.5% }
a.button:hover, a.button:active { background-color:gold; border:thin outset white }

caption		{ text-align:left }

.center		{ text-align:center }

dd		{ font-family:Arial, Helvetica, Arimo, sans-serif;
		  text-align:justify; margin-bottom:4% }

dt		{ font:smaller Georgia, "Frank Ruhl Libre", serif;
		  text-align:left; margin-left:2% }

div		{ clear:none; margin-left:5% }

div.gallery	{ background-color:white; margin:2%; border:thick solid white;
		  float:left; width:14% }
div.gallery img { width:100%; height:auto }

div.diagram	{ background-color:transparent; margin:2%; border:none;
		  float:none; width:95% }
div.diagram img { width:100%; height:auto }
.clear          { clear:both }

fieldset	{ margin-right:15% }

fieldset.cancel { font:smaller Arial, Helvetica, Arimo, sans-serif;
		  text-align:left }

fieldset.preview { background-color:var(--dark); margin-right:0px; border:thin outset white }

form, left	{ text-align:left }

h1, h2		{ font-family:Georgia, "Frank Ruhl Libre", serif }

h3, h4		{ font-family:Georgia, "Frank Ruhl Libre", serif;
		  text-align:left; margin-left:2% }

h5		{ font:bold larger Arial, Helvetica, Arimo, sans-serif;
		  text-align:left; margin-left:2% }

h5.soapy	{ font-family:Georgia, "Frank Ruhl Libre", serif;
		  text-align:left; margin-left:4% }

span.small      { font-size:smaller }

img	        { border:0; border-style:none; max-width:100%; height:auto }

img.soapcard    { border:0px; border-style:none;
		  float:left; margin-right:5% }

.justify	{ text-align:justify }

li.lather	{ margin-bottom:5% }

.new		{ border-left:thin solid dimgray }

p		{ font-family:Arial, Helvetica, Arimo, sans-serif;
		  text-align:justify; margin:0% 2% 3% 5% }
p.logo          { text-align:center; margin:0% 0% 1% }

p.link		{ text-align:center }

p.navigate	{ background-color:var(--light);
		  text-align:center; padding:2%; border:thin outset white }

p.small		{ font-size:smaller;
		  text-align:justify }

p.soapcard	{ margin-left:0px }

.soaper		{ background-color:var(--light);
		  font-family:Arial, Helvetica, Arimo, sans-serif;
		  text-align:left; padding:2% 5%;
		  margin-right:15%; border:thin outset white }

table.sell	{ border-collapse:collapse; border:thin outset white;
                  margin:0% auto 2% }

td.cal		{ font:smaller Arial, Helvetica, Arimo, sans-serif;
		  padding:2px 8px; text-align:center;
		  background-color:#fff; border:thin solid dimgray }

td.date		{ background-color:pink }

.na		{ border:none; background-color:gainsboro }

td.right	{ text-align:right }

td.sell		{ background-color:var(--light);
		  font:smaller Arial, Helvetica, Arimo, sans-serif;
		  padding:4px 8px; text-align:center }

th.sell		{ background-color:var(--dark) }

tr.top		{ vertical-align:top }

ul		{ background-color:var(--light);
		  list-style:none outside;
	          font-family:Arial, Helvetica, Arimo, sans-serif;
		  text-align:left; padding:2% 5%;
		  margin-right:15% }

ul.disc		{ background-color:var(--light);
		  list-style:disc outside;
	          font-family:Arial, Helvetica, Arimo, sans-serif;
		  text-align:left; padding:2% 5%;
		  margin-right:15% }

ul.circle	{ background-color:var(--light);
		  list-style:circle outside;
	          font-family:Arial, Helvetica, Arimo, sans-serif;
		  text-align:justify;
		  padding:0px 0px 2%;
		  margin-right:0px; margin-left:2% }