/* Basic typography --------------------- */

p, li, tr,
address					{ font-size: 15px; line-height: 1.5; color: #666; }

ul, p					{ margin-bottom: 1em; }

h1, h2, h3,
h4, h5, h6				{ font-weight: bold; line-height: 1.1; }

h1, h2 {
	letter-spacing: -1px;
	border-top: 4px solid #7faa23;
	border-bottom: 4px solid #7faa23;
	padding: 10px 2px;
	margin-bottom: 20px;
}

th						{ text-align: left; }

strong					{ font-weight: bold; }
em						{ font-style: italic; }

sup						{ vertical-align: text-top; font-size: .7em; }


/* Forms ----------------------------------------- */

textarea				{ line-height: 1.5; }




/* Big Demo Button ------------ */

a.bigDemoBtn {
	display: block;
	width: 450px;
	height: 150px;
	background: url('../img/big-demo-btn.png') no-repeat top left;
	border: none;
	text-indent: -9999em;
}

a.bigDemoBtn:hover 			{ background-position: bottom left; }

a.bigDemoBtn:active			{ position: relative; top: 1px; }





/* ######################################################## */
/* ### !MAIN CONTENT ###################################### */
/* ######################################################## */

.more {
	display: block;
	float: right;
	font-size: 15px;
}


/* Columns ------------------------------------------------------------ */

.row {
	overflow: hidden;
	clear: left;
	margin: 0 0 15px;
}

.col-2 > div {
	float: left;
	width: 450px;
	margin: 0 60px 20px 0;
}

.col-3 > div {
	float: left;
	width: 300px;
	margin: 0 30px 40px 0;
}

.col-4 > div {
	float: left;
	width: 215px;
	margin: 0 20px 20px 0;
}

.col-2:last-child,
.col-3:last-child,
.col-4:last-child {
	margin-right: 0 !important;
}

.mr					{ margin-right: 0 !important; }

.col-4 ul,
.col-3 ul			{ margin-left: 15px; }

.col-3 p			{ margin-bottom: 0; }


/* Secondary Navigation ------------------------------------------------ */

#secNav {
	background: #009ddb;
	border: 1px solid #007cad;
	border-top: none;
	width: 958px;
	margin: 0 auto 20px;
	position: relative;
	top: -30px;
	overflow: hidden;
	border-radius: 0 0 3px 3px;
	-moz-border-radius: 0 0 3px 3px;
	-webkit-border-bottom-left-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
}

#secNav li						{ display: inline; line-height: 1; }

#secNav a {
	display: block;
	padding: 13px 0 7px;
	width: 318px;
	float: left;
	color: #fff;
	border: none;
	font-weight: bold;
	text-align: center;
	border-right: 1px solid #007cad;
	background: url("../img/horz-shine.png") no-repeat right -12px;
	text-shadow: 0 -1px 0 #007cad;
}

#secNav #ccsFulfillment {
	border-right: none;
	width: 320px;
}

a#ccsMain:hover,
a#ccsMain.current,
a#ccsFulfillment:hover,
a#ccsFulfillment.current,
a#ccsWeb:hover,
a#ccsWeb.current				{ background-position: left -12px; }


/* Various ---------------------------------------- */

.divider {
	width: 960px;
	margin: 30px auto 50px;
	height: 17px;
	background: url('../img/diagonals.png') repeat-x;
}

.demoPromo {
	padding: 1em 1em .8em;
	background: #ffd;
	border: 3px solid #fc6;
	margin-bottom: 24px;
	-moz-border-radius: 3px;
}


/* Icons --------------------------------------------------------- */

.icon {
	display: block;
	width: 65px;
	height: 65px;
	float: left;
	margin: -20px 15px 0 0;
	border: none !important;
	text-indent: -9999em;
	background: url('../img/features-sprite.png') no-repeat;
}

.bigIcon {
	display: block;
	width: 110px;
	height: 110px;
	border: none !important;
	text-indent: -9999em;
	background: url('../img/big-features-sprite.png') no-repeat;
}

#pci							{ background-position: -0px -195px; }
#solid							{ background-position: -195px -130px; }
#integrated						{ background-position: -130px 0px; }
#personalization				{ background-position: -130px -65px; }
#attributes						{ background-position: -65px 0px; }
#assets							{ background-position: -195px -65px; }
#imports						{ background-position: -0px -130px; }
#recentItems					{ background-position: -0px 0px; }
#reviews						{ background-position: -195px 0px; }
#relationships					{ background-position: -65px -130px; }
#guest							{ background-position: -130px -260px; }
#wishlists						{ background-position: -65px -260px; }
#billMaterials					{ background-position: -195px -390px; }
#dropShip						{ background-position: -130px -390px; }
#skuClone						{ background-position: -195px -260px; }
#dashboard						{ background-position: -65px -325px; }
#reportUpload					{ background-position: -65px -390px; }
#printQueues					{ background-position: -0px -390px; }
#customKits						{ background-position: -130px -130px; }
#advancedSearch					{ background-position: -0px -325px; }
#userAccts						{ background-position: -195px -195px; }
#customDesign.icon				{ background-position: -65px -195px; }
#control.icon					{ background-position: -130px -195px; }
#design.icon					{ background-position: -65px -195px; }
#intelligent.icon				{ background-position: -0px -260px; }
#configuration.icon				{ background-position: -65px -65px; }

/* Big Icons */
#customDesign.bigIcon			{ background-position: 0px 0px; }
#control.bigIcon				{ background-position: -110px 0px; }
#intelligent.bigIcon			{ background-position: -220px 0px; }
#configuration.bigIcon			{ background-position: -330px 0px; }
#bellWhistle.bigIcon			{ background-position: -440px 0px; width: 160px; }

.features h4					{ margin: 0 0 5px 80px; color: #666; }
.features p						{ margin: 0 0 0 80px; }




/* ######################################################## */
/* ### !HOMEPAGE ########################################## */
/* ######################################################## */

/* Hero ----------------------------- */

#hero {
	width: 960px;
	height: 300px;
	margin: 50px auto 50px -15px;
	background: url("../img/hero.png") center center no-repeat;
}

#hero h1,
#hero p 						{ display: none; }


/* Abison Overview ------------------------------ */

#painReliefTeaser				{ position: relative; }

#ccsBox {
	width: 140px;
	height: 140px;
	background: none;
	position: absolute;
	right: -12px;
	top: 170px;
}

#painReliefTeaser .more			{ margin-top: 19px; float: left; }

#abisonOverview ul				{ margin-bottom: 19px; }


/* CCS Overview ------------------------- */

#ccsOverview h2					{ text-align: center; margin: 50px 0 30px; }

#ccsOverview .mr				{ margin-top: 30px; }

#homepage .features				{ margin-bottom: 30px; }






/* ######################################################## */
/* ### !SOFTWARE PAGE ##################################### */
/* ######################################################## */


/* Fulfillment + Web Box ------------------------ */

#fulfillWeb	{
	background: url("../img/vertical-grey-grad.png") repeat-x bottom left #fcfcfc;
	border: 1px solid #ccc;
	position: relative;
	margin-bottom: 50px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#fulfillWeb h2 {
	border: none;
	margin: 0 0 3px;
	padding: 0;
	text-shadow: -1px 0 0 #fff;
}

#fulfillWeb h3 {
	color: #888;
	margin: 0 0 20px;
	text-shadow: -1px 0 0 #fff;
}

#fulfillWeb #plus {
	width: 120px;
	height: 120px;
	display: block;
	background: url('../img/plus-sign.png') no-repeat;
	position: absolute;
	left: 415px;
	top: 75px;
	text-indent: -9999em;
}

#fulfillWeb #fulfillOverview,
#fulfillWeb #webOverview {
	margin: 30px 250px 0 30px;
	width: 310px;
}

#fulfillWebFeatures {
	width: 958px;
	clear: both;
	margin-bottom: 0;
}

#fulfillWebFeatures li {
	width: 153px;
	border-left: 1px solid #fff;
	border-right: 1px solid #e6e6e6;
	padding: 15px;
	float: left;
	list-style: none;
}

#fulfillWebFeatures #bellsWhistles {
	width: 178px;
	padding: 15px 20px;
	text-align: center;
	border: none;
	background: url("../img/vertical-trans-grad.png") repeat-x left bottom;
}

#fulfillWebFeatures .bigIcon	{ margin: 0 auto 10px; }

#fulfillWebFeatures h4 {
	font-size: 15px;
	line-height: 1.2;
	margin: 15px 0 3px;
}






/* ######################################################## */
/* ### !WEB and FULFILLMENT PAGES ######################### */
/* ######################################################## */

/* Overview ---------------------------------------------------- */

.overview .btn					{ float: left; margin: 0 20px 20px 0; }

.overview .demoBtn				{ float: right; margin: 0 0 20px; }


/* Primary Features ----------------------------------------------- */

#primFeatures {
	border: 1px solid #ccc;	
	background: url("../img/vertical-trans-grad.png") repeat-x left -125%;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	margin: 0 0 30px;
}

#primFeatures > div {
	padding: 30px 20px;
	width: 438px;
	margin: 0;
	border-right: 1px solid #ccc;
}

#primFeatures .mr				{ border-left: 1px solid #fff; border-right: none; }

#primFeatures h3				{ margin: 0 0 15px 80px; }

#primFeatures ul				{ margin: 0 0 0 80px; }


/* Secondary Features ----------------------------------------------- */

#moreFeatures h3 {
	height: 65px;
	line-height: 70px;
	padding-right: 65px;
	width: 9em;
	margin: 0 0 15px 80px;
	background: url('../img/bell.png') top right no-repeat;
}








/* ######################################################## */
/* ### !PAIN RELIEF PAGE ################################## */
/* ######################################################## */


#pain-relief #mainContent h1	{ text-align: center; margin: 20px auto 30px; }

#pains {
	width: 958px;
	height: 300px;
	background: url("../img/vertical-grey-grad.png") repeat-x left bottom #fcfcfc;
	background: #f3f3f3\9; /* IE8 hack for not displaying bg-img properly */
	border: 1px solid #ddd;
	position: relative;
	margin: 10px 0 50px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

#painList				{ width: 100%; list-style: none; }

.slideshow #painList	{ height: 300px; overflow: hidden; }

#painList li {
	width: 520px;
	margin: 0 0 50px 260px;
	text-shadow: 0 1px 0 #fff;
}

.slideshow #painList li {
	width: 958px;
	margin: 0;
}

.slideshow #painList .painWrap {
	margin: 70px 178px 0 260px;
}

#painList div			{ position: relative; z-index: 100; }

#painList h4 {
	font-size: 25px;
	line-height: 30px;
	margin: 0 0 10px;
	color: #009ddb;
	text-shadow: 0 1px 0 #fff;
	position: relative;
	z-index: 100;
}

#painList p			{ line-height: 30px; }

#painList .number	{ display: none; }

.slideshow #painList .number {
	display: block;
	font-size: 500px;
	font-weight: bold;
	position: absolute;
	color: #e9e9e9;
	top: -.63em;
	right: -.1em;
	z-index: 1;
}

#painList .identifier {
	color: #ccc;
	line-height: 1;
	width: 10em;
	text-transform: uppercase;
	position: absolute;
	top: 6px;
	right: 530px;
	text-align: right;
	font-weight: bold;
}

#pains .relNav {
	display: block;
	position: absolute;
	background-image: url('../img/slideshow-sprites.png');
	width: 14px;
	height: 28px;
	text-indent: -9999px;
	border: none;
	top: 45%;
	z-index: 100;
}

#prevPain {
	background-position: 0 0;
	left: 8px;
}

#nextPain {
	background-position: -15px 0;
	right: 8px;
}

#painNav {
	position: absolute;
	top: 8px;
	right: 5px;
	z-index: 100;
}

#painNav a {
	display: block;
	float: left;
	margin: 0 8px 0 0;
	width: 16px;
	height: 17px;
	background: url('../img/slideshow-sprites.png') -30px 0 no-repeat;
	text-indent: -9999px;
	border: none;
}

#painNav .activeSlide		{ background-position: -47px 0; }







/* ######################################################## */
/* ### !ABOUT PAGE ######################################## */
/* ######################################################## */

#about-us h1				{ text-align: center; margin-bottom: 1em; }

/* Webkit gets mad if this isn't there for some reason */
#about						{ overflow: hidden; }

#about h4 {
	margin: 2.4em 0 .6em;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 1px;
	color: #555;
}

#about .more {
	font-size: 13px;
	display: inline;
	float: none;
}

#about p {
	font-size: 13px;
	margin: 0 0 13px;
	text-align: justify;
}

#about li					{ font-size: 13px; }

#about > div				{ position: relative; }

#about .toggle.nav {
	position: absolute;
	display: block;
	border: none;
	width: 10em;
	text-align: right;
	top: 0;
	right: 620px;
	font-size: 13px;
	line-height: 1.3;
}

#technology.js .moreInfo > div {
	width: 285px;
	min-height: 130px;
	float: left;
	margin: 0 30px 20px 0;
}

#technology h4				{ margin: 1em 0 .5em 90px; }
#technology ul				{ margin-left: 90px; }

/* Technology icons ---------- */
#technology .icon			{ background-image: url('../img/technology-sprites.png'); }
#software.icon				{ background-position: 0 -65px; }
#servers.icon				{ background-position: -65px 0; }
#network.icon				{ background-position: 0 0; }
#pillow.icon				{ background-position: -65px -65px; }



/* Privacy Policy --------------- */

#privacy-policy #mainContent	{ width: 600px; }

#privacy-policy #mainContent h3	{ margin: 30px 0 15px; clear: both; }

#privacy-policy .pageContent	{ margin: 0 0 50px; }

#privacy-policy #mainContent ul { overflow: hidden; margin-top: -6px; }

#privacy-policy #mainContent li { float: left; margin: 0 5px 5px 20px; font-size: 12px; }

#privacy-policy #mainContent p	{ clear: both; font-size: 12px; }








/* ######################################################## */
/* ### !CONTACT PAGE ###################################### */
/* ######################################################## */

/* Overview and Contact Info ----------------------------- */

#contact-us #mainContent	{ padding: 20px 0 0; }

#contact-us .col-2 h1		{ margin-top: 5px; }

#contactInfo				{ margin: 60px 0 0; }

#contactData .logo			{ background-position: bottom left; margin: 0 0 20px; }

#contactData p				{ margin: 0 0 .5em 10px; }

#contact-us #social h4,
#contact-us #social p		{ padding-left: 40px; position: relative; }

#contactInfo .socIcon		{ position: absolute; top: 3px; left: 0; }

.socIcon {
	display: block;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	background: url("../img/social-icons.png") no-repeat;
	border: none;
}

.rss						{ background-position: -30px 0; }


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

#contactForm {
	overflow: hidden;
	padding: 30px 30px 15px;
	border: 1px solid #ddd;
	background: url("../img/vertical-grey-grad.png") repeat-x left bottom;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

#contactForm dt {
	float: left;
	clear: left;
	width: 90px;
	color: #666;
	margin: 0 10px 15px 0;
}

#contactForm dd {
	float: left;
	margin: 0 0 15px;
	width: 270px;
}

#contactForm label 				{ margin-bottom: 2px; line-height: 1.2; position: relative; }

.asterisk						{ color: #00aff5; position: absolute; top: 1px; left: -12px; }

#contactForm small {
	display: block;
	font-size: 10px;
	line-height: 11px;
}

#contactForm input,
#contactForm textarea,
#contactForm select {
	display: block;
	width: 270px;
}

#contactForm .required			{ border-color: #bbb; }

#contactForm .checkbox {
	width: auto;
	float: left;
	padding: 0;
	margin: 3px 6px 6px 0;
	text-align: left;
}

#email2							{ position: absolute; top: -9999px; left: -9999px; }

#detailsDD label {
	font-size: 13px;
	font-weight: normal;
	display: inline;
}

#detailsDD span					{ float: left; width: 200px; }

#inquiry						{ height: 120px; }

#detailsSet						{ position: relative; left: 20px; }

#contactForm #submit { 
	margin: 0 7px 15px 0;
	width: 120px; 
	float: right;
}



/* Form Errors --------------------- */

.invalid						{ background: #ffd !important; }

ul.error {
	padding: 6px 12px 6px 24px;
	font-size: 13px;
	margin: 0 0 20px;
}

ul.error li						{ font-size: 13px; }

p.error {
	padding: 6px 12px;
	font-size: 13px;
	clear: both;
	margin: 10px 0 0 100px;
}


/* Thanks page ----------------------- */

#thanks							{ text-align: center; margin: 20px 0; }
#thanks.ajax					{ text-align: left; margin: 0; }
#thanks h1						{ border: none; margin: 0 0 10px; padding: 0; }
#thanks p						{ margin: 0 0 10px; }







/* ######################################################## */
/* ### !PROJECT SYSTEM LOGIN ############################## */
/* ######################################################## */

#loginForm {
	width: 350px;
	margin: 0 auto 30px;
	overflow: hidden;
	padding: 30px 30px 15px;
	border: 1px solid #ddd;
	background: url("../img/vertical-grey-grad.png") repeat-x left top;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

#loginForm h4					{ margin: 0 0 20px; }

#loginForm label 				{ font-size: 13px; }

#loginForm dt {
	width: 80px;
	float: left;
	clear: left;
	margin: 0 0 15px;
}

#loginForm dd {
	float: left;
	width: 270px;
	margin: 0 0 15px;
}

#loginForm .txtbox				{ width: 250px; }

#loginForm #loginRememberDD {
	clear: left;
	margin: -10px 0 15px 80px;
}

#loginRememberDD .checkbox {
	position: relative;
	top: -1px;
}

#loginForm button {
	clear: left;
	float: left;
	display: block;
	margin: 0 5px 10px 80px;
}

#loginForm .spinner				{ float: left; }

#loginForm p.error				{ margin: 0 0 0 80px; }