/*	====================================================================================================
	SmartWorkflow.com Stylesheet
	
	Styles have comments explaining their basic purpose. Adjustments and minification of the CSS file
	will be performed once the final version of the content is integrated into layout.
	
	---------------------------------------------------------------------------------------------------- */

/* Body Style, Padding and Margins at 0 so the content positions itself in the top left corner */
body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, Verdana;
	color: rgb(45, 45, 45);
}
/* Layout Containers for 3-row layout (needed for tricolor background) */
div.layout-north,
div.layout-center,
div.layout-south {
	position:relative;
	float: left;
	width: 100%;
	margin-left: 0px;
}
/* North (Top/Header Area) Row */
div.layout-north {
	background-color: rgb(32, 32, 32);
}
/* Center (Content) Row */
div.layout-center {
	background-color: white;
}
/* South (Bottom/Footer Area) Row */
div.layout-south {
	background: rgb(225, 225, 225) url(../images/bottom-bg.jpg) top left repeat-x;
}
/* Content Container */
div.container {
	margin-left: auto;
	margin-right: auto;
	width: 1032px;
}
/* Breadcrumb Bar Container */
div#topbar {
	position: relative;
	float: left;
	width: 100%;
	height: 33px;
	min-height: 33px;
	max-height: 33px;
	background: url(../images/navbar-bg.jpg) right top no-repeat;
}
/* Breadcrumb Bar */
ul#breadcrumb {
	position: relative;
	float: left;
	height: 33px;
	display: block;
	list-style: none;
	margin: 0;
	padding-left: 13px;
	background: url(../images/navbar-left.jpg) top left no-repeat;
}
/* Breadcrumb Bar Button Container */
ul#breadcrumb li {
	display: inline;
}
/* Breadcrumb Bar Button */
ul#breadcrumb li a {
	background: url(../images/button-bg.jpg) left top no-repeat;
	float: left;
	position: relative;
	width: 100px;
	height: 33px;
	display: block;
	padding-top: 0.6em;
	text-align: center;
	vertical-align: middle;
	color: rgb(45,45,45);
	text-decoration: none;
	font-size: 12px;
}
/* Page Header */
div#header {
	position: relative;
	float: left;
	width: 100%;
	height: 367px;
	min-height: 367px;
	max-height: 367px;
	background: url(../images/header.jpg) top left no-repeat;
}
/* Logo and Image Header Area */
div#header div.logo {
	position: relative;
	float: left;
	width: 100%;
	height: 265px;
}
/* Navigation Container */
div#header div#navigation {
	position: relative;
	float: left;
	width: 964px;
	height: 100px;
	padding: 0px 32px 0px 32px;
}
/* Navigation Menu */
div#navigation ul#menu {
	position: relative;
	float: left;
	height: 100px;
	display: block;
	list-style: none;
	margin: 0;
}
/* Navigation Menu Button Container */
ul#menu li {
	display: inline;
}
/* Navigation Menu Button */
ul#menu li a {
	float: left;
	position: relative;
	width: 127px;
	height: 60px;
	padding-top: 40px;
	display: block;
	text-align: center;
	vertical-align: middle;
	color: rgb(45,45,45);
	text-decoration: none;
	font-size: 20px;
	padding-left: 48px;
}
ul#menu li.home a {
	background: url(../images/home-normal.jpg) left top no-repeat;
}
ul#menu li.product a {
	background: url(../images/product-normal.jpg) left top no-repeat;
}
ul#menu li.about a {
	background: url(../images/about-normal.jpg) left top no-repeat;
}
ul#menu li.support a {
	background: url(../images/support-normal.jpg) left top no-repeat;
}
ul#menu li.contact a {
	background: url(../images/contact-normal.jpg) left top no-repeat;
}
ul#menu li.home a:hover {
	background: url(../images/home-hover.jpg) left top no-repeat;
}
ul#menu li.product a:hover {
	background: url(../images/product-hover.jpg) left top no-repeat;
}
ul#menu li.about a:hover {
	background: url(../images/about-hover.jpg) left top no-repeat;
}
ul#menu li.support a:hover {
	background: url(../images/support-hover.jpg) left top no-repeat;
}
ul#menu li.contact a:hover {
	background: url(../images/contact-hover.jpg) left top no-repeat;
}

/* Page Content */
div#content {
	position: relative;
	float: left;
	width: 100%;
	background: white url(../images/content-bg.jpg) top left repeat-y;
	padding-bottom: 30px;
}

/* Page Content Padding */
div.autopad {
	padding: 30px;
}
/* Content Top/Bottom Containers */
div#content div.top,
div#content div.bottom {
	position: relative;
	float: left;
	width: 964px;
}
/* Content Top */
div#content div.top {
	padding: 30px 34px 0 34px;
}
/* Content Bottom */
div#content div.bottom {
	padding: 15px 34px 0px 34px;
	height: 345px;
}
div.buttons {
	position: relative;
	float: left;
	padding: 0px 34px 15px 34px;
	width: 964px;
}
/* Content Narrow (Left) */
div#content div.narrow {
	position: relative;
	float: left;
	margin-right: 16px;
	border: none 0;
	border-right: solid 1px rgb(229, 229, 229);
	width: 35%;
}
/* Content Wide (Right) */
div#content div.wide {
	position: relative;
	float: left;
	margin-left: 15px;
	width: 60%;
}
/* Wide Content Panes */
div.wide div.pane.left,
div.wide div.pane.right {
	position: relative;
	float: left;
	width:45%;
	padding-right: 10px;
}
div.wide div.pane.left {
	border-right: solid 1px rgb(229, 229, 229);			
}
div.wide div.pane.right {
	padding-left: 30px;
}
/* Content Horizontal Separator */
div#content hr.separator {
	position: relative;
	float: left;
	width: 1024px;
	margin: 0px 8px 0px 4px;
	border: none 0;
	border-top: solid 1px rgb(229, 229, 229);
	height: 1px;
}
/* Footer */
div#footer {
	position: relative;
	float: left;
	margin: 20px 8px 20px 4px;
	padding: 0px 0px 0px 124px;
	width: 900px;
	height: 100px;
	background: rgb(225, 225, 225) url(../images/assa_logo_2016.png) top left no-repeat;
}

/* Content Titles */
p.content-title {
	font-size: 30px;
	color: rgb(192, 192, 192);
	margin: 0;
}
/* Content Titles Dark */
p.content-title.dark {
	color: rgb(45, 45, 45);
}
/* Content Message (Underneath the Title) */
p.content-message {
	margin: 0;
	font-size: 16px;
	letter-spacing: 2px;
	color: rgb(192, 192, 192);
	vertical-align: middle;
}
/* Content Message Dark */
p.content-message.dark {
	color: rgb(45, 45, 45);
}
/* Content Message Dark Icon (Mini Gear) */

p.content-message.dark.icon {
	padding-left: 20px;
	background: url(../images/mini-gear.jpg) top left no-repeat;
}

/* Content Text */
p.text {
	margin :0;
	font-size: 14px;
	letter-spacing: 0.1em;
	line-height: 18px;
	vertical-align: top;
}





/* Content Text Small */
p.small
{
	font-size: 11px;
}
/* Content Summary (Before Bullet List) */
p.text.summary {
	display: block;
	height: 65px;
}

/* Basic Bullet List */
ul.bullet-list
{
	margin:0;
	padding: 0;
	list-style: none;
}
/* Bullet List Item */
ul.bullet-list li
{
	background: url(../images/bullet.jpg) 0px 7px no-repeat;
	letter-spacing: 0.1em;
	font-size: 13px;
	padding: 5px 15px;
}

/* Read More Button Style */
a.more {
	position: relative;
	float: left;
	display: block;
	width: 100px;
	height: 16px;
	text-decoration: none;
	color: rgb(45,45,45);
	text-align: center;
	padding-top: 0.6em;
	border-bottom: solid 1px #e5e5e5;
	border-left: solid 1px rgb(245, 245, 245);
	font-size: 10px;
	margin-bottom: 5px;
	margin-top: 30px;
}

/* Contact Information List */
ul.contact-list {
	background: url(../images/narrow-bottom.jpg) top right no-repeat;
	margin: 0;
	padding: 0;
	height: 315px;
	list-style: none;
}
/* Contact Information List Item */
ul.contact-list li
{
	font-size: 12px;
}
/* Contact List Label Item */
ul.contact-list li.label {
	padding: 2px 0px;
}
/* Contact List Additional Content Item (used for Multi-Line Items) */
ul.contact-list li.info {
	padding: 2px 100px;
}
/* Contact List Item Separator */
ul.contact-list li.separator {
	padding: 10px 0px;
	border-top: solid 1px rgb(245, 245, 245);
}
/* Contact List Label */
ul.contact-list li.label span {
	display: block;
	width: 100px;
	float: left;
	position: relative;
	color: rgb(192,192,192);
	font-weight: bold;
}
/* Following Styles are same as those for Contact List and will be consolidated */
ul.form-layout {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.form-layout li {
	font-size: 12px;
}
ul.form-layout li.label {
	padding: 2px 0px;
}
ul.form-layout li.info {
	padding: 2px 150px;
}
ul.form-layout li.separator {
	padding: 10px 0px;
	border-top: solid 1px rgb(245,245,245);
}
ul.form-layout li.label span {
	display: block;
	width: 150px;
	height: 16px;
	padding-top: 0.2em;
	float: left;
	position: relative;
	color: rgb(192, 192, 192);
	font-weight: bold;
}
form input,
form textarea {
	border: 1px solid rgb(192, 192, 192);
}
form input {
	height: 16px;
}
/* Green/Gray Ball Spans for Yes/No Feature Options */
span.yes,
span.no {
	display: block;
	width: 16px;
	height: 16px;
	padding-left: 16px;
	padding-top: 0.4em;
}
span.yes {
	background: url(../images/bullet.jpg) left center no-repeat;
}
span.no {
	background: url(../images/bullet-gray.jpg) left center no-repeat;
}
/* Features Table */
table.features {
	font-size: 12px;
	font-weight: normal;
	width: 100%;
	vertical-align: middle;
	padding: 2px 2px 4px 2px;
}

table.features td {
	border-bottom: solid 1px rgb(235, 235, 235);
}
table.features td.subsection {
	color: rgb(192,192,192);
	border-bottom: solid 1px rgb(115, 185, 50);
	font-size: 20px;
	font-weight: bold;
	padding-left: 20px;
	background: url(../images/mini-gear.jpg) center left no-repeat;
}