html
{
  background-color : #DDE0CD;
}

body 
{
  width : 900px;
  margin : auto;
/*  background-color : #F0F0F0; */
  font-family : "Trebuchet MS",Helvetica,sansserif;

}

.logo
{
height: 100px;
width: 100px;
background-color: #DDE0CD;
margin: 15px auto 0px;
display: block;
}

h1
{
  padding : 0;
  margin : 0;
  text-align : center;
  font-family : "Copperplate","Copperplate Gothic",Helvetica,sansserif;
//  background-image : url('bannerpic.jpg');
  font-size : 46px;
  text-shadow:
    -1px -1px 0 #FFFFFF,
    1px -1px 0 #FFFFFF,
    -1px 1px 0 #FFFFFF,
    1px 1px 0 #FFFFFF;
}

h2
{
  text-align : center;
}






.navigation a {
  text-decoration:none;
  color : white;
}

.navigation li:hover
{
  box-shadow: 2px 2px red;
  background-color: burlywood;
}

.navigation li {
  float: left;
  background-color: black;
  color: white;
  margin : 20px 15px;
  padding : 10px 20px 10px 20px;
}
.navigation {
  list-style-type: none;
  margin : 0;
  padding-left : 20px;
}


img
{
    height : 300px;
	width : 400px;
	background-color : #F0F0F0;
	margin : 0 0 10px 28px;
	padding : 0;
}


p
{
  padding : 8px 16px;
  margin : 0;
}

.product-page-image
{
  max-height: 400px;
  max-width: 400px;
}

/* This overrides the style that you find in the Carat_X1 page that does a bad job of multi line image margins */
.imageblock .product-page-image
{
  margin-left: 0;
  margin-right: 5px;
    /*width : 280px;*/
}

.imageblock img:first-child
{
    margin-left : 0px;
}

/* This does nothing right now, it gets overridden by the style in Carat_X1 */
.X1images img
{
    height : 373.33333px;
    width : 280px;
}













/*
.navigation
{
  position : relative; 
  font-family : "Copperplate Gothic",Helvetica,sansserif;
  text-align : center;
  width : 100%;
  height : 40px;
}


.navigation li {
	float : left;
	list-style-type : none;
	margin : 0 40px 20px;
}


.navigation li a {
    background : url("navsprites.png") no-repeat; 
}

.navigation li.home a
{
  display : block;
  width : 48px;
  height : 14px;
    background-position : -4px -4px;
}


.navigation li.x1 a
{
  display : block;
  width : 77px;
  height : 14px;
  background-position : -54px -4px;
}


.navigation li.x2 a
{
  display : block;
  width : 80px;
  height : 14px;
  background-position : -137px -4px;
}


.navigation li.x3 a
{
  display : block;
  width : 80px;
  height : 14px;
  background-position : -220px -4px ;
}


.navigation li.x4 a
{
  display : block;
  width : 81px;
  height : 14px;
  background-position : -303px -4px ;
}


.navigation li.home a:hover
{
  background-position : -4px -26px;
}


.navigation li.x1 a:hover
{
  background-position : -54px -26px;
}


.navigation li.x2 a:hover
{
  background-position : -137px -26px;
}


.navigation li.x3 a:hover
{
  background-position : -220px -26px ;
}


.navigation li.x4 a:hover
{
  background-position : -303px -26px ;
}
*/