@import url("product.css");


/*
 * Font Family
 */
body              { font-family: Arial, sans-serif; }
#menu_primary     { font-family: "Trebuchet MS", "Luxi Sans", "Arial Narrow", sans-serif; }
h1,h2,h3,h4,h5,h6 { font-family: "Arial Narrow", sans-serif; }

/*
 * Font Sizing
 */
body  { font-size: small; }
h1    { font-size: 155%; letter-spacing: 1px; }
h2    { font-size: 130%; }
h3    { font-size: 120%; }
h4    { font-size: 105%; }
h5    { font-size: 100%; }
h6    { font-size: 100%; font-weight: normal; }

.ProductDetail h1 {
  margin: 0 0 0.5em; padding: 0;
  line-height: 18px;
  font-size: 28px;
  text-transform: uppercase;
}

.ProductDetail h1 span.manufacturer { font-weight: normal; font-size: 12px; line-height: 28px; }
.ProductDetail h1 span.color { font-size: 13px; line-height: 14px;}

.untitle { font-family: Arial, sans-serif; 	color: #000000; font-size: 79%; font-weight: normal; }

/*
 * Font Color
 */
body               { color: #761D00; }
h1,h2,h3,h4,h5,h6  { color: #BE1000; }
a                  { color: #547C0C; }
dt a               { font-weight: bold; }
a img              { border-width: 0; }

a.tiny             { font-size: 10px; }
.fine              { font-size: 10px; }
a.title            { color: #BE1000; font-weight: bold; }

img  { vertical-align: middle; }

/*
 * Set default heading spacings
 */
h1,h2,h3,h4,h5,h6 { margin-bottom: 0.5em; }

/*
 * Reduce default paragraph spacing
 */
p { margin: 0.3em 0 1em 0; }

dl { margin: 0.5em; }
dl dt { margin: 0 0 0 0.5em; font-weight: bold; }
dl dd { margin: 0 0 1em 0.5em; }

ul.inline { margin: 0; padding: 0; display: block; }
ul.inline li { margin-right: 0.5em; display: inline; }

.currency { text-align: right; }

input { padding: 0 2px; }
input.currency { width: 4em; }
textarea { font: inherit; }

table {}
  tr.odd   td { background-color: #FFFFE3; }
  tr.even  td { background-color: #FFEEE3; }
/*
 * Reset body spacing
 */
body { margin: 0 auto; padding: 0; text-align: center; }
#page { text-align: left; margin: 0 auto; } /* Center the page area */


div.right { float: right; width: 49%; text-align: right; }
div.left { float: left; width: 49%; }
/*
 * Background Tile Image
 */
body { background: #FCE77E url("../images/yellow_yarn_tile2.gif"); }

/**
 * #page is the super element for layout purposes. It sets a fixed width with a white
 * background. Sides are padded to create page "margins".
 */
#page
{
  width: 709px;
  background: #FFFFFF url("../images/header_yarn_background.jpg") top right no-repeat;
  padding: 1px 25px 1px 25px;
  border-right: 1px solid white;
}

body.reports #page { width: auto; }


/**
 * #header contains the constant top areas of the page, including the logo, the top menu
 * and the cart status area. The #header is floated so that it always extends it's height
 * to contain all contents.
 */
#header { float: left; margin: 0 0 55px 0; }
#header a { display: block; }
#logo { margin: 46px 0 13px 0; }

/**
 * The menu has a fixed width at 360px. It uses top (on the div) and bottom
 * images (on the ul), which round the corners. Color is set in the CSS, not
 * in the images, although the images assume a white background behind the
 * menu area. Some difficulty may occur if too many menu items are added or
 * the items gain too much width in other ways.
 */
#menu_primary
{
  float: left;
  width: 360px;
  background: #DAEBBC url("../images/360px_round_top.gif") top left no-repeat;
}

#menu_primary { font-size: 130%; font-weight: normal; overflow: hidden; }
#menu_primary a { text-decoration: none; }
#menu_primary ul
{
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  background: url("../images/360px_round_bottom.gif") bottom left no-repeat;
  list-style: none;
}

#menu_primary ul li
{
  float: left;
  margin: 0; padding: 0;
}

#menu_primary a
{
  float: left;
  display: block;
  margin: 0 1px 0 0;
  padding: 4px 8px;
}

#menu_tertiary { clear: both; padding: 5px 15px 0 0; text-align: right; }

#content { float: left; width: 500px; margin-right: 10px;  }
#sidebar { padding-top: 35px; float: right; width: 175px; }
#sidebar h3 { margin-bottom: 0.3em; }
#footer { clear: both; padding: 3em 2em 1em 2em; text-align: center; font-family: "Arial Narrow"; font-size: 85%; }

#sidebar {}
  #sidebar ul { list-style: none; padding: 0; margin-left: 1em; }
/*  #sidebar ul.inline { margin-left: 0; }*/
  #sidebar p { margin-left: 1em; }


dl.product
{
  float: left; width: 100%;
  margin: 0 0 1em 0; padding: 0;
}

dl.product dt { margin: 0; padding: 0; }
dl.product dd { margin: 0; padding: 0; }
dl.product dd,
dl.product dt { margin-left: 110px; }
dl.product dd.image { margin-left: 0; }
dl.product dd.image img { float: left; }


div.box
{
  color: #BE1000;
  width: 150px; padding: 0;
  float: right; text-align: right;
  background: #FDDC40 url("../images/360px_round_top.gif") top left no-repeat;
  margin-left: 5px;
}
div.box ul { text-align: left; }
div.box p.price
{
  padding: 10px 10px 0 10px; margin: 0;
  background: url("../images/360px_round_top.gif") top right no-repeat;
}
div.box span.pricelabel { font-size: 85%; margin-right: 1em; font-variant: small-caps; }
div.box span.currency { font-size: 150%; font-weight: bold; }

div.course
{
	margin: 0 0 0 1em;
	padding: 0 1em 5px 0;
}
div.course .info { padding-left: 1em; }


table td,
table th { padding: 3px 5px 3px 0; }

table.yarn_detail { width: 100%; border: 1px solid #8A8A8A; border-collapse: collapse; }
table.yarn_detail th,
table.yarn_detail td { margin: 0; padding: 8px 20px; text-align: center; border-bottom: 1px solid #B5B5B5; }
table.yarn_detail th { color: #666; }
table.yarn_detail th.color,
table.yarn_detail td.color { text-align: left; }

table.cart_contents { width: 100%; border: 1px solid #8A8A8A; border-collapse: collapse; }
table.cart_contents th,
table.cart_contents td { margin: 0; padding: 8px 10px; text-align: center; border-bottom: 1px solid #B5B5B5; }
table.cart_contents th.item,
table.cart_contents td.item { text-align: left; }
table.cart_contents th { color: #666; }
table.cart_contents th.price,
table.cart_contents td.price { text-align: right; }


span.dim { color: #888; }


div#messages {
  padding: 2em;
  border: 1px solid #638820;
  text-align: center;
  background: #F8E06A;
  color: #537810;
}

form {}
  form.google_checkout { margin: 1em 0; text-align: right; }

  form .columns { width: 100%; float: left; clear: both; }
  form .columns .col_left,
  form .columns .col_right { width: 325px; float: left; }


input.textfield { border: 1px solid #8A8A8A; }
div.formrow { margin-bottom: 3px; }
  div.formrow input,
  div.formrow textarea { border: 1px solid #8A8A8A; }
  
	div.formrow label { width: 150px; float: left; font-weight: bold; }
	div.formrow .description { margin: 3px 200px 6px 150px; font-size: 90%; font-style: italic; }
	

table.CourseListTable { width: 97%; border: 1px solid #DEDEDE; border-collapse: collapse; }
  .CourseListTable th { background: #BE1000; color: #FFFFFF; }
  .CourseListTable td { width: 55px; vertical-align: top; }
  .CourseListTable td.title { width: auto; }
  .CourseListTable span.title { font-weight: bold; }
  
table.YarnCategories { margin: 0 auto; }
  table.YarnCategories td { vertical-align: top; }

div.fieldWithErorrs { display: inline; }
div.fieldWithErrors input { border: 2px solid #BE1000; background: #FFE8E6; }


dl.ProductCategory {
  width: 475px;
  float: left;
  clear: both;
  margin: 0 0 20px 0; padding: 0;
}

dl.ProductCategory dt { margin: 0; padding: 0; }
dl.ProductCategory dd { margin: 0; padding: 0; width: 382px; }

dl.ProductCategory dt {
  clear: both;
  float: right;
  width: 392px;
}

dl.ProductCategory dt span.manufacturer {
  display: block;
  font-weight: normal;
  font-size: 11px;
  text-transform: uppercase;
}

dl.ProductCategory dd { float: left; }
dl.ProductCategory dd.img {
  float: left; width: 75px;
  margin: 0 8px 0 0;
}

table.YarnData { width: 99%; }

span.CheckoutLink { font-size: 110%; font-weight: bold; text-transform: uppercase; }