﻿/* QUICK REFERENCE TO STYLE CLASSES & NAMES =====================================
-CLASS-				-USAGE-
-ID-				-USAGE-


=====*/
/*
@media print {

body { display: none }

}
*/
/* Standard styles ============================================================*/
body {
	background-color: white;
	font: normal 400 12px/16px Arial, Helvetica, Sans-serif; color: Black;
	text-align: center; /* USED TO CENTER CONTENT IN BROWSER WINDOW, ALONG WITH POSITIONER DIV */
}

td, th { font: normal 400 12px/16px Arial, Helvetica, sans-serif; color: Black; padding: 2px; border: 0px;}

a { color: #006699; text-decoration: underline; }
a:hover { text-decoration: none; }
a img { border: none; }

form { margin: 0px;}
p { margin: 0 0 1em 0;}
div { margin: 0px; padding: 0px }
li { margin-bottom: 4px; padding: 0px; }

h1,h2,h3,h4,h5,h6 { font-family: Arial, Helvetica, sans-serif; color: Black; line-height: 100%; font-weight: 700; }
h1 {margin-bottom: 10px; margin-top: 2px; }
h2 {margin-bottom: 10px; margin-top: 6px; }
h3 {margin-bottom: 4px; margin-top: 6px}
h4,h5,h6 {margin-bottom: 0px;  margin-top: 2px}
h1 { font-size: 200%; }
h2 { font-size: 160%; }
h3 { font-size: 120%; }
h4 { font-size: 110%; }
h5 { font-size: 100%; }
h6 { font-size: 95%; }

/* IDs and Named Classes ==============================================================*/

/* Used to provide proper column heights on all browsers */
.clear:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
.clear { min-height: 1px; }
* html .clear { height: 1px; }

.allowAbs { position:relative }
/* Used to position entire page, ALONG WITH BODY STYLING ABOVE; Without body styling, in order to work, it
	cannot have a width. */
#positioner { width: 801px; margin-left: auto; margin-right: auto; text-align: left; }
#enclose { padding: 6px; border: 0px solid Silver; }
#topNav { position: static; margin: 0px; padding: 0px 0px 4px 0px; background: White; }
#navFrame { float: left;}
#navLinks { margin-left: 20px; }
#contentFrame { width: 586px; float: right; }
#footer { margin: 10px 0px 0px 0px; padding: 0px; }

/* These two provide a "home" link on the lbb logo, upper left */
#homeRel { position: relative; }
#homeLogo { position: absolute; top: 0px; left: 20px; width: 200px; height: 40px; cursor: pointer; }

/* SECTION BASIC STYLES, SUPPLEMENTED/CHANGED PER PAGE CLASS */
#main { height: 524px; background: White; }
#topper { height: 42px; background: url(/images/topper_bg.jpg) no-repeat top left; }
#leftNavTop { width: 160px; height: 62px; margin: 0px; }
#leftNav { width: 160px; }
#contentTop { height: 42px;}
#content { width: 566px; height: 430px; background: transparent; padding: 0px 4px 10px 0px; }
#navLinks .navTopic { font: normal 700 12px/16px Arial, Helvetica, Sans-serif; color: White;}
#navLinks a.navTopic {color: White}
#navLinks a.navTopic:hover {color: #cccccc;}
#navLinks li { margin: 0px 0px 0px 14px; padding: 1px 0px; color: White; }
#navLinks ul { color: White; margin:0; padding:0; margin-bottom: 10px; font: normal 700 12px/16px Arial, Verdana, Helvetica, sans-serif; color: White; }
#navLinks a { color: White; font: normal 500 10px/14px Arial, Helvetica, sans-serif; text-decoration: none; }
#navLinks a:hover { color: #cccccc; text-decoration: none; }

#topNavLinks { text-align: right }
#topNavLinks ul { margin:0; padding:0; }
#topNavLinks li { display: inline; margin: 0px 0px 0px 14px; padding: 1px 0px; font: normal 700 11px/17px Verdana, Helvetica, Sans-serif; color: Black; list-style: none none;}
#topNavLinks a { color: Black; text-decoration: none; }
#topNavLinks a:hover { color: #666666; text-decoration: none; }
#topNavLinks a.topNavTheme:hover { color: #ffab3d; text-decoration: none; }
#topNavLinks a.topNavHome:hover { color: #0060a9; text-decoration: none; }
#topNavLinks a.topNavGirls:hover { color: #eb5259; text-decoration: none; }
#topNavLinks a.topNavFam:hover { color: #49a2ca; text-decoration: none; }
#topNavLinks a.topNavVol:hover { color: #91c94f; text-decoration: none; }
#topNavLinks a.topNavCouncils:hover { color: #f58026; text-decoration: none; }
#topNavLinks a.topNavCookies:hover { color: #622b60; text-decoration: none; }

/* HOME PAGE STYLES (has more changes than others) -----------------------------------*/
.home #leftNavTop { width: 180px; height: 100px; margin: 0px; }
.home #leftNav { width: 180px; }
.home #contentTop { height: 100px;}
.home #main { height: 566px; background: url(/images/home_bg.jpg) no-repeat top left; }
.home #content { padding: 0px; }
.home #navLinks { margin-left: 6px; text-align: left; }
.home #navLinks .navTopic { color: #cccccc; }
.home #navLinks li { margin: 0px; list-style: none none; }
.home #navLinks ul { color: Black; }
.home #navLinks a { font: normal 700 14px/18px Arial, Helvetica, sans-serif; color: #cccccc; }
.home #navLinks a:hover { color: White; }
.home #navLinks a.navTopic {color: #dcdcdc}
.home #navLinks a.navTopic:hover {color: White;}
.home #navLinks a.specialNav { color:yellow; font-size:14px; line-height:105%; }
.home #navLinks a.specialNav:hover { color:white }

/* GIRLS SECTION STYLES -----------------------------------*/
/* ----- These are for only the volunteers main page ------------------------- */
.girlsmain #main { background: url(/images/main_girlsmain_bg.jpg) no-repeat top left; }
.girlsmain #navLinks li { list-style-image: none; }
.girlsmain #leftNavTop { height: 104px; margin: 0px; }
.girlsmain #main { height: 566px; }
.girlsmain #content {height: 472px;  margin-top: 20px;}
.girlsmain h1, .girlsmain h2, .girlsmain h3, .girlsmain h4 { margin-top: 0px; color: #eb5259 }

.girls #main { background: url(/images/main_girls_bg.jpg) no-repeat top left; }
.girls #leftNavTop { height: 104px; margin: 0px; }
.girls #contentTop { height: 84px;}
.girls #main { height: 566px; }
.girls #navLinks li { list-style-image: none; }
.girls #navLinks li { list-style-image: none; }

.girlsCookieEnt #main { background: url(/images/main_cookieent_bg.jpg) no-repeat top left; }
.girlsCookieEnt #leftNavTop { width: 160px; height: 104px; margin: 0px; }
.girlsCookieEnt #main { height: 566px; }
.girlsCookieEnt #content {height: 472px;  margin-top: 20px;}
.girlsCookieEnt #navLinks li { list-style-image: none; }
.girlsCookieEnt #main { line-height:14px; }

.girlsDownloads ul { margin:0px; padding:0px; list-style:none; }
.girlsDownloads ul li { margin-bottom:8px; font-size:11px; line-height:105%; }
#ce.girlsDownloads ul li { margin-bottom:4px; }

.girlsSellingtips1 #main { background: url(/images/girls_sellingtips1_bg.jpg) no-repeat top left; }
.girlsSellingtips1 #leftNavTop { width: 160px; height: 104px; margin: 0px; }
.girlsSellingtips1 #main { height: 566px; }
.girlsSellingtips1 #content {height: 472px;  margin-top: 20px;}
.girlsSellingtips1 #navLinks li { list-style-image: none; }
.girlsSellingtips1 #main { line-height:14px; }

/* FAMILY SECTION STYLES -----------------------------------*/
/* ----- These are for only the family main page ------------------------- */
.fammain #main { background: url(/images/main_fammain_bg.jpg) no-repeat top left; }
.fammain #navLinks li { list-style-image: none; }
.fammain #leftNavTop { width: 160px; height: 104px; margin: 0px; }
.fammain #main { height: 566px; }
.fammain #content {height: 472px;  margin-top: 20px;}
.fammain h4 { margin-top: 0px; color: #0060a8 }
.fammain #content a { color:black }

/* ----- These are for non-family-main pages ------------------------- */
.fam #main { background: url(/images/main_fam_bg.jpg) no-repeat top left; }
.fam #leftNavTop { height: 104px; margin: 0px; }
.fam #contentTop { height: 84px;}
.fam #main { height: 566px; }
.fam #navLinks li { list-style-image: none; }

/* VOLUNTEERS SECTION STYLES -----------------------------------*/
/* ----- These are for only the volunteers main page ------------------------- */
.volmain #main { background: url(/images/main_volmain_bg.jpg) no-repeat top left; }
.volmain #navLinks li { list-style-image: none; }
.volmain #leftNavTop { width: 160px; height: 104px; margin: 0px; }
.volmain #main { height: 566px; }
.volmain #content {height: 472px;  margin-top: 20px;}
.volmain h4 { margin-top: 0px; color: #0060a8 }

.vol #main { background: url(/images/main_vol_bg.jpg) no-repeat top left; }
.vol #leftNavTop { height: 104px; margin: 0px; }
.vol #contentTop { height: 84px;}
.vol #main { height: 566px; }
.vol #navLinks li { list-style-image: none; }
.vol li { color: black }

/* COOKIES SECTION STYLES -----------------------------------*/
.cookiesmain #main { background: url(/images/main_cookiesmain_bg.jpg) no-repeat top left; }
.cookiesmain #navLinks li { list-style-image: none; }
.cookiesmain #leftNavTop { width: 160px; height: 104px; margin: 0px; }
.cookiesmain #main { height: 566px; }
.cookiesmain #content {height: 472px;  margin-top: 20px;}
.cookiesmain #main h1, .cookiesmain #main h2, .cookiesmain #main h3, .cookiesmain #main h4 { margin-top: 0px; color: #ffffff }
.cookiesmain li { color: #622b60; }
.cookiesmain a { color:white }

.cookies #main { background: url(/images/main_cookies_bg.jpg) no-repeat top left; }
.cookies #navLinks li { list-style-image: none; }
.cookies #leftNavTop { height: 104px; margin: 0px; }
.cookies #contentTop { height: 84px;}
.cookies #main { height: 566px; }
.cookies p.tagline { font-size: 125%; line-height: 100%; color: Orange; font-weight: 700;}
.cookies a.nutinfo { font-size: 110%; line-height: 100%; color: Orange; font-weight: 700;}


/* Styles for various sections and elements -----------------------------------*/

sup { font-size:90%; position:relative; top:-.3em; vertical-align:baseline; font-variant:small-caps}

.help { font-size: 95%; color: Gray; }

ol { list-style-image: none }

a.more {
	color: Black;
	font-weight: 700;
	text-decoration: underline;
	font-size: 95%;
}

a.more:hover {
	text-decoration: none;
}

a.login {
	color: White;
	text-decoration: underline;
	font-size: 100%;
}

a.login:hover {
	text-decoration: none;
}

.formButton {
	background-color: Gray;
	font: normal bold 12px/14px Verdana, Arial, Helvetica, Sans-serif;
	color: #eeeeee;
	border-color: Silver;
	border-width: 2px;
}

.formField {
	background-color: #eeeeee;
	font: normal 12px/14px Arial, Helvetica, Sans-serif;
	margin-left: 6px;
	margin-right: 6px;
}

/* Like it says, prompt text under a form field */
.promptUnderField {
	font-size: 80%;
	line-height:100%;
	color: DimGray;
}

/* Used for non-link menu items that drop a list sh/be same as anchor styling */
td.topNav {
	font: normal 700 11px/17px Verdana, Helvetica, Sans-serif;
	color: Black;
	text-decoration: none;
	white-space: nowrap;
	text-align: center;
}

a.topNav {
	font: normal 700 11px/17px Verdana, Helvetica, Sans-serif;
	color: Black; text-decoration: none;
	padding: 4px 5px 4px 5px;
	white-space: nowrap; text-align: center;
}

a.topNav:hover { color: #116baf; text-decoration: none; }

a.topNavTheme {
	font: normal 700 11px/17px Verdana, Helvetica, Sans-serif;
	color: Black; text-decoration: none;
	padding: 4px 5px 4px 5px;
	white-space: nowrap; text-align: center;
}

a.topNavTheme:hover { color: #ffab3d; text-decoration: none; }

.footer {
	font: normal 400 11px/15px Arial, Helvetica, sans-serif;
	color: #0060a6;
	background-color: transparent;
	text-align: center;
}

a.footer {
	font-weight: 700;
	color: #0060a6;
	text-decoration: none;
}

a.footer:hover {
	color: Black;
	text-decoration: none;
}

/* Caption under photos/images */
.caption {
	font-size: 80%;
	line-height:110%;
	color: DarkGray;
}

.imageLeft {
	margin-right: 20px;
	border: 3px double #0060a9;
	padding: 1px;
}

.imageRight {
	margin-left: 20px;
	border: 3px double #0060a9;
	padding: 1px;
}
