/*	Basic design parameters for style sheets
	Form Background color = #1e1e1e (nearly black)
	Text color = #e9eafd (cool white)
	Heading Text color = #d4bf78 (gold)
	Error Text Color = #ff00000 (Bright Red)
	Lines and border color = #4383c4 (medium blue)
	Image frame color: #171718; (nearly black)

	Background for a highlighted row = #4383c4 (medium blue)
	Link and active link color = #a1b7fc (blue, a bit lighter than border)
	Visited link color = #bacafd (unsaturated link color)
	Hover over link color = #fbfdc5 (pale yellow)
	Header row color = #336597 (medimum dark blue)
	Footer row color = #618cb8 (lightest blue)
	Selected row color = #4383c4 (bright blue)

	Additional colors may be used on the Skin.
	Review Images that may need revision for different color schemes.
*/

html, body, div, p, h1, h2, h3, h4, h5, h6, blockquote, form, fieldset, dl
{
	margin: 0;
	padding: 0;
	border: 0;
}

a, img
{
	margin: 0;
	padding: 0;
}

/* 'Jello Mold' page construction technique based on http://www.positioniseverything.net/articles/jello.html */
body 
{
	/* font:dialog text; */
    font-family:Verdana, Tahoma, Arial, Helvetica, Segoe UI, Sans-Serif;
    font-size:small;
    color:#e9eafd;
    margin: 0;
    padding: 0;
	text-align: left;
	background-color:#1e1e1e;
}

/*	This border style can be used wherever a thin line border is needed. */
.BorderThin
{
	border-style:solid;  
	border-width:1px;
    border-color:#4383c4;  	
}

/*Typographic styles adapted from http://www.thenoodleincident.com/tutorials/typography/ */
h1 
{
	color:#d4bf78;
	margin:0.5em 0;
	font-size: 1.7em;
	font-weight:bold;
}
h2 {
	color:#d4bf78;
	margin: 0.5em 0;
	font-size: 1.5em;
	font-weight: bold;
}
h3 {
	color:#d4bf78;
	margin: 0.5em 0;
	font-size: 1.4em;
	font-weight: bold;
}
h4 {
	color:#d4bf78;
	margin: 0.5em 0;
	font-size: 1.2em;
	font-weight: bold;
}
h5 {
	margin: 0.5em 0;
	font-size: 1.0em;
	font-weight: bold;
}
h6 {
	margin: 0.5em 0;
	font-size: 0.8em;
	font-weight: bold;
}

/*	The special h6 headings are overridden to provide heading-like text when
	and actual heading is not desired. This is expecially true in the Master Page.
	We want a h1 heading of the body portion of the page, not on the Master. */
h6#MasterHead1
{
	color: #d4bf78;
	margin: 0;
	font-size: 1.7em;
	font-weight: bold;
	font-style: italic;
}

h6#MasterHead2 {
	color:#d4bf78;
	font-size: medium;
	font-weight: normal;
	font-style:italic;
}

p  {
    margin: 1em 0;
    line-height:1.2;
}

A:link      { color: #a1b7fc; text-decoration:none; }
A:visited 	{ color: #bacafd; text-decoration:none; }
A:active 	{ color: #a1b7fc; text-decoration:none; }
/* A:hover 	{ color: #fbfdc5; text-decoration:underline; } */
A:hover 	{ color: #fbfdc5; text-decoration:none; }

/* The ImportantLink class will boldface the link */		
A.ImportantLink    {font-weight:bold; }

h1 a:link, h1 a:visited
{
    text-decoration: none;
	color:#d4bf78;
}

h6 a:link, h6 a:visited
{
    text-decoration: none;
	color:#d4bf78;
}

hr 
{
	color:#4383c4;
	border:0;
	border-top-style:solid;
	border-top-width:2px;
} 

/*	hr.double will create a double line. Using Style of double does not seem to work. */
hr.double
{
	color:#1e1e1e;
	border-top: 1px solid #4383c4;
	border-bottom: 1px solid #4383c4;
	height:3px;		
}

ul.bullets
{
	list-style-image: url(Images/Bullet.png);
	list-style-position: outside;
	list-style-type: disc;
}

dt  {
	margin: 1em 0 0 0;
	font-weight: bold;
}

/*	The div classes were an attempt to position items and overlay them on the master page. 
	This did not work well, as the div tags did not know how big the page would be. */	
/*
div#ContainerLeft
{	
	position:absolute; left:0px; width:64px;
	background-image:url(Images/Gradient_Left.png);
	background-repeat:repeat-y;
	}
	
div#ContainerRight
{
	position:absolute; right:100%; width:64px;
	background-image:url(Images/Gradient_Right.png);
	background-repeat:repeat-y;
	}
	
div#ContainerTop
{	
	position:absolute; 
	Height:64px;
	background-image:url(Images/Gradient_Top.png);
	background-repeat:repeat-x;
	z-index:1;
	}
	
div#ContainerBottom
{	
	position:absolute; bottom:100%;
	height:64px;  
	font-size:x-small;
	vertical-align:text-bottom; 
	text-align:center;
	background-image:url(Images/Gradient_Bottom.png);
	background-repeat:repeat-x;
	z-index:1;
	}

div#ContainerBody 
{
	position:absolute; width:80%; 
	z-index:2; 
	top:30px; 
	left:10%}	
*/

/************************************************************************
*	Tables
************************************************************************/

/* We set the border color for tables, but we do not set a border width.
	If a border is specified it will get the correct color. */
table
{
	border-color:#4383c4;
}

/*	Grid is used to create a table with gridlines, similar to a GridView.
	Use RowAlternate or RowSelected for headings for rows to highlight. */
.TableGrid
{
	background-color: transparent;
	background-image: url(Images/GridBackground.png);
	background-repeat: repeat;
	border-color: #4383c4;   
	border-right: #4383c4 1px solid;
	border-top: #4383c4 1px solid;
	border-left: #4383c4 1px solid;
	border-bottom: #4383c4 1px solid; 
	margin-top: 0.5em;
	margin-bottom: 0.5em; 
}

/*	TableLeftGrid is used on a column in a table to draw a gridline on the left edge. */
.TableGridLeft
{
	border-left: #4383c4 1px solid;
}
/*	TableLeftTop is used on a column in a table to draw a gridline on the 
	top edge of a row or cell. */
.BorderTop
{
	 border-top: #4383c4 1px solid;
}

/*	For a tight crop on a table consider using .HightlightedPanel for the table tag. 
	Use HighlightRow, RowAlternate, or RowSelected for headings for rows to highlight.   */
.HightlightRow   
{
	background-color:#4383c4;
}

/* .GridBackground is used to provide a background image for a grid. */
.GridBackground
{
	background-image: url(Images/GridBackground.png);
}

.HeaderRow   
{
	background-color:#336597;
}
.FooterRow   
{
	background-color:#618cb8;
}

/* .RowSelected is used to provide a background image for selected rows in a grid. */
.RowSelected
{
	/* background-image: url(Images/RowSelected.png); */
	border-right: yellow thin solid;
	border-top: yellow thin solid;
	border-left: yellow thin solid;
	border-bottom: yellow thin solid;
	color: #fbfdc5;
	background-color: #4383c4;
}

/* .RowAlternate is used to provide a background image for alternate rows in a grid. */
.RowAlternate
{
	background-image: url(Images/RowAlternate.png);
}

/* label column in a table */
.formlabel
{
	width: 200px;
	text-align: right;
	padding-right: 6px;
	padding-left: 6px;
	padding-bottom: 4px;
	padding-top: 4px; 
}

/* value column in a table */
.formvalue
{
	text-align: left;
	padding-right: 6px;
	padding-left: 6px;
	padding-bottom: 4px;
	padding-top: 4px; 
}

/* Default width for a fixed size text field. Often you want 95% instead. */
.txtfield
{
    width:300px;
}

/* Default width for a fixed size text field. Often you want 95% instead. */
.txtblock
{
    width:300px;
}

/*	The Container... classes are used on the Master Page to create page margins and 
	room for gradients. */	
td.ContainerLeft
{   
	width:32px;
	/* background-image:url(Images/Gradient_Left.png); */
	background-repeat:repeat-y;
}
td.ContainerRight
{
	width:32px;
	/* background-image:url(Images/Gradient_Right.png); */
	background-repeat:repeat-y;
}
	
td.ContainerTop
{   
	height:16px;
	/* background-image:url(Images/Gradient_Top.png); */
	background-repeat:repeat-x;
}
	
td.ContainerBottom
{   
	height:16px;  
	font-size:x-small;
	vertical-align:text-bottom; 
	text-align:center;
	/* background-image:url(Images/Gradient_Bottom.png); */
	background-repeat:repeat-x;
}
	
td.ContainerTopLeft
{   
	width:32px;
	height:16px;  	
	/* background-image:url(Images/Gradient_TopLeft.png); */
	background-position:top;
}
	
td.ContainerTopRight
{   
	width:32px;
	height:16px;  	
	/* background-image:url(Images/Gradient_TopRight.png); */
	background-position:top;
}
	
td.ContainerBottomLeft
{   
	width:32px;
	height:16px;  	
	/* background-image:url(Images/Gradient_BottomLeft.png); */
	background-position:bottom;
}
	
td.ContainerBottomRight
{   
	width:32px;
	height:16px;  	
	/* background-image:url(Images/Gradient_BottomRight.png); */
	background-position:bottom;
}
	
td.ContainerBody
{   
}

/*	The HeaderBar class places a bar graphic across a table cell or row. */
.HeaderBar
{
	background-image: url(Images/MenuBar.png);
	background-repeat: repeat-x;
	background-position: left top;
	height: 24px;
	vertical-align: middle;
	padding-right: 8px;
	padding-left: 8px;
	padding-bottom: 0px;
	padding-top: 0px;
}

/*	================================================================================= */

/*	This is used with a Panel to create gradient and border. The panel usually holds
	text and other items to be offset from other items on the page. */
.HightlightedPanel
{
	background-color:#1e1e1e;
	background-image: url(Images/Gradient_Panel.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	border-right: #4383c4 1px solid;
	border-top: #4383c4 1px solid;
	border-left: #4383c4 1px solid;
	border-bottom: #4383c4 1px solid;
	padding-right: 1em;
	padding-left: 1em;
	padding-bottom:1em;
	padding-top: 1em;
}

/*	This is used with a horizontal tab control to frame the tab page content. 
	Use with the RadMultiPage control. */
.PanelTab
{
	background-color:#1e1e1e;
	background-image: url(Images/Gradient_Panel.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	border-right: #4383c4 1px solid;
	border-left: #4383c4 1px solid;
	border-bottom: #4383c4 1px solid;
	padding-right: 1em;
	padding-left: 1em;
	padding-bottom:1em;
	padding-top: 1em;
}

/*	This is used with a Panel to create a gradient, but no border. The panel usually holds
	text and other items to be offset from other items on the page. 
	A border color is provided in case a border is added with the control.
*/
.PanelBackground
{
	border-color: #4383c4;
	background-color: #1e1e1e;
	background-image: url(Images/Gradient_Panel.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	padding-right: 1em;
	padding-left: 1em;
	padding-bottom: 1em;
	padding-top: 1em;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	border-bottom-style: none;
}

/*	This is used to place a ridged frame around an image.
	The width is set to zero in code if the frame is to be suppressed.  */
.PanelFrame
{
	border-right: #171718 8px ridge;
	border-top: #171718 8px ridge;
	border-left: #171718 8px ridge;
	border-bottom: #171718 8px ridge;
}

/*	This panel is used to display an error message. */
.ErrorPanel
{
	border-right: #4383c4 3px solid;
	border-top: #4383c4 3px solid;
	border-left: #4383c4 3px solid;
	border-bottom: #4383c4 3px solid;
	font-weight: bold;
	color: Maroon;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-right: 1em;
	padding-left: 1em;
	padding-bottom: 1em;
	padding-top: 1em;
	background-color: #ffe4b5;
}
.ErrorPanel A:link      { color: #7b42d9; text-decoration:none; }
.ErrorPanel A:visited 	{ color: #7b42d9; text-decoration:none; }
.ErrorPanel A:active 	{ color: #7b42d9; text-decoration:none; }
.ErrorPanel A:hover 	{color: #7b42d9; text-decoration:underline;}

.HighlightedBorder
{
	padding-right: 4px;
	padding-left: 4px;
	padding-bottom: 4px;
	padding-top: 4px;
	border-right: #fbfdc5 thin solid;
	border-top: #fbfdc5 thin solid;
	border-left: #fbfdc5 thin solid;
	border-bottom: #fbfdc5 thin solid;
}

.ValidatorMsg
{
	color: Maroon;
	margin-top: 4px;
	margin-bottom: 4px;
	padding-right: 8px;
	padding-left: 8px;
	padding-bottom: 4px;
	padding-top: 4px;
	background-color: #ffe4b5;
}

/*	ShowMeHow is used to mark a link to a page in the Education Center     
	This class should be used with a "span" or "div" tag.	
	"span" may will overlay adjacent lines and multi-line spans,
	but a "div" will expand to its container.
*/
.ShowMeHow
{
	color: #fbfdc5;						/* link hover color */
	background: #336597;				/* Grid header color */
	padding-right: 4px;
	padding-left: 4px;
	padding-bottom: 4px;
	padding-top: 4px;
	border-right: #4383c4 thin solid;	/* Border color */
	border-top: #4383c4 thin solid;
	border-left: #4383c4 thin solid;
	border-bottom: #4383c4 thin solid;
	margin: 8px;
}
.ShowMeHow A:link  
	{ color: #fbfdc5; text-decoration:none; }/* link hover color */
.ShowMeHow A:visited  
	{ color: #fbfdc5; text-decoration:none; }/* link hover color */
.ShowMeHow A:active  
	{ color: #fbfdc5; text-decoration:none; }/* link hover color */
.ShowMeHow A:hover  
	{ color: #fbfdc5; text-decoration:underline; }/* link hover color */

/*	The StaticMenuItem class is used on the main menu bar 
	This is used internally by the menu on a table and td tag. */
.StaticMenuItem
{
	border-left: #4383c4 thin solid;
	padding-right: 4px;
	padding-left: 4px;
}

/*	The Menu class is used for dynamic menu items, not the main menu bar.
	IE8 does not let dynamic ASP.Net menus display properly.
	The script they use expects ZIndex to always be numeric, but in
	IE8 it defaults to "auto". Forcing a numeric ZIndex fixes the problem.
*/
.Menu
{
	background-color: #1e1e1e;
	background-image: url(Images/Gradient_Menu.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	border-right: #fbfdc5 1px solid;  
	border-top: #fbfdc5 1px solid;
	border-left: #fbfdc5 1px solid;
	border-bottom: #fbfdc5 1px solid;
	padding-right: 1em;
	padding-left: 1em;
	padding-bottom: 0;
	padding-top: 1em;
	color: #a1b7fc;
    z-index: 250;
}

/*	Redefine link colors when they appear in a Menu list item. */
/*
A.MenuItem:link		{ color: #990000; text-decoration:none; }
A.MenuItem:visited 	{ color: #990000; text-decoration:none; }
A.MenuItem:active 	{ color: #990000; text-decoration:none; }
*/
A.StaticMenuItem:hover 	{text-decoration:none; }
A.MenuItem:hover 	{text-decoration:none; }

/* .DropDownList is used to provide a background for a dropdown list */
.DropDownList
{
	background-color: #336597;
	border-width: thin;
	border-color: #4383c4;
	padding-left: 4px;
	padding-right: 4px;
}


/*	The input control is used for checkboxes, and other input controls.
	We wliminate the margin here, but we must ensure they are set for Label tags
	which are associated with checkboxes. */
input
{
	text-decoration:none;
	margin:0;
}    

label
{
	margin-left:8px;
	margin-right:8px;
}

/*	Note that the Input control affects button, textboxes, checkboxes, and radio buttons. */
/*	Use class=button to indicate the style for a button. 

*/
.button
{
	background-color: #1e1e1e;
	background-image: url(Images/Bar.png);
	background-repeat: repeat-x;
	background-position: left top;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	border-bottom-style: none;
	color: #a1b7fc;
	padding-right: 8px;
	padding-left: 8px;
	padding-bottom: 0px;
	padding-top: 0px;
	vertical-align: middle;
	text-align: center;
	height: 24px;
	margin: 6px 6px 6px 0px;
}
    
/*	This is the same as the button class, but insures a left margin also. 
	Used when button is in a DetailsView template frame. 

*/
.MarginedButton
{
	background-color: #1e1e1e;
	background-image: url(Images/Bar.png);
	background-repeat: repeat-x;
	background-position: left top;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	border-bottom-style: none;
	color: #a1b7fc;
	padding-right: 8px;
	padding-left: 8px;
	padding-bottom: 0px;
	padding-top: 0px;
	vertical-align: middle;
	text-align: center;
	height: 24px;
	margin: 1em 1em 1em 1em;
}    
 
input.button:hover, input.MarginedButton:hover
{
	outline-style: solid;
	outline-color: #4383c4;
	outline-width: thin;
	text-decoration: none;
	color: #fbfdc5;
}    

/*	The LinkButton class is used with asp:LinkButton 
	This will just look link a hyperlink and seems to contain an <a> tag internally. */
.LinkButton
{
}

/*	The Emphasis class is used to hightlight text. It is used, for example, in the
	title of the Logon dialog. Use the em and strong tags within text to create emphasis.*/
.Emphasis
{
	 font-weight:bold;
}

/*	The FailureText class is used to display 'FailureText' generated by validate controls. 
	Note that the controls generate a "span" tag to hold the text. Top and bottom
	borders are not generated for a span, so we use background highlighting instead.
*/
.FailureText
{
	font-weight: bold;
	color: Maroon;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-right: 1em;
	padding-left: 1em;
	padding-bottom: 1em;
	padding-top: 1em;
	background-color: #ffe4b5;
}
.FailureText A:link      { color: #7b42d9; text-decoration:none; }
.FailureText A:visited 	{ color: #7b42d9; text-decoration:none; }
.FailureText A:active 	{ color: #7b42d9; text-decoration:none; }
.FailureText A:hover 	{color: #7b42d9; text-decoration:underline;}

/*	The WarningText class is used to display a highlighted warning or information message. 
	Note that the controls generate a "span" tag to hold the text. Top and bottom
	borders are not generated for a span, so we use background highlighting instead.
*/
.WarningText
{
	font-weight: bold;
	color: navy;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-right: 1em;
	padding-left: 1em;
	padding-bottom: 1em;
	padding-top: 1em;
	background-color: #faebd7;
}

.WarningText A:link      { color: #7b42d9; text-decoration:none; }
.WarningText A:visited 	{ color: #7b42d9; text-decoration:none; }
.WarningText A:active 	{ color: #7b42d9; text-decoration:none; }
.WarningText A:hover 	{color: #7b42d9; text-decoration:underline;}

/*	.Underlay is used to place an image or text in the background behind the main page. */
.Underlay
{
	position:absolute;
	left:300px;
	top:300px;
	z-index:-1;
}

/*	========================================================================================= */
/*	Styles from the Club Starter Kit                                                          */
/*	You cannot delete these styles without insuring they are not used.                        */
/*	========================================================================================= */

/*
 #loginbanner h2
{
    font-size: 1em;
    font-weight: normal;
    margin-top: 8px;
}

#poster h2
{
    font-size: 13px;
    font-weight: bold;
    color: #50700E;
}
*/

/*
.leftblock h2, .rightblock h2, .fullwidth h2
{
    font-size: 1.6em;
}

.rightblock h3
{
    font-size: 1em;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    display: block;
}
*/

.eventmonth h3
{
    padding-left: 20px;
    padding-right: 20px;
}

.eventlist label
{
    font-weight: bold;
    padding-right: 4px;
}

/************************************************************************
* 
* Main navigation used by the masterpage
*
************************************************************************/


/* Navigation strips */
/*
#navtop, #navbottom
{
    background: url(images/background_nav_main.gif) repeat-x;
    font-size: 11px;
    font-weight: bold;
    font-family: Verdana, Helvetica, Helvetica-Narrow, Tahoma, sans-serif;
    margin-right: auto;
    margin-left: auto;
    width: 726px;
    height: 45px;
}
#navbottom
{
    margin-top: 15px;
}

#footer
{
    width: 726px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    margin-top: 10px;
    padding-bottom: 22px;
    color: #C89F3D;
}
*/

/* Make main navigation bars from a unordered list for easy update and better accessibility */
/*
#navtop ul, #navbottom ul
{
    margin: 0px;
    padding-top: 9px;
    list-style-type: none;
    height: 19px;
    text-align: center;
}
#navtop ul li, #navbottom ul li
{
    display: inline;
    color: #FFFFFF;
    margin-right: 25px;
}
#navtop a:link, #navbottom a:link, #navtop a:visited, #navbottom a:visited
{
    color: #FFFFFF;
    text-decoration: none;
}
#navtop a:hover, #navbottom a:hover
{
    text-decoration: underline;
}
#navtop a:active, #navbottom a:active
{
    color: #FEFFBD;
    text-decoration: none;
}
*/

/************************************************************************
* 
* Formatting common to most pages
*
************************************************************************/

/* Main part of the page that holds contents */
/* 
#body
{
    width: 726px;
    margin-top: 7px;
    margin-right: auto;
    margin-left: auto;
}
 */

/*	2 column layout. columnleft defines the width of a column on the left,
	while columnright defines acolumn to the right of a leftmost column. 
	These Id's are placed on div tags to create the equivalent of Panels.
	The .Panel class should also be specified to create the proper effect. */
/*
#columnleft
{
    float: left;
    width: 240px;
}

#columnright
{
    margin-left: 245px;
}
*/

/* .leftblock is used for text in a left column panel. */
/*
.leftblock
{
    border: 1px solid #DBDB79;
    padding: 15px;
    margin-bottom: 10px;
    background: #FEFAAB url(images/background_columnleft.gif) repeat-y;
    vertical-align: top;
} */

/*
 .rightblock
{
    border: 1px solid #DBDB79;
    padding: 15px;
    margin-bottom: 10px;
    background: #FEFFAB url(images/background_columnright.gif) repeat-y;
    position: relative;
    width:446px;
} */

.clear2column
{
    margin:0;
    padding:0;
    line-height:0;
    font-size:0px;
    height:0px;
    clear: both;
}
    

/* A full width block on the page */

.fullwidth, #loginbanner
{
    border: 1px solid #4383c4;
    width: 694px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
}

/* for the login block
    picks up most of its properties from .fullwidth */

#loginbanner
{
  padding-bottom: 0px;
}

/* Goes around controls that need to be presented as a block of functionality  */
.controlblock
{
    border: 1px solid #4383c4;
    padding: 3px;
    margin: 2px 0 5px 0;
    vertical-align: top;
}

/* shows a visual seperation. This can be used with div tag to act like a hr tag */
.dashedline
{
    border-bottom: 1px dashed #4383c4;
    padding-top: 10px;
    margin-bottom: 10px;
    clear:right;
}

/* Command buttons on pages */
/*
.actionbuttons
{
  text-align:right;
  position: relative; 
  padding: 1px 1px 1px 1px;
}
*/

/* sometimes we hide elements from display in visual browsers (but leave them in the source for non visual browsers and for accessibility) */

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

/* Ensure there are margins within things like a DataList cell. Use with a Div tag. */
.margins
{
	margin: 8px;
}

/* Ensure there are vertical margins for things like combo boxes. Use with a Div tag. */
.marginsvertical
{
	margin-top: 8px;
	margin-bottom: 8px;
}


/************************************************************************
* 
* Image functionality
*
************************************************************************/

.photo
{
	border: solid 1px #4383c4;
	padding: 3px;
	background-position: left bottom;
	background-image: url(Images/Gradient_Menu.png);
	background-repeat: repeat-x;
	background-color: transparent;
	margin: 0px;
}

.picture
{
	border: solid 1px #4383c4;
	padding: 3px;
	background-position: left bottom;
	background-image: url(Images/Gradient_Menu.png);
	background-repeat: repeat-x;
	background-color: transparent;
	margin: 0px;
}

/*	Add a hover border to href thumbnail images. The Thumnail may be inside a div tag. 
	The class is also used directly with the <a> tag. */
.thumbnail a:active img, .thumbnail a:link img, a.thumbnail:active, a.thumbnail:link
{
    border: 1px solid #464646;
}
.thumbnail a:visited img, a.thumbnail:visited
{
    border: 1px solid #464646;
}
.thumbnail a:hover img, a.thumbnail:hover
{
    border: 1px solid #fbfdc5;
}

/*	Add a hover border to href thumbnail images. The Thumnail may be inside a div tag. 
	The class is also used directly with the <a> tag. */
.ImageLink a:active img, .ImageLink a:link img, a.ImageLink:active, a.ImageLink:link
{
    border: 1px solid #464646;
}
.ImageLink a:visited img, a.ImageLink:visited
{
    border: 1px solid #464646;
}
.ImageLink a:hover img, a.ImageLink:hover
{
    border: 1px solid #fbfdc5;
}

/* Add a dark grey border for an image */
.ImageOutline img
{
    border: 1px solid #464646;
}


/************************************************************************
* 
* List type pages
*
************************************************************************/

/* represents each item in a vertical list. Used in News and event lists. */
.listitem
{
    margin:0px 0px 0px 0px;
    width:444px;
}

/* surrounds the buttons for list items */
.editbuttons
{
    padding-top: 6px;
}

/* floats the thumbnail off to the right */
div.thumbnail
{
    float: right;
    margin: 0 0 0 5px;
}
/* floats the thumbnail off to the right */
a.thumbnail
{
	float: right;
	margin: 0 0 0 5px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
}

/*used to clear the float for the thumbnail */
.clearlist
{
    clear:right;
    margin:0;
    padding:0;
    height: 0px;
    font-size:0px;
    line-height:0px;
}

/* Used by the page number control */
.PageNumbers
{
    display:inline;
}

.PageNumbers span
{
    padding-left: 3px;
}

/*	Define links used for page number links when displaying lists, such as events. */
.newscrumbs a
{
    font-weight: bold;
    padding-right: 2px;
}

.addresslabel
{
    border: 1px solid #4383c4;
    padding: 10px;
    margin-bottom: 10px;
    width: 150px;
}

/* Used in the two column lists */
/* Used on div tag for addresses */
.membercard
{
    border: 1px solid #4383c4;
    padding: 10px;
    margin-bottom: 10px;
    width: 250px;
}

.clearcard
{
    clear:left;
    height:0;
    margin:0;
    padding:0;
}

#membercardcolumnleft
{
    float: left;
    position: relative;
}
#membercardcolumnright
{
    margin-left: 260px;
}
.membercard p
{
    margin: 5px;
}

.membercard h3
{
    font-size: 1em;
}

/************************************************************************
* 
* Compact Event list
*
************************************************************************/


/* define event grid view columns */
/* todo: use or remove */

.eventlistdate
{
    padding-right: 4px;
}
.eventlisticon
{
    text-align: center;
}
.eventlisttime
{
    text-align: center;
    width: 95px;
}
.eventlistevent
{
    font-weight: bold;
}
.eventlistlocation
{
    /* no styles needed at this time */
}
.eventlist td
{
    padding-bottom: 4px;
}

/*
.eventlist, .eventlist td, .eventlist tr
{
    border-style:none;
}
*/

/************************************************************************
* 
* Rollover buttons
*
************************************************************************/

/*
.buttonsmall, .buttonsmall-ovr
{
    background: url(images/background_button_small.gif) repeat-x;
    border: none;
    color: #FFFFFF;
    height: 22px;
    font-weight: normal;
    font-size: 9px;
    padding-bottom: 9px;
    padding-left: 3px;
    padding-right: 3px;
    cursor: pointer;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.buttonsmall-ovr
{
    text-decoration: underline;
    background: url(images/background_button_small-ovr.gif) repeat-x;
}
*/

/************************************************************************
* 
* Page specific 
*
************************************************************************/

/* even dowload button */
.downloadevent img
{
    margin-right: 5px;
    vertical-align: middle;
    border: none;
}

/* Header on view details type pages */
.itemdetails
{
    font-size: 1.3em;
}



/************************************************************************
* 
* Photo selection controls
*
************************************************************************/

#popupbody
{
    font-family: Tahoma, Verdana, Helvetica, Helvetica-Narrow, sans-serif;
    margin: 0px;
    font-size: 0.7em;
}

#popupinner
{
    border: 1px solid #4383c4;
    margin: 5px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}

#popupbody h2
{
    font-weight: bold;
    margin: 0px;
    padding: 1px 0px 5px 5px;
    display: block;
}

.selected, .unselected
{
    width: 80px;
    height: 100px;
    text-align: center;
    padding: 2px 2px 2px 2px;
}

.unselected
{
    background-color: transparent;
    border: solid 1px #4383c4;
}

.selected
{
     /* background: #FED36B; */
     border: solid 1px #4383c4;
}

.scrollablelist
{
    overflow: auto;
    height: 230px;
    width: 460px;
    border: solid 1px #4383c4;
}

.scrollablelist2
{
    overflow: auto;
    height: 230px;
    width: 210px;
    border: solid 1px #4383c4;
}


.scrolledtable
{
}

 .selectablephoto
{
    background: url(images/background_thumbnail.jpg) repeat-x center;
    border: 1px solid #4383c4;
    padding: 2px;
}

.contextbuttons
{
  margin: 5px 3px 5px 3px; 

}

/* White matting for full-sized pictures. Takes into consideration the 10px shadow of the image */
.picturematting {
	border-top: 25px solid #FFFFFF;
	border-right: 15px solid #FFFFFF;
	border-bottom: 15px solid #FFFFFF;
	border-left: 25px solid #FFFFFF;
	background-color: #FFFFFF;
}

/* Green ridged frame of the full-sized pictures */
.pictureframe {
  border: thick ridge #fe8920;
}

/* Solid 1px black border for thumbnail pictures */
.thumbnailedge {
  border: 1px solid #000000;
  vertical-align: top;
}

/* White matting for thumbnail pictures.  */
.thumbnailmatting {
  border: 15px solid #FFFFFF;
}

/* Green ridged frame of the thumbnail pictures */
.thumbnailframe {
  border: thick ridge #fe8920;
}

.potmthumnailframe {
  border: thick ridge #c3c3ff;
}
	
/* Green ridged frame of the thumbnail pictures */
.thumbnailframe {
  border: thick ridge #fe8920;
}