/* HTML OVERRIDES
------------------------------------------------------------- */
body {font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; color: #fff;
text-align: center; }
a:link, a:visited {color:#48537e; text-decoration: none; }
a:hover, a:active {color:#fff; text-decoration: none; }
h1,h2,h3 {}
h1 {font-size: 24px;}
h2 {line-height: 150%; font-weight: normal; }
ul, li {margin: 0px; padding: 0px; }
/* MODIFIERS
------------------------------------------------------------- */
.clear {clear:both; line-height: 1px; height: 1px; font-size: 1px; }
.techdata {color: #b0e294; font-size: 9px; }
.icon {vertical-align: middle; margin-right: 5px; }
a.trina-button{border: 1px solid #6d6d6d !important; color: #5d4d34 !important; background-color: #c7bbab; text-transform: uppercase; font-weight: bolder; width: 80px; padding: 5px 0px; cursor: pointer; display: block; vertical-align: middle; text-align: center; }
/* LAYOUT
------------------------------------------------------------- */
/* GLOBAL
------------------------- */
.breadcrumbs {color: #fff; clear: both; padding: 10px 0px; text-align: left; margin-left: 30px; }
.breadcrumbs a:link, .breadcrumbs a:visited {color:#fff; text-decoration: none; }
.breadcrumbs a:hover, .breadcrumbs a:active {color:#fff; text-decoration: underline; }
/* HEADER */
div#header {clear: both; color: #000; height: 136px; /* 72 + 44 + 20 */ margin-bottom: 5px; }
#header #trinaLogo {height: 72px; margin: 0px 30px 20px 0px; text-align: right; clear: both;}
#header ul#nav {display: block; height: 44px; }
div#user-salutation {position: absolute; z-index: 10; top: 50px; left: 50%; margin-left: -415px; }
div#user-salutation a {color: #412415; text-decoration: none; }
div#user-salutation a:hover {color: #412415; text-decoration: underline; }
/* #header ul#nav img{opacity: 0.3; filter: alpha(opacity = 30);}*/
/*
#header #img-about{opacity: 0.85; filter: alpha(opacity = 85);}
#header #img-collections{opacity: 0.70; filter: alpha(opacity = 70);}
#header #img-musthave{opacity: 0.60; filter: alpha(opacity = 60);}
#header #img-press{opacity: 0.40; filter: alpha(opacity = 40);}
#header #img-contact{opacity: 0.3; filter: alpha(opacity = 30);}
*/
#header img.selected {opacity: 1.0 !important; filter: alpha(opacity = 100) !important;}
#header ul#nav li {padding: 0px 10px; }
/* NOTE: Menu ul#nav styling is predominantly handled in MenuMatic.css */
/*
#header ul.alternative-nav img {opacity: 0.3; filter: alpha(opacity = 30);}
*/
/* CONTENT */
div#page_wrapper {width: 850px; margin: 0px auto; text-align: left; }
div#content {text-align: left; background-color: #907f51; }
body#index #content {text-align: right; }
/* FOOTER */
div#footer {color: #a0918a ; margin-top: 10px; font-size: 11px; }
.leftCol {float: left; width: 490px; }
.colWrapper {clear: both; }
.colWrapper .rightCol {float: right; width: 358px; /* Input box + Submit Box(300) + padding(14) + border(4 x 1) */ text-align: right; padding: 0px; margin: 0px; }
img#footer-tagline{margin-top: 10px; }
div#social-bookmarks {float: right;}
img.sb-icon {margin-top: 10px; float: right; margin-left: 5px; }
img#sb-text {margin-right: 10px; margin-top: 12px; }
#smallPrint ul {display: block; margin-top: 10px; margin-left: -10px; /* Compensates for padding */ }
#smallPrint ul li {list-style-type: none; display: inline; border-right: 1px solid #907f51; padding: 0px 10px; }
#smallPrint ul li.lastitem {border-right: none; }
#smallPrint a {color: #a0918a ; text-decoration: none; }
#smallPrint a:hover {color: #a0918a ; text-decoration: underline; }
.signup {font-weight: bolder; }
/* PAGE SPECIFIC
------------------------- */
/* HOMEPAGE */
tr#newsletter td,
tr#contactImages td {padding-top: 8px; }
span.instructions {color: #797979; font-weight: bolder; display: block; text-align: left; }
td.instructionsTableCell {padding-left: 5px; }
body#index span.AJAXPreloader {display: block; text-align: center; padding: 50px 0px; width: 800px; margin: 0px auto; }
div#handbag-promo {position: absolute; z-index: 20; top: 170px; left: 50%; margin-left: -400px; }
/* COLLECTIONS */
.collectionCategory {float: left; width: 144px; margin: 15px; }
.past-seasons {width: 320px; }
.categoryRow {clear: both; }
body#collections #content {text-align: center; }
#categoryWrapper {width: 696px; _width: 720px; /* 4 x 144px catImage + 4 x 30px Margins*/ margin: 0px auto; padding: 0px; }
body.body-past-seasons #categoryWrapper {width: 706px; _width: 730px; /* 4 x 144px catImage + 4 x 30px Margins*/ margin: 0px auto; padding: 0px; }
img.scroller-icon {display: block; /* margin-bottom: 2px; */}
/* PRODUCT INFO */ /* Total width available = 850px */
#productInfoWrapper{padding: 10px 30px; padding-bottom: 30px; }
.productInfoLeftCol {float: left; width: 425px; text-align: left; _width: 435px; padding-top: 15px; }
.productInfoLeftCol img {float: left; }
.productInfoRightCol {float: left; width: 320px; text-align: left;
_width: 340px;
}
.productInfoRightCol ul {display: block; margin: 0px; padding: 0px; padding-left: 20px; }
.productInfoRightCol h1 {line-height: 100%; display: block; font-size: 24px; margin-top: 12px; }
.productInfoRightCol ul li {}
.productInfoLeftCol a:link, .productInfoLeftCol a:visited {color:#fff; text-decoration: none; }
.productInfoLeftCol a:hover, .productInfoLeftCol a:active {color:#fff; text-decoration: underline; }
.productInfoRightCol a:link, .productInfoRightCol a:visited {color:#fff; text-decoration: none; }
.productInfoRightCol a:hover, .productInfoRightCol a:active {color:#fff; text-decoration: underline; }
#scroll-buttons {float: right; width: 20px; height: 200px; margin: -2px 10px 0px 5px; }
#otherProductsWrapper {float: right; height: 324px; overflow:hidden; width: 60px; }
#otherProducts {height: 3000px; }
.otherProduct {clear: both; }
.otherProduct img {margin-bottom: 6px;}
#otherViews {float: right; height: 324px; margin-right: 20px; overflow: auto; width: 75px; text-align: left; _width: 65px; }
.otherView {clear: both; }
.otherView img {margin-bottom: 6px;}
span.alternateViews {display: block; margin-top: 350px; width: 324px; text-align: right; /* NOTE: The main image and other product images are floated ! Hence the large top margin... */ }
/* PRESS RELEASES */ /* Total width available = 850px */
#press_release_wrapper {padding: 10px 30px; }
#press_release_wrapper a {color: #fff; text-decoration: none; }
#press_release_wrapper a:hover {color: #fff;text-decoration: underline; }
div.press_release {margin-bottom: 10px; }
div.press_release_date { margin-right: 20px; width: 150px; float: left; font-weight: bolder;}
div.press_release_info { width: 600px; float: left; }
div.press-pdf {margin: 8px 0px; }
/* EDITORIAL */
.editorialCategory {float: left; width: 144px; margin: 15px; }
#editorialWrapper {width: 696px; /* 4 x 144px catImage + 4 x 30px Margins*/ _width: 720px; margin: 0px auto; padding: 0px; }
#articlesWrapperMask {width: 750px; overflow: auto;}
/* #articlesWrapper {width: 3000px; } *//* Only showing one article for now, maybe something with mootools later for multiple articles ? */
.article {float: left; width: 750px; text-align: center; margin-bottom: 40px; clear: both; }
#article-navigation {}
span.previous {float: left; }
span.next {float: right; }
/* ABOUT */
body#about #content {padding: 20px 30px; }
body#about .image {float: left; width: 328px; /* Width of Image */padding-top: 15px; }
body#about .text {float: left; width: 400px; padding: 0px 30px; _margin-top: 10px; }
/* CONTACT */
body#contact #content {padding: 20px 30px; }
body#contact .contactLeftCol {float: left; width: 365px; padding-right: 60px; text-align: left; }
body#contact .contactRightCol {float: left; width: 365px; text-align: left; }
body#contact #content a {color: #fff; text-decoration: none; }
body#contact #content a:hover {color: #fff; text-decoration: underline;}
span.larger {font-size: 12.5px; font-weight: bolder; }
p.address-information {line-height: 19px; }
body#contact a.trina-button {width: 150px; }
body#contact div#shows-highlight {border: 1px solid #b29c68; padding: 8px; background-color: #9b895f; margin-top: 20px; }
body#contact div#shows-highlight p {display: block; margin: 0px; padding: 0px; margin-bottom: 10px; }
body#contact hr.spacer {display: block; border: 0px; margin: 10px 0px; }
/* MUST HAVES */
/* NOTE: Alot of these attributes are injected dynamically via. Javascript */
body#musthaves #content{margin: 0px; padding: 0px; text-align: center; background: none; }
body#musthaves span.AJAXPreloader {display: block; text-align: center; padding: 50px 0px; width: 800px; margin: 0px auto; }
div#container {padding: 0px; margin: 0px; float: left; }
.navigationalElement {width: 25px; height: 23px; line-height: 23px; float: left; text-align: center; vertical-align: middle; font-size: 18px; background-color: #534741 ; border: 1px solid #534741 ; margin: 2px; color: #fff; } /* Injected via. Javascript */
.navigationSelected { background-color: #fff; color: #534741 ; } /* Injected via. Javascript */
#slideNavigation .navigationalElement a {color: #fff; }
#slideNavigation .navigationSelected a {color: #534741 !important;}
/* #slideNavigation {float: right; margin-top: -80px; padding-right: 50px; } */
#slideNavigation {display: block; z-index: 100000; position: absolute; top: 570px; left: 51.5%; /* padding-left: 425px; */}
.navigationalElement a {color: #907f51; }
.navigationalElement a:hover {color: #907f51; text-decoration: underline; }
.navigationSelected a {color: #fff; }
.navigationSelected a:hover {color: #fff; text-decoration: underline; }
/* SMALL PRINT PAGES */
#terms #content,
#copyright #content,
#privacy #content {padding: 20px; height: 460px; overflow: auto; }
#terms #content a,
#copyright #content a,
#privacy #content a {color: #fff; font-weight: bold; text-decoration: none; }
#terms #content a:hover,
#copyright #content a:hover,
#privacy #content a:hover {color: #fff; font-weight: bold; text-decoration: underline; }
/* LOGIN login.tpl */
body#login #content {background: #907f51 url('../images/content/landingPage.jpg') bottom right no-repeat;
min-height:440px; /* Height of graphic */
height:auto !important;
}
body#login #content h1 {font-size: 12px; font-weight: bolder; }
body#login div#left-col {width: 340px; /* width = 420px-80px padding */ padding: 40px 20px 100px 60px; }
body#login div#left-col a {color: #fff; text-decoration: underline; }
body#login div#left-col a:hover {color: #fff; text-decoration: none; }
/* RETAILER FORMS retailers.tpl */
div#retailer-forms-wrapper{margin: 20px 0px 40px 100px; clear: both; }
div#retailer-forms-wrapper a {color: #fff; text-decoration: none; }
div#retailer-forms-wrapper a:hover {color: #fff; text-decoration: underline ; }
div#retailer-forms-wrapper h2 {font-size: 12px; }
div.retailer-form {margin-top: 20px; }
span.form-title {font-weight: bolder; text-transform: uppercase; }
p.form-description {margin: 0px; padding: 0px; }
div.form-downloads ul {display: block; clear: both; padding: 0px; margin: 8px 0px; }
div.form-downloads ul li {list-style-type: none; display: inline; padding-right: 20px; }
span.file-size {font-size: 10px}
div.important-file {border: 1px solid #b29c68; padding: 8px; margin-right: 50px; background-color: #9b895f; }
/* SHOWS shows.tpl */
div#shows-wrapper{margin: 20px 0px 40px 100px; clear: both; }
div#shows-wrapper a {color: #fff; text-decoration: none; }
div#shows-wrapper a:hover {color: #fff; text-decoration: underline ; }
div#shows-wrapper h2 {font-size: 12px; }
div.show {margin-top: 10px; padding: 10px; }
span.show-title {font-weight: bolder; text-transform: uppercase; }
div.highlight-show {border: 1px solid #b29c68; padding: 8px; margin-right: 50px; background-color: #9b895f;}
/* FORMS
--------------------------------------------------------------- */
input,
textarea,
select
{
font: 11px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}
input.textfield,
textarea.textfield { border: 1px solid #7c704a; color:#c1c1c1; width: 150px; }
select.textfield { border: 1px solid #7c704a; color:#c1c1c1;}
/* Homepage Newsletter Signup */
form#newsletter-signup { margin: 0px; padding: 0px; text-align: right; float: right; clear: both; margin-top: 5px; _margin-right: -42px; }
input.trina-button{border: 1px solid #6d6d6d; color: #5d4d34; background-color: #c7bbab; text-transform: uppercase; font-weight: bolder; width: 100px; height: 26px; margin-left: -1px ; padding: 0px; cursor: pointer; }
input#email-address {margin: 0px; width: 200px; padding: 5px 4px 5px 10px; display: block; float: left; height: 14px; vertical-align: top; color: #907f51; } /* 14px.height + 10px.padding + (2x1 input.borders) = 26px */
input#login-button {float: right; font-size: 11px; margin-top: 23px; margin-right: 33px; display: block; }
/* LOGIN PAGE - login.tpl */
form#login ul{margin: 0px; padding: 0px; }
form#login ul li{list-style-type: none; display: block; clear: both; margin-top: 5px; }
form#login ul li label{display: block; float: left; width: 100px; font-weight: bolder; margin-top: 2px; /* Fake vertical align */ vertical-align: middle; }
form#login ul li input{ padding: 5px; height: 14px; width: 205px; color: #7c704a; }
form#login #login-buttons {margin-left: 100px; margin-top: 20px; clear: both; }
/* Form Error Fields */
body#login .form-errors {color: #412415;}
body#login ul.form-errors {display: block; padding: 0px; margin: 0px; padding-left: 30px;}
body#login ul.form-errors li {list-style-type:circle; }
.errors { border: 1px solid #e4505e !important; color: #e4505e !important; }
div#errors { color: #e4505e; text-align: right; clear: both; }
p.errors, label.errors {border: none;}
ul.errors {border: none; margin: 0px; padding: 0px; font-size: 0.85em;}
ul.errors li {list-style-type: none; }
#google_checkout input#amount {border: 1px solid #14284b; background-color: #070f21; padding: 3px; color: #fff; }
/* HIDDEN PANELS
--------------------------------------------------------- */
#overlay{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 2000%;
/* background: #070f21 url("img/overlay_bg.jpg") top left no-repeat; */
background-color: #070f21;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
line-height: 0px;
z-index: 2000;
}
#contact_wrapper, #glossary_wrapper {
position: absolute;
top: 0px;
width: 100%;
z-index: 3000;
text-align: center;
}
#contact_detail
{
background: #000 url("img/black_bg.jpg") bottom left repeat-x;
border: 1px solid #333333;
width: 750px;
margin: 0px auto;
text-align: left;
padding: 20px;
z-index: 3000;
}
#glossary_detail {
text-align: left;
margin: 0px auto;
background-color: #070f21;
border: 1px solid #303747;
width: 400px; padding: 20px;
}
#ajax_content {
}
/*
.scrollbar-vert{
background-color: #d2e8ff;
height: 100px;
width: 20px;
float:left;
}
.handle-vert{
background-color: #0066FF;
height: 42px;
width: 20px;
}
*/