/*******************  
*	DEFAULTS
********************/

A			{ color: red; text-decoration: none }
A:hover			{ color: red; border-bottom: 1px dotted red }

BODY			{ }
TABLE			{ padding: 0px; margin: 0px; }
TABLE TD		{ padding: 0px; margin: 0px; font-family: arial, verdana, tahoma; font-size: 12px;  }
IMG			{ border: 0px }
FORM			{ margin: 0px }
ADDRESS			{ font-style: normal }
P			{ margin: 0px 0px 15px 0px }

/**
INPUT			{ border: 1px solid #555; font-size: 11px; padding: 2px }
INPUT:focus		{ border: 1px solid #333 }
INPUT.checkbox		{ border: 0px }
SELECT			{ border: 1px solid #555; font-size: 11px }
SELECT:focus		{ border: 1px solid #333 }
TEXTAREA		{ border: 1px solid #555; font: normal 12px arial; padding: 2px }
TEXTAREA:focus		{ border: 1px solid #333 }
**/

INPUT			{ font-size: 11px; padding: 2px }
TEXTAREA		{ font: normal 12px arial; padding: 2px }

FORM TABLE TD 		{ padding: 5px }
FORM TABLE TH		{ width: 140px; text-align: right; vertical-align: top; font-size: 12px; padding-top: 7px }
FORM INPUT.submit, 
A.submit		{ background: url(images/button-bg-small.gif) repeat-x; font: normal 11px arial; border: 1px solid #828282; padding: 1px 10px; cursor: pointer; overflow: visible }
A.submit		{ padding: 3px 10px 4px 10px; }
A.submit:hover		{ color: #fff; text-decoration: none }

H1			{ font: normal 22px verdana, arial; background: url(images/brush_line_large_red.gif) no-repeat bottom left; padding-bottom: 8px; margin: 15px 0px; line-height: 100%; }
H2			{ font: normal 18px verdana, arial; margin: 15px 0px; line-height: 100%; }
H3			{ font: bold 14px arial, verdana; margin: 15px 0px }


/*******************  
*	STRUCTURE
********************/

#container		{ background: url(images/top-bg.gif) no-repeat top center; text-align: center }
#header			{ background: url(images/logo-overflow.gif) no-repeat 269px bottom; height: 31px; width: 794px; margin: 0px auto }
#title			{ background: url(images/title-bg.gif) no-repeat top center; height: 148px; width: 794px; margin: 0px auto; text-align: left }
#title H1		{ background: url(images/logo.gif) no-repeat top center; height: 140px; width: 381px; margin: 0px 39px }
#title H1 A		{ display: block; height: 138px; width: 382px; text-indent: -9000px; overflow: hidden; border: 0px }
#title DIV		{ float: right; background: url(images/login-bg.gif) no-repeat; width: 180px; height: 116px; margin: 12px 40px 0px 0px; font: normal 18px verdana, arial; padding: 5px 0px 0px 5px; display: inline }
#title TABLE		{ margin-top: 15px; border-collapse: separate; }
#title TH, #title TD	{ padding-top: 3px }
#title TH		{ font: bold 10px verdana; padding: 0px 8px 0px 0px; text-align: right; vertical-align: middle }
#title INPUT		{ font: normal 10px verdana; padding: 1px; }
#title .submit		{ background: url(images/button-bg-small.gif) repeat-x; font: normal 10px arial; padding: 1px 4px; border: 1px solid #828282; float: right }

#content		{ background: #f5f5f5; width: 795px; margin: 0px auto }
#contentInner		{ background: url(images/contentSides.gif) repeat-y; min-height: 424px; text-align: left; width: 795px; }
H1.contentTitle		{ font: normal 22px verdana; background: url(images/contentHeader.gif) no-repeat top center; margin: 0px 0px 15px 0px; padding: 15px 0px 0px 30px; }
H1.contentTitle DIV	{ background: url(images/brush_line_large_red.gif) no-repeat bottom left; padding-bottom: 5px }

#contentArea		{ padding: 5px 30px }

.menu			{ height: 60px; width: 795px; margin: 0px auto; padding: 0px; list-style-type: none }
.menu LI		{ float: left; margin: 0px; height: 60px; background-image: url(images/menu.png); }
.menu A			{ display: block; height: 28px; margin-top: 15px; text-indent: -9000px; text-decoration: none; overflow: hidden; border: 0px }
.menu A:hover		{ border: 0px }

.menu .home A		{ width: 102px }
.menu .homeHover,
.menu_index .home	{ background-position: bottom left; }

.menu .packages A	{ width: 130px }
.menu .packages 	{ background-position: -102px top; }
.menu .packagesHover, 
.menu_packages .packages { background-position: -102px bottom; }

.menu .oursystem A	{ width: 146px }
.menu .oursystem 	{ background-position: -232px top; }
.menu .oursystemHover, 
.menu_our_system .oursystem	{ background-position: -232px bottom; }

.menu .portfolio A	{ width: 120px }
.menu .portfolio 	{ background-position: -378px top; }
.menu .portfolioHover,
.menu_portfolio .portfolio	{ background-position: -378px bottom; }

.menu .comparison A	{ width: 152px }
.menu .comparison 	{ background-position: -498px top; }
.menu .comparisonHover,
.menu_comparison .comparison 	{ background-position: -498px bottom; }

.menu .contact A	{ width: 145px }
.menu .contact 		{ background-position: -650px top; }
.menu .contactHover,
.menu_contact .contact	{ background-position: -650px bottom; }

#footer			{ background: url(images/bottom-bg.gif) no-repeat top center; height: 80px; text-align: center; color: #fff; font: normal 11px arial }
#footerPage		{ background: url(images/contentFooter.gif) no-repeat top center; height: 15px; width: 795px; margin: 0px auto }
#footerMenu		{ background: url(images/footer-menu-bg.gif) no-repeat; height: 32px; width: 795px; margin: 9px auto 2px auto; text-align: center; color: #fff }
#footerMenu UL		{ padding: 10px 0px 0px 0px; margin: 0px; list-style-type: none }
#footerMenu LI		{ display: inline; margin: 0px; padding: 0px }
#footerMenu A		{ color: #ffcdcd; margin: 0px 13px }
#footerMenu A:hover	{ color: #fff; border-bottom: dotted 1px #fff; text-decoration: none }
#footerContent		{ width: 795px; margin: 0px auto; padding-top: 3px }

#cornerBox		{ display: none }

/*******************  
*	ELEMENTS
********************/

.box1			{ margin: 25px 0px 0px 0px; padding-bottom: 14px; border-bottom: 1px dashed #aaa }
.box1 .image		{ float: left; width: 210px; background: url(images/screenshot-shadow.gif) no-repeat bottom center; text-align: center }
.box1 .image A:hover	{ border: 0px }
.box1 .image IMG	{ margin-bottom: 8px; border: 1px solid #888888 }
.box1 .data		{ float: right; width: 510px }
.box1 .data H5		{ font: bold 16px arial, verdana; margin: 0px 0px 5px 0px }
.box1 .data BLOCKQUOTE 	{ background: url(images/quoteOpen.gif) no-repeat; text-indent: 25px; margin: 10px 0px 0px 0px; font-style: italic; color: #666 }
.box1 .data BLOCKQUOTE SPAN { background: url(images/quoteClose.gif) no-repeat right center; padding-right: 20px }
.box1 .data CITE	{ display: block; margin-top: 10px; font-style: normal; color: orange }

.box2 			{ background: #fff; border: 1px solid #ccc; margin-bottom: 20px; padding: 10px; font-style: italic; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; }

.box3 			{ width: 726px; background: #fff; border: 1px solid #ccc; margin-bottom: 20px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; }
.box3 IMG		{ float: right; margin: 20px 10px 10px 0px }
.box3 .ieSucks		{ float: left; width: 385px }
.box3 H2		{ margin: 0px; padding: 10px 20px 20px 20px; font: normal 20px verdana, arial }
.box3 .point		{ margin: 5px 0px 5px 25px; padding-left: 25px; font: bold 16px arial, verdana; background: url(images/icon-check.gif) no-repeat 0px 2px }
.box3 .point A		{ font: normal 11px verdana; }
.box3 .explain		{ font: normal 11px verdana; background: #f5f5f5; border: 1px solid #ccc; margin-top: 5px; padding: 8px; line-height: 130%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

.box4 			{ float: left; width: 220px; background: #fff; border: 1px solid #ccc; margin: 0px 20px 20px 0px; padding: 5px 15px }
.box4 H2		{ margin: 0px; padding: 0px; font: normal 18px verdana, arial }

.box5			{ background: #555; border-collapse: collapse; color: #fff; width: 100%; margin-bottom: 20px; border-radius: 8px; -moz-border-radius: 12px; -webkit-border-radius: 10px; }
.box5 TD		{ border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; font: bold 16px arial; vertical-align: middle; height: 40px }
.box5 .option		{ text-align: center; width: 100px; font-weight: bold }
.box5 TR.last TD	{ border-bottom: 0px }
.box5 .rating		{ width: 120px; text-align: center; font: bold 11px arial; border-right: 0px }
.box5 .rating DIV	{ margin-top: 2px }
.box5 A			{ background: #666; padding: 11px 20px 0px 20px; display: block; height: 29px; color: #fff }
.box5 A:hover		{ background: #444; border: 0px; color: #fff }


/******* HOME ********/

.darkCon		{ height: 273px; margin-bottom: 20px; list-style: none; color: #fff; font: normal 12px verdana; line-height: 130% }
.darkCon .dBox 		{ height: 273px; width: 210px; background: url(images/dark-box.gif) no-repeat }
.darkCon H2 		{ height: 31px; margin: 6px 0px 0px 0px; text-indent: -9000px }
.darkCon .list 		{ height: 170px; margin: 0px; padding: 5px 14px; text-align: center }
.darkCon .list UL	{ font: bold 14px arial, verdana; margin: 5px 0px 5px 0px; padding: 0px 0px 0px 15px }
.darkCon .list LI	{ margin: 0px; padding: 0px 0px 8px 0px; text-align: left }
.darkCon A 		{ display: block; height: 37px; width: 148px; margin: 10px auto; text-indent: -9000px; overflow: hidden }
.darkCon A:hover 	{ border: 0px }

.darkCon .pro 		{ float: left; }
.darkCon .pro H2	{ background: url(images/dark-title-professional.gif) no-repeat }
.darkCon .pro A		{ background: url(images/dark-button-portfolio.gif) no-repeat }

.darkCon .aff 		{ float: left; margin-left: 53px }
.darkCon .aff H2	{ background: url(images/dark-title-affordable.gif) no-repeat }
.darkCon .aff A		{ background: url(images/dark-button-pricing.gif) no-repeat }

.darkCon .fri 		{ float: right }
.darkCon .fri H2	{ background: url(images/dark-title-user.gif) no-repeat }
.darkCon .fri A		{ background: url(images/dark-button-oursystem.gif) no-repeat }


.homeLeft		{ width: 325px; float: left; text-align: justify }

.homeRight		{ width: 365px; float: right; font-size: 11px; line-height: 120%; background: #fff; border: 1px solid #ccc; margin: 40px 0px 10px 10px; padding: 20px 10px 10px 0px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;  }
.homeRight .image	{ float: left; width: 210px; background: url(images/screenshot-shadow-white.gif) no-repeat bottom center; text-align: center }
.homeRight .image IMG	{ margin-bottom: 10px; border: 1px solid #888888 }
.homeRight .image A:hover { border: 0px }
.homeRight H2		{ margin: 0px 0px 15px 0px }
.homeRight H3		{ margin: 0px 0px 5px 0px }
.homeRight SPAN		{ color: #777 }

.slideTabsContainer	{ background: url(images/tabs-shadow-left.gif) no-repeat bottom left; border-bottom: 1px solid #ccc }
#slideTabs 		{ float: left; margin: 0px 0px 0px 88px; padding: 15px 90px 0px 0px; list-style: none; background: url(images/tabs-shadow-right.gif) no-repeat bottom right; display: inline } 
#slideTabs LI		{ display: inline; padding: 3px 15px; margin: 0px 2px 0px 0px; background: #fff url(images/tab-bg.gif) repeat-x bottom; border: 1px solid #ccc; border-bottom: 0px; cursor: pointer; border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px }
#slideTabs LI.active	{ background: #fff; font-weight: bold }

#slidePanes 		{ background: #fff; border: 1px solid #ccc; border-top: 0px; width: 733px }
#slidePanes div div 	{ overflow: hidden }
#slidePanes div div div	{ overflow: visible; margin: 0px 20px 10px 20px }
#slidePanes H1 SPAN	{ color: #999 }

.contentShadow		{ height: 11px; background: url(images/content-bottom-shadow.gif) no-repeat top center; margin: 0px; margin-bottom: 20px; padding: 0px }

.packs			{ margin: 0px 0px 20px 0px }
.packs A		{ width: 159px; height: 222px; margin: 0px 30px 0px 0px; background: url(images/dark-box-small.gif) no-repeat; display: block; float: left; color: #fff; cursor: pointer }
.packs A:hover		{ background-position: right; color: #fff; border: 0px }
.packs .last		{ margin: 0px }
.packs H4		{ font: bold 14px arial; border: 1px solid #555; background: #f0f0f0; padding: 4px 0px; margin: 15px 0px 10px 0px; text-align: center; text-transform: uppercase; color: #000 }
.packs UL		{ height: 120px; font: bold 14px arial, verdana; margin: 0px 5px 5px 10px; padding: 0px 0px 0px 15px; list-style-type: disc; overflow: hidden }
.packs UL LI		{ margin: 0px; padding: 0px 0px 8px 0px; text-align: left }
.packs .starting	{ display: block; font: normal 10px arial; text-align: center; text-transform: uppercase; color: #aaa; border-top: 1px solid #666; padding-top: 4px }
.packs H5		{ font: normal 18px arial; text-align: center; margin: 0px }
.packs A:hover .starting { border-top: 1px solid #888; }
.packs .note		{ text-align: center; color: #777; font-size: 11px }


.columnLeft		{ width: 345px; float: left }
.columnRight		{ width: 345px; float: right; font-size: 11px; line-height: 120%; background: #fff; border: 1px solid #ccc; margin: 0px; padding: 10px 10px 10px 10px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px }


/*******************  
*	TOOLS
********************/

.noBottom		{ margin-bottom: 0px }
.noTop			{ margin-top: 0px }
.noDisplay		{ display: none }
.right			{ float: right }
.textRight		{ text-align: right }
.textSmall		{ font-size: 11px }
.noBorder		{ border: 0px }
.textCenter		{ text-align: center }

.topBotBorder		{ border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; padding: 3px 0px; background: #f8f8f8 }

/*** DIV FLOAT CLEAR ***/
/* IE 5-6 */
* html .clearfix { height: 1% }
/* IE7html */
.clearfix { display: inline-block }
/* Safari */
.clearfix:not([class='XXX']) { display: block }   
@media all and (min-width: 0px) {
	/* O */
	.clearfix { display: block }   
}
/* FF, O, etc. */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }