/****************************************** 

This file contains all front-end CSS for version 1 of the site.

******************************************/

html {color:#000;background:#FFF;margin:0;padding:0;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {margin:0;padding:0;}


fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li {margin: 0 0 0 30px}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}legend{color:#000;}


input[type=text], input[type=password], select, textarea {
	border: 1px solid #c7b299;
	padding: 3px;
	vertical-align: middle;
	}


/********************* Global ***************************/
html {background-color:#001E3C;}
body {
	font: 12px/15px Arial,Geneva,Helvetica,sans-serif;
	background-color:#001E3C;
	line-height:18px;
	}
input {padding:1px 2px;vertical-align:middle;}
/* border: 1px solid #ebebeb; border-top: 1px solid #b1b1b1; border-left: 1px solid #b1b1b1; */

a {text-decoration:none; color:#44687d;}
a:hover {text-decoration:underline;}
a:visited {color:#000000;}

img {border:0px;}

div.clear {clear:both;}

h1, h2, h3, h4, h5, h6 {margin:0 0 9px 0; border-collapse:separate;line-height:120%;font-weight:bold;}

h1 {font-size: 26px; color: #000000;}
h2 { font-size: 22px;color: #2c3740;}
h3 { font-size: 18px;}
h4 { font-size: 14px;}
h5 { font-size: 12px;}
h6 { font-size: 10px;}
strong {font-weight:bold;}
em {font-style:italic;}
p {padding: 0 0 14px 0; line-height:18px;}
.error {color:red;}
.warning {color:orange;}


/***************** FRAMES ***************************/
div#wrapper {
	margin: 0px auto 10px auto;
	width:976px;}
	
div#wrapper div#headBanner {
	margin:0 auto;
	height: 340px;
	width: 976px;
	background: transparent url("../images/frame_headBanner.png") no-repeat left top;
	}
	
/* Content */
div#wrapper div#content {
	text-align: left;
	height: 450px;
	overflow:visible;
	background: transparent url("../images/frame_bg.png") y-repeat;}
	

/* IE treats 'height' as 'min-height' if overflow:visible, but it ignores CSS2 "child selector" syntax, 
   so IE will respect the first instruction below and ignore the second.  Other browsers will respect both,
   and so the right thing will happen for all browsers--a min-height will be set, and the div will grow and
   push down all content below it if the content demands it */



html > body > div#wrapper > div#content {
	height:auto;
	min-height:450px;
	background: transparent url("../images/frame_bg.png");
	}
	
div#wrapper div#content .justify1 {
	padding: 0 50px;
	float: right;
	font: 12px/15px Arial,Geneva,Helvetica,sans-serif;
	}
	
div#wrapper div#content .justify {
	padding: 0 50px;
	}

div.wabmasters-choice-box a, a:visited {text-decoration:none; color:#44687d; font-weight:bold}
div.wabmasters-choice-box a:hover {text-decoration:underline; color:#44687d; font-weight:bold}


div#content div.review-box {
	BACKGROUND: url(/images/review-bg.jpg) no-repeat;
	MARGIN: 0px auto;
	WIDTH: 880px;
	POSITION: relative
	}

div#content div.review-box div.review-box-col1 {
	FLOAT: left;
	WIDTH: 250px;
	padding-top: 20px;
	}
	
	
.review-what {
	PADDING-RIGHT: 5px; PADDING-LEFT: 0px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 1px; WIDTH: 130px; COLOR: #1e416a; PADDING-TOP: 1px; TEXT-ALIGN: right}
.review-stars {
	PADDING-RIGHT: 5px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 1px; WIDTH: 100px; PADDING-TOP: 2px}

.get-started-button A:link {
	FONT-WEIGHT: bold; FONT-SIZE: 15px; COLOR: #ffffff; TEXT-DECORATION: none}
.get-started-button A:visited {
	FONT-WEIGHT: bold; FONT-SIZE: 15px; COLOR: #ffffff; TEXT-DECORATION: none}
.get-started-button A:hover {COLOR: #ffb0b0}


.review-box-col2 {
	FONT-SIZE: 12px;
	FLOAT: right;
	WIDTH: 580px;
	PADDING-TOP: 20px;
	padding-right: 20px;
}
.review-box-col2 P {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 3px; MARGIN: 0px; PADDING-TOP: 5p;}

.review-box H2 {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	FONT-SIZE: 25px;
	PADDING-BOTTOM: 5px;
	MARGIN: 0px;
	COLOR: #d30007;
	PADDING-TOP: 0px;
	BORDER-BOTTOM: #d30007 1px solid}

.review-box-big H2 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 25px;
	PADDING-BOTTOM: 5px; MARGIN: 0px; COLOR: #d30007; PADDING-TOP: 0px;
	BORDER-BOTTOM: #d30007 1px solid; LETTER-SPACING: -2px}


.review-pros {
	FONT-WEIGHT: bold; FONT-SIZE: 13px}
.review-cons {
	FONT-WEIGHT: bold; FONT-SIZE: 13px}
.review-pros {
	PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; COLOR: #40a000; PADDING-TOP: 10px}
.review-cons {
	PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; COLOR: #b60f0f; PADDING-TOP: 10px}
.review-pros UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}
.review-cons UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}



.li-tick {
	PADDING-RIGHT: 0px; PADDING-LEFT: 20px; BACKGROUND: url(/images/ranktable-tick-sm.png) no-repeat left top; PADDING-BOTTOM: 0px; PADDING-TOP: 0px}
.li-cross {
	PADDING-RIGHT: 0px; PADDING-LEFT: 20px; BACKGROUND: url(/images/ranktable-cross-sm.png) no-repeat left top; PADDING-BOTTOM: 0px; PADDING-TOP: 0px}
.getstartedbutton {
	RIGHT: 12px;
	BOTTOM: 68px;
	float: right;
	margin-top: 30px;
	}
.getstartedbutton IMG {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px}
.review-box-big {
	BACKGROUND: url(/images/review-bg-big.jpg) no-repeat; MARGIN: 0px auto; WIDTH: 920px; POSITION: relative; HEIGHT: 659px}

.addtoCart_txt {
	padding:87px 30px 50px 30px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#FFFFFF
	}	

.picArea {
	float:left;
	margin-right: 30px;
	}

.ranktable {
	MARGIN: 0px auto;
	WIDTH: 904px;
	POSITION: relative;	
	}
.ranktable TABLE TR TH {
	BACKGROUND: url(../images/table_top.png) no-repeat; WIDTH: 904px; TEXT-INDENT: -9000px; HEIGHT: 82px
}
.ranktable TABLE TR TD {
	BORDER-RIGHT: #72b0d9 0px solid; FONT-WEIGHT: bold; FONT-SIZE: 14px; BACKGROUND: #f6fafc; COLOR: #055086; BORDER-BOTTOM: #72b0d9 1px solid; TEXT-ALIGN: center
}
.ranktable TABLE TR TD A:link {
	COLOR: #055086; TEXT-DECORATION: none
}
.ranktable TABLE TR TD A:visited {
	COLOR: #055086; TEXT-DECORATION: none
}
.ranktable TABLE TR TD A:hover {
	COLOR: #000000
}
.ranktable TABLE TR TD.start {
	BORDER-LEFT: #7dc8e9 4px solid
}
.ranktable TABLE TR TD.end {
	BORDER-RIGHT: #7dc8e9 4px solid; FONT-SIZE: 11px; TEXT-ALIGN: center
}
.ranktable TABLE TR.topchoice TD A:link {
	TEXT-DECORATION: none
}
.ranktable TABLE TR.topchoice TD A:visited {
	TEXT-DECORATION: none
}
.ranktable TABLE TR.topchoice TD A:hover {
	COLOR: #000000
}
.ranktable TABLE TR TD.ftr {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: url(/images/ranktable-ftr.jpg) no-repeat; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 14px; BORDER-RIGHT-WIDTH: 0px
}
.ranktable TABLE .alt {
	BACKGROUND: #dee9f0
}
.ranktable #riptop A SPAN {
	DISPLAY: block;
	BACKGROUND: url(/images/ranktable-riptop-nobutton.png) no-repeat;
	WIDTH: 905px;
	TEXT-INDENT: -9000px;
	POSITION: absolute;
	TOP: 241px;
	HEIGHT: 81px;
	left: -9px;
}
.ranktable #ripspace {
	BACKGROUND: #ffffff; WIDTH: 905px; POSITION: absolute; TOP: 285px; HEIGHT: 100px
}
.ranktable #ripbot {
	DISPLAY: block; BACKGROUND: url(/images/ranktable-ripbot.png) no-repeat; WIDTH: 905px; TEXT-INDENT: -9000px; POSITION: absolute; TOP: -20px; HEIGHT: 71px
}

H2 {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	FONT-SIZE: 25px;
	PADDING-BOTTOM: 10px;
	MARGIN: 0px;
	COLOR: #d30007;
	PADDING-TOP: 0px;
	LETTER-SPACING: -1px
}


/* Footer */

#Footer {
	background: transparent url("../images/frame_footer.png") no-repeat left bottom;
	height: 52px;
	text-align:center;
	font-size:0.95em;
	color:#777777;
	}
#emailBox {
	border-collapse: collapse;
	border: 3px solid #CC0000;
	background: url("../images/saleboxBACK.png");
	margin: 20px auto;
	line-height: 17px;
	padding: 10px;
	width: 400px;
	font-size: 0.9em;
	}
	
#emailBox a:hover {
text-decoration: underline;
}