/* ==================================== */
/* == ELEMENT ATTRIBUTES FOR SCREENS == */
/* ==================================== */

/* GENERAL ELEMENTS */

body {
	background: #f68922 url(../../images/background-body.gif);
	}
	h2 {
		color: #7a1f80; /* Color sampled from concept */
		}	
	h3, h4, h5, h6 {		
		color: #30b349; /* Color sampled from concept */
		}
	h2.integrated, h3.integrated, h4.integrated, h5.integrated, h6.integrated {
		
		}	
	a {
		color: #671a6c; /* Color sampled from concept */
		}
	a:hover {
		text-decoration: none;
		}
	.date {
		display: block;
		font-style: italic;
		}
	div.category {
		margin-bottom: 30px;
		}
	/* Hide/show with JavaScript */
	div.hide {
		display: none;
		}
	/* Party Planning with Penny */
	p.penny-download-link a.pdf {
		padding-right: 0;	
		padding-left: 19px;									
		background-position: left 3px;
		}	
	p.penny-video-link a {
		display: inline-block; /* Need to set for IE due to improper rendering of backgrounds within inline elements that wrap */
		padding-left: 19px;										
		background: transparent url(../../images/icons/video.gif) left 3px no-repeat;
		}		
	/* Features within content */
	div.feature-side {
		float: right;
		width: 150px;
		margin: 0 0 15px 15px;
		padding: 15px 15px 0;
		border: 1px solid #eee;
		}
	/* Videos and Categories - manipulated via JavaScript */
	ul.videos {						
		margin: 0;
		padding: 0;
		}		
		ul.videos li {							
			list-style-type: none;
			margin-top: 20px;
			margin-bottom: 20px;
			padding: 20px 25px 0;
			border: 1px solid #eee;
			}
			ul.videos p {
				margin-bottom: 5px;
				font-size: 1.3em;														
				}
			ul.videos object {
				margin-bottom: 25px;
				}
		ul.videos li.hide {
			list-style-type: square;
			margin: 0 0 0 20px;	
			padding: 0;
			border: none;
			}
			ul.videos li.hide p {
				display: inline;
				font-size: 1em;
				text-decoration: underline;
				}
			ul.videos li.hide p:hover {
				cursor: pointer;
				text-decoration: none;
				}
			ul.videos li.hide div.video {
				display: none;
				}	
	/* Header adjustments */				
	h2.special, h3.special, span.question, span.answer {
		color: #7441b2;
		font-size: 1.2em;
		font-weight: bold;
		}
	h4 + ul {
		margin-top: -15px;
		}
   	span.question, span.answer {
   		margin-right: 5px;
   		}
	/* Image gallery */
	div.gallery {	
		clear: both;	
		position: relative;
		top: -15px;
		margin-top: 15px;
		}
		div.gallery h4 {
			position: relative;
			top: 10px;
			}
		div.gallery a {
			float: left;
			display: block;
			margin-right: 13px;
			margin-bottom: 13px;
			}
		div.gallery img {
			display: block;
			width: 130px;
			height: 130px;
			border: 1px solid #000;
			}
		p.featured img {
			border: 1px solid #000;
			}
	/* Award Images */
	div.awards {
		}
		div.awards img {
			margin: 0 15px 10px 0;
			}
		div.awards img.last {
			margin-right: 0;
			}
	/* Kit Contents */
	.contents img {
		margin-right: 15px;
		}
	/* Tank Capacity Tables */
	.capacity {
		float: left;
		width: 205px;
		margin-top: 20px;
		margin-right: 20px;		
		}
	.capacity + .last {
		margin-right: 0px;		
		}
	table {
		border-top: 1px solid #30b349;
		border-left: 1px solid #30b349;
		border-right: 1px solid #30b349;		
		}
		caption {
			padding: 5px;
			text-align: center;
			color: #fff;
			background: #58135b url(../../images/corners-205-white-top.gif) no-repeat; /* Color sampled from navigation */
			}
		th {
			padding: 5px;
			text-align: center;
			color: #fff;			
			background-color: #30b349;
			}
		td {
			padding: 5px;
			text-align: center;
			border-top: 1px solid #30b349;
			}
		div.capacity div.footer {
			position: relative;
			top: -22px;
			width: 205px;
			height: 8px;			
			background: transparent url(../../images/corners-205-border-bottom.gif) no-repeat;
			}
	fieldset.header {
		margin: 0 0 15px 0;
		padding: 0 0 15px 0;
		border-left: 0;
		border-right: 0;
		border-top: 0;
		}		
	legend.header { /* EDITED IN IE7 CSS */
		margin-bottom: 10px;
		color: #30b349;
		font-size: 1.2em;
		font-weight: bold;
		}			
	fieldset.single {
		display: inline;			
		width: 195px;
		margin-right: 15px;
		margin-bottom: 5px;
		padding: 0;		
		border: none;
		}		
		fieldset.single input {
			width: 195px;				
			}
		fieldset.single select {
			width: 199px;
			}
	fieldset.double {
		clear: both;
		width: 410px;
		margin-bottom: 5px;			
		padding: 0;
		border: none;
		}
		fieldset.double input {
			width: 408px;
			}			 
		fieldset.double textarea {
			width: 410px;
			}
	fieldset.multiple {			
		clear: both;
		width: 390px;
		margin-top: 10px;					
		padding: 10px;
		border: 1px solid #ccc;
		}	
	.required {
		clear: both;
		/* REM margin-top: 15px; */
		}
	.submit {				
		clear: both;
		margin-top: 15px;
		}
	/* Validation */
	label.error { 
		clear: both;
		color: red; 
		padding-left: .5em; 
		}
	.partner {
		width: 190px;	
		text-align: center;		
		margin: 20px 10px 30px 0;
		}			
	ul.images a {
		height: 1.5em;
		overflow: hidden;	
		}
	ul.images a:hover {
		position: relative;
		z-index: 100;
		}
		ul.images a img {
			display: none;
			position: relative;	
			top: -2em;	
			float: right;
			}
		ul.images a:hover img {
			display: block;
			}
	/* Additional inputs based on previous input selection */
	div.optionalinputs {
		margin-top: 10px;
		}
	/* Store listings */
	ul.stores {
		margin-top: 15px;
		}
	/* Images displayed on Planning ideas pages */
	div.imageupload {
		width: 440px;
		height: auto;
		overflow: hidden;
		margin-top: 25px;
		}
	/* Party Club Scrapbook */
	div.galleryphoto {
		float: left; 
		margin-bottom: 10px; 
		margin-right: 10px;
		padding: 10px; 
		border: 1px solid #eee;		
		text-align: center;
		}
		div.galleryphoto ul, div.galleryphoto li {
			margin: 0;
			padding: 0;
			text-align: left;
			list-style-type: none;
			}
	/* Party Club Wish Lists */
	table.wishlist {
		width: 100%;
		}
		table.wishlist th, table.wishlist td {
			text-align: left;
			border: 1px solid #30B349;
			}
		table.wishlist p {
			margin: 0;
			}
	/* Party Club Invitations */
	p.invitationimage img {
		width: 367px; /* Override true size (img loaded dynamically) */
		height: 223px;
		}	
	/* Party Club Party Planning Messages */
	img.pseudocheckbox {
		display: none;
		}
		
/* SPECIFIC ELEMENTS */	

div#main {
	position: relative; /* Set so that child elements can be positioned relative to this element */
	width: 796px; /* Width of background image - slightly wider than ideal to contain the shadow edge. */
	height: auto;
	min-height: 500px; /* Arbitrary - EDITED IN IE 6 CSS */
	margin: 0 auto 0 auto; /* Allow auto centering - EDITED IN IE 5.5 CSS */
	background: transparent url(../../images/background-main.png) repeat-y; /* Uses PNG transparency - EDITED IN IE 6 CSS */
	}
	/* Header */
	div#header {
		width: 780px;
		height: 201px;		
		margin-left: 8px; /* Move over so the shadow can be seen */
		overflow: hidden; /* Fixed size of background-image */
		background: #914dd4 url(../../images/background-header.jpg) no-repeat; /* Color sampled from concept - switched to PNG because of Safari color issue - not best solution */
		}
		div#header h1 a {
			display: block;
			width: 250px;
			height: 124px;
			overflow: hidden;
			margin: 8px 0 0 18px;
			text-indent: -10000px; /* Hide text from standard browsers */
			background: transparent url(../../images/logo-BalloonTime.jpg) no-repeat;	
			}
	/* Content */
	div#content {
		position: relative; /* Used for Media Center image previews */
		float: right;		
		width: 437px; /* Total is 455 minus padding - Set to width of largest element (large button) - EDITED IN IE 5.5 CSS */
		height: auto;
		margin-right: 59px; /* EDIT IN IE 6 CSS */
		margin-top: 30px;
		padding-right: 18px; /* Text should be no wider than 437px per concept */		
		}		
		/* Types of content (used on Penny Planning pages) */
		div#primary {
			float: left;
			width: 281px;
			padding-right: 20px;
			margin-right: 10px;
			border-right: 1px solid #ccc;
			}
			div#primary ul.planning {
				list-style-type: none;
				margin-left: 10px;
				margin-right: 0;
				}
				div#primary ul.planning h4 {
					margin-bottom: 0;					
					text-transform: uppercase;					
					}
					div#primary ul.planning h4 a {
						color: inherit;
						text-decoration: none;
						}
					div#primary ul.planning h4 a:hover {
						text-decoration: underline;
						}
		div#aside {
			float: right;
			width: 125px;
			}
			div#aside img.penny {
				position: relative;
				left: -11px;
				border-left: 1px solid #fff;
				border-bottom: 10px solid #fff;
				}	
		a#promo-celebrations {
			display: none; /* TEMPORARILY REMOVED 9/2/10 GML - FOR PAFOF BUTTON */
			position: absolute;
			top: -143px;
			left: 138px; /* EDITED IN IE 6 CSS */				
			}
		div#coupon {
			width: 728px;
			height: 270px;
			overflow: hidden;
			margin: 0 auto;
			text-align: center;
			}
			div#coupon img, div#coupon2 img {
				display: none; /* Hide coupon by default */
				}
				div#coupon-flash {					
					text-align: center;
					}
					div#coupon-flash img {
						display: block;
						margin: 0 auto;
						}
		img#award {	/* placement of product award logos */
			position: absolute;			
			top: -40px;
			right: 160px;
			}
		div#boxes {
			float: left;
			margin: 0 15px 5px 0;
			}
			div#boxes img {
				width: 110px;
				height: 146px;
				}	
		/* Home FEATURES */
		div.feature-home {
			float: left;
			width: 215px;	
			margin-top: 20px;		
			}
		div#feature-1.feature-home {
			position: relative;
			top: -25px;
			left: 20px;
			}
			div#feature-1.feature-home h5 {
				margin-bottom: 6px;
				}
			div#feature-1.feature-home div.feature {
				margin-top: 25px;
				}
		/* Home page double feature */
		h5.double-feature {			
			margin-bottom: 5px;			
			}
		div#double-feature {
			position: relative; /* This set so that left column hyperlink can be positioned at the bottom of the column regardless of whether the other column is taller */
			z-index: 1;
			width: 220px;
			overflow: hidden;
			background: #6fc21f url(../../images/background-features.gif) -230px 0px;
			border-bottom: 35px solid #fff; /* Used for bottom margin due to Opera bug */
			}
			div#double-feature div.feature {
				width: 196px; /* EDITED IN IE 5.5 CSS */
				overflow: visible;
				padding: 14px 12px;
				color: #fff;
				background-repeat: no-repeat;
				}				
				div#double-feature a {
					color: #fff;
					text-decoration: none;
					}
				div#double-feature a:hover {
					text-decoration: underline;
					}
			div#feature-2 {
				position: relative;
				text-align: center;			
				background-image: url(../../images/background-feature-2-top.gif);
				}	
			div#double-feature div.foot {				
				width: 450;
				height: 119px;
				margin-top: -119px;
				background: transparent url(../../images/background-features-foot.gif) -230px 0px;
				}	
		/* Home poll */
		div#poll {
			width: 450px;
			height: auto; /* Actual height 450 - set lower to get rid of whitespace at bottom of page */
			overflow: visible; 
			}		
	/* Navigation */
	div#mainnav {
		position: relative;
		z-index: 10;
		width: 250px;
		height: auto;
		min-height: 600px; /* Height of background image 634 */		
		margin-bottom: 65px; /* EDITED IN IE 7 CSS */
		margin-left: 8px; /* Move over so the shadow can be seen */
		padding-top: 30px;
		background: transparent url(../../images/navigation/sidebar.png) no-repeat;
		}
		/* Primary navigation */
		ul.nav-primary, ul.nav-secondary, ul.nav-tertiary {				
			margin: 0;
			padding: 0;
			list-style-type: none;
			}		
			ul.nav-primary li { /* Cascades to other nav levels */				
				display: block; /* From Alex's code */
				margin: 0 0 0 15px;
				padding: 0;
				}						
				ul.nav-primary li a {				
					display: block;					
					height: 35px; /* 30px height + 5px padding-top = 35px total height */
					overflow: hidden; /* Needed for spring code */		
					padding: 4px 0 0 14px;
					font-size: 12px;
					line-height: 17px;
					/* REM - prevent IE resize to appease client font-size: .9em; */
					/* REM per client font-weight: bold; */
					color: #fff;
					text-decoration: none;					
					background: transparent url(../../images/navigation/btn_orange_normal_arrow.png) no-repeat; /* Uses PNG transparency - EDITED IN IE 6 CSS */
					}
					ul.nav-primary li a.subnav-header {					
					background-image: url(../../images/navigation/btn_purple_normal.png); /* Uses PNG transparency - EDITED IN IE 6 CSS */
					}				
				ul.nav-primary li a.pafof {				
					display: block;					
					height: 76px; /* 30px height + 5px padding-top = 35px total height */
					overflow: hidden; /* Needed for spring code */		
					padding: 5px 0 0 14px;
					font-size: .9em;
					color: #fff;
					text-decoration: none;
					text-indent: -10000px; /* Hide text from standard browsers */
					background: transparent url(../../images/navigation/btn_green_large_pafof.png) no-repeat; /* Uses PNG transparency - EDITED IN IE 6 CSS */
					}
				ul.nav-primary li a:hover {
					color: #c1b2d6;
					}
					div#mainnav ul.nav-primary ul.nav-tertiary {
						width: 160px !important;				
						margin-top: -5px;
						margin-left: 10px;
						padding-bottom: 5px;						
						}
						div#mainnav ul.nav-primary ul.nav-tertiary li {											
							background-image: none;
							border-bottom: none;
							}
							div#mainnav ul.nav-primary ul.nav-tertiary a {
								margin-left: 8px;
								padding-top: 0;
								padding-bottom: 0;
								text-indent: -8px;
								}												
					
					/* Spring code - Originally by Alex */															
					/* Subnavigation */	
					div.hideoverflow {
						position: relative; /* Added to move secondary navigation up against primary navigation buttons */
						top: -13px; /* Added to move secondary navigation up against primary navigation buttons - EDITED IN IE 5.5 CSS */
						left: 5px;	/* Added By RAS 4-28-08 to center up subnav against new button width.*/
						overflow: hidden;
						margin: 0px;
						}
						#mainnav .subnav ul {
							width: 180px; /* EDITED IN IE 5.5 CSS */
							padding: 0 0 0 10px;
							}					
							#mainnav .subnav ul li {
								display: block;							
								margin: 0;
								padding: 0;								
								background: transparent url(../../images/navigation/sub_nav_bg_middle.gif) repeat-y;
								border-bottom: 1px #ccc dotted;
								}
							#mainnav .subnav ul li.last {
								background: transparent url(../../images/navigation/sub_nav_bg_bottom.gif) left bottom no-repeat;							
								border-bottom: none;
								}
								#mainnav .subnav ul li a {
									color: #fff;	/*#ac7d1a;*/
									display: block;
									height: 100%; /* Need to prevent bizarre overflow issues */							
									padding: 5px 8px 5px 8px;
									background-image: none;	
									filter: none !important; /* Need highest importance to override IE6-specific CSS rule on parent element */							
									}
								#mainnav .subnav ul li a:hover { 
									color: #c1b2d6; 
									}						
								#mainnav .subnav li.active a:hover { 
									color: #2a5a18; 
									}	
									
								/* ~~~~~~~~~~~~~~~~~~~~~~~~~ */
								/* CUSTOM NAVIGATION BUTTONS */
								/* ~~~~~~~~~~~~~~~~~~~~~~~~~ */
								#mainnav ul li#button-email a {	
									position: absolute;
									top: -181px;
									left: 505px;
									width: 135px;						
									height: 26px;
									text-indent: -100000px;
									background-image: url(../../images/navigation/btn_email_this_page.gif) !important;
									filter: none !important;
									}
								li#button-email {
									display: none; /* Hidden by default - requires JavaScript to function so shown via JavaScript */
									}
								li#button-pafof {
									position: absolute;
									top: -118px;
									left: 265px;		
									margin: 0;							
									}
									li#button-pafof a {
										height: auto;
										padding: 0;
										background-image: none;
										}
	/* Footer */
	div#footer {
		position: relative;	
		left: 8px;
		clear: both;
		width: auto;		
		height: 272px;
		margin-top: -65px;
		overflow: visible; /* Show navigation which is outside of defined height to prevent background from showing through */	
		}
		div#footer ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
			}
			div#footer li {				
				display: inline;
				}
				div#footer acronym {
					border: none;
					}
		div#footerphoto {	
			width: 780px;
			height: 250px;		
			}
		div#uses {
			width: 780px;
			height: 22px;	
			color: #bc8fbf;
			background: transparent url(../../images/background-footernav.png) repeat-x;
			/* REM GML
			border-top: 1px solid #fff;
			border-bottom: 1px solid #fff;
			*/
			text-align: center;
			}
			div#uses li {
				/* EDITED IN IE 7 CSS */							
				padding: 0 3px 0 8px;
				font-size: .8em;
				text-transform: uppercase;
				background: transparent url(../../images/dot.gif) 0px 5px no-repeat; /* Use image rather than bullet because of better position control */
				}
			div#uses li.first {
				background-image: none; /* Remove dot from first item */
				}
		div#footernav {
			position: absolute; /* For IE 6 */		
			width: 779px;
			height: auto;
			margin-top: 7px;			
			text-align: center;		
			}
			div#footernav ul {
				margin-bottom: 15px; /* Provide some space at the bottom of the page */
				}
				div#footernav li {											
					padding: 0 6px 0 9px;					
					border-left: 1px solid #fff;								
					}
				div#footernav li.first {					
					border: none;
					}
					div#footernav a {								
						color: #fff;
						text-decoration: none;	
						white-space: nowrap;				
						}
					div#footernav a:hover {
						text-decoration: underline;
						}
	/* Balloon photo */
	div#balloons {		
		position: absolute;
		z-index: 999;
		top: 0px;
		right: -90px;
		width: 234px;
		height: 160px;
		background: transparent url(../../images/header_balloons.png) no-repeat; /* EDITED IN IE 6 CSS */	
		}
	/* Sound effects */
	div#soundeffects {
		position: absolute;
		top: 0px;
		left: 8px;
		width: 40px;
		height: 14px;
		}
		
	/* sIFR */	
	.sIFR-flash {
		visibility: visible !important;
		margin: 0;
		}	
	.sIFR-replaced {
		visibility: visible !important;
		}
	span.sIFR-alternate {
		position: absolute;
		left: 0;
		top: 0;
		width: 0;
		height: 0;
		display: block;
		overflow: hidden;
		}
	.sIFR-hasFlash h2 {		
		display: inline; /* Added to allow floated element to move this element to the right */
		visibility: hidden;		
		margin-bottom: 5px; /* Adjustment */
		font-weight: bold;
		letter-spacing: -6px;
		font-size: 35px; /* Adjustment */
		line-height: 45px;
		}
		
/* Email This Page box */
div#email-this-page {
	display: none; /* Hidden by default */
	position: fixed;
	z-index: 1000000;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-image: url(../../images/send-this-page/screen.png);
	}
	div#email-this-page form {
		position: relative;
		top: 100px;
		width: 482px; /* 517 */
		height: 173px; /* 273 */
		margin: 0 auto;
		padding: 100px 0 0 35px;
		background: transparent url(../../images/send-this-page/background-send-this-page.png) no-repeat;
		}
		div#email-this-page fieldset {
			display: block;
			float: none;
			color: #fff;
			}
		div#email-this-page fieldset input {
			width: 270px;
			}
		div#email-this-page p {
			position: absolute;
			top: 220px;
			left: 223px;			
			}
		div#email-this-page form a {
			position: absolute;
			top: 19px;
			left: 407px;
			width: 88px;
			height: 28px;
			background: transparent url(../../images/send-this-page/button-close.png) no-repeat;
			}
		
/* MODULES */
	
/* PSEUDO-SELECT MENU version 3.1 GML */
/* Use with JavaScript */
div.pseudo-select-active, div.psuedo-select-active.off {	
	position: relative;
	width: 300px;
	height: 18px;
	overflow: hidden;
	margin-bottom: 15px;
	color: #000;	
	background-color: #fff;	
	border: 1px solid #7f9db9;		
	}
div.pseudo-select-active.on {
	overflow: visible;
	border-bottom: 0;
	margin-bottom: 16px;
	}	
div.pseudo-select-active:hover {
	cursor: pointer;	
	}
	div.pseudo-select-active span {
		position: relative;
		top: -3px;
		left: 1px;
		display: block;
		min-height: 18px;		
		padding-top: 3px;
		padding-left: 3px;
		overflow: visible;
		color: #000;
		background: transparent url(../../images/pseudoselect_arrow.gif) right 2px no-repeat;														
		}	
	div.pseudo-select-active ul {	
		position: absolute;
		top: 19px;
		left: -1px;
		display: block;		
		list-style-type: none;
		width: 300px;
		height: 120px;
		margin: 0;			
		overflow: auto;	
		overflow-x: hidden;
		overflow-y: scroll;	
		background-color: #fff;	
		border: 1px solid #7f9db9;
		border-top: 0px;					
		}	
		div.pseudo-select-active ul a {
			display: block;
			width: 280px;					
			padding-left: 3px;
			color: #000;
			text-decoration: none;
			}
			div.pseudo-select-active ul a:hover {
				background-color: #b2b4bf;
				}