/* 
  ------------------------------------------------
  PVII Affinity
  Copyright (c) 2013 Project Seven Development
  www.projectseven.com
  Boardroom Theme
  ------------------------------------------------
*/

body {
	background-color: #ECECEC;
	background-image: url(../images/page_bg.jpg);
	font-family: "Segoe UI", Arial, sans-serif;
	font-size: 100%;
	margin: 0px 0px 30px 0px;
}


/*Drop Menu Magic Adjustments*/
.p7DMM03 {
	font-family: Optima, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
}
.p7DMM03.p7DMM.p7dmm-left {
	padding-left: 20px;
}
.p7DMM03.p7DMM.p7dmm-right {
	padding-right: 20px;
}


/*Baseline Adjustment for images needed with strict DOCTYPE*/
img {vertical-align: bottom;}


/*Logo and Banner*/
#logo {
	font-family: Arial, Helvetica, sans-serif;
	padding: 10px 20px;
	position: relative;
	z-index: 10;
	background-color: #2D2926;
	color: #E9DDAF;
	letter-spacing: 1em;
	text-transform: uppercase;
	font-size:10px;
}

#banner {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}


/*Utility Rules for images. Scalable class makes images scale with window size.*/
img.scalable {
	height: auto !important;
	width: auto !important;
	max-width: 100%;
	vertical-align: bottom;
}
/* 
Add the fancy class to the scalable class to add a drop shadow
<img class="scalable fancy"...>
*/
.fancy {
	border: 1px solid rgba(255,255,255,.5);
	box-shadow: 0px 0px 20px rgba(0,0,0,.5);
}
/* 
Add the accented class to the scalable class to add eounded corners and a border.
<img class="scalable accented"...>
*/
.accented {
	border-radius: 5px;
	border: 1px solid #222;
}
.accentedparagraph {
	border-radius: 5px;
	border: 1px solid #222;
	padding: 10px;
	font-size: .9em;
}



/*Layout Wrapper*/
#layout {
	max-width: 1200px;
	margin-top: 16px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	background-color: #FFF;
	box-shadow: 0px 0px 20px rgba(0,0,0,.5);
	border-radius: 0px 0px 7px 7px;
}

/*Default Row Structures*/
.affinity-row {
	padding: 0px;
}
/*This rule assigns a gray gradient background to every other row*/
.affinity-row:nth-child(even) {
	background-color: #EEE;
	background-image: -webkit-linear-gradient(#EEE, #CCC);
	background-image: linear-gradient(#EEE, #CCC);
}
/*Turns off the Background for Nested Rows*/
.affinity-row .affinity-row:nth-child(even) {
	background-color: transparent;
	background-image: none;
	background-image: none;
}

/*Clear Fix to Clear Floats*/
.affinity-row:after {
	visibility: hidden;
	display: block;
	content: "\0020";
	clear: both;
	height: 0;
}

/*Strctural wrapper for 2-column row*/
.affinity-row .column-half {
	width: 50%;
	float: left;
}

/*Strctural wrapper for main content in nested 2-column row*/
.affinity-row .column-main {
	width: 60%;
	float: left;
}

/*Strctural wrapper for sidebar content in nested 2--column row*/
.affinity-row .column-sidebar {
	width: 40%;
	float: left;
}

/*Strctural wrapper for 3-column row*/
.affinity-row .column-third {
	width: 33.3333333%;
	float: left;
}
/*Strctural wrapper for 4-column row*/
.affinity-row .column-fourth {
	width: 25%;
	float: left;
}
/*Strctural wrapper for 5-column row*/
.affinity-row .column-fifth {
	width: 20%;
	float: left;
}

/*Strctural wrapper for 2-column sidebar-left row*/
.affinity-row.sidebar-left .column-2 {
	width: 83%;
	float: left;
}
.affinity-row.sidebar-left .column-1 {
	width: 17%;
	float: left;
}
.affinity-row.sidebar-left .column-1 .column-content {
	/*font-size: 1em;
	line-height: 1.5;*/
}
.affinity-row.sidebar-left .column-2 .column-content {
	/* [disabled]font-size: .9em; */
}

/*Strctural wrapper for 2-column sidebar-right row*/
.affinity-row.sidebar-right .column-1 {
	width: 75%;
	float: left;
}
.affinity-row.sidebar-right .column-2 {
	width: 25%;
	float: left;
}
.affinity-row.sidebar-right .column-content {
	line-height: 1.5;
}
.affinity-row.sidebar-right .column-2 .column-content {
	font-size: .9em;
}
/* Content formatting for 2-column main/sidebar content */
.affinity-row .column-main .column-content {
	line-height: 1.4em;
}

.affinity-row .column-sidebar .column-content {
	line-height: 1.4em;
}
.left-border {
	border-left: 1px solid #000;
}
.right-border {
	border-right: 1px solid #000;
}
.left-right-border {
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}

/*Column Content*/
.column-content {
	padding-top: 15px;
	padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 15px;
}
.affinity-row.sidebar-right .column-content,
.affinity-row.sidebar-left .column-content,
.affinity-row.thirds.full-height .column-content {
	padding: 15px;
}
/*Padding Management for Nested Rows*/
.no-pad-left-top-bottom {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	padding-left: 0px !important;
}
.no-pad-right-top-bottom {
	padding-top: 0px !important;
	padding-right: 0px !important;
	padding-bottom: 0px !important;
}
.no-pad-top-bottom {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}


/*Headings*/
h1, h2, h3, h4 {
	font-family: Optima, Arial, Helvetica, sans-serif;
	line-height: normal;
	margin: 30px 0px 0px 0px;
}
.column-content h1:first-child,
.column-content h2:first-child,
.column-content h3:first-child,
.column-content h4:first-child {
	margin-top: 10px;
}

h1 {
	font-size: 1.6em;
	font-family: Arial, Helvetica, sans-serif;
	color: #703924;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 0;
}
h2 {
	font-size: 1.4em;
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
	color: #844A11;
}
h3 {
	font-size: 1.2em;
	margin: 30px 0 0 0;
	font-family: Arial, Helvetica, sans-serif;
}
h4 {
	font-size: 1.1em;
	margin: 20px 0 0 0;
	font-family: Arial, Helvetica, sans-serif;
}
/*Use this class when you add a heading inside a row that contains multiple columns.*/
.inner-row-heading {
	position: relative;
	top: 20px;
	margin: 0px 0px 0px 24px;
}

/* Main Content Links */
p a:link, td a:link {
	color: #834807;
}
p a:visited, td a:visited {
	color: #834807;
}
p a:hover, td a:hover {
	color: #DD9F20;
}
.bodylist li a:link{
	color: #834807;
}
.bodylist li a:visited {
	color: #834807;
}
.bodylist li a:hover {
	color: #DD9F20;
}

/*r and Copyright*/
.footer {
	color: #DCDAD4;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	border-radius: 0px 0px 5px 5px;
	border-top: 1px solid;
	border-color: #726561;
	background-color: #2D2926 !important;
	background-image: -webkit-linear-gradient(#2D2926, #2D2926) !important;
	background-image: linear-gradient(#2D2926, #2D2926) !important;
}
.footer h3, .footer h4 {
	font-family: Optima, "Segoe UI", Arial, sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	margin: 10px 0px 0px 0px;
}
.footer ul {
	margin: 0px;
	padding: 0px;
	margin-top: 10px;
}
.footer li {
	list-style-type: none;
	line-height: 1.75;
}
.footer a {
	color: #DCDAD4;
}
.footer a:hover, .footer a:focus {
	color: #ECC625;
}
.copyright {
	font-size: 0.85em;
	text-transform: uppercase;
	clear: both;
	padding: 5px 10px 15px 20px;
}

.footerright {
	text-align: right;
}

/*Assign this class to set large text and the stylish Cuprum font*/
.column-content.largesse, .largesse {
	font-size: 1.25em;
	line-height: 1.75em;
	font-family: Optima, Arial, Helvetica, sans-serif;
}
/*Use this class to asign a black accent box around your content*/
.affinity-row .blast {
	font-family: Optima, Arial, Helvetica, sans-serif;
	font-size: 1.25em;
	line-height: 1.75;
	color: #BBB;
	border-radius: 0px 0px 10px 10px;
	padding: 28px 36px;
	background: -webkit-linear-gradient(#333, #111);
	background: linear-gradient(#333, #111);
	background-color: #333;
	margin-bottom: 20px;
}
/*Add the gray class to the blast class to make your accent box gray*/
.affinity-row .blast.gray {
	background: -webkit-linear-gradient(#EEE, #AAA);
	background: linear-gradient(#EEE, #AAA);
	background-color: #DDD;
	color: #000;
}
.affinity-row.sidebar-left .column-content .blast,
.affinity-row.sidebar-right .column-content .blast,
.full-round {
	border-radius: 6px !important;
}

/*Column Colors */
.nav {
	background-color: #C1BBB0;
	background-image: url(../images/nav_bg.gif);
}
.sidebar-right {
	background-color: #EAE8E3;
	background-image: url(../images/sb_bg.gif);
}
.red {
	background-color: #D14747;
	background-image: -webkit-linear-gradient(#D04444, #B42D2D);
	background-image: linear-gradient(#D04444, #B42D2D);
}

.blue {
	background-color: #78A6EB;
	background-image: -webkit-linear-gradient(90deg, #78A6EB, #5992E6);
	background-image: linear-gradient(90deg, #78A6EB, #5992E6);
}
.gray {
	background-color: #ABABAB;
	background-image: -webkit-linear-gradient(90deg, #999, #BBB);
	background-image: linear-gradient(90deg, #999, #BBB);
}
.green {
	background-color: #81C796;
	background-image: -webkit-linear-gradient(180deg, #9AD1AB, #65BA7E);
	background-image: linear-gradient(180deg, #9AD1AB, #65BA7E);
}
.black {
	background-color: #111;
	color: #BBB;
}
.white {
	background-color: #FFF;
}
.black, .white {
	border: 1px solid rgba(0,0,0,.75);
}

/*PHOTOS*/
.photoleft {
	float: left;
	margin-right: 10px;
}
.photocenter {
	float: none;
	text-align: center;
}
.photoright {
	float: right;
	margin-left: 10px;
}
.photoinline {
	float: none;
	padding-left: 10px;
}

.borderedtable {
	border: 1px solid #999;
	background-color: #F0EFE8;
	margin-top: 12px;
}
.heavyborderedtable {
	border: 1px solid #2D2926;
	background-color: #F0EFE8;
}

.borderedtableright {
	float: right;
	border: 1px solid #999;
	margin-left: 10px;
}
.borderedtableleft {
	float: left;
	border: 1px solid #999;
	margin-right: 10px;
}
.formfield {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.formlabel {
	font-size: 12px;
	font-weight: bold;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
}
.tableheader {
	font-size: 1em;
	font-weight: bold;
	color: #FFF;
	background-color: #433F36;
}

.tableheader a:link {
	color: #FFFFFF;
    text-decoration: underline;
}
.tableheader a:visited {
	color: #FFFFFF;
    text-decoration: underline;
}
.tableheader a:hover {
	color: #DD9F20;
    text-decoration: underline;
}
.tablelabel {
	font-size: 1em;
	font-weight: bold;
	color: #714F2D;
}
.tablecell {
	font-size: 1em;
	line-height: normal;
	background-color: #F3F1E9;
}
.tablecell_alt {
	font-size: 1em;
	line-height: normal;
	background-color: #FAF9F5;
}
.tablecell_hdr {
	font-size: 1em;
	line-height: normal;
	background-color: #DEDBCF;
}

.tabletext {
	font-size: 1em;
	line-height: normal;
}
.producttext {
	font-size: 1em;
	line-height: normal;
	font-family: Arial, Helvetica, sans-serif;
}
.paragraphhead {
	font-size: 1.1em;
	margin: 0;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}

.sidebarheader {
	font-size: 12px;
	margin: 0;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}

.sidebartable {
	float: right;
	background-color: #F0EFE8;
	/* [disabled]font-family: Arial, Helvetica, sans-serif; */
	margin-left: 10px;
	border: 1px solid #999;
	font-size: 0.9em;
}
.producttable {
	background-color: #F0EFE8;
	border: 1px solid #999;
}

.sidebartext {
	font-size: 12px;
	line-height: normal;
	font-family: Tahoma, Geneva, sans-serif;
}

.inlineborderedparagraph {
	float: right;
	background-color: #F0EFE8;
	font-family: Arial, Helvetica, sans-serif;
	border: 1px solid #999;
	padding: 10px;
}
.borderedparagraph {
	background-color: #E7DCBF;
	font-family: Arial, Helvetica, sans-serif;
	border: 1px solid #999;
	padding: 10px;
	text-align: center;
}

.inlinetpmparagraph {
	float: right;
	background-color: #E3E2D5;
	font-family: Arial, Helvetica, sans-serif;
	border: 1px solid #999;
	padding: 10px;
}

.small_link {
	font-size: .8em;
}
.caption {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
.required {
	color: #F00;
}

.mediaarea {
	background-color: #C0BAAF;
	color: #FFF;
	margin: 10px;
	padding: 10px;
	border: 1px solid #000;
	text-align: center;
}

.header {
	font-size: 1.2em;
	margin: 0;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
}
.normallineheight {
	line-height: normal;
}

.nomargintop {margin-top: 0;}

.ordertable {
	line-height: normal;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #FACD29;
	border: 1px solid #B3AC93;
	margin-bottom: 10px;
	font-weight: bold;
	margin-top: 10px;
	color: #000000;
	font-size: 14px;
}
.productdescription {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.NEW {
	font-size: 1.2em;
	font-weight: bold;
	text-transform: uppercase;
	color: #CC3300;
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
}
.sectionhead {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	color: #E9E4C7;
	background-color: #593D32;
	padding: 5px;
}

.linkboxtablecell {
	border: 1px solid #999;
}
.compatible {
	color: #F8F8F8;
	font-weight: bold;
	padding: 5px;
	background-color: #16A316;
	text-transform: uppercase;
}
.not-compatible {
	color: #FFFFFF;
	font-weight: bold;
	padding: 5px;
	background-color: #D30303;
}
.bolduppercase {
	font-weight: bold;
	text-transform: uppercase;
}
.column-content .p7ehc-sbl .affinity-row.halves .column-sidebar.sidebar-right {
}
.column-sidebar.sidebar-right .column-content p  {
	/* [disabled]font-size: 0.9em; */
}




/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/
@media only screen and (min-width: 0px) and (max-width: 700px) {
body {
	margin: 0px;
}
.p7DMM03.p7DMM.p7dmm-left, .p7DMM03.p7DMM.p7dmm-right {
	padding: 0px !important;
}
#layout {
	max-width: none;
	padding: 0px;
}
.column, .column-1, .column-2, .column-3,
.column-half, .column-third, .column-fourth,
.column-fifth {
	float: none !important;
	width: auto !important;
}
.column-content {
	height: auto !important;
	max-height: 888678px;
	border: none !important;
}
.footerright {
	text-align: left;
}
}
/*Medium windows - reduce padding content padding*/
@media only screen and (min-width: 700px) and (max-width: 980px) {
#layout {max-width: none;}
}
