* {margin:0; padding:0;} 				/* Sets margin and padding to 0 for everything in the document */

body {
	margin:0px;
	padding:0px;
	font: 1.0em verdana, arial, sans-serif; 	/* sets the font and size for the page */
	text-align:center;
}

#navIntro, #navFinal {
	text-align:center;
	font-size: 130%; 				/* Sets the font size for the Introduction and Final Thought
										link in the left-hand navigation bar */	
	line-height:2em!important;			/* Sets the vertical spacing for these two buttons.
							Using line-height:2em; for a button of height:2em;
							is a CSS trick for centering single line text vertically in
							a box. You can use !important after any rule to override
							if something else is setting this rule somewhere else.
							The padding:5px 0; gives a little breathing room for the top and
							bottom of the text in this box. */
	padding:5px 0!important; 
}
							/* The following styles set the current page marker by changing the text color and background color of links */
#PageIntro #mainwrap #navlist li a#navIntro,
#Page1 #mainwrap #navlist li a#nav1,
#Page2 #mainwrap #navlist li a#nav2,
#Page3 #mainwrap #navlist li a#nav3,
#Page4 #mainwrap #navlist li a#nav4,
#Page5 #mainwrap #navlist li a#nav5,
#Page6 #mainwrap #navlist li a#nav6,
#Page7 #mainwrap #navlist li a#nav7,
#Page8 #mainwrap #navlist li a#nav8,
#Page9 #mainwrap #navlist li a#nav9,
#Page10 #mainwrap #navlist li a#nav10,
#Page11 #mainwrap #navlist li a#nav11,
#Page12 #mainwrap #navlist li a#nav12,
#PageFinal #mainwrap #navlist li a#navFinal {
	color: #474745;					/* link text color from Jon */
	background: #e1edf8; 			/* button background color from Jon */
}
div#mainwrap { 						/* This encloses the ENTIRE page, including the footer. We want to center it in the browser viewpoint. */
	width:800px;
	width:80%;
	min-width:600px;
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
}

div#inner {
	border-style:solid;
	border-color:#465BB0;
	border-width:10px;
	overflow:hidden;				/* clears floats inside "inner." The footer is inside "inner" so it needs to be cleared as well */
}

div#header {
	width:800px;					/* for a fixed width layout */
	width:100%;
	height: 50px;					/* height of header */
	
	background: #f0b7a1; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	/* what follows is the CSS for the gradient in the header */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjdhMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMxJSIgc3RvcC1jb2xvcj0iIzhjMzMxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcxJSIgc3RvcC1jb2xvcj0iIzc1MjIwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMGI3YTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #f0b7a1 0%, #8c3310 31%, #752201 71%, #f0b7a1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0b7a1), color-stop(31%,#8c3310), color-stop(71%,#752201), color-stop(100%,#f0b7a1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f0b7a1 0%,#8c3310 31%,#752201 71%,#f0b7a1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f0b7a1 0%,#8c3310 31%,#752201 71%,#f0b7a1 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f0b7a1 0%,#8c3310 31%,#752201 71%,#f0b7a1 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f0b7a1 0%,#8c3310 31%,#752201 71%,#f0b7a1 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#f0b7a1',GradientType=0 ); /* IE6-8 */
/* end of CSS for header gradient */

	padding-top:10px;
	color:#F9F7F4;					/* header text color */
	padding-bottom:0.5em;
	font-size:26px;					/* header font size */
	text-align:center;				/* center the header text */
}
div#header h6 {						/* Used to style the sub-title text */
	font-weight: normal;				
	font-style: italic;
}

div#contentarea { 					/* contains the three columns */
	width:734px;
	width:100%;						/* needed for a liquid design */
	background-color:#FFFFFF; 		/* match UpToParents website colors */
	overflow:hidden; 				/* to clear around the floated columns. This eliminates the need to put an extra clearning div after the third column */
	height:600px;					/* Make all pages the same height - might have to be removed for responsive design */
}

div#column1 {
	width:25%;						/* use width:25% for a liquid design */
	float:left;
	margin-top:30px;
	}				
div#column1 p, p {					/* for the bottom links in column1 */
	font-size:10pt;
	margin-left:10px;
	margin-top:1em;
}

div#column1 p a, div#column2 p a, div#column3 p a {
									/* style the two links at the bottom of column1 */
	font-size:inherit;
	color:#943919;
	margin-left:0px;
	text-decoration:none;
}

div#column1 p a:hover, div#column2 p a:hover, div#column3 p a:hover { 
	color:#000;
}

#navlist {
	width: 190px;				/* for a fixed design */
	width:100%;					/* for a liquid design */
}

#navlist ul {					/* style the navigation links */
	margin: 0; 					/* removes indent IE and Opera */
	padding: 5px; 				/*removes indent Mozilla and NN7 */
	font:Verdana, Arial, Helvetica, sans-serif;
	list-style-type:none; 		/*turns off display of bullets */
	font-size: .7em;
}

#navlist li .linkformat {		/* used to indent second line of nav links */
	margin-left:2em;
	margin-top:-11px;
}

#navlist a:link, #navlist a:visited {			/* to style the naviation buttons we style the links.*/
	height: 2em;
	line-height: 1em;
	display: block;					/* this makes the whole button a hotspot */
	padding: .75em 2px .75em 2px;
	border: 2px solid;
	border-color: #ddd #000 #000 #ddd;
	background: #f0b7a1; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
/* what follows is the CSS for the gradient in the nav links */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjdhMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMxJSIgc3RvcC1jb2xvcj0iIzhjMzMxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcxJSIgc3RvcC1jb2xvcj0iIzc1MjIwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMGI3YTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  #f0b7a1 0%, #8c3310 31%, #752201 71%, #f0b7a1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f0b7a1), color-stop(31%,#8c3310), color-stop(71%,#752201), color-stop(100%,#f0b7a1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #f0b7a1 0%,#8c3310 31%,#752201 71%,#f0b7a1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #f0b7a1 0%,#8c3310 31%,#752201 71%,#f0b7a1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #f0b7a1 0%,#8c3310 31%,#752201 71%,#f0b7a1 100%); /* IE10+ */
background: linear-gradient(to right,  #f0b7a1 0%,#8c3310 31%,#752201 71%,#f0b7a1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#f0b7a1',GradientType=1 ); /* IE6-8 */
/*  End of CSS gradient code for nav links */

	text-decoration: none;				/* tuns off underlining of navigation links */
	color: #F7F4F2;
}

#navlist a:hover, #navlist a:active {
	background-color:#FFFFCC; 			/* sets the background color for the hover and clicked state left-hand mavigation links */
	color: #F7F4F2;				/* sets the text color for the hover and clicked state left-hand mavigation links */
	
}

#column2 {						/*inherits background color from contentarea*/
	float:left;
	width:374px;				/* for a fixed design */
	width:50%;					/* for a liquid design */
}

#column2 h4 {
	color:#4151ab;					/* sets the text color for the page title in the middle column */
	margin:2em 1em 0 10px;			/* make the top of this heading match the height of columns1, 2 */
	border-bottom: 1px solid;
}

div#column2 p {
	font-size:.8em;					/* sets the font size for the paragraph text in the middle column */
	margin:1em 10px;
}

div#column2 p a {
	text-decoration:none;
	color:#a54a00;					/* sets the link color for the links in the middle column paragraphs */
}

div#column2 p a:hover {
	background-color:#debe7b;		/* sets the hover color for the links in the middle column paragraphs */
}

div#column2 li {
	list-style-position:outside;
	font-size:0.8em;
	margin:0 10px .8em 50px;
}

div#column2 li a {
	text-decoration:none;
	color:#943d19;					/* sets the link color for any links in the bulletedlist in the middle column */
}

div#column2 li a:hover {
	background-color:#debe7b;			/* sets the background hover color for any links in bulleted lists in the middle column */
}

/* =====================================================Styles for callout box =============================================*/
.box {
	max-width:800px;
  	min-width:273px;				/* set minimum width for box */
  	border: 1px solid #c6a765;
 	background: #FAF7F1;
 	background: #dbdbdb;
  	background-color:#F5F5E2; 			/* match UpToParents website colors */
  	color:#000;
  	-webkit-border-radius: 10px;
  	-moz-border-radius: 10px;
  	border-radius: 10px;
  	margin-left:10px;
  	margin-top:-1.5em;
}
.box h3 {
  	margin: 0;
  	padding: 6px 8px 4px 10px;
  	color:#a44902;
  	border-bottom: 1px solid #E0CFAB;
  	background: #f0b7a1; 				/* Old browsers */



  	-webkit-border-top-left-radius: 10px;
  	-webkit-border-top-right-radius: 10px;
  	-moz-border-radius-topleft: 10px;
  	-moz-border-radius-topright: 10px;
  	border-top-left-radius: 10px;
  	border-top-right-radius: 10px;
  	text-align:center;
}
/* ==========================================End of styles for Callout box ==============================================*/

/* ==========================================Styles for Extra tip======================================================= */
    
#toggleText {
	color: #fff;
	font-size:1em;						/* font-size for text in the Extra Tip */
	font-style:italic;
	line-height:1.2;
	position: absolute;
	display: none;
	padding: 10px 10px;
	width:400px;
	max-width: 400px; 					/* need i.e. rule */
	background-color:#245796;
	background:black;
	background-color: rgba(0,0,0,.7);
	background: #465BB0;				/* background color for Extra Tip */
	-webkit-border-radius: 12px;		/* Rounded corners for Extra Tip */
	-moz-border-radius: 12px;
	border-radius: 12px;
}
#toggleText li a {
	color:#a54a00;
	font-weight:bold;
}


#displayText {
	color:#A54A00;
	margin-left:10px;
	text-decoration:none;
	font-size:0.9em;
	font-weight:bold;
}
/* ==================================== End of Extra Tip Styles =========================================================  */

/* Column 3 Rules */

div#column3 {							/* sets the background color and width of the 3rd column. inherit the
										background color from contentarea */
	margin-top:75px;
	width:170px;						/* for a fixed widthlayout */
	width:24%;							/* for liquid layout */
	float:right;
}

div#column3 img {
	float:right;
	margin-right: 5px;					/* place image all the way to the right NOTE: CHANGED TO 5 PX MARGIN*/
	max-width:100%;						/* for "responsive" design */
	
}

div#column3 .quote {
	font-size:70%!important; 			/* sets the font size of the quotations in column 3 */
	color:#000;							/* sets the font color of the quotations in column 3 */
	clear:right; 						/* since we floated the picture, we have to clear it before the quote */
	margin-bottom:10px;
	margin-right:8px;
	padding-top:10px;
	padding-right: 0px;
	text-align:left;					/* left justify the quote */
	line-height:1.2em;
}

/* font size and color for citation */
p.citation {
	color: #631C1D;
	font-size:65%!important;
	text-align:right;
	margin-right:8px;
	font-style:italic;
}

										
p.expert{								/* font color and size for author */
	color: #631C1D;
	font-size:65%!important;
	text-align:right;					/* Align author to the right */
	margin-right:8px;
}

div#column3 li {
	list-style-position:outside;
	font-size:11px;						/* sets the font-size of any text used in bulleted lists in the 3rd column */
	margin:0 10px .8em 25px;
}

#footer {								
	width: 755px;						/* for fixed layouts */
	width:100%;
	height:35px;
	color:#F9F7F4;						/* for color of vertical bars in footer */
	line-height:1.3;					/* spacing between footer rows */
	padding-top:5px;
	font-size:70%;
					
	background: #f0b7a1; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
/* what follows is the CSS code for the footer gradient 8*/
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjdhMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMxJSIgc3RvcC1jb2xvcj0iIzhjMzMxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcxJSIgc3RvcC1jb2xvcj0iIzc1MjIwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMGI3YTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #f0b7a1 0%, #8c3310 31%, #752201 71%, #f0b7a1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0b7a1), color-stop(31%,#8c3310), color-stop(71%,#752201), color-stop(100%,#f0b7a1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f0b7a1 0%,#8c3310 31%,#752201 71%,#f0b7a1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f0b7a1 0%,#8c3310 31%,#752201 71%,#f0b7a1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f0b7a1 0%,#8c3310 31%,#752201 71%,#f0b7a1 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f0b7a1 0%,#8c3310 31%,#752201 71%,#f0b7a1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#f0b7a1',GradientType=0 ); /* IE6-8 */
/* End of CSS for footer gradient */

}

#footer a:link, a:visited {
	text-decoration: none;
	color:#F9F7F4;							/* color of links in footer */
}

#privacy {
margin-left:80px;
margin-right:140px;	
}

#faq {
	margin: 0 10px;
	margin-left:80px;
}

#parents {
	margin: 0 10px;
}

#professionals {
	margin: 0 10px;
}

#about {
	margin: 0 10px;
}

#contact {
	margin-left:10px;
}

#copyright {	
	margin-right:140px;
}

#mailto {
  	float: right;
	margin-right:77px;
  	padding: 8px 16px;
} 
	
/* general purpose rules */

.clear-all {							/* for clearing containers around floats */
	clear:both;
}
clearfix:after {						/* another method for clearing floats */
	content: ".";              
	display: block;             
	height: 0;                 
	clear: both;               
	visibility: hidden;	      
}

.clearfix {display: block;}   			/* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
								
* html .clearfix {						/* Hides from IE-mac \*/
	height: 1%;
}