/*----------------------------- STYLESHEET.CSS -----------------------------*/
/* Recent Changes */
/* 09/29/2011 - Robbie - Lots of font-size changes, new piclist styles, code cleanup. */
/* 10/24/2011 - Robbie - Updated thumbshow and piclist to play nice next to each other */
/* 12/07/2011 - Robbie - Added styles for like-h1, and textarea IE no scrollbars */
/* 12/09/2011 - Robbie - Added buttonrow note_s styling, adjusted top margin on sbadjust first-child. */
/* 12/16/2011 - Robbie - Added drilldown option extras styles.  Also added system messages tight style. Condensed a bunch of styles. */
/* 01/03/2012 - Robbie - Tweaked orange color on new nav */
/* 01/04/2012 - Robbie - Added col3 and blocklink styles and floatright helper class. */
/* 01/10/2012 - Robbie - Refined Expandable section styles to support h1 - h4 inside the section's content. */
/* 01/11/2012 - Robbie - Tweaked thumbshow to fix a double dotline problem.  Tweaked imagerow to fix a lack of float containment problem. */
/* 01/12/2012 - Robbie - Added the "tight" class to tablestyle1 and tablestyle2 to set the line-height to 1.78em, like normal <p>'s */
/* 01/17/2012 - Robbie - Mega cleanup. Condensed lots of white space. Removed redundant styles. Improved comments. Reorganized placement of style blocks. */
/* 01/20/2012 - Robbie - Lots of tweaks to the new nav and header bar */
/* 01/28/2012 - Robbie - Modified SM Share Button styles, increased firstelement margin a bit. */

/*----------------------------- CSS Reset/Basic Styles -----------------------------*/
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

thead, tbody { margin: 0; padding: 0; border: 0; text-align: left; }

body { margin: 0; background: #d5d3ca url('/images/backgrounds/window_bg_dktan1.jpg') top center;
	   font-size: 9px; line-height: 1.78em; font-family: Verdana, Geneva, sans-serif; color: #695c49; } /* default font style */

table {	line-height: 1.78em; font-size: 9px; /*Old table-based layouts get their font size from this. */ }

form { margin: 0; padding: 0; }
input, select, textarea { font-size: 100%; font-family: Verdana, Geneva, sans-serif; color: #695c49; }
textarea { overflow: auto; }/* hides ie scrollbars when not needed. */

img { border: 0; -ms-interpolation-mode: bicubic; /*Better-looking image scaling for IE7*/ }

a { text-decoration: none; outline: none; color: #695c49; }
a:hover, a:focus { text-decoration:underline; }

pre  { font-size: 10px; font-family: Courier, monospace; }

/*-----------------------------------------------Old Headline Styles----------------------------------------------*/
/*--These headline styles are still in use in old, table-based layouts.--*/

h1, h2, h3, h4 { font-weight: bold;	text-decoration: none; }
h1 { font-size: 12px; margin: 22px 0 5px; }
h2 { font-size: 12px; }
h3 { font-size: 12px; line-height: 12px; margin: 0 0 3px; padding: 0; }
h4 { font-size: 9px; margin: 9px 0; }

/*---------------------------------------Basic Styles for CSS Layouts----------------------------------------*/
/*--These styles redefines the styling of basic tags.  They only work when the class of .layout1 or .popup is 
assigned to the body tag so they don't affect older table-based designs.--*/

.layout1 p, .popup p { margin: 9px 0;	}

/* LI's inside of P's are invalid, so div.like-p does the trick. */
div.like-p { font-size: 9px; line-height: 1.78em; margin: 9px 0; }

/* Adds top margin to an element to give it top margin like an h1. */
.content .firstelement { margin-top: 27px; }

.layout1 h1, .popup h1 { font-size: 12px; margin: 22px 0 5px 0;	}
.layout1 h2, .popup h2 { font-size: 11px; margin: 20px 0 5px 0;	}
.layout1 h3, .popup h3 { font-size: 10px; margin: 18px 0 5px 0;	}
.layout1 h4, .popup h4 { font-size: 9px; margin: 9px 0; }
 p.footnote, p.footnote a, .footnote p { font-style: italic; color: #8d8373; }

/*----------------------------- Larger Text 1 (Beta) -----------------------------*/
/* Add the class of largertext1 to the body tag of the page for slightly larger text. It may not work right with all elements yet.*/
body.largertext1 { font-size: 10px; }
.largertext1 p, .largertext1 div.like-p { font-size: 10px; line-height: 18px; margin: 9px 0; }
.largertext1 h1, .largertext1 h2, .largertext1 h3, .largertext1 h4, .largertext1 .like-h1 { font-weight: bold; line-height: 1.2em; }
.largertext1 h1, .largertext1 .like-h1 { font-size: 16px; }
.largertext1 h2 { font-size: 14px; }
.largertext1 h3 { font-size: 12px; }
.largertext1 h4 { font-size: 11px; }
.largertext1 .subnav { font-size: 10px; }
.largertext1 table { font-size: 10px; }
.largertext1 h1, .largertext1 h2, .largertext1 h3, .largertext1 h4, .largertext1 .like-h1 { font-family: Helvetica, Arial, sans-serif; letter-spacing: 0.2px; }
.largertext1 .piclist h1, .largertext1 .piclist h2 { font-size: 14px; }
.largertext1 .piclist h3, .largertext1 .piclist h4 { font-size: 12px; }
.largertext1 .thumbshow-details .details-title { font-size: 12px; }
.largertext1 .es-control-note { font-size: 10px; }
.largertext1 .formstyle1 h1 input[type="text"] { margin: 0 2px; font-size: 14px; }
.largertext1 .formstyle1 h1 select { margin: 3px; font-size: 13px; vertical-align: top; position: relative; top: -2px; }

/* Big Quote - Great for pulling a short quote out of the text and displaying it big in the main column.*/
p.bigquote { text-align: center; font-weight: bold;	font-size: 14px; font-style: italic; color: #a69d90; line-height: 22px; padding: 0;	margin: 14px 20px; }

/*-----------------------------------------Main Graphic Stuff-----------------------------------------*/
.mainlg { height: 370px; }
.mainlg .mg-edge { position: absolute; z-index: 500; width: 422px; height: 345px; top: 19px; left: 18px;	
	background-repeat: no-repeat; background-position: 0 0;	}
.mainlg .mg-edge.grit1 { background-image: url('/images/mainlg2/elements/mainlg_edge_grit1.png');	}
.mainlg .mg-edge.grit2 { background-image: url('/images/mainlg2/elements/mainlg_edge_grit2.png');	}
.mainlg .mg-image {	position: absolute;	top: 19px; left: 18px; }

.mainlg .mg-logo, .mainsg .mg-logo { position: absolute; z-index: 1000; }
.mainlg .mg-title, .mainsg .mg-title {	position: absolute;	z-index: 1500; }

.mainsg { height: 182px; }
.mainsg .mg-image { position: absolute; top: 17px; left: 18px; }
.mainsg .mg-edge { position: absolute; z-index: 500; width: 422px; height: 164px; top: 17px; left: 18px;	
	background-repeat: no-repeat; background-position: 0 0;	}
.mainsg .mg-edge.grit1 { background-image: url('/images/mainsg2/elements/mainsg_edge_grit1.png');	}
.mainsg .mg-edge.grit2 { background-image: url('/images/mainsg2/elements/mainsg_edge_grit2.png');	}

/*------------------------Fader-----------------------*/
/* the div containing the rotator div must be postiton:relative.  #maingraphic is. */
div#rotator { position:absolute; z-index: 0; left: 0px;	top: 0px; }
#rotator ul { margin: 0; padding: 0; }
div#rotator ul li { float:left;	position:absolute; list-style: none; }
div#rotator ul li img { border: none; padding: 0px; }
div#rotator ul li.show { z-index:500; } /*brings that li to the top of the stack, moved by the JS.*/

/* MainLG Fader */
#rotator.fader_mainlg {	width: 422px; height: 345px; top: 19px;	left: 18px; }

/* Full Screen Fader */
#rotator.fader_full { width: 100%; height: 100%; top: 0px; left: 0px; }
.fader_full li { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; }

/*-----------------------------------------Home Ad-----------------------------------------*/

#homead { width: 288px;	height: 345px; overflow: hidden; margin: 19px 0 0 9px; }
.homead_link_small { display: block; float: left; }
.homead_link_large { display: block; float: right; margin-bottom: 1px; }

/*-----------------------------------------------Subnav Stuff--------------------------------------------*/

/* Used in old subnav only. */
a.subnav_brown { font-size: 9px; font-weight: bold; } 

/* Used in old and new subnav. */
.subnav { font-size: 9px; font-weight: bold; line-height: 1.78em; } /* Applied to the div or td that contains the text links. */

/* Used in the new subnav only. */
#subnav_container { width: 314px; height: 185px; } /* The outermost div of the subnav.*/
.subnavreg { font-weight: normal; } /* Make text links regular weight.  Used in two-tiered subnav (Forge section) */
#subnav_area { background: url(images/subnav/background.gif); background-repeat: no-repeat; padding: 9px 43px 8px 42px; } 
/* The div under the title graphic that contains all the text links. */


/*----------------------------------------------Header Stuff---------------------------------------------*/
.header-dots {	border-bottom: 2px dotted #D5D3CA; margin-bottom: 7px; padding-bottom: 4px; }
h1.header-dots a { text-decoration: none; }

.header-note { font-weight: normal;	margin-left: 2px; }

.datedheader { height: 16px; }
div.datedheader { margin-top: 22px;	}
.datedheader-head {	font-size: 12px; font-weight: bold;	float: left; }
.datedheader-date {	font-size: 10px; float: right;	margin: 2px 0px 0px 0px; }

h1 span.bullet, h2 span.bullet { margin-right: 6px;	border: 0; }

h1.bigger-h1 { font-size: 14px;	line-height: 20px; }

/*----------------------------- Social Media Buttons -----------------------------*/
/* Tall Share buttons (show count above buttons) */
.share-buttons.tall {
	float:left;	position: relative; width: 191px; height: 80px; margin: 8px 12px 0 0;
	background: #e3e2db url('images/backgrounds/share-button-tall-bg.png') center left;	
	-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}

.share-buttons.tall.floatright { float: right; margin: 8px 0 0 12px; }
.share-button {	position: absolute; top: 10px; }
.share-fb-tall { left: 10px; } /* facebook */
.share-fb-tall iframe { width:56px; height:66px; }
.share-tw-tall { left: 66px; } /* twitter */
.share-g1-tall { top: 11px; left: 130px; } /* Google + */
.beside-share-tall { float:left; margin: 8px 12px 0 0; } /* buttons or sprites that should be next to the tall share-buttons div. */

.sbadjust .share-buttons.tall { background: none; float:none; margin: 6px 0 0 0; border-top: 2px dotted #bab5aa; border-bottom: 2px dotted #bab5aa; width: 191px; 
							    -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px;}

/*-----------------------------------------2 Columns-----------------------------------------*/
/* Breaks the content div (or other div) up into two columns, each about 48% wide with a small 
gutter in between. If you want different widths than 48%, you could adjust col1 and col2 with inline styles. */

/* Column Setup */
.twocol { overflow: hidden;	}
.twocol .col1 {	width: 48%;	float: left; }
.twocol .col2 {	width: 48%;	float: right; }
#content .twocol .col1, #content .twocol .col2 { width: 198px; } /* If it's in the 409 */

.header-dots + .twocol { margin-top: -6px; }

.twocol h1, .twocol h2, .twocol h3, twocol h4 { margin: 15px 0 9px; }
.twocol img { margin: 5px 0; }

/*----------------------------- 3 Columns -----------------------------*/
/* Breaks the fullwidth content area (686px) into 3 columns with vertical dotlines separating them. */

.fullwidth .col3 { width: 214px; float: left; margin-left: 10px; padding-left: 10px; border-left: 2px dotted #d5d3ca; }
.fullwidth .col3:first-child, .fullwidth p + .col3, .fullwidth h1 + .col3, .fullwidth h2 + .col3 { margin-left: 0; padding-left: 0; border: none;} /* First column */


/*-----------------------------------------Inline images----------------------------------------*/
.inline-right {	float: right; margin: 5px 0px 5px 9px; }
.inline-left { float: left;	margin: 5px 10px 5px 0px; }
.img400, .img409 { margin: 10px 0px; } /* put one of these on an image that should take up the whole 409 width. */


/*---------------------------------------------Sprite Rollovers--------------------------------------------*/
/* Use sprite_v if the images are stacked on top of each other, sprite_h if they are side-by-side.  You can
apply the sprite_v or sprite_h class to the a tag itself or a div inside an a tag if you want the link to include
other elements in addition to the sprite image. These classes just shift the background position.  Set the url
and dimensions with inline styles since these change on a case by case basis.*/

.sprite_v {	display:block; background-position:top left; }	
.sprite_v:hover, .sprite_v:active {	background-position:bottom left; }
a:hover .sprite_v, a:active .sprite_v {	background-position:bottom left; }

.sprite_h {	display:block; background-position:top left; }	
.sprite_h:hover, .sprite_h:active {	background-position:top right; }
a:hover .sprite_h, a:active .sprite_h {	background-position:top right; }

/* x17sprite - 17px X button */
.x17sprite { display: block; width: 17px; height: 17px; margin: 1px; text-indent: -9999px; /* hide the text */
	background-image: url('/images/sprites/x17sprite.png');	background-repeat: no-repeat;	background-position: top left;			
}

.x17sprite:hover { background-position: top right; }

/*---------------------------------Button Bonanza---------------------------------------*/

/*--------Initial Styles (same for all button sizes and colors)--------*/

/* the button */ a.button_s, a.button_l { display: block; float: left; white-space: nowrap; cursor: pointer;
										  background-repeat: no-repeat; background-position: right 0px;	
										  color: #7b705e; font-family: Arial, sans-serif; font-weight: bold; text-transform: uppercase; text-decoration: none; }
/* the end piece */ a.button_s span, a.button_l span { display: block; float: left; background-repeat: no-repeat; background-position: left 0px; }
/* hover & active states */ a.button_s:hover, a.button_s:active, a.button_l:hover, a.button_l:active { color:#706655; text-decoration: none; }
/* floatright */ a.button_s.floatright, a.button_l.floatright  { float: right; margin-right: 0; margin-left: 18px; }
/* nomargin */ a.button_s.nomargin, a.button_l.nomargin { margin-right: 0; }

/*---------Small Button---------*/
a.button_s { height: 10px; padding: 8px 20px 11px 14px; margin: 0 12px 0 6px; /* 6px left margin makes room for the end graphic */
			 font-size: 10px; line-height: 10px;	text-indent: -2px;
			 background-image: url('/images/button_bg/button_s_tan.png'); } /* default to tan */

/*left edge graphic*/
a.button_s span { height: 29px; width: 6px; margin: -8px 0 -11px -20px; background-image: url('/images/button_bg/button_s_end_tan.png'); } 

/* hover state */ 
a.button_s:hover { background-position: right -35px; }
a.button_s:hover span { background-position: left -35px; }				

/* active (pressed) state */ 
a.button_s:active { background-position: right -70px; padding: 10px 18px 9px 16px; }
a.button_s:active span { background-position: left -70px; margin: -10px 0 -9px -22px; }

/* Colors */
a.button_s.yellow {	background-image: url('/images/button_bg/button_s_yellow.png'); }
a.button_s.yellow span { background-image: url('/images/button_bg/button_s_end_yellow.png'); }
a.button_s.blue { color: #706655; background-image: url('/images/button_bg/button_s_blue.png'); }
a.button_s.blue span { background-image: url('/images/button_bg/button_s_end_blue.png'); }
a.button_s.green { color: #706655; background-image: url('/images/button_bg/button_s_green.png'); }
a.button_s.green span {	background-image: url('/images/button_bg/button_s_end_green.png'); }
a.button_s.orange { color: #706655; background-image: url('/images/button_bg/button_s_orange.png'); }
a.button_s.orange span { background-image: url('/images/button_bg/button_s_end_orange.png'); }

/* Disabled */
a.button_s.disabled, a.button_s.disabled:hover, a.button_s.disabled:active { /* button */
	padding: 11px 18px 8px 16px; background-position: right -70px; color: #f2f1ed; cursor: default; }
a.button_s.disabled span, a.button_s.disabled:hover span, a.button_s.disabled:active span { /* end piece */
	background-position: left -70px; margin: -11px 0 -8px -22px; cursor: default; }

/*---------Large Button-------*/
a.button_l {
	height: 18px; padding: 10px 20px 13px 13px;	margin: 0 12px 0 7px; /* 7px on the left makes room for the end graphic */
	font-size: 18px; line-height: 18px;	text-indent: -3px;
	background-image: url(/images/button_bg/button_l_tan.png); /* Defaults to tan if no color class is specified */
}

/* Adds the right edge graphic */
a.button_l span { height: 41px;	width: 7px;	margin: -10px 0 -13px -20px; background-image: url(/images/button_bg/button_l_end_tan.png); }

/* Hover state */
a.button_l:hover { background-position: right -46px; }
a.button_l:hover span { background-position: left -46px; }				

/* Pressed (active) state */
a.button_l:active {	background-position: right -92px; padding: 13px 18px 10px 15px; }
a.button_l:active span { background-position: left -92px; margin: -13px 0px -10px -22px; }

/*Colors*/
a.button_l.blue { background-image: url('/images/button_bg/button_l_blue.png'); }
a.button_l.blue span { background-image: url('/images/button_bg/button_l_end_blue.png'); }
a.button_l.orange {	background-image: url('/images/button_bg/button_l_orange.png'); }
a.button_l.orange span { background-image: url('/images/button_bg/button_l_end_orange.png'); }
a.button_l.yellow {	background-image: url('/images/button_bg/button_l_yellow.png'); }
a.button_l.yellow span { background-image: url('/images/button_bg/button_l_end_yellow.png'); }
a.button_l.green { background-image: url('/images/button_bg/button_l_green.png'); }
a.button_l.green span {	background-image: url('/images/button_bg/button_l_end_green.png'); }

/* Disabled */
a.button_l.disabled, a.button_l.disabled:hover, a.button_l.disabled:active {
	background-position: right -92px; padding: 14px 17px 9px 15px; color: #f2f1ed; font-weight: normal;	cursor: default; }
a.button_l.disabled span, a.button_l.disabled:hover span, a.button_l.disabled:active span {
	background-position: left -92px; margin: -14px 0px -9px -22px; cursor: default; }

/* Button L Note */
.button_l_note { 
	float: left; margin-right: 10px; line-height: 42px; color: #A69D90;
    font-size: 16px; font-style: italic; font-weight: bold; }

/* Button Row */
.buttonrow { clear: both; margin: 10px 0; overflow: hidden; }
.buttonrow.dotlines_h { border-bottom: 2px dotted #D5D3CA; border-top: 2px dotted #D5D3CA; padding: 10px 0; }
.buttonrow .note_s { line-height: 28px; }

/* Like Button_s - add to an image input to make it like an button_s link in some ways */
.like-button_s { float: left; margin-right: 10px; }


/*----------------------------- Expandable Sections -----------------------------*/
.expandable-section { padding-top: 1px; }
#content .expandable-section:first-child { margin-top: 5px; } /* Extra top margin when ES is first element in content div. */
.expandable-section .es-control { margin: 0; }
/*.expandable-section h1, .expandable-section h2, .expandable-section h3, .expandable-section h4 { margin: 0;	} - commented out 01/10/2012 */

.expandable-section .es-control { margin: 8px 0 0 0; padding: 7px 5px 7px 0; line-height: 1.2em; border-bottom: 2px dotted #d5d3ca;
	position: relative; } /* Contains absolutely positioned elements. */

.es-icon { 
	width: 10px; height: 10px; 	
	position: absolute;	left: 4px; top: 10px;
	background-image: url('/images/bullets/arrow10px-sprite.png'); background-repeat: no-repeat; background-position: top left;	
	display: none;} /* hide from users with no JS. */

h3 .es-icon, h4 .es-icon { top: 9px; } /* Adjust arrow placement for smaller headings */
.es-control-note { font-size: 9px; font-weight: normal; display: none; float: right; line-height: 1em; position: relative; bottom: -3px; }
h3 .es-control-note, h4 .es-control-note { bottom: -1px; } /* Adjust note placement for smaller headings */
.es-content > .expandable-section { margin-left: 16px; } /* Indent nested expandable sections. */

/* Do this stuff when the class of expanded or collapsed is added by JS. */
.expanded > .es-control, .collapsed > .es-control { padding: 7px 5px 7px 17px; cursor: pointer; } /* Make room for the arrow, use hand cursor */
.expanded > .es-control .es-icon, .collapsed > .es-control .es-icon { display: block; } /* Show the arrow */
.expanded > .es-control .es-icon { background-position: bottom left; } /* Twirl the arrow */
.expanded > .es-control:hover, .collapsed > .es-control:hover { background-color: #e3e2db; } /* Hover color on control when JS is working */
.expanded > .es-control .es-control-note.expanded { display: block; } /* Show the expanded control note when the section is expanded. */
.collapsed > .es-control .es-control-note.collapsed { display: block; } /* Show the collapsed state control note when the section is collapsed */
.collapsed > .es-control .es-control-note.expanded { display:none; } /* Hide the expanded state control note when the section is collapsed. */
.collapsed > .es-content { display: none; } /* Hide the content div when the section is collapsed. */

/*---------------------------------------------Top Feature--------------------------------------------*/
.topfeature { width: 313px; height: 185px; padding:0; margin: 0 1px 0 0; }
/* 1px right margin shows the dotline from #container.  Don't build it into the graphic. */

.topfeature.green { background: url('/images/topfeature/backgrounds/topfeature_bg_green.jpg') no-repeat top left;	}

/*----------------------------- TF Login Widget -----------------------------*/
/*Used for Summer Jobs Account login, and more to come.*/

.tflogin .tfcontent { padding: 10px 32px 14px 24px; font-size: 10px; }
.tflogin .tfcontent label {	line-height: 1.4em; text-transform: uppercase; color: #506635; padding: 9px 0; float: left; }
.tflogin .tf_buttonrow { margin-top: 4px; }
.tflogin .tf_forgotlink { font-weight: bold; line-height: 1.78em; color: #5a733c; float: left; margin-top: 15px; }
.tflogin .tftextinput {	margin: 4px 0; padding: 5px; width: 166px;	color: #695c49;	line-height: 1em; float: right; background: #f2f1ed; }
.tflogin .tftextinput.green { border: 1px solid #789a4f; }
.tflogin .tf_message { height:33px; }
.tflogin .tf_message p { color: #5a733c; font-weight: bold; text-align: center; }

/* Old Green News Top Feature */
.news_white { font-size: 11px; color: #fff; }

/*----------------------------- Main Column Feature -----------------------------*/
/* The main column feature is the three ads that appear under the intro paragraph on the home page but may be used elsewere also. */

.main_column_feature { overflow: hidden; }
.mcf_item {	width: 130px; height: 70px;	float: left; margin: 0 8px 0 0;}
.mcf3 {	margin-right: 0; }

/* Sprite Setup */
.mcf_safety, .mcf_scholarships { display: block; width: 130px; height: 70px; background-image: url('images/mcf/mcf_safety-scholarships_sprite3.png'); background-repeat: no-repeat; }
.mcf_safety { background-position: top left; }
.mcf_safety:hover {	background-position: bottom left; }
.mcf_scholarships {	background-position: top right; }
.mcf_scholarships:hover { background-position: bottom right; }

/* MCF Connect (social media icons) */
.mcf_connect { background: url(images/mcf/mcf_connect_bg.png) no-repeat top left; }
.mcf_sm_icon_32 { width: 32px; height: 32px; float: left; margin: 30px 7px 0 0;	background-image: url('images/mcf/mcf_sm-icons_sprite3.png'); background-repeat: no-repeat; }

.mcf_facebook_icon { margin-left: 10px;	background-position: 0px 0px; }
.mcf_facebook_icon:hover { background-position: -34px 0px; }
.mcf_twitter_icon { background-position: 0px -34px; }
.mcf_twitter_icon:hover { background-position: -34px -34px; }
.mcf_youtube_icon {	background-position: 0px -68px; }
.mcf_youtube_icon:hover { background-position: -34px -68px; }

/*----------------------------- Reg Login Small -----------------------------*/
.reg_login_small label { display: block; }
.reg_login_small input.text { width: 96%; }
.reg_login_small .row input.image { vertical-align: middle;	margin-right: 4px; }
.reg_login_small .row {	margin-top: 6px; }

/*---------------------------------------------Sidebar stuff--------------------------------------------*/

/* Sidebar Pic 1 - original, with thicker border. Image must be 193px by 126px. */
.sbpic { background: url('images/sidebar_details/sb_picbg.gif'); margin: 32px; padding: 24px 28px 22px 27px; }

/* Sidebar Pic 2 - Newer with thinner border. Image must be 228px wide, any height. */
.sbpic2 { background: url('images/sidebar_details/sbpic2_bg.gif'); margin: 32px 37px 32px 36px;	padding: 2px; }
.sbpic2 img { border: 4px solid #d5d3ca; width: 228px; }

/* Sidebar Caption - goes under a sbpic2 */
#sidebar .sbcaption, .sidebar .sbcaption { margin: -23px 43px -10px 42px; font-size: 10px; line-height: 1.6em; }

/* .main_feature {	width: 287px; margin: 19px 20px 6px 7px; border: 0; } --Commented out 01/16/2012 */

/*----------------------------- Sidebar Features -----------------------------*/
/* Accepts a lot of the content that can be cut in the content div and spacing is adjusted a bit
to work well in this sidebar feature. */

.sbfeature { width: 248px; margin: 32px; border: 0; }

/*---------Sidebar Adjustable Feature---------*/
.sbadjust {	background: url('images/sidebar_details/sb_bg_tile.gif') repeat-y; padding: 1px 27px;	margin: -1px 0; }
.sbadjust > :first-child { margin-top: 0px; }
.sbadjust > p:first-child { margin-top: 9px; }
.sbadjust h1, .sbadjust h2, .sbadjust h3, .sbadjust h4 { font-size: 12px; }
.sbadjust h2 { margin: 9px 0px; }
.sbadjust h3 { line-height: 1.78em;	margin: 9px 0 3px 0; }
.sbadjust p { margin: 9px 0px 0px 0px; line-height: 1.55em; }
.sbadjust p.only { margin: 0; }
.sbadjust ul.list1 li {	background: url('/images/sidebar_details/sb_bullet9px.gif') no-repeat left top; margin: 7px 0px; line-height: 1.55em;	}
.sbadjust ul.list1 li p { margin: 6px 0; }
.sbadjust ul.list1 li.new_window_li_sb { background-image: url(/images/bullets/bullet_new_window_SB.gif); padding-left: 20px; }
.sbadjust ul.list2 li{ background: url(/images/sidebar_details/sb_bullet9px.gif) no-repeat left top; line-height: 1.55em; margin: 2px 0px; }
.sbadjust div.buttons { text-align: right;	margin: 8px 0px 0px auto; }
.sbadjust img.cal { margin: 0px -4px; padding: 16px 0px; }/* wider than the sbadjust div using negative margins. */

/*---------Sidebar Feature 2---------*/
.sbf2 { background: url(images/sidebar_details/sbpic2_bg.gif); margin: 32px 37px 32px 36px; padding: 2px; }
.sbf2-content { border:  4px solid #d5d3ca; width: 220px; background: #d5d3ca; padding: 0 4px; }
.sbf2-content > :first-child { margin-top: 9px; }
.sbf2-content h1, .sbf2-content h2 { font-size: 14px; }
.sbf2-content h3, .sbf2-content h4 { font-size: 12px; }
.sbf2-content h2 { margin: 9px 0px; }
.sbf2-content h3 { line-height: 1.78em;	margin: 9px 0 3px 0; }
.sbf2-content p { margin: 9px 0px 0px 0px; line-height: 1.55em; }
.sbf2-content p.only  { margin: 0; }
.sbf2-content ul.list1 li {	background: url(/images/sidebar_details/sb_bullet9px.gif) no-repeat left top; margin: 7px 0px; line-height: 1.55em;	}
.sbf2-content ul.list1 li p { margin: 6px 0; }
.sbf2-content ul.list1 li.new_window_li_sb { background-image: url(/images/bullets/bullet_new_window_SB.gif); padding-left: 20px; }
.sbf2-content ul.list2 li {	background: url(/images/sidebar_details/sb_bullet9px.gif) no-repeat left top; line-height: 1.55em; margin: 2px 0px;	}
.sbf2 > iframe { border:  4px solid #d5d3ca; }

/* Styles used by sbadjust and sbf2 */
.sbadjust .tablestyle1 td, .sbf2-content .tablestyle1 td, 
.sbadjust .dotline, .sbf2-content .dotline, 
.sbadjust .header-dots, .sbf2-content .header-dots { border-color: #c2bdb2; }

/* Older style for sidebar features. Not sure if/where it's in use. */
.tilegritleft { background: url('/images/sidebar_details/grit_left_70.gif') repeat-y; }
.tilegritright { background: url('/images/sidebar_details/grit_right_70.gif') repeat-y; }

/*---------Sidebar Feature Columns----------*/
/*Put elements beside each other with a little margin in between. Use inline styles to set widths, font sizes, etc on a case by case basis.*/

.sbf_column { float: left; margin-right: 12px; padding: 9px 0; }
.sbf_column.last { margin-right: 0;	}

/*--------- Donate Sidebar Widgets ----------*/
.donate_widget input[type="text"] { width: 100%; }	
.donate_widget .givdetail { padding-bottom: 6px; display:none; }

/*-------- Sidebar Adjustments for Old Reg/Sjobs Table-based Layouts----------*/
td .sbpic2.in-reg-td  { margin-left: 5px; } /* Made to fix the staff blog sbpic2 ad on the summer jobs status screen */
td .sbcaption.in-reg-td { margin-left: 11px; }

/*----------------------------- Dot Lines -----------------------------*/
div.dotline, p.dotline { display:block; clear: both; line-height: 0; padding: 0; margin: 0; border-bottom: 2px dotted #D5D3CA; }
.dotlinedown { border-left: 2px dotted #d5d3ca; margin: 0 4px; }


/*------------------------------------------Form Style 1-----------------------------------------*/
/*Form style 1 is applied to a form tag to affect input and other form elements inside. */

/* Spacing Adjustments */
.formstyle1 input[type="submit"], .formstyle1 input[type="button"], .formstyle1 input[type="reset"] { padding: 0; font-size: 10px; }	
.formstyle1 .tablestyle1 select, .formstyle1 .tablestyle1 input[type="text"] { margin: 1px 0;}
.formstyle1 input[type="image"], .formstyle1 textarea { margin: 1px 0; }
.formstyle1 input[type="text"] { padding: 0 0 1px 0; margin: 1px 0;	}
.formstyle1 input.money { width: 50px; text-align: right; padding: 0 2px 0 0; }

/* Remove browser styling for text inputs, replace with simpler look. */
.formstyle1 input[type="text"], .formstyle1 input[type="password"], .formstyle1 textarea { 
	border: 1px solid #b0a99b; padding: 2px; -webkit-appearance: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
.formstyle1 input[type="text"]:focus, .formstyle1 input[type="password"]:focus, .formstyle1 textarea:focus { border-color: #695c49; }

/* Classes to target input types. Commented out 01/16/2012 
.formstyle1 input.text { padding: 0px 0px 1px 0px; margin: 1px 0px;	}
.formstyle1 p input.check, .formstyle1 p input.radio, .formstyle1 td input.check, .formstyle1 td input.radio, .formstyle1 li input.check, .formstyle1 li input.radio {
	margin: 0 5px 2px 0; padding: 0; vertical-align: middle; line-height: 1.33em; }*/


/*----------------------------- Table Styles -----------------------------*/

/*------------- Table Helper Classes ---------------*/
/*----Add to table tag----*/
/* tight */ table.tight td, table.tight th { line-height:1.78em; }
/* condensed */ table.condensed td, table.condensed th { line-height: 1.4em; }
/* form */ table.form td, table.form th { padding-top: 4px; padding-bottom: 4px; }

/*----Add to td or th tag----*/
/* right */ table td.right, table th.right { text-align: right; padding-right: 24px; }
/* center */ table td.center, table th.center { text-align: center; }
/* end */ table td.end, table th.end { text-align: right; padding-right: 0; }
/* endcenter */ table td.endcenter, table th.endcenter { padding-right: 0; text-align: center; }
/* nopad */ table td.nopad, table th.nopad { padding-right: 0; }
/* twoline */ table th .twoline, table td .twoline { display: block; line-height: 1.2em; padding: 5px 0; }
/* icon */ table td.icon, table th.icon { vertical-align: middle; padding: 0 10px 0 0; }

/*----Add to tr tag----*/
/* dotline */ tr.dotline td, tr.dotline th, td.dotline, th.dotline { line-height: 0; border-bottom: 2px dotted #D5D3CA; padding: 0; margin: 0; }

/*------------------------------------------Table Style 0---------------------------------------------*/
/*--No padding, dotlines, or alignment classes.  You may want to use this as a starting point and add inline styles to td's and elements to adjust spacing and alignment on a case by case basis.--*/

table.tablestyle0 {	margin-top: 0; }
.tablestyle0 td { vertical-align: top;	padding: 0; /* line-height: 1.78em; commented out 01/16/2012 */ }

/*------------------------------------------Table Style 1---------------------------------------------*/
/* Table Style 1 adds horizontal dotlines between each row. Adds space between columns by adding right padding to each td.
Add helper classes to td's or tr's to change horizontal alignment and padding or remove dotlines. */

table.tablestyle1 {	text-align: left; margin: 4px 0; }
.tablestyle1 td, .tablestyle1 th { line-height: 2.22em; border-bottom: 2px dotted #D5D3CA; padding: 2px 12px 3px 0;/* switched to shorthand 01/16/2012 */ }
.tablestyle1 td { vertical-align: top; }
.tablestyle1 th { font-size: 1.11em; font-weight: bold; vertical-align: bottom; }

/*----Add to Rows----*/
/* toprow */.tablestyle1 tr.toprow td {	height: 1px; line-height: 1px; padding: 0; } /* adds to top tr for dotline only. */
/* bottomrow */ .tablestyle1 tr.bottomrow td, .tablestyle1 tr.noline td, .tablestyle1 tr.noline th { border-bottom: none; }

/*------------------------------------------Table Style 2---------------------------------------------*/

/*--tablestyle2 is similar to tablestyle1 in padding and horizontal alignment styles, it does not, however, 
add dotlines to each row by default.  The .dotline class can be used to turn a td into a dotline when necessary.--*/

table.tablestyle2 {	text-align: left; margin-top: 4px; }

.tablestyle2 td, .tablestyle2 th { line-height: 2.22em; padding-top: 2px; padding-right: 12px; padding-bottom: 3px;	padding-left: 0px; }

.tablestyle2 td { vertical-align: top; }
.tablestyle2 th { font-size: 1.11em; font-weight:bold;	vertical-align: bottom; }


/*----------------------------- Table Style 3 -----------------------------*/
/* Table style with 3 levels of hierarchy (indentation) */

.tablestyle3 { margin: 6px 0; }
.tablestyle3 td { height: 2em; line-height: 2em; vertical-align: middle; }
.tablestyle3 input { vertical-align: middle; }
/* level1  */.tablestyle3 .level1 td { font-weight: bold; padding-bottom: 4px; }
/* level2 */ .tablestyle3 .level2 .firstcell { padding-left: 20px; }
/* level3 */ .tablestyle3 .level3 .firstcell { padding-left: 40px; }
/* spacerow1 */ .tablestyle3 .spacerow1 td { height: 1.33em; line-height: 1.33em; }
/* spacerow2 */ .tablestyle3 .spacerow2 td { height: 0.88em; line-height: 0.88em; }
/* x-char */.x-char { font-weight: bold; position: relative; top: 0.11em; }
/* Add to span to use the X character of Verdana 9px as an X button (reg transaction table). */


/*----------------------------- Table Sorter -----------------------------*/
/* Table Sorter is a jquery plugin that makes tables sortable by their column headings.  It adds classes for css styling. */

.hidden-sort-date { display:none; }
.tablesorter thead tr {	background: #e3e2db url('/images/tables/tablesorter/trbg_30px_med-tan.png') repeat-x top; }
.tablesorter th { line-height: 24px; padding: 3px 6px 3px; }
.tablesorter td { line-height: 2.66em; padding: 3px 6px 3px; }
.tablesorter th.header {
	background: #e3e2db url('/images/tables/tablesorter/sort-arrows.png') no-repeat center right;
	border-right: 1px solid #d5d3ca; cursor: pointer; padding-right: 20px; }
.tablesorter.tablestyle1 th { border-bottom: none; /* eliminates the border tablestyle1 applies to th's. */ }
.tablesorter th.headerSortDown { background: #e3e2db url('/images/tables/tablesorter/sort-arrow_down.png') no-repeat center right; }
.tablesorter th.headerSortUp { background: #e3e2db url('/images/tables/tablesorter/sort-arrow_up.png') no-repeat center right; }


/*-----------------------------------------------Lists---------------------------------------------*/

/*------Unordered Lists------*/
ul.list1, ul.list2, ul.list3, ul.formlist1, .layout1 ul, .popup ul { list-style: none; margin: 0; padding: 0; }
/* There may be some ul's depending on default browser styling, so only reset these. */

/* list1 - default */ ul.list1 li { background: url('/images/bullets/bullet9px_trans.gif') no-repeat left top; padding-left: 14px; margin: 9px 0; }
/* list2 - tighter spacing */ ul.list2 li { background: url('/images/bullets/bullet9px_trans.gif') no-repeat 0 0; padding-left: 14px; margin: 0; }
/* list3 - checklist */ ul.list3 li { background: url('/images/bullets/square_box_gray_brown12_14.gif') no-repeat 0 0; padding-left: 14px; margin: 9px 0; }
/* formlist1 - radios or checkboxes */ ul.formlist1 li { margin: 2px 0; }

/* ------Ordered Lists------*/
/* olist1 */ ol.olist1, ol.olist2 { margin: 0; padding: 0;}
			 ol.olist1 li { padding: 0; margin: 9px 0px 9px 23px;}
			 .sbfeature ol.olist1 li { margin: 7px 0px 7px 23px; }
/* olist2 */ ol.olist2 li { margin: 1px 0px 1px 23px; }

/*------ P Lists ------*/ 
/* Used for ordered lists.  You can manually insert the numbers. The spacing is more consistent across browsers. */
p.plist span.num, p.plist2 span.num { display:block; width: 16px; text-align: right; float:left; margin-left: -23px; }
/* plist */ p.plist { margin-left: 17px; }
		    .sbfeature p.plist { margin: 7px 0 7px 17px; }
/* plist2 */ p.plist2 { margin-left: 17px; margin-bottom: 0; margin-top: 0; }
			 .sbfeature p.plist2 { margin: 1px 0 1px 17px; }


/*-----------------------------------------------Thumb64 Listing---------------------------------------------*/
.thumb64 { margin: 26px 0; padding: 0; /*vertical-align: top;*/	}
.thumb64 img { float: left;	vertical-align: top; margin: 1px 18px 0 0; }
.thumb64 h1 { font-size: 12px; line-height: 1em; margin: 0 0 5px 0; }
.thumb64 h2 { font-size: 11px; line-height: 1em; margin: 0 0 6px 0; }
.thumb64 p { margin: 0; line-height: 17px; }

/*-----------------------------------------------Thumb46 Listing---------------------------------------------*/
/* Generally used in a sbfeature */
.thumb46 { padding: 7px 0; margin: 0; height: 46px;	}
.thumb46 h3 { margin: 0 0 2px 0; line-height: 15px; font-size: 10px; }
.thumb46 p { line-height: 15px;	margin: 0; font-size: 10px;	}
.thumb46 img { float: left;	vertical-align: top; margin: 1px 18px 0 0; }

/*-----------------------------------------------Picture List---------------------------------------------*/
.piclist { overflow: hidden; border-top: 2px dotted #d5d3ca; border-bottom: 2px dotted #d5d3ca; margin: 10px 0 0; padding: 10px 0; }
.piclist img { float: left; margin: 0 10px 0 0; }
.piclist h1, .piclist h2, .piclist h3 { margin: 0 0 2px 0; font-size: 12px; }
.piclist h4 { margin: 0 0 2px 0; font-size: 11px; }
.piclist + .piclist, .thumbshow-single + .piclist, .thumbshow-group + .piclist { margin-top: 0px; border-top: none; }
.header-dots + .piclist { margin-top: -5px; border-top: none; }
.piclist p { margin: 0; }
a.piclist { display: block; text-decoration:none; }
a.piclist:hover { background: #e3e2db; }

/*----------------------------- Block Link -----------------------------*/
/* Put an image and a title div inside of an A tag. The whole block is the link with a hover effect.  
The title gets some caption text formatting. Originally used in the three column layout. */

.blocklink { display: block; padding: 0 0 8px; margin-top: 8px; }
.blocklink:hover { background: #e3e2db; text-decoration: none; }
.header-dots + .blocklink { margin-top: -5px; }
.blocklink .bl_img_title { line-height: 1.4em; margin-top: 6px; padding: 0 4px; }


/*---------------------- Image with Caption (Shores Activities Page) --------------------------*/
.photo_caption { float:left; padding: 0; margin: 0; }
.photo_caption p { font-size: 10px;	font-weight: bold; line-height: normal; padding: 7px 12px 13px 0; margin: 0; }
.photo_caption img { vertical-align: top; margin: 30px 12px 0 0; }

/*-----------------------------------------------Image Row---------------------------------------------*/
/* Div with the class of "imagerow".  The images will fill up as many rows as necessary and have 20px of space between images and rows. */
.imagerow  { overflow: hidden; }
.imagerow img {	float: left; margin: 11px 11px 0 0; }
.imagerow p { margin: 8px 11px 0 0; }
.layout1 div#content div.imagerow, .layout1 div.content div.imagerow { width: 420px; margin-right: -11px; padding-bottom: 11px; }

/*----------------------------- Three Up Image Row -----------------------------*/
/* Used on the Recruiting App facebook photo integration screen. 
Div with the class of "threeup".  Put divs inside it, using the style attribute to specify the image as a bg image.
The CSS resizes the image to fill the divs, and crop as little as possible. Has a hover effect.  Use JS to do something when an image is clicked.*/

.threeup { overflow: hidden; margin-bottom: 11px; }
.threeup div { float: left; width: 113px; height: 113px; border: 8px solid #e3e2db; margin-left: 11px; 
			   background-position: center center; background-size: cover;	-moz-background-size: cover;
			   -moz-border-radius: 2px;-webkit-border-radius: 2px;	border-radius: 2px; }
.threeup div:first-child { margin-left: 0; }
.threeup div:hover { border: 8px solid #d5d3ca; cursor: pointer; }

/*----------------------------- Thumb Show -----------------------------*/
/* When you click a thumbnail, something shows. Content is injected into the thumbshow-slot.  Plays nicely with piclist (no double dotlines). */
/* Thumbshow-group is a div full of images with captions.  Thumbshow-single is an image with title and text(detail) like a larger thumb64 */

.thumbshow-group { overflow: hidden; }
.thumbshow-links { overflow: hidden; border-top: 2px dotted #D5D3CA; border-bottom: 2px dotted #D5D3CA; padding-top: 9px; margin-right: -9px; }
.thumbshow-slot { padding: 9px 0; border-top: 2px dotted #D5D3CA; overflow: hidden; }
.thumbshow-slot > h1:first-child, .thumbshow-slot > h2:first-child, .thumbshow-slot > h3:first-child, .thumbshow-slot > h4:first-child { margin: 0 0 10px; }

.thumbshow-group + .thumbshow-group .thumbshow-links,
.thumbshow-single + .thumbshow-group .thumbshow-links,
.thumbshow-group + .thumbshow-single .thumbshow-links,
.thumbshow-single + .thumbshow-single .thumbshow-links,
.piclist + .thumbshow-group .thumbshow-links,
.piclist + .thumbshow-single .thumbshow-links { border-top: none; }/* Remove top border of links when it comes directly after another or after a piclist. */

.thumbshow-links + .thumbshow-slot { border-top: none; border-bottom: 2px dotted #D5D3CA; }/* If the slot comes after the links, remove top border, add bottom border. */

.thumbshow-links a { display: block; float: left; margin-right: 9px; padding-bottom: 9px; cursor: pointer; }
.thumbshow-links a .thumbshow-icon { display: block; width: 130px; height: 73px; background-position: center center; background-repeat: no-repeat; text-indent: -9999px;
								 -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px;}
.thumbshow-links a:hover { text-decoration: none; }
.thumbshow-group .thumbshow-links a:hover .thumbshow-icon { border: 4px solid #8d8373; width: 122px; height: 65px; }
.thumbshow-links a .thumbshow-title { display: block; width: 126px; padding: 0 2px 0; line-height: 1.4em; margin: 3px 0 0; }

.thumbshow-content { display:none; }

.thumbshow-single { overflow: hidden; }
.thumbshow-single .thumbshow-links:hover { background: #e3e2db; }
.thumbshow-single a .thumbshow-icon { margin-right: 9px; display: block; float: left; }
.thumbshow-details { display: block; overflow:hidden; float: left; width: 261px; }
.thumbshow-details span { display: block; }
.thumbshow-details .details-title { font-size: 11px; line-height: 1.8em; }

.four .thumbshow-links { margin-right: -10px; padding-top: 10px; }
.four .thumbshow-links a .thumbshow-icon { width: 164px; height: 92px; }
.four.thumbshow-group .thumbshow-links a:hover .thumbshow-icon { border: 4px solid #8d8373; width: 156px; height: 84px; }
.four .thumbshow-links a { margin-right: 10px; padding-bottom: 10px; }
.four .thumbshow-links a .thumbshow-title { width: 160px; }
.four .thumbshow-links a .thumbshow-title { width: 160px; }
.four .thumbshow-slot { padding: 10px 0; }

/*-----------------------------------------Video Thumbnail Play Button-----------------------------------------*/
/* Div around image with video_thumb class. Positions play button link on top of an image. use inline styles to center the play button. */
.video_thumb { position: relative; }
.video_thumb a { width: 28px; height: 27px;	position: absolute;	z-index: 500; background: url('images/button_bg/vid_play_overlay_sprite.gif') no-repeat top left; }
.video_thumb a:hover, .video_thumb a:active { background-position: bottom left;	}
.video_thumb img { position: absolute; z-index: 0; }

/*-----------------------------------------------Old Image Buttons---------------------------------------------*/
/* Adjusts margins on old image buttons. */
img.button1 { margin: 9px 0; }
td img.button1 { margin: 5px 10px 5px 0; }
#content div.buttons img, div.content div.buttons img { margin-right: 12px; } /* container for button images gives each button some right margin. */
	
/*---------------------------------------------Registration graphics-------------------------------------------*/
/* Tab 409 - Not in use.  Designed for use in reg to put year tabs in the 409.  Used in a wireframe.*/
div.tab409 { height: 33px; width: 445px; margin: 22 0px 5px -36px; overflow: hidden; white-space: nowrap; }

/* Five steps - div around five step graphics gets spacing like an H1 */
.five_steps { margin: 20px 0 5px 0; }

/*-------------------------------------------------System Message-----------------------------------------------*/
div.system_message { margin: 20px 0 20px 0;	padding: 14px 20px;	overflow: hidden; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
div.system_message.tight { margin: 6px 0; } /* Tighter margin for system messages in tight places (like in drilldown alt options box) */

body .system_message h1, body .system_message h2, body .system_message h3, body .system_message p {	margin: 0 0 2px 0; } /* Replaces default margins */
body .system_message h1, body .system_message h2, body .system_message h3, body .system_message h4 { font-size: 12px; } /* Added 09/29/2011 */

/* Error (red x) */
div.system_message.sm_error { background: #ebd3d3 url('images/system_messages/messagebg_error.gif') no-repeat bottom right;	padding-left: 64px; }
.system_message.sm_error h1, .system_message.sm_error h2, .system_message.sm_error h3, .system_message.sm_error p, .system_message.sm_error span, .system_message.sm_error li, .system_message.sm_error div, .system_message.sm_error a { color: #bf3030;}
div.system_message.sm_error .messageicon { width:36px; height:35px; margin: 0px 0 0 -48px; background: url('images/system_messages/error_icon.gif') no-repeat top left; float: left; }

/* Warning (yellow !) */
div.system_message.sm_warning {	background: #ebe7ab url('images/system_messages/messagebg_warning.gif') no-repeat bottom right;	padding-left: 46px; }
.system_message.sm_warning h1, .system_message.sm_warning h2, .system_message.sm_warning h3 { color: #ab9111; }
.system_message.sm_warning p, .system_message.sm_warning span, .system_message.sm_warning li, .system_message.sm_warning div, .system_message.sm_warning a { color: #917900; }
div.system_message.sm_warning .messageicon { width:13px; height:45px; margin: 0 0 0 -28px; background: url(images/system_messages/warning_icon.gif) no-repeat top left; float: left; }

/* Success (green check mark) */
div.system_message.sm_success {	background: #cbdeb1 url('images/system_messages/messagebg_success.gif') no-repeat bottom right;	padding-left: 86px; }
.system_message.sm_success h1, .system_message.sm_success h2, .system_message.sm_success h3 { color: #67913f; }
.system_message.sm_success p, .system_message.sm_success span, .system_message.sm_success li, .system_message.sm_success div, .system_message.sm_success a { color: #618c38; }
div.system_message.sm_success .messageicon { width:55px; height:44px; margin: 0px 0 0 -68px; background:url('images/system_messages/success_icon.gif') no-repeat top left; float:left; }

/* System Message Highlights */
.smh_success, .smh_success td { background: #cbdeb1; }
.smh_warning, .smh_warning td { background: #ebe7ab; }
.smh_error, .smh_error td { background: #ebd3d3; }

/*no icon*/ div.system_message.sm_small { padding: 8px 12px; }

/*----------------------------- Measure Bar -----------------------------*/
/* A horizontal bar with an icon that can be moved left to right by JS to show the measure of something.
Used on the SJ spiritual story page to show if the length of answer was too short or too long.  
The bar can have 3 labels. */

.mb-bar { height: 10px; width: 100%; background: #e3e2db; position: relative;}
.mb-icon { display: block; position: absolute; height: 10px; width: 10px; background: #b0a99b; top: 0px; left: 0px; }
.mb-labels { overflow:hidden; }
.mb-label { width: 33%; display: block; float: left; }
.mb-label1 { text-align: left;}
.mb-label2 { text-align: center; }
.mb-label3 { text-align: right; }

/*-----------------------------------------Floats--------------------------------------------*/
.clearfloat, .clearfloats { clear:both; } /* put on an empty div to clear floats above it. */
.containfloats { overflow:hidden; } /* put on a div that contains floating elements to make it contain them (have sufficient height) */
.floatright { float: right; } /* add to a span to float(align) the text to the right. */

/*----------------------------- Helper Classes -----------------------------*/
/* Classes that do simple, helpful things. */
/* graphic */ .graphic { display: block; text-indent: -9999px; } /* add to an A tag to hide it's text and make it block to show a bg graphic. */
/* clickable */ .clickable { cursor: pointer; }/* Add to a div, img, etc. that will do something when clicked (via JS) but is not a link with an href.  Gives it the hand cursor. */
/* block */ a.block { display: block; }
/* indent1 */ div.indent1, td.indent1 { padding-left: 18px; } /* Give a div the class of indent1 to indent it a bit. */
/* normalweight */  .normalweight { font-weight: normal; } /* Make an element within a bold styled element (like H1 or Strong) not bold. */

/*---------------------------------------Show/Hide by ID-------------------------------------*/
/* Starts the show-hide element off as hidden. to be shown later by JS. */
.show-hide { display: none;	}

/*-----------------------------------------Flash Detection-----------------------------------------*/
/*hides the noflash (alternate) content in case they don't have JS running.*/
.noflash { display: none; }

/*---------------------------------------------Toolbar---------------------------------------------*/
.toolbar_container { width: 686px; height: 15px; margin: 19px auto 19px; }

/*----------------------------- Footer -----------------------------*/
a.footer { font-size: 10px; }

/*-----------------------------------------Accent Colors--------------------------------------------*/

/* orange text */
.accent1, p.accent1, h1.accent1, h2.accent1, h3.accent1, h4.accent1, tr.accent1, th.accent1, td.accent1, a.accent1,  h1.headerdots.accent1 { color: #e4701e; }

/* green text */
.accent2, p.accent2, h1.accent2, h2.accent2, h3.accent2, h4.accent2, tr.accent2, th.accent2, td.accent2, a.accent2,  h1.headerdots.accent2 { color: #769945; }

/* blue text */
.accent3, p.accent3, h1.accent3, h2.accent3, h3.accent3, h4.accent3, tr.accent3, th.accent3, td.accent3, a.accent3,  h1.headerdots.accent3 { color: #4595cc; }

/* maroon text */
.accent4, p.accent4, h1.accent4, h2.accent4, h3.accent4, h4.accent4, tr.accent4, th.accent4, td.accent4, a.accent4,  h1.headerdots.accent4 { color: #8c292e; }

/* 1 step lighter brown text */
.accent5, p.accent5, h1.accent5, h2.accent5, h3.accent5, h4.accent5, tr.accent5, th.accent5, td.accent5, a.accent5,  h1.headerdots.accent5 { color: #7b705e; }

/* 2 steps lighter brown text */
.accent6, p.accent6, h1.accent6, h2.accent6, h3.accent6, h4.accent6, tr.accent6, th.accent6, td.accent6, a.accent6,  h1.headerdots.accent6 { color: #8d8373; }

/* Red Text */
.accent7, p.accent7, h1.accent7, h2.accent7, h3.accent7, h4.accent7, tr.accent7, th.accent7, td.accent7, a.accent7,  h1.headerdots.accent7, .errormsg, p.errormsg, h1.errormsg, tr.errormsg, th.errormsg, td.errormsg, a.errormsg,  h1.headerdots.errormsg { color: #bf3030; }

.popup6 .accent1 { color: #695c49; font-weight: bold; } /* popup6 is for Reg Printer Friendly layout */

/* big asterisk */ .big_asterisk_orange { font-size: 12px; font-weight: bold; color: #e4701e; }

/*----------------------------- Deprecated Styles -----------------------------*/
/* Styles we should to stop using and someday delete*/
.ad_brown {	font-size: 10px; font-weight: bold;	text-decoration: none; }
.ad_red_highlight {	font-size: 10px; font-weight: bold;	color: #ea5a04;	text-decoration: none; }
.background-down { background-image: url(/images/dot_line/brown_line_down.gif);	background-repeat: repeat-y; }
.sub_heading { font-size: 11px;	text-decoration: none; line-height: normal;	margin: 22px 0px 5px; }
.par_spacing { margin: 0px;	padding-top: 5px; }
.forms { font-size: 9px; } /* applied to some td's on the conference contact.php page. */
.form-heading {	font-size: 9px;	font-weight: bold; border: none; }/* applied to td's on the conference contact.php page. */
.green_heading { font-size: 12px; color: #88a959; font-weight: bold; text-decoration: none;	line-height: normal; padding: 22px 0 5px 0; }
.list_items { font-size: 10px; line-height: 15px; text-decoration: none; }
a.list_items { color: #ffffff; }
.list_items_small { font-size: 9px;	line-height: 15px; text-decoration: none; }
.list_items_title_orange { font-size: 11px;	line-height: 15px; text-decoration: none; color: #e57422; font-weight: bold; padding-top: 12px; }
.list_items_orange { font-size: 11px; line-height: 15px; text-decoration: none;	color: #e57422; }
.list_items_title {	font-size: 11px; line-height: 15px; text-decoration: none; font-weight: bold; padding-top: 12px; }
.help_nav { font-size:9px; font-weight:bold; }
.help_nav_current { font-size:9px; color:#E57422; font-weight:bold; }
.orange_link { font-size:12px; font-weight:bold; margin: 22px 0px 22px 0px;	color:#e57422; }
.orange_heading { font-size: 12px; color: #E57422; font-weight: bold; text-decoration: none; line-height: normal; padding-top: 22px; padding-bottom: 5px; }
.activities_titles { font-size: 10px; color: #E57422; font-weight: bold; text-decoration: none; line-height: normal; padding-top: 7px; padding-bottom: 25px; }
.orange_bold { font-size: 9px; color: #E57422; font-weight: bold; line-height: normal; }
a.activities_titles { font-size: 10px; color: #E57422; font-weight: bold; }
.par_no_spacing{ font-size: 9px; text-decoration: none; }
.photo_title { font-size: 10px; font-weight: bold; text-decoration: none; line-height: normal; padding-top: 7px; padding-bottom: 25px; }
/* End Deprecated Styles */

/*---------------------------------------Old Main Navigation---------------------------------------*/
a.mainnav { font-size: 9px; color: #000; }
a.mainnav_stuff { font-size:9px; color:#fff; }
#layer1, #layer2, #layer3, #layer4, #layer5, #layer6, #layer7, #layer8 { width : 759px;	position: absolute;	z-index : 90; height: 25px;	visibility: hidden;	top: 25px; }
#layer1 { background-color: #bdb6a8; }
#layer2 { background-color: #d9c635; }
#layer3 { background-color: #e57422; }
#layer4 { background-color: #a7dcff; }
#layer5 { background-color: #7eb531; }
#layer6 { background-color: #782327; z-index : 92; }
#layer7 { background-color: #99cccc; z-index : 93; }
#layer8 { background-color: #cdc7b8; z-index : 94; }

/*---------------------------------------Registration Section FAQs----------------------------------------*/
/* This code is duplicated in registration.css */ 
ul.faq { list-style-image:url('/images/dot.gif'); margin:0 0 0 18px; padding:0; }
ul.faq li {	margin:8px 0; padding: 0; line-height: 13px; color:#695C49;	font-family:Verdana, sans-serif !important; font-size:9px !important; }
ul.faq li a { color:#695C49; font-family:Verdana, sans-serif !important; font-size:9px !important; font-weight:bold; }
div.answer { display:none; color:#695C49; font-family:Verdana, sans-serif; font-size:9px; margin: 4px 4px; }

/*----------------------------------------------- Video Section---------------------------------------------*/
/*Tag List*/
div.taglist_header { font-size: 12px;line-height:1.5em;font-weight: bold; margin: 22px 0 0 0; padding: 0 0 6px 0;background: url('images/dot_line/brown_line_t.gif') repeat-x bottom; }
div.taglist_header div { margin-right: 4px; float: left; height: 18px; white-space:nowrap; }
div.taglist_header div img { margin: 0px 6px 0px 4px; }

/* Video Player */
.videoplayer { margin: 10px 0; }

/*----------------------------- Web Store -----------------------------*/
/* So the td reset rule won't break the featured items sidebar in the able commerce web store. */
td td table.featured, td td table.featured table, td td table.featured td { line-height: 12px; }

/*----------------------------- Rockpile Styles -----------------------------*/
/* These styles modify normal site styles for pages included in the rockpile admin software. */
body.rockpile {	background-color: #f2f1ed; background-image: none; }

/*---------------------------------------Drilldown (twirl down) DIVs-------------------------------------*/
/* Used on Reg select sessions page. */
.drilldown_option_container li { list-style-type: none;	padding-left: 25px; }
.drilldown_option_container li li {	padding-left: 15px; }
.drilldown_option_container .group_header { font-size:11px; height: 16px; margin-top: 22px; cursor: pointer; }
.drilldown_option_container .option_header { font-size:10px; font-weight:bold; padding-right:0px; }
.drilldown_option_container .option { font-size:10px; }
.drilldown_option_container .option_extras td { line-height: 2em; font-size: 10px; padding: 0 0 2px 0; }
.drilldown_option_container .option_extras_section { border: 2px dotted #d5d3ca; padding: 4px 8px; margin-bottom: 6px; }

/*----------------------------- New Main Navigation -----------------------------*/
/* Lots of comments here because it's pretty complicated/tedious */

/*-----------Base Styles-----------*/
/* pulldowns on top of everything */ #nav-container { height: 76px; position: relative; z-index: 1000; } 

/* remove browser styles */ #nav, #nav ul {	padding: 0;	margin: 0; list-style: none; }

/* contain floating li's */ #nav { float: left; background: #f2f1ed; }

/* text styles */#nav li a { font-family:"Helvetica Neue", Arial, sans-serif; font-size:11px; text-decoration:none; line-height:18px; color:#695c49; }

/* -----------Top Row -----------*/
/* Make it horizontal */ #nav li { float: left; width: 126px; } 

/* Top level links */ #nav li a.level1 { width: auto; border-right: 2px dotted #d5d3ca;font-weight: bold; text-transform:uppercase; letter-spacing: 1px;
				   						 text-align: center; display: block; padding: 10px 0; text-indent: 2px; }

/* Active/hover text color */ #nav li:hover a, #nav ul a, .navtab-about #nav .tab1 a.level1, .navtab-summer #nav .tab2 a.level1, 
							  .navtab-conf #nav .tab3 a.level1, .navtab-retreats #nav .tab4 a.level1, .navtab-oe #nav .tab5 a.level1 { color: #332a21; }

/* -----------Pulldown Submenu -----------*/
/* pulldown ul */ #nav li ul { padding: 12px 0; width: 172px; position: absolute; left: -999em; /* hide for now */
				 -webkit-border-radius: 2px; -webkit-border-top-left-radius: 0;	-moz-border-radius: 2px; -moz-border-radius-topleft: 0;	border-radius: 2px;	border-top-left-radius: 0; }
				 #nav li:hover ul { left: auto; margin-left:-2px; } /* show it on hover */

/* submenu li */#nav li ul li { border-bottom: 2px dotted #b2ac9e; margin: 0 8px; width: 156px; }

/* first li */ #nav li li:first-child { border-top: 2px dotted #b2ac9e; }

/* pulldown submenu links */ #nav li li a { padding: 8px 0 8px 0px; display: block; text-indent: 8px; }

/* submenu li hover link */ #nav li li a:hover { background-image: url('/images/backgrounds/nav-bg.png'); background-repeat:repeat-x; }

/* -----------Active Tab -----------*/
/* submenu ul */ .navtab-about #nav .tab1 ul, .navtab-summer #nav .tab2 ul, .navtab-conf #nav .tab3 ul, 
				 .navtab-retreats #nav .tab4 ul, .navtab-oe #nav .tab5 ul, .navtab-stuff #nav .tab6 ul 
				 { position: static; left: 0; display: block; float: left; width: 759px; height: 38px; overflow: hidden; padding: 0;	
  				  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }

/* submenu li */ .navtab-about #nav .tab1 ul li, .navtab-summer #nav .tab2 ul li, .navtab-conf #nav .tab3 ul li, 
					.navtab-retreats #nav .tab4 ul li, .navtab-oe #nav .tab5 ul li, .navtab-stuff #nav .tab6 ul li 
					{ text-align: center; width: auto; border: none; margin: 0; }

/* submenu item links */ .navtab-about #nav .tab1 li a, .navtab-summer #nav .tab2 li a, .navtab-conf #nav .tab3 li a, 
   						 .navtab-retreats #nav .tab4 li a, .navtab-oe #nav .tab5 li a, .navtab-stuff #nav .tab6 li a 
						 { padding: 4px 8px; margin: 6px 0px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; text-indent: 0;}

/* first item link */.navtab-about #nav .tab1 ul li:first-child a, .navtab-summer #nav .tab2 ul li:first-child a, .navtab-conf #nav .tab3 ul li:first-child a, 
					.navtab-retreats #nav .tab4 ul li:first-child a, /*.navtab-oe #nav .tab5 ul li:first-child a,*/ .navtab-stuff #nav .tab6 ul li:first-child a 
					{ margin-left: 11px; }

/* last item li */.navtab-about #nav .tab1 ul li.last, .navtab-summer #nav .tab2 ul li.last, .navtab-conf #nav .tab3 ul li.last, 
					.navtab-retreats #nav .tab4 ul li.last, .navtab-oe #nav .tab5 ul li.last, .navtab-stuff #nav .tab6 ul li.last 
					{ float: right; }

/* last item link */.navtab-about #nav .tab1 ul li.last a, .navtab-summer #nav .tab2 ul li.last a, .navtab-conf #nav .tab3 ul li.last a, 
					.navtab-retreats #nav .tab4 ul li.last a, .navtab-oe #nav .tab5 ul li.last a, .navtab-stuff #nav .tab6 ul li.last a 
					{ margin-right: 11px; }					

/* -----------Tab 1: Tan -----------*/
/* active/hover tab color */ #nav li.tab1:hover a, #nav .tab1 ul, .navtab-about #nav .tab1, .navtab-about #nav .tab1 a.level1 { background-color: #bdb6a8; } 
/* active/hover border */ #nav li.tab1:hover a.level1, .navtab-about #nav .tab1 a.level1 { border-right: 2px solid #bdb6a8; } 
/* pulldown item hover bg */ #nav .tab1 li a:hover { background-color: #ccc5b6; background-position:0 0;} 
/* pulldown ul */ #nav li.tab1:hover ul { left:2px; }
/* active submenu ul */ .navtab-about #nav li.tab1:hover ul { margin-left: 0px; }
/* adjust margin for even spacing */ .navtab-about #nav .tab1 li a { margin-right: 72px; }				  

/* -----------Tab 2: Yellow -----------*/
/* active/hover tab color */ #nav li.tab2:hover a, #nav .tab2 ul, .navtab-summer #nav .tab2, .navtab-summer #nav .tab2 a.level1 { background-color: #d9c635;}
/* active/hover border */ #nav li.tab2:hover a.level1, .navtab-summer #nav .tab2 a.level1 { border-right: 2px solid #d9c635; border-left: 2px solid #d9c635; margin-left: -2px; }
/* pulldown li */ #nav li.tab2:hover li { border-color: #cbb831; }
/* pulldown item hover bg */ #nav .tab2 li a:hover { background-color: #ebd746; background-position:0 -102px;}
/* shift submenu to compensate for parent tab's position. */ .navtab-summer #nav .tab2 ul { margin-left: -126px; }
/* make tab 2 (Summer Camps) bigger */ #nav li.tab2 { width: 129px; } #nav .tab2 a.level1 { width: auto; }
/* adjust margin for even spacing */.navtab-summer #nav .tab2 li a { margin-right: 76px; }

/* Tab 3: Orange -----------*/
/* active/hover tab color */ #nav li.tab3:hover a, #nav .tab3 ul, .navtab-conf #nav .tab3, .navtab-conf #nav .tab3 a.level1 { background-color: #ed7e2f; }
/* active/hover border */ #nav li.tab3:hover a.level1, .navtab-conf #nav .tab3 a.level1 { border-right: 2px solid #ed7e2f; border-left: 2px solid #ed7e2f; margin-left: -2px; }
/* pulldown li */ #nav li.tab3:hover li { border-color: #df772d; }
/* pulldown item hover bg */ #nav .tab3 li a:hover { background-color: #fc8b3a; background-position:0 -202px;}
/* shift submenu to compensate for parent tab's position */.navtab-conf #nav .tab3 ul { margin-left: -255px; }
/* adjust margin for even spacing */.navtab-conf #nav .tab3 li a { margin-right: 106px; }

/* Tab 4: Blue -----------*/
/* active/hover tab color */ #nav li.tab4:hover a, #nav .tab4 ul, .navtab-retreats #nav .tab4, .navtab-retreats #nav .tab4 a.level1 {background-color: #91d1ff;}
/* active/hover border */ #nav li.tab4:hover a.level1, .navtab-retreats #nav .tab4 a.level1 { border-right: 2px solid #91d1ff; border-left: 2px solid #91d1ff; margin-left: -2px; }
/* pulldown li */ #nav li.tab4:hover li { border-color: #89c6f1; }
/* pulldown item hover bg */ #nav .tab4 li a:hover { background-color: #abdcff; background-position:0 -302px;}
/* shift submenu to compensate for parent tab's position. */.navtab-retreats #nav .tab4 ul { margin-left: -381px; }
/* adjust margin for even spacing */ .navtab-retreats #nav .tab4 li a { margin-right: 68px; }

/* Tab 5: Green -----------*/
/* active/hover tab color */ #nav li.tab5:hover a, #nav .tab5 ul, .navtab-oe #nav .tab5, .navtab-oe #nav .tab5 a.level1 { background-color: #88b551; }
/* pulldown item a */ #nav li.tab5:hover a.level1, .navtab-oe #nav .tab5 a.level1 { border-right: 2px dotted #88b551; border-left: 2px solid #88b551; margin-left: -2px; }
/* pulldown item li */ #nav li.tab5:hover li { border-color: #7ea74b; }
/* pulldown item hover color */ #nav .tab5 li a:hover { background-color: #99c464; background-position:0 -402px;}
/* shift submenu to compensate for parent tab's position */ .navtab-oe #nav .tab5 ul { margin-left: -507px; }
/* adjust left margin for even spacing */ .navtab-oe #nav .tab5  li a { margin-left: 156px; }

/* Tab 6: Red -----------*/
/* active/hover tab color */ #nav li.tab6:hover a, #nav .tab6 ul, .navtab-stuff #nav .tab6, .navtab-stuff #nav .tab6 a.level1 { background-color: #782327; }
/* tab text color */ #nav li.tab6:hover a, #nav .tab6 ul, .navtab-stuff #nav .tab6 a.level1, .navtab-stuff #nav .tab6 li a { color: #ffffff; } 
/* cover up right border */ #nav li.tab6 a.level1 { border-right: 2px solid #f2f1ed; }
/* hover/active tab */ #nav li.tab6:hover a.level1, #nav li.tab6.sfhover a.level1, 
					  .navtab-stuff #nav .tab6 a.level1 { border-right: 2px solid #782327; border-left: 2px solid #782327; margin-left: -2px;}
/* pulldown li */ #nav li.tab6:hover li { border-color: #661e21; }
/* pulldown item hover bg */ #nav .tab6 li a:hover { background-color: #8f292e; background-position:0 -502px;} 
/* shift submenu to compensate for parent tab's position */ .navtab-stuff #nav .tab6 ul { margin-left: -633px; } 
/* pulldown ul */ #nav li.tab6 ul { -webkit-border-radius: 2px; right: 0px; /* right align */
				-webkit-border-top-right-radius: 0; -moz-border-radius: 2px; -moz-border-radius-topright: 0; border-radius: 2px; border-top-right-radius: 0; }
/* pulldown item li */ #nav .tab6 li { text-align: right; } 
/* pulldown item link */ #nav .tab6 li a { padding: 8px 15px 8px 0; } /* flop the padding to the right */	
/* adjust margin for even spacing */ .navtab-stuff #nav .tab6 li a { margin-right: 76px; }

/*----------------------------- New Header Bar -----------------------------*/
#header-bar { height: 66px;	background: #695c49; }
#header-bar a {	color: #f2f1ed;	font-family: "Helvetica Neue", Arial, sans-serif; font-size: 18px; 
				display: block; float: left; background-repeat: no-repeat; text-indent: -9999px; }
.hb-pclogo { width: 94px; height: 55px;	line-height: 55px; margin: 6px 0 0 16px; padding-right: 14px; 
			 background-image: url('/images/main_title/hbar_logo_sprite2.png'); }
.hb-divider { display: block; float: left; width: 2px; height: 46px; background-image: url('/images/main_title/vert-dotline.png'); margin-top: 11px; }

/* Hover states - sprite BG position */
.hb-pclogo.tan:hover { background-position: 0px -55px; }
.hb-pclogo.yellow:hover { background-position: 0px -110px; }
.hb-pclogo.orange:hover { background-position: 0px -165px; }
.hb-pclogo.blue:hover { background-position: 0px -220px; }
.hb-pclogo.green:hover { background-position: 0px -275px; }
.hb-pclogo.white:hover { background-position: 0px -330px; }

.hb-section-title {	width: 300px; height: 45px;	line-height: 45px; margin: 11px 0 0 11px; background-repeat: none; }

/* Section title graphic classes */
#header-bar .hb-section-title.about-us { background-image: url('/images/main_title/hb-about-us.png'); }
#header-bar .hb-section-title.conferences { background-image: url('/images/main_title/hb-conferences.png'); }
#header-bar .hb-section-title.outdoor-ed { background-image: url('/images/main_title/hb-outdoor-education.png'); }
#header-bar .hb-section-title.registration { background-image: url('/images/main_title/hb-registration.png'); }
#header-bar .hb-section-title.retreats { background-image: url('/images/main_title/hb-retreats.png'); }
#header-bar .hb-section-title.stuff { background-image: url('/images/main_title/hb-stuff.png'); }
#header-bar .hb-section-title.summer-camps { background-image: url('/images/main_title/hb-summer-camps.png'); }
#header-bar .hb-section-title.web-store { background-image: url('/images/main_title/hb-web-store.png'); }