/*****************************************************************/
/*
	Copyright 2014 (C) by ComCity LLC and SalesCart(tm)
	ALL RIGHTS RESERVERED
*/
/*****************************************************************/

/*****************************************************************/
/*
	Layout.css
	@import url(layout.css);
*/
/*****************************************************************/
html {
	font-family: "Open Sans",sans-serif;
	font-size: 11pt;
}

body {
	margin: 0;
	padding: 0;
	border: 0;
}
#container {
	padding: 0;
}
#masthead {
	width: auto;
	margin: 0;
	padding: 0;
	overflow: auto;
}
#navigation {
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	clear: both;
}
#column_l {
	position: relative;
/*	float: left; */
}
#column_r {
	float: left;
}
#footer {
	width: auto;
	clear: both;
	overflow: auto;
}
#pagefooter {
	width: auto;
	clear: both;
	overflow: auto;
}

.float_right {
	float:right;
}
/*****************************************************************/
/*	Generic Styles
*/
/*****************************************************************/

body {
	color: #000;
	font-family: "Open Sans",sans-serif;
	font-style: normal;
	background-color: #fff;
	height: 100%;
}
#container {
	width: 100%;
	height: 100%;
	margin: 0;
	background-color: #fff;
	position: relative;
	z-index: 1;
}
#masthead {
	font: "Arial";
	font-size: .9em;
	text-align: right;
	width: 100%;
	height: 20px;
/*	background-color: #333333;
*/
	background-color: #1a1a82;
}

/* LinkStyles for masthead */
#masthead a {
	color: #FFFFFF;
	font-size: .85em;
	font-weight:bold;	
	text-decoration: underline;
}
#masthead a:hover {
	color: #C0C0C0; 
	text-decoration: none;
}

/* Styles for Masthead */
#masthead img {
	float: left;
	margin: 0;
	padding: 0;
}
#masthead p {
	text-align: right;
	color: #000;
	margin: 2px 10px 2px;
	padding: 0;
}


#navigation {
	background-color: #ffffff;
	border-collapse:collapse;

	/*
	height: 52px;	
		background-color: #1a1a82;
		overflow: hidden;
		position:relative; 
    	z-index: 1;*/
}
#nav_divider{
	height: 3px;
	width: 100%;
	background-color: #f48904;	
}

#page_content {
	position: relative;
	z-index:2;
	padding: 0;
	width: 100%;
	height: 100%;

	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCAA77;
}

#page_content_back {
	position: relative;
	background-color:#f0eeee;
	
	background-image:url('../images/grayparchment_back.jpg');
	background-size: cover; 
	z-index: 2;
	
	width: 100%;
	height: 100%;
	top: 0px;
		
	margin: 0px;
	padding: 0px 0px 15px 0px; 
	
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCAA77;
}

#page_content_alt {
	
    background: url('../images/grayparchment_back.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
}

#column_main {
	/*position: relative; 
	background-color: #fff;
	margin: 0 150px 0 150px;*/

	position: relative;
	width: 93%;
	left: 50px;
	top: 0px;
		
	padding: 0;
	color: #393939;
	background-color: white;
}

#column_padded {
	position: relative;
	width: 90%;
	left: 50px;
	top: 0px;
		
	margin: 10px 0 10px 0;
	padding: 5px 15px;

	color: #393939;
	background-color: white;
}

#column_nopadded {
	position: relative;
	top: 0px;
		
	margin: 10px 0 10px 0;
	padding: 5px 15px;

	color: #393939;
	background-color: white;
}

#SalesCart-Milestones {
	width:65%;
	height:65%;
}


#iframe_container {
	position: relative;
	width: 90%;
	left: 50px;
	top: 0px;
	
	height: 100%;
/*
	margin: 10px 0 50px 0;
	padding: 5px 15px;

	color: #393939;
	background-color: white;
*/
	
    background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
    overflow: hidden;	
}


#column_left {
	/*
style="position: relative; width: 65%; height: 100%; z-index: 1; left: 0px; top: 0px; float: left;"	
	position: relative; 
	margin: 0 150px 0 150px;
	padding: 0 2%;
	position: relative;

	*/

	position: relative;
	margin: 10px 0 10px 0;
	padding: 0 2%;

	z-index: 3;
	top: 0px;
	background-color: #fff;

	width: 65%;
	height: 100%;	
	color: #393939;
	
	/*
	border-width: 5px;
	border-color: black;
	border-style: solid;
	*/
}
#column_right {
/*
<div style="position: relative; width: 25%; height: 100%; z-index: 1; top: 370px; float: right;" id="RightContentLayer">
*/
	position: absolute;
	z-index: 4;
	float: right;
	right: 50px;
	top: 500px;
	width: 20%;
	height: 300px;
	margin: 0;
	padding: 10px;
	background-color: #fff;
	

	/*
	background-color: #333333;
	background-color: #cbe3fc;
	top: 0px;
	*/

}
#Upgrade-table {
border-width: 0px;
border-style: none;
width: 90%;
border-collapse: collapse;
border:0px;
 }

#ccPhotoCredit {
	font-size: .7em;
	float: right;
	margin: 0 40px 0 0;
	position: relative;
	border-width: 0px;
	vertical-align: middle;	
	}
	
/*****************************************************************/
/*	Navigation
*/
/*****************************************************************/

/* Styles for Navigation 
#navigation ul {
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
#navigation li {
	float: left;
}
#navigation a {
	color: #000;
	text-decoration: none;
	display: block;
	padding: 5px;
	border: 1px solid #ca7;
	background-color: #dc8;
}
#navigation a:hover {
	color: #000;
	text-decoration: none;
	border: 1px solid #ed9;
	background-color: #ed9;
}
*/

/*****************************************************************/
/* Navigation bar style via HTML5 */
/*****************************************************************/
/* References: 
http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
*/


nav{
	font-family:Arial, Helvetica, sans-serif;
	font-size: .95em;
    list-style:none;

    height: 50px; 
    /*       
    Clear floats
    float:left;
	*/
    width:100%;
    /* Bring the nav above everything else--uncomment if needed.   */
    position:relative; 
    z-index:10;

}

/* First drop down menu */
nav ul ul {
	font-size: .95em;
	display: none;
		/*background: -webkit-box-shadow: 0 10px 6px -6px #777;
		background: -moz-box-shadow: 0 10px 6px -6px #777;*/
		box-shadow: 8px 8px 10px -3px #777;

}

/* Main menu hover */
nav ul li:hover > ul {
		display: block;
	}

/* Main menu */
nav ul {
	/*background: #efefef; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;  */
	list-style: none;
	margin-top: 5px;
	position: relative;
	display: inline-table;
}
nav ul:after {
	content: "";
	clear: both;
	display: block;
	}
	
/* Main menu items */
nav ul li {
	float: left;
			border-radius: 8px 8px 0 0;

/* Hover Main menu items */
}
nav ul li:hover {

/*	background: #dfdfdf;
	background: #f3cea4;
*/
	background: #f2f2f2;
	
	background: linear-gradient(top, #f2f2f2 0%, #dfdfdf 40%);
	background: -moz-linear-gradient(top, #f2f2f2 0%, #dfdfdf 40%);
	background: -webkit-linear-gradient(top, #f2f2f2 0%,#dfdfdf 40%);
		transition-delay: initial;
	}

/* Hover Main menu Text */
nav ul li:hover a {
/*	font-weight: bold; */
	text-decoration: none;
	color: #393939;
	}
	
nav ul li a {
	display: block;
	padding: 15px 15px;
	color: #000000;
	text-decoration: none;
	/*
	color: #ffffff;
	*/
	}
	
/* drop down arror */	
nav ul li > a:not(:last-child):after  {
	content: ' ▾'; 
	color: #e88210;	
	}  

nav ul ul {
	background: #ffffff;
	border-radius: 0px;
	padding: 0;
	position: absolute;
	top: 90%;
		/*background: -webkit-box-shadow: 0 10px 6px -6px #777;
		background: -moz-box-shadow: 0 10px 6px -6px #777;
		box-shadow: 8px 8px 10px -3px #777;*/

}

nav ul ul li {
	float: none; 
	border-top: 1px solid #c9cbcf;
	border-left: 1px solid #c9cbcf;
	border-bottom: 1px solid #a2a8b0;
	position: relative;
			border-radius: 0px;

	}
nav ul ul li a {
	padding: 8px 25px;
	color: #fff;
	}	

nav ul ul li:hover {
	background: #dfdfdf;
	}
	
nav ul ul li a:hover {
	background: #0055aa;
	color: #ffffff;	
	}

nav ul ul ul {
	position: absolute;
	top:0%;
	left: 100%;
	}
	
/* Added the next two CSS style to try and fix 3rd menu truncating
*/	

nav ul ul li ul li {
	position: relative;
	padding: 0;
	}
		
nav ul ul li ul li a {
	padding: 8px 25px;
	min-width: 90px;
	text-align: center;
	}
	

	/*
.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	
	border-top: 5px solid black;
	position: relative;
	right: 100%;
}
	*/

/*****************************************************************/
/*	Content
*/
/*****************************************************************/
h1 {
	font-size: 2.75em;
	font-weight: normal;
	font-stretch: condensed;
	color: #393939;
}
h2 {
	font-size: 1.75em;
	color: #d47602;
}
h3 {
	font-size: 1.5em;
	color: #1a1a82;
}
h4 {
	font-size: 1.40em;
	font-weight: normal;
	font-stretch: condensed;
	/*color: #939292;*/
	color: #838383;	
}
h5 {
	font-size: 1.2em;
	font-weight: normal;
	font-stretch: condensed;
	color: #393939;
}
h6 {
	font-size: 0.9em;
	color: #838383;
	font-weight: normal;
	font-stretch: expanded; 
	font-style: italic;	
}

/* Styles for Footer */
#footer {
/*	background-color: #e88210; 
	background-color: #f3cea4;
position: relative;
*/
position:static;
background-color: #333333;
	/*padding-bottom: 5px;
}
333;
	*/
}

#footer p {
	font: normal normal bold .9em Arial, Helvetica, sans-serif;
	text-align: center;
	color: #C0C0C0;
	margin: 10px;
	padding: 1px;
}


.footerText {
	font: normal normal .9em Arial, Helvetica, sans-serif;
	text-align: left;
	color: #C0C0C0;
	margin: 5px;
	padding: 8px;
}

.footerHeaderText {
	font: normal normal bold 1.0em Arial, Helvetica, sans-serif;
	text-align: left;
	color: White;
	margin: 5px;
	padding: 8px;
}


#footer a {
	color: #C0C0C0;
	text-decoration: none;
}
#footer a:hover {
	color: #000;
	text-decoration: none;
}


#footer Table {
    margin-left:auto; 
    margin-right:auto;
    }


/* Styles for Page Footer */
#pagefooter {
position:static;
	background-color: #C0C0C0;
/*	height: 110px;*/
}

#pagefooter Table {
    margin-left:auto; 
    margin-right:auto;
    font-size: .75em;
    background-color:white;
    border: 1px black solid;
    }

#pagefooter Table th,td {
    border-spacing: 2px;
    padding: 3px;
    }


.socialfooter p {
position: relative;
	text-align: center;
	vertical-align:central;
}

#pagefooter p {
position: relative;
	font-size: .8em;
	text-align: center;
	color:black;
	padding:0px;
	margin-top: 10px;
	margin-bottom: 8px;
/*	
	margin: 5px;
	padding: 1px;
	color: #C0C0C0;
*/

}

/* Styles for Links */
a {
	color: #0055aa;
	text-decoration: underline;
}
a:hover {
	color: #000;
	text-decoration: underline;
}
.style_bold {
	font-weight: bold;
}
.style_italic {
	font-style: italic;
}

/* Other Styles */
.accentbox {
	border: 2px #d47602;
	border-style: solid;
	padding: 10px;
	background-color: #d7ebff;	
	color: #333333;
}

.accentbox2 {
	border: 2px #d47602;
	border-style: solid;
	padding: 10px;
	background-color: #FAFAFA;	
	color: #333333;
	font-size: 10pt;
}

.PageTitle-Large {
	font-size:20pt;

}

.PageTitle-Med {
	font-size: 14pt;
	
}

.PageTitle-Sm {
	font-size: 12pt;
	color: #292929;
	
}

.PageTitle-ExtraSm {
	font-size: 10pt;
	
}

.centerImage {
	width: 100%;
	height: 100%;   
}

.pageImage  {
	width: 100%; 
	height: 100%;
}

/* http://www.bestcssbuttongenerator.com/ */

.OrangeButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #f9eca0;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f9eca0;
	box-shadow:inset 0px 1px 0px 0px #f9eca0;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f0c911), color-stop(1, #e68312));
	background:-moz-linear-gradient(top, #f0c911 5%, #e68312 100%);
	background:-webkit-linear-gradient(top, #f0c911 5%, #e68312 100%);
	background:-o-linear-gradient(top, #f0c911 5%, #e68312 100%);
	background:-ms-linear-gradient(top, #f0c911 5%, #e68312 100%);
	background:linear-gradient(to bottom, #f0c911 5%, #e68312 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#e68312',GradientType=0);
	background-color:#f0c911;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
	border:1px solid #e65f44;
	display:inline-block;
	cursor:pointer;
	color:#1a1a82;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 18px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ded17c;
}
.OrangeButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e68312), color-stop(1, #f0c911));
	background:-moz-linear-gradient(top, #e68312 5%, #f0c911 100%);
	background:-webkit-linear-gradient(top, #e68312 5%, #f0c911 100%);
	background:-o-linear-gradient(top, #e68312 5%, #f0c911 100%);
	background:-ms-linear-gradient(top, #e68312 5%, #f0c911 100%);
	background:linear-gradient(to bottom, #e68312 5%, #f0c911 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e68312', endColorstr='#f0c911',GradientType=0);
	background-color:#e68312;
}
.OrangeButton:active {
	position:relative;
	top:1px;
}

.GreyButton {
	-moz-box-shadow: 3px 4px 6px 0px #899599;
	-webkit-box-shadow: 3px 4px 6px 0px #899599;
	box-shadow: 3px 4px 6px 0px #899599;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
	background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
	background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
	background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0);
	background-color:#ededed;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	border:1px solid #d6bcd6;
	display:inline-block;
	cursor:pointer;
	color:#1a1a82;
	font-family:Arial;
	font-size:17px;
	font-weight:bold;
	padding:4px 20px;
	text-decoration:none;
	text-shadow:0px 1px 0px #e1e2ed;
}
.GreyButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #bab1ba 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%);
	background:-o-linear-gradient(top, #bab1ba 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #bab1ba 5%, #ededed 100%);
	background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed',GradientType=0);
	background-color:#bab1ba;
}
.GreyButton:active {
	position:relative;
	top:1px;
}


/*****************************************************************/
/* Pricing Page													 */
/*****************************************************************/

#column_pricing {
	background: #000 url('../pricing/Shopping_cart2.jpg') left top fixed no-repeat;
	font: 13px Georgia, Serif; color: #ccc;
	padding: 0px;
	margin: 0px;
}

.SCLogo {
	width: 165px; height: 137px; margin: 10px auto 50px auto; position: relative;
	background: url('../pricing/SalesCart_logo_dim.png'); text-indent: -9999px;
}
#pcontainer {
	width: 940px; margin: -115px auto; padding: 110px 10px 50px 10px;
	background: url('../pricing/bg-pattern.png');
	box-shadow: 0px 0px 15px #000;
}
.featureTable {
	border-spacing: 10px 0px;
}
.feature {
	width: 183px; text-align: right;
	font-size: 14px; font-weight: normal; color: #fff; 
	padding: 10px;
	
}
.SCfree, .SCarty, .SCmerc, .SCunlim {
	background: rgba(255,255,255,0.05);
	text-align: center; padding: 10px;
}
.CloudTitles {
	font-size: 20px; font-weight: normal; color: #fff; 
}
table.featureTable tr:hover {
	background: rgba(255,255,255,0.05);
}
	table.featureTable thead tr:hover {
		background: none;
	}
.faqTable {
	border-spacing: 10px 0px;
	width: 962px;
	margin: 85px auto 90px auto;
	background-color: #FFFFFF;
	color: #666666;
	text-align: left;	
}

.FAQ {
	text-align: left;
	vertical-align: top;
	width: 50%;
 	padding: 10px;
	
}
.QuestTitle {
	font-family: Georgia;
	font-weight: bold;
	font-size: medium;
	color: #333333;	
}
.Underline {
	text-decoration: underline;
}
/*****************************************************************/
/* Examples													 */
/*****************************************************************/
.HR_fadded {
    border: 0;
    height: 2px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}



/*****************************************************************/
/* Home Page													 */
/*****************************************************************/


#Home-intro {
	border: thin solid #000000;
	padding: 10px;
	background-color: #E9E9E9;	
}

/*****************************************************************/
/* Table Styles: 												 */
/* Used in:  /contact/form2email.aspx							 */
/*****************************************************************/

.GetStart_Step {
			border-style: solid;
			border-width: thin;
			border-color: inherit;
			width: 90%; 	
	}
			
.style1 {
	width: 100%;
    }
.style2	{
	width: 25px;
	}
.style4	{
	width: 288px;
	}
.style5 {
	width: 300px;
	text-align: right;
}

.ErrorText {
	color: #B40404;
	font-size: .9em;
}

/*****************************************************************/
/* iframe Store Styles
*/
/*****************************************************************/

.StoreIFrame {
/** IE 8 **/
   background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
	scrolling="no";      
    
/** New Way: Not 100% supported Yet **/
	overflow: hidden;
	
/** Old way **/
	seamless='seamless';
	
}

/*****************************************************************/
/*	MOBILE Responsive Styles
	http://iphone-emulator.org/
*/	
/*****************************************************************/


/*
Dealing with responsive design
Overview
http://www.developerdrive.com/2012/01/developing-a-responsive-website-background-images/

Using specific style sheets
http://www.mobilexweb.com/blog/iphone4-ios4-detection-safari-viewport
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

Help Forum:
 http://css-tricks.com

Emulator:
 http://iphone-emulator.org/
 
Using @media
This next definition doesn't allow the background to get any smaller
than a predefined size (640x426px in this case). Change the values
here to match your background image size. The configuration in the
flexi-background javascript file should also match these values.
*/
 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
	#MainBanner  {
	width: 550px ; 
	height: 300px;
	text-align: center; 
	}

	.pageImage  {
	width: 550px ; 
	height: 200px;
	text-align: center; 
	}

/*	
	content:url("Cloud/images/Mainscreen-iphone.png") " " ; 
	background-size: 640px 426px !important;
	-moz-background-size: 640px 426px !important;
	-webkit-background-size: 640px 426px !important;
    background-attachment: scroll;
	#OurLogo {
	}
*/
	#Pie-Ad {
	width: 95%;
	height: 95%;
	}

	#column_main {
	left: 15px;
	}
	
	#column_padded {
	left: 14px;
	}

	#SalesCart-Milestones {
	width:95%;
	}
	.accentbox {
	width: 90%;
	}

	#Upgrade-table {
	width: 70%;
	}
	
	nav {
	visibility:hidden;
	}
	
	#pcontainer {
	width: 535px; margin: -115px auto; padding: 110px 0px 50px 0px;
	background: url('../pricing/bg-pattern.png');
	box-shadow: 0px 0px 15px #000;
	}

	.faqTable {
	border-spacing: 10px 0px;
	width: 530px;
	margin: 85px auto -20px auto;
	background-color: #FFFFFF;
	color: #666666;
	text-align: left;	
	}
	
	.featureTable {
	border-spacing: 2px 2px;
	width:530px;
	}	
	
	.feature {
	visibility:hidden;
	display: none;	
	}
	
	#RegisterSC {
	width: 98%;
	height: 98%;
	}

	.Iphone-Hide {
	display: none;	
	visibility: hidden;
	}
	
	h1 {
	font-size: 2.25em;
	font-weight: normal;
	font-stretch: condensed;
	color: #393939;
}


}

 
/*
The next 2 definitions are for support in iOS devices.
 Since they don't recoginze the 'cover' keyword for background-size
 we need to simulate it with percentages and orientation


@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
#MainBanner {
display:none !important 
content:url("Cloud/images/Mainscreen-iphone.png");
background-size: 500px 373px;
-moz-background-size: 500px 373px;
-webkit-background-size: 500px 373px;

     background-attachment: fixed;

}
}
 
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) {
#MainBanner {
display:none !important 
content:url("Cloud/images/Mainscreen-iphone.png");
background-size: 500px 373px;
-moz-background-size: 500px 373px;
-webkit-background-size: 500px 373px;

     background-attachment: fixed;

}
}
*/