﻿/*

==============( COMMON ELEMENTS and TOOLS )======

*/

body 
{
	position: relative;
	font: normal 10pt Verdana;
	margin: 0;
}
p { margin: 0 0 1em 0; }
img { border: none; }
ul, ol{ list-style-position: outside; margin: 0; padding: 0 1.3em; }


/* define some utility classes */
.hidden { display: none; }
.b { font-weight: bold; }
.blk { display: block; }
.clr { clear: both; height: 0px; overflow: hidden; }

/* misc */
.page.editDate { clear: both; }
body.fragmentPreview { padding: 3px 10px; }
#mainContentAnchor { display: none; }


/* defaults for banner, headlines etc. */
#banner a { text-decoration: none; }

/* headlines: normalize and set defaults */
h1, h2, h3, h4, h5, h6 
{
	font-weight: bold;
	font-size: 100%;
	display: block;
	margin: 0;
}
h1{ font-size: 200%; }
h2{ font-size: 150%; }
h3{ font-size: 120%; }



/*

==============( CONTENT DISPLAY )======

*/

.content
{
	position: relative;
	margin: 1em 1.6em;
	word-wrap: break-word;	/* ie only */
}
.content .contentBody
{
	height: 1% !ie;
	display: block;
	overflow: hidden;
}
.rssIcon
{
	position: relative;
	z-index: 1;
}

/* content titles */
.contentTitle { display: block; font-weight: bold; }

/* linkified content titles, from colector */
a.contentTitle { text-decoration: none; }
a.contentTitle:hover { text-decoration: underline; }

.label { font-weight: bold; }

.field.Html, .field.Textarea { margin-top: 1em; margin-bottom: 1em; }

.field.Html:first-child, .field.Textarea:first-child,
.image:first-child + .field.Html, .image:first-child + .field.Textarea
{ margin-top: 0; }

/* flatten out content within fields, especially for Reflections */
body #allContainer .field .content
{
	margin: 0 0 1em 0;
	text-decoration: none;
}
.content.Reflection
{
	font-size: 90%;
}
.content ul, .content ol
{
	list-style-position: outside;
	padding: 0 2.5em;
	margin: 0.5em 0;
}
/* be even flatter for URL and other content inside linkbuilder boxen */
body #allContainer .field.LinkBuilder .content { margin: 0; }

/* for narrow columns */
.narrow .field.LinkBuilder .label, .narrow .field.LinkBuilder .value
{
	display: block;
	float: none;
	width: auto;
	margin-left: 0;
}


/* LinkBuilder */
.field.LinkBuilder,
.contentFeedback
{
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	overflow: hidden;
	border: 1px dashed #ddd;
	background: #f9f9f9;
	padding:0.5em 0.9em 0.8em;
	height: 1% !ie;
	text-decoration: none;
}
.field.LinkBuilder .value > div,
.contentFeedback .value > div,
.field.LinkBuilder .label
{
	margin-bottom: 1ex;
}
.field.LinkBuilder .value > div:last-child,
.contentFeedback .value > div:last-child
{
	margin-bottom: 0;
}
.field.LinkBuilder .label
{
	float: left;
	width: 35%;
	height: 1% !ie;
}
.field.LinkBuilder .value
{
	float: left;
	width: 62%;
	margin-left: 2%;
	height: 1% !ie;
}
.field.linkBuilder.inlineDetail
{
	margin-top: 1em;
}
.inlineDetailBody
{
	padding: 1em;
	border: 1px dashed #ddd;
}
.inlineContent .inlineDetailSeparator
{
	border: 1px dashed #000;
	opacity: 0.1;
}

.dateRange { font-style: italic; }
.moreLink{ display: block; }
.note
{
	opacity: 0.6;
	font-size: 90%;
	font-style: italic;
}

/* questionnaires */
.cluster, .cluster > .label
{
	background-color: White;
	border-color: #999;
}
.cluster > .label
{
	background-color: White;
	display: block;
}

/* uploaded files */
.fileLink 
{
	font-weight: bold;
	font-size: 120%;
	line-height: 120%;
	text-decoration: none;
}
.fileLinkSpacer { margin: 0 0 1ex 0; }
.fileLink .linkText { text-decoration: underline; }
.fileLink *
{
	vertical-align: middle;
}

/* sidebars */
.sidebar
{
	padding: 0.6em 1em;
}
.sidebar H2
{
	font-size: 100%;
}


/* footer */
#iconRow
{
	text-align: right;
	padding: 1em;
}

#footerLogos a { text-decoration: none; }
#footerLogos img { vertical-align: middle; }


/* URL display */
.URL > a.urlLink
{
	background: url( ../images/world_link.png ) no-repeat left center;
	padding-left: 20px;
	min-height: 16px; /* so the icon never gets cut off */
}

/* BOUNDARIES for all sorts of likely offenders... */
.content object, .content embed, .content table, .content img
{
	max-width: 100%;
}
/* but not this specific instance, for FF2 */
.rssIcon.content.right img
{
	max-width: none;
}

/* babysit IE7 -- a bit dangerous, don't care */
*:first-child+html .column.narrow object
{
	width: 100% !important;
}

/*

==============( IMAGES AND FLOATERS )======

*/
.left{ float: left; }
.right{ float: right; }
.left.image{ margin: 0 1em 1em 0; padding: 0; }
.right.image{ margin: 0 0 1em 1em; padding: 0; }

* HTML .image, * HTML .image img { height: 1%; } /* trigger hasLayout in IE6 so the following works with IE7.js */
.content .image { max-width: 40%; }
* HTML .content .image { width: 40%; } /* IE6 just don't get it */

/* never allow an image to be wider than the box it's in.
   ie7.js is required for this to work in IE6. */
.image img
{
	max-width: 100%;
	display: block;
}

/* fix ie6 */
.gallery img
{
	max-width: none;
}

.image .caption{ font-size: 80%; margin-top: 0.5em; }
.imageLink{ display: block; }
.page .image { margin: 0 2px 2px 0; }




/*

#debugPanel
{
	position: relative;
	padding: 1em;
	background: #000;
	color: White;
}
#debugHide
{
	position: absolute;
	top: 1em; right: 1em;
}
#footerLogos { text-align:center; }
#footerLogos * { vertical-align: middle; border: none; text-decoration: none; }
==============( IMAGES AND FLOATERS )======

*/
div.hidden
{
	display: none;
}
div.gallery { overflow: hidden; }
div.gallery div.pager
{
	overflow: hidden;
	margin: 6px 6px 6px 0;
	clear: both;
}
div.gallery div.pager span
{
	color: #332;
	display: block;
	float: left;
	margin-right: 0 -1px 2px 0;
	padding: 0.3em 0.8em;
	background: #ffe;
	border: solid 1px #ccb;
	cursor: pointer;
}
div.gallery div.pager span.selected, div.gallery div.pager span:hover
{
	color: #ffe;
	background: #777773;
}
div.gallery div.pager .pagerNext
{
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border-radius-topright: 5px;
	border-radius-bottomright: 5px;
	
	margin-right: 4px;
}
div.gallery div.pager .pagerPrevious
{
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	border-radius-topleft: 5px;
	border-radius-bottomleft: 5px;
}

/* Picasa galleries */
.content.PicasaWebAlbums img 
{
	vertical-align: middle;
	margin-right: 2px;
}


/*

==============( NAVIGATION )======

*/

/* nullify default list styling */
ul.nav, ul.nav ul, ul.nav li
{
	display: block;
	list-style: none;
	list-style-type: none;
	list-style-position: outside;
	padding: 0; margin: 0;
}
ul.nav.basic ul, ul.nav.basic li
{
	display: block;
}
ul.nav.flat ul, ul.nav.flat li
{
	display: inline;
}



/*

==============( POPUP FORMS, FOR FEEDBACK AND SUCH )======

*/


.popupFrame input
{
}

.popupFrame
{
	width: 600px;
	position: absolute;
	top: 30px;
	left: 30px;
	z-index: 20000;
	
	color: #333;
	background-color: white;
	
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
}
.popupTitleBar
{
	padding: 0.4em 1em;
	
	background-color: #eee;
	color: black;
	font-weight: bold;
	font-size: 130%;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}
.popupBody
{
	position: relative;
	border: 1px solid aab;
	border-top: none;
}
.popupFrame label { font-weight: bold; }

* HTML .popupFrame { position: absolute !ie; } /* for IE6 */

.popupButtonBar
{
	padding: .5em;
	text-align: right;
	background: #eee;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
}
.popupButtonBar *
{
	vertical-align: middle;
}
.popupButtonBar button
{
	line-height: 130%;
}
.popup select
{
	visibility: visible;
}
.bodyMask
{
	position: absolute;
	z-index: 10000;
	top: 0px;
	left: 0px;
	background-color: black;
	width: 100%;
}
.popupFrame .accordion_toggle
{
	height: 30px;
	line-height: 30px;
	padding: 0 0 0 20px;
	color: #00a;
	font-weight: bold;
	cursor: pointer;
	background: #fff url( ../images/disclosureTriangle_right.png ) no-repeat 4px center;
	position: relative;
	cursor: pointer;
	margin-bottom: 1px;
	text-decoration: underline;
}
.popupFrame .open .accordion_toggle
{
	background-image: url( ../images/disclosureTriangle_down.png );
}
.popupFrame .accordion_toggle:hover
{
	color: #00f;
	background-color: #F0F3FB;
}
.padder
{
	padding: .5em;
}

/* recaptcha area */
.popupFrame #recaptcha_area
{
	padding-left: 15%;
}


/* calendar */
.calendar_date_select
{
	z-index: 40000;
}
.calendarButton
{
	background-image: url(images/calendar.gif);
}



/* questionnaire stuff */
.questionnaireSummary
{
	font-size: 110%;
	font-style: italic;
	margin-bottom: 1ex;
}

/* feedback form */
#feedbackEntry 
{
	margin: 1em;
}

#feedbackEntry_Notes
{
	height: 150px;
}


/*

==============( DEBUG )======

*/
#debugPanel
{
	position: relative;
	padding: 1em;
	background: #000;
	color: #999;
}
#debugPanel a { color: #009; }
#debugPanel a:hover { color: #00b; }
#debugPanel select { opacity: .6; }
#debugExecutionTime, #debugDesignHopper { margin: 0 1em; }
.debug_designGroup{ font-weight: bold; }
.debug_design{ margin-left: 1em; }

#debugHide
{
	position: absolute;
	top: 1em; right: 1em;
}
