@import url("master.css");

/**********************************
	LAYOUT STYLES
**********************************/
body {
	background-color:#75d7fe;
	font-family:Helvetica,Arial,sans-serif;
	font-size:14px;
	color:#0a4d9c;
	line-height:1.4;
	padding:25px 0;
}
#container {
	width:800px;
	background-color:#fff;
	margin:0 auto;
}
#header {
	position:relative;
	z-index:100;
}
#logo {
	position:absolute;
	top:-25px;
	left:-70px;
	z-index:101;
}
#content {
	padding-top:100px;
	background-repeat:no-repeat;
	position:relative;
	z-index:3;
}
#text-content {
	padding:0 110px;
}
#qtip {
	width:150px;
	height:300px;
	background:url(../images/qtip.png);
	position:absolute;
	top:100px;
	left:-50px;
	z-index:4;
}
#toprightimg {
	position:absolute;
	top:0;
	right:0;
	z-index:4;
}
#footer {
	color:#63778d;
	text-align:center;
	font-size:11px;
	padding:35px 0 15px 0;
	line-height:1;
	text-decoration:none;
}

.left-column {
	float:left;
}
.right-column {
	float:right;	
}
.callout {
	display:block;
	float:left;
}
.last {
	margin:0 !important;
}
#bottom-callouts {
	margin:0 auto;
}
.plus {
	padding-top: 6px;
}
.purple-box {
	border:1px solid #e1d6e6;
	background-color:#e1d6e6;
	position:relative;
}
.purple-box-wide {
width: 600px;
	border:1px solid #e1d6e6;
	background-color:#e1d6e6;
	position:relative;

}

.purple-box .content, .purple-box-wide .content {
	border:3px solid #fff;
	background-color:#e1d6e6;
	padding:10px;
}
.head-shot {
	width:260px;
	float:left;
}
#bio-box{
	float:left;
	width:320px;
	height:260px;
	overflow:auto;
}
#bio-bottom{
	display:block;
	width:680px;
	height:5px;
	margin-left:auto;
	margin-right:auto;
	border-bottom:1px solid #e0d8e7;
	border-top:1px solid #e0d8e7;
}
/**********************************
	TYPOGRAPHY STYLES
**********************************/
.block-image {
	display:block;
	text-indent:-9999px;
	font-size:0;
}
.marginbottom {
	margin-bottom:15px !important;
}
.large {
	font-size:16px;
}

h1 {
	font-size:28px;
	color:#615692;
	margin-bottom:20px;
}
h2 {
	font-size:17px;
	color:#0a4d9c;
	line-height:1.2;
}
h3 {
	font-size:19px;
	color:#4e4a89;
	font-weight:bold;
}
h4 {
	font-size:14px;
	font-style:italic;
	color:#4a4d87;
}
p {
	margin-bottom:15px;
}
.footnotes {
	font-size:11px;
	font-style:italic;
}
ul.disc {
	list-style-type:disc;
	padding:5px 0 15px 20px;
}

.purple-box.listout {
	font-size:12px;
}
.purple-box.listout p {
	width:440px;
	float:left;
	padding-top:5px;
	position:relative;
}
sup {
	position:relative;
}
.purple-box.listout .clear {
	height:5px;
}
p.list-right {
	width:170px;
	float:right;
}
p.error {
	border:1px solid #ff0000;
	padding:10px;
	background-color:#ffffdf;
	font-size:12px;
	color:#000;
}
p.success {
	border:1px solid #444;
	padding:10px;
	text-align:center;
	background:#eee;
	font-size:20px;
	color:#0a4d9c;
}
p.small {
	font-size:12px;
}
.curved-top {
	position:absolute;
	width:441px;
	height:30px;
	background:url(../images/curved_top.png);
	font-size:12px;
	color:#000;
	top:-26px;
	left:55px;
}
.curved-top form {
	padding:7px 0 0 15px;
}
.curved-top p {
	float:left;
	margin-right:5px;
}
.curved-top select {
	float:left;
}
.tip-block {
	width:175px;
	margin-right:5px;
	font-size:11px;
	float:left;
	line-height:1.2;
	margin-bottom:15px;
	position:relative;
}
.tip-block p {
	width:115px;
	float:left;
}
/**********************************
	LINK STYLES
**********************************/
a {
	color:#666;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
#logo a {
	width:270px;
	height:170px;
	background:url(../images/logo.png);
}
#footer a {
	font-size:11px;
	color:#63778d;
	line-height:1;
	text-decoration:none;
}
#footer a:hover {
	text-decoration:underline;
}
a.mally {
	width:166px;
	height:106px;
	background:url(../images/large_video_mally.jpg);
	margin:0 auto;
}
a.mally:hover {
	background-position:0 106px;
}
a.troy {
	width:166px;
	height:106px;
	background:url(../images/large_video_troy.jpg);
	margin:0 auto;
}
a.troy:hover {
	background-position:0 106px;
}
a.purple-button {
	width:160px;
	height:24px;
	background:url(../images/purple_button.jpg);
	padding-top:9px;
	margin:0 auto;
	color:#575e8c;
	display:block;
	font-size:11px;
	text-align:center;
}
a.purple-bottom {
	position:absolute;
	color:#575e8c;
	padding-top:6px;
	text-align:center;
	display:block;
	background: url('../images/purple_bottom_button.jpg') no-repeat scroll top center;
	width: 172px;
	height: 16px;
	font-size:11px;
	margin-left:245px;
}
a.purple-bottom-2 {
	position:absolute;
	color:#575e8c;
	padding-top:6px;
	text-align:center;
	display:block;
	background: url('../images/purple_bottom_button.jpg') no-repeat scroll top center;
	width: 172px;
	height: 16px;
	font-size:11px;
	margin-left:480px;
}
/**********************************
	FORM STYLES
**********************************/
form {
	width:500px;
	margin:0 auto;
	display:block;
	padding:15px 0;
}
label {
	clear:both;
	float:left;
	width:130px;
	font-weight:bold;
	line-height:15px;
	margin:3px 20px 15px 0;
	padding:0;
	height:15px;
	color:#615692;
	text-align:right;
}
label.prefix {
	clear:none;
	width:auto;
	text-align:left;
	font-weight:normal;
}
label.ext {
	clear:none;
	width:30px;
	margin-right:10px;
}
input {
	float:none;
	width:300px;
	line-height:15px;
	margin:0 0 15px 0;
	padding:2px;
	height:15px;
}
input.prefix {
	width:auto;
	float:left;
	padding:0;
	margin:3px 5px 0 0;
}
input.phone {
	width:200px;
	float:left;
}
input.ext {
	width:50px;
	float:left;
}
input.inline {
	display:inline;
	width:auto;
	vertical-align:top;
}
input#image {
	height:auto;
}
select {
	margin:0 0 15px 0;
}
textarea {
	margin:0 0 15px 0;
	width:300px;
	height:100px;
}
input#submit {
	width:auto;
	padding:5px 15px;
	background-color:#104e9b;
	color:#fff;
	height:auto;
	border:none;
	cursor:pointer;
	float:right;
}
/**********************************
	NAVIGATION STYLES
**********************************/
#nav {
	height:40px;
	background:#0a4d9c url(../images/menu.gif) no-repeat top right;
}
#nav ul {
	width:560px;
	padding:13px 15px 0 225px;
}
#nav li {
	float:left;
	display: block;
	margin-right:35px;
}
#nav li a {
	font-size:14px;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	line-height:1;
}
#nav li a:hover, body.baby_care #nav li.baby_care a, body.wendy #nav li.baby_care a, body.beauty #nav li.beauty a, body.products #nav li.products a, body.history #nav li.products a, body.variety #nav li.variety a, body.family_care #nav li.variety a, body.home_care #nav li.variety a, body.arts_crafts #nav li.variety a, body.meet_experts #nav li.beauty a, body.mally #nav li.beauty a, body.troy #nav li.beauty a, body.qa #nav li.beauty a, body.share_tips #nav li.beauty a, body.additional_beauty_tips #nav li.beauty a, body.beauty_tips #nav li.beauty a, body.mally_tips #nav li.beauty a, body.troy_tips #nav li.beauty a, body.celebrity_lips #nav li.beauty a, body.celebrity_eyes #nav li.beauty a, body.celebrity_face #nav li.beauty a, body.mally_tip #nav li.beauty a, body.troy_tip #nav li.beauty a {
	color:#bec7cc;
}

#subnav {
	height:30px;
	background-color:#f1c7d9;
}
#subnav ul {
	width:560px;
	padding:7px 15px 0 225px;
}
#subnav li {
	float:left;
	margin-right:15px;
}
#subnav li a {
	font-size:12px;
	color:#004d9d;
	text-decoration:none;
	line-height:1;
	white-space:nowrap;
}
#subnav li a:hover, body.wendy #subnav li.wendy a, body.family_care #subnav li.family_care a, body.home_care #subnav li.home_care a, body.arts_crafts #subnav li.arts_crafts a, body.meet_experts #subnav li.meet_experts a, body.mally #subnav li.meet_experts a, body.troy #subnav li.meet_experts a, body.qa #subnav li.qa a, body.share_tips #subnav li.share_tips a, body.additional_beauty_tips #subnav li.additional_beauty_tips a, body.beauty_tips #subnav li.beauty_tips a, body.mally_tips #subnav li.beauty_tips a, body.troy_tips #subnav li.beauty_tips a, body.celebrity_lips #subnav li.beauty_tips a, body.celebrity_eyes #subnav li.beauty_tips a, body.celebrity_face #subnav li.beauty_tips a, body.mally_tip #subnav li.beauty_tips a, body.troy_tip #subnav li.beauty_tips a {
	color:#4a4d87;
	text-decoration:underline;
}

#image-scroller {
	width:725px;
	margin:0 auto;
}
#image-scroller li {
	float:left;
	border:2px solid #fff;
	margin-right:12px;
}
#image-scroller li.last {
	margin:0;
}
#image-scroller li a {
	display:block;
}
/**********************************
	MISC STYLES
**********************************/

/* index.php styles */
body.home #content {
	background-image:url(../images/home_bg.jpg);
	padding-top:40px;
}
body.home #flash {
	width:800px;
	height:300px;
}
body.home .left-column {
	width:412px;
	padding-left:30px;
	padding-top:300px;
	position:relative;
}
body.home .right-column {
	width:306px;
	padding-right:30px;
	padding-top:300px;
	position:relative;
}
body.home .callout {
	margin-bottom:8px;
	float:none;
}
body.home #bottom-callouts {
	width:738px;
	padding-top:20px;
}
body.home #bottom-callouts .callout {
	float:left;
	width:223px;
	margin-right:33px;
}

/* baby_care.php styles */
body.baby_care #content {
	background-image:url(../images/home_bg.jpg);
}
body.baby_care h2 {
	width:380px;
}
body.baby_care #text-content {
	padding-bottom:400px;
}
body.baby_care #bottom-callouts {
	width:759px;
}
body.baby_care #bottom-callouts .callout {
	width:373px;
	margin-right:13px;
}

/* wendy.php styles */
body.wendy {
	color:#2c63c6;
}
body.wendy .purple-box {
	width:775px;
	margin:0 auto;
	color:#4a4d87;
}
body.wendy #bottom-callouts {
	width:777px;
}
body.wendy #bottom-callouts .callout {
	width:250px;
	margin-right:13px;
}

/* beauty.php styles */
body.beauty #content {
	background-image:url(../images/beauty_bg.jpg);
}
body.beauty #text-content {
	height:500px;
}
body.beauty #bottom-callouts {
	width:771px;
}
body.beauty .purple-box {
	float:left;
	width:248px;
	margin-right:10px;
}

/* products.php styles */
body.products #flash {
	height:700px;
	margin-bottom:50px;
}
body.products .purple-box {
	width:600px;
	margin:0 auto;
}
body.products .purple-box .content {
	padding:20px;
}

/* history.php styles */
body.history h1 {
	margin-bottom:50px;
}
body.history .left-column {
	width:410px;
	position:relative;
}
body.history .right-column {
	width:143px;
	position:relative;
}
body.history p.date {
	width:60px;
	float:left;
	font-size:18px;
	font-weight:bold;
	color:#004992;
	line-height:1;
	margin-bottom:20px;
}
body.history p.content {
	width:350px;
	float:right;
	color:#333;
	line-height:1.3;
	margin-bottom:20px;
}

/* variety.php styles */
body.variety h2 {
	width:360px;
}
body.variety .purple-box, body.family_care .purple-box, body.home_care .purple-box, body.arts_crafts .purple-box {
	width:578px;
}

/* meet_experts.php styles */
body.meet_experts .purple-box {
	width:275px;
	font-size:12px;
}
body.meet_experts .purple-box .content {
	padding:20px;
}

/* contact_us.php styles */
body.contact_us {
	color:#000;
	font-size:12px;
}

/* beauty_tips.php styles */
body.beauty_tips .purple-box {
	width:275px;
	font-size:12px;
}
body.beauty_tips .purple-box .content {
	padding:20px;
}

/* tips pages */
body.mally_tips .left-column, body.troy_tips .left-column, body.celebrity_lips .left-column, body.celebrity_eyes .left-column, body.celebrity_face .left-column, body.mally_tip .left-column, body.troy_tip .left-column {
	width:260px;
}
body.mally_tips .right-column, body.troy_tips .right-column, body.celebrity_lips .right-column, body.celebrity_eyes .right-column, body.celebrity_face .right-column, body.mally_tip .right-column, body.troy_tip .right-column {
	width:315px;
}
body.mally_tips p.small, body.troy_tips p.small, body.celebrity_lips p.small, body.celebrity_eyes p.small, body.celebrity_face p.small, body.mally_tip p.small, body.troy_tip p.small {
	width:200px;
	margin:0 auto;
}

body.additional_beauty_tips .purple-box {
	width:578px;
}

#tips-box {
	width:552px;
}
#tips-box .left-column {
	width:166px;
	position:relative;
}
#tips-box .right-column {
	width:330px;
	font-size:12px;
	position:relative;
}
#tips-box .right-column h3 {
	font-size:16px;
}

.holidayCallout { position: absolute; top: 5px; right: 0px; }
