/******************************************************************************
 * site.css
 *
 * This is the main CSS stylesheet for the Etoffe Makara site.
 *
 *****************************************************************************/


/*-----------------------------------------------------------------------------
 * General Formatting
 *---------------------------------------------------------------------------*/
/* By default, nothing has a margin or padding. */
* {
  margin : 0;
  padding: 0;
}

/* Default fonts/colors for the entire page */
body {
  color: #3C2415;
/*  font: normal 24px/28px georgia; */
  background: #ECE2C4;
  letter-spacing: 1px;
}

/* Default style for form input elements - i.e.: text fields, buttons, etc.
   These don't inherit the form from the body, so it has to be reiterated
   here. */
input {
  font: normal 12px/14px georgia;
  padding-top: 1px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 1px;
}

/* Default style for form submit/reset/button input elements to override
   the padding set in '*' */
input[type="reset"], input[type="button"], input[type="submit"] {
  padding-top: 0px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 0px;
}

/* Default style for select input elements. This doesn't inherit the font
   from the body, so it has to be reiterated here. */
select {
  font: normal 24px/28px georgia;
  letter-spacing: 1px;
}

/* Default style for <option> elements in a <select> box. */
option {
  /* Must override the 0 padding we set in '*' because otherwise it
     looks bad in FireFox */
  padding-right: 10px;
}

/* Default style for text input elements, These don't inherit the font
   from the body, so it has to be reiterated here. */
textarea {
  font: normal 12px/14px georgia;
}

/* Default link style */
a {
  text-decoration: none;
}

/* Default link "visited" style */
a:visited {
  color: #0000ff;
}

/* Default link "mouse over" style */
a:hover {
}

/* Default link "in focus" style */
a:focus {
  outline: 0; /* Turn off horrible outlines in firefox */
}


/*-----------------------------------------------------------------------------
 * Common Styles
 *---------------------------------------------------------------------------*/
/* Style for displaying error notification text */
.errorText {
  color: #FF0000;
  font-weight: bold;
}


/*-----------------------------------------------------------------------------
 * Login Page (app/views/user/login.rhtml)
 *---------------------------------------------------------------------------*/
/* Additional style for <body> on the login page. */
body.loginBody {
  background: #E6CE9B;
	font-family: georgia;
	font-weight: bold;
	font-variant: small-caps;
	font-size: 10pt;
	color: #ffffff;
	letter-spacing: 1.2pt;
	margin-top: 12px;
}

body.loginBody h1 {
  font-size: 16pt;
  letter-spacing: 1.6pt;
  color: #444444;
  font-weight: bold;
  font-variant: small-caps;
	padding-bottom: 16px;
}

/* Main top-level container for the login page */
#loginContainer {
  width: 800px;
	height: 600px;
  margin: auto;
  background: #E6CE9B url(/images/structure/em-front-bg.png) no-repeat;
}

/* Box that contains the top-level login page links */
#loginLinks {
  padding-top: 140px;
/*  padding-left: 380px; */
	padding-left: 256px;
}

/* Style of the main buttons on the login page. */
.loginLinkButton {
  color: #3C2415;
  font: bold 16px/20px georgia;
  letter-spacing: 1.2pt;
  width: 220px;
  margin-bottom: 20px;
	font-variant: small-caps;
	padding: 4px;
}

/* The <div> that contains the (initially hidden) login form */
#loginForm {
  padding-left: 30px;
	color: #3c2415;
}

/* Style of the username/password input fields in the login form. */
.loginFormField {
  width: 150px;
}

/* The DIV that contains the error message at the bottom of the login form. */
.loginErrorBox {
  margin-bottom: 40px;
}

/* DIV Contains the ThickBox image slideshow */
.slides {
/*	padding-top: 386px; */
	padding-top: 292px;
	width: 800px;
/*	padding-left: 4px; */
}

.slides a img {
	border: 1px solid #e6cE9b;
	padding: 0;
	margin: 0;
}

.slides a img:hover {
	border: 1px solid #005a6f;
}


/*-----------------------------------------------------------------------------
 * Signup Page (app/views/user/signup.rhtml)
 *---------------------------------------------------------------------------*/
body.signupBody { 
  background: #FFFFFF;
  font: normal 16px/18px georgia;
}

body.signupBody ul {
  padding-left: 30px;
}

#signupContainer {
  width: 800px;
  height: 1000px;
  margin: 10px;
  padding: 10px;
  border: solid black 3px;
}

.signupHeader {
  font: bold 18px/20px georgia;
}

#signupInstructions {
  padding-bottom: 30px;
}

#signupInfo {
  padding-bottom: 30px;
}

.signupLabel {
  text-align: right;
}

div#signupInfo table {
  width: 100%;
}

div#signupInfo td {
  padding: 5px;
}

div#signupInfo td.col1 {
  width: 104px;
}

div#signupInfo td.col3 {
  width: 169px;
}

div#signupInfo td.col5 {
  width: 60px;
}

div#signupInfo td.col7 {
  width: 51px;
}

.signupField_standard {
  width: 115px;
}

.signupField_title {
  width: 160px;
}

.signupField_license {
  width: 365px;
}

.signupField_state {
  width: 30px;
}

.signupField_zip {
  width: 50px;
}

.signupField_fax {
  width: 160px;
}

.signupField_description {
  width: 784px;
  height: 100px;
}

#signupTerms {
  padding-bottom: 30px;
}

#signupFooter {
}

.signupFooterTable {
  float: left;
  width: 600px;
}

.signatureCell {
  width: 450px;
}

.signatureLine {
  height: 2px;
  line-height: 2px;
  background-color: #000000;
}

.signupButtons {
  float: right;
}


/*-----------------------------------------------------------------------------
 * Signup Confirmation Page (app/views/user/signup_confirmed.rhtml)
 *---------------------------------------------------------------------------*/
body.signupConfBody { 
  width: 600px;
  background: #E6CE9B url(/images/structure/signupConf-bg.gif) no-repeat;
  padding-left: 32px;
  padding-top: 120px;
}

a.signupConfBody {
  color: #3C2415;
  text-decoration: none;
}

a.signupConfBody:hover {
  text-decoration: underline;
  color: #005A6F;
}

/*-----------------------------------------------------------------------------
 * Main Showroom Page:
 *   app/views/showroom/main.rhtml
 *   app/views/showroom/_content.rhtml
 *---------------------------------------------------------------------------*/
/* Main top-level container for the showroom pages */
#showroomContainer {
/*  width: 800px; */
  width: 832px;
/*  height: 600px; */
  height: 700px;
  margin: auto;
  background: #E6CE9B;
}

/* Main <div> for the top banner of the showroom pages. */
#showroomBanner {
  width: 832px;
  height: 84px;
  background: #ece2c4 url(/images/structure/banner-bg.png) no-repeat;
}

/* Main <div> for the left panel area of the showroom pages. */
#showroomLeftPanel {
  float: left;
/*  width: 187px; /* 167 + 20 (for scrollbar) */
  width: 219px;
/*  height: 508px; */
  height: 608px;
  padding: 4px;
  overflow: auto;
}

/* Main <div> for the thumbnail panel on the showroom pages. */
#showroomThumbs {
  float: left;
  width: 97px; /* 75 (thumb img) + 2 (L/R img border) + 20 (scrollbar) */
/*  height: 512px; */
  height: 612px;
  padding-left: 4px;
  padding-right: 4px;
  padding-bottom: 4px;
  overflow: auto;
  background-color: #e6ce9b;
}

/* Main <div> for the main image area of the showroom pages.
   IMPORTANT: If you change the width and height of this box, you must
              also change the width and height of the large image
              in the file config/environment.rb, under the configuration
              constants:
                EM_CONFIG[:large_image_width]
                EM_CONFIG[:large_image_height]
*/
#showroomImage {
  float: left;
  width: 500px;  /* equals EM_CONFIG[:large_image_width] */
  height: 400px; /* equals EM_CONFIG[:large_image_width] */
  background-color: #e6ce9b;
}

/* Main <div> for the bottom panel of the showroom page. */
/* NOTE: was 500, but reduced by 4px to accomodate IE6 bug putting a mysterious extra 4 pixels
         in width-wise. This now means that the total width along the bottom now adds up to
         796px instead of 800px (and buggy IE6 adds 4px to that). */
#showroomBottomPanel {
  float: left;
  width: 496px;
/*  height: 116px; */
  height: 216px;
  background-color: #e6ce9b;
}

/* The <div> where the title of the currently-selected category, collection,
   or product is displayed. */
#showroomTitle {
  float: left;
  width: 345px; /* NOTE: was 349px, but reduced by 4px becuase of IE6 bug */
  height: 16px;
  padding-left: 4px;
/*  padding-right: 4px; */
  font: normal 14px/16px georgia;
  color: #3C2415;
  font-weight: bold;
  text-align: left;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  background-color: #e6ce9b;
}

/* The encapsulating <div> for the info panel in the showroom. */
#showroomInfo {
  float: left;
  width: 345px; /* NOTE: was 349px, but reduced by 4px because of IE6 bug */
  height: 192px;
  padding-top: 4px;
  padding-left: 4px;
  overflow: auto;
  background-color: #e6ce9b;
  text-transform: uppercase;
}

/* The <dl> that contains the attribute list in the info panel. */
div#showroomInfo dl {
  float: left;
  width: 325px; /* NOTE: 20px narrower than showroomInfo to accomodate for scrollbar */
  font-size: 10px;
  line-height: 16px;
}

/* The name of an attribute shown in the info panel. E.g.: "Size". */
div#showroomInfo dt {
  clear: both;
  float: left;
  width: 75px; /* NOTE: dt width + dd width must equal dl width */
}

/* The value of an attribute shown in the info panel. E.g.: "Large". */
div#showroomInfo dd {
  float: left;
  font-weight: bold;
  font-size: 12px;
  width: 250px; /* NOTE: dt width + dd width must equal dl width */
}

/* The encapsulating <div> for the "print pattern" image in the showroom
   IMPORTANT: If you change the width and height of this box, you must
              also change the width and height of the small image
              in the file config/environment.rb, under the configuration
              constants:
                EM_CONFIG[:small_image_width]
                EM_CONFIG[:small_image_height]
*/
#showroomPrint {
  float: right;
  width: 135px;
  height: 108px;
  margin: 4px;
  background-color: #e6ce9b;
}

/* The encapsulating <div> for the "product action links" such as
   "view tearsheet".
*/
#showroomProductLinks {
  float: right;
  width: 135px;
  height: 92px;
  margin: 4px;
  background-color: #e6ce9b;
  text-align: center;
}

/* Hover style for product action links. */
#showroomProductLinks a {
  color: #000000;
  text-decoration: underline;
}

#showroomProductLinks a:hover {
  color: #155453;
  text-decoration: underline;
}

/* Style of a button in the product action links section, when using
   a button instead of a link. */
.showroomButton {
  width: 135px;
}

/*-----------------------------------------------------------------------------
 * Top Menu Section (app/views/showroom/_top_menu.rhtml)
 *---------------------------------------------------------------------------*/
/* Bounding <div> for the top menu */
#topMenu {
  float: right;
  height: 84px;
  margin-left: 2px;
  font: normal 10px/12px georgia;
  letter-spacing: 1px;
}

/* Style of the <ul> used to create a column of menu items in the top menu */
#topMenu ul {
  float: left;
/*  width: 160px; */
  width: 192px;
  height: 78px;
  list-style-type: none;
  padding-left: 4px;
}

/* Style of a menu item in the top menu. Note this defines the region for
   the menu item link, even in the cases where there is no link. So if the
   empty menu items are to look different than the active ones, they can
   be specified separately here and with the "#topMenu a" style. */
#topMenu li {
/*  width: 160px; */
  width: 192px;
  height: 12px;
  margin-top: 3px; /* NOTE: ideally would be 4px, but IE6 adds a mysterious extra 1px, so
                            we made it 3 - less than desireable on firefox, but this is
                            necessary to accomodate IE6 */
  background-color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
}

/* Base style of the link blocks in the top menu. This includes the necessary
   formatting for these links in any state, plus the background/foreground
   colors in the default, non-selected, non-moused-over state. */
#topMenu a {
  display: block;
/*  width: 154px; */
  width: 186px;
  padding-left: 3px;
  padding-right: 3px;
  text-decoration: none;
  background-color: #ffffff;
  color: #000000;
}

/* Style to override colors for link blocks when they are moused over */
#topMenu a:hover {
  background-color: #000000;
  color: #ffffff;
}

/* Style to override colors for link blocks when the are currently-selected */
#topMenu a.selected {
  background-color: #000000;
  color: #ffffff;
}

/* Style to override colors for link blocks when they are currently-selected
   AND moused-over. */
#topMenu a.selected:hover {
  background-color: #000000;
  color: #ffffff;
}


/* Styles to override the same 4 states as a special case for the
   "Shopping List" link in the top menu links. */
#topMenu a.shoppingList {
  background-color: #ffffcc;
  color: #000000;
}

#topMenu a.shoppingList:hover { 
  background-color: #336666;
  color: #ffffff;
}

#topMenu a.shoppingList.selected {
  background-color: #336666;
  color: #ffffff;
}

#topMenu a.shoppingList.selected:hover {
  background-color: #336666;
  color: #ffffff;
}


/*-----------------------------------------------------------------------------
 * Category Tree Section (app/views/showroom/_category_tree.rhtml)
 *---------------------------------------------------------------------------*/

/* The bounding <div> for the category tree in the left panel. */
#categoryTree {
}

/* The style for the header line in the category tree. */
.categoryTreeHdr {
  font: normal 16px;
  color: #3C2415;
}

/* The style for the currently-selected category in the category tree. */
.categorySelected {
  font-style: italic;
  color: #155453;
  text-decoration: none;
}

/* Style of the nested unordered list in the category tree. */
#categoryTree ul {
  list-style-type: none;
}

/* Style of a line item in the category tree. */
#categoryTree li {
  padding-left: 8px;
}

/* Style of a category link in the category tree. */
#categoryTree a {
  font: normal 11px georgia;
  color: #3C2415;
}

#categoryTree a:hover {
  text-decoration: underline;
}


/*-----------------------------------------------------------------------------
 * Thumbnails (app/views/showroom/_thumbnail.rhtml)
 *---------------------------------------------------------------------------*/
/* The encapsulating DIV for a thumbnail in the thumbnail panel.
   IMPORTANT: If you change the width and height of this box, you must
              also change the width and height of the thumbnail image
              in the file config/environment.rb, under the configuration
              constants:
                EM_CONFIG[:thumb_width]
                EM_CONFIG[:thumb_height]
*/
.thumb {
  width: 75px;  /* equals EM_CONFIG[:thumb_width] */
  height: 60px; /* equals EM_CONFIG[:thumb_width] */
  margin: auto;
  margin-top: 4px;
  border: solid #e6ce9b 2px;
}

/* Additive style to add to .thumb, when the .thumb <div>
   is to be rendered as being currently-selected.
*/
.thumbSelected {
  border: solid #3C2415 2px;
}

/* Additive style to add to .thumb, when the .thumb <div>
   is being hovered over. This supercedes .thumb and .thumbSelected. */
.thumbHover {
  border: solid #3C2415 2px;
}


/*-----------------------------------------------------------------------------
 * Tearsheets:
 *   app/views/tearsheet/tearsheet.rhtml
 *   app/views/tearsheet/not_logged_in.rhtml
 *   app/views/tearsheet/product_not_found.rhtml
 *---------------------------------------------------------------------------*/

/* Main body style for the tearsheet page. */
body.tearsheetBody {
  background-color: #ffffff; /*#e6ce9b;*/
}

/* Link styles on the tearsheet page. */
body.tearsheetBody a {
  color: #000000;
  text-decoration: none;
}
body.tearsheetBody a:hover {
  text-decoration: underline;
}
body.tearsheetBody a:visted {
  color: #000000;
}

/* Address/phone number font on the tearsheet page. */
.tearsheetAddress {
  font: normal 10px/12px arial, helvetica, sans-serif
}

/* Image cell in the tearsheet table. */
.tearsheetImage {
  text-align: center;
  padding-top: 10px;
}

/* Product name cell in the tearsheet table. */
.tearsheetName {
  text-align: center;
  font-size: 24px;
  line-height: 30px;
  font-weight: bold;
  text-transform: uppercase;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Product metadata cell (including both keys and values). */
.tearsheetAttribs {
  font-size: 10px;
  text-align: left;
  width: 365px;
  vertical-align: top;
}

/* Product attribute key cell in the inner metadata table. */
.tearsheetAttribKey {
  text-align: left;
  vertical-align: top;
  width: 115px;
}

/* Product attribute value cell in the inner metadata table. */
.tearsheetAttribValue {
  text-align: left;
  vertical-align: top;
  font-weight: bold;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  width: 250px;
  padding-bottom: 5px;
}

/* Print image cell in the product data cell of the tearsheet.
   IMPORTANT: If you change the width and height of this box, you must
              also change the width and height of the small image
              in the file config/environment.rb, under the configuration
              constants:
                EM_CONFIG[:small_image_width]
                EM_CONFIG[:small_image_height]
*/
.tearsheetPrintImage {
  text-align: center;
  vertical-align: top;
  width: 135px;
  height: 108px;
  margin: 4px;
}


/*-----------------------------------------------------------------------------
 * About Page:
 *   app/views/about/about.rhtml
 *   app/views/about/_content_about.rhtml
 *---------------------------------------------------------------------------*/

/* Additive style to #showroomContainer to make it taller just for the
   ABOUT page. */
#showroomContainer.aboutContainer {
  height: 1308px;
}

/* Main encapsulating DIV of the "about us" page content area. */
#aboutContent {
  width: 824px;
  height: 1216px; /* originally 608px to fit in normal showroomContainer */
  padding: 4px;
}

/* Style for section headers in the "about us" page. */
#aboutContent h2 {
  font-style: italic;
}

/* Style for paragraph text in the "about us" page. */
#aboutContent p {
  padding-bottom: 20px;
}


/*-----------------------------------------------------------------------------
 * Shopping List Page:
 *   app/views/shopping_list/main.rhtml
 *   app/views/shopping_list/printable.rhtml
 *   app/views/shopping_list/_content_shopping_list.rhtml
 *---------------------------------------------------------------------------*/

/* The main encapsulating DIV of the content section of the shopping
   list page.
*/
#shoppingListContent {
  width: 832px;
  height: 612px;
  padding-top: 4px;
}

/* Encapsulating DIV of the top banner area of the shopping list page,
   including everything in the content section above the list of tiles.
*/
#shoppingListBanner {
  width: 824px;
  padding-left: 4px;
  padding-right: 4px;
  height: 100px;
}

/* The main title header DIV of the shopping list page. */
#shoppingListHeader {
  float: left;
  font-size: 24px;
  font-weight: bold;
}

/* The title subheader SPAN of the shopping list header. */
#shoppingListSubheader {
  font-size: 14px;
  font-weight: normal;
}

/* The "description" paragraph under the header on the shopping
   list page.
*/
#shoppingListDesc {
  float: left;
  clear: left;
  width: 640px;
  font-size: 12px;
  font-style: italic;
}

/* The DIV that holds all the top-level shopping list action buttons. */
#shoppingListActions {
  float: right;
  text-align: right;
  width: 120px;
}

/* Style of an individual action button. */
.shoppingListActionButton {
  width: 120px;
}

/* The feedback message DIV on the shopping list page. */
#shoppingListMesg {
  clear: left;
  /*padding-top: 20px;*/
  height: 20px;
  color: #00cc00;
  font-weight: bold;
}

/* Encapsulating DIV of the list of product tiles in the
   shopping list page.
*/
#shoppingListTiles {
  width: 100%;
  height: 512px;
  overflow: scroll;
  overflow-x: hidden;
}

/* Encapsulating DIV of an individual product tile in
   the shopping list page.
*/
.shoppingListTile {
  width: auto;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  padding-top: 10px;
  padding-left: 5px;
  padding-bottom: 10px;
  border-top: solid black 1px;
  border-left: solid black 1px;
  border-right: solid black 2px;
  border-bottom: solid black 2px;
  background-color: white;
}

/* Table cell style of the tile's main product name. */
.shoppingListTileName {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  text-align: left;
  padding-left: 5px;
}

/* Table cell style of the tile's main product image. */
.shoppingListTileImage {
  width: 135px;
  height: 108px;
  padding: 4px;
  vertical-align: top;
}

/* Table cell style of the tile's product print image. */
.shoppingListTilePrint {
  width: 135px;
  height: 108px;
  padding: 4px;
  vertical-align: top;
}

/* Table cell style of the encapsulating cell of the entire
   product attribute list.
*/
.shoppingListTileData {
  width: 385px;
  padding-left: 5px;
}

/* Inner table cell style of a product attribute key in
   the tile's metadata display area.
*/
.shoppingListTileAttribKey {
  text-align: left;
  vertical-align: top;
  font-size: 10px;
  width: 65px;
  padding-right: 5px;
  text-transform: uppercase;
}

/* Inner table cell style of a product attribute value in
   the tile's metadata display area.
*/
.shoppingListTileAttribValue {
  text-align: left;
  vertical-align: top;
  font-size: 12px;
  font-weight: bold;
  width: 315px;
  padding-right: 5px;
  padding-bottom: 3px;
  text-transform: uppercase;
}

/* Table cell style of the tile area that contains the
   product action buttons.
*/
.shoppingListTileButtons {
  text-align: right;
  width: 100px;
  vertical-align: top;
}

/* Style of a product action button in a product tile. */
.shoppingListTileButton {
  width: 100px;
}

/* Body style of the printable version of the shopping list page. */
body.shoppingListPrintableBody {
  background-color: #ffffff;
}

/* Override style of the shoppingListTile when used in the printable
   version of the shopping list page.
*/
body.shoppingListPrintableBody .shoppingListTile {
  border-bottom: solid black 1px;
  border-right: solid black 1px;
}

