@charset "utf-8";
/*	my.ava.org
	Cascading Style Sheet
	Chris Zegelin, copied from www.cva4u.com 2017

	Source code - copyright 2013, 2014, 2017 - Chris Zegelin, all rights reserved

	The site design:
		The site design is based on a fixed window, 970px wide and ??px deep. This
		size renders on the most common display out there, 1024 by 768px, without
		having to scroll the mouse. This size severely limits the available data
		that can be presented on any individual screen, but simplifies the overall
		design. The result is a very clean look that will render correctly on all
		browsers.

		The screen is divided vertically into a 45px header, 40px navigation, variable
		main body, and then a 20px footer. Horizontally, the site is a full 970px wide.
		The natural minimum height of the body is 550px.

		The background color is #5CA3EE, (92, 163, 238). This is a medium blue that
		fills the screen wherever there is no white. White is used as the background
		all active text on the site.

		TABS: Most of the navigation uses tabs. This works very well for mobile
			devices. The setup allows for 4, 5 or 6 tabs on the top. The 970px
			is divided as follows:
					15 - gap to get past rounded corner
					50 - NAV tab added when on a mobile. Gets you to the navigation page
					40 - LEFT ARROW tab is our internal back tab
					860 - Tabs 120, 140, 170 - 7, 6, or 5 tabs
					15 - gap for rounded corner

		CONTENT: The content on a page is in the 970 by 550px area.
			LINES should be 850px wide.
			There is typically a margin of 6px at the top and 10px at the bottom.

		HEADER: This is defined by the '.head' style. The head is always followed by
			an orange line that is 3px high.

		CLICKABLE WIDGETS: These are inline graphics that are clearly clickable objects.
			They are not usually used as 'input' graphics, rather as links. Examples are
			'HERE', 'ADD NEW' etc. These are always 20px high but can be any width to fit
			the text. These may often increase the line width when used inline in a paragraph.
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, code, del, dfn, em,
img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td {
	margin: 0px;
	padding: 0px;
	border-style: none;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* SITE BASIC CSS
	Spans a reasonable page width, but centers it on a given window. The
	background color is a blue. A 14pt font is very readable. Note that we start
	with the mobile, portrait CSS and modify it if we have Landscape. The page
	background is a blue with white elements on it. */
body{
	padding: 0px 10px 10px 10px;
	background-color: #5CA3EE;
}

#scalable-wrapper{
	resize: both;
	position: relative;
	background-color: #5CA3EE;
	cursor:url('/graphics/cursor-arrow.png'), auto;
}

#fixed-design{
	width: 970px;
	position: relative;
	left: 50%;
	transform: translate( -50%, 0px );
	text-align: left;
	font: 14px/100% arial, helvetica, sans-serif;
	line-height: 115%;
	background-color: #5CA3EE;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/************ css for all IE10 and IE11 ****************/
	#fixed-design{
		margin-left: auto;
		margin-right: auto;
		left: 0%;
	}
}

/* Removes decoration around links because it doesn't look good on this site. */
a {
	text-decoration: none;
	cursor:url('/graphics/cursor-hand.png'), auto;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* THE BASICS */
/* All elements with an error state */
.error{
	color: #FF2A2A;
}

.left-float{
	float: left;
}
.right-float{
	float: right;
}

/* Basic alignment for all images and table data */
img{
	vertical-align: middle;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* This is the banner that goes at the top of every page */
#page-banner{
	margin-top: 5px;
	margin-bottom: 5px;
	width: 100%;
	height: 45px;
	background-image: url('/graphics/banner.png'); /* 45px high by 970px wide */
	background-repeat: no-repeat;
	background-position: top;
	vertical-align: top;
}

#banner-name{
	display: none;
	float: left;
	padding-left: 140px;
	height: 45px;
	text-align: left;
}

#banner-right{
	padding-top: 7px;
	padding-right: 20px;
	height: 45px;
	text-align: right;
}

#banner-tabs{
	display: inline;
}

#banner-menu{
	display: none;
	padding-top: 7px;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* These are used for the tabs at the top of the page. Note that the
	'margin-left' is set to a large number. This number is reduced to
	almost nothing when on a mobile platform. */
#nav-tabs{
	display: inline;
	width: 100%;
	height: 40px;
	margin-left: 20px;
}

img.tabs{
	opacity: 0.4;
	filter: alpha(opacity=40); /* For IE8 and earlier */
}

img.tabs-sel{
}

/* This is the side bar navigation. This is just like a model, but it is placed
	on the right side of the window. This is only used for the portrait mode
	navigation.*/

#nav-menu{
	display: none;
	position: absolute;
	z-index: 102;
	top: 82px;
	left: 50%;
	width: 170px;
	height: 500px;
	margin-left: 75px;
	background-image: url('/graphics/widgets/nav.png');
	background-repeat: no-repeat;
	background-position: top;
	vertical-align: top;
	opacity : 1.0;
	filter : alpha(opacity=100);
}
.nav-close{
	z-index: 103;
	margin-top: 20px;
	margin-left: 60px;
	margin-right: 50px;
	border: 3px solid blue;
	border-radius: 5px;
	font-size: 16px;
	color: blue;
	font-weight: bold;
	padding: 4px;
	cursor: url('/graphics/cursor-hand.png'), pointer;
}
.nav-content {
	z-index: 103;
	margin-top: 30px;
	margin-left: 5px;
	cursor: url('/graphics/cursor-hand.png'), pointer;
}
img.navs{
	margin-bottom: 8px;
}
img.navs-sel{
	margin-bottom: 8px;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* This is the main content block for the entire site. It describes the
	background and then how the content fits within that area. */
#page-main{
	width: 100%;
	margin: 0 auto;
	min-height: 420px;
	background-color: white;
	border-radius: 15px;
	overflow: inherit;
}

#page-content{
	display: inline-block;
	width: 960px;
	margin: 8px 5px 12px 5px;
}

/*.page-content-landscape{
	width: 960px;
}

.page-content-portrait{
	width: 480px;
}*/

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* This is the standard footer for the entire site. */
#page-footer{
	margin: 5px 20px 5px 20px;
	padding: 2px 0;
	border: 3px solid #FF2A2A;
	border-width: 3px 0 0 0;
	text-align: left;
	font-size: 10px;
	color: #F8F8F8;
}

/* Links in the footer will be displayed the same as regular text */
#page-footer a:link, #page_footer a:visited, #page_footer a:active, #page_footer a:hover {
	background-color: white;
	border-radius: 3px;
	padding: 2px 5px 2px 5px;
	color: blue;
	text-decoration: none;
}

#page-footer:after{
    content: "";
    display: table;
    clear: both;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* This is the typical header line for the content area. It has text on
	the left and the help button on the right. The basic style is
	a single text line followed by an red line. */

.content-head{
	margin: 0px 15px 4px 15px;
	padding-bottom: 6px;
	border: 3px solid #FF2A2A;
	border-width: 0 0 3px 0;
	text-align: left;
	font-size: 18px;
	font-weight: bold;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* Basic formating options for the content area. */

.column-left{
	width: 450px;
	float: left;
	margin: 0px 15px 2px 15px;
}
.column-right{
	width: 450px;
	float: right;
	margin: 0px 15px 2px 15px;
}
.column-center{
	width: 450px;
	margin: 0 auto;
}
.column-full{
	margin: 15px 30px 15px 30px;
}

.grey-line {
	border: solid #c0c0c0;
	border-width: 3px 0 0 0;
	padding-top: 6px;
	margin-right: 30px;
}

.png-line-space {
	margin-top: 12px;
	margin-bottom: 10px;
}

.hidden {
	visibility: hidden;
}
.no-display {
	display: none;
}

.paragraph {
	text-indent: 15px;
}
.indent {
	margin-left: 15px;
}
.indent2 {
	margin-left: 30px;
}
.indent3 {
	margin-left: 45px;
}

/* This often interferes with the .text alignment */
.centered {
	text-align: center;
}
.center-it {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.middle {
	vertical-align: middle;
}

.text {
	margin-top: 0px;
	margin-bottom: 2px;
	font-weight: bold;
}

.one-line {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.txt-left {
	text-align: left
}

.txt-center {
	text-align: center;
}

.txt-right .align-right {
	text-align: right;
}

.note {
	color: green;
}
.alert {
	color: #ff00C8;
}
.notice {
	color: #cc7a00;
}
.error {
	color: #ff0000;
}
.dull-red {
	color: #800000;
}
.faint-red {
	color: #F0B0B0;
}
.grey {
	color: #595959;
}
.faint-grey {
	color: #B0B0B0;
}
.green {
	color: #29a329;
}

.large {
	font-size: 120%;
}
.small {
	font-size: 85%;
}
.bold {
	font-weight: bold;
}

.bg-grey {
	background-color: #d9d9d9;
}
.grey-banner {
	height: 36px;
	border-style: solid;
	border-width: 4px;
	border-color: #cc7a00;
	border-radius: 10px;
	background-color: #e0e0e0;
	margin-right: 30px;
}
.grey-banner-text {
	margin-top: 0px;
	margin-bottom: 2px;
	margin-left: 15px;
	padding-top: 6px;
	text-align: left;
	font-weight: bold;
	font-size: 120%;
	color: green;
}

.gap {
	margin-top: 4px;
}
.space-above {
	margin-top: 12px;
}
.space-below {
	margin-bottom: 12px;
}
.space-top {
	margin-top: 12px;
}
.space {
	margin-bottom: 12px;
}
.pad-top-6 {
	padding-top: 6px;
}
.pad-top-60 {
	padding-top: 60px;
}
.pad-bottom-6 {
	padding-bottom: 6px;
}
.pad-bottom-60 {
	padding-bottom: 60px;
}

.graphic-line {
	margin-top: 12px;
	margin-bottom: 10px;
}

::-webkit-input-placeholder { /* Edge */
  color: LightPink;
}
::placeholder {
  color: LightPink;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* DYNAMIC CSS FIELDS - These match fields in main-dynamic.css*/

.dynamic-indent {
	margin-left: 15px;		/* to 0px */
}
.dynamic-indent2 {
	margin-left: 30px;		/* to 0px */
}
.dynamic-indent3 {
	margin-left: 45px;		/* to 0px */
}
.dynamic-indent-15 {
	margin-left: 15px;		/* to 80px */
}
.dynamic-indent-0 {
	margin-left: 0px;			/* to 60px */
}
.dynamic-pad-top-6 {
	padding-top: 6px;			/* to 0px */
}
.dynamic-pad-top-12 {
	padding-top: 12px;		/* to 0px */
}
.dynamic-pad-top-30 {
	padding-top: 30px;		/* to 0px */
}
.dynamic-pad-top-60 {
	padding-top: 60px;		/* to 0px */
}
.dynamic-pad-top-120 {
	padding-top: 120px;		/* to 0px */
}
.dynamic-pad-top-add-15 {
	padding-top: 0px;			/* to 15px */
}
.dynamic-td-align {
	width: 1%;					/* to 10% */
}
.dynamic-hide {
	display: inline;			/* to none */
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* SPECIAL TEXT FORMATTING (Background is 1/8 of the boarder color)*/

.in-box-note {
	border-style: solid;
	border-width: 4px;
	border-color: green;
	border-radius: 10px;
	background-color: #E0FFE0;
	padding: 8px
}

.in-box-notice {
	border-style: solid;
	border-width: 4px;
	border-color: #cc7a00;
	border-radius: 10px;
	background-color: #FBEFE0;
	padding: 8px
}

.in-box-alert {
	border-style: solid;
	border-width: 4px;
	border-color: #ff00C8;
	border-radius: 10px;
	background-color: #FFE0FA;
	padding: 8px
}

.bg-grey-box {
	border-style: solid;
	border-width: 0px;
	border-radius: 10px;
	background-color: #DDDDDD;
	padding: 5px
}

.bg-scroll-to-box {
	border-radius: 10px !important;
	background-color: LightPink !important;
	padding: 10px !important;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* INPUT FIELDS AND BUTTONS */

.form-s1 {
	margin-left: 15px;
	max-width: 400px;
	padding: 0px 12px 12px 0px;
	font-weight: bold;
}
.form-s1 li {
	display: block;
	margin: 10px 0 0 0;
	padding: 0;
	list-style: none;
}
.form-s1 label {
	display:block;
	margin:0 0 3px 0;
	padding:0;
	font: 12px Tahoma, Geneva, sans-serif;
	font-weight: bold;
	color: #29a329;
	cursor: url('/graphics/cursor-hand.png'), pointer;
}
.form-s1 label-opt {
	display:block;
	margin:0 0 3px 0;
	padding: 0;
	font-weight: bold;
	color: #929294;
	cursor: url('/graphics/cursor-hand.png'), pointer;
}
.form-s1 label-err {
	display: block;
	margin: 0 0 3px 0;
	padding: 0;
	font-weight: bold;
	color: #FF0000;
	cursor: url('/graphics/cursor-hand.png'), pointer;
	animation: blink-animation 1s steps(5, start) infinite;
   -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation { to { visibility: hidden; } }
@-webkit-keyframes blink-animation { to { visibility: hidden; } }
.form-s1 note {
	padding: 0;
	font-weight: bold;
	font-size: 10px;
	color: green;
}
.form-s1 input[type=text],
.form-s1 input[type=date],
.form-s1 input[type=datetime],
.form-s1 input[type=number],
.form-s1 input[type=search],
.form-s1 input[type=time],
.form-s1 input[type=url],
.form-s1 input[type=email],
.form-s1 input[type=password],
.form-s1 input[type=file],
textarea,
select {
	margin:0px;
	padding: 5px 3px 3px 5px;
	font: 14px Verdana, Geneva, sans-serif;
	font-weight: bold;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border-width: 3px 1px 1px 3px;
	border-style: solid;
	border-color: #c0c0c0;
	border-radius: .5em;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;
}
.form-s1 textarea {
	font: 14px Arial, Helvetica, sans-serif;
	font-weight: bold;
}
.form-s1 input[type=text]:focus,
.form-s1 input[type=date]:focus,
.form-s1 input[type=datetime]:focus,
.form-s1 input[type=number]:focus,
.form-s1 input[type=search]:focus,
.form-s1 input[type=time]:focus,
.form-s1 input[type=url]:focus,
.form-s1 input[type=email]:focus,
.form-s1 input[type=password]:focus,
.form-s1 input[type=file]:focus,
.form-s1 textarea:focus,
.form-s1 select:focus {
	-moz-box-shadow: 0 0 8px #88D5E9;
	-webkit-box-shadow: 0 0 8px #88D5E9;
	box-shadow: 0 0 8px #88D5E9;
	border-width: 3px 1px 1px 3px;
	border-style: solid;
	border-color: #88D5E9;
}
.form-s1 .field-divided {
    width: 49%;
}
.form-s1 .field-short {
    width: 25%;
}
.form-s1 .field-two {
    width: 40%;
}
.form-s1 .field-medium {
    width: 83%;				/* Matches width of standard text area */
}
.form-s1 .field-long {
    width: 100%;
}
.form-s1 .field-select {
    width: 100%;
}
.form-s1 .field-textarea {
    height: 100px;
}
.form-s1 input[type=submit], .form-s1 input[type=button] {
	margin-top: 3px;
	cursor: url('/graphics/cursor-hand.png'), pointer;
	overflow: visible;				/* ie6/7 width fix */
	width: auto;						/* ie6/7 width fix */
	padding: .15em .6em .15em;		/* proportional to font */
	color: #0000FF;					/* blue letters */
	background: #90F0FF;				/* blue background */
	border: 2px solid #A0A0A0;		/* grey boarder */
	text-align: center;
	text-decoration: none;
	font-size: 15px;
	font-weight: bold;
	-webkit-border-radius: .5em;
	border-radius: .5em;
	outline: none;
}
.form-s1 input[type=submit]:hover, .form-s1 input[type=button]:hover {
 	border: 2px solid #0000FF;		/* blue boarder */
}
.form-s1 .required {
    color:red;
}

/* Basic submit button with no extras. */
.submit-s1, .submit-s2, .submit-s3, .submit-s4{
	cursor: url('/graphics/cursor-hand.png'), pointer;
	overflow: visible;				/* ie6/7 width fix */
	width: auto;						/* ie6/7 width fix */
	padding: .15em .6em .15em;		/* proportional to font */
	color: #0000FF;					/* blue letters */
	background: #90F0FF;				/* blue background */
	border: 2px solid #A0A0A0;		/* grey boarder */
	text-align: center;
	text-decoration: none;
	font-size: 15px;
	font-weight: bold;
	-webkit-border-radius: .5em;
	border-radius: .5em;
	outline: none;
}
.submit-s1:hover {
 	border: 2px solid #0000FF;		/* blue boarder */
}

/* Basic SMALL submit button with no extras. */
.submit-s2 {
	font-size: 12px;
	font-weight: bold;
}
.submit-s2:hover {
 	border: 2px solid #0000FF;		/* blue boarder */
}

/* Basic GREY submit button with no extras. */
.submit-s3 {
	color: #000000;					/* black letters */
	background: #909090;				/* grey background */
	border: 2px solid #A0A0A0;		/* grey boarder */
}
.submit-s3:hover {
 	border: 2px solid #0000FF;		/* blue boarder */
}

/* Basic LARGE submit button with no extras. */
.submit-s4 {
	font-size: 22px;
	font-weight: bold;
}
.submit-s4:hover {
 	border: 2px solid #0000FF;		/* blue boarder */
}

/* Style the checkbox so that it is much easier to touch on a mobile device */
.checkbox {
	display: block;
	position: relative;
	padding-left: 30px;
	padding-top: 4px;
	margin-bottom: 6px;
	cursor: url('/graphics/cursor-hand.png'), pointer;
	font-weight: bold;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox input {
	position: absolute;
	opacity: 0;
	cursor: url('/graphics/cursor-hand.png'), pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #D0FFFF;
	-webkit-border-radius: .3em;
	border-radius: .3em;
	outline: none;
	border: 2px solid #A0A0A0;		/* grey boarder */
}

/* On mouse-over, add a grey background color */
.checkbox:hover input ~ .checkmark {
	background-color: #80FFFF;
}

/* When the checkbox is checked, add a blue background */
.checkbox input:checked ~ .checkmark {
	background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.checkbox .checkmark:after {
	left: 7px;
	top: 3px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.checkbox label {
	color: #29a329;
}

/* Style the radio button so that it is much easier to touch on a mobile device */
.radio-button {
    display: block;
    position: relative;
    padding-top: 2px;
    padding-left: 30px;
    margin-bottom: 12px;
    cursor: url('/graphics/cursor-hand.png'), pointer;
    font-weight: bold;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}

/* Hide the browser's default radio button */
.radio-button input {
    position: absolute;
    opacity: 0;
    cursor: url('/graphics/cursor-hand.png'), pointer;
}

/* Create a custom radio button */
.radio-button-mark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #CEC77C;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio-button:hover input ~ .radio-button-mark {
    background-color: #D2B22B;
}

/* When the radio button is checked, add a blue background */
.radio-button input:checked ~ .radio-button-mark {
    background-color: #2292F2;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-button-mark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-button input:checked ~ .radio-button-mark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio-button .radio-button-mark:after {
 	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

/* The participation form input boxes */
.form-p {
	margin-left: 15px;
	padding: 0px 0px 0px 0px;
}
.form-p li {
	display: block;
	margin: 0px 0 0 0;
	padding: 0;
	list-style: none;
}
.form-p label {
	padding: 0;
	font-weight: bold;
	font-size: 80%;
	color: green;
}
.form-p label-err {
	padding: 0;
	font-weight: bold;
	font-size: 80%;
	color: red;
}
.form-p input[type=text] {
	margin:0px;
	padding: 5px 3px 3px 5px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border-width: 3px 1px 1px 3px;
	border-style: solid;
	border-color: #c0c0c0;
	border-radius: .5em;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;
}
.form-p input[type=text]:focus {
	-moz-box-shadow: 0 0 8px #88D5E9;
	-webkit-box-shadow: 0 0 8px #88D5E9;
	box-shadow: 0 0 8px #88D5E9;
	border-width: 3px 1px 1px 3px;
	border-style: solid;
	border-color: #88D5E9;
}
.form-p .field-80 {
    width: 80%;
}

/* ----------------------------------------------------------------------------
HTML for the basic form input

<ul class="form-s1">
    <li><label>Full Name <span class="required">*</span></label><input type="text" name="field1" class="field-divided" placeholder="First" />&nbsp;<input type="text" name="field2" class="field-divided" placeholder="Last" /></li>
    <li>
        <label>Email <span class="required">*</span></label>
        <input type="email" name="field3" class="field-long" />
    </li>
    <li>
        <label>Subject</label>
        <select name="field4" class="field-select">
        <option value="Advertise">Advertise</option>
        <option value="Partnership">Partnership</option>
        <option value="General Question">General</option>
        </select>
    </li>
    <li>
        <label>Your Message <span class="required">*</span></label>
        <textarea name="field5" id="field5" class="field-long field-textarea"></textarea>
    </li>
    <li>
        <input type="submit" value="Submit" />
    </li>
</ul>
*/

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* LOADING SPINNER - This produces a 'spinner' when waiting for the page to
	load. Typically used on the login page.*/

.spinner {
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid blue;
  border-bottom: 6px solid blue;
  width: 20px;
  height: 20px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* HOVER POPUP - This produces a fixed width text box when you mouse
	over the item. It is used to add additional information about an item.*/
.hover-popup {
	position: relative;
	display: inline-block;
}
.hover-popup .hover-popup-text {
	visibility: hidden;
	width: 180px;
	background-color: #D0D0FF;
	color: purple;
	text-align: left;
	padding: 7px 7px 7px 7px;
	font-weight: bold;
	border-radius: 6px;
	z-index: 1;
	position: absolute;
	top: -5px;
	left: 60%;
	opacity: 0;
	transition: opacity 0.7s;
}
.hover-popup .hover-popup-text br {
	line-height: 150%;
}
.hover-popup .hover-popup-text::after {
	content: "";
	position: absolute;
	top: 14px;
	right: 100%;
	margin-top: -7px;
	border-width: 7px;
	border-style: solid;
	border-color: transparent #D0D0FF transparent transparent;
}
.hover-popup:hover .hover-popup-text {
	visibility: visible;
	opacity: 1;
}

.hover-popup-bottom {
	position: relative;
	display: inline-block;
}
.hover-popup-bottom .hover-popup-bottom-text {
	visibility: hidden;
	width: 200px;
	background-color: #D0D0FF;
	color: purple;
	text-align: left;
	padding: 7px 7px 7px 7px;
	font-weight: bold;
	border-radius: 6px;
	z-index: 1;
	position: absolute;
	top: 120%;
	left: 50%;
	margin-left: -100px;
	opacity: 0;
	transition: opacity 0.7s;
}
.hover-popup-bottom .hover-popup-bottom-text br {
	line-height: 150%;
}
.hover-popup-bottom .hover-popup-bottom-text::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -7px;
	border-width: 7px;
	border-style: solid;
	border-color: transparent transparent #D0D0FF transparent;
}
.hover-popup-bottom:hover .hover-popup-bottom-text {
	visibility: visible;
	opacity: 1;
}

.hover-popup-left {
	position: relative;
	display: inline-block;
}
.hover-popup-left .hover-popup-left-text {
	visibility: hidden;
	width: 280px;
	background-color: #D0D0FF;
	color: purple;
	text-align: left;
	padding: 7px 7px 7px 7px;
	font-weight: bold;
	border-radius: 6px;
	z-index: 1;
	position: absolute;
	top: 100%;
	left: 100%;
	margin-left: -355px;
	margin-top: -23px;
	opacity: 0;
	transition: opacity 0.4s;
}
.hover-popup-left .hover-popup-left-text br {
	line-height: 150%;
}
.hover-popup-left:hover .hover-popup-left-text {
	visibility: visible;
	opacity: 1;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* DIALOG POPUP - This is used to indicate all errors and information where
	the user needs to take action. This is a modal type box that drops down from
	the top of the screen. Typically it just has a dismissal button.
		dialog:		regular dialog boxes.
		sbs:			step by step
		cookie:
		timeout: 	session timeout
		confirm:		confirm dialog box
		alert:		alert dialog box      */

#dialog-background, #sbs-background, #cookie-background, #timeout-background, #confirm-background, #alert-background {
	position : fixed;
	z-index : 101;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	background : #E0E0E0;
	opacity : 0.6;
	filter : alpha(opacity=60);
}
#dialog-popup, #sbs-popup, #cookie-popup, #timeout-popup, #confirm-popup, #alert-popup {
	position: absolute;
	z-index: 102;
	top: 300px;
	left: 50%;
	width: 400px;
	min-height: 160px;
	margin-top: -260px;
	margin-left: -205px;
	background-color: #D0D0FF;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-box-shadow: 0 0 10px rgba(0,0,0,.4);
	padding: 5px;
}
#alert-popup {
	z-index: 108;
}
#cookie-popup {
	z-index: 107;
}
#timeout-popup {
	z-index: 106;
}
#dialog-popup {
	z-index: 105;
}
#confirm-popup{
	position: absolute;
	z-index: 108;
	top: 0px;
	left: 50%;
	width: 400px;
	min-height: 160px;
	margin-top: 0px;
	margin-left: -205px;
	background-color: #D0D0FF;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-box-shadow: 0 0 10px rgba(0,0,0,.4);
	padding: 5px;
}
.dialog-body {
	z-index: 104;
	margin-top: 10px;
	margin-left: 10px;
}
.dialog-text, .confirm-text, .confirm-item, .alert-text {
	z-index: 104;
	margin-top: 15px;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 18px;
	line-height: 1.3;
	color: black;
}
.dialog-text-err {
	z-index: 104;
	margin-top: 15px;
	margin-left: 30px;
	margin-right: 20px;
	font-size: 18px;
	line-height: 1.3;
	color: red;
}
.dialog-close {
	cursor: url('/graphics/cursor-hand.png'), pointer;
	z-index: 104;
	margin-top: 7px;
	margin-left: 260px;
	margin-right: 40px;
	overflow: visible;				/* ie6/7 width fix */
	width: auto;						/* ie6/7 width fix */
	font-size: 22px;
	font-weight: bold;
	padding: .2em 0em .2em;			/* proportional to font */
	color: #FF0000;					/* red letters */
	background: #D5AFDC;				/* red background */
	border: 2px solid #9E1010;		/* greyish boarder */
	text-align: center;
	text-decoration: none;
	-webkit-border-radius: .5em;
	border-radius: .5em;
	outline: none;
}
.dialog-close:hover {
 	border: 2px solid #0000FF;		/* blue boarder */
}

.confirm-text, .confirm-item {
	text-align: center;
}
.confirm-item {
	color: #cc7a00;
}
.confirm-true, .confirm-false, .alert-close {
	cursor: url('/graphics/cursor-hand.png'), pointer;
	z-index: 104;
	margin-top: 7px;
	margin-bottom: 10px;
	overflow: visible;				/* ie6/7 width fix */
	width: auto;						/* ie6/7 width fix */
	font-size: 22px;
	font-weight: bold;
	padding: .1em 0.3em .1em;		/* proportional to font */
	border: 2px solid #9E1010;		/* greyish boarder */
	text-align: center;
	text-decoration: none;
	-webkit-border-radius: .5em;
	border-radius: .5em;
	outline: none;
}
.confirm-true:hover, .confirm-false:hover, .alert-close:hover {
 	border: 2px solid #0000FF;		/* blue boarder */
}
.confirm-true, .alert-close {
	color: #228800;					/* green letters */
	background: #88FBC9;				/* green background */
}
.confirm-true {
	margin-left: 60px;
}
.confirm-false {
	color: #FF0000;					/* red letters */
	background: #D5AFDC;				/* red background */
	float: right;
	margin-right: 60px;
}
.alert-close {
	margin-left: 260px;
	margin-right: 40px;
}

.timeout-close {
	cursor: url('/graphics/cursor-hand.png'), pointer;
	z-index: 104;
	margin-top: 7px;
	margin-left: 100px;
	margin-right: 100px;
	overflow: visible;				/* ie6/7 width fix */
	width: auto;						/* ie6/7 width fix */
	font-size: 22px;
	font-weight: bold;
	padding: .2em 0em .4em;			/* proportional to font */
	color: #FF0000;					/* red letters */
	background: #D5AFDC;				/* red background */
	border: 2px solid #9E1010;		/* greyish boarder */
	text-align: center;
	text-decoration: none;
	-webkit-border-radius: .5em;
	border-radius: .5em;
	outline: none;
}
.timeout-close:hover {
 	border: 2px solid #0000FF;		/* blue boarder */
}


/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* HELP POPUP - This is used to show a big screen worth of help information.
	This is a simple overlay that provides help information for the page. */
#help-popup, #osb-help-popup, #stamp-history-popup, #history-popup, #action-popup {
	display: none;
	position: absolute;
	width: 800px;
	top: 97px;
	margin-left: -400px;
	z-index: 102;
	left: 50%;
	min-height: 160px;
	background-color: white;
	border: 3px solid grey;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-box-shadow: 0 0 10px rgba(0,0,0,.4);
	opacity : 1.0;
	filter : alpha(opacity=100);
	overflow: auto;
}
.msg-popup {
	position: absolute;
	width: 470px;
	top: 97px;
	margin-left: -400px;
	z-index: 102;
	left: 50%;
	min-height: 160px;
	background-color: white;
	border: 3px solid grey;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-box-shadow: 0 0 10px rgba(0,0,0,.4);
	opacity : 1.0;
	filter : alpha(opacity=100);
	overflow: auto;
}
.msg-body {
	z-index: 103;
	margin: 10px;
	margin-bottom: 15px;
}
.msg-content {
	z-index: 103;
	margin-left: 15px;
	margin-right: 5px;
}
.hlp-popup {
	display: none;
	position: absolute;
	width: 800px;
	top: 97px;
	margin-left: -400px;
	z-index: 102;
	left: 50%;
	min-height: 160px;
	background-color: white;
	border: 3px solid grey;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-box-shadow: 0 0 10px rgba(0,0,0,.4);
	opacity : 1.0;
	filter : alpha(opacity=100);
	overflow: auto;
}
.help-body {
	z-index: 103;
	margin: 10px;
	margin-bottom: 15px;
}
.help-content {
	z-index: 103;
	margin-left: 15px;
	margin-right: 5px;
}
.help-head {
	z-index: 103;
	margin-bottom: 12px;
	padding-bottom: 4px;
	border: 3px solid #FF2A2A;
	border-width: 0 0 3px 0;
	text-align: left;
	font-size: 18px;
	font-weight: bold;
}
.help-section {
	z-index: 103;
	padding-bottom: 4px;
	font-weight: bold;
	color: #CC7A00;
}
.help-paragraph {
	z-index: 103;
	padding-bottom: 4px;
	text-indent: 15px;
	font-weight: bold;
}
.help-close {
	z-index: 103;
	margin-top: 12px;
	border: 3px solid blue;
	border-radius: 5px;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: blue;
	padding: 1px 6px 1px 6px;
	cursor: url('/graphics/cursor-hand.png'), pointer;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* TOOLTIP POPUP - This is used to show a tiny popup on a button. */
.tooltip:after {
	background: rgba(235,235,235,0.7);
	color: #000;
	content: attr(rel);
	display: block;
	margin-top: -25px;
	margin-left: -70px;
	position: absolute;
	white-space: nowrap;
	padding: 5px;
	opacity: 0;
	-webkit-transition: opacity 1s ease 2s;
	-moz-transition: opacity 1s ease 2s;
}
.tooltip:hover:after {
	opacity: 1;
	-webkit-transition: opacity 1s ease 300ms;
	-moz-transition: opacity 1s ease 300ms;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* This is the CSS for a drop down selection menu (www.dynamicdrive.com). */

/*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
.selectedanchor{
	background: yellow;
}

/* ######### Default class for drop down menus ######### */

.anylinkmenu{
	position: absolute;
	left: 0px;
	top: 10px;
	visibility: hidden;
	border: 1px solid black;
	border-bottom-width: 0;
	font-size: 22px;
	font-weight: bold;
	line-height: 30px;
	z-index: 100; /* zIndex should be greater than that of shadow's below */
	background: lightyellow;
	width: 200px; /* default width for menu */
}

.anylinkmenu ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.anylinkmenu ul li a{
	width: 100%;
	display: block;
	text-indent: 3px;
	border-bottom: 1px solid black;
	padding: 2px 0px;
	text-decoration: none;
	font-weight: bold;
	text-indent: 5px;
}

.anylinkmenu a:hover{ /*hover background color*/
	background: black;
	color: white;
}

/* ######### class for shadow DIV ######### */

.anylinkshadow{ /*CSS for shadow. Keep this as is */
	position: absolute;
	left: 0px;
	top: 10px;
	z-index: 99; /*zIndex for shadow*/
	background: black;
	visibility: hidden;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* The slide show */

* {box-sizing:border-box}

/* Slideshow container */
.mySlides-container{
  max-width: 350px;
  position: relative;
  margin: auto;
  margin-top: 12px;
}

/* Hide the images by default */
.mySlides{
  display: none;
}

/* Next & previous buttons */
.mySlides-prev, .mySlides-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #ff00C8;
  font-size: 40px;
  font-weight: bold;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.mySlides-next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.mySlides-prev:hover, .mySlides-next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.mySlides-text {
  color: #ff00C8;
  font-size: 18px;
  font-weight: bold;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.mySlides-numbertext {
  color: #ff00C8;
  font-size: 18px;
  font-weight: bold;
  padding: 8px 30px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.mySlides-dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.mySlides-active, .mySlides-dot:hover {
  background-color: #717171;
}

/* Fading animation */
.mySlides-fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes mySlides-fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes mySlides-fade {
  from {opacity: .4}
  to {opacity: 1}
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* Basic table styles */
table.basic {
	border-style: none;
	border-collapse: collapse;
}
table.full-width {
	width: 100%;
	border-style: none;
	border-collapse: collapse;
}
table.full-column {
	width: 430px;
	border-style: none;
	border-collapse: collapse;
}
.td-align {
	width: 1%;
}
td.p5 {
	width: 20%;
	vertical-align: middle;
}
td.p5r {
	width: 20%;
	vertical-align: bottom;
	text-align: right;
	font-weight: bold;
}

td.list2c {
	width: 50%;
	vertical-align: middle;
}

td.item{
	padding-top:4px;
	padding-right:4px;
	padding-bottom:4px;
	text-align: right;
	font-size: 14px;
	font-weight: normal;
	color: #585858;
}

td.item_req{
	padding-top:4px;
	padding-right:4px;
	padding-bottom:4px;
	text-align: right;
	font-size: 14px;
	font-weight: bold;
	color: #585858;
}

td.item_err{
	padding-top:4px;
	padding-right:4px;
	padding-bottom:4px;
	text-align: right;
	font-size: 14px;
	font-weight: bold;
	color: #FF0000;
}

td.data{
	padding-top:5px;
	padding-left:7px;
	padding-bottom:5px;
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	color: black;
}

td.data_center{
	padding-top:5px;
	padding-left:7px;
	padding-bottom:5px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: black;
}

td.txt{
	padding-top:5px;
	padding-left:7px;
	padding-bottom:5px;
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	color: black;
}

td.ibox{
	padding-top:8px;
	padding-left:7px;
	padding-bottom:8px;
	text-align: left;
}

td.ibox_t{
	padding-top:12px;
	padding-left:7px;
	padding-bottom:12px;
	text-align: left;
}

td.note{
	padding-top:5px;
	padding-left:7px;
	padding-bottom:5px;
	text-align: left;
	font-size: 10px;
	font-weight: normal;
	color: green;
}

td.pic{
	padding-top:5px;
	padding-left:10px;
	padding-bottom:5px;
	padding-right:10px;
	text-align:center;
	font-size:16px;
	font-weight:normal;
}

td.date{
	text-align:right;
	font-size:15px;
	font-weight:bold;
}

td.activity{
	text-align:left;
	font-size:100%;
	font-weight:normal;
}

td.list0 {
	width: 33%;
	padding: 4px;
	text-align: left;
}
td.list1 {
	width: 33%;
	padding: 4px;
	border-width: 2px;
	border-left-style: solid;
	border-color: green;
	text-align: left;
}

td.list2c0 {
	width: 50%;
	padding-top:4px;
	padding-right:4px;
	padding-bottom:4px;
	vertical-align: top;
	text-align: left;
	font-size: 14px;
	color: purple;
}

td.list2c1 {
	width: 50%;
	border-width: 2px;
	border-left-style: solid;
	border-color: green;
	padding: 4px;
	vertical-align: top;
	text-align: left;
	font-size: 14px;
	color: purple;
}

td.list2cXnb {
	width: 50%;
	padding: 4px;
	vertical-align: top;
	text-align: left;
	font-size: 14px;
	color: purple;
}

td.list3c0 {
	width: 33%;
	padding-top:4px;
	padding-right:4px;
	padding-bottom:4px;
	vertical-align: top;
	text-align: left;
	font-size: 14px;
	color: purple;
}

td.list3c1 {
	width: 33%;
	padding: 4px;
	border-width: 2px;
	border-left-style: solid;
	border-color: green;
	vertical-align: top;
	text-align: left;
	font-size: 14px;
	color: purple;
}

td.list3cXnb {
	width: 33%;
	padding: 4px;
	vertical-align: top;
	text-align: left;
	font-size: 14px;
	color: purple;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* Formatting for the event lists. */

.evlist-table{
	width: 435px;
	border-style: none;
	border-collapse: collapse;
	border-spacing: 0px;
}
.evlist-link{
	width: 70px;
}
.evlist-date{
	padding-top: 5px;
}
.evlist-title{
	white-space: nowrap;
	width: 280px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.evlist-name{
	padding-left:15px;
	white-space: nowrap;
	width: 280px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.evlist-info .evlist-action{
	margin-right: 20px;
	float: right;
}
.evlist-line{
	margin-left: 15px;
	margin-right: 15px;
	margin-top: 8px;
	margin-bottom: 8px;
	border-style: none;
	border-bottom-style: solid;
	border-color: ".GREY_COLOR.";
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* Additional formating options for the content area. */

.column-2{
	float: left;
	width: 50%;
}

.column-3{
	float: left;
	width: 33.33%;
}

.columns:after{
    content: "";
    display: table;
    clear: both;
}

/* Typical page sub-headings. The sub headings are changed depending on the state
	of the page. This is where entry error messages are displayed as well as basic
	page instructions. Javascript is often applied to dynamically change the content.*/

p.sub_head{
	margin-left:15px;
	margin-top:6px;
	margin-bottom:6px;
	text-align:left;
	font-weight:bold;
}

p.sub_head_hidden{
	visibility:hidden;
	margin-left:15px;
	margin-top:6px;
	margin-bottom:6px;
	text-align:left;
	font-weight:bold;
}

p.sub_head_alert{
	margin-left:15px;
	margin-top:6px;
	margin-bottom:6px;
	text-align:left;
	font-weight:bold;
	color:#ff00C8;
}

p.sub_head_err{
	margin-left:15px;
	margin-top:6px;
	margin-bottom:6px;
	text-align:left;
	font-weight:bold;
	color:#ff0000;
}

p.sub_head_blank{
	margin-left:15px;
	margin-top:6px;
	margin-bottom:6px;
	text-align:left;
	font-weight:bold;
	color:#ccffaa;
}

p.sub_head_big{
	margin-left:15px;
	margin-top:6px;
	margin-bottom:6px;
	text-align:left;
	font-size:16px;
	font-weight:bold;
}

p.sub_head_big_err{
	margin-left:15px;
	margin-top:6px;
	margin-bottom:6px;
	text-align:left;
	font-size:16px;
	font-weight:bold;
	color:#ff0000;
}

p.sub_head_error{
	margin-top:8px;
	height: 20px;
	margin-bottom:8px;
	text-align:left;
	font-size:16px;
	font-weight:bold;
	color:#ff0000;
}

p.sub_head_error_big{
	margin-top:8px;
	margin-bottom:8px;
	text-align:left;
	font-size:16px;
	font-weight:bold;
	color:#ff0000;
}

p.sub_head_indent{
	margin-top:8px;
	height: 20px;
	margin-bottom:8px;
	text-align:left;
	text-indent:40px;
	font-size:16px;
	font-weight:bold;
}

.top10{
	margin-top:10px;
}

.top15{
	margin-top:15px;
}

/* Typical page text options */
p.text_normal{
	margin-top:8px;
	margin-bottom:8px;
	font-size:14px;
	text-align:left;
	text-indent:10px;
}

p.text_bold{
	margin-top:8px;
	margin-bottom:8px;
	font-size:14px;
	font-weight:bold;
	text-align:left;
	text-indent:10px;
}

p.text_error{
	margin-top:8px;
	margin-bottom:8px;
	font-size:14px;
	font-weight:bold;
	text-align:left;
	text-indent:10px;
	color:#ff0000;
}

p.text_small{
	margin-top:8px;
	margin-bottom:8px;
	font-size:10px;
	text-align:left;
	text-indent:10px;
}

p.list{
	font-size:14px;
	text-align:left;
	text-indent:70px;
}

span.color_hl{
	color: #FF00CC;
}

span.color_purple{
	color: #9900FF;
}

span.color_red{
	color: #FF0000;
}

span.color_grey{
	color: #585858;
}

span.color_green{
	color: green;
}

ul.text_small{
	margin-top:10px;
	margin-bottom:10px;
	margin-left:100px;
	margin-right:60px;
	font-size:10px;
	text-align:left;
	text-indent:10px;
}

.box{
	font-size:14px;
	text-align:left;
	color: #585858;
	border:1px solid #ccc;
}

.small_green{
	font-size: 10px;
	color: green;
}

.medium_green{
	font-size: 14px;
	color: green;
}

.medium_grey{
	font-size: 14px;
	font-weight: normal;
	color: #585858;
}

.view_top{
	height:30px;
	text-align:center;
	margin-left:5%;
}

.view_title{
	height:45px;
	text-align:center;
	margin-left:10%;
}

.view_foot{
	height:15px;
	font-size:10px;
	color:#929294;
}