/* CSS for Real Simple - L'Oreal Paris Skin Genesis */

/* ===========================================
         GLOBAL DEFINITIONS              
==============================================*/

* { margin: 0; padding: 0; }

.clear { clear: both; height: 0px; font-size: 0px; }

a { color: #039; }
a:hover { color: #388bf4; }

a img { border: none; }
a.skipToContent { display: none; }

span { display: none; }

p { margin-bottom: 1em; }

.arrow { padding-right: 0.8em; background: url(../images/icon-arrow-off.gif) 100% 60% no-repeat; }
.arrow:hover { background-image: url(../images/icon-arrow-on.gif); }

h2, h3 {
	font-weight: normal;
	color: #f39;
}

h2 {
	_margin-top: 1px; /* For Win/IE6 - top of text getting cut-off */
}


/* ===========================================
         MAIN LAYOUT
==============================================*/

body { 
	padding: 0 30px 30px 20px;
	background-color: #c6cdda;
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%; /* Use percentages and ems for fonts: http://www.alistapart.com/articles/elastic/ */
	line-height: 1.3em;
	color: #000;
	text-align: center;
}

#container {
	width: 820px;
	margin: 0 auto;
	margin-top: -6px; /* Compensate for Omniture script pushing everything down */
	text-align: left;
	background-color: #fff;
}


/* ===========================================
         HEADER
==============================================*/

#header {
	margin-bottom: 30px;
	background: url(../images/bg-header.jpg) top left no-repeat;
	_height: 1%;  /* Fixes ghost images in Win/IE6 */
}

#header h1 {
	/* Doesn't work with all margins or all padding. Don't know why. */
	margin-left: 142px;
	padding-top: 7px;
}

#header a#link_back {
	float: left;
	margin: -3px auto 10px 55px;
	font-size: 1.1em;
	text-decoration: none;
}


/* ===========================================
         FOOTER
==============================================*/

#footer {
	text-align: right;
	background-color: #c6cdda;
	padding-top: 10px;
	padding-right: 64px;
}


/* ===========================================
         SIDEBAR
==============================================*/

#sidebar {
	float: left;
	margin-left: 32px;
	margin-right: 10px;
	_display: inline;  /* Fixes double margin bug in Win/IE6 */
}


/* ===========================================
         SPLASH PAGE - index.html
==============================================*/

#splash #container {
	background: url(../images/bg-splash-noContest.jpg) top left no-repeat;
	background-color: #ebf1f3;
}

#splash #content {
	/* Doesn't work with all margins or all padding. Don't know why. */
	margin-right: 52px;
	margin-left: 308px;
	padding-top: 37px;
	padding-bottom: 16px;
}

#splash h1 {
	margin-bottom: 35px;
}

#splash p {
	margin-bottom: 30px;
	font-size: 0.9em;
}

#link_contest { /* Located OUTSIDE of p. Otherwise, displays too high in Safari */
	float: right;
	margin-top: -42px;
}

#splash ul {
	height: 145px;
	margin-bottom: 18px;
	list-style: none;
	font-size: 1.67em;
	text-transform: uppercase;
	_margin-bottom: -14px; /* For Win IE/6 */
}

#splash li {
	width: 100px;
	margin-bottom: 23px;
}

#splash #menuDesc {
	float: right;
	width: 350px;
	height: 130px;
	margin-top: 2px;
	margin-right: -10px;
	_position: relative; /* For Win IE/6 */
}

#splash #link_learnMore {
	font-size: 1.33em;
}

#splash .logo_loreal {
	display: block;
	margin-top: 188px;
	margin-left: 62px;
}


/* ===========================================
         CONTEST - sweepstakes.html
==============================================*/

#contest #container {
	width: 855px;
	_width: 815px; /* For Win IE/6 */
	background: url(../images/bg-contest-container.gif) top left repeat-y;
	background-color: #fff;
}

#contest #sidebar {
	float: left;
	width: 407px;
	margin-left: 0;
	padding-top: 563px;
	background: url(../images/bg-contest-sidebar.jpg) top left no-repeat;
}

#contest #sidebar a {
	margin-left: 94px;
}

#contest #sidebar .logo_loreal {
	display: block;
	margin: 20px auto 10px 178px;
}

#contest #content {
	/* Doesn't work with all margins or all padding. Don't know why. */
	margin-right: 55px;
	_margin-right: 10px; /* For Win IE/6 */
	margin-left: 437px;
	padding-top: 22px;
}

#contest h2 {
	margin-bottom: 2px;
}

#contest textarea {
	width: 325px;
	height: 5em;
	margin: -0.5em auto 11px 9px;
}

#contest #required {
	margin-bottom: 11px;
	padding: 4px 0 4px 11px;
	background-color: #faeebb;
	font-size: 1em;
}

#contest ul {
	float: left; /* So any clears inside this element won't clear the entire sidebar */
	list-style: none; 
	margin-left: 11px; 
	margin-bottom: 10px;
}

#contest li { 
	margin-bottom: 4px;
}

#contest label {
	float: left;
	width: 142px;
	font-size: 0.9em;
	padding-top: 2px;
}

#contest input 			{ width: 177px; }
#contest input.checkbox	{ width: auto;	}
#contest select			{ width: 181px; }

#contest li#age { padding-top: 1em; padding-bottom: 0.6em; _padding-bottom: 0; _margin-bottom: 0; /* For Win/IE6 */ } /* Use padding instead of margin - Netscape not recognizing margins */
	*+html #contest li#age { padding-bottom: 0;  margin-bottom: 0; /* For Win/IE7 */ }

#contest li#loreal { padding-bottom: 1em; } /* Use padding instead of margin - Netscape not recognizing margins */

#contest li#age label, 
#contest li#loreal label { width: 304px; font-size: 0.9em; margin-left: 10px; margin-top: -2px; _margin-top: 0; /* For Win/IE6 */ }

#contest li#age input, 
#contest li#loreal input { float: left; width: auto; }

#contest #submitLine input { width: auto; }

#contest #submitLine #submit { _margin-top: 4px; }  /* For Win/IE6 */
	*+html #contest #submitLine #submit { margin-top: 4px; }  /* For Win/IE7 */

#contest #disclaimer {
	padding-top: 8px;
	padding-bottom: 20px;
}


/* ===========================================
         CONTEST2 - thanks.html, error.html, duplicate.html
==============================================*/

#contest.contest2 #content {
	padding-top: 200px;
	font-size: 1.1em;
}

#contest.contest2 #content h2 {
	margin-bottom: 1em;
	line-height: 1.3em;
}


/* ===========================================
         OFFICIAL RULES - officialrules.html
==============================================*/

#rules #container {
	width: 801px;
}

#rules #header {
	padding-bottom: 23px;
}

#rules #content {
	/* Doesn't work with all margins or all padding. Don't know why. */
	margin-left: 202px;
	margin-right: 30px;
	padding-bottom: 30px;
}

#rules #content h2 {
	margin-bottom: 1em;
	font-size: 2em;
}

#rules #content ul {
	margin-top: -0.5em;
	margin-bottom: 1.4em;
	margin-left: 2em;
	list-style: none;
}



/* ===========================================
         INDULGE - indulge.html
==============================================*/

#indulge #container {
	width: 801px; 
}

#indulge #content {
	/* Doesn't work with all margins or all padding. Don't know why. */
	margin-left: 202px;
	padding-bottom: 30px;
}

#indulge #content h2 {
	margin-bottom: 0.2em;
	_margin-bottom: 0;  /* For Win/IE6 */
	font-size: 2.4em;
	text-transform: uppercase;
}
	*+html #indulge #content h2 { margin-bottom: 0; /* For Win/IE6 */ }

#indulge #content p {
	margin-bottom: 28px;
	font-size: 1.1em;
	color: #666;
}

#indulge .col {
	float: left;
	width: 250px;
	margin-right: 15px;
}

#indulge ul {
	list-style: none;
	margin-left: 0;
}

#indulge li {
	margin-bottom: 1em;
}

#indulge li strong {
	text-transform: uppercase;
}


/* ===========================================
         INTERACT - interact.html
==============================================*/

#interact #container {
	width: 801px; 
}

#interact #sidebar {
	float: right; 
	margin-right: 56px;
}

#interact #content {
	/* Doesn't work with all margins or all padding. Don't know why. */
	margin-right: 330px;
	margin-left: 54px;
	padding-bottom: 30px;
}

#interact h2 {
	margin-bottom: 0.2em;
	_font-size: 1.6em;
}

#interact #intro {
	margin-bottom: 1.6em;
	font-size: 1.1em;
	line-height: 1.3em;
}

/* ---------- FORM ---------- */

#interact form {
	width: 359px;
	margin-bottom: 30px;
	padding-top: 9px;
	padding-bottom: 13px;
	background: url(../images/bg-interact-form.gif) top left repeat-y;
	border: 1px solid #ccc;
	text-align: center;
}

#interact label {	
	display: block;
	color: #2e0210;
	margin-bottom: 0.2em;
}

#interact #userName {
	width: 250px;
	margin-bottom: 10px;
}

#interact #messageText {
	width: 302px;
	height: 104px;
	margin-bottom: 10px;
}

#interact #formButtons {
	padding-left: 56px;
}

#interact #submitButton, #interact #resetButton {
	float: left; /* Must float or else won't appear in Win/IE6 */
	height: 27px;
	width: 122px;
	border: 0pt none; /* hides button bevels */
	text-indent: -1000em; /* hides button text */
	cursor: pointer; /* displays pointer finger on hover */
	cursor: hand; /* for IE 5.x */
}

#interact #submitButton {
	background: transparent url(../images/bu-postMessage.gif) 0 0;
}

#interact #resetButton {
	background: transparent url(../images/bu-clearForm.gif) 0 0;
}

/* ---------- MESSAGES ---------- */

#interact #messages h3 {
	margin-top: 1.5em;
	line-height: 1.3em;
}

#interact #messages h5 {
	color: #666;
	margin-bottom: 0.4em;
}

#interact #messages p {
	margin-bottom: 0.5em;
}


/* ===========================================
         TIPS - tips.html
==============================================*/

#tips #container {
	width: 801px; 
}

#tips #content {
	/* Doesn't work with all margins or all padding. Don't know why. */
	margin-left: 210px;
	padding-bottom: 20px;
}

#tips #content h2 {
	margin-bottom: 0;
	font-size: 2em;
}

#tips .col {
	float: left;
	width: 280px;
	margin-right: 15px;
	_width: 273px; /* For Win/IE6 */
}

#tips p, #tips ul {
	margin-left: 15px;
}

#tips .intro {
	margin: 0 20px 28px 0;
	color: #666;
}

#tips p.last {
	margin-bottom: 0.5em;
}

#tips ul {
	list-style: none;
	margin-left: 0;
}

#tips li {
	margin-bottom: 1em;
	padding-left: 1em;
	background: url(../images/bullet-greyDisc.gif) left 0.5em no-repeat;
}


/* ===========================================
         SKIN GENESIS - skingenesis.html
==============================================*/

#skinGenesis #container {
	width: 859px;
	padding-top: 10px;
}

#skinGenesis #link_back {
	margin-left: 34px;
	font-size: 1em;
	text-decoration: none;
}

#skinGenesis h4 {
	margin-top: 10px;
	margin-bottom: 14px;
	padding: 3px 0 5px 34px;
	background: url(../images/bg-skinGenesis-hdr.gif) top left repeat-y;
	font-size: 1.2em;
	font-weight: normal;
}

/* ---------- SIDEBAR ---------- */

#skinGenesis #sidebar {
	width: 298px;
	padding-bottom: 20px;
}

#skinGenesis .itemBox {
	height: 230px;
	_margin-bottom: 15px; /* For Win/IE6 */
}
	*+html #skinGenesis .itemBox { margin-bottom: 25px; /* For Win/IE7 */ }

#skinGenesis #sidebar img {
	float: left;
	margin-top: -27px;
	margin-right: 4px;
	_margin-top: 0; /* For Win/IE6 */
}
	*+html #skinGenesis #sidebar img { margin-top: 0; /* For Win/IE7 */ }

#skinGenesis #bottleOr {
	float: left;
	margin-top: 80px;
	margin-right: 4px;
	color: #666;
	font-size: 0.9em;
	_margin-top: 107px; /* For Win/IE6 */
}
	*+html #skinGenesis #bottleOr { margin-top: 107px; /* For Win/IE7 */ }


#skinGenesis #sidebar .description {
	margin-top: 27px;
	margin-left: 62px;
	padding: 13px 23px 10px 11px;
	background: url(../images/bg-skinGenesis-sidebar.gif) top left repeat-y;
}

#skinGenesis #sidebar .twoBottles .description {
	margin-left: 138px;
	_margin-left: 142px; /* For Win/IE6 */
}
	*+html #skinGenesis #sidebar .twoBottles .description { margin-left: 142px; /* For Win/IE7 */ }

#skinGenesis h5 {
	font-size: 1em;
	color: #333;
}

/* ---------- CONTENT ---------- */

#skinGenesis #content {
	margin-top: 26px;
	margin-left: 300px;
	font-size: 1.2em;
	line-height: 1.3em;
	color: #666;
}

#skinGenesis #content h1 {
	margin-bottom: 35px;
}

#skinGenesis #content p, 
#skinGenesis #content ul {
	margin-left: 116px;
}

#skinGenesis #content p {
	width: 370px;
}

#skinGenesis #content ul {
	width: 340px;
	list-style: none;
	margin-left: 140px;
	margin-bottom: 1.2em;
	font-size: 0.95em;
}

#skinGenesis #content li {
	margin-bottom: 0.4em;
}

#skinGenesis #content ul strong {
	font-weight: normal;
	color: #f39;
}

#skinGenesis #content #logo_loreal {
	margin-top: 30px;
	margin-left: 137px;
}