body
{
  margin: 0;
  padding: 0;
  margin-left:10px;
  background-color: rgb(197,204,211);   /* Set the page color to light blue */
  -webkit-text-size-adjust:none;      /* Turn off font resizing */
}


h1 
{
  margin:0;
  padding-top:10px;      
  padding-right:10px;     
  padding-bottom:10px;  
  padding-left:10px;
  
  font-size:17px;
  font-family: Helvetica;
  font-weight:bold;
  color: rgb(76,86,108);   /* Set each label color */    
}

ul 
{     
  padding: 0;     
  margin-top:0;
  margin-right:10px;
  margin-bottom:17px;      /* Set each list 17 pixels from the top of the button bar(or the top of the next list) */
  
  font-size:17px;
  font-family: Helvetica;
  font-weight:bold;
  color:black;
  
  width: 300px;
  background-color: white;       /* Each list has a white background fill */
  
  border-width: 1px;           /* Draw a rectangle around each list */
  border-style:solid ;
  border-color:rgb(217,217,217);
  
  -webkit-border-radius: 8px;     /* Round each corner of the created rectangle */
}


li
{  
  list-style-type: none;  
  
  border-top-width:1px;  /* Create lines between cells. Each line is placed above each item */
  border-top-style:solid;
  border-top-color:rgb(217,217,217);

  padding-top:10px;      
  padding-right:10px;     
  padding-bottom:14px;   /* Indent the cell content 14 pixels from the bottom edge of a cell */
  padding-left:10px;  
}


li:first-child 
{
  border-top:0;    /* Remove border above the first item of the list */
}


a  /* Handle the click/tap highlight. Highlight an entire cell with the iPhone grey background when tapped */ 
{
  display: block;   /* Sets the href to be a block rather than inline */
  
  /* The padding properties adjust the text content within the href block */
  padding-top: 8px;
  padding-right: 8px;
  padding-bottom: 12px;
  padding-left: 8px;
  
  /* The margin properties adjust the size of the href block  */
  margin-top: -8px;
  margin-right: -8px;
  margin-bottom: -12px;
  margin-left: -8px;   
  
  text-decoration: none;
  color:black;
}


.showArrow /*  Add an arrow button to a link */
{  
  margin-right:10px;    
  padding-right:16px;     /* Distance between the arrow button and a text */
  
  background-image: url(images/chevron.png); 
  background-repeat: no-repeat;
  background-position: right; 
}


.secondary  /* Used for secondary text (text that is less important) */
{
  font-weight:normal;    /* Regular font is used for secondary text */
  float:right;         /* Align secondary text to the right of its parent cell */
  margin-right:10px;    
}

div#entry1
{
  margin: 0px 20px 0px 20px;
  display: none;
}

div#entry2
{
  margin: 0px 20px 0px 20px;
  display: none;
}

.secondaryWArrow /* Used for secondary content that contains a link and a button */
{
  display:block;     /* Set the secondary content to be a block   */
  font-weight:normal; 
  float:right;
  color: #324F85;     /* sets the color of the link */
}


.secondaryWLink /* Used for secondary text that is a link */
{
  font-weight:normal;    
  float:right;      
  margin-right:10px;    
  color: #324F85;     /* sets the color of the link */
}

/* The block is a transparant fixed width ekenebr */
.image  
{
	display:block;
	margin-top:0;
	margin-bottom:17px;      /* Set each list 17 pixels from the top of the button bar(or the top of the next list) */

	padding-top:10px;
	padding-right:10px;
	padding-bottom:10px;
	padding-left:10px;

	width: 280px;
	background-color: white;       /* Each list has a white background fill */
	
	border-width: 1px;           /* Draw a rectangle around each list */
	border-style:solid ;
	border-color:rgb(217,217,217);
	
	-webkit-border-radius: 8px;     /* Round each corner of the created rectangle */
}

/* The block is a transparant fixed width ekenebr */
.block  
{
	display:block;   
	width: 300px;
	margin:0;
	padding-top:10px;
	padding-right:10px;
	padding-bottom:10px;
	padding-left:10px;
}

/* The button class defines properties for buttons that are either 30px or 46px high  */
.button  
{  
   /* Set a button to be a block so its height and width can be adjusted */
  display: block;        
  
  /* Use the highest button height to ensure that text will vertically align on all buttons */
  line-height: 29px;   
  
  /* A button will expand to the width of its parent cell if no width is specified */
  width: 150px;      
  
  font-size: 20px;
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  color: #fff;
  
  text-decoration: none;
  text-align: center;
}


 /*  Builds a button using a 29x46 image */
.blue
{
  margin: 3px auto;
  color: #fff;
   /*  Put a 1 pixel blur black shadow below the button's text */
  text-shadow: #000 0px 1px 1px;
  
  /* The right and left borders are 14 pixels wide  */
  border-width: 0px 14px 0px 14px;     
  
  
  /* The leftButton image is split into three. Both left and right sides are 14 pixels wide.  */
  /* The remaining 1 pixel is used for the middle part of the image.   */
  /* The left and right sides will remain fixed while the middle part is scaling horizontally.  */
  -webkit-border-image: url(images/blueButton.png) 0 14 0 14;  
}

/*  Builds a button using a 29x46 image */
.white 
{
  margin: 3px auto;
  border-width: 0px 14px 0px 14px;
  color: #000;
  
  /*  Put a 1 pixel blur white shadow below the button's text  */
  text-shadow: #fff 0px 1px 1px;  
  
  /* Note that the -webkit-border-image values are given as  0 14 0 14 and not 0px 14px 0px 14px */
  -webkit-border-image: url(images/whiteButton.png) 0 14 0 14;
}

/*  Builds a button using a 29x46 image */
.black  
{
  border-width: 0px 14px 0px 14px;
  color: #fff;
  
  /* Put a 1 pixel blur black shadow below the button's text */
  text-shadow: #000 0px 1px 1px;  
  -webkit-border-image: url(images/grayButton.png) 0 14 0 14;
  margin: 3px auto;  
}

/*  Creates a button using a 18x30 image */
.blackLeft 
{
  margin: 3px auto;
  color: #fff;
  
  /* Put a 1 pixel blur black shadow below the button's text   */
  text-shadow: #000 0px 1px 1px;   
  border-width: 0px 5px 0px 12px;
  
  
  /* -webkit-border-image divides the leftButton image into 2 corners and middle part.  */
  /* The left corner is 12 pixels wide. The right corner is 5 pixels wide and the middle part is 1 pixel. */
  -webkit-border-image: url(images/leftButton.png) 0 5 0 12;    
}

/* Creates a button using a 18x30 image */
.blackRight   
{
  margin: 3px auto;
  border-width: 0px 12px 0px 5px;
  color: #fff;
  text-shadow: #000 0px 1px 1px;
  
  /* -webkit-border-image divides the rightButton image into three parts. */
  /* The right and left corners of the image are respectively 12 pixels and 5 pixels wide. */
  /* This leaves 1 pixel for the midlle part of the image.    */
  -webkit-border-image: url(images/rightButton.png) 0 12 0 5;
}