html * { 
   padding: 0; 
   margin: 0; 
}

a:link, a:visited, a:hover, a:active {
   text-decoration: none;
      font-weight:700;
}
a:link {
   color: #ea7c42;

}

a:hover {
   color: #ea7c42; 

   text-decoration: underline;
   /*background: #F5E6C9;*/
}

a:visited {
   color: #4c5d78;
   /*text-decoration: none;   */
}

#myFooterContainer a:visited {
   color: #ea7c42;
}
img{
   text-decoration: none;
   border: 0px;
}
.clearBoth {
   clear: both;
}

.clearLeft {
   clear: left;
}

.clearRight{
   clear: right;

}

.floatRight {
   float: right;
}

.floatLeft {
   float: left;
}


/*top content total = 296, background height: 419*/
#myBody {

   background-image: url('../../../../../images/topBackground.jpg');  
   background-repeat: repeat-x;     

}


#topContainer {
   /*height: 350px;*/
   height: 290px;
   
   color: #FFFBEC;

   /*background: #351108;*/
   
}

#myFooterContainer {

   padding-top: 115px;
   padding-bottom: 10px;
   
   color: #FFFBEC;
   font-size: 0.8em;
   background-image: url('../../../../../images/footerBackground.jpg');
   background-repeat: repeat-x; 

}

.myFooterContent {
   width: 500px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}

#myContentContainer, #eeMessageContentContainer {

   min-height: 100%;
   height:auto !important;
   height: 100%;
   
}

#myContentContainer {
   padding-bottom: 20px;

}

#eeMessageContentContainer {
   padding-bottom: 160px;

}


#myContentContainer, #myFooter, #myHeader, #mySubHeader, #buttonsContainer{
   width: 1024px;

   margin-left: auto;
   margin-right: auto;
   text-align: justify;
    
}





#logoContainer a:hover {
   background: none;
}

#logoContainer {
   width: 531px;
   height: 164px;
   
  
   margin-left: auto;
   margin-right: auto; 
  
}

#sloganContainer {
   width: 238px;
   height: 33px;
   margin-left: 786px; /* 1024 - 238 */
   background-color: #ffffff;
}





#frLogo {
   width: 531px;
   height: 164px;
   display: block;
   
}

#slogan {
   width: 238px;
   height: 33px;
   display: block;
   
}


#buttonsContainer {

   margin-top: 12px ;
   height: 39px;

}

#buttonsInnerContainer {
   padding: 0px 0px 0px 57px; 
}

#sideButtonsContainer {

   margin: 0px 0px 0px 0px;
   width: 279px;
}

#leftSectionContainer {
   width: 700px;

   float: left;
}

#rightSectionContainer {
   width: 324px;
   float: left;

}

/*old: right: 100, left: 45, width: 555*/
.leftContentContainer , .leftTitleContainer {
   
   margin-right: 45px;
   margin-left: 45px;   
   width: 610px;
}

.rightContentContainer, .rightTitleContainer {
   width: 279px;
}

.leftTitleTextLev2, .leftTitleTextLev3 {
   font-family:  "Times New Roman", serif;
   color: #5c3623;
   padding-bottom: 2px;
   padding-left: 2px; 
   letter-spacing: 0.1em;
}

.leftTitleText {
   font-size: 1.8em;
}
.leftTitleTextLev2 {
   font-size: 1.5em;
}
.leftTitleTextLev3 {
   font-size: 1.2em;
}

.rulerThick{
   background-image: url('../../../../../images/rulerThick.jpg');
   background-repeat: repeat-x;    
   padding: 0;
   margin: 0;   
   height: 5px;   
}

.rulerThin{
   background-image: url('../../../../../images/rulerThin.jpg');
   background-repeat: repeat-x;    
   padding: 0;
   margin: 0;   
   height: 5px;   
}

.rulerDotted{
   background-image: url('../../../../../images/rulerDotted.jpg');
   background-repeat: repeat-x;    
   padding: 0;
   margin: 0;   
   height: 5px;   
}

.leftTitle{
   width: 610px;
   height: 49px;
   display: block;
}

#firstLeftTitleContainer {
   margin-top: 38px;
}
.leftContentContainer, .rightContentContainer {

   margin-top: 20px;
   margin-bottom: 40px;
}


.leftContentParagraph {
   margin-bottom: 20px;

}

.rightContentParagraph {
   margin-bottom: 0px;
}

.moreAboutUsLink, .getInTouchLink {
  float: right;
}

.submitAnInspirationLink {
  width: 279px;
}
.rightTitleOrnate, .rightTitlePlain  {
   width: 279px;
   display: block;
}

.recentWkContainer, .recentWkContainerEnd, .homeRotatingPixTop {
   width: 610px;
}

.recentWkContainerEnd, .rightContentEnd{
   background-image: url('../../../../../images/rulerThin.jpg');
   background-repeat: repeat-x; 
   
   margin-top: 20px;
   margin-bottom: 10px;
}
.recentWkContainer {
   font-size: 0.8em;
}


.seeMore {
   margin-top: 5px;
   float: right;
}
.recentWkContainer a {

   font-weight: 700;
}

.recentWkContainer a:visited {
   font-size: 0.9em;
   color: #ea7c42;
}


.recentWkImageContainer {    

  width: 390px;

  float: left;  

}

.recentWkImage {
   /*with border size- orig 359 x 124 */
   width: 349px;
   height: 124px;
   border: 5px solid #f7f2e5;
}

.homePageImage {
   /*with border size- orig 359 x 124 */
   width: 600px;
   height: 400px;
   border: 5px solid #f7f2e5; /*#ead3ab;*/


}
.marginBottom100 {
  margin-bottom: 100px;
}

#homePageImagesContainer {

}

.recentWkDataContainer, .recentWkData, .recentWkDataNoRuler {
  width: 220px;
}

.recentWkDataContainer {

  float: left;

}



.recentWkData, .recentWkDataNoRuler {
   
   padding-top: 5px;
   margin-bottom: 5px;
}

.recentWkData {
 
   background-image: url('../../../../../images/rulerDotted.jpg');
   background-repeat: repeat-x; 
}

.recentWkAttr {
   
   font-weight: 700;
   
   float: left;
}

.recentWkValue {

   margin-left: 5px;
   float: left;
}

.portfolioThbImgContainer {
   width: 174px;
}


.portfolioThbImg,   .portfolioThbImgContainer img{
   width: 166px;
   /*height: 59px; */

   border: 4px solid #f7f2e5;   
   display: block;
}

.portfolioHomeContainer, .portfolioHomeContainerFirst {
   font-size: 0.8em;
   float: left;


}

/* old
width of portfolio thumb section: 185 = 555/3
width of portfolio thumb image : 166 
width of portfolio thumb image border: 4
width of portfolio thumb image + width border = 174 = 166 + 4 + 4 

185 - 174 = 11 (times 3 for the 3 thumbs in a row) = 33 

33/2 = approx 16px. I've got 1px free
*/


/* new
width of portfolio thumb section: 203 = 610/3
width of portfolio thumb image : 166 
width of portfolio thumb image border: 4
width of portfolio thumb image + width border = 174 = 166 + 4 + 4 

203 - 174 = 29 (times 3 for the 3 thumbs in a row) = 87 

87/2 = approx 43px. I've got 1px free
*/


.portfolioHomeContainer {

   margin-left: 43px;
}

.portfolioHomeDataContainer {
  width: 174px;

}

.portfolioHomeDataFirst, .portfolioHomeData {
   padding-top: 5px;
   margin-bottom: 5px;
   background-repeat: repeat-x;
}
.portfolioHomeDataFirst {
 
   background-image: url('../../../../../images/rulerThick.jpg');
}

.portfolioHomeData {
 
   background-image: url('../../../../../images/rulerDotted.jpg'); 
}

.portfolioHomeAttr {
   
   font-weight: 700;
   
   float: left;
}

.strikeThrough {
  text-decoration: line-through;
}

.portfolioHomeValue {

   margin-left: 5px;
   float: left;
}




/* firefox 2.0.0.11 does not recognize a:visited 
 * being defined alongside other a attributes, like below
 */
#sideButtonsContainer a:visited {
   color: #ea7c42;
}

#sideButtonsContainer a,  
#sideButtonsContainer a:hover, 
#sideButtonsContainer a:active, 
#sideButtonsContainer a:selected {
   color: #ea7c42;
}


ul#navSide{ 
 
   width: 279px; 

   margin:0px 0px 0px 0px;
   font-size: 0.9em;
   
   
}


ul#navSide li { 

   margin: 0px 0px 0px 0px; 
   list-style-type:none; 
   text-indent:40px;
   vertical-align: bottom;
}


ul#navSide li a {
   padding-top:0px; 
   width: 279px; 
   height: 24px;
   border:0; 
   text-decoration:none; 
   display:block; 

}

li#customStationeryButton a, li#bespokeTailoringButton a, li#beadsandJewelryButton a,
li#fabricButton a, li#artworkButton a, li#beadsandJewelryButton a, li#bagsandPursesButton a,
li#clothingButton a, li#homeDecorButton a, li#accessoriesButton a, li#miscellaneousButton a { 
   background: url('../../../../../images/pfolioButton.jpg') no-repeat; 
} 

li#theRackButton a, li#miscellaneousButton a {
   background: url('../../../../../images/pfolioButtonNoLine.jpg') no-repeat; 
}

ul#navSide li a:hover {

   background-position: -279px 0px;
}

body#shopFabricPage            ul#navSide li#fabricButton   a,  
body#shopArtworkPage           ul#navSide li#artworkButton   a,  
body#shopBeadsandJewelryPage   ul#navSide li#beadsandJewelryButton   a,  
body#shopBagsandPursesPage   ul#navSide li#bagsandPursesButton   a,  
body#shopTheRackPage ul#navSide li#theRackButton   a,  
body#inspirationMiscellaneousPage ul#navSide li#miscellaneousButton   a,  
body#inspirationAccessoriesPage   ul#navSide li#accessoriesButton   a,
body#inspirationHomeDecorPage     ul#navSide li#homeDecorButton   a,
body#inspirationClothingPage      ul#navSide li#clothingButton   a{
   background-position: -279px 0px;
}








ul#nav {
   padding: 0;
   margin: 0px 0px 0px 230px; 
   height: 39px;
   list-style: none;
   display: inline;
   overflow: hidden;

}

ul#nav li {

   margin: 0px 0px 0px 0px; 
   padding: 0px 0px 0px 0px; 
   list-style: none;
   display: inline;
   text-indent:-9999px; 
}


/* for active pages - thanks veerle  */

body#homePage      ul#nav li#homeButton     a,
body#aboutUsPage ul#nav li#aboutUsButton   a,
body#portfolioPage ul#nav li#portfolioButton a,
body#shopPage                  ul#nav li#shopButton   a,
body#blogPage ul#nav li#blogButton a,
body#shopFabricPage            ul#nav li#shopButton   a,
body#shopArtworkPage           ul#nav li#shopButton   a,
body#shopBeadsandJewelryPage   ul#nav li#shopButton   a,
body#shopBagsandPursesPage   ul#nav li#shopButton   a,
body#shopTheRackPage ul#nav li#shopButton   a,
body#contactUsPage ul#nav li#contactUsButton   a,
body#inspirationPage ul#nav li#inspirationButton   a,
body#inspirationMiscellaneousPage ul#nav li#inspirationButton   a,
body#inspirationAccessoriesPage   ul#nav li#inspirationButton   a,
body#inspirationHomeDecorPage     ul#nav li#inspirationButton   a,
body#inspirationClothingPage      ul#nav li#inspirationButton   a{ 
   background-position: 0 -78px;
}


ul#nav a {
   float: left;
   padding: 0;
   margin: 0px 0px 0px 5px;   
   overflow: hidden;
   height: 39px; 
   width: 175px;
   height /**/:39px; /* for IE5/Win only */
}



ul#nav a:hover {
   background-position: 0 -39px;
}

ul#nav a:active, ul#nav a.selected {
   background-position: 0 -78px;
}

#homeButton a  {

   background: url('../../../../../images/homeButton.jpg') no-repeat;
}

#aboutUsButton a  {
   background: url('../../../../../images/aboutUsButton.jpg') no-repeat;
}

#blogButton a  {
   background: url('../../../../../images/blogButton.jpg') no-repeat;
}

#portfolioButton a  {
   background: url('../../../../../images/portfolioButton.jpg') no-repeat;
}

#shopButton a  {
   background: url('../../../../../images/shopButton.jpg') no-repeat;
}

#contactUsButton a  {
   background: url('../../../../../images/contactUsButton.jpg') no-repeat;
}


#inspirationButton a  {
   background: url('../../../../../images/inspirationButton.jpg') no-repeat;
}

.contactInfoContainer {
   margin: 0px 0px 2px 0px;
}
.contactInfoAttribute {
   width: 30%;
   background-color: #f7f2e5;
   font-size: 1.2em; 
   text-align: left;
   padding: 2px 0px 0px 10px ;  
   float: left;
}

.contactInfoValue {

   width: 60%;
   text-align: left; 
   padding: 2px 0px 0px 10px;     
   float: left;
}


.commentPreviewText {
   min-height: 50px;
   background-color: #f7f2e5;
   font-style: normal;

   text-align: justify;
   
   padding: 0px 20px 20px 20px;   

   font-size: 0.8em;
}

.requiredField {
   font-style: italic;
   margin:0px 0px 20px 0px;

}

.requiredFieldAsterisk {
   font-style: italic;
   font-size: 1.4em;
   color: #DC6226;
   margin:0px 0px 20px 0px;

}



.formButton, .addToCartFormButton {
   margin:10px 0px 0px 0px;
}

.formButton, .addToCartFormButton, .updateQuantityFormButton{ 
   background-color: #520708;
   border-color: #8b7265;
   border-width: 1px;
       
   font-weight: 300;
   
   color: #ea7c42; 
}

.formCheckbox {
   background-color: #f7f2e5 ;
}

.formCheckboxContainer {
   margin:10px 0px 0px 0px;
}

.formTextField, .smallFormTextField, .formTextAreaField, .shippingCommentsTextAreaField, .formLabel, .smallFormLabel, .addToCartFormTextField,  td.cartQuantity input, .formSelect{
   margin:0px 0px 0px 0px;
   
   border-style: solid ; 
   border-color: #dbc49c;
   border-width: 1px;
}

.formTextField, .formTextAreaField, .formLabel{
   width: 500px;
  
}

.shippingCommentsTextAreaField {
   width: 610px;
}

.smallFormTextField, .smallFormLabel {
   width: 279px;
}


.formTextField, .addToCartFormTextField,  td.cartQuantity input, .smallFormTextField, .formSelect{
   background-color: #f7f2e5 !important ;
   color: #8b7265;

}
.formTextField {
   margin-bottom: 10px;   
}
.formTextAreaField, .shippingCommentsTextAreaField {
   
   background-color: #f7f2e5 !important ;

   
   color: #8b7265;

}

.captchaContainer {
  
}

.formLabel, .smallFormLabel{
   
   text-align: left;
   border-width: 0px;
   
}

.addToCartFormTextField, td.cartQuantity input{
   width: 50px;
}

.addToCartFormButton {
   font-size: 0.9em;
}

.updateQuantityFormButton, td.cartQuantity input {
   font-size: 0.8em;
}
.paginationContainer {
   float: right;
}


#userMessageContent  {
   
   padding:  22px 25px 14px 25px;
}

.userMessageParagraph {

   font-weight: 700;
   margin-top: 	50px;
   margin-bottom: 50px;
}


.shoppingCartSummaryItemContainer  {
 
   background-image: url('../../../../../images/rulerDotted.jpg');
   background-repeat: repeat-x; 
   
}

.checkoutFieldContainer {

   margin-left: 0.3em;
}
.checkoutFieldSet {
   margin-bottom: 1em;
}

.checkoutLabel, .checkoutLegend, .checkoutRadioLabel, .checkoutCheckBoxLabel, .checkoutRadio {

}


.checkoutTextField {
display: inline;
}


.checkoutLabel {

   margin-bottom: 0.5em;
   width: 11em;
   float: left;

}	

.checkoutLabel, .checkoutTextField, .checkoutRadioLabel, .checkoutCheckBoxLabel, .checkoutSelect{
   color: #8b7265;
   font-size: 1em;
}
.checkoutTextField, .checkoutSelect {

   border-style: solid ; 
   border-color: #dbc49c;
   border-width: 1px;

   background-color: #f7f2e5 !important ;

   

}	


.checkoutRequiredFieldContainer {
   float : right;
   padding-right: 0.5em;
}
.checkoutRequiredFieldAsterisk {
   font-style: italic;
   font-size: 1.4em;
   color: #DC6226;
   margin:0px 0px 20px 0px;

}

.checkoutRequiredField {
   font-style: italic;
   margin:0px 0px 20px 0px;

}