@charset "utf-8";

* {margin:0; padding:0;}
a {text-decoration:none;}
p {font-size: 12px; line-height: 20px;}
td {vertical-align:top;}
img {border:none;}
.imagereplacement {text-indent: -9999px; background-repeat:no-repeat; overflow:hidden;}	
h1{font-weight:bold; text-transform:uppercase;}

html, body, #container {height: 100%;}
body > #container {height: auto; min-height: 100%;}

body {
	font: 100% Arial, Verdana, Helvetica, sans-serif;
	text-align: center;
	color: #000000;
	background-repeat: repeat-x;
	background-color:#FFFFFF;
}
#mainbody {background-image:url(../images/mainbg.jpg);}
#homebody {background-image:url(../images/homebg.png);}

#container {
	width: 960px;
	margin: 0 auto;
	text-align: left;
	padding-bottom: 75px; 
}

/*Header CSS-------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
#header {
	background: #000000; 
	height: 100px;
}
#rightheader{
	width:620px;
	float:right;
}
#topnav{margin:20px 0 5px 0; height:21px;}
#navigation {float:left; padding-top:5px; width: 440px;}
#navigation li {float:left; margin-right:20px;}
#navigation a{
    display:block;
	background-image:url(../images/nav.png);
	background-repeat:no-repeat;
    height:11px; 
}
a.howitworks{width:105px; background-position: -321px 0px;}
a.howitworks:hover{width:105px; background-position: -321px -11px;}
a.features{width:65px; background-position: 0px 0px;}
a.features:hover{width:65px; background-position: 0px -11px;}
a.designs{width:57px; background-position: -65px 0px;}
a.designs:hover{width:57px; background-position: -65px -11px;}
a.company{width:69px; background-position: -122px 0px;}
a.company:hover{width:69px; background-position: -122px -11px;}
a.pricing{width:130px; background-position: -191px 0px;}
a.pricing:hover{width:130px; background-position: -191px -11px;}
#logo {
	float:left;
	margin: 27px;
} 
#search{
	border: 1px #706655 solid;
	width: 125px;
	height:13px;
	padding: 3px;
	font-size:10px;
	color: #e5ddc9;
	background-color: #000000;
	float:left;
}
#searchbutton{
	float:left;
}
#searchbox{
	float:right;
}
#navdot{
	height:1px;
	background-image:url(../images/navdot.png);
	background-repeat:repeat-x;
	clear:both;
}
#bottomnav{
	background-repeat:no-repeat;
	background-position:left;
	margin-top:3px;

}
#bottomnav img{
	float:left;
	margin:6px 10px 0 0;
}
#bottomnav a{
	display: inline;
	font-size: 8px;
	margin-right: 8px;
	color:#FFFFFF;
}
#bottomnav a:hover {color:#7b5d46;}



/*INTRO ANIMATION SECTION------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/

#introanimation{
	background-color: #000000;
	height: 405px;
	margin: 10px 0;
	padding: 10px 10px 0px 10px;	
}
.animationcontainer div{
	height:365px;
	width: 940px;
	overflow:hidden;
}

#bottomnavigation {
	margin: 9px 0px 0 0px;
}
#bottomnavigation a{
	display:block;
	height:19px;
	background-image:url(../images/animationtitle.png);
	background-repeat:no-repeat;
	float:left;
	margin-top: 3px;
	cursor: pointer;
}

#bottomnavigation img{float:left;}
a.effectivetag{width:108px; margin-right:126px; background-position: 0px 0px;}
a.effectivetag:hover{background-position: 0px -19px;}
a.creativetag{width:106px; margin-left: 10px; margin-right:118px; background-position: -108px 0px;}
a.creativetag:hover{background-position: -108px -19px;}
a.simpletag{width:93px; margin-left: 10px; margin-right:131px; background-position: -214px 0px;}
a.simpletag:hover{background-position: -214px -19px;}
a.affordabletag{width:127px; margin-left: 10px; margin-right:98px; background-position: -307px 0px;}
a.affordabletag:hover{background-position: -307px -19px;}

#effective{background-position: 0px -19px; display:none;}
#creative{background-position: -108px -19px;}
#simple{background-position: -214px -19px;}
#affordable{background-position: -307px -19px;}

#effectivebox{background-image:url(../images/animation/effectivebg.jpg); display:block;}
#creativebox{background-image:url(../images/animation/creativebg.jpg); display:none;}
#simplebox{background-image:url(../images/animation/simplebg.jpg); display:none;}
#affordablebox{background-image:url(../images/animation/affordablebg.jpg); display:none;}

/*INTRO TEXT/BOXES-------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
#introlargetext{
	background-image:url(../images/introlargetext.png);
	width:960px;
	height:30px;
	margin: 20px 0;
}
.introbox{
	border: #786f5f 1px solid;
	width: 308px;
	background-color: #e5ddc9;
	float:left;
}
.introbox p{
	margin: 5px 15px;
	font-size: 12px;
	line-height:20px;
}
.introboxsub p{
	margin: 5px 15px;
	font-size: 12px;
	line-height:20px;
}
.introbox img{
	margin: 0px 0px 10px 70px;
}
#introbox1{
	background-image:url(../images/whoweare.png);
	width:308px;
	height:44px;
}
#introbox2{
	background-image:url(../images/howitworks.png);
	width:308px;
	height:44px;
}
#introbox3{
	background-image:url(../images/letsgetstarted.png);
	width:308px;
	height:44px;
}
.animationlink{width:535px;height:176px;margin:100px 0 0 215px; display:block;}
.twttr{
	float:left;
}
/*MAIN TEXT/BOXES-------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
#maintitle{
	height:90px;
	padding: 10px 0 0 0;
}

#leftcontent{
	width: 660px;
	float:left;
	margin-top:20px;
}
#rightcontent{
	width: 270px;
	float: right;
	margin-top:20px;
}
#maincontent {
	width:960px;
	margin:20px 0;
	float: left;
}
#content p{
	margin: 0 0 20px 0;
}
.rightbox{
	border: #786f5f 1px solid;
	width: 268px;
	background-color: #e5ddc9;
	float:right;
}
.rightbox ul{list-style:none;}
.rightbox a{
	font-size: 13px;
	line-height:22px;
	margin: 0 15px;
	color: #000000;
}
.rightbox a:hover{text-decoration:underline;}
#featurelist{
	background-image:url(../images/featurelist.png);
	width:268px;
	height:44px;
}
#categories{
	background-image:url(../images/categories.png);
	width:268px;
	height:44px;
}
.smallright{
	font-style:italic;
	font-size:9px;
	line-height: 20px;
	margin: 10px 15px 0;
}

#featuretable a{float:right; margin-top:10px;}
#featuretable p{margin-top: 3px;}
#contact{
	padding: 15px;
	margin-top: 20px;
	background-color: #d3c2a0;
}
#contact textarea{width:900px;}
.contactsmall {width: 400px;}
.contactsmall, .contactborder{
	border: 2px solid #988c72;
	background-color: #f6f3eb;
	padding: 5px;
}
#formID p{
font-size:10px;
margin: 0 2px 5px;
}
.signupsmall{
	border: 1px solid #988c72;
	background-color: #f6f3eb;
	padding: 3px;
	width:430px;
}
.signupsmall2{
	border: 1px solid #988c72;
	background-color: #f6f3eb;
	padding: 6px 3px;
	width:592px;
	font-size:18px;
}
.signupsmallx{
	border: 1px solid #988c72;
	background-color: #f6f3eb;
	padding: 6px 3px;
	width:450px;
	font-size:18px;
}
.signupsmallx2{
	border: 1px solid #988c72;
	background-color: #f6f3eb;
	padding: 6px 3px;
	width:450px;
	height: 109px;
	font-size:18px;
}
.signupsmall3{
	border: 1px solid #988c72;
	background-color: #f6f3eb;
	padding: 6px 3px;
	width:282px;
	font-size:18px;
}
.signupbutton{
	background-image:url(../images/pricing/button.png);
	background-repeat:no-repeat;
	height:40px;
	width:245px;
	border:none;
}
.largeinput{width:430px;}
/*PRICING & SIGNUP PAGE----*/
/*-------------------------*/
#pricingleft{
	border: #786f5f 1px solid;
	width: 448px;
	background-color: #e5ddc9;
	float:left;
	font-size: 11px;
	line-height:22px;
	margin: 15px 12px;
}
#pricingleft li{margin:0 0 0 20px;} 
#pricing-marketing{
	background-image:url(../images/pricing/marketing.jpg);
	width:448px;
	height:62px;
}
#pricing-ecommerce{
	background-image:url(../images/pricing/ecommerce.jpg);
	width:448px;
	height:62px;
}
#pricingmarketingprice{
	background-image:url(../images/pricing/marketingprice.png);
	width:386px;
	height:21px;
}
#pricingecommerceprice{
	background-image:url(../images/pricing/ecommerceprice.png);
	width:398px;
	height:21px;
}
#pricingmarketingbanner{
	background-image:url(../images/pricing/marketingbanner.png);
	width:448px;
	height:64px;
	margin: 10px 0 !important; /*odd little FF hack*/
}
#pricingecommercebanner{
	background-image:url(../images/pricing/ecommercebanner.png);
	width:448px;
	height:64px;
	margin: 10px 0 !important; 
}
a.signup{width:210px; height:42px; background-position: 0px 0px; background-image:url(../images/pricing/signup.png); display:block;}
a.signup:hover{background-position: 0px -42px;}


/*SPECIAL CSS CLASSES----------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
#slidertrack{
	height: 100%;
	float:left;
	position: relative;
}
#slider{
	margin:15px 3px;
}
ul#designs { float: left; list-style: none; margin-left: 0; width: 660px;}
ul#designs li { 
	float: left; 
	margin: 0 10px 10px 0; 
	padding: 5px;
	width: 200px;
	background-color:#000000;
}
ul#designs a { display: block; width: 100%; color:#FFFFFF; font-size:11px;}
ul#designs a:hover {text-decoration: none; }
ul#designs img {display: block;}
.hidden {display:none;}
.current {font-weight:bold;}

#line {
	background-image:url(../images/line.png);
	background-repeat:repeat-x;
	height:1px;
	margin: 15px 0;
}
#secondsaway{background-image:url(../images/secondsaway.png);height:23px; width:440px;}
/*FOOTER-----------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
#footer {
	position: relative;
	margin-top: -75px;
	clear: both;
	background-color: #000000;
	height: 75px;
	text-align: left;
}
#footer p{
	margin: 25px 0 0 20px;
	color:#7b5d46;
	font-size:10px;
	float:left;
	line-height:13px;
}
#footer a{
	color:#c6aa8f;
	text-decoration:underline;
}
#foot2{
	width: 960px;
	margin: 0 auto;
}
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */