@charset "utf-8";
body {
	/*font: 100% Verdana, Arial, Helvetica, sans-serif;*/
	font-family: Arial, Helvetica, Sans-serif;
    font-size:13px;
	background: #2e2e2e;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
#overlay {
background-color:#2e2e2e;
opacity:.5;
width:auto;
height:inherit;
margin:0 auto;
position:relative;
top:-300px;
display:block;
}
#overlayBox {
width: 400px;
height:300px;
margin: auto auto auto auto;
opacity:100;
background-color:#FFFFFF;
position:relative;
top:250px;
left:0%;
z-index:1;
display:block;
}
#container {
	width: 798px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	/*border: 1px solid #000000;*/
	text-align: left; /* this overrides the text-align: center on the body element. */
	font-size:13px;
	/*Added*/
}
a {
color:#680403;
text-decoration:underline;
font-weight:bold;
}
a:hover {
color:#ae0200;
text-decoration:none;
font-weight:bold;
}
#header {
	background: #DDDDDD url(/images/SmartFX_v6_02.jpg) repeat-x; 
	/*padding: 0 10px 0 20px;   this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	height:152px;
	position:relative;
}
#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	/*padding: 10px 0;  using padding instead of margin will allow you to keep the element away from the edges of the div */
}
#logo a {
width: 320px;
height: 96px;
background: url(/images/SmartFX_v6_01.jpg) bottom left no-repeat;
float:left;
}
#topHeaderWrapper {
width:798px;
height:96px;
position:relative;
}
#rightServerTop {
width:154px;
height:96px;
background: url(/images/SmartFX_v6_04.jpg) bottom right no-repeat;
float:right;
}
#mainNavWrapper {
position:relative;
width:798px;
height:56px;
}
#leftBorderTop {
width:20px;
height:56px;
background: url(/images/SmartFX_v6_06.jpg) bottom left no-repeat;
float:left;
position:relative;
left:0px;
top:0px;
bottom:0px;
}
#rightServerBottom {
width:154px;
height:56px;
background: url(/images/SmartFX_v6_08.jpg) bottom right no-repeat;
float:right;
position:absolute;
right:0px;
top:0px;
bottom:0px;
/*top:-31px;*/
}

#mainContent {
background: url(/images/SmartFX_v6_09.jpg) repeat-y;
 /* remember that padding is the space inside the div box and margin is the space outside the div box */
padding-left:19px;
padding-right:19px;
padding-top:0px;
padding-bottom:0px;
margin:0;
margin-top:0px;

height:1050px;
position:relative;
}
.h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
font-weight:bolder;
padding-top:10px;
padding-bottom:3px;
padding-left:10px;
margin-bottom:10px;
border-bottom:ridge;
}
#FXpackage {
width:757px;
height:243px;
display:block;
background: url(/images/FXpackage.jpg) no-repeat;
position:relative;
}
#getStarted {
width:180px;
height:45px;
position:relative;
top:195px;
left:350px;
z-index:1;
}
#moreThanHosting {
	width:518px;
	height:83px;
	display:block;
	position:absolute;
	float:left;
	bottom:26px;
	left: 12px;
	z-index:0;
	font-size:13px;
}
#moreThanHosting li {
padding-top:0px;
padding-left:0px;
color:#FFFFFF;
font-weight:bold;
}
.boxTitle {
font-size:20px;
color:#0099FF;
font-family:Geneva, Arial, Helvetica, sans-serif;
text-align:center;
font-weight:bold;
text-shadow:#000000;
}

#mainContent h5 {
margin:0px;
margin-right:3px;
padding-bottom:3px;
font-size:10.5px;
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#003300;
font-weight:bold;
}

#mainContent ul {
list-style-image: url(http://www.charic4u.com/newshop/skin/default/img/arrow.gif);
list-style-position:inside;
list-syle-type:square;
text-indent:1px;
margin:3px;
padding-top:0px;
padding-left:10px;
}

#mainContent li {
margin-right:3px;
font-size:10.5px;
font-family:Geneva, Arial, Helvetica, sans-serif;
background:#ffffff;
}

#newToHosting {
background: url(/images/SmartFX_v6_box.jpg) no-repeat;
width:215px;
height:256px;
position:relative;
display:block;
padding: 25px 25px 25px 25px;


}
#switchToSmartFX {
background: url(/images/SmartFX_v6_box.jpg) no-repeat;
width:215px;
height:256px;
position:relative;
display:block;
left:265px;
top:-306px;
padding: 25px 25px 25px 25px;

}
#contact {
width:222px;
height:306px;
position:relative;
display:block;
left:530px;
top:-612px;
}
#liveChat {
width:222px;
height:104px;
position:relative;
display:block;
background:url(/images/SmartFX_v6_chat.jpg) no-repeat;
}
#contactUs {
width:222px;
height:104px;
position:relative;
display:block;
background:url(/images/SmartFX_v6_contact.jpg) no-repeat;
}
#affiliates {
background: url(/images/SmartFX_v6_affiliates.jpg) no-repeat;
width:215px;
height:256px;
position:relative;
display:block;
top:-612px;
padding: 25px 25px 25px 25px;

}
#affiliates h5 {
color:#FFFFFF;
}
#affiliates ul {
color:#000000;
font-weight:normal;
}
#resellers {
background: url(/images/SmartFX_v6_box.jpg) no-repeat;
width:215px;
height:256px;
position:relative;
display:block;
left:265px;
top:-918px;
padding: 25px 25px 25px 25px;

}

#liveChat {
}
#customerQuote {
background:url(/images/SmartFX_v6_quote.jpg) no-repeat;
width:172px;
height:264px;
position:relative;
display:block;
left:530px;
top:-1224px;
padding: 25px 25px 25px 25px;
}
#whySmartFX {
width:757px;
top:-1224px;
position:relative;
display:block;
}
#footer {
	/*padding: 0 10px;  this padding matches the left alignment of the elements in the divs that appear above it. */
	display:block;
	background:#DDDDDD;
	height:126px;
	width:798px;
	position:relative;
}
#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	/*padding: 10px 0;  padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
#footerNav li {
display:inline;
  margin: 0;
  padding: 0;
  border: 0px;
  font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
  font-size: 100%;
  }
#footerNav a{
/*float:left;
display:block;
padding-bottom:5px;
padding-top:5px;*/
padding-left:0px;
padding-right:18px;
/*border:1px solid red;*/
}
#footerTop {
display:block;
background: url(/images/SmartFX_v6_12.jpg) repeat-x;
width:798px;
height:36px;
/*border:1px solid blue;*/
}
#footerLeft {
display:block;
background: url(/images/SmartFX_v6_11.jpg) bottom left no-repeat;
height:36px;
width:263px;
/*border:1px solid green;*/
}
#footerNav {
display:block;
	width:507px;
	height:18px;
	margin-bottom:9px;
	margin-top:9px;
	list-style: none;
	position:absolute;
	left:263px;
	top:0px;
}
#footerRight {
display:block;
background: url(/images/SmartFX_v6_14.jpg) bottom right no-repeat;
height:36px;
width:23px;
position:absolute;
right:0px;
top:0px;
/*border:1px solid green;*/
}
#footerBottom {
display:block;
background: url(/images/SmartFX_v6_15.jpg) bottom left no-repeat;
height:90px;

left:0;
}
#subFooter {
color:#AAAAAA;
font-size:x-small;
text-align:center;
background: #2e2e2e;
}
#subFooter a {
color:#006699;
}

/*-----------------------------------------
Main Nav
-----------------------------------------*/

#navWrap {
  /*width: 100%;
  float: left;*/
  display: inline;
  background: #4a8bbe; /*url(/images/jan08/08header/navbg.png) repeat-x bottom left;*/
  border-top: 0;
  border-bottom: 0;
  position:absolute;
  bottom:8px;
  max-height:56px;
  /*position:relative;
  top:17px;
  bottom:0px;
  left:0px;*/
  }
#topNav {
  width: 624px;
  position:relative;
  top:0px;
  bottom:0px;
  left:0px;
  }
#mainNav {
  float: left;
  font-weight: normal;
  list-style: none;
  margin: 0;
  padding: 0;
  xbackground: #171717;
  }
#mainNav li {
  float: left;
  margin: 0;
  padding: 0;
  border: 0px;
  font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
  font-size: 100%;
  }
#mainNav a {
  float: left;
  background: #5382BF; /*url(/images/jan08/08header/tabbg.gif) repeat-x top left;*/
  display: block;
  text-decoration: none;
  margin: 0px 4px 0px 0px;
  padding: 7px 15px 7px 15px;
  color: #FFF;
  border: 0;
  border-bottom: 0px;
  border-top: 1px solid #77AEEF;
  border-right: 1px solid #619BDF;
  border-left: 1px solid #619BDF;
  }
#mainNav .first-tab a {
  xborder-left: 0px;
}
#mainNav a:hover {
  color: #FFF; 
  padding: 7px 15px 7px 15px;
  text-decoration: underline;
  xborder-bottom: 1px; 
  border-top: 1px solid #CFE6FF;
  border-right: 1px solid #CFE6FF;
  border-left: 1px solid #CFE6FF;
  background: #3F3C37; /*url(/images/jan08/08header/tabbg2.gif) top left;*/
  }
#mainNav .order {
  float: left;
  padding-left: 10px;
  }
#mainNav .order a {
  padding: 7px 15px 7px 15px;
  background: red;
  font-size: 100%;
  color: white;
  font-weight: bold;
  border: none;
  border-top: 1px solid #FFAFB2;
  border-right: 1px solid #FF9F9F;
  border-left: 1px solid #FF9F9F;
  border-bottom: 0px;
  }
#mainNav .order a:hover {
  text-decoration: underline;
  border-top: 1px solid #FFCFCF;
  }
#mainNav .active a {
  background: #e2e2e2; /*url(/images/disco/active-bg.gif) repeat-x top left;*/
  color: black;
  font-weight: bold;
  }
#mainNav .active a:hover {
  text-decoration: underline;
  }




@charset "utf-8";

/* SpryFormValidation.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */


/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}



/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
	background-color: #B8F5B1;
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
	background-color: #FF9F9F;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState {
	background-color: #FFFFCC;
}

/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
 */
.textfieldFlashText input, input.textfieldFlashText{
	color: red !important;
}