/* ZERO OUT GLOBAL ELEMENTS --------------------------------- */
/* --------------------------------------------------------- */

body, h1, h2, h3, h4, p, li, ul, ol, div, p, td, select, input {
  font-family: "Lucida Grande", Geneva, Arial, sans-serif;
  margin: 0px; 
  padding: 0px; 
}

/* SET THE BODY STYLES ------------------------------------- */
/* --------------------------------------------------------- */

body {
	color: #303030;
	text-align: center; /* Centers the page in various versions of WinIE5. */
	font-size: 11px;
	background-color: #C1C1C1;
	background-image: url(images/body_bg.jpg);
	background-repeat: repeat-y;
	background-position: center top;
}

ol {
	list-style-type: decimal;
	list-style-position: outside;
	margin-right: 25px;
	line-height: 140%;
	margin-left: 30px;
}

img {
	border: none;
}

img.left {
	float: left;
	margin: 0 20px 10px 0;
}

/* STYLE THE MAIN WRAPPER DIV ------------------------------- */
/* --------------------------------------------------------- */

#wrapper {
  text-align: left; /* Resets the text alignment to left to override what was set for versions of WinIE5. */
  margin: 0px auto; /* Centers the content of the page within the window in all but versions of WinIE5. */
  width: 733px; /* Sets the overall width of the layout. */
}

/* STYLE THE HEADER DIV ------------------------------------ */
/* --------------------------------------------------------- */

#header {
  height: 103px; /* Sets the height of the header to the same height as the background image. */
}

#header h2 {
	padding-left: 611px; /* Sets the x position of the magicFix icon. */
}

#header span {
	position: absolute; /* Places the H1 Span off 3000px left of the page */
	left: -3000px; /* Puts the text within the h1 way off screen so that visual users to not see it. */
}

/* STYLE THE NAV DIV ---------------------------------*/
/* --------------------------------------------------------- */
#nav user {
	width: 733px;/* Adds a non repeating background image to the nav DIV. */
	height: 27px; /* Sets the height of the DIV to the height of the background image. */
	background: url(images/nav_user_fill.jpg) repeat-x center top;	}

#nav {
	width: 733px; 
	background: url(images/nav_bg.jpg) no-repeat;
	height: 52px;
}

#navBar {
	text-align: center;
}

#nav ul {
  list-style-type: none; /* Removes default list bullets. */
  text-align: center; 
}
#nav li {
  display: inline; /* Changes list items from block to inline elements so that links flow side by side. */
}

#nav li a:link {
  color: #FFFFFF; /* Sets color of unvisited and visited links to  white. */
  text-decoration: none; /* Removes default underline on links. */
  padding: 5px; /* Adds 5 pixels of padding around the links. */
  margin-right: 7px; /* Adds space to the right of each list item. */
  margin-left: 7px; 

}


#nav li a:hover, #nav li a:active, #nav li a:focus {
  color: #006699; /* Changes text color of links to blue on hover, activation, and focus. */
}

/* STYLE THE INNER WRAPPER THAT HOLDS THE COLUMNS ---------- */
/* --------------------------------------------------------- */

#innerwrapper {
	float: left; /* Floating all columns and their container helps avoid IE bugs.*/
	width: 733px; /* Sets the width of the column container to 733 pixels, the total width of the layout. */
	padding: 1px 0px; /* This odd padding is added to the top and bottom of the DIV to avoid the escaping margin effect. */
	background-image: url(images/content_bg_repeaty.jpg);
	background-repeat: repeat-y;
	background-position: center top;
	min-height: 350px;
}

#indexUpper {
	text-align: center;
}
#indexLower {
	margin: 0px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	text-align: center;
}
#indexLower .sunrocket {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCCCCC;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* STYLE THE CONTENT COLUMN --------------------------------- */
/* --------------------------------------------------------- */


#content {
	float: left; 
	width: 420px;
	background-image: none;
}
#content h2 {
	padding-top: 5px; /* Adds 5 pixels of padding to the top of the h2 element. */
	padding-right: 5px; /* Adds 5 pixels of padding to the right of the h2 element. */
	padding-bottom: 5px; /* Adds 5 pixels of padding to the bottom of the h2 element. */
}

#content span {
	position: absolute; /* Takes the span (that holds the text for the H2 text) out of the document flow so that it can be positioned in an exact place on (or off) the page. */
	left: -3000px; /* Puts the text within the h1 way off screen so that visual users to not see it. */
} 


#content p, #letterfromdan p {
	margin-top: 5px; /* Places 5 pixels of margin above content paragraphs. */
	margin-right: 20px; /* Places 20 pixels of space between the right edge of the content paragraphs and the right edge of the container. */
	margin-left: 30px; /* Places 20 pixels of space between the left edge of the content paragraphs and the left edge of the container. */
	line-height: 150%; /* Opens up the spacing (leading) between lines of text. */
	margin-bottom: 10px;
	text-align: justify;
}
#letterfromdan {
	float: left; 
	width: 520px;
	background-image: none;
}

#chat {
	text-align: center;
}

#features {
	float: left; /* Floats the DIV to the left of the layout. */
	width: 732px;
}

#features h4 {
	color: #000000;
	font-size: 12px;
	background-image: url(images/h4_dividerShadow.jpg);
	background-repeat: no-repeat;
	padding-top: 25px;
	margin-left: 0px;
	padding-left: 25px;
	margin-top: 10px;
}

#features span {
	position: absolute; /* Takes the span (that holds the text for the H2 text) out of the document flow so that it can be positioned in an exact place on (or off) the page. */
	left: -3000px; /* Puts the text within the h1 way off screen so that visual users to not see it. */
} 
#features p {
	padding-left: 25px;
	padding-top: 0px;
	padding-right: 25px;
	padding-bottom: 0px;
}
#features2 {
	float: left; /* Floats the DIV to the left of the layout. */
	width: 500px;
}

#features2 h4 {
	margin-left: 26px;
	margin-right: 8px;
	color: #000000;
	font-size: 15px;
}

#features2 span {
	position: absolute; /* Takes the span (that holds the text for the H2 text) out of the document flow so that it can be positioned in an exact place on (or off) the page. */
	left: -3000px; /* Puts the text within the h1 way off screen so that visual users to not see it. */
} 
#features2 p {
	padding-left: 35px;
	padding-top: 0px;
	padding-right: 25px;
	padding-bottom: 0px;
	text-align: justify;
}

#questions {
	margin-top: 0px; /* Places 5 pixels of margin above content paragraphs. */
	margin-right: 0px; /* Places 20 pixels of space between the right edge of the content paragraphs and the right edge of the container. */
	margin-left: 20px; /* Places 20 pixels of space between the left edge of the content paragraphs and the left edge of the container. */
	line-height: 180%;
	background-repeat: repeat-y;
	background-image: url(images/bgbox390_middle.jpg);
}
#questions h4 {
	margin-left: 15px;
	border-bottom-color: #CCCCCC;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	margin-right: 8px;
}

#questions ul {
	list-style-type: none;  /* Removes default list bullets.  */
	text-align: left;
	margin-left: 5px;
	list-style-image: none;
	list-style-position: outside;
}
#questions li {
	display: block;
}

#questions li a:link {
  color: #000000; 
  text-decoration: none; /* Removes default underline on links. */
  padding: 5px; /* Adds 5 pixels of padding around the links. */
  margin-right: 7px; /* Adds space to the right of each list item. */
  margin-left: 7px; 

}

#questions li a:visited {
  color: #999999; 
  text-decoration: none; /* Removes default underline on links. */
  padding: 5px; /* Adds 5 pixels of padding around the links. */
  margin-right: 7px; /* Adds space to the right of each list item. */
  margin-left: 7px; 
}

#questions li a:hover, #questions li a:active, #questions li a:focus {
  color: #006699; /* Changes text color of links to blue on hover, activation, and focus. */
}
#200right {
	float: left; /* Floats the sidebar to the left within its container. */
	width: 200px;
	padding-top: 0px;
}
#sidebar {
  float: left; /* Floats the sidebar to the left within its container. */
  width: 305px; /* Sets the width of the sidebar to 305 pixels. */
}

#sidebar h2 {
	font-weight: normal; /* Removes the default bolding that the browser puts on heading text. */
	margin-top: 20px; /* Adds pixels of top margin so that the baseline of the  sidebar h2 text starts at the baseline of the Welcome image. */
	margin-right: 20px; /* Adds pixels on the right to make sure it doesn't touch the edge of the container. */
	margin-left: 10px; /* Adds some space on the left to make sure it doesn't touch the left edge of the container. */
}

#sidebar p {
	margin-top: 10px; /* Adds top margin to the paragraph text so that the baseline of the first line is even with the first line of text in the first content paragraph. */
	margin-right: 10px; /* Adds some space on the right of the content paragraphs to make sure it doesn't touch the edge of the container. */
	margin-left: 10px; /* Adds some space on the left of the content paragraphs to make sure it doesn't touch the left edge of the container.*/
}

#answers {
	float: left; /* Floats the answers to the left within its container. */
	width: 295px;
	margin-top: 95px;
}

#answers question1 {
	font-style: italic;
}

#answers p {
	margin-right: 10px; 
	margin-left: 10px; 
	line-height: 140%;
}

#answers ul {
	list-style-type: none;  /* Removes default list bullets.  */
	text-align: left; 
	margin-left: 5px;
}
#answers li {
	display: list-item;
	margin-bottom: 10px;
}


#answers li a:visited, #nav li a:visited {
  color: #999999; 
  text-decoration: none; /* Removes default underline on links. */
  margin-left: 7px; 
}

#answers li a:link {
	color: #000000; 
	text-decoration: none; /* Removes default underline on links. */
	margin-bottom: 15px;
}

#footer {
	background: url(images/footer_bg.jpg) no-repeat center top; 
	height: 148px; /* Sets a height that equals the height of the background image. */
}
#footer span {
	position: absolute; /* Takes the span (that holds the text for the H1 text) out of the document flow so that it can be positioned in an exact place on (or off) the page. */
	left: -3000px; /* Puts the text within the h1 way off screen so that visual users to not see it. */
}
#footer p {
  font-size: 70%; 
  text-align: center;
  padding-top: 60px;
}

#footer_index {
	background: url(images/footer_bg_index.jpg) no-repeat center top; 
	height: 148px; /* Sets a height that equals the height of the background image. */
}
#footer_index span {
	position: absolute; /* Takes the span (that holds the text for the H1 text) out of the document flow so that it can be positioned in an exact place on (or off) the page. */
	left: -3000px; /* Puts the text within the h1 way off screen so that visual users to not see it. */
}
#footer_index p {
  font-size: 70%;  
  text-align: center; 
  padding-top: 60px; 
}

/* CLASSES FOR IMAGES AND CLEARING FLOATS -------- */
/* --------------------------------------------------------- */
BR { clear: left }

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	font-size: 1px; /* Sets the font size to 1 pixel */
	line-height: 0px; /* Sets line-height to 0 -font and line-height, even if not explicitly on the page, might add diemnsion to the clearing element rather than make it larely invisible */
	clear: both; /* Keeps floated divs from draping over objects beneath them. */
	height: 0px; /* Makes sure the clearing element has no height */
}

.lftflt {
	float: left; 
	margin-right: 8px; 
	vertical-align: top;
	margin-bottom: 10px;
}
.rgtflt {
	float: right; 
	margin-left: 8px; 
	vertical-align: top;
	margin-bottom: 2px;
}
.form {
	background-color: #FEFEFE;
	background-image: url(images/bgbox390_top.jpg);
	height: 32px;
	padding-top: 8px;
	font-weight: normal;
	background-repeat: no-repeat;
}
.pdfIcon {
	vertical-align: -10px;
	padding-top: 10px;
	padding-left: 10px;
}
p.download-pdf {
	background-image: url(images/logo_pdf_32x32.gif);
	background-repeat: no-repeat;
	background-position: 8px 50%;
	border: 1px solid #DDDDDD;
	color: #999999;
	font-size: 10px;
	padding-top: 2px;
	padding-right: 4px;
	padding-bottom: 2px;
	padding-left: 48px;
	height: 42px;
	vertical-align: middle;
	margin-top: 10px;
}

p.download-pdf:hover {
	border: 1px solid #006699;
	color: #006699;
}
#wrapper #innerwrapper #features .dialog .bd .c .s strong {
	color: #000000;
}
#wrapper #innerwrapper #features .dialog .bd .c .s em {
	color: #FF0000;
}
#wrapper #innerwrapper #features .dialog .bd .c .s p {
	padding-top: 10px;
	padding-bottom: 0px;
	margin: 0px;
}
.dividerShadow {
	background-image: url(images/dividerShadow.jpg);
	height: 30px;
	background-repeat: no-repeat;
}
#wrapper #innerwrapper #features .dialog .bd .c .s h4 {
	background-image: url(images/h4_dividerShadow_200.jpg);
	background-repeat: no-repeat;
}
#wrapper #innerwrapper #features .dialog .bd .c .s .redtext {
	color: #CC0000;
}
.wmv li {
	list-style-image: url(images/wmv_logo_18px.png);
	vertical-align: 50%;

}
#wrapper #innerwrapper #200right p {
margin-left: 15px;
line-height: 125%;
}
#wrapper #innerwrapper #features2 h4 {
	background-image: url(images/h4_dividerShadow.jpg);
	padding-top: 23px;
}
