/*****************************************/
/*************** COLORS *******************/
/*****************************************/


body 
{
   color: #005883; /* deep blue gray */ 
}

#banner, #footer 
{
  
  background-color: #005883; /* deep blue gray */ 
  color: 	#87CEEB;  /* SkyBlue */
}


#outsidelinks a:link
{
     color: yellow; 
}

		
#paintings img, .paintings1 img, .thumbnail img, .bookcover img
{
  border: 2px #005883 solid; /* deep blue gray */ 
}


a:link 
{
     color: purple; 
}

a:hover
{
      background-color: silver;
                 color: purple;
}
a:visited
{
     color: #005883;   /* deep blue gray */ 
}

/*****************************************/
/**********  END COLORS ******************/
/*****************************************/


/* Properties for all text, unless overriden */

* 
{ 
font-family: sans-serif,helvetica;  
font-style: normal;
}


.salesblock     
{
  padding: 0;
  width: 100%; 
}


	.salesleft, .salesright
	{
	/* When use 50% instead of 49%, in IE the pictures overflow and up staggering, one picture per line */
	 width: 49%;
	 margin-top: 2em;
	 
	 /* Making this at least 10 removes the phantom IE drawings on bottom */
	 /* and also keeps pictures in correct column */
	 /* see .sellbook above */
	 height: 11em; 
	}
	
	
	.salesleft
	{
	 float: left;
	}

	
	.salesright
	{
	 float: right;
	 display: inline;  /* forces correct lineup between columns */
	}
	
	

		.thumbnail 
		{
		  margin: 0;
		  float: left;
		  width: 30%;
		}
		
	


			.thumbnail img
			{
			 margin: 0;
			 float: right; /* put pictures up against their Add to Cart buttons */
			}
			
			
			.imagelabel
			{
			 white-space: nowrap;  /* let text overflow the block */			
			 margin: 0;			 			
			 text-align: right;
			 clear: both; /* force text under image, which it did until the float above */
			 		/* worked for IE, not FF */
			}


 			/* sometimes used instead of imagelabel to avoid pushing Add to Cart Buttons to right */
			.longlabelleft, .longlabelright
			{
			 white-space: nowrap;  /* let text overflow the block */			
			 margin: 0;			
			 clear: left;  /* force text under image */
			}

			
			/* For FF, to push Cart button away from longlefttext that FF displays incorrectly */
			/* Be sure not to affect rest of buttons - this could push them away from thumbnail image */
			/***
			.salesright + .buybuttons  
			{
			  margin-top: 1em;
			  margin-left: 6em; 
			}
			**/





		.buybuttons
		{

		  float: left; /* FF needs this */
		  display: inline;
		  margin-left: 1em;  /* This makes FF look better. IE spaces itself. */     
		}


		 
			.buyType
			{
			  display: inline; 
			}

div.salesblock img
{
  width: 60%;
  white-space: pre;
}

/* This keeps 'buy now' buttons within height of painting thumbnail */
div.buybuttons image  
{
  width: 10%;
}

/*************** END SALESBLOCK  ******************************/

.pricelist
{
text-indent: -4em;
padding-left: 4em;
}

.talllines
{
line-height: 1.5;
}

.bold
{
font-weight: bold;
}


.range
{
 text-align: left;
 display: inline;
}

.rangeamt
{
 text-align: right;
 display: inline;

}

.priceTD
{
padding-left: 2em;
text-align: left;
width: 15em;
}


#rose
{
 font-style: italic;
 font-size: smaller;
}

#rose img
{
 width: 30%;	 
}


.paintings1 img
{
 width: 30%;
 float: left;
 margin-right: 1em;
}


#navbar-poem
{
	font-weight: normal;
	font-size: smaller;   
	margin-top: 1em;
}

#indentright
{

	margin-left: 10em;
}


#topmargin
{

	margin-top: 5em;
}


body
{
	margin: 0;
	padding: 0;
}

#container
{
	/* margin: .5em 5%; */
	margin: .5em .5em;
	
	background-repeat: repeat-y;

}

#banner
{
	font-size: x-large;   
	text-align: center;
}

#banner h1
{
	margin: 0;
	padding: .5em;
}

#navbar
{
	float: left;
	width: 150px;
	padding-top: 1em;
	font-weight: bold;
}


#navbar img 
{

	margin-left: 2em;

	/* padding-left: 2em; */ /* works for Firefox, not for IE */
}

#navbar p 
{ 
margin-top: 0; 
}

#content
{
	padding-top: 1em;
	margin: 0 2em 0 200px;  /* t,r,b,l prevents wrap around navbar */
	padding-bottom: 1em;
}



.invisibleblock
{
 width: 100%;
 clear: both;
}

.dontwrap
{
  white-space: nowrap;  /* let text overflow the block */
}


/***************************/
 /* left & rightcolumn were used to display all paintings, in two columns.  */
 /* Without position: absolute;, IE draws these below the leftcolumn, instead of to its right */
 /* But with position: absolute;, Firefox draws the columns on top of each other */
 /* Firefox works fine without absolute for either block */
 /*   */
 /* Using pixel width is the only way to get both FF and IE to work property. */
 /* So tried using Tables, because they're a lesser evil than fixed pixels, */
 /* but tables don't force images to fit in TD. So, back to using left/rightcolumn */
#leftcolumn
{
 float:left;
 width: 250px;
}

#rightcolumn
{
 float:right;
 width: 250px;		 
}		

#rightcolumn img
{
  width: 100%;
}

#leftcolumn img
{
  width: 100%;
}


#content h2 
{ 
 margin-top: 1em; 
}

#footer
{
 margin-top: 1em; 
 clear: both;
 text-align: center;
}

/*******  Poetry Page **************/

#leftcolumn-poetry
{
 float:left;
 width: 25em; 
}

#rightcolumn-poetry
{
 /* float:right;   This pushes the right side too far to right, but without it, Firefox puts the right column below the left */
 display: inline-block;  
 
 
 width: 25em; 
}		

  
.poem
{
 /* font-style: italic;  */
 text-align: center;	
 padding-bottom: 4em;
}

.poem-title
{ 
 font-size: larger; 
 font-weight: bold;	
  
}

/**********************************/


#supplies
{ 
 line-height: 1.5;		
}

.emphasize
{ 
 font-size: larger;
 line-height: 2;		
}

.transactioncomplete
{ 
 line-height: 2;		
}

#paints
{
 margin-top: 0; 
 margin-bottom: 0; 
 margin-left: 40px;		
}


.paintcolors
{
 margin-top: 0; 
 text-indent: 5em;
}


.bookcover img
{
 height: 80%;
}


.returntopurchase
{
 text-align: center;
}


.thanks
{
font-style: italic;
font-weight: bold;
}