/* Supports updated PK2 profuct family page (maxi_k2_product.aspx) */


/* Portal to display the various format options */
.productFamily { border: 1px solid #ccc } 

.productFamily h1 { background: #ccc url(/Images/Layout/mainBackground.png) 0 -35px repeat-x;  margin: 0; height: 1.8em; line-height: 1.6em; padding-left: 0.5em; color: #EFEFEF; font-size: 97%;  }

.familyHighProtein h1 { background-position:  0 -105px; } 
.familyFatBurning h1 { background-position:  0 -140px; } 
.familyEnergy h1 { background-position:  0 -210px; } 
.familyCuttingEdge h1 { background-position:  0 -245px; } 
.familyMuscleSize h1 { background-position:  0 -70px; } 
.familyMaintenance h1 { background-position:  0 -280px; } 
.familyCreatine h1 { background-position:  0 -175px; } 


.formatPortal {  position: relative; height: 281px; background: #fff; overflow:hidden;  } 
.formatPortal .portalNav { z-index:2; position: absolute; left:0; top: 0; width: 160px; margin: 0; }
.formatPortal .portalNav li { display: list-item;  border-top: 1px solid #ccc; line-height: 1.4em; } 
.formatPortal .portalNav li.firstInList { border-top: 0; }
.formatPortal .portalNav a { text-decoration: none; display: block; text-align: left; padding-left: 4px;  padding-right: 4px; padding-top: 0.8em; padding-bottom: 0.8em; height: 2.5em; }  
.formatPortal .portalNav a span {display: block;}
.formatPortal .portalNav .active a, .formatPortal .portalNav a:hover {background: #777; color: #ebebeb; }


.formatPortal .viewPortal { width: 612px; position: relative; left: 160px; height: 290px; } 

.productFamily .picture { position: relative; float: left;  clear: left; width: 180px; height: 275px; border: 1px solid #C7C7C7; padding-top: 10px; text-align: center;  border-top:0; border-bottom: 0; }
.productFamily .exclusiveInfo { left: 0; position: absolute; bottom: 0; width: 180px; color: #fff; font-weight: bold; background: #c00; margin: 0; height: 2em; padding: 0; }  
.productFamily .exclusiveInfo p { line-height: 1.6em;  }

.productFamily .buyOne { float: left; padding-top: 15px;  height: 5em; width: 385px; position: relative;  border-bottom: 1px solid #ccc; }
.productFamily .buyOne form .priceArea, .productFamily .buyOne form .frmButton {float: right; padding-right: 1em; margin: 1px;}
.productFamily .buyOne form .frmButton{margin: 0;}
.productFamily .buyOne form .priceArea .price {float: left; padding: 0 1em;}
.productFamily .buyOne form .priceArea .flavourPick {float: right;}
.productFamily .specialOffer { float: left; width: 385px;position: relative; height:193px; overflow:hidden;   }
.productFamily .specialOffer .priceArea { z-index: 2; left: 0;  position: absolute; top: 4em; float: left; } 
.productFamily .specialOffer h3 {  margin: 0; height: 3em; float: left; } 
.productFamily .priceArea input{ width: 2em; text-align: center; margin: 0;} 
.productFamily .frmButton { width: 340px; text-align: right; }
.productFamily .frmButton span { color: #FB0204; font-size: 14px; margin-right: 1em; font-weight: bold;  }
.productFamily .frmDropBox { width: 340px; text-align: right; margin:0 0 4px 0; }
.productFamily select { width: 180px; margin: 0; padding: 0; padding: 0;} 
.productFamily label, .formatOptions label { display: none; } 
.productFamily .price { font-size: 112%; font-weight: bold; width: 6em; float: left; text-align: left; padding-left: 1.2em;}
.productFamily .specialOffer .price { width: 9em; } 
.productFamily .specialOffer h3 {  height: 2em; padding-left: 1.2em; padding-top: 1em;}
.productFamily .specialOffer h3 span { font-size: 116%; color: #FB0204; }
.productFamily .specialOffer .offerArea {float: right; padding-right: 1em; position: absolute; top: 2.4em; right: 0em;}
.productFamily .type { position: absolute; float: left; top: 5px; left: 1em; font-weight: bold; color: #FB0204; font-size: 16px; margin-right: 1em;  height: 3em; text-align: left; } 
.productFamily .specialOffer .offerInfo {font-weight: bold; padding-top: 5px;}
.productFamily .specialOffer .offerInfo span {display: block; text-align: center; font-size: 1.15em;}
.productFamily .specialOffer .offerPrice {float: left; position: absolute; top: 0; width: 11em; }
.productFamily .specialOffer .offerPrice span {font-size: 1.1em; font-weight: bold; color: #c00;}
.productFamily .specialOffer .sponsorOffer {text-align: center; font-size: 1.1em;}
.productFamily .specialOffer .sponsorOffer p span {color: #c00; font-weight: bold;}


/* Long Description */
.pageContent .productFamily div { margin-bottom: 0em; }
.pageContent .contentBox { padding: 0.2em 0.6em; } 
.productPage .pageContent .stateClosed .cbContent { visibility: visible; height: 6em; }
.productPage .pageContent  .showHide { text-align:right; margin: 0; display: block; line-height: 0;   }
.productPage .pageContent .stateClosed .showLess,  .productPage .stateOpen .showMore  { display: none;  }
.productPage .contentBox h2 { background: none; border: none; font-size: 16px; font-family: arial,helvetica,clean,sans-serif; font-weight: bold; } 

/* Attributes Tab Portal */
.tabPortal { position: relative;  background: #fff; overflow: hidden; height: 310px; width: 100%; border-bottom: 1px solid #c7c7c7; }}
.tabPortal .portalNav { position: relative; z-index: 1; background: #fff; width: 100%;border-bottom: 1px solid #c7c7c7; }
.tabPortal .portalNav { float: left; margin: 0;}
.tabPortal .portalNav li a { top: 1px; position: relative; line-height: 1.6em;  color: #000; width: 135px;  height: 25px; display: block; float: left; background: url(/Images/Layout/tabPortalTabs.png) 0px -25px no-repeat; margin: 0; text-align: center; }
.tabPortal .portalNav li a:hover { background-position: 0px 0px; text-decoration: none; }

.tabPortal .viewPortal { height: 290px; border: 1px solid #c7c7c7; overflow: hidden; clear: both; } 
.tabPortal .portalList { position: relative; top: 0px; }
.tabPortal .portalContent {  height: 290px; background: #fff; margin: 0 1em; }
.tabPortal .portalContent li {list-style: square outside; display: list-item; margin: 0 0 0 1.2em;  } 
.tabPortal .portalContent h2 { padding-top: 0.5em; margin: 0;  } 
.tabPortal .portalContent table { margin: 1em 2px;  font-size: 80%; } 
.tabPortal .portalContent td { padding: 0.2em; } 
.viewPortal div { margin: 0; } 

/* Copied from homepage.css as we now need these for upselling-cross-selling */
.productList a, .productList a:visited { text-decoration: none; text-align: center; }
.productList a:hover span { text-decoration: underline; } 

.productList span { width: 100%; }
.productList .price, .productList .specialPrice { font-weight:bold;} 
.productList img { margin-left: 35px;  }
.productList span { display: block; clear: both; text-align: center;  } 
.productList input { clear: both; display: block;  margin: 0 auto;  } 
.productList h3 { text-align: center; margin: 0; } 
.productList .perContainer { height: 1.2em ; } 
.productList .deal { height: 4em; } 
.productList input {margin-bottom: 10px;}

/* Push the special offer select boxes down so they do not clash with the offer detail */
.productFamily .specialOffer h3 {  height: 3em; padding-left: 1.2em; }

/* Prevent overlaps on view all stopping user from getting to dropdown */
.offerDropBox select {width: 14em;}

.discontinuedHead {text-align: center; color: #cc0000; margin-top:0.3em;}

.detailAnchors li a {padding-right: 3em;}
.toTopLink {display: none; text-align: right;}

.offerSaving { font-weight: bold; font-size:108%;   } 
.offerSaving s { color: #c00; } 

/* Push the tables across a bit so the left border is displayed on all browsers */
#familyDescription .cbContent table {margin-left: 0.5em;}

.stockStatus { clear: both; text-align: center; position: absolute; bottom: 0em; width: 29em; }
.stockMailLink { clear: both; text-align: center; position: absolute; bottom: -1.15em; width: 29em; font-weight: bold; }
p.stockStatus .outOfStock { color: #c00; } 

/* 20 percent offer */
.twentyInfo {width: 715px; border: 1px solid #c7c7c7; padding: 5px; background: #fffdd6; color: #c53531;}
.twentyInfo p {text-align: center; font-weight: bold; font-size: 0.9em; padding: 0; margin: 0;}
.offerTwenty {background-color: #ffa;}

#content .videoObject {  
  border: 1px solid #ccc;
  height: 200px;
  overflow: hidden;
  background: #E7E7E7 url(/Images/Video/prodvidboxbg.jpg);
  position: relative; 
}
#content .videoObject div { padding: 0px; margin: 0px; } 
#content .videoObject h2 { line-height: 2em; } 
#content .videoObject .mainVideo {
  display: block;
  width: 314px;
}
#content .videoObject .videoList { 
  position: absolute; 
  right: 0px; 
  top: 0px; 
  width: 398px;
  height: 200px; 
}
#content .videoObject .videoList .videoListNav { 
  height: 170px;   
  position: absolute; 
  bottom: 0px;
  overflow: auto; 
  width: 99.99%;
  right: 0;
}
#content .videoListNav li { 
  height: 85px;
  width: 368px; 
  overflow: hidden; 
  display: block; 
}

#content .videoListNav h3 { 
  position: absolute; 
  left: 110px; 
}

#content .videoListNav p { 
  float: left;   
  padding-top: 18px; 
}
#content .videoListNav .inMainView { display: none; } 

#content .videoListNav img { 
  float: left; 
  margin-right: 8px; 
  position: relative; 
  top: -18px;
}
#content .videoListNav a { color: #000; } 

.productList a:hover span { text-decoration: underline; }
.productList span { width: 100%; display: block; clear: both; text-align: center;}
.productList .price, .productList .specialPrice { font-weight:bold;} 
.productList img { margin-left: 0; width: 110px;}
.productList .upsellImage { margin-left: 65px;  }
.productList input { width: 6em; } 
.productList h3 { text-align: center; margin: 0; } 
.productList .perContainer { height: 1.2em ; } 
.productList .deal { height: 4em; } 

#content div.productOffer { position: relative; height: 2em; line-height: 2em; margin-bottom: 0.6em; } 
#content div.productOffer p { margin: 0; padding: 0; } 
#content div.productOffer form input { float: left; position: absolute; right: 0.8em; top: 0.3em; } 
#content div.productOffer span { font-weight: bold; } 
div.offerExpired span { color: #c00; } 
div.offerExpired a { text-decoration: line-through; }