@charset "UTF-8";

/*

		CSS file for printing
		
		March 31 2010 mb
		
-------------------------------------------------------------------------------------------------------
columns for newsletter.shtml based on
http://www.getcsstemplates.com/free_css_templates/free-css-templates-67.html
--------------------------------------------------------------------------------------------------------
*/


/*	Zero out margin, padding, border  to make sure that all browsers place the content in the same place. 
    Then set  default foreground or font color to black and the default background color to white
    (source credit: Jennifer Kyrnin, about.com */
html, body {
	margin: 0px;
	padding: 0px;
	border: 0px;
	color: #000; /*	 foreground or fant color 000=white*/
}

/*	 set default font size in em and the default font family  (source credit: Jennifer Kyrnin, about.com */
html, body, p, th, td, li {
	font-family: Verdana, Arial, sans-serif;
	font-size: .9em; /* background: url(images_global/stripe.png) repeat;  for debugging */
}

/*	 now for headers, set the font family... */
h1, h2, h3, h4, h5, h6 {
	font-family: Verdana, Arial, sans-serif;
}

/*	 ...and after that, set default hx sizes (source credit: Jennifer Kyrnin, about.com */
h1 {
	font-size: 1.5em;
}

h2 {
	font-size: 1.25em;
}

h3 {
	font-size: 1em;
}

h4 {
	font-size: 9em;
}

h5 {
	font-size: 0.6em;
}

h6 {
	font-size: 0.6em;
}

/************************
         Divs
**************************/
/* ID selectors are used to ID one and only one element. An ID selector can only be used once per document. Otherwise, use class selectors */

#wrapper {
	background: white;
	min-width: 780px;
	max-width: 1260px;
	margin: 10px auto;
}

#wrapper #container {
	margin: 10px 10px 0px 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

#header_main_page {
	height: 200px;
	background-color: #4682b4; /* 4682b4 is a blue with hints of gray (used in May 2010 for header and footer). 0073AD is kind of like our roof*/
}

#header_secondlevel_page {
	/*	 used on the second level pages */
	height: 125px;
	background-color: #0073AD; /* 0073AD is kind of like our roof*/
}

#header_newsletter {
	height: 16em;
	background-color: #0073AD; /* 0073AD is kind of like our roof*/
}


#header_thirdlevel_page {
	/*	 used on the second level pages */
	height: 100px;
	background-color: #0073AD; /* 0073AD is kind of like our roof*/
}

#header_photo_page {
	/*	 used on the second level pages */
	height: 5em;;
	background-color: #0073AD; /* 0073AD is kind of like our roof*/
}

#nav {
  	width: 220px; 
	float: left;
	padding-left: 0px;
	padding-top: 1em;
	background-color: #e6f3ff;/* remove before shipping
	border: solid 3px;     
	border-color: #FF00AA; 
	*/
}

#navbuttons {
	width: 216px; /* was 210 ;*/
	text-align: center;/* remove before shipping 
	border: solid 2px;
	border-color: #FFFF00;
	*/
}

/* the padding-left moves the content right to clear the nav area. Since there is ALSO a repeat-y gif in content then nav appears to be a column that goes all the way down and that will be the same vertical length as the main column. If we have the padding but no repeating gif, then the main column extends under the bottom of the nav section (at least it's background-color will - it still respects the padding-left */
 
#content {
	background: url(images_global/leftsidebar220x100.png) repeat-y white;
	padding-left: 220px;
	background-color: #fffbf0; /* used in May 2010: fffbf0 which is a creamy yellow. ffffff=white c0dffd*/
	padding-top: 10px;/* border: #080 solid 3px;remove before shipping */
	min-height: 600px; /* SWAG. Will it stop Sandy from falling thru  bottm? tried 30em. check iPhone */
}

#newsbar {
	background-color: #eeeeee; /* fffbf0  e77329 is orange */
	border-width: 2px;
	border-style:solid;
	border-color:#ff9900; /* 98bf21 */
	font-size: 0.9em;
}

#newsbar_graphic {
	padding-top: 1em;
	padding-right: 1em;
	padding-left: 1em;
	float: left;
}

#newsbar p {
	padding-left: 1em; /* 220px is orange */
	padding-right: 1em; /* 220px is orange */
	font-size: 0.8em;
}

#footer {
	height: 2em;
	text-align: left;
	padding-top: .5em; /*	Do i even need this? */
	padding-bottom: .5em;
	background-color: #4682b4;
	text-indent: 1em;
}

/* used in newsletters.shtml */
#boxes_container {
	margin : 5px;  /* mb was 5px auto*/
	width : 615px;/* mb added*/
}

/* define style for header elements inside main and second level page divs. 
   Should consider renaming to banner h1, h2, h3, etc. to differntiate 
   from h1,h2,h3s in content */

#header_main_page h1 {
	font-size: 2.5em;
	color: white;
	font-weight: bold;
	padding-top: 1em;
}

#header_main_page h2 {
	font-size: 2em;
	color: white;
}


#header_secondlevel_page  h1 {
	font-size: 1.75em;
	padding-top: 1em;
	padding-left: 1em;
	color: white;
}

#header_secondlevel_page  h2 {
	font-size: 1.25em;
	padding-top: 0em;
	padding-left: 0em;
	color: white;
}

#header_secondlevel_page  h3 {
	font-size: 1em;
	padding-top: 0em;
	padding-left: 0em;
	color: white;
}

#header_newsletter h1 {
	font-size: 1.4em;
	padding-top: 1em;
	padding-left: 4.5em;
	color: white;
}

#header_newsletter h2 {
	font-size: 1.2em;
	padding-top: 0em;
	padding-left: 5.25em;
	color: white;
}

#header_newsletter h3 {
	font-size: .8em;
	padding-top: 0em;
	padding-left: 8em;
	color: white;
}

#header_photo_page h1 {
	font-size: 1.75em;
	padding-top: 1em;
	padding-left: 1em;
	color: white;
}

#header_photo_page h2 {
	font-size: 1.25em;
	padding-top: 0em;
	padding-left: 0em;
	color: white;
}

#header_photo_page h3 {
	font-size: 1em;
	padding-top: 0em;
	padding-left: 0em;
	color: white;
}


#footer h3 {
	font-size: 1em;
	color: white;
	margin-top: 0em;
	margin-bottom: .25em;
}

/*
	Nav bar buttons
*/

/* 
Style the unordered list
Browsers like to left-indent lists; the amount varies for each browser. Some use 
padding (Mozilla, Netscape, Safari), others use margins (Internet Explorer, Opera). 
Setting margin and padding to 0 stops that. Setting list-style to none removes 
the bullets 
*/

ul#navbuttonslist {
	margin: 5px;
	padding: 5px;
	list-style: none;
}

ul#navbuttonslist li {
	display: block;
	list-style: none;
	font-size: 1.25em;
	margin-top: 0px;   /*  was 5px*/
	margin-right: 0px;
	margin-bottom: 0px;/*  was 5px*/
	margin-left: 0px;
	border-bottom: 3px solid; /* separates the menu items*/
	border-color: #cbe5fe;
}

ul#navbuttonslist li a {
	color: #000000; 				/* the text color (black, used in May 2010 */
	background-color: #e6f3ff;  	/* the box color #e6f3ff , a baby blue (used in May 2010) and 8CC6D6 (grayteal) */
	/*	border-bottom: 2px solid;*/
	border-bottom-color: #cbe5fe;	/* the dividers between nav buttons is cbe5fe (used in May 2010) a slightly darker baby blue than the box */
	display: block;
}

ul#navbuttonslist li a:hover {
	color: #ffef08;  			/* on hover, change the list item color to a darker blue color */
	background-color: #18adce;	/* on hover, change the text color to a yellow color */
}

/* 
-------------------------------------------------------------------------------------------------------
Global to everything 
--------------------------------------------------------------------------------------------------------
*/

#content p {
	margin-left: 1em;
}

/* class selectors for logo */
.logo_large {
	padding-top: 1em;
	padding-left: 1em;
	padding-right: 4em;
	float: left;
}

.logo_small {
	padding-top: .75em;
	padding-left: .75em;
	padding-right: .75em;
	float: left;
}

.logo_small_right {
	padding-top: .75em;
	padding-left: .75em;
	padding-right: .75em;
	float: right;
}

/* bullets in list items get a cute pawprint instead of a corky dot. Define different ones */
.bullet_arrow {
	display: block;
	list-style-image: url(images_global/arrow3.png);
	font-size:0.875em;
}

.bullet_arrow_paleyellow {
	display: block;
	list-style-image: url(images_global/arrow3_paleyellow.png);
	font-size:0.875em;
	
}.bullet_arrow_white {
	display: block;
	list-style-image: url(images_global/arrow3_white.png);
	font-size:0.875em;
}
.bullet_pawblack {
	list-style-image: url(images_global/pawblack.png);
	font-size:0.875em;
}

.bullet_pawblue {
	list-style-image: url(images_global/pawblue.png);
	font-size:0.875em;
}

.bullet_pawgreen {
	list-style-image: url(images_global/pawgreen.png);
	font-size:0.875em;
}

.bullet_pawyellow {
	list-style-image: url(images_global/pawyellow.png);
	font-size:0.875em;
}

/* 
-------------------------------------------------------------------------------------------------------
figure classes for images
--------------------------------------------------------------------------------------------------------
*/
.figuregeneric {
	float: left;
	margin-top: 10px;  		/* margin from the text to the top of this box */
	margin-right: 10px; 	/* margin from the right of this box until the start of the text */
	margin-bottom: 10px;
	margin-left: 10px; 		/* left margin to beginning of box. S/B at least whatr the p or body left margin is */
	border: 4px solid #666; /* the border around the box holding the image. IOW,the frame of the picture */
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	clear: right;			/* don't allow anything to the right*/
}

.figurefloatedleftgeneric {
	float: left;
	margin-top: 1em;  		/* margin from the text to the top of this box */
	margin-right: 1em; 	    /* margin from the right of this box until the start of the text */
	margin-bottom: 1em;
	margin-left: 2em; 		/* left margin to beginning of box. S/B at least whatr the p or body left margin is */
	border: 4px solid #666; /*the border around the box holding the image. the frame of the picture if you will */
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	clear: right;			/* don't allow anything to the right*/
}

.figurefloatedrightgeneric {
	float: right;
	margin-top: 10px;  		/* margin from the text to the top of this box */
	margin-right: 10px; 	/* margin from the right of this box until the start of the text */
	margin-bottom: 10px;
	margin-left: 10px; 		/* left margin to the beginning of this box. should be at least whatever the p or body left margin is */
	border: 4px solid #666; /*the border around the box holding the image. the frame of the picture if you will */
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	clear: left;			/* don't allow anything to the left*/
}

.figurefloatedleft200 {
	float: left;
	width: 204px;  			/*the width of the box that the image sits inside of */
	margin-top: 10px;  		/* margin from the text to the top of this box */
	margin-right: 10px; 	/* margin from the right of this box until the start of the text */
	margin-bottom: 10px;
	margin-left: 10px; 		
	border: 4px solid #666; 
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}

.figurefloatedright200 {
	float: right;
	width: 204px;  			/*the width of the box that the image sits inside of */
	margin-top: 10px;  		/* margin from the text to the top of this box */
	margin-right: 10px; 	/* margin from the right of this box until the start of the text */
	margin-bottom: 10px;
	margin-left: 10px; 		
	border: 4px solid #666; 
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	clear: right;			/* don't allow anything to the right*/
}

.figurefloatedleft100 {
	float: left;
	width: 104px;  			/*the width of the box that the image sits inside of */
	margin-top: 10px;  		/* margin from the text to the top of this box */
	margin-right: 10px; 	/* margin from the right of this box until the start of the text */
	margin-bottom: 10px;
	margin-left: 10px; 		/* left margin to the beginning of this box. should be at least whatever the p or body left margin is */
	border: 4px solid #666; /*the border around the box holding the image. the frame of the picture if you will */
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}

.figurefloatedright100 {
	float: right;
	width: 104px;  			/*the width of the box that the image sits inside of */
	margin-top: 10px;  		/* margin from the text to the top of this box */
	margin-right: 10px; 	/* margin from the right of this box until the start of the text */
	margin-bottom: 10px;
	margin-left: 10px; 		/* left margin to the beginning of this box. should be at least whatever the p or body left margin is */
	border: 4px solid #666; /*the border around the box holding the image. the frame of the picture if you will */
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	clear: right;			/* don't allow anything to the right*/
}

/* 
any img tag (an image) that is inside a tag having class "photo", gets this treatment
*/
.photo img {
	border: 2px solid #ccc; /*the border, the border type and the color of the border around the image */
	padding-top: 0px; 		/*the padding on all 4 sides around around the image; may flow outside the figurefloatedleft and right boxes! must add this padding to the width of figurefloated left */
	padding-right: 0px;     /* the padding is the space from the picture to the border around the picture*/
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.caption {
	font-size: 0.75em; /* for an 14 pt font, 14/16 = 0.875, for a 12pt font, 0.75 */
	color: #444444; /* try 444444 or 666666 */
	text-align: left;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.captionfull {
	font-size: 1em; /* for an 14 pt font, 14/16 = 0.875, for a 12pt font, 0.75 */
	color: #444444; /* try 444444 or 666666 */
	text-align: left;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

body#fullsize {
	background-color: #fffbf0;
}


img.fullsize {
	float: left;
	color: #000;
	text-align: center;
	background-color: #eee; /* color inside the picture */
	border: 1px solid #666;
	margin: 10px 40px 10px 10px; /* Top Left Bottom Right */
	padding: 15px;
}

h1.fullsize {
	font-size: 1.5em;	/* for a 20 pt font, 20/16 = 1.25; for a 24 pt font, use 1.5 */
	padding-left:10px;
	color: #333333;
	vertical-align: top;
	text-align: left;
}

/*consider renaming to contentheader_h1, h2, h3 to differentiate from headers in the 
  banners of main, second level pages as well as the footer*/
.subHeader {
	font-weight: bold;
	color: #4682b4;
	/*	line-height:16px;*/
	letter-spacing:.2em;
	font-size: 1em;
}

.subheader_h1 {
	font-weight: bold;
	color: #4682b4;
	letter-spacing:.2em;
	font-size: 1.2em;
	text-transform:uppercase;
}

.subheader_h2 {
	font-weight: bold;
	color: #4682b4;
	letter-spacing:.2em;
	font-size: 1em;
	text-transform:uppercase;
}

.subheader_h3 {
	font-weight: bold;
	color: #4682b4;
	letter-spacing:.2em;
	font-size: .8em;
	text-transform:uppercase;
}

.photo_header_h1
 {
 	padding-left:1em;
	font-weight: bold;
	color: #4682b4;
	letter-spacing:.2em;
	font-size: 1.2em;
	text-transform:uppercase;
}

/* 
any paragraph that is in a tag having class "quip", gets this treatment
*/
p.quipauthor {
	color: #666666;
	font-style: italic;
	font-size: 80%; /* inherited or subset Size will be 80% of whatever the font size was coming in*/
	margin-top: 10px;
	margin-right: 10px;
	/*margin-bottom: 10px;*/
	margin-left: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
}

p.monospaced {
font-family: Courier New, Courier,Andale Mono;
}

p.smallnote {
	font-size: 80%;
}


br.clear {
	clear: both;
}

a:link {
	color:#e77329;
	font-weight:normal;  /* was bold*/
	text-decoration:none;  /*could be none if want underline on hover, say*/
}

a:visited {
	color:#996633;
	font-weight:normal;
	text-decoration:none;
}

a:active {
	color:#002377;
	font-weight:normal;
	text-decoration:none;
}

a:hover {
	color:#0073bd;
	font-weight:normal;
	text-decoration:underline;
}

.box1 {
	width : 200px; /* mb was 115px*/
	padding-left : 0px; /* mb added*/
	padding-right : 0px; /* mb was 20px*/
	float : left;
}

.box2 {
	width : 200px;  /* mb was 115px*/
	padding-left : 0px; /* mb added*/
	padding-right : 0px; /* mb was 20px*//*float : right;*/
}

.box3 {
	width : 200px;  /* mb was 115px*/
	padding-left : 0px; /* mb added*/
	padding-right : 0px; /* mb was 20px*//*float : right;*/
}

.clear {
	clear : both;
}

/* used in newsletters.shtml */
.internal_column {
	width : 150px; /*width : 210px;*/
	float : left; /* mb was float : left;*/
	/* mb was margin : 10px 7px;*/
	margin-top: 0em;
	margin-left: 1em;
	margin-right: 0em;
	margin-bottom: 0em;
	text-align : justify; /* mb was justify*/
}

/* used in thankyou page. need a custom class */

/* used in newsletters.shtml */
#thankyou_container {
	width : 60em;/* mb added*/
/*	height: 30em;*/
}

.thankyou_column {
	width: 20em;
	float: left;
	margin-top: 0em;
	margin-left: 0em;
	margin-right: 0em;
	margin-bottom: 0em;
	text-align : left; /* mb was justify*/
}

ul.thankyoulist {
  	width: 20em;
	font-size:0.8em;
	list-style-image: url(images_global/arrow3.png);
	display: block;
}

ul.thankyoulist li {
	float: left;
	width: 20em;
	color:#000000;
}

/* stop the float */
  br {
	clear: left;
}

div#header_newsletter blockquote {
	font-style: italic;
	font-size: .8em;
	background-color: #EEEEEE; /* override the header's bg color so the blockquote box has a different bg shading */
	text-align: left;
	text-indent: 1em;
	max-width: 60em;
	margin-right: auto;
	margin-left: 8em;
	padding: 1em 1em;
	border: solid 1px #060606;
}

div#header_secondlevel_page blockquote {
	font-style: italic;
	font-size: .8em;
	background-color: #EEEEEE; /* override the header's bg color so the blockquote box has a different bg shading */
	text-align: left;
	text-indent: 1em;
	max-width: 60em;
	margin-right: auto;
	margin-left: 8em;
	padding: 1em 1em;
	border: solid 1px #060606;
}


div#content blockquote {
	font-style: italic;
	background-color: #EEEEEE; /* override the header's bg color so the blockquote box has a different bg shading */
	text-align: left;
	max-width: 600px;
	margin-right: auto;
	margin-left: 20px;
	padding: 12px 20px;
	border: solid 1px #060606;
}