/*  

Styles for rendering the nolan chart 
  1. description + example,
  2. form
  3. form results and plot

Note that three styles related to charting of 
responses are embedded in the class used for the 
nolan chart.

grid_container
grid
plot


*/ 	 


/*  
	%%%%%         Body Style          %%%%%
*/ 
	#bodystyle 
	{
		background-color: white;
		margin: 0px; 
		padding: 0px;
 	}

	
/*  
	%%%%%      CategoryBox       %%%%%
*/ 
	div.CategoryContainer
	{
		width: 625;
		margin-top:0;
		margin-left: 4%;
		margin-right: 4%;		
 	}

/*  
	%%%%%    CategoryHeaderContainer       %%%%%
	
	<div class=CategoryContainer>
	   <div class=CategoryHeaderContainer>
	      <div class=CategoryLabel>
		  <div class=QuestionHeaderCell>
		  <div class=QuestionHeaderCell>
		  <div class=QuestionHeaderCell>
*/	
	
	div.CategoryHeaderContainer
	{
		padding-top: 4;		
		padding-bottom: 4;
		/*border: 1px solid green;   */
		height:2em;
		clear:both;
  	}
	
/*  
	%%%%%      CategoryLabel       %%%%%
*/ 
	div.CategoryLabel
	{
		width:60%;
	 	color: navy; 
	 	font-size: 125%;
		font-family: "New Century Schoolbook", Times, serif;
		text-align:  left;
		line-height: 150%;
		float:left;
		
 	}

/*  
	%%%%%      QuestionHeaderCell       %%%%%
*/ 
	div.OptionHeaderCell
	{
		width: 13%; 
		/*   border: 1px solid red; */ 
		
		font-size: 100%; 	
		color: navy;
		
		text-align: center;
/*
		bottom:0%;
		vertical-align: bottom;
*/
		height: auto; 	
		float:left;
 	}

	
/*  
	%%%%%      QuestionContainer       %%%%%
	  1. shaded
	  2. unshaded
	  
	  within <div class=CategoryContainer> 
	  
		<div class=QuestionContainer> OR <div class=QuestionContainer_Shaded>
			<div class=QuestionCell>
			<div class=ButtonsCell>
			<div class=ButtonsCell>
			<div class=ButtonsCell>
*/ 	
	
	div.QuestionContainer
	{
		padding-top: 4;		
		padding-bottom: 4;
		/*border: 1px solid green;   */
		height:2em;
		clear:both;
  	}
	
	div.QuestionContainer_Shaded
	{
	
		padding-top: 4;		
		padding-bottom: 4;
		height:2em;		
		/* Azure  #F0FFFF  */		
		background-color: #F0FFFF;
		
		/*border: 1px solid green;  */ 
		clear:both;		
 	}
	
/*  
	%%%%%      QuestionCell       %%%%%
*/ 
	div.QuestionCell
	{
		width:60%;
		/*  border: 1px solid blue;  */ 
		
	 	color: navy; 
	 	font-size: 80%;
		font-family: "New Century Schoolbook", Times, serif;
		text-align: left;
		 
		float: left;

 	}
	
/*  
	%%%%%      ButtonsCell       %%%%%
*/ 
	div.ButtonsCell
	{
		width: 13%; 
		/* border: 1px solid red;   */ 
		
		
		font-size: 100%; 	
		color: navy;
		
		text-align: center;
/*
		
		bottom:0%;
		vertical-align: bottom;
*/
		height: auto; 	
		float:left;
 	}

/*  
	%%%%%    PoliticalTypeLabel     %%%%%
*/ 
	div.PoliticalTypeLabel
	{
		font-size: 150%;
		width: 625;
		
		text-align:center;
		
		margin-top:0;
		margin-left: 4%;
		margin-right: 4%;
		margin-bottom: 0;	
		
		
		color:navy;
		
	}
/*  
	%%%%%   GraphicandTextContainer    %%%%%
*/ 
	div.GraphicandTextContainer
	{
		width:650;
		margin-left:10%;
		margin-right:10%;
		clear:both;

		border: 1px solid green;   /*  */

	}
/*  
	%%%%%   GraphicLeftContainer    %%%%%
*/ 
div.GraphicLeftContainer
{
	width:49%;

	border: 1px solid blue;   /*  */

}
/*  
	%%%%%   TextRightContainer    %%%%%
*/ 
div.TextRightContainer
{
	width:49%;
	text-align:left;

	border: 1px solid red;   /*  */

}

	
p.PageBreak{page-break-before: always}


img.top {vertical-align:text-top}

img.middle {vertical-align:text-middle}

img.bottom {vertical-align:text-bottom}