/*                               Common Business Site Styles                                     */

/*

	Colors:
		-- menubar --
		set:menubarBG="#eee"		Background color of main menu bar
		set:menubarFG="#111"		Background color of main menu bar

		-- images with captions --
		set:imageCaptionTrim="#999999"		trim (border) used on insetImage images
		set:imageCaptionBG="#f1f4f6"		Background on image caption area
		set:imageCaptionFG="#eee"		foreground of text for image caption

		-- pagination --
		set:otherPageFG="#111"			foreground color of pages to navigate to (non-current)
		set:otherPageBG="#FFD21C"			background color of pages to navigate to (non-current)
		set:prevNextLinkColor="#FFD21C"		prev / next / first / last color

		-- dialog panel --
		set:dialogHeaderFG="#f1f4f6"		Header Foreground (use inherit to inherit body FG)
		set:dialogHeaderBG="#eee"		Header Background (use transparent to show body BG)
		set:dialogBodyFG="#A8B5C1"		Body Foreground (also acts as default FG for entire dialog)
		set:dialogBodyBG="#f1f4f6"		Body Background (also acts as default BG for entire dialog)
		set:dialogFooterFG="#f1f4f6"		Footer Foreground (use inherit to inherit body FG)
		set:dialogFooterBG="#A8B5C1"		Footer Background (use transparent to show body BG)

		set:dialogPositiveButtonFG="#f0f0f0"		Positive (yes,ok,submit,etc.)
		set:dialogPositiveButtonBG="#2a2"
		set:dialogPositiveButtonHover="#dfbb4f"
		set:dialogNegativeButtonFG="#f0f0f0"		Negative button FG (Cancel, No, etc.)
		set:dialogNegativeButtonBG="#a22"
		set:dialogNegativeButtonHover="#dfbb4f"
		set:dialogMask="rgba(0,0,0,.5)"				The dialog background mask color (generally somewhat transparent)

		set:dialogFormError="#Ff7870"		Rare non-generic mapping - form errors (stil can be overridden obviously)

		-- Forms Colors
		set:formBG="#475157"					Background color of form container (for bg images set on .formContainer)
		set:formContainerText="#eee"			Text color of labels and other default text on the form (not inside fields)
		set:formTitle="#111"					Form Title Color
		set:formFieldBG="#111"					Color of background of text areas and text fields, etc.
		set:formFieldBorder="#A8B5C1"				Border color (1 px usually) around text fields
		set:formFieldText="#444444"				Color of text in form fields
		set:formFieldFocusBG="#e2eff7"			Color of field border when it has focus (someone clicks on it)
		set:formFieldFocusBorder="#A8B5C1"		Color of field border when it has focus (someone clicks on it)
		set:formFieldsetBG="#f1f4f6"			Background color of a fieldset (Set of fields)
		set:formFieldsetTitle="#ffffff"				Fieldset Title Text Color
		set:formFieldsetTitleBG="#999999"		Background of fieldset Title
		set:formFieldHasFocus="rgba(0,200,0,.2)"	Colors the entire field (label/edit) when a field has focus
		set:formFieldHasError="rgba(200,0,0,.2)"	Colors the entire field (label/edit) when a field has an error


		-- sidebar styling --
		set:sidebarFG="#eee"								General foreground of sidebar
		set:sidebarBG="#f1f4f6"								General background of sidebar
		set:sidebarSectionHeader="#eee"						Sidebar section header (h1)
		set:sidebarSectionHeaderUL="#eee"		Single pixel underline color for section header (h1)
		set:moreColor="#A8B5C1"								Color of "more" for about section

*/

/* HeaderContent */
#logo { margin: 20px 0 10px 25px; }
#logo a { font-size: 32px; }

.menubar { height: 39px; clear: both; background-color: #eee; }
.menubar a { display: block; float: left; color: #111; padding: 9px 20px; font-size: 16px; letter-spacing: .5px; }

/* Images with captions */
.insetImage { border: 1px solid #999999; background-color: #f1f4f6; text-align: center; min-width: 100px; margin: 10px; padding: 4px; color: #eee; }
.insetImage img { width: 120px; }
.insetImage .caption { font-size: 10px; text-align: left; line-height: 12px; width: 120px; margin: 0 auto; }
.tleft { float: left; clear: left; }
.tright { float: right; clear: right; }

/* module elements - info and error messages - not customizing colors, due to the nature of these! */
.info { background-color: #E6EFC2; color: #264409; border: 2px solid #C6D880; padding: 8px; text-align: center; }
.error { background-color: #FBE3E4; color: #8A1F11; border: 2px solid #FBC2C4; padding: 8px; text-align: center; }
.error h1 { color: #8A1F11; font-size: 20px; }

#waitIndicator { position: fixed; display: none; left: 50%; top: 50%; margin-left: -84px; margin-top: -30px;
	background-color: rgba(255,255,255,.8); border-radius: 10px; padding: 20px; z-index: 200; border: 1px solid #FFD21C; }

/* Some YUI stylings */
#pagination { text-align: center; clear: all; }
#pagination .yui-pg-current-page { color: purple; border-radius: 4px;}
#pagination a.yui-pg-page { color: #111; background-color: #FFD21C; border: 0; border-radius: 4px; text-decoration: none; }
#pagination a { color: #FFD21C; }

/*       FORMS     */

/* for all forms on the site */
.css2 .formButtons { margin: 1em 0 0; }
.css2 .formButtons input { margin: auto 4px; }
.css2 .formField { clear: left; overflow: hidden; border-radius: 6px; margin: 2px; padding: 4px 0; }
.css2 .formField.hasFocus { background: rgba(0,200,0,.2); }
.css2 .formField.hasError { background: rgba(200,0,0,.2); }
.css2 .formLabel, .css2 .formEdit, .css2 .formInfo { float: left; margin: 5px 0 0 0px; float: left; padding-left: 20px; }
.css2 .formLabel { width: 33%; padding-right: 20px; }
.css2 .formEdit { width: 67%; }
.css2 .formEdit.fullwidth { width: 99%; }
.css2 .fieldInfo,.css2 .fieldError, .css2 .fieldMarker { margin: 0; float: left; padding-left: 20px; } /* common atts for errors/info */

.css2 .fieldMarker { width: 20px; height: 20px; background-size:auto 100%; }
.css2 .fieldMarker.waiting { background: url(gimages/waitInd.gif) no-repeat; }
.css2 .fieldMarker.check { background: url(gimages/check-20.png) no-repeat; }
.css2 .fieldInfo { background:url(fam/information.png) no-repeat; color:#14C134; display: none;  }
.css2 .formField.hasFocus .fieldInfo { display: block; }
.css2 .formField.hasFocus.hasError .fieldInfo { display: none; }
.css2 .formField.hasError .fieldMarker { display: none; }
.css2 .fieldError { background:url(fam/exclamation.png) no-repeat 0 2px; color: #d0584f; min-height: 18px; }
.css2 input[type="text"] { width: 99%;}
.css2 input[type="radio"] { margin: 0 5px;}
.css2 textarea { height:300px; width: 99%;}
/*.css2 textarea.simple { height:300px;}*/

.compactForm .css2 .formLabel { width: 100px; padding-right: 8px; }

/* for forms contained by .formContainer */
.formContainer
{
	background-color: #222;
	border-radius: 4px;
	padding:15px;
	margin: 12px auto;
	color: #eee;
}


.formContainer .formTitle {color:#111; font-size: 16pt;}
.formContainer input[type="text"],.formContainer input[type="password"],.formContainer textarea
{
	border: 1px solid #A8B5C1;
	padding: 2px;
	background-color: #111;
	color: #ccc;
	margin: 1px;
	border-radius: 4px;
	/*-webkit-box-shadow: rgba(0, 0, 0, 0.292969) 0px -1px 1px, rgba(0, 0, 0, 0.199219) 0px 1px 3px inset;
	-moz-box-shadow: rgba(0, 0, 0, 0.292969) 0px -1px 1px;*/
	position: relative;
	top: -3px;
}

/* commented out the following two definitions as I don't think this is the place to handle it. better to
	leave as 100% and adjust the parent formLabel element */
/*.formContainer .formEdit > input[type="text"],.formContainer .formEdit > input[type="password"]
{
	max-width:200px;
}*/

/*.compactForm .formContainer .formEdit > input[type="text"],.formContainer .formEdit > input[type="password"]
{
	max-width:150px;
}*/

.formContainer input[type="text"]:focus, .formContainer textarea:focus
{
	border: 2px solid #C4A660;
	background-color: #111;
	margin: 0;
}

.formContainer textarea { width: 100%; }
.formContainer .formButtons { clear: left;  text-align: right; overflow: hidden; }
.formContainer .fieldset { margin: 15px 0; clear: left; }

.formContainer .fieldsetFields
{
	background-color: #f1f4f6;
	font-size: 93%;
	padding: 10px 10px 10px 10px;
	border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
}

/* We could incorporate the following line to alternate field backgrounds slightly...
.fieldsetFields > div:nth-child(2n+1)  { background-color: rgba(255,255,255,.03); }  */

@media (max-width: 635px)
{
	.formContainer { padding: 0; }
	.formContainer .fieldsetFields { padding: 10px 0;}
	.css2 .formLabel, .css2 .formEdit, .css2 .formInfo { padding-left: 0px; width: 100%; clear: left; }
}


.formContainer .noTitle .fieldsetFields
{
	border-top-left-radius: 4px; border-top-right-radius: 4px;
}

.formContainer .fieldsetTitle
{
	background-color: #999999;
	color: #ffffff;
	font-weight:bold;
	padding-left:20px;
	padding-top:7px;
	font-size: 16px;
	border-top-left-radius: 4px; border-top-right-radius: 4px;
}


/* Main zone styling */
/*#main { margin: 30px 10px 30px 30px; }  /* between header and footer, not including sidebar */

/* Sidebar zone styling - perhaps we should move this to a layout-specific css */
#about {line-height:120%;}
#sidebar,sidebar { line-height:1.3; padding: 10px; color: #eee; background-color: #f1f4f6; min-height: 600px; }
#sidebar h1,sidebar h1 { font-size: 20px; color: #eee; border-bottom: 1px solid #eee; padding-bottom: 2px; padding-top:20px; }
#sidebar h2,sidebar h2 { font-size: 16px; color: #eee; }
#aboutMore {cursor: pointer; text-decoration:none; color:#A8B5C1; }

#subinfo a { margin: 5px; } /* subscription info - for email / rss */

/* panel */
.blueDialog.animate { transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);}
.blueDialog { box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5); border-radius: 10px; position: fixed; z-index: 200; background: #f1f4f6; color: #A8B5C1; max-width: 90%; }
.blueDialog .hd { text-align: left; font-size: 23px; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom: 1px solid #d0d0d0; padding: 2px 15px;
			text-shadow: 0px 2px 3px rgba(0,0,0,.3); background: #eee; color: #f1f4f6; }
.blueDialog .bd { text-align: left; overflow: hidden; padding: 15px; position: relative;}
.blueDialog .bd.noButtons { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.blueDialog .bd.noTitle { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.blueDialog .ft { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background: #A8B5C1; }
.blueDialog .wait { background: url(images/waitingFlower.gif); }
.blueDialog .buttons { height: 50px; line-height: 50px; text-align: right; padding-right: 10px; }
.blueDialog .buttons a { margin: 0 6px; cursor: pointer; padding: 4px 8px; font-size: 18px; line-height: 1em; border-radius: 6px; background: #222 url(bbStatic/images/transWB.png) repeat-x; background-size: 1px 100%; border: 0px solid rgba(0,0,0,.2); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); }
.blueDialog .buttons a.p { color: #f0f0f0; background-color: #2a2; }
.blueDialog .buttons a.n { color: #f0f0f0; background-color: #a22; }
.blueDialog .buttons a:hover { background-image: url(bbStatic/images/transGrad.png); }
.blueDialog .buttons a:active { background-image: url(bbStatic/images/transBW.png); }
/*.blueDialog .buttons a.p:hover { color: #dfbb4f; }
.blueDialog .buttons a.n:hover { color: #dfbb4f; }*/
.blueDialog .blueDialogClose { cursor: pointer; background: url(bbStatic/images/closeDialog.png); width: 46px;
		height: 46px; right: -15px; top: -15px; position: absolute; z-index: 210; }
.blueDialogMask { z-index: 90; width: 0; height: 100%; position: fixed; left: 0; top: 0; background: rgba(0,0,0,.5); }
.blueDialogMask.show { width: 100%; }

.noScroll { overflow: hidden; } /* used to de-activate scrolling on nodes such as HTML when showing dialog boxes */

/* .blueDialog .iconInfo { float: left; width: 50px; height: 50px; padding-right: 20px; position: relative; top: -10px; } */

/* New - button from http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba */
.button
{
	background: #eee url(bbStatic/images/transWB.png) repeat-x;
	background-size: 1px 100%;
	border-radius: 5px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.3);
	color: #111;
	cursor: pointer;
	display: inline-block;
	font-weight: bold;
	line-height: 1;
	-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
	margin: 4px;
	padding: .4em .5em;
	position: relative; /* so that button:active can be top:1px to appear it is moving down - kinda ugly though.. */
	text-align: center;
	text-decoration: none;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.button:hover { box-shadow: 0 0 5px rgba(255,255,255,.5); }
.button:active { background-image: url(bbStatic/images/black15.png); box-shadow: 0 0 5px rgba(255,255,255,.7); }
.button.posigreen { background-color: #2a2; color: #ffffff; }
.button.negared { background-color: #a22; color: #ffffff; }
.button.large { font-size: 110%; }
.button.small { font-size: 90%; }
.button.full { width: 100%; margin: 0; }

/* Used for dialogs that contain an icon */
.blueDialog div.iconDialog { margin: 10px 0 10px 60px; }

.blueDialog .icon
{
	background: #44657f;
	color: white;
	height: 1.2em;
	width: 1.2em;
	border-radius: 1em;
	text-align: center;
	font-weight: bold;
	font-family: serif;
	font-size: 32px;
	box-shadow: 1px 1px 5px rgba(0,0,0,.2);
	text-shadow: 0px 2px 3px rgba(0, 0, 0, .3);
	position: absolute;
	left: 20px;
	top: 20px;
}

.blueDialog .iconWarn { background: #a22; }
.blueDialog .iconQuestion { background: #2a2; }

.displayBox
{
	background-color: #f1f4f6;
	border-radius: 6px;
	margin: 5px auto 10px auto;
	padding: 5px;
}

.yui3-calendar { margin: 6px 0; }

/* used as part of the cssanim function in blue.js - Note, this requires prefixfree library! */
/* Note: was going to include "animation-fill-mode: forwards;" as part of .cssanim class, but that class is removed after animation, so I think its mute */
.cssanim  { animation-duration: 800ms; animation-timing-function: ease-in-out;}
body .fadeIn { animation-name: fadeIn; }
@keyframes fadeIn {from { opacity: 0; } to { opacity: 1; } }
body .fadeOut { animation-name: fadeOut; }
@keyframes fadeOut {from { opacity: 1; } to { opacity: 0; } }