/* ---- demos ---- */
.chkbtn{
display:inline-block;
margin-left:5px;
margin-bottom:10px;
color:#ffffff;
height:25px;
background-color: #49afcd;
background-repeat: repeat-x;
border-radius:4px;
background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.demo {
  margin-bottom: 0.8em;
}

.demo .isotope,
.demo.isotope {
  border: 2px solid #484542;
  background: hsla(0, 0%, 0%, 0.15);
}

/* horizontal examples need height */
.isotope.horizontal {
  height: 334px;
}

.demo .button {
  margin-bottom: 0.8em;
}


/* clearfix */
.isotope:before,
.isotope:after {
  content: " ";
  display: table;
}

.isotope:after {
  clear: both;
}


/* ---- item elements ---- */

.element-item {
  position: relative;
  float: left;
  width: 162px;
  height: 300px;
  margin: 5px;
  padding: 10px;
  background: #ffffff;
  /*color: #262524;*/
}

.element-item > * {
  margin: 0;
  padding: 0;
}

.element-item .name {
  position: absolute;

  left: 10px;
  top: 60px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: normal;
}

.element-item .symbol {
  position: absolute;
  left: 10px;
  top: 0px;
  font-size: 42px;
  font-weight: bold;
  color: white;
}

.element-item .number {
  position: absolute;
  right: 8px;
  top: 5px;
}

.element-item .weight {
  position: absolute;
  left: 10px;
  top: 76px;
  font-size: 12px;
}

.element-item.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
.element-item.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
.element-item.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
.element-item.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
.element-item.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
.element-item.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.element-item.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
.element-item.diatomic        { background: #00F; background: hsl( 252, 100%, 50%); }
.element-item.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
.element-item.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }

/* varying sizes */
.is-varying-sizes .element-item.width2 { width: 210px; }
.is-varying-sizes .element-item.height2 { height: 210px; }

/* ---- mini items ---- */

.item,
.mini-item {
  float: left;
  width: 50px;
  height: 50px;
  background: #e6e5e4;
  border: 2px solid #b6b5b4;
  border-color: hsla(0, 0%, 0%, 0.4);
}

.mini-item.w2 { width: 100px; }
.mini-item.h2 { height: 100px; }

.mini-item.w3 { width: 150px; }
.mini-item.h3 { height: 150px; }

.mini-item.gigante {
  width: 150px;
  height: 200px;
}

.clickable .mini-item:hover {
  border-color: #28F;
  background: #8CF;
  cursor: pointer;
}


/* ----  ---- */

.rainbowed > *:nth-child(10n+0) { background: hsl(   0, 100%, 50%); }
.rainbowed > *:nth-child(10n+1) { background: hsl(  36, 100%, 50%); }
.rainbowed > *:nth-child(10n+2) { background: hsl(  72, 100%, 50%); }
.rainbowed > *:nth-child(10n+3) { background: hsl( 108, 100%, 50%); }
.rainbowed > *:nth-child(10n+4) { background: hsl( 144, 100%, 50%); }
.rainbowed > *:nth-child(10n+5) { background: hsl( 180, 100%, 50%); }
.rainbowed > *:nth-child(10n+6) { background: hsl( 216, 100%, 50%); }
.rainbowed > *:nth-child(10n+7) { background: hsl( 252, 100%, 50%); }
.rainbowed > *:nth-child(10n+8) { background: hsl( 288, 100%, 50%); }
.rainbowed > *:nth-child(10n+9) { background: hsl( 324, 100%, 50%); }

/* ---- individual demos ---- */

/* flexible 5 columns */
.flex-5-col .grid-sizer,
.flex-5-col .mini-item { width: 20%; }
.flex-5-col .mini-item.w2 { width: 40%; }
.flex-5-col .gutter-sizer { width: 5%; }

/* masonry gutter */
.masonry-gutter .mini-item.w2 { width: 110px; }

/* masonry bottom spaced */
#masonry-bottom-spaced .mini-item {
  margin-bottom: 10px;
}
#masonry-bottom-spaced .mini-item.h2 {
  height: 110px;
}

/* flexible 4 columns w/ gutter */
.flex-4-col-gutter .grid-sizer,
.flex-4-col-gutter .mini-item { width: 22%; }
.flex-4-col-gutter .mini-item.w2 { width: 48%; }
.flex-4-col-gutter .gutter-sizer { width: 4%; }

/* masonry flex gutter */
#masonry-flex-gutter .gutter-sizer {
  width: 3%;
}

#masonry-horizontal-right-spaced .mini-item {
  margin-right: 10px;
}

/* ---- fit width ---- */

#masonry-fit-width {
  border: 2px solid white;
}

/* center container with CSS */
#masonry-fit-width .isotope {
  margin: 10px auto;
}

/* ---- cells-by-row-element-sizing ---- */

.cells-by-row-element-sizing .mini-item { width: 10.5%; }

.cells-by-row-element-sizing .mini-item.w2 { width: 23%; }

.cells-by-row-element-sizing .grid-sizer {
  width: 25%;
  height: 110px;
}

/* ---- cells-by-column-element-sizing ---- */

.cells-by-row-column-sizing .mini-item { height: 10.5%; }

.cells-by-row-column-sizing .mini-item.w2 { height: 23%; }

.cells-by-row-column-sizing .grid-sizer {
  width: 110px;
  height: 25%;
}

/* ---- counting ---- */

.isotope.counting {
  counter-reset: item;
}

.isotope.counting .mini-item:before,
.isotope.counting .item:before {
  counter-increment: item;
  content: counter(item);
  display: block;
  color: #555;
  padding-top: 0.2em;
  text-align: center;
  font-size: 18px;
}

/* ---- measurement demos ---- */

#gutter-opt-demo2 .item {
  margin-bottom: 10px;
}

/* responive column width */
#column-width-demo2 .grid-sizer { width: 20%; }
#column-width-demo2 .item { width: 20%; }
#column-width-demo2 .item.w2 { width: 40%; }

#row-height-demo2 .grid-sizer {
  height: 60px;
}

#gutter-opt-demo3 .gutter-sizer {
  width: 3%;
}

/* ---- stamp ---- */

.has-stamp {
  position: relative;
}

.demo .stamp {
  position: absolute;
  width: 30%;
  height: 60px;
  background: orange;
  border: 4px dotted black;
}

#stamp-opt-demo .stamp1 {
  left: 30%;
  top: 10px;
  width: 20%;
  height: 100px;
}

#stamp-opt-demo .stamp2 {
  right: 10%;
  top: 20px;
  width: 70%;
  height: 30px;
}

#stamp-demo .stamp {
  right: 10%;
  top: 10px;
  width: 35%;
  height: 70px;
}

#stamp-demo .mini-item { opacity: 0.8; }

/* ---- clickable ---- */

.clickable .item:hover {
  border-color: white;
  background: #A2C;
  cursor: pointer;
}

/* ---- vertical table-like ---- */

.table-like {
  list-style: none;
  margin: 0;
  padding: 0;
}

.table-like > li {
  width: 100%;
  clear: both;
  border-top: 1px solid;
  border-color: hsla(0, 0%, 100%, 0.2);
}

/* clearfix */
.table-like > li:after {
  display: block;
  content: '';
  clear: both;
}

.table-like > li > * {
  float: left;
  padding: 2px 4px;
}

.table-like .name { width: 30%; }
.table-like .symbol { width: 10%; }
.table-like .weight { width: 15%; }
.table-like .number { width: 10%; }
.table-like .category { width: 20%; }

/* ----  ---- */

#fit-columns-feature-demo {
  height: 448px;
}

/* ---- insert-demo ---- */

#insert-demo .mini-item .number {
  padding: 0px;
  font-size: 24px;
  font-weight: bold;
  color: #777;
  text-align: center;
  line-height: 50px;
}

/* ---- multiple-sort-by ---- */

#multiple-sort-by-demo .mini-item .number {
  font-size: 50px;
  font-weight: 600;
  color: #222;
  padding-top: 0.1em;
  text-align: center;
}

#multiple-sort-by-demo [data-color="blue"] { background: blue; }
#multiple-sort-by-demo [data-color="red"] { background: red; }
#multiple-sort-by-demo [data-color="yellow"] { background: yellow; }

/* ---- animate-item-size ---- */

/* item is invisible, but used for layout */
.isotope.animate-item-size-demo .item,
.isotope.animate-item-size-demo .item-content {
  width: 60px;
  height: 60px;
}

.isotope.animate-item-size-demo .item {
  border: none;
  background: transparent;
}

/* item-content is visible, and transitions size */
.animate-item-size-demo .item-content {
  width: 60px;
  height: 60px;
  background: #8DF;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  -webkit-transition: width 0.4s, height 0.4s;
	 -moz-transition: width 0.4s, height 0.4s;
	   -o-transition: width 0.4s, height 0.4s;
		  transition: width 0.4s, height 0.4s;
}

.animate-item-size-demo .item:hover .item-content {
  border-color: white;
  background: #4BF;
}

/* both item and item content change size */
.animate-item-size-demo .item.is-expanded,
.animate-item-size-demo .item.is-expanded .item-content {
  width: 180px;
  height: 120px;
}

.animate-item-size-demo .item.is-expanded {
  z-index: 2;
}

.animate-item-size-demo .item.is-expanded .item-content {
  background: #F90;
}


/* ---- animate item size responsive ---- */

#animate-item-size-responsive .item,
#animate-item-size-responsive .grid-sizer {
  width: 20%;
}

#animate-item-size-responsive .item-content {
  width:  100%;
  height: 100%;
}

/* item has expanded size */
#animate-item-size-responsive .item.is-expanded {
  width: 60%;
}

/* ---- combination filters ---- */

.ui-group {
  display: inline-block;
}

.ui-group h3 {
  display: inline-block;
  vertical-align: top;
  line-height: 36px;
  margin: 0 0.2em 0 0;
  font-size: 16px;
}

.ui-group .button-group {
  display: inline-block;
  margin-right: 20px;
}

.color-shape {
  width: 70px;
  height: 70px;
  margin: 5px;
  float: left;
}

.color-shape.round {
  border-radius: 35px;
}

.color-shape.big.round {
  border-radius: 75px;
}

.color-shape.red { background: red; }
.color-shape.blue { background: blue; }
.color-shape.yellow { background: yellow; }

#prodxdatetimediv select,#proddatetimediv select{font-size:12px;height:21px;line-height:14px;padding:0;vertical-align:top;}
#proddatetimediv input {border-style:solid;border-width:1px;}
#prodhh, #prodjj, #prodmn, #prodxhh, #prodxjj, #prodxmn {width:2em;}
#prodaa, #prodhh, #prodjj, #prodmn, #prodxaa, #prodxhh, #prodxjj, #prodxmn{font-size:12px;padding:1px;}
.proddatetime::before {font-family:"dashicons";content: "\f145";top:-1px;color:#82878c;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font:400 20px/1 dashicons;left:-1px;padding:0 2px 0 0;position:relative;text-decoration:none !important;top:0;vertical-align:top;}

.proddatetime{margin-top:10px;margin-bottom:3px;}
.color-shape.wide, .color-shape.big { width: 150px; }
.color-shape.tall, .color-shape.big { height: 150px; }

#cart-details{clear:both;padding-bottom:15px;}
.cartfield_list{width:100%;border-collapse:collapse;border-top:none;}
.cartfield_list th{padding:5px;text-align:left;border:1px solid rgba(51, 51, 51, 0.1)}
th.cartfield_list_col_icon{width:26px;border:none;}
.cartfield_list td{padding:5px;word-break: break-all;border:1px solid rgba(51, 51, 51, 0.1)}
.cartfield_list td.cartfield_list_icons{border:none;}
.cartfield_list_col_ID{width:15%;}
.cartfield_list .empty_cell{color:red;}

li.cart_menu_item a:before{content:"\f07a";font-family:fontawesome;margin-right:3px;font-size:16px;}
a.reset{float:right;cursor:pointer;}

li.cart_menu_item a:after{
	background: #ffffff;
	border-radius: 0.8em;
	-moz-border-radius: 0.8em;
	-webkit-border-radius: 0.8em;
	color: red;
	display: inline-block;
	font-size: 0.65em;
	font-weight: bold;
	line-height: 1.65em;
	margin-right: 5px;
	text-align: center;
	width: 1.65em;
	vertical-align:super;
}

/* BUTTON STUFF */
.cartbtn{
	background: #123b5c none repeat scroll 0 0;
	border: 0.4em solid rgba(255, 255, 255, 0.7);
	border-radius: 30px;
	box-shadow: none;
	color: #fff;
	display: inline-block;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.12em;
	min-width: 130px;
	padding: 0.35em 1.5em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 200ms ease 0s;
	height:40px;
}

.cartbtn:hover{
	background-color: #98b2c3;
	border: 0.4em solid #98b2c3;
	color: #002145;
}

.cartbtn.disabled,.cartbtn.disabled:hover{
	background: gray;
	border: 0.4em solid rgba(255, 255, 255, 0.7);
	color:white;
}

.cartbtn.small{
    /*font-size:smaller;*/
    font-size:10px;
    height:30px;
    padding: 0.1em 1.0em;
}

.cartbtn.filter{border-bottom-right-radius:0;border-top-left-radius:0}
.cartbtn.active{background-color:#98b2c3;}
button span.filtmark{color:red;margin-left:2px;}

td.product-thumbnail{width:200px;max-width:100px;}
td.product-thumbnail img{width:100%;}
td.product-button,th.prodbutton{
	width:20%;
}
td.product-id,th.prodid{
	width:5%;
}
td.product-title,th.prodtitle{
	width:40%;
}
td.product-id,td.product-title{font-size:18px;font-weight:bold;}
td.product-title a{text-decoration:none;}
th{text-align:left}
td{padding:5px;vertical-align:top;}
.ubc-product-sc,.ubc-product-related-sc{width:100%}

/*just COLLAB*/
/*#ubc7-unit-menu .nav-collapse li.cart_menu_item a{background-color:green;}*/
.navbar .nav > li.cart_menu_item{float:right;margin-right:-15px;}
.navbar .nav{width:100%;}

/*responsive tables*/
@media only screen and (max-width: 980px) {

.cartbtn.small{font-size:10px}

/*just COLLAB*/
.navbar .nav > li.cart_menu_item{float:none;}

	/* Force table to not be like tables anymore */
	.cartfield_list table,
	.cartfield_list thead,
	.cartfield_list tbody,
	.cartfield_list th,
	.cartfield_list td,
	.cartfield_list tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.cartfield_list thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.cartfield_list tr { border: 1px solid #ccc; }

	.cartfield_list td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 35%;
		white-space: normal;
		text-align:left;
	}

	.cartfield_list td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}

	/*
	Label the data
	*/
	.cartfield_list td:before { content: attr(data-title);}
}