/*-------------------------------------------
| default.css
| The following provides common CSS values for
| all skins.  Skin-specific values appear in 
| the respective CSS files for each skin as
| overrides.
---------------------------------------------*/

/*-------------------------------------------
| Globals
---------------------------------------------*/
	html {
		height:100%;
	}
	body {
		margin:0px;
		padding:0px;
		height:100%;
		line-height:1.5em;
	}
	img {
		border:0;
	}
	ul {
		margin:0;
		padding:0;
	}
	li {
		margin:0 0 0 20px;
		padding:0px;
		text-indent:0;
	}
	h1, h2, h3, h4 {
		padding:.5em 0;
		margin:0;
		line-height:1.25em;
	}
	p {
		margin:0px;
		padding:.5em 0;
	}
	.hr {
		clear:both;
		height:1px;
		margin:5px 0;
		background-color:ccc;
	}
	.error {
		color:#cc0000!important;
		font-weight:bold!important;
	}
	.note {
		font-size:12px;
		font-weight:normal;
	}
	/*** tables ***/
		table {
			border-collapse:collapse;
			border-spacing:0px;
			border:0;
		}
		tr {
			vertical-align:top;
		}
		td, th {
			padding:0;
		}
	/*** forms ***/
		form {
			margin:0;
			padding:0;
		}
		table.formTable {
			width:555px;
			margin:10px 0 0 0;
			width:100%;
		}
		.formTable td,
		.formTable th {
			padding:1px 3px;
		}
		.formTable .labelCell {
			text-align:right;
			font-weight:bold;
			white-space:nowrap;
			width:100%;
		}
		.formTable * {
			font-size:18px;
		}
		.formTable .inputCell input[type=text],
		.formTable .inputCell textarea {
			width:425px;
			color:#000;
			font-family:Arial, Helvetica, sans-serif;
			padding:2px 4px;
		}
		.buttonDiv {
			width:100%;
			text-align:right;
		}
		button {
			font-size:18px;
			padding:3px 8px;
		}
		button.submitButton {
			font-weight:bold;
		}

/*-------------------------------------------
| layout
---------------------------------------------*/
	/*** page ***/
		#page {
			margin:0 auto;
			width:800px;
			min-height:100%;
		}
		#pageBody {
			position:relative;			
		}
		* html #pageBody	{
			height: 100%;
		}
	/*** header ***/
		#header {
			position:relative;
			padding:0 0 0 125px;
			height:90px;
			width:675px;
			margin:0 auto;
		}
	/*** tobNav ***/
		#topNav {
			position:absolute;
			bottom:0px;
			left:125px;
			width:600px;
		}
	/*** subNav ***/
		#subNav_top {
			position:relative;
			left:155px;
			width:600px;
			height:26px;
			margin-top:5px;
		}
	/*** leftNav ***/
		#subNav_left {
			position:absolute;
			top:125px;
			left:25px;
			width:155px;
		}
	/*** content ***/
		#contentBody {
			position:relative;
			padding:10px 0 20px 0;
			left:180px;
			width:580px;
		}
	/*** footer ***/
		#footer {
			position:relative;
			margin:-20px auto 0 auto;
			height:20px;
			width:600px;
			left:90px;
			font-size:10px;
		}
	
/*-------------------------------------------
| MultiButtons
---------------------------------------------*/
	.multiButton {
		position:relative;
		overflow:hidden;
		display:block;
		text-decoration:none;
		cursor:pointer;
	}
	.multiButton img,
	.multiButton span {
		display:block;
		position:absolute;
		top:0px;
		left:0px;
		margin:0!important;
		background-repeat:no-repeat;
		background-position:left top;
	}
	
/*-------------------------------------------
| Logo
---------------------------------------------*/
	#logo {
		position:absolute;
		top:20px;
		left:12px;
		height:105px;
		width:107px;
	}
	#logo span {
		height:420px;
		width:107px;
	}
	/*** logo states ***/
		/* extra #header selector helps with <=IE6 selection */
		#header #logo.multiButtonGrayed span {
			top:0px;
		}
		#header #logo.multiButton span {
			top:-105px;
		}
		#header #logo.multiButtonOver span {
			top:-210px;
		}
		#header #logo.multiButtonActive span {
			top:-315px;
		}
	
/*-------------------------------------------
| Navigation
---------------------------------------------*/
	.navItem {
		float:left;
		width:auto;
	}
	.navItem span {
		vertical-align:middle;
		position:absolute;
	}
	/*** top nav ***/
		#topNav .navItem {
			padding:3px 0 3px 34px;
			height:26px;
		}
		#topNav .navItem span {
			width:31px;
			height:128px;
		}
		/*** topNav states ***/
			#topNav .navItem span {
				top:-32px;
			}
			#topNav .navItemGrayed span {
				top:0px;
			}
			#topNav .navItemOver span {
				top:-64px;
			}
			#topNav .navItemActive span {
				top:-96px;
			}
			/* apply a depress effect to label */
			#topNav .navItemActive {
				padding:4px 1px 2px 33px;
			}
		
	/*** sub nav ***/
		.subNav .navItem span {
			width:22px;
			height:96px;
		}
		/*** subNav states ***/
			.subNav .navItem span {
				top:-24px;
			}
			.subNav .navItemGrayed span {
				top:0px;
			}
			.subNav .navItemOver span {
				top:-48px;
			}
			.subNav .navItemActive span {
				top:-72px;
			}
			/* apply a depress effect to label */
			.subNav .navItemActive {
				padding:4px 1px 2px 24px;
			}
		/*** subNav_left ***/
			#subNav_left .navItem {
				float:none;
			}

/*-------------------------------------------
| Skin Picker
---------------------------------------------*/
	#skinPicker {
		position:absolute;
		top:75px;
		right:40px;
		overflow:hidden;
		display:none;
	}
	#skinPickerLabel {
		display:none;
		color:#999;
		font-size:9px;
		float:left;
		margin:0 5px 0 0;
	}
	#skinPickerSelector {
		float:left;
		margin-top:4px;
		width:30px;
		height:8px;
	}
	.skinDot {
		float:left;
		width:8px;
		height:8px;
		margin-right:3px;
	}
	.skinDot span {
		width:8px;
		height:32px;
	}
	/*** skinDot states ***/
		.skinDotDisabled span {
			top:0px;
		}
		.skinDot span {
			top:-8px;
		}
		.skinDotOver span {
			top:-16px;
		}
		.skinDotActive span {
			top:-24px;
		}

/*-------------------------------------------
| clearfix
---------------------------------------------*/
	.clearfix:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}	
	.clearfix {
		display: inline-block;
	}
/*-------------------------------------------
| Modal Dialogs
---------------------------------------------*/
	.modalShell {
		height:100%;
		width:100%;
		position:absolute;
		top:0px;
		left:0px;
		display:none;
	}
	.modalShield {
		width:100%;
		height:100%;
		position:absolute;
		top:0px;
		left:0px;
		z-index:3000;
		background-color:#000;
		opacity:0.3;
		-moz-opacity:0.3;
		filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
		cursor:not-allowed;
	}
	
/*-------------------------------------------
| Misc
---------------------------------------------*/
	.loading {
		background-image:url("/images/sketchbook/loading.gif");
		background-position:center center;
		background-repeat:no-repeat;
	}