@CHARSET "ISO-8859-1";



/* ======================================== */
/* commons:  all pages have basic structure */
/* ======================================== */

body {
    width: 855px;
    /* border: 1px solid black; */
    
    margin: auto; 
    padding: 0;
    text-align: center;
    background: white;
    /* background: #230f02 url('../images/layouts/body_bg2.jpg') center top repeat-y; */
}


div.scripture {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12pt;
	padding: 2em;
	margin-top: 2em;
	margin-left: auto;
	margin-right:auto;
	margin-bottom: 2em;
	width: 80%;
	border: 1px solid black;
	background: #E0E0E0;
	text-align: left;
	}

/*  each page has introductory text, general a greeting or brief 
	explanation */
div.intro {
    margin-top: 2em;
    line-height: 140%;
}

div.result {
	font-family:Times New Roman, Helvetica, sans-serif;
	font-size: 13pt;
	font-weight: normal;
	padding: 1em;
	margin-top: 1em;
	margin-left: auto;
	margin-right:auto;
	margin-bottom: 1em;
	width: 85%;
	border: 1px solid black;
	background: #F7FE2E;
	text-align: center;
	}

div.plan {
	font-family:Times New Roman, Helvetica, sans-serif;
	font-size: 12pt;
	padding: 2em;
	margin-top: 2em;
	margin-left: auto;
	margin-right:auto;
	margin-bottom: 2em;
	width: 80%;
	border: 1px solid black;
	background: #FBEFEF;
	text-align: left;
	}

div.tiny {
	font-family:Times New Roman, Helvetica, sans-serif;
	font-size: 12pt;
	padding: 1em;
	margin-top: 1em;
	margin-left: auto;
	margin-right:auto;
	margin-bottom: 1em;
	width: 50%;
	border: 1px solid black;
	background: #FAAC58;
	text-align: center;
	}

div.general1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 6pt;
	padding: 1em;
	margin-top: 1em;
	margin-left: auto;
	margin-right:auto;
	margin-bottom: 1em;
	width: 90%;
	background: #F5FBEF;
	text-align: center;
	}

div.general2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 10pt;
	padding: 1em;
	margin-top: 1em;
	margin-left: auto;
	margin-right:auto;
	margin-bottom: 1em;
	width: 70%;
	background: #F5FBEF;
	text-align: center;
	}

/*  each page has introductory text, general a greeting or brief 
	explanation */
div.intro {
    margin-top: 2em;
    line-height: 140%;
}

div.intro p, div.intro ul li, div.instruct p, div.intro ul li {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12pt;
		text-align: left;
}

/* some pages have additional instruction embedded on the page */
div.instruct {
	text-align: left;
	margin-top: 2em;
	background: #E0E0E0;
	padding: 10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 10pt;
}


/* usage hint block on first page */
div.usage {
/*  display: none; */
    margin-top: 1in;
    width: 100%;    
    border: 1px solid black;
}


/*
    Only used for debug, we separate programmer's debugging
    trace in this div.  You can set the display to none to 
    hide the debug trace.
    */
div.debug {
    /* display: none; */
    margin-top: 1in;
    width: 800px;
    border: 1px solid black;
 
}
div.dbghead {
    width: 100%;
    background: #F5EEE6;
    font-weight: bold;
}


div.header {
       background: white;
    }
    
div.footer {
       margin-top: 2em;
        text-align: center;
        color: #777777;
    }
/* ======================================== */
/* question page                            */
/* ======================================== */

/* 
    the assessment questions are presented in this div inside 
*/
div.question {
	margin-bottom: 1em;
	margin-top: 2em;
	font-family:Arial, Helvetica, sans-serif;
 	font-size: 14pt;
	font-weight: bold;
	line-height: 110%;
	text-align: center;
	height: 50px;

}

/*
    the response options are presented in a horizontal table,
    one option per row.
*/
table.quest {
	align: center;
	margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
	width: 600px;
    border: 1px solid black;    
}

/*
	Each radio button is positioned inside the table cell 
	detail.
	*/
table.quest * td {
	width: 120px;
	text-align: center;
}

/*
	after the question table, we present the user with a 
	status div that contains some progress text and a progress
	bar
	*/
div.status {
	margin-top: 2em;
	text-align: center;
	}
	
/*
	the progress div will span the page and represents the 
	potential bar.  
	*/
div.progress {
    text-align: left;
	width: 600px;
	background: #F6C196;
	}
	
/*
	this div is located inside the progress div and represents
	how much has been accomplished.  DO NOT specify the width
	(size) of the bar here.  It is computed based on the how
	many questions have been answered by the user.
	*/
div.bar {
	text-align: left;
	background: #F68428;
	color: #F5EEE6;
	}

/* ======================================== */
/* results page                             */
/* ======================================== */

#row_total {
	background: #A0A0A0;
	}
	
div.results {

	text-align: left;
	}

/*
	The tabular presentation of the score for each growth area.
	*/
table.results {

}


table.results * tr.rrow{
}

table.results * td {

    vertical-align: center;
    font-size: 12pt;
    font-family:Arial, Helvetica, sans-serif;
    color: white;
	}

/*
	The cell that contains the growth area (aka section) label.
	*/
table.results * td.rsec {
	vertical-align: center;
	padding-left: 5px;
    width: 200px;
    font-weight: bold;
    text-align:left;
}

table.results * td.colhead {
	background: #A0A0A0;
    font-weight: bold;
    padding: 3px;
    margin:3px;
}

/*
	The score cells
	*/
table.results * td.rscore {
    width: 100px;
    font-weight: bold;
    text-align:center;
}

/*
	The additional link cells, leading the user to more information.
	*/
table.results * td.rlink {
    width: 200px;
    font-weight: bold;
}


td.interp {
    vertical-align: top;
    text-align: left;
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 10px;
    }


div.chart {
    text-align:left;
    }


#chart1 {
    text-align:left;
    width: 500px; 
    height: 400px;
    }


#chart2 {
    text-align:left;
    width: 500px; 
    height: 400px;
    }




.chartAxis {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-weight: bold;
}

.chartTitle {
	font-family:Arial, Helvetica, sans-serif;
    font-size: 14pt;
    font-weight: bold;
}

div.blankslist {
	margin-top: 1em;
	margin-left: 50px;
	text-align: left;
	font-family:Arial, Helvetica, sans-serif;
	}

.progress {
	color: #0404B4;
	font-weight: bold;
	font-style: italic;
}
