﻿
/*

	DEFAULTS; Force similar cross-browser behavior in standards mode
	-----------------------------------------------------------------------------------------------
	Author: Michael Argentini / Mezzocode, LLC / http://www.mezzocode.com
	Last Updated: 06.05.2009

	This file should be left alone and used as a base to ensure universal browser rendering.
	You should override any specific tags in a site-specific file added to a page AFTER this one.

	* You may use this file as you see fit, but please keep the byline intact. Thanks!

*/

	*
	{
		/* Set all objects to have no padding or margin by default. */

		padding: 0px;
		margin: 0px;
		border-spacing: 0px;
		border-collapse: collapse;
	}

		html
		{
			/* Force vertical scrollbar placeholder in Firefox and Safari, to match IE behavior. */

			overflow: -moz-scrollbars-vertical !important;
			overflow-y: scroll !important;
		}

			body
			{
				/* Set the default font to a sans serif font; gray, sized, line-height added. */

				font-family: "Arial", "Helvetica", sans-serif;
				font-size: 14px;
				line-height: 20px;
				color: #353535;

				/*	Tell iPhone/iTouch platform not to try and resize various text objects
					for readability, so the site renders normally */
				-webkit-text-size-adjust: none;
			}
			
				a
				{
					/* Set anchors to no underline or border. */

					border: none;
					text-decoration: none;
				}

					a:hover
					{
						/* Anchors should underline when hovered. */
						
						text-decoration: underline;
					}

				h1, h2, h3, h4, h5, h6
				{
					/* Set margin and font weight */

					margin: 0px 0px 10px 0px;
					font-weight: normal;
				}

				h1
				{
					/* Set size of header font */
					
					font-size: 200%;
					line-height: 200%;
				}

				h2
				{
					/* Set size of header font */
					
					font-size: 175%;
					line-height: 175%;
				}

				h3
				{
					/* Set size of header font */
					
					font-size: 150%;
					line-height: 150%;
				}

				h4
				{
					/* Set size of header font */
					
					font-size: 125%;
					line-height: 125%;
				}

				h5
				{
					/* Set size of header font */
					
					font-size: 115%;
					line-height: 115%;
				}

				h6
				{
					/* Set size of header font */
					
					font-size: 100%;
					line-height: 100%;
				}

				img, fieldset
				{
					/* Linked images/fieldsets will default to no border. */
					
					border: none;
				}
				
				p
				{
					/* Paragraphs will have proper spacing after the block; line spacing adjusted. */
					
					padding: 0px 0px 15px 0px;
				}

				blockquote, ul, ol, dl
				{
					/* Indent block quotes appropriately. */
					
					padding: 0px 25px 0px 30px;
				}

				ul
				{
					/* Set default bullet type. */
					
					list-style-type: disc;
				}

					ol li
					{
						/* Indent list items appropriately; set bullet/numeral position. */

						list-style: decimal outside;	
						padding: 0px 0px 5px 0px;
					}

					ul li
					{
						/* Indent list items appropriately; set bullet/numeral position. */

						list-style: disc outside;
						padding: 0px 0px 5px 0px;
					}

				input, select, option, textarea
				{
					/* Use default page font and size */

					font-family: "Arial", "Helvetica", sans-serif;
					font-size: 100%;
				}

				label, select, input[type="submit"], input[type="button"], input[type="radio"], input[type="checkbox"]
				{
					/* Use an anchor-style cursor to indicate clickability. */

					cursor: pointer;
				}

				input[type="text"], input[type="password"]
				{
					/* Set text input box padding/margin for aesthetic purposes. */

					padding: 1px 4px 1px 4px;
					margin: 0px 0px 3px 0px !important;
					font-size: 14px;
				}
				
				textarea
				{
					/* Set text area padding/margin and change default font for aesthetic purposes. */

					padding: 2px 4px 2px 4px;
					margin: 0px 0px 3px 0px !important;
					font-size: 14px;
				}

				select
				{
					/* Set the padding and margin of dropdown lists. */

					padding: 1px !important;
					margin: 0px 0px 3px 0px !important;
				}

				sup
				{
					position: relative;
					height: 0;
					line-height: 1;
					vertical-align: text-top;
					_vertical-align: top;
					font-size: 50%;
					left: 1px;
				}
				
				table
				{
					/* Set tables to have no border and collapse their empty cell contents. */
					
					border: none;
				}

					td
					{
						/* Default table cells to left/top align. */

						text-align: left;
						vertical-align: top;
						border: none;
						white-space: normal !important;
					}








/*

	COMMON UTILITY CLASSES; common, frequently used classes
	-----------------------------------------------------------------------------------------------
	Last Updated: 10.12.2008

*/

	.Clear
	{
		/*
			Use this class within floated blocks to allow the contents of the container
			to control the height of the container itself.

			<div class="FloatedContainer">

				<p>Lots of contents.</p>
				<div class="Clear"></div>

			</div>

		*/

		display: block !important;
		overflow: hidden !important;
		clear: both !important;
		height: 1px !important;
	}

	.Left
	{
		/* Float object left */

		float: left;
	}

	.Right
	{
		/* Float object right */

		float: right;
	}
	
	.BlockShrink
	{
		/* Force a block element to shrink its width based on its content, like a table */
		
		display: table !important;
	}

	.BlockCenter
	{
		/* Center a block element on the page or in its container. */

		margin: 0 auto;
	}

	.NoWrap
	{
		/* Use in spans or other objects to prevent their contents from wrapping */

		white-space: nowrap !important;
	}

	.Red
	{
		/* Override default color with red. */

		color: Red !important;
	}

	.Green
	{
		/* Override default color with green. */

		color: Green !important;
	}

	.Blue
	{
		/* Override default color with blue. */

		color: Blue !important;
	}

	.Yellow
	{
		/* Override default color with yellow. */

		color: Yellow !important;
	}

	.Orange
	{
		/* Override default color with orange. */

		color: Orange !important;
	}

	.Black
	{
		/* Override default color with black. */

		color: Black !important;
	}

	.Gray
	{
		/* Override default color with gray. */

		color: Gray !important;
	}

	.White
	{
		/* Override default color with white. */

		color: White !important;
	}

	.Bold
	{
		font-weight: bold;
	}

	.Normal
	{
		font-weight: normal;
	}

	.Italic
	{
		font-style: italic;
	}

	.Underline
	{
		text-decoration: underline;
	}

	.NoUnderline
	{
		text-decoration: none;
	}

	.Uppercase
	{
		text-transform: uppercase;
	}

	.Lowercase
	{
		text-transform: lowercase;
	}

	.Capitalize
	{
		text-transform: capitalize;
	}

	.TextRight
	{
		text-align: right;
	}

	.TextLeft
	{
		text-align: left;
	}

	.TextCenter
	{
		text-align: center;
	}

	.TextJustify
	{
		text-align: justify;
	}

	.Hidden
	{
		/* Hide a block element. */
		
		display: none;
		visibility: hidden;
	}

	.Visible
	{
		/* Show a block element. */

		display: block;
		visibility: visible;
	}

	.DisplayBlock
	{
		/* Display as block element. */

		display: block;
	}

	.DisplayInline
	{
		/* Display as inline element. */
		
		display: inline;
	}








	/*
	
	CROSS-PLATFORM/BROWSER ABSOLUTE CENTERING; technique for absolutely centering a fixed-size
	container <div> on the page. This is for reference/posterity only. Specify these two classes
	in a separate class file, to keep this file intact.
	-----------------------------------------------------------------------------------------------
	Last Updated: 11.21.2008


	CLASS EXAMPLE:
	----------------
	.PageContainer
	{
		text-align: center;
		position: absolute;
		top: 50%;
		left: 0px;
		width: 100%;
		height: 1px;
		overflow: visible;
		visibility: visible;
		display: block
	}

	.CenteredContainer
	{
		margin-left: -489px;	<- Set to half the width of the container itself
		position: absolute;
		top: -304px;			<- Set to half the height of the container itself
		left: 50%;
		width: 978px;
		height: 609px;
	}


	USAGE EXAMPLE:
	----------------
	...
	<body>
		<div class="PageContainer">
			<div class="CenteredContainer">
				<p>Content goes here.</p>
			</div>
		</div>
	</body>
	...

	*/








	/*
	
	CROSS-PLATFORM/BROWSER FULL HEIGHT CENTERED PAGE; technique for centering layer while keeping
	its minimum height to that of the browser viewport.
	-----------------------------------------------------------------------------------------------
	Last Updated: 02.01.2009


	CLASS EXAMPLE:
	----------------
	html, body
	{
		height: 100%;
	}

		body
		{
			background-color: #CCCCCC;
			background-image: url('../Images/page-gradient-tile.jpg');
			background-repeat: repeat-x;
		}
		
			.OuterPageBoundary
			{
				position: relative;
				margin: 0px auto;
				width: 993px;
				min-height: 100% !important;

				background-image: url('../Images/page-tile.jpg');
				background-repeat: repeat-y;
			}

		* html .OuterPageBoundary
		{
			height: 100%;
		}

	USAGE EXAMPLE:
	----------------
	...
	<body>
		<div class="OuterPageBoundary">
		    <form id="form1" runat="server">
				<p>&nbsp;</p>
			</form>
		</div>		
	</body>
	...

	*/








/*

	PRINT CLASSES; Utility classes for printing control
	-----------------------------------------------------------------------------------------------
	Last Updated: 10.12.2008

*/

	@media print
	{
		.HideForPrint
		{
			/* Apply this style to object that you do NOT want to print */

			background-image: none !important;
			background-color: White !important;
			display: none !important;
			visibility: hidden !important;
			padding: 0px !important;
			margin: 0px !important;
		}

		.PageBreakAfter
		{
			/* Apply this style to a layer which should always force a new page below itself. */

			page-break-after: always;
		}

		.PageBreakBefore
		{
			/* Apply this style to a layer which should always start on a new page. */

			page-break-before: always;
		}
	}

	@media screen
	{
		.HideForScreen
		{
			/* Apply this style to object that you do NOT want to see on-screen */

			background-image: none !important;
			background-color: White !important;
			display: none !important;
			visibility: hidden !important;
			padding: 0px !important;
			margin: 0px !important;
		}
	}








/*

	DEBUG CLASSES; Utility classes for debugging CSS problems
	-----------------------------------------------------------------------------------------------
	Last Updated: 10.12.2008

*/

	.DebugBorderRed
	{
		/* Turns on a thick border for testing purposes. */

		border: solid 3px Red;
	}

	.DebugBorderGreen
	{
		/* Turns on a thick border for testing purposes. */

		border: solid 3px Green;
	}

	.DebugBorderBlue
	{
		/* Turns on a thick border for testing purposes. */

		border: solid 3px Blue;
	}

