/* CSS Document */

@charset 'utf-8';
@import 'navigation.css';
@import 'lato.css';

/* It's good practice to zero the margin and padding of the body element to account for differing browser defaults. */
* { margin:0; padding:0; }

html, body {
  min-height: 100%;
  font-family: Lato, Verdana, Helvetica, Arial, sans-serif;
  font-size: 14px;
}

p {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
/*
Font Size Chart
http://pxtoem.com
*/

.nowrap { white-space: nowrap; }
a.none  { text-decoration: none; }
a.plain { text-decoration: none; color: #000; }
a img   { border: none; }
a:hover { color: #800080; text-decoration: underline; }

/* Change the SSS Banner logo on mouse rollover */
a.rollover {
	display: block;
	width: 400px;
	height: 44px;
	text-decoration: none;
	background: url('//www.superiorshelving.com/graphics/navLogo.png');
}

a.rollover:hover {
	background-position: -400px 0;
}

.displace {
	position: absolute;
	left: -5000px;
}

img, embed, object, video {
	max-width: 100%;
	height: auto;
	vertical-align: text-bottom;
}

input {
 /* display: block; */  /* This broke the Contact Form radio buttons. */
/* margin: 20px;*/
 width: auto;
}

.align-right { float: right; margin: 0 0 15px 15px; }  /* For aligning images. */
.align-left  { float: left; margin: 0 15px 15px 0; }

h3.center  { text-align: center; }
div.center { text-align: center; }

hr {
	border: 0;
	color: #9E9E9E;
	background-color: #9E9E9E;
	height: 1px;
	text-align: center;
}

/*
iframe {
	border: 0;
	}
 */

.no-bullets {
	list-style-type: none;
	padding: 0;
	margin-left: 1em;
}


/*  flexbox -- header 3 column */
.columns-3-layout {
    display: flex;
	flex-wrap: wrap;
	width: 100%;
	background-color: white;
	justify-content: space-between;
}
.each-column {
	flex: 1;
	padding: 10px;
	flex-basis: 30%;
	box-sizing: border-box;
}
.each-column:nth-child(1) {}
.each-column:nth-child(2) {}
.each-column:nth-child(3) {}

.logo-column {
	flex: 2;
}

.info-column {
	flex: 1;
}
.mfg-column {
	flex: 1;
}

/*  END flexbox -- header 3 column */


/*  flexbox -- product pages */
.product-info {
    display: flex;
	flex-wrap: wrap;
	background-color: white;
}
.pi-photo {
	margin: 0 auto;
	box-sizing: border-box;
	order: 1;  /* The order in which to display sections within the "product-info" div. */
	-webkit-order: 1;  /* Safari 6.1+ */
}
.pi-desc {
	box-sizing: border-box;
	order: 2;
	-webkit-order: 2;
}
/* For mobile devices */
@media screen and (max-width: 899px) {
	.product-info {
/* 		flex-direction: column-reverse; */
	}
}
/* For larger screens */
@media (min-width: 900px) {
  .product-info {
    justify-content: space-between;
  }
  .pi-photo {
	margin-right: 45px;  /* Add some space to the right of the photo. */
  }
  .pi-desc {
	margin-right: 45px;  /* Add some space to the right of the photo. */
	flex: 1;
  }
}
/*  END flexbox -- product pages */


/* RESPONSTABLE 2.0 */
.responstable {
	margin: 1em 0;
	width: 100%;
/* 	overflow: hidden; */   /* position:sticky didn't work on iOS with this line. */
	background: white;
	color: #024457;
	border-radius: 10px;
	border: 1px solid #167f92;
	}
.responstable tr {
	border: 1px solid #d9e4e6;
	}
.responstable tr:nth-child(odd) {
	background-color: #F5F5F5;
	}
.responstable th {
	display: none;
	border: 1px solid white;
	background-color: #666666;
	color: white;
	padding: 1em;
	}
.responstable th:first-child {
	display: table-cell;
	text-align: center;
	}
.responstable th:nth-child(2) {
	display: table-cell;
	}
.responstable th:nth-child(2) span {
	display: none;
	}
.responstable th:nth-child(2):after {
	content: attr(data-th);
	}
@media (min-width: 480px) {
  .responstable th:nth-child(2) span {
    display: block;
	}
  .responstable th:nth-child(2):after {
    display: none;
	}
}
.responstable td {
	display: block;
	word-wrap: break-word;
/* 	max-width: 13em; */  /* Was 7em -- getting rid of this allowed cells to be filled with text. */
	}
.responstable td:first-child {
	display: table-cell;
	text-align: center;
	border-right: 1px solid #d9e4e6;
	}
@media (min-width: 480px) {
  .responstable td {
    border: 1px solid #d9e4e6;
	}
}
.responstable th, .responstable td {
	text-align: left;
	margin: .5em 1em;
	}
@media (min-width: 480px) {
  .responstable th, .responstable td {
    display: table-cell;
    padding: 1em;
	}
}
/*  END RESPONSTABLE */


/* Stick Table Headers */
.sticky {
	text-align: center;
	color: #000;
	position: -webkit-sticky;
	position: sticky;
	height: min-content;
	top: 0;
	z-index: 99;
	background: white;
  /* https://stackoverflow.com/questions/24840074/how-to-stick-table-headerthead-on-top-while-scrolling-down-the-table-rows-with */
}
/*  END sticky headers */


/* ---------- Glossary --------------- */
 a.Glos {
	color: #3399BB                    !important;
	text-decoration: none             !important;
	border-bottom: 1px dotted #3399BB !important;
	font-weight: normal               !important;
	font-style: normal                !important;
	}
 a.Glos:hover {
	color: #3333FF        !important;
	text-decoration: none !important;
	font-weight: normal   !important;
	font-style: italic    !important;
	}
/* ----------------------------------- */



#footer {
	height: 255px;
	background-color: white;
	/*border-top: 1px solid #666666; /* #666666 = medium gray */
	/*border-left: 1px solid #666666;
	border-right: 1px solid #666666;*/
	width: 100%;   /* Must be same width as container */
	margin: auto;  /* Centers the footer in the page */
	left: 0;       /* Centers the footer in the page */
	right: 0;      /* Centers the footer in the page */
	bottom: 0;
	position: relative;
	max-width: 1500px;
}

#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* ---- collapsable menu ------------------------------------- */

#p7swapmenu {
	background-color: #CCFF99;
	border: 1px solid;
	border-color: #E4E9D8 #99A189 #99A189 #E4E9D8;
	left: 0;
	top: 0;
	padding: 0 0; /* top and bottom padding create visual space within this div  */
}
#p7swapmenu ul {margin: 0px; padding: 0px;}
#p7swapmenu li {margin: 0px; padding: 0px; list-style-type: none;}

/* Top level menu when closed */
.closed a, .open a {
	background-repeat: no-repeat;
	background-position: 3px 50%;
	background-color: #99A189;
	border: 1px solid;
	border-color: #C9D0AD #848C71 #848C71 transparent;
	color: #EEF0E3;
	display: block;
	font-size: 0.9em;
	padding: 0; /* 2px 0px 2px 16px */
	text-decoration: none;
}
.closed a:hover, .open a:hover {
	background-color: #ACB39F;
	color: #5B624F;
}
.closed a { background-image: url('//www.superiorshelving.com/graphics/menu-icons/menplus.gif'); }
.open a {
	background-image: url('//www.superiorshelving.com/graphics/menu-icons/menminus.gif');
	/* This is the background color of the link after it's clicked. */
	background-color: #E4E9D8;
}
.closed ul a, .open ul a, .open ul a:hover  {
	background-color: #ACB39F;
	/* This is the background color of the links in open categories. */
	background-image: url('//www.superiorshelving.com/graphics/menu-icons/pagemarker.gif');
	background-repeat: no-repeat;
	background-position: 0% 50%;
	border: 0;
	color: #000;
	font-size: .8em;
	font-weight: normal;
	padding: 0 0 0 12px;
	margin: 0 0 0 3px;
	text-decoration: none;
}
.orphan ul a {
	background-image: url('//www.superiorshelving.com/graphics/menu-icons/pagemarker.gif');
	background-repeat: no-repeat;
	background-position: 0% 50%;
	border: 0;
	color: #000;
	font-size: .9em;
	font-weight: normal;
	padding: 0 0 0 0;  /* 0 0 0 12px */
	margin: 0 0 0 5px;  /* 0 0 0 16px */
	text-decoration: none;
}
.orphan ul a:hover, .open ul a:hover {
	background-color: transparent;
	color: #000;
}
#p7current {font-weight: bold;}

/* [if gte IE 5]>

#p7swapmenu ul a {height: 1em;}

<![endif]
[if IE 5]>

#p7swapmenu li {margin-top: -3px;}

<![endif] */
/* <--------------------------------------- collapsable menu ---- */

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

/* Miscellaneous classes for re-use */
.flt-r { /* This class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
	}
.flt-l { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
	}
.clearfloat { /* This class should be placed on a div or br element and should be the final element before the close of a container that should fully contain a float */
	clear: both;
	height: 0;
	font-size: 1px;
	line-height: 0px;
	}

ul, ol { list-style-position: inside; } /* Keeps bullets from a <ul> inside their div */




#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 1em;
  border: none;
  outline: none;
  background-color: #555;
  color: white;
  cursor: pointer;
  padding: 1px 10px 6px 10px;
  border-radius: 4px;
}

#topBtn:hover {
  background-color: black;


[if IE]>
/* place CSS fixes for all versions of IE in this conditional comment */

<![endif]