/* Main Screen CSS Document */

/* ----------------- COLOURS ----------------- 
  Dark Brown             : #5a3e30
  Mid Brown               : #ac9e97
  Turquiose                : #8dd3c7
*/

/* ----------------- CLEAR STYLES ----------------- */
.clear { clear: both; }


/* ----------------- DEFAULT FONT STYLES ----------------- */
body, td, div, h1, h2, p, li, input, textarea { font-family: Arial, Helvetica, sans-serif; }

h2 { font-size: 100%; margin: .5em 0 .5em 0; color: #5a3e30; font-weight:bold; }
h3 { font-size: 90%; margin: .5em 0 .5em 0; color: #5a3e30; font-weight: bold; }
h4 { font-size: 80%; margin: .5em 0 .5em 0; color: #5a3e30; font-weight: bold; }
/* h5 used for press section */
p { font-size: 76%; margin: .5em 0 .8em 0; line-height: 1.5em; color: #5a3e30; }
li { font-size: 80%; margin: .5em 0 1em 0; line-height: 1.3em; color: #000; }
a:link { color: #5a3e30; }
a:visited { color: #5a3e30;}
a:active, a:hover { color: #8dd3c7; }
a { outline: none; }
.tiny { font-size: 70%; }
.information-msg { color: #cc0000; }
hr { border:0; border-top: 1px solid #ac9e97; height: 1px; }
h2 .title-link { font-size:70%; color: #5a3e30; font-weight: normal; }


/* ERRORS
.error-box { border: 1px solid #c00; padding: 10px; }
.error-box p { color: #c00; margin:0; } */
/* -- Error -- */
.error-box { width: 546px; border: 1px solid #cc0000; margin: 10px 0 10px 0; }
.error-title { width: 546px; height: 25px; background: url(../images/error_title.gif) top left no-repeat #e25065; }
.error-title p { display: none; visibility: hidden; }
.error-sign { float: left; width:54px; padding: 7px; }
.error-message { float: left; width: 466px; padding: 7px; }
.error-message p { margin: 0; color: #cc0000; }

.error { color: #cc0000 !important; }


/* ----------------- PAGE STYLES ----------------- */
body { background-color: #5a3e30; margin: 0 10px 10px 10px; }

#frame { width: 760px; margin: 0 auto 10px auto; }

#header { width: 760px; height: 125px; }
#header-logo { width: 200px; height: 115px; float: left; background: url(../../images/header_logo.gif) top left no-repeat; }
#header-logo img { display: none; visibility: hidden; }
#header-menu { width: 560px; height: 115px; float: left; }
#header-menu-animation { width: 560px; height: 80px; }
#header-menu-navigation { width: 560px; height: 23px; margin-bottom: 12px; }
#header-body-top { width: 760px; height: 10px; background: url(../../images/body_top.gif) top left no-repeat; overflow: hidden; }

#body-with-nav { width: 760px; background: url(../../images/body_tile_with_nav.gif) top left repeat-y; }
#body { width: 760px; background: url(../../images/body_tile.gif) top left repeat-y; }
#side { width: 170px; float: left; }
#content-with-nav { width: 548px; float: left; padding: 16px; background-color: #fff; }
#content { width: 708px; padding: 16px; background-color: #fff; }

/* TITLES */
.title { width: auto; height: 40px; background-position: top left; background-repeat: no-repeat; }
.title h1 { display: none; visibility: hidden; }
.title.home { background-image: url(../../images/title_home.gif); }
.title.press { background-image: url(../../images/title_press.gif); }
.title.contact { background-image: url(../../images/title_contact.gif); }
.title.mailinglist { background-image: url(../../images/title_mailinglist.gif); }
.title.locatestockist { background-image: url(../../images/title_locatestockist.gif); }
.title.becomeastockist { background-image: url(../../images/title_becomeastockist.gif); }
.title.shoppingcart { background-image: url(../../images/title_shoppingcart.gif); }
.title.delivery { background-image: url(../../images/title_delivery.gif); }
.title.billing { background-image: url(../../images/title_billing.gif); }
.title.payment { background-image: url(../../images/title_payment.gif); }
.title.signin { background-image: url(../../images/title_signin.gif); }
.title.thankyou { background-image: url(../../images/title_thankyou.gif); }
.title.registration { background-image: url(../../images/title_registration.gif); }
.title.confirmation { background-image: url(../../images/title_confirmation.gif); }
.title.forgottenpassword { background-image: url(../../images/title_forgottenpassword.gif); }
.title.collections { background-image: url(../../images/title_collections.gif); }
.title.necklaces { background-image: url(../../images/title_necklaces.gif); }
.title.bracelets { background-image: url(../../images/title_bracelets.gif); }
.title.earrings { background-image: url(../../images/title_earrings.gif); }
.title.rings { background-image: url(../../images/title_rings.gif); }
.title.valentines { background-image: url(../../images/title_valentines.gif); }
.title.premium { background-image: url(../../images/title_premiumcollection.gif); }
.title.termsandconditions { background-image: url(../../images/title_termsandconditions.gif); }

/* -- NAVIGATION -- */

/*-- Main Navigation --*/
#nav-main { height: 23px; padding: 0; margin: 0 0 0 auto; }
#nav-main div { height: 23px; float: left; background-position: top left; background-repeat: no-repeat;  }
#nav-main a { height: 23px; display: block; outline: none; }
#nav-main a:hover { background-position: bottom left; background-repeat: no-repeat; }
#nav-main span { display: none; visibility: hidden; }
#nav-main .selected { background-position: bottom left; }
/*-- Buttons --*/
#nav-main .home, #nav-main .home a:hover { width: 70px;  background-image: url(../../images/nav_main_home.gif); }
#nav-main .stockists, #nav-main .stockists a:hover { width: 101px;  background-image: url(../../images/nav_main_stockists.gif); }
#nav-main .collections, #nav-main .collections a:hover { width: 117px;  background-image: url(../../images/nav_main_collections.gif); }
#nav-main .press, #nav-main .press a:hover { width: 69px;  background-image: url(../../images/nav_main_press.gif); }
#nav-main .contact, #nav-main .contact a:hover { width: 86px;  background-image: url(../../images/nav_main_contact.gif); }
#nav-main .cart, #nav-main .cart a:hover { width: 53px;  background-image: url(../../images/nav_main_cart.gif); }
.nav-main-standard { width: 496px; }
.nav-main-closed { width: 443px; }

/*-- Sub Navigation --*/
#nav-sub { width: 170px; padding: 0; }
#nav-sub div { width: 170px; height: 29px; background-position: top left; background-repeat: no-repeat;  }
#nav-sub a { height: 29px; display: block; outline: none; }
#nav-sub a:hover { background-position: bottom left; background-repeat: no-repeat; }
#nav-sub span { display: none; visibility: hidden; }
#nav-sub .selected { background-position: bottom left; }
#nav-sub .divider { height:1px; background: url(../../images/nav_sub_divider.gif); overflow: hidden; }
/*-- Buttons --*/
#nav-sub .necklaces, #nav-sub .necklaces a:hover {  background-image: url(../../images/nav_sub_necklaces.gif); }
#nav-sub .bracelets, #nav-sub .bracelets a:hover { background-image: url(../../images/nav_sub_bracelets.gif); }
#nav-sub .earrings, #nav-sub .earrings a:hover { background-image: url(../../images/nav_sub_earrings.gif); }
#nav-sub .rings, #nav-sub .rings a:hover { background-image: url(../../images/nav_sub_rings.gif); }
#nav-sub .locatestockist, #nav-sub .locatestockist a:hover { background-image: url(../../images/nav_sub_locatestockist.gif); }
#nav-sub .becomeastockist, #nav-sub .becomeastockist a:hover { background-image: url(../../images/nav_sub_becomeastockist.gif); }

/* COLUMNS */

.column-349 { width: 349px; float: left; } /* use 2 for a 50/50 column - no menu */

.column-300 { width: 300px; float: left; } /* used in layout with large image slideshow */
.column-398 { width: 398px; float: left; }

.column-200 { width: 200px; float: left; } /* used in checkout layouts */
.column-338 { width: 338px; float: left; }

.column-269 { width: 269px; float: left; } /* use 2 for a 50/50 column with menu and 10px margin (e.g. in checkout confirm) */

.column-268 { width: 268px; float: left; } /* use 2 for a 50/50 column with menu and 12px margin (e.g. in product detail) */

.column-60 { width: 60px; float: left; } /* this pair used for title / back button combination */
.column-478 { width: 478px; float: left; }

/* FOOTER */
#footer { width: 760px; }
#footer-body-bottom { width: 760px; height: 10px; background: url(../../images/body_bottom.gif) top left no-repeat; overflow: hidden; }
/*#footer-copyright { width: 360px; float: left; padding: 5px 10px; color: #8dd3c7; font-size: 70%; }*/
#footer-menu { width: 633px; float: left; margin: 2px 0; padding: 5px 10px; color: #8dd3c7; font-size: 70%; }
#footer-menu a:link, #footer-menu a:visited { color: #8dd3c7; text-decoration: none; }
#footer-menu a:active, #footer-menu a:hover { color: #fff; text-decoration: none; }

#poweredby2c { width:100px; height: 21px; float:right; margin: 5px 7px 7px 0; background: url(../../images/poweredby_2c.gif) top left no-repeat; display: inline; }
#poweredby2c a { width:100px; height: 21px; display: block; outline: none; }
#poweredby2c a:hover { background: url(../../images/poweredby_2c.gif) bottom left no-repeat; }
#poweredby2c span { display: none; visibility: hidden; }


/* ----------------- MARGIN STYLES ----------------- */
/*-- 1 side --*/
.margin10-t { margin-top: 10px; }
.margin10-r { margin-right: 10px; }
.margin10-b { margin-bottom: 10px; }
.margin10-l { margin-left: 10px; }
/*-- 2 sides --*/
.margin10-t-r { margin: 10px 10px 0 0; }
.margin10-t-b { margin: 10px 0; }
.margin10-t-l { margin: 10px 0 0 10px; }
.margin10-r-l { margin: 0 10px; }
.margin10-r-b { margin: 0 10px 10px 0; }
.margin10-b-l { margin: 0 0 10px 10px; }
/*-- 3 sides --*/
.margin10-t-r-b { margin: 10px 10px 10px 0; }
.margin10-t-r-l { margin: 10px 10px 0 10px; }
.margin10-t-b-l { margin: 10px 0 10px 10px; }
.margin10-r-b-l { margin: 0 10px 10px 10px; }
/*-- 4 sides --*/
.margin10 { margin: 10px; }

/*-- 1 side --*/
.margin12-t { margin-top: 12px; }
.margin12-r { margin-right: 12px; }
.margin12-b { margin-bottom: 12px; }
.margin12-l { margin-left: 12px; }
/*-- 2 sides --*/
.margin12-t-r { margin: 12px 12px 0 0; }
.margin12-t-b { margin: 12px 0; }
.margin12-t-l { margin: 12px 0 0 12px; }
.margin12-r-l { margin: 0 12px; }
.margin12-r-b { margin: 0 12px 12px 0; }
.margin12-b-l { margin: 0 0 12px 12px; }

/* -- Horizontal Alignment -- */
.align-l { text-align: left; }
.align-c { text-align: center; }
.align-r { text-align: right; }

/* -- Pagination -- */
.pagination { width: 548px; background-color: #8dd3c7;  }
.pagination-button { width: 58px; float: left; }
.pagination-pages { width: 308px; float: left; padding: 5px 4px 0 4px; background-color: #8dd3c7; font-size: 75%; text-align: center; color: #fff; line-height: 1em; }
.pagination-pages a:link, .pagination-pages a:visited { color: #fff; }
.pagination-pages a:active, .pagination-pages a:hover { color: #5a3e30; }

/* FORM STYLES */
form { display: inline; }