/*  This is a common stylesheet used by all pages. It is included in master pages
	and overrides the theme stylesheets. Do not put colors in this file unless you want
	those colors for all themes. */

/* Office 2010 Black keeps trying to set the text in a textbox to white when it needs to be black. */
.RadForm.RadForm_Office2010Black .rfdSkinnedButton, .RadForm.RadForm_Office2010Black .rfdTextInput, 
    .rfdLabel.RadForm.RadForm_Office2010Black label, .rfdLabel.RadForm.RadForm_Office2010Black .rfdAspLabel, 
    .rfdTextbox.RadForm.RadForm_Office2010Black input, .rfdTextarea.RadForm.RadForm_Office2010Black textarea, 
    .rfdFieldset.RadForm.RadForm_Office2010Black fieldset, .rfdFieldset.RadForm.RadForm_Office2010Black legend, 
    .RadForm.RadForm_Office2010Black .rfdSelect, .rfdHeading.RadForm.RadForm_Office2010Black h4, 
    .rfdHeading.RadForm.RadForm_Office2010Black h5, .rfdHeading.RadForm.RadForm_Office2010Black h6, 
    .RadForm.RadForm_Office2010Black .riTextBox, .RadForm.RadForm_Office2010Black .rfdValidationSummaryControl, 
    .RadForm.RadForm_Office2010Black .rfdLoginControl{
    color: #333 !important;
}

/* --- overrides for RenderMode Mobile or LightWeight  */
.rbCheckBox, rbRadioButton, rdToggleButton {
    padding-top: 2px !important;
}
.RadMenu {
    white-space: normal !important;
}
.RadMenuPopup {
    min-width: 300px;
}

.RadMenuPopup .rmSlide .rmLink {
    word-wrap: break-word;
    white-space: normal;
}

html, body, form, iframe
{
	margin: 0;
	padding: 0;
	border: 0;
}
body, iframe 
{
    font-family:"Segoe UI", Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
	text-align: left;
    /*font-size:small; Since MetroTouch uses a larger font size it must be set in each theme. */
    background-position:left top;          
}
h1 
{
	margin:0.5em 0;
	font-size: 1.7em;
	font-weight:bold;
}
h2 {
	margin: 0.5em 0;
	font-size: 1.5em;
	font-weight: bold;
}
h3 {
	margin: 0.5em 0;
	font-size: 1.4em;
	font-weight: bold;
}
h4 {
	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;
}
p, td {
    line-height:1.4;
}
table {
	border-collapse:collapse;
}
.hidden
{
    visibility: hidden;
}
.none
{
    display: none;
}

/*	The input control is used for checkboxes, and other input controls.
	We eliminate the margin here, but we must ensure they are set for Label tags
	which are associated with checkboxes. */
.RadButton {
	margin: 4px 6px 4px 0px;
    vertical-align:middle;
}
span.RadButton {
    vertical-align:middle;
}

/* .center has no effect if width=100% */
.center
 {
 margin-left:auto;
 margin-right:auto;
 text-align:center;
 }

/*	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: 1em 1em 1em 1em;
	background-color: #ffe4b5;
}
A.FailureText:link      { color: #7b42d9; text-decoration:none; }
A.FailureText:visited 	{ color: #7b42d9; text-decoration:none; }
A.FailureText:active 	{ color: #7b42d9; text-decoration:none; }
A.FailureText: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: 1em 1em 1em 1em;
	background-color: #faebd7;
}
A.WarningText:link      { color: #7b42d9; text-decoration:none; }
A.WarningText:visited 	{ color: #7b42d9; text-decoration:none; }
A.WarningText:active 	{ color: #7b42d9; text-decoration:none; }
A.WarningText:hover 	{color: #7b42d9; text-decoration:underline;}

.ValidatorMsg
{
	color: Maroon;
	margin-top: 4px;
	margin-bottom: 4px;
	padding: 8px 8px 8px 8px;
	background-color: #ffe4b5; 
    line-height: 2.5em;
}

/*	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
{
	background-color: #dcdcdc;   /* highlight color */ 
	color: #1c54e2;						/* Border color (different than other Themes) */
    padding: 4px 4px 4px 4px;
	border: 1px solid #848284;
	margin: 8px;
}
.ShowMeHow A:link  
	{color: #1c54e2;text-decoration:none; }
.ShowMeHow A:visited  
	{color: #1c54e2;text-decoration:none; }
.ShowMeHow A:active  
	{color: #1c54e2;text-decoration:none; }
.ShowMeHow A:hover  
	{text-decoration:underline; }


/*	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. */
.HighlightPanel
{
	padding: 1em 1em 1em 1em;
}
/*	This is a softer panel than HighlightedPanel */
.SoftHighlightPanel
{
	padding: 1em 1em 1em 1em;
}

/* This is used on a .div or asp:Panel to limit the width of a column of text. */
.HighlightTextPanel {
	padding: 1em 1em 1em 1em;
    max-width: 600px;
}

/*	This is used to set only a background color and padding.
*/
.PanelBackground
{
	padding: 1em 1em 1em 1em;
}

/*	This is used with a horizontal tab control to frame the tab page content. 
	Use with the RadMultiPage control. */
.PanelTab
{
	padding: 1em 1em 1em 1em;
}

.HighlightedBorder
{
	padding: 4px 4px 4px 4px;
}

/*	This panel is used with a span element to set a background color for a word or phrase. */
.HighlightedPhrase
{
	background-color: #dcdcdc;   /* highlight color */ 
	color:black;
	padding:2px;
	line-height:22px;
	border: 1px solid #848284;
}

/*	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: 1em 1em 1em 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;}
	
td.ContainerBottom
{   
	height:16px;  
	font-size:x-small;
	vertical-align:text-bottom; 
	text-align:center;
    margin-left:auto;
    margin-right:auto;
}

/* .RowAlternate is used to provide a background image for alternate rows in a grid. 
	It is only defined within themes. */

/*	The Body... classes are used on the Master Page to create page margins and sections. */	
div.BodyLoginLine
{
	text-align:right;
    vertical-align:middle;
}
div.BodyFooter
{
	text-align:center;
	font-size:small;
}

.ForceMiddle {
	vertical-align:middle !important;
}
.FloatRight
{
	float:right;
	margin:8px 0px 8px 8px;
}

.FloatLeft
{
	float:Left;
	margin:8px 8px 8px 0px;
}
/* Use clearfix to clear floats to keep overflows in their columns.
   This is instead of overflow:auto.
*/
.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

/* SPIGridContainer is a container for columns. 
	Each div in container will become an equal sized column.
	grid-template-columns: repeat(auto-fit, minmax(20em, 80em));
*/
.SPIGridBalancedContainer {
	clear: both;
	display: grid;
	gap: 1em;
	max-width: 100%;
	margin: 0 auto;
}

@media (min-width: 800px) {
	.SPIGridBalancedContainer {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}
}
/* This use used to define a container to hold flex items in rows.
   We expect items to be displayed in the order presented on a mobile device
   and the layout to be modified on non-mobile devices.
   The items in the container will be tiled to fit within the container,
   floating as needed to fit.
*/
.SPIGalleryTileContainer {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	width:100%;
}
/*  Place this tag on each item to be placed into a row.
*/
.SPIGalleryTileItem {
	max-height: 350px;
	max-width: 450px;
	margin-right: 5px;
	margin-bottom: 5px;
	text-align: center;
	border: 1px solid #ccc;
	box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);
}
.SPIGalleryTileItem img {
	max-height: 350px;
	max-width: 450px;
}
/* On a phone, use the max width of the phone screen. */
@media screen and (max-width: 450px) {
	.SPIGalleryTileItem img {
		max-width: 100%;
	}
}
/* This is an attempt to display a "Loading" div on a page as it loads. */
.SPIPageLoadPanel {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 90000;
	opacity: 0.5;
	width: 100%;
	height: 100%;
	min-height: 100px;
	padding: 20px;
	background-color: #80808080;
}
/* This use used to define a container to hold flex items in rows.
   We expect items to be displayed in the order presented on a mobile device
   and the layout to be modified on non-mobile devices.
   We expect content items with class="SPIFlexAside". One should also use "SPIFlexAside-1"
   and the other with "SPIFlexAside-2".
   Mark the center item with class="SPIFlexMain" and any footer with "SPIFlexFooter".
   Header content can be placed above the SPIFlexMain content without any special class.
*/
.SPIFlexRowContainer {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}
/* We tell all items to be 100% width, via flex-basis
   This syntax seems to indicate the style is applied to the immediate children
   of the container with SPIFlexRowContainer.
*/
.SPIFlexRowContainer > * {
	flex: 1 100%;
}
/* Medium screens */
@media all and (min-width: 800px) {
	/* We tell both sidebars to share a row */
	.SPIFlexAside {
		flex: 1 0;
		align-self: flex-start;
		max-width:50%;
	}
	.SPIFlexAside-Right {
		margin-left: 12px;
	}
}

/* Large screens */
@media all and (min-width: 1000px) {
	/* We invert order of first sidebar and main
       And tell the main element to take twice as much width as the other two sidebars 
   */
	.SPIFlexAside-Left {
		order: 1;
		flex-basis:20%;
		align-self: flex-start;
		margin-right: 12px;
		min-width: 120px;
		max-width: 200px;
	}

	.SPIFlexMain {
		order: 2;
		flex-basis: 0;
		flex-grow:4;
		align-self: flex-start;
		min-width: 480px;
	}

	.SPIFlexAside-Right {
		order: 3;
		flex-basis: 20%;
		align-self: flex-start;
		margin-left: 12px;
		min-width: 120px;
		max-width: 200px;
	}

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

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

.photo
{
	border: solid 1px #333;
	margin: 0px;
}

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

/*	Add a hover border to href thumbnail images. Generally used with Span, but Thumbnail may be inside a div tag. 
	The class is also used directly with the <a> tag. Used by DisplayThumb control. */
.ImageLink a img
{
    border: 1px solid #464646;
}
.ImageLink a:hover img
{
    border: 1px solid Maroon;
}

/* Add a dark grey border for an image */
.ImageOutline img
{
    border: 1px solid #464646;
}
/* Small padding for Table tag */
.SmallPad 
{
	padding:4px;
}
/* Small padding for Table tag, 100% wide */
.SmallPad100
{
	padding:4px;
	width:100%;
}

/*	Grid is used to create a table with gridlines, similar to a GridView.
	Use RowAlternate or RowSelected for headings for rows to highlight. */
.TableGrid
{
	border-collapse:collapse;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
    padding: 0px;
}
.TableGrid td
{
	padding: 8px; 
}

/*	Full grid for a table with gridlines for each cell. */
.TableFullGrid
{
	border-collapse:collapse;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
    padding: 0px;
}
.TableFullGrid td, .Borders
{
    border-width: 1px 1px 1px 1px;
    border-style: solid;
	padding: 8px; 
}
.BordersForce
{
    border-width: 1px 1px 1px 1px !important;
    border-style: solid !important;
	padding: 8px !important; 
}
.spifitwidth {
	width: fit-content;
}
/*	BorderTop is used on cells in a table to draw a gridline on the 
	top edge of a cell. This does not seem to work on a row. 
    the color comes from the theme. */
.BorderTop td
{
    border-width: 1px 0 0 0;
    border-style: solid;
}
.NoBorders {
    border-style: none !important;
}
.NoBorders td {
    border-style: none !important;
}
/* Use the clases below allow the text for a checkbox to flow to multiple lines.
    See Organization Profile for examples.
*/
.CheckBoxNoMargins {
    margin: 0;
    margin-top: -2px;
}
.RadioNoMargins {
    margin: 0;
    margin-top: -4px;
}
.CheckBoxDiv {
    float:left;
}
.CheckBoxTextDiv {
    display: table-cell;
}
.CheckBoxClear {
    clear:left;
    margin-bottom:6px;
}
/* This class goes on a TD item containing an input box. */
.InputBoxPadRight {
    padding-right:8px;
}

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

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

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

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

/* Ensure there are margins within things like a DataList cell. Use with a Div tag. */
.margins
{
	margin: 8px;
}
/* Headings for category names in a category tree list */
.CatHead
{
	font-weight:bold;
}
/* Headings for detail items in a category tree list */
.CatDetHead
{
	font-weight:bold;
}
.rsAdvPatternPanel div.RadInput, .rsAdvOptionsPanel div.RadInput {
    display:inline-block;
    vertical-align:middle;
}
/* Allow lists to fill across rows. Put class in a div enclosing the RadListBox. */
.FloatListItems .rlbItem
{ 
    display:inline-block !important;
    vertical-align:top;
    white-space:normal !important;
}
.FloatListItems .rlbList
{ 
    white-space:normal !important;
}
/* Use ScaleImage to shrink images to fit into their container. */
.ScaleImage {
    max-width:100%;
}
.InlineBlock {
    display:inline-block;
}

.ForceWrapText, .ForceWrapText td a {
    word-wrap: break-word !important;
    white-space: normal !important;
}
.SPIHideMobile {
    display: none;
}
.SPIMaxContentWidth {
    display:normal;
}
/* SPITinyButton is used on the awards and critique button on judging thumbnails.  */
.SPITinyButton {
    padding:4px;
    margin-right:4px;
}

/* CSS for non-mobile pages */
@media screen and (min-width: 800px) {
    .BlankPageContent {
        margin:20px;
    }
    div.BodyFull {
        margin: 0px 32px 0px 32px;
    }
}
@media screen and (min-width: 500px)  {
    .SPIHideMobile {
        display: normal;
    }
}

@media print {
    /* This stylesheet is only used when printing.
        Everything on the page will print, except items enclosed in the class SPIHideWhenPrinting.
        You cannot turn on the display of nested items within SPIHideWhenPrinting.
        The standard header and footer are marked with this class.
        The user can print using the browser controls.
        You can also print with this:
        <a href="#" onclick="window.print();return false;">Print this page</a>
    */
    body {
        background: #fff;
        color: #000;
        margin: 0px;
    }
    h1, h2, h3, h4, h5, h6 {
    color: #000;
    }
    .SPIHideWhenPrinting {
        display:none;
    }
}