/* COLORS */
/* #1C5189 Medium Blue - RGB = 28, 81,137
/* #0F8EBF Light Bright Blue */
/* #F6922C Gold */
/* #FFCD84 Light Gold - RGB = 255, 205, 132*/
/* #EC0515 Red */
/* #A6A6A6 Grey - RGB = 166, 166, 166 */
/* #666666 Dark Grey */


/* GLOBAL STYLES */

* { font-family: verdana, helvetica, sans-serif; margin: 0; padding: 0;}

body { font-size:12px; color: #444; background: #DDDDDD; margin: 0; padding: 0;}

img { border: 0; margin: 0; padding: 0; }

a { color:#1C5189; text-decoration:underline; }

a:hover, a:focus, a:active { color:#0F8EBF; text-decoration:underline; }

table { margin: 0; padding: 0; position: relative; }

td { margin: 0; padding: 0; vertical-align: top; }


/* MAIN LAYOUT */

/* The z-index values below are necessary to make menu render correctly on IE 7 or before */

/* "wrapper"'s background image makes the menu bar look like it runs the length of the page, so it doesn't stop unnaturally on long pages */
div#wrapper { position: relative; margin: 0px auto; padding: 0; margin-top: 10px; width: 800px; background: #fff url(/images/main_bg.jpg) top left repeat-y; z-index: 0; }

#banner { display: block; border: 1px solid #1c5189; border-bottom: 0; }

/* "main" is the super-box for the site's content; 800px - 667px = 133px, the width of the menu (see next section of CSS) */
div#main { width: 667px; float: right; z-index: 1; margin: 0; }

/* "content" is the sub-box for the site's content; its border is the one-pixel blue line that forms the right edge of the site's active area */
div#content { position: relative; width: 646px; float: left; border-right: 1px solid #1c5189; background: #fff; padding-left: 20px; z-index: 2; margin: 0; }


/* MAIN CONTENT STYLES */

#content div.item { border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-bottom: 15px; }

#content div.item h1 { font-size: 120%; color: #999; text-transform: none; margin-bottom: 0 }

#content p { line-height:140%; margin-bottom: 12px; padding-right: 5px;}

#content div.item .date { font-style:italic; font-size:90%; margin:0; padding:0; }

#content div.item .headline { font-weight:bold; margin:0; padding:0; }

#content ul { list-style-type: disc; list-style-position: outside; padding: 0px; margin: 0px; padding-left: 5px; }

#content li { margin-left: 20px; }

#content div.left10 { margin-left: 10px; }

#sharelink div, #sharelink a { position: absolute; top: 3px; right: 185px; border: 1px dotted #1c5189; padding: 1px; text-decoration: none; font-size: 11px; }

#skip-to-content a { color: #A6A6A6; font-size: 90%; }   /* this formats the accessibility link above the header */


/* MENU */

#nav { width: 133px; float: left; margin: 0px; padding: 0px; font-variant: small-caps; font-size: 14px; position: relative; z-index: 3; display: block;}

#nav ul { list-style-type: none; margin: 0px; padding: 0px; } /* top-level list */

#nav ul li { float: left; position: relative; width: 133px; } /* top-level list elements */

#nav ul li ul {display: none;} /* second-level lists (submenus) are initially hidden */

#nav ul li:hover a, #nav ul li:focus a, #nav ul li:active a, #nav ul li:hover ul li:hover a { background: #0F8EBF; text-decoration: none; color: #fff; } /* changes background color of menu items on hover */ 

#nav ul li:hover ul { display: block; position: absolute; top: 0; left:133px; width:133px; } /* second-level list (submenu) appears on hover; position is even with the top of its parent menu item */

#nav ul li ul li { border-left: 1px solid #fff; } /* puts a one-pixel white space between parent menu and submenu; aesthetic only */

#nav ul li a, #nav ul li:hover ul li a { display: block; border-bottom: 1px solid #fff; color: #fff; text-decoration: none; line-height: 13px; width: 113px; padding: 5px 10px; background: #1c5189; } /* default appearance for all links, parent menu or submenu */


/* SIDEBAR */

div#sidebar { width: 175px; float: right; background: #fff; margin-left: 10px; padding: 10px 0 0 6px; border-left: 1px solid #A6A6A6; }

#sidebar li { margin-left: 10px; margin-bottom: 5px; }

#sidebar h3, h3 a { font-variant: small-caps; font-weight:bold; font-size: 12px; padding: 5px 0px;}

#sidebar div.grayline { background: #A6A6A6; font-size: 1px; height: 1px; margin: 0 10px 0 5px; }

/* rounded corner divs */
#sidebar_endcap_1 { position: static; height: 2px; width: 180px; float: right; clear: right; display: inline; margin:0; padding: 0;  font-size: 1px; border-left: 1px solid #A6A6A6; }
#sidebar_endcap_2 { position: static; height: 1px; width: 179px; float: right; clear: right; display: inline; margin:0; padding: 0;  font-size: 1px; border-left: 1px solid #A6A6A6; }
#sidebar_endcap_3 { position: static; height: 1px; width: 177px; float: right; clear: right; display: inline; margin:0; padding: 0;  font-size: 1px; border-left: 2px solid #A6A6A6; }
#sidebar_endcap_4 { position: static; height: 1px; width: 176px; float: right; clear: right; display: inline; margin:0; padding: 0;  font-size: 1px; border-left: 1px solid #A6A6A6; background: #A6A6A6; }


/* FEATUREBOX - featured items box that changes on mouse hover; default style works best with three items, but can include more if you don't mind the list extending down below the image */

div#featurebox {padding: 4px 4px; margin: 0; width: 442px; background: #E6E6E6; border: 1px solid #B6B6B6; position: relative; overflow: auto;}
 /* "overflow: auto" establishes a new block formatting context, which means the floated divs INSIDE the featurebox don't have to worry about conflicts with other floated divs on the page, esp. sidebar */

div#itemparent {padding: 0; margin: 0; float: left; width: 250px;}  /* just a "wrapper" div for all of the individual items; allows the element sibling programming to work correctly */

#featurebox ul {list-style-type: none; z-index: 10; width: 184px; padding: 0; margin: 0; float: right;} /* The list is generated first but appears "second" (to the right of the images) */

#featurebox ul li {list-style: none; margin: 0; padding: 13px 0 0 0;}

#featurebox ul li:first-child { padding: 0;} /* Each list item has top padding, but we don't want that over the first item. */
#featurebox ul li.first { padding-top: 0; }  /* This is for IE 6, which doesn't support the first-child pseudo-class.  Remove once IE 6 goes extinct. */

#featurebox ul li a {color: #1C5189; text-decoration: underline; font-weight: bold;} 

#featurebox ul li a:hover, #featurebox ul li a:focus, #featurebox ul li a:active {text-decoration: underline; color: #0F8EBF;}

#featurebox img {border: 1px solid #B6B6B6; margin: 0; padding: 0; width: 250px; height: 167px; }

#featurebox .caption a { text-decoration: none; color: #000;}


/* TEXT STYLES */

h1 { font-size:175%; font-family: "Trebuchet MS", helvetica, sans-serif; line-height:130%; font-variant: small-caps; letter-spacing:1px; border-bottom:1px solid #444; color: #000; margin:20px 0 5px 0; }

h2 { font-size:150%; font-family: "Trebuchet MS", helvetica, sans-serif; font-weight:bold; font-variant: small-caps; margin:20px 0 5px 0; border-bottom: 1px solid #444; width: 452px; }

h2 a { font-family: "Trebuchet MS", helvetica, sans-serif; font-variant: small-caps;text-decoration: none;}
a h2 { font-family: "Trebuchet MS", helvetica, sans-serif; font-variant: small-caps; text-decoration: none;}

h3 { }

.morelink { font-style: italic; font-weight: bold; font-size: 90%; }

.allblack, .allblack a, .allblack h4 {color: #444; text-decoration: none; }


/* FOOTER */

#footer { position: relative; height: 20px; background: #DDDDDD; font-size:90%; text-align: center; padding: 5px 0 0 0; width: 800px; border: 0px; border-top: 1px solid #1c5189; clear: both; }

#photocredit {font-size: 9px; padding-top: 3px;}


/* FORMS */

.input { border:1px solid #CCCCCC; width:100px; margin-right:5px; height:14px; padding:3px; font-size:90%; }

.submit { border:1px solid #1C5189; background:#0F8EBF; color: #FFFFFF; font-weight:bold; letter-spacing:1px; padding:3px; font-size:90%; text-transform:uppercase; }


@media print {
  * { font-family:"Times New Roman",Georgia,Serif; }
  body:before {content:"PRINTER-FRIENDLY VERSION"; display: block; text-align: center; }
  #banner, #nav, #sidebar, #sidebar_endcap_1, #sidebar_endcap_2, #sidebar_endcap_3, #sidebar_endcap_4, #footer, #relatedlist, #sharelink, #skip-to-content {display: none; }
  div#main, div#wrapper { width: 100%; border: 0; background: #fff; color: #000; }
  #featurebox { width: 90%; }
  div#content { width: 100%; border: 0; padding: 0; margin: 0; background: #fff; color: #000; font-family:"Times New Roman",Georgia,Serif; }
  #content h1, h2, h3, h4, h5, h6, p, a, b, i, center, h4 a, a h4 { font-family:"Times New Roman",Georgia,Serif; }
  div#content, #content p, b, a, i, center { font-size: 14px; color: #000;  }
}