@charset "utf-8";


.scroller-blocker {
  position: fixed;
  height: 100%;
}

/* delete if not needed
.parent {
  height: 100%;
  outline: 1px solid red;
}
*/

.vertical-text {
  writing-mode: vertical-rl; /* or vertical-lr for left-to-right */
  text-orientation: sideways;
  position: absolute; /* fixed or absolute */
  /*top: 52px;*/
  right: 0; /* Adjust as needed for desired placement */
  z-index: 101; /* A high value to ensure it's on top */
  background-color: #fbb;
  font-size: 18px; 
  font-weight: bold;
  color: #363;
  opacity: 60%;
}

.help1 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help1:hover {
  display: block;
}
.itemButton1 .openhelp1 {
  text-decoration: none;
  color: #f00;
  display: block;
}
.itemButton1:target .openhelp1 {
  display: none;
}
.openhelp1:hover + .help1 {
  display: inline-block;
}
.itemButton1:target .help1 {
  display: block};

.itemButton1 .closehelp1 {
  display: none;
  text-decoration: none;
  color: #0f0;
}
.itemButton1:target .closehelp1 {
  display: block;
}

.help2 {
  display: none;
  position:absolute;
  left: 200px;
  top: 200px;
}
.help2:hover {
  display: block;
}
.itemButton2 .openhelp2 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton2:target .openhelp2 {
  display: none;
}
.openhelp2:hover + .help2 {
  display: inline-block;
}
.itemButton2:target .help2 {
  display: block;
}
.itemButton2 .closehelp2 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton2:target .closehelp2 {
  display: block;
}

.help3 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help3:hover {
  display: block;
}
.itemButton3 .openhelp3 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton3:target .openhelp3 {
  display: none;
}
.openhelp3:hover + .help3 {
  display: inline-block;
}
.itemButton3:target .help3 {
  display: block;
}
.itemButton3 .closehelp3 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton3:target .closehelp3 {
  display: block;
}

.help4 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help4:hover {
  display: block;
}
.itemButton4 .openhelp4 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton4:target .openhelp4 {
  display: none;
}
.openhelp4:hover + .help4 {
  display: inline-block;
}
.itemButton4:target .help4 {
  display: block;
}
.itemButton4 .closehelp4 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton4:target .closehelp4 {
  display: block;
}

.help5 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help5:hover {
  display: block;
}
.itemButton5 .openhelp5 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton5:target .openhelp5 {
  display: none;
}
.openhelp5:hover + .help5 {
  display: inline-block;
}
.itemButton5:target .help5 {
  display: block;
}
.itemButton5 .closehelp5 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton5:target .closehelp5 {
  display: block;
}

.help6 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help6:hover {
  display: block;
}
.itemButton6 .openhelp6 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton6:target .openhelp6 {
  display: none;
}
.openhelp6:hover + .help6 {
  display: inline-block;
}
.itemButton6:target .help6 {
  display: block;
}
.itemButton6 .closehelp6 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton6:target .closehelp6 {
  display: block;
}

.help7 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help7:hover {
  display: block;
}
.itemButton7 .openhelp7 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton7:target .openhelp7 {
  display: none;
}
.openhelp7:hover + .help7 {
  display: inline-block;
}
.itemButton7:target .help7 {
  display: block;
}
.itemButton7 .closehelp7 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton7:target .closehelp7 {
  display: block;
}

.help8 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help8:hover {
  display: block;
}
.itemButton8 .openhelp8 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton8:target .openhelp8 {
  display: none;
}
.openhelp8:hover + .help8 {
  display: inline-block;
}
.itemButton8:target .help8 {
  display: block;
}
.itemButton8 .closehelp8 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton8:target .closehelp8 {
  display: block;
}


.help9 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help9:hover {
  display: block;
}
.itemButton9 .openhelp9 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton9:target .openhelp9 {
  display: none;
}
.openhelp9:hover + .help9 {
  display: inline-block;
}
.itemButton9:target .help9 {
  display: block;
}
.itemButton9 .closehelp9 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton9:target .closehelp9 {
  display: block;
}

.help10 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help10:hover {
  display: block;
}
.itemButton10 .openhelp10 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton10:target .openhelp10 {
  display: none;
}
.openhelp10:hover + .help10 {
  display: inline-block;
}
.itemButton10:target .help10 {
  display: block;
}
.itemButton10 .closehelp10 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton10:target .closehelp10 {
  display: block;
}


.help11 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help11:hover {
  display: block;
}
.itemButton11 .openhelp11 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton11:target .openhelp11 {
  display: none;
}
.openhelp11:hover + .help11 {
  display: inline-block;
}
.itemButton11:target .help11 {
  display: block;
}
.itemButton11 .closehelp11 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton11:target .closehelp11 {
  display: block;
}


.help12 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help12:hover {
  display: block;
}
.itemButton12 .openhelp12 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton12:target .openhelp12 {
  display: none;
}
.openhelp12:hover + .help12 {
  display: inline-block;
}
.itemButton12:target .help12 {
  display: block;
}
.itemButton12 .closehelp12 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton12:target .closehelp12 {
  display: block;
}

.help13 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help13:hover {
  display: block;
}
.itemButton13 .openhelp13 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton13:target .openhelp13 {
  display: none;
}
.openhelp13:hover + .help13 {
  display: inline-block;
}
.itemButton13:target .help13 {
  display: block;
}
.itemButton13 .closehelp13 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton13:target .closehelp13 {
  display: block;
}

.help14 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help14:hover {
  display: block;
}
.itemButton14 .openhelp14 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton14:target .openhelp14 {
  display: none;
}
.openhelp14:hover + .help14 {
  display: inline-block;
}
.itemButton14:target .help14 {
  display: block;
}
.itemButton14 .closehelp14 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton14:target .closehelp14 {
  display: block;
}

.help15 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help15:hover {
  display: block;
}
.itemButton15 .openhelp15 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton15:target .openhelp15 {
  display: none;
}
.openhelp15:hover + .help15 {
  display: inline-block;
}
.itemButton15:target .help15 {
  display: block;
}
.itemButton15 .closehelp15 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton15:target .closehelp15 {
  display: block;
}

.help16 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help16:hover {
  display: block;
}
.itemButton16 .openhelp16 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton16:target .openhelp16 {
  display: none;
}
.openhelp16:hover + .help16 {
  display: inline-block;
}
.itemButton16:target .help16 {
  display: block;
}
.itemButton16 .closehelp16 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton16:target .closehelp16 {
  display: block;
}

.help17 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help17:hover {
  display: block;
}
.itemButton17 .openhelp17 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton17:target .openhelp17 {
  display: none;
}
.openhelp17:hover + .help17 {
  display: inline-block;
}
.itemButton17:target .help17 {
  display: block;
}
.itemButton17 .closehelp17 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton17:target .closehelp17 {
  display: block;
}

.help18 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help18:hover {
  display: block;
}
.itemButton18 .openhelp18 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton18:target .openhelp18 {
  display: none;
}
.openhelp18:hover + .help18 {
  display: inline-block;
}
.itemButton18:target .help18 {
  display: block;
}
.itemButton18 .closehelp18 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton18:target .closehelp18 {
  display: block;
}

.help19 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help19:hover {
  display: block;
}
.itemButton19 .openhelp19 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton19:target .openhelp19 {
  display: none;
}
.openhelp19:hover + .help19 {
  display: inline-block;
}
.itemButton19:target .help19 {
  display: block;
}
.itemButton19 .closehelp19 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton19:target .closehelp19 {
  display: block;
}

.help20 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help20:hover {
  display: block;
}
.itemButton20 .openhelp20 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton20:target .openhelp20 {
  display: none;
}
.openhelp20:hover + .help20 {
  display: inline-block;
}
.itemButton20:target .help20 {
  display: block;
}
.itemButton20 .closehelp20 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton20:target .closehelp20 {
  display: block;
}

.help21 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help21:hover {
  display: block;
}
.itemButton21 .openhelp21 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton21:target .openhelp21 {
  display: none;
}
.openhelp21:hover + .help21 {
  display: inline-block;
}
.itemButton21:target .help21 {
  display: block;
}
.itemButton21 .closehelp21 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton21:target .closehelp21 {
  display: block;
}

.help22 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help22:hover {
  display: block;
}
.itemButton22 .openhelp22 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton22:target .openhelp22 {
  display: none;
}
.openhelp22:hover + .help22 {
  display: inline-block;
}
.itemButton22:target .help22 {
  display: block;
}
.itemButton22 .closehelp22 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton22:target .closehelp22 {
  display: block;
}

.help23 {
  display: none;
  position:absolute;
  left: 200px;
  top:200px;
}
.help23:hover {
  display: block;
}
.itemButton23 .openhelp23 {
  text-decoration: none;
  color: #000;
  display: block;
}
.itemButton23:target .openhelp23 {
  display: none;
}
.openhelp23:hover + .help23 {
  display: inline-block;
}
.itemButton23:target .help23 {
  display: block;
}
.itemButton23 .closehelp23 {
  display: none;
  text-decoration: none;
  color: #000;
}
.itemButton23:target .closehelp23 {
  display: block;
}

#infoBtn { /* this allows the itemInfoPopup to display when the infoBtn (e.g. "Energy Mugs") is hit */
  display: none;
}
.itemBtn { /* , .ttdMobile:visited { */
  position:relative;
  display:block;
  left:2px;
  float:left; /* now mie all ttds move over right 8px when 1 hovered over - better than just 1 */
  width:19em; /* ori 18 width of title bac rect of each product on left side of screen */
  border:1px solid #ebebf0;
  font-family:arial,verdana,sans-serif;
  font-size:12px; /* size of font title */
  text-align:center;
  text-decoration:none;
  font-weight:bold;
  background:#0d2222; /* main background of product listing links now dark blue-green was red dd2222 */
  color:#b2c1f9; /* title text color */
  padding:0.15em;
}
.itemBtn: hover { /* color of product text title when mouse over (hovered) */
 background:#ddd;
 color:#668; /* title text hovered color */
 border:1px solid #808;
}
.itemInfoPopup{ 
 display: none;
}
.itemBtn:hover .itemInfoPopup{
 display : block;
}
.itemImg {
 border:1px solid #000;
 float:right;
 margin:0.25em 1em 0.5em 0.6em;
 background:#55c;
}

/* Level 2 is 2nd nested raised cube popup. Same as above (level 1) but need as when 'hover'ing over level 1, it's now 'hover'ing 
   and Level 1 is already 'hover'ing so Level 2 popup will also show !! */
.itemBtnLevel2 { 
  position:absolute;
  display:block;
  left:2px;
  float:right;
  /* width:19em; ori 18 width of title bac rect of each product on left side of screen */
  border:1px solid #ebebf0;
  font-family:times-new-roman,arial,verdana,sans-serif;
  font-size:12px;
  font-weight:bold;
  text-align:center;
  font-style:italic;
  background:#dd2222; /* main background of product listing links now dark blue-green 0d2222 was red  */
  color:#fff; /* now lt yellow, was lt blue b2c1f9 title text color */
  padding:0.3em;
  white-space:wrap;
}
.itemInfoPopupLevel2{ 
 display: none;
}
.itemBtnLevel2:hover .itemInfoPopupLevel2{
 display : block;
}
.itemBtnLevel2: hover { /* color of product text title when mouse over (hovered) */
 background:#ddd;
 color:#668; /* title text hovered color */
 border:1px solid #808;
}

.txt {
  background-color: #ccc;
  color: #007;
  display: block;
  font-family:arial,verdana,sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 1;
  margin: 0;
  padding: 24px 12px 12px 14px; /* top rit bot left*/
  text-align: left;
  text-indent: 12px;
  border-left:1px solid #fff;
  border-right:1px solid #888;
  overflow:auto; /* puts scroll bar when txt too long to fit in rise box in ff or smaller resolustion screens */
}
.txt1 { /*lower down for 2 lines of title*/
  background: #ccc;
  color: #007;
  display: block;
  font-family:arial,verdana,sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 1;
  margin: 0;
  padding: 40px 12px 12px 14px;/* top rit bot left*/
  text-align: left;
  text-indent: 12px;
  overflow-y: hidden; /* don't show content that exceeds my height
   !! without this overflow-y:hidden, it will show screen widgets, like radios, under txt if text is smaller vertically than images
   (lower z-index will show thru!)  */
}
  border-left:1px solid #fff;
  border-right:1px solid #888;
}
.txt2 {
  background: #ccc;
  color: #007;
  display: block;
  font-family:arial,verdana,sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 1;
  margin: 0;
  padding: 3 12 12 54;/* top rit bot left*/
  text-align: left;
  text-indent: 12px;
  border-left:1px solid #fff;
  border-right:1px solid #888;
}

.dragHandle { /* styling for how popup will be dragged (The handle) */
 position:absolute;
 top:4px;
 left:0px;
 right:70px;
 height:35px;
 padding:0px 0px 6px 6px;
 background-color: transparent;
 color:#108;
 font-size:1.22em;
 font-weight:bold;
 font-family:arial,verdana,sans-serif;
 white-space:nowrap;
 cursor:move;
 text-align:center;
 width:100%;
 float:right;
 .dragHandleContent {
    /* Styles for the dragHandle content area */
    position: relative; /* For positioning the close button */
    .dragHandleCloseBtn {
      /* Styles for the close button */
      position: absolute;
      top: 2px;
      left: 7px;
      /*
      background: none;
      border: none;
      font-size: 22px;
      */
      cursor: pointer;
      width:26px;
      height:26px;
      border-radius:10px;
      font-size:26px;
      color:#222;
      line-height:20px;
      text-align:center;
      background:#0f0

    }
  }
}


.isResizable { /* styling for shop_cart */
 /* background: rgba(20, 20, 255, 0.02); */
 color: rgb(0,0,255);
 position:fixed;
 top:156px;
 right:12px;
 width:315px;
 max-width:315px;
 min-height: 64px;
 max-height: 900px;
 /* to make better/wider raised area, comment out next line which will allow for expanding cart down vertically 
    automatically when adding more items. And then have to remove the drag-down w/mouse visual handle in order.js
    But use it to expand cart manually w/drag down mouse image and all <div id='resizeHandle'></div> / 
    resizeHandleFrame/resizeHandleCursor/frameInner/onMouseEnter/onMouseLeave/onMouseDown/onMouseUp statements in order.js */
 /* overflow:hidden; */
 z-index:103;
 padding-right:3px;
 padding-top:10px;
 display:inline-block;
}

#resizeHandle {
 background-image: url(http://golfcalc.com/energymugs/secure_order/images/resizeGrabber.gif);
 background-repeat:no-repeat;
 position:absolute;
 bottom:-6px;
 margin-bottom:16px;
 right:0px;
 height: 30px;
 width: 30px;
 display:block;
 /*pointer-events:none;*/
 z-index:103;
}
#resizeHandleFrame {
 position:absolute;
 bottom:0px;
 right:10px;
 background: transparent;
 height: 20px;
 width: 18px;
 z-index:101;
/* pointer-events:none;*/
}
#resizeHandleCursor{
 background-image: url(http://golfcalc.com/energymugs/secure_order/images/resizeGrabber_hover1.gif);
 background-repeat:no-repeat;
 position:absolute;
 bottom:3px;
 right:8px;
 padding-bottom:4px;
 height:22px;
 width:9px;
 z-index:105;
/* pointer-events:none;*/
 z-index:104;
 display:none;
}

.raisedCubeTopRetail {
 top: 27px;
}
.raisedCubeTopWholesale {
 top: 47px;
}
.raisedCube {  /* from http://sam-morrow.com/playground/css-cubes.py for item description popup */
 background-color: rgba (187, 187, 187, 1.0)
 margin: 20px;

/* padding: 10px; */
/* don't need any of these widths to expand to content now that the width is hardcoded in order.js <span class='raisedCube' id='itemInfoPopup' style='width:"
 width: intrinsic;           / * Safari/WebKit uses a non-standard name * /
 width: -moz-max-content;    / * Firefox/Gecko * /
 width: -webkit-max-content; / * Chrome * /
 width: -o-max-content;
*/

 pointer-events:auto;
 float:left;
 position:absolute;
 left:10px;
 right:22px;
/* top:2px;*/
 z-index:100;
  
 box-shadow:  0px 1px 1px 0px rgb(0, 0, 0),
	 0px 2px 1px 1px rgb(179, 179, 179),
	 0px 3px 1px 1px rgb(175, 175, 175),
	 0px 4px 1px 2px rgb(171, 171, 171),
	 0px 5px 1px 2px rgb(167, 167, 167),
	 0px 6px 1px 3px rgb(163, 163, 163),
	 0px 7px 1px 3px rgb(159, 159, 159),
	 0px 8px 1px 4px rgb(155, 155, 155),
	 0px 9px 1px 4px rgb(151, 151, 151),
	 0px 10px 1px 5px rgb(147, 147, 147),
	 0px 11px 1px 5px rgb(143, 143, 143),
	 0px 12px 1px 6px rgb(139, 139, 139),
	 0px 13px 1px 6px rgb(135, 135, 135),
	 0px 14px 1px 7px rgb(131, 131, 131),
	 0px 15px 1px 7px rgb(127, 127, 127),
	 0px 16px 1px 8px rgb(123, 123, 123),
	 0px 17px 1px 8px rgb(119, 119, 119),
	 0px 18px 1px 9px rgb(115, 115, 115),
	 0px 19px 1px 9px rgb(111, 111, 111),
	 0px 20px 1px 10px rgb(107, 107, 107),
	 0px 21px 1px 10px rgb(103, 103, 103),
	 0px 22px 1px 11px rgb(99, 99, 99),
	 0px 23px 1px 11px rgb(95, 95, 95),
	 0px 24px 1px 12px rgb(91, 91, 91),
	 0px 25px 1px 12px rgb(87, 87, 87),
	 0px 26px 1px 13px rgb(83, 83, 83),
	 0px 27px 1px 13px rgb(79, 79, 79),
	 0px 28px 1px 14px rgb(75, 75, 75),
	 0px 29px 1px 14px rgb(71, 71, 71),
	 0px 30px 1px 15px rgb(67, 67, 67),
	 0px 31px 1px 15px rgb(63, 63, 63),
	 0px 32px 1px 16px rgb(59, 59, 59),
	 0px 33px 1px 16px rgb(55, 55, 55),
	 0px 34px 1px 17px rgb(0, 0, 0);
 

/*  <!--[if IE]> */
    border: 8px solid #bfd3fb;
/*  <![endif]-->  */

/*    border-stye: ridge 8px solid #bfd35b;  for all brows 
    border: 2px solid #000; */

    padding: 4px;
    background: #091eb9;
    3px solid #991130; /* this, ori dark red, but without this, it's a nice light, broader blue border: */


}

}
}





.sweetAlertAlt {
	position: fixed;
	font-family:arial,verdana,sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
	background: rgba(0,0,0,0.6);
	z-index: 101;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}
.sweetAlertAlt:target { /* ie. hover */
	opacity:1;
	pointer-events: auto;
}
/*ok but to change dynamically via jquery, use the below .modalDialogDiv   .sweetAlertAlt > div {*/
.sweetAlertAltText {
	width: 500px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}
.sweetAlertAltClose {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
	}
.sweetAlertAltClose:hover { background: #00d9ff; }


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 200px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
  background-color: #ffff00;
  font-size: 12px;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 400px;
}
/* The Close Button */
.closeSweetAlertAlt {
  display: none;
  color: #aaaaaa;
  float: right;
  font-size: 36px;
  font-weight: bold;
}
.closeSweetAlertAlt:hover,
.closeSweetAlertAlt:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}





/* LifeWave formatting */

.txtInput{
  height:17px;
  font-size:12px;
}
table.lifewaveLayout {
  background-color:#bbb; /* deepest under product row, includes all space */
  color:#002;
  float:left;
}
#lwtd {
  text-align:center;
  font-size:12pt;
  background-color:#faa; /* under product row toward middle space */
}
#lwfact {
 text-align:right;
 float:right;
 color:#a00;
 background-color:#77a;
 width:26px;
 height:24px;
 border:1 dashed #993;
 margin-left:5px;
 cursor:pointer;
 padding-right:10px;
}



/* ****** CheckBox Squared Styles ************* */

/* SQUARED  */
.check_ship_type {
	position: relative; left:2px; /* position of checkbox relative to text */
	width: 370px;
	height: 28px;

	background: #fcfff4;

	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
	margin: 3px auto;


	-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);


}



.check_ship_type label {
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;
	left: 4px;
	top: 3px;

	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

	background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
	background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
	background: -o-linear-gradient(top, #222 0%, #45484d 100%);
	background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
	background: linear-gradient(top, #222 0%, #45484d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.check_ship_type label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 12px;  /* ori 9px, this is width of the check */
	height: 5px;
	background: transparent;
	top: 3px;
	left: 4px;
	border: 3px solid #cfe3fb;  /* ori white #fcfff4; */
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.check_ship_type label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}
.check_ship_type input[type=checkbox]:checked + label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

/* ****** End CheckBox Squared Style ************* */


/* styles for order.php for drop-down ref select boxes */
#text_ref_drop_down_other {
    display:none;
}
#text_ref_drop_down_dist_num {
    display:none;
}


/* put border around the old plastic and new glass products */
.border-around-ori-plastic {
 outline: 2px ridge blue;
 outline-width: 2px;
 z-index: 9999;
}
.border-around-new-glass {
 outline: 1px groove #3f3;
 outline-width: 2px;
 z-index:-19999;
}
.border-around-dkit {
 outline: 1px groove #ff3;
 outline-width: 2px;
 z-index:-19999;
}


.radio_txt_width {
 float:right;
 text-align:right;
 font-size:11px;
}




.glass_txt_width {
 float:left;
 text-align:left;
 font-size:15px;
}


/* highlight checked (the active) radio buttons */
.activeRadio_wOval {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: #0030ff;
 min-width: 1em;
 height:16px;
 max-height:16px;
 border-radius: 43%;
 vertical-align: bottom;
 background-color: #ff8888;
}
.radio_12mil {
 font-weight: bold;
 font-style: italic;
 color: #6f2098;
}
/* oval expand-with-content backgrounds for item retail price that was just added to cart */
.oval {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #555;
  color: yellow;
  min-width: 1em;
  height:12px;
  max-height:12px;
  border-radius: 33%; /* ori 50 */
  vertical-align: middle;
}
.oval:before {
  content:'';
  float: left;
  width: auto;
  padding-bottom: 100%;
}