/****************** RESET STYLES ******************/
@import url("reset.css");

/****************** BASIC STYLING ******************/
html, body, form
{
    height: 100%;
    position: relative;
}

body 
{
	padding:0px;
	margin:0px;
	font-size: 10pt;
	font-family: Arial,Verdana;
	background-color: #231F20;
}

h1
{
	color: #FDAD09;
	margin: 0 0 10px 0;
	font-size: 10pt;
	font-weight: bold;
	text-transform: lowercase;
}

h2
{
	color: #FDAD09;
	margin: 0 0 5px 0;
	font-size: 11pt;
}

p
{
	margin:0px;
}

a
{
	color: #FDAD09;
	text-decoration: none;
}

a:hover
{
    text-decoration: none;
}

.link_
{
	text-decoration:none;
	border-bottom: dashed 1px black;
}

img
{
	padding:0px;
	border:0px;
}

form
{
	padding:0px;
	margin:0px;
}

/****************** GENERAL STYLING ******************/
.spacer
{
    height: 0px;
    overflow: hidden;
    clear: both;
}

.highlight,
.error
{
    font-weight: bold;
    color: #FF0000;
}

.required
{
    font-weight: bold;
    color: #000000;
}

.featureBox
{
    border: Solid 1px #CCCCCC;
    background-color: #EEEEEE;
    padding: 6px;
    line-height: normal;
}

.formTable
{
    margin: 0 0 5px 0;
}

.formTable td
{
    border-bottom: Solid 1px #E8E9EA;
}

#scrollPanel
{
    height: 385px; 
    overflow: hidden;
}

#scroller
{
    position: absolute;
    right: -30px;
    bottom: 5px;
    width: 20px;
    height: 40px;
}


#scroller #upArrow a,
#scroller #downArrow a
{
    display: block;
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
}


/****************** WEBSITE LAYOUT ******************/
#website
{
    width: 100%; 
    border-collapse: collapse;
    position: relative;
}

#header,
#footer
{
    color: #FFFFFF;
    font-size: 8pt;
}

#body
{
    height: 435px;
}

#body td
{
    background-color: #FFFFFF;
}

#header .content,
#body .content,
#footer .content
{
    width: 990px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
}

#header .content,
#footer .content
{
    height: 150px;
}

/****************** HEADER ******************/
#header .content .logoLink
{
    position: absolute;
    top: 85px;
    left: 100px;
    height:34px;
    width: 263px;
    background-image: url(../../media/images/logo.jpg);
    background-repeat: no-repeat;
    display: block;
}

#header .content .login
{
    position: absolute;
    top: 112px;
    left: 595px;
    width: 290px;
    font-size: 8pt;
}

#header .content .login .loginTemplate
{
    float: left;
}

#header .content .login .loginTemplate .forgotPassword
{
    margin: 5px 10px 0 0; 
    text-align: right; 
    font-size: 7pt;
}

#header .content .login .userNameTextBox,
#header .content .login .passwordTextBox,
#header .content .login .userNameTextBoxSelected,
#header .content .login .passwordTextBoxSelected
{
    background-color: #231F20;
    background-repeat: no-repeat;
    border: Solid 1px #FFFFFF;
    color: #FFFFFF;
    font-size: 8pt;
    width: 105px;
}

#header .content .login .userNameTextBox
{    
    margin: 0 15px 0 0;
    background-image: url(../../media/images/username.gif);
}

#header .content .login .userNameTextBoxSelected
{
    margin: 0 15px 0 0;
    background-image: none;
}

#header .content .login .passwordTextBox
{
    margin: 0 10px 0 0;
    background-image: url(../../media/images/password.gif);
}

#header .content .login .passwordTextBoxSelected
{
    margin: 0 10px 0 0;
    background-image: none;
}

#header .content .login .loggedInTemplate
{
    float: left; 
    width: 234px;
    height: 25px;
    margin: 3px 0 0 0;
    overflow: hidden;
    font-size: 9pt;
}


#body .content
{
    height: 435px;
    overflow: visible;
}

#body .content .menus
{
    position: absolute;
    top: 30px;
    left: 55px;
    width: 150px;
    height: 395px;
    overflow: hidden;
}

#body .content .text
{
    position: absolute;
    top: 30px;
    left: 240px;
    width: 640px;
    height: 395px;
    line-height: 18px;
    font-size: 9pt;
}

#body .content .text ul
{
    margin: 3px 0 15px 20px;
}

#footer .content .text
{
    position: absolute;
    bottom: 2px;
    width: 990px;
    text-align: center;
}

#footer .content .text .copyright
{
    margin: 0 20px 0 0;
}

/****************** MENU RELATED ******************/
#body .content .menus .mainMenu
{
    margin: 0 0 15px 0;
}

#body .content .menus .mainMenu ul,
#body .content .menus .memberMenu ul
{
    list-style-type: none;
    font-size: 9pt;
}

#body .content .menus .mainMenu ul li
{
    margin: 0 0 6px 0;
}

#body .content .menus .mainMenu ul li a
{
    color: #231F20;
    text-transform: lowercase;
}

#body .content .menus .mainMenu ul li a:hover,
#body .content .menus .memberMenu .menuHeader a:hover,
#body .content .menus .memberMenu .highlightedMenu a:hover,
#body .content .menus .memberMenu ul li a:hover
{
    color: #FDAD09;
    text-decoration: none;
}

#body .content .menus .mainMenu ul li .selected,
#body .content .menus .memberMenu ul li .selected,
#body .content .menus .memberMenu .highlightedMenu ul li .selected
{
    color: #FDAD09;
}

#body .content .menus .mainMenu ul ul 
{
    margin: 5px 0 0 10px;
}

#body .content .menus .mainMenu ul ul li a
{
    color: #6D6E71;
}

#body .content .menus .memberMenu .menuHeader
{
    padding: 0 0 5px 0;
    border-bottom: Solid 1px #FDAD09;
}

#body .content .menus .memberMenu .menuHeader,
#body .content .menus .memberMenu .menuHeader a
{
    text-transform: lowercase;
    font-weight: bold;
    color: Black;
}

#body .content .menus .memberMenu .highlightedMenu
{
    margin: 10px 0 20px 0;
}

#body .content .menus .memberMenu .highlightedMenu ul li
{
    margin: 0 0 5px 0;
}

#body .content .menus .memberMenu .highlightedMenu ul li a
{
    color: #231F20;
}

#body .content .menus .memberMenu ul
{
    margin: 5px 0 0 0;
}

#body .content .menus .memberMenu ul ul 
{
    margin: 5px 0 5px 15px;
}

#body .content .menus .memberMenu ul li
{
    margin: 0 0 3px 0;
    text-transform: lowercase;
}

#body .content .menus .memberMenu ul li a
{
    color: #6D6E71;
}

/****************** HOME PAGE RELATED ******************/
#homeFlash
{
    width: 640px; 
    height: 340px; 
    position: absolute; 
    top: -17px;
}


/****************** ITEM RELATED (e.g. Categories, Fabrics) ******************/
#body .content .text #item .itemContent
{
    width: 300px; 
    height: 325px;
    overflow: hidden;
    margin: 0 45px 0 0;
    position: relative;
}

#body .content .text #item .image
{
    position: absolute; 
    top: -17px; 
    right: 0; 
    width: 295px; 
    height: 340px;
}

#body .content .text #item .specifications
{
    margin: 6px 0;
}

#body .content .text #item .specifications a
{
    border: Solid 1px #FDAD09;
    padding: 4px;
    color: #FDAD09;
}

#body .content .text #item .backLink a
{
    position: absolute;
    bottom: 15px;
    right: 0;
}


/****************** PRODUCTS MANAGER REPEATER RELATED ******************/
#productsManagerFooter
{
    position: absolute; 
    bottom: -31px; 
    left: -20px; 
    z-index: 100;
}

#productsManagerRepeater
{
    width: 680px;
}

#productsManagerRepeater .scrollArrow
{
    float: left; 
    width: 20px; 
    height: 79px;
}

#productsManagerRepeater #fabrics
{
    float: left; 
    width: 640px; 
    height: 100px; 
    background-color: transparent; 
    overflow: hidden;
}

#productsManagerRepeater #fabrics .fabric
{
    float: left;
}

#productsManagerRepeater #fabrics .fabric .image
{
     width: 126px; 
     height: 75px;
     vertical-align: middle;
     text-align: center;
}

#productsManagerRepeater #fabrics .fabric .imageLink
{
    display: block;
    width: 126px; 
    height: 75px;
    border: Solid 1px #FFFFFF;    
}

#productsManagerRepeater #fabrics .fabric .imageLink:hover
{
    border: Solid 1px #FDAD09;
}

#productsManagerRepeater #fabrics .fabric .name
{
    text-align: center; 
    text-transform: lowercase; 
    color: #FFFFFF; 
    font-size: 8pt;
    margin: 4px 0 0 0;
}

#productsManagerRepeater #fabrics .fabric .name a
{
    color: #FFFFFF;
}

/****************** FABRIC SPECIFICATIONS ******************/
#specifications
{
    position: relative;
    top: -25px;
}

#printSpecifications
{
    margin: 3px;
}

#defaultList a
{
    color: #000000;
    display: block;
    text-transform: lowercase;
}

#defaultList a:hover
{
    color: #FDAD09;
}

#defaultList .categoryHeader
{
    font-weight: bold;
    text-transform: uppercase;
    margin: 10px 0 0 0;
}

#defaultList .first
{
    margin: 0;
}

#defaultList .column1,
#defaultList .column2,
#defaultList .column3
{
    width: 140px;
    line-height: normal;
    vertical-align: top;
}

#defaultList .column1
{
    padding: 0 15px 0 0;
}

#defaultList .column2
{
    padding: 0 15px;
    border-left: Solid 1px #FEC938;
    border-right: Solid 1px #FEC938;
}

#defaultList .column3
{
    padding: 0 0 0 15px;
}

#PrintIFrameDiv,
#FullImageIFrameDiv
{
    border: Solid 2px #666666; 
    background-color: #FFFFFF; 
    position: absolute; 
    float: left; 
    z-index: 1000;
}

#PrintIFrameDiv
{
    width: 668px; 
    height: 575px; 
    top: -70px; 
    left: -15px; 
}

#FullImageIFrameDiv
{
    width: 647px; 
    height: 373px; 
    top: 0; 
    left: 0; 
}

#PrintIFrameDiv .footer,
#FullImageIFrameDiv .footer
{
    text-align: right; 
    position: relative; 
}

#PrintIFrameDiv .footer
{
    padding: 3px 3px 0 0;
}

#FullImageIFrameDiv .footer
{
    padding: 0 3px 0 0;
}

#FullImageIFrameDiv .footer .fullImageTitle
{
    float: left; 
    padding-left: 5px; 
    display: inline;
}

#PrintIFrameDiv .footerButtons .button,
#FullImageIFrameDiv .footerButtons .button
{
    margin: 0 10px 0 0;
}

#fullImage
{
    padding: 3px;
}

#headerDiv
{
    line-height: normal;
}

#headerDiv .fabricListLink
{
    width: 320px;
    float: left;
    position: relative;
}


#headerDiv .fabricListLink a
{
    color: #FDAD09; 
    font-weight: bold;
    text-transform: lowercase;
}

#headerDiv .fabricListLink a:hover
{
    color: #EEA202;
}

#headerDiv .printLink
{
    width: 317px;
    float: left;
    position: relative;
    text-align: right;
}

#fabricList 
{
    width: 360px;
    position: absolute;
    float: left;
    clear: both;
    padding: 15px 15px 10px 15px;
    background-color: #FEC938;
    margin: 10px 0 0 0;
    font-size: 9pt;
    color: #000000;
    font-size: 8pt;
    z-index: 200;
    /* Used for transparencies */
    filter: alpha(opacity=90); /* IE */
    opacity: 0.90; /* CSS3 */
    -moz-opacity: 0.90; /* Firefox / Mozilla */
}

#fabricList td
{
    background: transparent;
}

#fabricList .column1,
#fabricList .column2,
#fabricList .column3
{
    line-height: normal;
    vertical-align: top;    
    margin-bottom: 5px;
    width: 100px;
}

#fabricList .column1
{
    padding: 0 15px 0 0;
}

#fabricList .column2
{
    padding: 0 15px;
    border-left: Solid 1px #FFFFFF;
    border-right: Solid 1px #FFFFFF;
}

#fabricList .column3
{
    padding: 0 0 0 15px;
}

#fabricList .categoryHeader
{
    font-weight: bold;
    text-transform: uppercase;
    margin: 10px 0 0 0;
    /* Used for transparencies */
    filter: alpha(opacity=100);  /* IE */
    opacity: 1; /* CSS3 */
    -moz-opacity: 1; /* Firefox / Mozilla */
}

#fabricList .first
{
    margin: 0;
}

#fabricList td
{
    line-height: normal;
}

#fabricList a
{
    color: #000000;
    display: block;
    text-transform: lowercase;
    /* Used for transparencies */
    filter: alpha(opacity=100);  /* IE */
    opacity: 1; /* CSS3 */
    -moz-opacity: 1; /* Firefox / Mozilla */
}

#fabricList a:hover
{
    color: #FFFFFF;
}

#fabricList .selected
{
    color: #FFFFFF;
}

#fabricList .closeButton
{
    text-align: right;
}

#categoryFabrics
{
    line-height: normal;
    padding: 10px 0 0 0;
    height: 35px;
    font-size: 8pt;
    text-transform: lowercase;
    overflow: hidden;
}

#categoryFabrics .category
{
    width: 85px; 
    float: left; 
}

#categoryFabrics .fabrics
{
    width: 550px; 
    float: left;
    color: #6D6E71;
}

#categoryFabrics .fabrics a
{
    color: #6D6E71;
    margin: 0 8px;
}

#categoryFabrics .fabrics .selected,
#categoryFabrics .fabrics a:hover
{
    text-decoration: none;
    color: #FDAD09;
}

#contentBody
{
    margin: 0;
    padding: 0;
}

#printSpecifications #contentBody
{
    margin: 10px 0 0 0;
    padding: 0;
}

#contentBody #leftColumn
{  
    position:relative;
    float: left;
    width: 300px;
    padding: 0;
    height: 355px;
    border-right: Solid 1px #FEC938;
}

#printSpecifications #contentBody #leftColumn
{
    border-right: none;
}

#contentBody #leftColumn .header
{
}

#contentBody #leftColumn .image
{
    width: 282px; 
    height: 147px; 
    margin: 8px 0 10px 0;
}

#contentBody #leftColumn #coloursList .item
{
    width: 75px; 
    height: 23px;
}

#contentBody #leftColumn #coloursList .footerMessage
{
    font-size: 8pt; 
    margin: 0 7px 0 0;
}

#contentBody #leftColumn #coloursList .footerMessage a
{
    color: #000000;
}

#contentBody #leftColumn #coloursList .footerMessage a:hover
{
    color: #FDAD09
}

#contentBody #rightColumn
{
    position:relative;
    float: left;
    padding: 0 0 0 12px; 
    width: 325px;
    display: inline;
    z-index: 100;
}

#contentBody #rightColumn .header
{
    display: block;
    line-height: normal;
    font-weight: bold;
    text-transform: lowercase;
}

#contentBody #rightColumn #dataTable
{
    width: 320px;
    margin: 5px 0;
}

#printSpecifications #contentBody #rightColumn #dataTable
{
    margin: 5px 0 15px 0;
}

#contentBody #rightColumn #dataTable td
{
    border-bottom: Solid 1px #E8E9EA;
    font-size: 8pt;
    line-height: normal;
}

#contentBody #rightColumn #environmentalImpactData
{
    font-size: 8pt; 
    height: 325px;
}

#printSpecifications #contentBody #rightColumn #environmentalImpactData
{
    font-size: 8pt; 
    line-height: 18px;
    height: auto;
}

#contentBody #rightColumn #environmentalImpactData .esdLogo,
#printSpecifications #contentBody #rightColumn .esdLogo
{
    display: block;
    background-image: url(../../media/images/esd-logo.jpg);
    background-repeat: no-repeat;
    width: 80px;
    height: 75px;
}

#contentBody #rightColumn #environmentalImpactData .esdLogo
{
    position: absolute;
    bottom: 20px;
    left: 123px;
}

#printSpecifications #contentBody #rightColumn .esdLogo
{
    margin: 20px auto 0 auto;
}

/****************** DOCUMENTS RELATED ******************/
.documents
{
    width: 535px;
    border-top: Solid 1px #CCCCCC;
    line-height: normal;
}

.documents .item
{
    border-bottom: Solid 1px #CCCCCC;
    padding: 3px;
}

.documents .item .title
{
    float: left; 
    width: 435px;
}

.documents .item .title a
{
    color: #000000;
}

.documents .item .title a:hover
{
    color: #FDAD09;
}

.documents .item .fileSize
{
    float: right;
    width: 90px; 
    text-align: right;
}

.documents .item .shortDescription
{
    clear: both; 
    padding: 5px 0 0 0; 
    font-size: 9pt; 
    color: #5A5B5C;
}

/****************** COLOUR STORIES RELATED ******************/
#colourStoriesContent .introText
{
    margin: 0 0 10px 0;
}

.colourStories
{
    width: 535px;
    border-top: Solid 1px #CCCCCC;
    line-height: normal;
}

.colourStories .item
{
    border-bottom: Solid 1px #CCCCCC;
    padding: 3px;
}

.colourStories .item a
{
    color: #000000;
}

.colourStories .item a:hover
{
    color: #FDAD09;
}


/****************** SAMPLES RELATED ******************/
#requestSamples
{
    position: relative;
    top: -25px;
}

#requestSamples .leftColumn
{
    float: left; 
    padding: 0 10px 0 0;
    border-right: Solid 1px #FDAD09; 
    height: 385px; 
    width: 360px; 
    display: inline; 
    position: relative; 
    line-height: normal;
}

#requestSamples .rightColumn
{
    overflow: auto;
    height: 385px; 
    line-height: normal;
    padding: 0 0 0 10px;    
}

#requestSamples .detailsTable
{
    margin-bottom: 5px; 
    border-collapse: separate; 
    border-spacing: 1px;
}

#requestSamples .detailsTable .headerCell
{
    width: 75px; 
    background-color: #CCCCCC;
    padding: 0 0 0 3px;
}

#requestSamples .detailsTable .dataCell
{
    background-color: #EEEEEE;
    width: 285px;
}

#requestSamples .detailsTable .dataCell input
{
    font-size: 9pt;
}

#requestSamples .detailsTable .dataCell textarea
{
    font-size: 9pt;
    font-family: Arial, Verdana;
}

#requestSamples .footerButtons
{
    margin: 5px 0 0 0;
}

#requestSamples .backLink
{
    float: left;
}

#requestSamples .submitButton
{
    float: right;
}

#requestSamples .samplesTable
{
    margin: 10px 0 15px 0;
}

#requestSamples .samplesTable td
{
    font-size: 8pt;
    border-bottom: Solid 1px #E8E9EA;
    line-height: normal;
}

#requestSamples .samplesTable .name
{
    width: 150px;
}

#requestSamples .samplesTable .image
{
    vertical-align: middle;
}

#requestSamples .samplesTable .qty
{
    width: 50px; 
    text-align: center;
    vertical-align: middle;
}

#requestSamples .samplesTable .qty input
{
    width: 25px;
    font-size: 8pt;
}

#requestSamples .samplesTable .headerRow
{
    vertical-align: bottom; 
    border-bottom: Solid 2px #000000;
}


/****************** FORMS REGISTRATION ******************/
#login
{
    width: 635px;
}

#registerMember .leftColumn,
#login .leftColumn,
#retrievePassword .leftColumn,
#unsubscribe .leftColumn
{
    float: left; 
    margin: 0 30px 0 0; 
    display: inline;
}

#registerMember .rightColumn,
#login .rightColumn,
#retrievePassword .rightColumn,
#unsubscribe .rightColumn
{
    float: left;
}

#registerMember .dataForm,
#login .dataForm,
#retrievePassword .dataForm,
#unsubscribe .dataForm
{
    border-collapse: separate;
    border-spacing: 1px;
    margin: 0 0 5px 0;
}

#registerMember .dataForm .headerCell,
#login .dataForm .headerCell,
#retrievePassword .dataForm .headerCell,
#unsubscribe .dataForm .headerCell
{
    background-color: #CCCCCC;
    width: 100px;
    padding: 0 0 0 3px;
}

#registerMember .dataForm .headerCell
{
    width: 75px;
}

#registerMember .dataForm .dataCell,
#login .dataForm .dataCell,
#retrievePassword .dataForm .dataCell,
#unsubscribe .dataForm .dataCell
{
    background-color: #EEEEEE;
    width: 225px;
}

#registerMember .dataForm .dataCell
{
    width: 280px;
}

#registerMember .dataForm .dataCell input,
#login .dataForm .dataCell input,
#retrievePassword .dataForm .dataCell input,
#unsubscribe .dataForm .dataCell input
{
    font-size: 9pt;
}

#registerMember .dataFormFooter,
#login .dataFormFooter,
#retrievePassword .dataFormFooter,
#unsubscribe .dataFormFooter
{
    margin: 5px 0 10px 0;
}


/****************** MISC ******************/
.featureBox ul
{
    margin: 3px 0 3px 30px;
    line-height: normal;
}

.featureBox ul li
{
    margin: 0;
    padding: 0;
    line-height: normal;
}