/* $Id: 6f5c872141d7fdea77b3e3c14f8c03aacbd3884f $ */

/* add the banner to the top of the page */
.main > .banner:first-child {
	display: block;
	background-color: #4e4f53;
}


/* change the list items to gray checks */
UL.reasons {
	list-style: url(https://images.higheredjobs.com/assets/hej/img/elements/gray-check.gif);
	font-size: 17px;
	padding-left: 30px;
}


/********************************** Product nav **********************************/

#product_nav {
	width: 100%;
	margin: 0 0 40px 0;
	padding: 0 0 0 0;
	border-bottom:  6px solid #E7E7E7;
}

#product_nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

#product_nav li {
	display: block;
	float: left;
	margin: 0 0 15px 0;
	padding: 1px 20px;
	position: relative;
	border-left: 1px solid #f0ab00;
	font-size: 15px;
	text-transform: uppercase;
}
#product_nav li:first-child {
	border-left: 0;
	padding-left: 2px;
}

#product_nav li a {
	text-decoration: none;
}
#product_nav li.on a {
	color: #545454;
}

#product_nav li .arrow {
	display: none;
}
#product_nav li.on .arrow {
	display: block;
	position: absolute;
	bottom: -21px;
	left: 19px;
	background-color: #f0ab00;
	width: 80px;
	height: 6px;
	margin: 0;
	padding: 0;
	z-index: 999;
}
#product_nav li:first-child .arrow {
	left: -1px;
}
#product_nav li.on .arrow:after {
	top: 100%;
	left: 0;
	content: " ";
	position: absolute;
	pointer-events: none;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 40px 0 40px;
	border-color: #f0ab00 transparent transparent transparent;
	z-index: 999;
}


/* Clear floated elements */
#product_nav:after  {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}


/********************************** Product columns **********************************/

.product_listings H2 {
	margin-top: 40px;
	padding: 10px 15px;
	background-color: #f0f0f0;
}

.product_container.row {
	margin-left: 0;
	margin-right: 0;
}
.product_container:after {/* mirror row class */
	clear: both;
	display: table;
	content: " ";
}

.product_container .description {
	padding-right: 30px;
	border-right: 1px solid #ccc;
}
.product_container P {
	margin-top: 0;
}
.product_container SMALL.restrictions {
	font-style: italic;
}
/* RE-1130 G4, second half: Marketing noted the bullets in this section render
   bolder than on the product detail pages and asked for them to match. The
   product detail lists are 400, so the bold comes off; the row spacing below is
   superseded by the .product-page rule at the end of this file. */
.product_container UL LI {
	padding-bottom: 5px;
}

.product_container .action {
	text-align: right;
}
.product_container .action input {
	margin-top: 20px;
	margin-bottom: 20px;
}
.product_container .pricing {
	margin-bottom: 5px;
	font-size: 24px;
	color: #58a618;
}
.product_container .btn {
	width: 120px;
	font-size: 14px;
}


/********************************** Product Info Pages **********************************/


.packDiscounts {
	font-size: 17px;
	margin-bottom: 20px;
}

.packDiscounts TABLE {
	width: 100%;
}
.packDiscounts TABLE > TBODY > TR > TH {
	padding-left: 20px;
	padding-right: 20px;
	font-size: smaller;
}
.packDiscounts TABLE > TBODY > TR > TD:first-child {
	padding-left: 40px;
}
.packDiscounts TABLE > TBODY > TR > TD:last-child {
	padding-right: 40px;
	text-align: right;
}
.packDiscounts TABLE > TBODY > TR > TH:nth-child(2) {
	text-align: right;
}
.packDiscounts TABLE > TBODY > TR > TD:nth-child(2) {
	color: #58a618;
}

.buyLink {
	display: block;
	margin: 40px 0 20px 0;
	width: 175px;
}

#adSpecs TR TD:first-child {
	font-weight: bold;
}

.screenshots {
	border:1px solid rgba(204,204,204, 0.8) ;
}

/* Center the sample screenshot images within the sidebar. The screenshots are
   either bare imgs or wrapped in a lightbox anchor, so center both cases. */
.sidebar a[data-toggle="lightbox"] {
	display: block;
	text-align: center;
}
.sidebar img.screenshots {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

A[data-type="image"]:after {
	display: block;
	content: "Click to view larger sample";
	padding-left: 5px;
	font-size: 12px;
	font-weight: normal;
	color: #aaa;
}

/* modal screenshots */
@media (min-width: 992px) {/* only do this scrolling on large screens */
	.ekko-lightbox .modal-content {
		max-height	:	900px;
		overflow	:	auto;
	}
}

/********************************** Contact Form **********************************/

#LearnMoreContainer {
	margin-top: 30px;
	background-color: #f0f0f0;
	padding: 30px;
}
#LearnMoreContainer .form,
#LearnMoreContainer .alert {
	margin: 0;
}


/********************************** Responsive Changes **********************************/


@media (max-width: 991px) {/* ipad size - down to 768 */
	.packDiscounts TABLE > TBODY > TR > TD:first-child {
		padding-left: 20px;
	}
	.packDiscounts TABLE > TBODY > TR > TD:last-child {
		padding-right: 20px;
	}
}

@media (max-width: 767px) {/* small pad size - down to 560 */
	#product_nav {
		margin-bottom: 0;
		border-bottom: 0;
	}
	#product_nav li {
		margin-bottom: 0;
		padding-left: 10px;
		padding-right: 10px;
	}
	#product_nav li.on .arrow,
	#product_nav li.on .arrow:after {
		display: none;
	}
	
	.product_container .description {
		padding-right: 15px;
		border-right: 0;
	}
	.product_container .action {
		margin-top: 30px;
		text-align: left;
	}
	.packDiscounts > DIV:nth-of-type(2) > TABLE > TBODY > TR:first-child > TD {
		border-top: 0;
	}
}


@media print {
}


/* ---------------------------------------------------------------------------
   RE-1130 G4 -- product-page bullet spacing.

   Marketing repeated one sentence on twelve product pages: "Can we add more of
   an indent to the bullets? And more space after the bullets before the text?
   Everything feels too tight." Measured, every one of those lists was the same
   fingerprint -- an unclassed <ul> at 16px padding-left with a default outside
   disc -- so it is one rule rather than twelve edits.

   Both halves of the ask need different levers, because a real list marker has
   no directly settable gap to its text:
     - indent      -> padding-left on the UL, which moves the marker right
     - marker gap  -> padding-left on the LI, which moves only the TEXT right
                      while the outside marker stays at the UL's content edge

   Scoped to .product-page (set as a body class on exactly the twelve pages)
   rather than to .content, because product.css also loads on employer Accounts,
   /career/resumes.cfm, /company/partners.cfm and /payments/, none of which are
   in RE-1130's scope.
   --------------------------------------------------------------------------- */
.product-page .content UL {
	padding-left: 28px;
}
.product-page .content UL > LI {
	padding-left: 10px;
	margin-bottom: 6px;
}