/**
* LG - Make Life Shine | Make Life Pop
*
* Microsite for two new products from LG - LG Shine Touch and LG Pop.
*
* @project 		LG Microsite
* @version 		1.0
* @author 		Mike Badgley, iStudio
* @copyright	2010
*/

/**
* Reset
*
* Global reset of all X/HTML elements. This section MUST appear at the top!
*
* @author 	Eric Meyer, meyerweb.com
* @version	1.0 | 20080212
* @see 		http://meyerweb.com/eric/tools/css/reset/
* @section 	reset
* @media 	all
*/
@media all {

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}

	/* remember to define focus styles! */
	a:active {
		outline: 0;
	}

	/* remember to highlight inserts somehow! */
	ins {
		text-decoration: none;
	}
	del {
		text-decoration: line-through;
	}

	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

}



/**
* Core Layout
*
* Basic styling for most X/HTML elements to give a general layout that is
* usable and shared across all devices and browsing platforms.
*
* @section	core
*/
html {
	background-color: #f5f5f6;
	font-size: 100.01%;
}

body {
	background-color: #fff;
	color: #575757;
	font: normal 62.5%/1 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
	min-width: 940px;
}

a:link,
a:visited,
a:hover,
a:active {
	color: #b41751;
	text-decoration: none;
}
a:hover,
a:active {
	text-decoration: underline;
}

address, p, hr {
	font-size: 1.20em;
	line-height: 1.33em;
	margin: 1.33em 0;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 1.33em 0;
}
	/* for Cufon.replace('h1') */
	.cufon-loading h1,
	.cufon-loading h2 {
		visibility: hidden !important;
	}

	h3 {
		color: #5d5c5c;
		font-size: 1.40em;
		font-weight: bold;
		margin-bottom: 0.50em;
	}
		h3 + p,
		h3 + dl,
		h3 + ul,
		h3 + ol {
			margin-top: 0;
		}

blockquote, dl, ol, ul {
	font-size: 1.20em;
	margin: 1.33em 0 1.33em 2.27em;
}

form { }
	input[type="text"],
	textarea {

	}
	    textarea:focus {
		    border: 1px solid #a0acbf;
	    }



/**
* Page Layout
*
* Define major sections of the template - header, column(s) and footer.
*
* @section	layout
* @media	screen, projection
*/
@media screen, projection {

	/**
	* @subsection Page layout
	*/
	#page {
		margin: 0 auto;
		position: relative;
		width: 940px;
	}


	/**
	* @subsection Header
	*/
	#header {
		height: 124px;
		position: relative;
		width: 100%;
		z-index: 100;
	}
		#header .logo {
			position: absolute;
		}
			/* LG Pop. */
			#header .logo1 {
				left: 1px;
				top: 25px;
			}

			/* LG Shine Touch. */
			#header .logo2 {
				left: 104px;
				top: 25px;
			}

			/* LG Life's Good. */
			#header .logo3 {
				left: 838px;
				top: 15px;
			}

			#header .logo,
			#header .logo img {
				display: block;
				text-decoration: none;
			}


	/**
	* @subsection Content
	*/
	#content {
		position: relative;
		width: 100%;
	}


	/**
	* @subsection Footer
	*/
	#footer {
		background: #f5f5f6 url(../_images/layout_footerbg_1600w_356h.jpg) repeat-x 50% -100px;
		color: #989898;
		font-family: Arial, Helvetica, sans-serif;
		margin: 0 auto;
		/*min-height: 216px;*/
		padding: 80px 0 1px 0;
		position: relative;
		text-align: center;
		width: 100%;
	}
		#footer a:link,
		#footer a:visited,
		#footer a:hover,
		#footer a:active {
			color: #989898;
		}

		#footer p { font-size: 1.10em; }
		#footer p.copyright {
			color: #ac0040;
			font-size: 1.20em;
			font-weight: bold;
		}


	/**
	* @section Miscellaneous
	* @subsection Skip over navigation
	*/
	#skipper {
		position: absolute;
		text-indent: -9999px;
	}


	/**
    * @section Miscellaneous
	* @subsection Graphical headers
	* @note This is a nearly-retired item as Cufon is now the solution for an
	* text replacement that is required.
	*/
	.bg {
		background-color: transparent;
		background-position: left top;
		background-repeat: no-repeat;
		display: block;
		overflow: hidden;
		text-decoration: none;
		text-indent: -5000px;
	}


	/**
    * @section Miscellaneous
	* @subsection Remove horizontal scrollbar
	* @note JavaScript functionality that checks the width of the page and
	* compares it to the browser window's width.
	*/
	html.hide {
		overflow-x: hidden;
	}
	body.hide {
		overflow-x: hidden;
		*overflow-x: visible;
	}


	/**
	* @section Miscellaneous
	* @subsection Float "clearfix"
	*/
	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		line-height: 0;
		visibility: hidden;
	}
	.clearfix {
		display: inline-block;
	}
	/* Hide from IE Mac \*/
	.clearfix {
		display: block;
	}
	/* End hide from IE Mac */

}
@media print {

	#header {
		border-bottom: 1px solid #ccc;
		margin-bottom: 2.0em;
		padding-bottom: 1.0em;
	}
		#header .logo img {
			margin-right: 20px;
			vertical-align: middle;
		}

    #skipper { display: none; }

	#content { margin-bottom: 3.0em; }

    #footer {
    	border-top: 1px solid #ccc;
    	padding-top: 1.0em;
    }

}



/**
* Navigation
*
* Styling for the primary, secondary, etc. navigation is found within this
* section.
*
* @section	navigation
* @media	screen, projection
*/
@media screen, projection {

	/**
	* @subsection Global
	*/
    ul.navigation {
		list-style-type: none;
		margin: 0;
    }
    	ul.navigation li {
    		background-image: none;
    		margin: 0;
    		padding: 0;
    	}


	/**
	* @subsection Toolbar
	*/
    ul.navigation.toolbar {

    }


	/**
	* @subsection Primary
	*/
    ul.navigation.primary {
		background: transparent url(../_images/layout_primarynavigation_980w_61h.png) no-repeat 0 0;
		height: 61px;
		left: -18px;
		position: absolute;
		top: 63px;
		width: 980px;
    }
    	ul.primary li {
    		display: inline;
    		float: left;
    		margin-top: 13px;
    	}
    		ul.primary a:link,
    		ul.primary a:visited,
    		ul.primary a:hover,
    		ul.primary a:active {
    			background-image: url(../_images/nav_primary_760w_37h.jpg);
    			height: 37px;
    			text-decoration: none;
    		}

}
@media print {

    ul.navigation { display: none; }

}



/**
* Mobile
*
* The follow styles are applied to mobile devices.
*
* Absolute positioning is an absolute no-no on mobile devices.
* There’s no room to float anything on such a small screen either.
* We need to keep everything in the document flow so that the
* mobile UA sees a one column layout.
*
* Ref: http://nidahas.com/2005/04/04/mobile-css-first-steps/
*
* @section	mobile
* @media	handheld
*/
@media handheld {

	* {
	   background-image: none !important;
	   float: none !important;
	   position: static !important;
	}

}



/**
* Graphic Feature/Callouts
*
* Features that sit within the footer of the page - normally two displayed
* side-by-side.
*
* @section	callouts
* @media	screen, projection
*/
@media screen, projection {

	div.buttons {
		margin: 0 auto;
		position: relative;
		width: 940px;
		z-index: 1000;
	}
		div.buttons img.button {
			float: right;
			margin-right: 8px;
		}
		div.buttons a:first-child img.button,
		div.buttons img.first.button{
			float: left;
			margin: 0 0 0 20px;
		}

		.layout-home div.buttons img.button { margin-right: 18px; }
		.layout-home div.buttons img.first.button { margin: 0 0 0 18px; }

		div.buttons div.feature {
			position: absolute;
			right: -15px;
			top: 0;
			width: 462px;
		}
			div.buttons div.feature img.button {
				display: none;
				float: none;
				left: 0;
				margin: 0 !important;
				position: absolute;
				top: 0;
			}

}
@media print {

	div.buttons { display: none; }

}



/**
* Page Layout: Home
*
* Styling for the "Home" section.
*
* @section	home
* @media	screen, projection
*/
@media screen, projection {

	.layout-home #page {
		z-index: 50;
	}
	.layout-home #footer {

		padding-top: 230px;
		margin-top: -200px;
		z-index: 25;
	}

	.layout-home #splash {
		background: transparent url(../_images/layout_homebgtop_1218w_493h.jpg) no-repeat 0 0;
		height: 707px;
		margin: -97px 0 0 -108px;
		position: relative;
		width: 1218px;
	}
		.layout-home #splash div.layout {
			background: transparent url(../_images/layout_homebgtransbottom_1218w_214h.png) no-repeat 0 100%;
			height: 100%;
			width: 100%;
		}

		.layout-home #splash #flash {
			left: 252px;
			position: absolute;
			top: 128px;
		}

	.layout-home div.buttons {
		left: 108px;
		position: absolute;
		top: 545px;
	}

}



/**
* Page Layout: "The Phones"
*
* Styling for the "The Phones" section.
*
* @section	the-phones
* @media	screen, projection
*/
@media screen, projection {

	/**
	* @subsection LG Shine and LG Pop promotional pieces.
	*/
	div.promo {
		position: relative;
		zoom: 1;
	}
		/* Main sectio header (i.e. LG Pop). */
		div.promo h1 {
			background: transparent url(../_images/layout_keyline_30w_2h.gif) repeat-x 0 100%;
			margin: 0 0 27px 0;
			padding-bottom: 2px;
			position: relative;
		}

		/* Sub-headings. */
		div.promo h2 {
			color: #ac0040;
			font-size: 32.85px;
			line-height: 35px;
			font-weight: normal;
			margin: 36px 0 0 0;
			text-transform: uppercase;
			margin: 0 0 16px 0;
		}

		/* Introductory text, if applicable. */
		div.promo p.intro {
			font-size: 1.40em;
			line-height: 1.29em;
			margin-bottom: 2.93em;
		}

		/* Sidebar panel. */
		div.promo div.sidebar {
			display: inline;
			float: right;
			width: 300px;
		}
			div.promo div.sidebar div.layout {
				background: #ebebeb url(../_images/layout_graysidebar_300w_88h.gif) no-repeat 0 100%;
				color: #434343;
				margin-bottom: 40px;
				padding: 1px 10px 15px 17px;
				width: auto;
				zoom: 1;
			}

			div.sidebar ul {
				font-size: 1.10em;
				line-height: 1.64em;
				list-style-type: none;
				margin-left: 0;
			}
				div.sidebar ul li {
					background: transparent url(../_images/bullet_gray_4w_3h.gif) no-repeat 0 0.63em;
					margin-bottom: 0.73em;
					padding-left: 8px;
				}

		/* Graphical buttons. */
		div.promo div.sidebar a.bg {
			background-image: url(../_images/btn_BlackButtonsLarge.png);
			height: 38px;
			margin-bottom: 12px;
			width: 248px;
		}


	/**
	* @subsection LG Shine Touch promotional piece.
	*/
	div.promo.LGShine {
		background: transparent url(../_images/SHINE_graphic_338w_490h.jpg) no-repeat 0 0;
		height: auto !important;
		height: 413px;
		margin: -13px 0 0 -105px;
		min-height: 413px;
		padding: 77px 323px 0 341px;
		width: 381px;
		_padding-right: 0;
	}
		div.LGShine h1 { width: 704px; }
			div.LGShine h1 span.bg {
				background-image: url(../_images/hdr_LG_Shine_Touch_218w_40h.gif);
				height: 40px;
				width: 282px;
			}

		div.LGShine div.sidebar {
			display: inline;
			float: right;
			margin: -27px -323px 0 30px;
			width: 300px;
		}



	/**
	* @subsection LG Pop promotional piece.
	*/
	div.promo.LGPop {
		background: transparent url(../_images/POP_graphic_437w_492h.jpg) no-repeat 100% 0;
		height: auto !important;
		height: 409px;
		margin: -43px -187px 27px 0;
		min-height: 409px;
		padding: 83px 742px 0 0;
		width: 385px;
		_padding-right: 431px;
	}
		div.LGPop h1 { width: 699px; }
			div.LGPop h1 span.bg {
				background-image: url(../_images/hdr_LG_Pop_198w_50h.gif);
				height: 50px;
				width: 699px;
			}

		div.LGPop div.sidebar {
			display: inline;
			float: right;
			margin: -27px -314px 0 30px;
			width: 300px;
		}


	/**
	* @subsection Phone feature matrix (table).
	*/
	table.matrix {
		margin: 0 20px;
		width: 900px;
	}
	.layout-phones table.matrix { margin-bottom: 0; }

		table.matrix thead th {
			background: transparent url(../_images/layout_tableheader_900w_56h.gif) no-repeat 50% 100%;
		}
			.layout-phones table.matrix thead th.col1 { text-align: left; width: 364px; }
				.layout-phones table.matrix thead th.col1 span.bg {
					background: transparent url(../_images/hdr_Comparative_Matrix_Features_191w_56h.gif) no-repeat 0 100%;
					height: 107px;
					width: 191px;
				}

			.layout-phones table.matrix thead th.col2 { width: 204px; }
				.layout-phones table.matrix thead th.col2 span.bg {
					background-image: url(../_images/hdr_LG_Pop_150w_107h.gif);
					height: 107px;
					width: 150px;
				}

			.layout-phones table.matrix thead th.col3 { background-position: 100% 100%; }
				.layout-phones table.matrix thead th.col3 span.bg {
					background-image: url(../_images/hdr_LG_Shine_219w_107h.gif);
					height: 107px;
					width: 219px;
				}

		table.matrix tbody tr { vertical-align: top; }
		table.matrix tbody th {
			color: #5d5c5c;
			font-size: 1.40em;
			font-weight: bold;
			padding: 10px;
			text-align: left;
		}

		table.matrix tr.shade th,
		table.matrix tr.shade td {
			background-color: #ebebeb;
		}

		table.matrix tr.last th,
		table.matrix tr.last td {
			background-image: url(../_images/layout_keyline_10w_3h.gif);
			background-position: 0 100%;
			background-repeat: repeat-x;
			padding-bottom: 13px;
		}

		.layout-phones table.matrix span.bg.yes {
			background-image: url(../_images/bullet_pink_8w_7h.png);
			height: 7px;
			margin: 0 auto;
			width: 8px;
		}

}
@media print {

	.layout-phones div.sidebar {
		background-color: #ccc;
		border: 1px solid #ccc;
		display: inline;
		float: right;
		margin: 0 0 1em 2em;
		padding: 0.5em;
		width: 25%;
	}
		.layout-phones div.sidebar a.bg { display: none; }

	table.matrix {
		width: 100%;
	}
		table.matrix tr { vertical-align: top; }

		table.matrix th {
			font-weight: bold;
			font-size: 1.18em;
		}
		table.matrix th,
		table.matrix td {
			border-bottom: 1px solid #ccc;
			padding: 1em;
			text-align: left;
		}

}



/**
* Page Layout: "Pop Your Pic"
*
* The "Pop Your Pic" seciton is composed of a five screen/step layout. This
* template is also applied to the "Win With Pop" section - see step 4 of the
* Wizard.
*
* @section	poppic
* @media	screen, projection
*/
@media screen, projection {

	/* Each step (5) is wrapped within this element. */
	.layout-poppic div.wizard,
	.layout-winpop div.wizard {
		background: #fff url(../_images/background_popyourpic_1078w.jpg) no-repeat 0 0;
		color: #676767;
		font: normal 13px/1 'Trebuchet MS', Arial, Helvetica, sans-serif;
		height: 546px;
		height: 542px;
		margin: 60px 0 0 -44px;
		padding: 4px 123px 0 62px;
		position: relative;
		width: 1078px;
		width: 893px;
	}
		/* Main heading that sits at the top of each "wizard" (Pop Your Pic!). */
		div.wizard h1 {
			color: #ac0040;
			font-size: 32.85px;
			font-weight: normal;
			line-height: 35px;
			margin: 0 0 36px 0;
			text-transform: uppercase;
		}

		div.wizard h2 {
			color: #ac0040;
			font-size: 24px;
			line-height: 27px;
			font-weight: normal;
			text-transform: uppercase;
		}

		div.wizard p.instructions {
			font-size: 14px;
			line-height: 18px;
			margin: 0;
			text-transform: uppercase;
		}

		/* Navigation within the wizard to move forward/backward a step. */
		div.wizard div.navigation {
			bottom: 112px;
			height: 46px;
			left: 62px;
			position: absolute;
			text-transform: uppercase;
			width: 875px;
		}
			div.wizard a.button {
				background: transparent url(../_images/nav_popyourpicbg_161w_92h.png) no-repeat 0 0;
				color: #e96185;
				font-size: 14px;
				font-weight: bold;
				height: 46px;
				line-height: 1;
				position: absolute;
				text-align: center;
				text-decoration: none !important;
				text-transform: uppercase;
				top: 0;
				vertical-align: middle;
				width: 161px;
			}
				div.wizard a.button span { display: block; }

				div.wizard a.prev { left: 18px; }
				div.wizard a.next {
					background-position: 0 -46px;
					right: 0;
				}
					div.wizard a.prev span { padding: 0 5px 0 10px; }
					div.wizard a.next span { padding: 0 10px 0 5px; }



	/**
	* @subsection Step 1 of 5
	*/
	div.wizard.step1 {
		background-position: 0 0;
	}
		/* Instructions for this step of the wizard - top part if a graphic,
		while the bottom is plain text. */
		div.wizard.step1 p.instructions strong {
			color: #ac0040;
			display: block;
			font-size: 14px;
			line-height: 17px;
			margin-bottom: 8px;
		}

		/* Overview of the steps involved in completing the wizard. */
		div.wizard.step1 ul.overview {
			background: transparent url(../_images/assets_popyourpicstep1_742w_258h.png) no-repeat 48px 100%;
			height: 258px;
			margin: 25px 0 0 26px;
			width: 813px;
		}
			div.wizard.step1 ul.overview li {
				color: #ac0040;
				display: inline;
				float: left;
				font-size: 22px;
				line-height: 25px;
				text-align: center;
				text-transform: uppercase;
			}
			div.wizard.step1 ul.overview li.upload {
				width: 221px;
			}
			div.wizard.step1 ul.overview li.pop {
				margin-left: 67px;
				width: 189px;
			}
			div.wizard.step1 ul.overview li.share {
				margin-left: 85px;
				width: 251px;
			}

		/* Form fields to allow for selecting a image to be uploaded. */
		div.wizard.step1 div.navigation div.filebrowser {
			height: 32px !important;
			margin: 7px auto 0 auto;
			overflow: hidden;
			position: relative;
			width: 424px;
		}
			div.filebrowser div.browse {
				cursor: pointer;
				left: 0;
				position: absolute;
				top: 0;
				z-index: 1;
			}
				div.filebrowser input.file {
					line-height: 32px;
					font-size: 24px;
					height: 32px;
					position: absolute;
					-moz-opacity: 0;
					filter: alpha(opacity: 0);
					opacity: 0;
					position: absolute;
					top: 0;
					right: 0;
					z-index: 2;
				}

				div.filebrowser div.browse input {
					background: transparent url(../_images/layout_filebrowser_284w_30h.gif) no-repeat 0 0;
					border: 0;
					color: #333;
					height: 30px;
					line-height: 30px;
					margin: 1px 18px 0 0;
					padding: 0 5px;
					vertical-align: top;
					width: 274px;
				}


	/**
	* @subsection Step 2 of 5
	*/
	div.wizard.step2 {
		background-position: 0 -546px;
	}
		/* upload image (from step 1) that contains controls to allow the user
		to crop to a smaller thumbnail size. */
		div.wizard.step2 div.image-popper {
			background: transparent url(../_images/assets_popyourpicstep2_331w_284h.jpg) no-repeat 0 0;
			border: 1px solid #a1a1a1;
			display: inline;
			float: left;
			height: 284px;
			margin: 13px 32px 0 104px;
			position: relative;
			width: 331px;
		}
			div.wizard.step2 div.image-popper img.preview {
				display: block;
				margin: 0 auto;
			}

		div.wizard.step2 h2 {
			margin: 85px 0 19px 0;
		}

		/* Cropped version of the image on the left-side of the page. */
		div.wizard.step2 div.cropped {
			left: 536px;
			position: absolute;
			top: 269px;
		}
			div.wizard.step2 div.cropped img.cropped {
				border: 1px solid #a1a1a1;
				float: left;
				margin-right: 20px;
			}

			div.wizard.step2 div.cropped span {
				color: #ac0040;
				float: left;
				font-size: 16px;
				font-weight: bold;
				line-height: 20px;
				text-transform: uppercase;
				width: 240px;
			}


	/**
	* @subsection Step 3 of 5
	*/
	div.wizard.step3 {
		background-position: 0 0;
	}
		div.wizard.step3 h2 {
			margin: 57px 0 9px 20px;
		}
		div.wizard.step3 p.instructions {
			margin-left: 20px;
		}

		div.wizard.step3 div.image-chooser {
			margin: 48px auto 0px auto;
			position: relative;
			width: 538px;
		}
			div.wizard.step3 div.image-chooser ul {
				list-style-type: none;
				margin: 0;
			}
				div.wizard.step3 div.image-chooser ul li {
					display: inline;
					float: left;
					margin-left: 14px;
					text-align: center;
					width: 112px;
				}
					div.wizard.step3 div.image-chooser img.thumb {
						border: 1px solid #a1a1a1;
						display: block;
						height: 110px;
						margin-bottom: 14px;
						width: 110px;
					}


	/**
	* @subsection Step 4 of 5
	* @notes Same template is used for the "Win with Pop" section.
	*/
	div.wizard.step4 {
		background-position: 16px -1092px;
		height: auto !important;
		height: 405px;
		min-height: 405px;
		margin-top: 42px;
		padding-top: 22px;
	}
		div.wizard.step4 div.form {
			margin-left: 221px;
			margin-top: -17px;
			padding-top: 1px;
			position: relative;
			width: 705px;
		}
			div.wizard.step4 h2 {
				margin: 0 0 13px 0;
			}
			div.wizard.step4 a.skip {
				right: 18px;
				top: 0;
			}
			div.wizard.step4 p.instructions {
				background: transparent url(../_images/hdr_WinWithPopDetails.png) no-repeat 0 1px;
				height: auto !important;
				height: 200px;
				min-height: 200px;
				padding-right: 200px;
			}


		div.wizard.step4 div.form div.row {
			clear: left;
			margin-bottom: 10px;
			overflow: hidden;
			position: relative;
		}
			div.wizard.step4 div.form div.row div.column {
				display: inline;
				float: left;
			}
				div.wizard.step4 div.form div.row div.column.col1,
				div.wizard.step4 div.form div.row div.column.col2 { width: 244px; }


			div.wizard.step4 div.form label {
				color: #873349;
				display: block;
				font-size: 13px;
				line-height: 16px;
				margin: 0 0 2px 3px;
				text-transform: uppercase;
			}

			div.wizard.step4 div.form input[type="text"] {
				color: #a1a1a1;
				font: normal 13px/14px 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
				padding: 2px;
				vertical-align: middle;
				width: 215px;
			}
				div.wizard.step4 div.form input[name="postalcode"] { width: 83px; }

			div.wizard.step4 div.form select {
				color: #a1a1a1;
				font: normal 13px/14px 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
				padding: 2px;
				vertical-align: middle;
				min-width: 125px;
			}


			div.wizard.step4 div.form span.note {
				color: #a1a1a1;
				text-transform: uppercase;
			}

			div.wizard.step4 div.row.signup label {
				color: #7a7a7a;
				margin: 3px 0 0 0;
				padding-left: 27px;
				position: relative;
				text-transform: none;
			}
				div.wizard.step4 div.row.signup input[type="checkbox"] {
					left: 0;
					position: absolute;
					top: 0;
				}

		div.wizard.step4 div.navigation {
			background: transparent url(../_images/layout_keyline_30w_2h.gif) repeat-x 0 100%;
			bottom: auto;
			height: 61px;
			margin: 34px 0 0 -57px;
			position: relative;
			text-align: right;
			width: auto;
		}
			div.wizard.step4 div.navigation a.bg.next {
				background-position: 0 -500px;
				margin-right: 46px;
				text-align: left;
			}
			div.wizard.step4 div.navigation a.skiplink,
			div.wizard.step4 div.navigation a.rules {
				line-height: 46px;
				margin-right: 220px;
				text-decoration: underline;
			}

			div.wizard.step4 div.navigation a.rules {
				left: 216px;
				position: absolute;
			}


	/**
	* @subsection Step 5 of 5
	*/
	div.wizard.step5 {
		background-position: 0 0;
	}
		div.wizard.step5 h2 {
			margin: 0 0 11px 0;
		}

		div.mp3download {
			color: #5c656e;
			font-weight: bold;
			font-size: 15px;
			line-height: 18px;
			text-transform: uppercase;
		}
			div.mp3download a {
				background: #640927 url(../_images/btn_DownloadMP3.png) no-repeat 0 0;
				color: #fff;
				display: block;
				height: 27px;
				letter-spacing: -1px;
				margin: 5px 0 0 37px;
				padding: 13px 0 0 50px;
				position: relative;
				text-decoration: none !important;
				white-space: nowrap;
				width: 179px;
				z-index: 100;
			}


		div.wizard.step5 a.bg.popagain {
			background-image: url(../_images/btn_BlackButtonsLarge.png);
			height: 38px;
			right: 95px;
			position: absolute;
			top: -8px;
			width: 248px;
		}

		div.wizard.step5 div.profile-share {
			left: 185px;
			position: absolute;
			top: 110px;
			width: 680px;
		}
			div.wizard.step5 div.profile-share div.twitter {
				float: left;
				position: relative;
				text-align: center;
				width: 260px;
			}
				div.wizard.step5 div.profile-share div.twitter p.bg {
					background: url(../_images/headers_PopYourPic.png) no-repeat 0 -78px;
					height: 29px;
					margin: 19px auto 15px;
				}


			div.wizard.step5 div.profile-share div.facebook {
				float: left;
				margin-left: 158px;
				position: relative;
				text-align: center;
				width: 260px;
			}

			div.wizard.step5 div.profile-share div.download {
				left: 0;
				position: absolute;
				top: 243px;
				width: 100%;
			}
				div.wizard.step5 div.profile-share div.download a.download {
					display: block;
					margin: 10px auto 0;
					text-decoration: underline;
					text-transform: uppercase;
				}

}



/**
* Page Layout: "The Features"
*
* JavaScript-powered page that offers a detailed overview of the two phones.
*
* @section	the-features
* @media	screen, projection
*/
@media screen, projection {

	.layout-features {

	}
		/**
		* @subsection LG Pop and LG Shine Touch slideshow
		*/
		.layout-features div.slideshow {
			background: transparent url(../_images/features/background_TheFeatures_1132w_545h.jpg) no-repeat 0 0;
			height: 545px;
			margin: 64px 0 -34px -102px;
			padding: 0 0 0 113px;
			position: relative;
			width: 1132px;
			width: 941px;
		}
		.layout-features div.slideshow.LGShine { background-position: 0 -545px; }

			/* Main section heading: "The Features" */
			div.slideshow h1 {
				color: #ac0040;
				font-size: 32.85px;
				font-weight: normal;
				line-height: 35px;
				margin: 0 0 36px 0;
				text-transform: uppercase;
			}

			/* Tabs for selecting the content pane (LG Pop or LG Shine Touch)
			to view. */
			div.slideshow > ul.tabs {
				height: 32px;
				list-style-type: none;
				margin: 0;
				position: absolute;
				left: 635px;
				top: 0;
				width: 380px;
			}
				div.slideshow > ul.tabs li {
					display: inline;
					float: left;
					margin: 0;
				}
					div.slideshow > ul.tabs a {
						background: transparent url(../_images/features/assets_TheFeatures.png) no-repeat 0 0;
						cursor: pointer;
						height: 32px;
					}
						div.slideshow > ul.tabs a.link1 {
							background-position: 0 -64px;
							width: 125px;
						}
						div.slideshow > ul.tabs a.link2 {
							background-position: 0 -96px;
							margin-left: 53px;
							width: 154px;
						}

						div.slideshow > ul.tabs a.link1.current,
						div.slideshow > ul.tabs a.link1:hover { background-position: 0 0; }

						div.slideshow > ul.tabs a.link2.current,
						div.slideshow > ul.tabs a.link2:hover { background-position: 0 -32px; }


			/* Tabs for selection the various 'mini' panes - i.e. Frame. */
			div.slideshow div.pane.parent ul.tabs {
				list-style-type: none;
				margin: 0;
				position: absolute;
				top: 341px;
			}
				div.pane.parent ul.tabs li {
					display: inline;
					float: left;
					margin: 0;
					padding: 0 15px;
				}
					div.pane.parent ul.tabs a {
						background: transparent url(../_images/features/nav_paneoff_16w_16h.gif) no-repeat 50% 0;
						color: #000;
						cursor: pointer;
						display: block;
						padding-top: 23px;
						text-decoration: none !important;
						text-transform: uppercase;
					}
					div.pane.parent ul.tabs a.current { background-image: url(../_images/features/nav_paneon_16w_16h.gif); }

			/* View the 3-D tour button. */
			div.slideshow a.bg.tour,
			div.slideshow a.bg.back {
				background-image: url(../_images/btn_BlackButtonsLarge.png);
				height: 38px;
				left: 458px;
				overflow: visible;
				position: absolute;
				top: 330px;
				width: 188px;
			}
				div.slideshow a.bg.tour span {
					background: transparent url(../_images/icon_3dtour_49w_52h.png) no-repeat 0 0;
					display: block;
					height: 52px;
					left: -25px;
					position: absolute;
					top: -7px;
					width: 49px;
				}

			/* Section heading of the two panes - LG Pop and LG Shine Touch. */
			div.slideshow h2.bg {
				background: transparent url(../_images/features/assets_TheFeatures.png) no-repeat 0 0;
				height: 42px;
				margin: 40px 0 10px 348px;
				width: 320px;
			}
				div.slideshow div.LGPop h2.bg {
					background-position: 0 -166px;
				}
				div.slideshow div.LGShine h2.bg {
					height: 35px;
					background-position: 0 -208px;
				}

			/* Sub-heading of the current 'mini' pane - i.e. Frame. */
			div.slideshow h3 {
				background: transparent;
				color: #000;
				font-size: 14px;
				font-weight: normal;
				line-height: 17px;
				margin: 0 0 24px 348px;
				text-transform: uppercase;
			}

			/* Short blurb describing the current 'mini' pane. */
			div.slideshow p.info {
				color: #5f5f5f;
				font: normal 1.20em/1.33em 'Trebuchet MS', Arial, Helvetica, sans-serif;
				margin-left: 348px;
			}

			/* Image that is associated with the title and text blurb that are
			defined above. */
			div.slideshow img.photo {
				display: block;
				left: 0;
				position: absolute;
				top: 0;
			}


			/* Outer panel that contains vthe two phones being compared. */
			div.slideshow div.pane.parent {
				height: 388px;
				left: 317px; /* Left edge = 118 */
				padding-top: 1px;
				position: absolute;
				top: 46px;
				width: 644px;
			}
				div.slideshow div.pane div.pane,
				div.slideshow div.pane div.flash {
					background: transparent url(../_images/features/layout_FeaturesSlideshowBg_296w_333h.jpg) no-repeat 100% 0;
					display: none;
					height: 333px;
					left: 0;
					position: absolute;
					top: 0;
					width: 644px;
				}

}



/**
* Page Layout: Generic
*
* @section	generic
* @media	screen, projection
*/
@media screen, projection {

	.layout-generic #content {
		margin: 64px 0 0 9px;
	}
		.layout-generic #content h1 {
			background: transparent url(../_images/layout_keyline_30w_2h.gif) repeat-x 0 100%;
			color: #ac0040;
			font-size: 32.85px;
			font-weight: normal;
			line-height: 35px;
			margin: 0 0 36px 0;
			padding-bottom: 13px;
			text-transform: uppercase;
		}

		.layout-generic #content h2 {
			color: #ac0040;
			font-size: 24px;
			line-height: 27px;
			font-weight: normal;
			margin: 36px 0 0 0;
			text-transform: uppercase;
		}

}