/********************************************************************/
/********************************************************************/
/* basic rules for common page elements */
/********************************************************************/
/********************************************************************/

body { 
  font-family: arial;
  background-image: url("/images/2A5_PL_bg.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #e6e6e6;
}


@font-face {
    font-family: 'ufRockwellBold';
    src: url('/inc/fonts/ufonts.com_rockwell_extra_bold__2_.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


h1, h2, h3, h4 {  
  font-family: "ufRockwellBold";
  font-weight: bold;
  color: #323232;
  margin-top: 0;
  margin-bottom: 0;
}


h1 {  
  font-size: 220%;
}

h2 {  
  font-size: 180%;
}

h3 {  
  font-size: 130%;
}

h4 { 
  font-size: 105%
}


h3.leopardFibelTitle {  
  font-size: 140%;

}



/********************************************************************/
/********************************************************************/
/* some general purpose formatting rules */
/********************************************************************/
/********************************************************************/

.centered, .centeredArea {  
  margin-left:  auto;
  margin-right: auto;
}


.paddedInlineBlock { 
  display: inline-block;
  padding: 0.5em;

}


.showHideIntroArea {  
  display: inline-block;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  padding-left: 1.0em;
  padding-right: 1.0em;
}


.steelBlueBoundingBox {  
  background: lightsteelblue;
  border-radius: 4px;
  padding: 4px;
}

.redItalicEmphasizedText, .outOfStock, .temporarilyOutOfStock, .noLongerAvailable { 
  color: red;
  font-weight: bold;
  font-style: italic;
}

.specialBanner {  
  border-radius: 4px;
  background: gold;
}

.size120percent {  
  font-size: 120%;
}

.size80percent {  
  font-size: 80%;
}


.webmasterComment, .editorComment { 
  font-size: 80%;
  font-style: italic;
  color: #666;
 }


/********************************************************************/
/********************************************************************/
/* page header related rules */
/********************************************************************/
/********************************************************************/

.headerElementBlock { 
  display: inline-block;
  vertical-align: top;
  padding: 0;
  text-align: center;
  /*margin: 1.25em 0.25em 0.25em 0.25em;*/
}

.headerImageBlock {  
  max-width: 200px;
  /*margin: 0em 1em 1em 0.25em;*/
}

.headerTitleTextBlock {  
  position: relative;
  top: 12px;
  vertical-align: top;
  margin-top: 1em;
}

@media ( min-width: 320px) { 
  .headerTitleTextBlock { 
    margin-bottom: 1em;
  }
}



.headerSearchFormBlock {  
  float: right;
  vertical-align: top;
}


.headerPageTitle {  
  display: inline-block;
  vertical-align: top;
  font-size: 220%;
  font-family: "ufRockwellBold";
  font-weight: bold;
  color: #323232;
}


.workshopHeaderTitleTextBlock {  
  position: relative;
  top: -16px;
  vertical-align: top;
  margin-top: 1em;
}



/********************************************************************/
/********************************************************************/
/********************************************************************/
/********************************************************************/





tr.workshopRow > td { 
  border-bottom: 2px solid black;
  padding-top: 1em;
}





/********************************************************************/
/********************************************************************/
/* product listing rules - used for the Fibel, Fact File, workshop and shop pages */
/********************************************************************/
/********************************************************************/


@media (max-width: 599px) {  
  .listingPreviewBlock, .wideListingPreviewBlock, .pseudoTablularThumbnailBlock {  
  /*background-color: pink !important;*/
    /*float: none;*/
    display: table-row !important;
    margin: 1em 1em 1em 1em !important;
  }
  .listingItemBlock, .wideListingItemBlock, .pseudoTablularMainBlock { 
  /*background-color: lightskyblue !important;*/
    /*float: none;*/
  display: table-row !important;
  }
}

.listingPreviewBlock, .pseudoTabularThumbnailBlock { 
  /*float: left*/;
  display: inline-block;
  width: 170px;
  padding: .05em;
  padding-top: 1em;
  padding-bottom: 1em;
  vertical-align: top;
  text-align: center;
  /*background-color: red;*/
 }

.wideListingPreviewBlock { 
  display: inline-block;
  width: 230px !important;
  padding: .05em;
  padding-top: 1em;
  padding-bottom: 1em;
  vertical-align: top;
  text-align: center;
}

.listingItemBlock, .pseudoTabularMainBlock { 
  /*float: right;*/
  display: inline-block;
  width: -moz-calc(100% - 210px );
  width: -webkit-calc(100% - 210px );
  width: calc(100% - 210px );
  padding: 0.5em;
  padding-top: 1em;
  vertical-align: top;
  /*background-color: yellow;*/
 }

.wideListingItemBlock { 
  display: inline-block;
  width: -moz-calc(100% - 280px ) !important;
  width: -webkit-calc(100% - 280px ) !important;
  width: calc(100% - 280px ) !important;
  padding: 0.5em;
  padding-top: 1em;
  vertical-align: top;
}


hr.listingItemSeparator, hr.pseudoTabularSeparator { 
  border: 0;
  height: 1px;
  background: #333;
  background-image: linear-gradient(to right, #ccc, #333, #ccc);
}



/* generic item price elements */
.itemPriceSet { 
  text-align: center;
}

.itemPriceBlock { 
  display: inline-block;
  padding: 0;
  /*white-space: nowrap;*/
  text-align: center;
  margin: 1em 1em 1em 1em;
}





/********************************************************************/
/********************************************************************/
/* Navigation menu */
/********************************************************************/
/********************************************************************/

ul.navMenu {  
  list-style-type: none;
  margin-top: 0.45em;
  padding-left: 0;
  clear: both;
}

li.navMenuItem {  
  display: inline-block;
  padding: 0;
  white-space: nowrap;
  text-align: center;
  margin-bottom: 1em;
}


.navMenuSelected {  
  border-radius: 2px;
  background-color: greenyellow;
  font-weight: bold;
  font-size: 160%;
  padding:6px;
}

a.navMenuLink {
  border-radius: 2px;
  color: white;
  /*background-color: #98bf21;*/
  padding:6px;
  text-decoration: none;
}

a.navMenuLink:hover, a.navMenuLink:active
{
  /*background-color: #7A991A;*/
  color: maroon;
  background-color: lightskyblue;
}


.bgNavLink-1 { 
  background-color: orange;
}

.bgNavLink-2 { 
  background-color: firebrick;
}

.bgNavLink-3 { 
  background-color: mediumorchid;
}

.bgNavLink-4 { 
  background-color: steelblue;
}

.bgNavLink-5 { 
  background-color: darkorchid;
}

.bgNavLink-6 { 
  background-color: chocolate;
}

.bgNavLink-7 { 
  background-color: olivedrab;
}

.bgNavLink-8 { 
  background-color: cadetblue;
}

.bgNavLink-9 { 
  background-color: goldenrod;
}

.bgNavLink-10 { 
  background-color: darkslateblue;
}

.bgNavLink-11 { 
  background-color: indianred;
}

.bgNavLink-12 { 
  background-color: forestgreen;
}

.bgNavLink-13 { 
  background-color: indigo;
}

.endOfNavHeaderBreak {  
  height: 1px;
  visibility: hidden;
  margin-top: 0px;
  margin-bottom: -1px;
  padding-top: 0;
  padding-bottom: 0;
  clear: both;
}





/********************************************************************/
/********************************************************************/
/* in-page jump/nav menu */
/********************************************************************/
/********************************************************************/

.inPageNavMenu {
  display: inline-block;
  margin-top: 0.2em;
  margin-bottom: 0.4em;
}






/********************************************************************/
/********************************************************************/
/* leopard reference list rules */
/********************************************************************/
/********************************************************************/


@media (max-width: 599px) {  
  .pseudoTabularThumbnailBlock {  
    display: table-row !important;
    margin: 1em 1em 1em 1em !important;
  }
  .pseudoTabularMainBlock { 
    display: table-row !important;
  }
}

.pseudoTabularThumbnailBlock { 
  /*float: left;*/
  display: inline-block;
  width: 200px;
  padding: .05em;
  padding-top: 1em;
  padding-bottom: 1em;
  vertical-align: top;
  text-align: center;
  /*background-color: red;*/
 }


.pseudoTabularMainBlock { 
  /*float: right;*/
  display: inline-block;
  width: -moz-calc(100% - 240px );
  width: -webkit-calc(100% - 240px );
  width: calc(100% - 240px );
  padding: 0.5em;
  padding-top: 1em;
  vertical-align: top;
  /*background-color: yellow;*/
 }



hr.pseudoTabularSeparator { 
  border: 0;
  height: 1px;
  background: #333;
  background-image: linear-gradient(to right, #ccc, #333, #ccc);
}




/********************************************************************/
/********************************************************************/
/* main landing page formatting rules                               */
/********************************************************************/
/********************************************************************/




#welcomeShowHideArea { 
  display: block;
  padding: 0.5em;
}

#welcomeBlockTitle { 
  color: white !important;
 }

div.mainPageWelcomeBlock { 
  padding: 0.5em;
  font-size: 80%;
  color: white;
  background-color: dimgray;
  border-radius: 2px;

 }


div.mainPageBlock { 
  padding: 0.5em;
  text-align: center;
  vertical-align: top;
 }


div.mainPageReviewShopBlock {
  font-size: 80%;
  background-color: lightsteelblue;
  border-radius: 2px;  width: 15%;
}


li.mainPageBlock {
  padding: 0.5em;
  display: -moz-inline-stack;
  display: inline-block; 
  vertical-align: top;
  zoom: 1;
  *display: inline;
}


li.mainPageMainContentBlock {
  width: 75%;
  vertical-align: top;
}

li.mainPageReviewShopBlock {
  width: 19%;
  font-size: 80%;
  background-color: lightsteelblue;
  border-radius: 2px;  width: 15%;
}






/********************************************************************/
/********************************************************************/
/********************************************************************/
/********************************************************************/






.mainContentContainer {  
  display: block;
  margin-top: 2px;
  margin-left: 4px;
  margin-right: 8px;
  margin-bottom: 8px;
  
}

.footerText {  
  font-size: 70%;
}



img.paddedImageLeftAligned { 
  margin-left: 2px;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}

img.paddedImageRightAligned { 
  margin-left: 10px;
  margin-right: 2px;
  margin-top: 5px;
  margin-bottom: 5px;
}


a > img {  
  border: 2px solid;
}


img.imageLinkNoBorder {  
  border: 0;
}



/* used for vendor product number links (to the vendor's website) */
a.productNumberLink {  
  font-weight: bold;
}


.subHeaderBar {  
  /*width:            100%;*/
  background-color: black;
  color:            white;
  padding:          2px 2px 2px 5px;
  border-radius:    3px;
  font-weight:      bold;
  font-size:        125%;
  background-image: -webkit-gradient(linear, left top, right top, from(black), to(grey));
  background-image: -webkit-linear-gradient(left, black, grey); 
  background-image: -moz-linear-gradient(left, black, grey);
  background-image: -ms-linear-gradient(left, black, grey);
  background-image: -o-linear-gradient(left, black, grey);
}






.lightBlueBackground { 
  font-size: 80%;
  background-color: lightsteelblue;
  border-radius: 2px;
  padding: 0.5em;
 }

.leftContent {  
  font-size: 80%;
  color: white;
  background-color: dimgray;
  border-radius: 2px;
}

.leftContent p { 
  margin-top: 0;
}

.centreContent {  

}

.rightContent {  
  font-size: 80%;
  background-color: lightsteelblue;
  border-radius: 2px;
}


ol.introList > li {  
  margin-bottom: 1em;

}




.rotate7degRight { 
  transform:rotate(7deg);
  ms-transform:rotate(7deg); /* IE 9 */
  webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
 }


.rotate7degLeft { 
  transform:rotate(-7deg);
  ms-transform:rotate(-7deg); /* IE 9 */
  webkit-transform:rotate(-7deg); /* Opera, Chrome, and Safari */
 }




.articleDetailsContent { 
  display: inline-block;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  padding-left: 1.0em;
  padding-right: 1.0em;
  background-color: lightsteelblue;
  border-radius: 2px;
  margin-bottom: 4px;
}




/* generic table layout used originally for the Leopard Fibel listing page but used for quite a lot
   of stuff on this site */


.fibelRow {  
  padding-bottom: 0.5em;
}



.fibelFirstCol {  
  background-color: #747474;
  text-align: center;
}

.fibelSecondCol {  
  background-color: gainsboro;
}


.fiblePseudoTable { 
  display: table;
  margin-top: 0.25em;
  border-spacing: 3px;
}

.fibelPseudoRow {  
  display: table-row;
}

.fibelPseudoCell {  
  display: table-cell;
  vertical-align: top;
  padding: 0.25em;
}

.fibelFirstPseudoCol {  
  background-color: #747474;
  text-align: center;
}

.fibelSecondPseudoCol {  
  background-color: gainsboro;
}




img.fibelCoverImage {  
  border-radius: 6px;
}



td.fibelPriceInfo {  
  font-size: 80%;

}




/* links page item */
dt.linksPageItem {  
  margin-top:    0.6em;
  margin-bottom: 0.6em;
}

dd.linksPageDescription { 
  margin-bottom: 1.6em;
}



/* links page bubble link surounds */
.linkBubbleButton {  
  background-color: yellowgreen;
  padding-top:      3px;
  padding-bottom:   3px;
  padding-left:     1em;
  padding-right:    1em;
  border-radius:    14px;
  font-weight:      bold;
   background-image: -webkit-gradient(linear, left top, right top, from(yellowgreen), to(peru));
  background-image: -webkit-linear-gradient(left, yellowgreen, peru); 
  background-image: -moz-linear-gradient(left, yellowgreen, peru);
  background-image: -ms-linear-gradient(left, yellowgreen, peru);
  background-image: -o-linear-gradient(left, yellowgreen, peru);
}

.linkBubbleButton > a {  
  text-decoration: none;
}






/* bounding box for the Histoire & Collections logo (which is white so it needs a background to be visible) */
.HC-surround {  
  display: inline-block;
  background-color: olivedrab;
  border-radius: 8px;
  padding: 1em 1em 1em 1em;
}



/* plus and minus styling for the Meng 1A3/A4 review (and other reviews) */
.greenPlus {
  color: forestgreen;
  font-weight: bold;
}

.redMinus {
  color: red;
  font-weight: bold;
}




/* Leopard lists floating menu */

.floatingMenuColumn { 
  width: 16%;
}

.floatingMenuContainer { 
  position: fixed;
  z-index: 9999999;
  width: 15%;
  font-size: 90%;
}

.floatingMenu { 
  padding-left: 0.5em !important;
 }




/* used for tabular layout */
.pseudoTable { 
  display: table;
}

.pseudoTableCell { 
  display: table-cell;
}

.pseudoTableRow { 
  display: table-row;
}

.centeredCellContents { 
  text-align: center;
}


.verticalAlignTopCell { 
  vertical-align: top;
}

.paddedCellSmallPadding { 
  padding: 0.25em;
}



/* tabular layout for the reviews page */
.reviewTable { 
  display: table;
}

.reviewTableRow {  
  display: table-row;
}

.reviewTableCell {  
  display: table-cell;
  padding: 0.4em;
  vertical-align: top;
}

ul.reviewList {  
  padding-left: 1em;
  list-sytle-type: none;
}







.spotlightHeaderTable { 
  display: table;
  vertical-align: top;
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
 }

.spotlightHeaderRow {  
  display: table-row;
}

.spotlightHeaderCell { 
  display: table-cell;
  vertical-align: middle;
  padding: 1em;
}


div.spotlightBoundingBox { 
  margin-right: auto;
  margin-left: auto;
  padding: 1em;
  border-style: solid;
  border-width: 5px;
  border-color: darkgray;
  border-radius: 6px;
}



div.spotlightListContainer { 
  text-align: center;
}

ul.spotlightList { 
  list-style-type: none;
}

li.spotlightListItem { 
  display: inline-block; 
  text-align: center;
  margin: 0.5em;
}



.spotlightTable { 
  display: table;
  vertical-align: top;
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
}

.spotlightCellLeft { 
  display: table-cell;
  padding: 0.5em;
}

.spotlightCellRight { 
  display: table-cell;
  vertical-align: middle;
  padding: 0.5em;
}

.spotlightRow { 
  display: table-row;
}



/* floating/wrapping inline block thingy */
.inlineContentBlock { 
  display: inline-block; 
  float: left; 
  padding: 0.5em;
  margin-bottom: 1em;
}



/* Google search stuff */
.googleSearchFormElement {  
  max-width:     75%;
  margin-right:  auto;
  margin-left:   auto;
  margin-top:    2em;
  margin-bottom: 1em;
}



/* whats new page*/
.whatsNewDate { 
  font-weight: bold;
}

.whatsNewItem { 
vertical-align: top;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 1em;
}



.headingWithBottomMargin {  
  margin-bottom: 1em;
}


.listItemPaddedBottom { 
  margin-bottom: 1em;
}