/*

All non-section-specific styles are in the general stylesheet:
general.css

All font-size and line-height attributes are in the text size stylesheets:
text1default.css, text2bigger.css, text3biggest.css

TABLE OF CONTENTS
Main content background
Long content boxes
Long content box connectors
Short content boxes
Short content box connectors
CTA boxes
CTA box connectors
Text styles
Page quotes

*/

/* LEARN */

/* ##### Main content background ##### */

#learnContent {
	width:702px; /* based on image dimensions */
	z-index:1;
	margin:0 0 0 20px;
}
#learnContent .content, #learnContent .t, #learnContent .b, #learnContent .b div {
	background:transparent url(../../media/images/learn/content_main.gif) no-repeat top right;
}
#learnContent .content {
	position:relative;
	zoom:1;
	_overflow-y:hidden;
	padding-top:20px;
}
#learnContent .t {
	/* top+left vertical slice */
	position:absolute;
	left:0;
	top:0;
	width:20px; /* top slice width */
	margin-left:-20px;
	height:100%;
	_height:3500px; /* arbitrary long height, IE 6 */
	background-position:top left;
}
#learnContent .b {
	/* bottom */
	position:relative;
	width:100%;
}
#learnContent .b, #learnContent .b div {
	height:20px; /* height of bottom cap/shade */
	font-size:1px;
}
#learnContent .b {
	background-position:bottom right;
	margin-left:0;
}
#learnContent .b div {
	position:relative;
	width:20px; /* bottom corner width */
	margin-left:-20px;
	background-position:bottom left;
}
#learnContent .wrapper {
	/* extra content protector - preventing vertical overflow (past background) */
	position:static;
	max-height:3500px;
	overflow:auto;
}

/* ##### Long content boxes ##### */

#learnContent .contentBoxLong {
	width:662px; /* based on image dimensions */
	z-index:1;
	margin:0 20px 0 20px;
}
#learnContent .contentBoxLong .cbContent, #learnContent .contentBoxLong .cbT, #learnContent .contentBoxLong .cbB, #learnContent .contentBoxLong .cbB div, #learnContent .contentBoxLong .cbBtn, #learnContent .contentBoxLong .cbBtn div {
	background:transparent url(../../media/images/learn/content_box.gif) no-repeat top right;
}
#learnContent .contentBoxLong .cbContent {
	position:relative;
	zoom:1;
	_overflow-y:hidden;
	padding-bottom:1px;
}
#learnContent .contentBoxLong .cbContent.noGap {
	padding-bottom:0;
}
#learnContent .contentBoxLong .cbT {
	/* top+left vertical slice */
	position:absolute;
	left:0;
	top:0;
	width:20px; /* top slice width */
	margin-left:-20px;
	height:100%;
	_height:2000px; /* arbitrary long height, IE 6 */
	background-position:top left;
}
#learnContent .contentBoxLong .cbB, #learnContent .contentBoxLong .cbBtn, #learnContent .contentBoxLong .cbBtn {
	/* bottom */
	position:relative;
	width:100%;
}
#learnContent .contentBoxLong .cbB, #learnContent .contentBoxLong .cbB div, #learnContent .contentBoxLong .cbBtn, #learnContent .contentBoxLong .cbBtn div{ /* bottom of box when content button included */
	height:20px; /* height of bottom cap/shade */
	font-size:1px;
}
#learnContent .contentBoxLong .cbB, #learnContent .contentBoxLong .cbBtn {
	background-position:bottom right;
	margin-left:0;
}
#learnContent .contentBoxLong .cbB div, #learnContent .contentBoxLong .cbBtn div {
	position:relative;
	width:20px; /* bottom corner width */
	margin-left:-20px;
	background-position:bottom left;
}
#learnContent .contentBoxLong .cbWrapper {
	/* extra content protector - preventing vertical overflow (past background) */
	position:static;
	max-height:2000px;
	overflow:auto;
	padding-right:20px;
}

/* Find a dermatologist button in long content boxes */

a.btnContent {
	display:block;
	padding-right:-20px;
}
.btnContentFindDermR {
	_margin-bottom:-3px;
	float:right;
	position:relative;
	left:-20px;
	background:transparent url(../../media/images/learn/content_box.gif) no-repeat bottom right;
	width:500px;
	height:30px;
}

/* ##### Long content box connectors ##### */

#learnContent .connectorLong {
	width:652px;
	margin-left:15px;
	margin-bottom:0;
	_margin-bottom:-1px;
}
#learnContent .connectorLongL {
	width:7px;
	background:transparent url(../../media/images/learn/connect_l.gif) no-repeat left 0;
	float:left;
}
#learnContent .connectorLongM {
	width:638px;
	background:transparent url(../../media/images/learn/connect_m.gif) repeat-x left 0;
	float:left;
}
#learnContent .connectorLongR {
	width:7px;
	background:transparent url(../../media/images/learn/connect_r.gif) no-repeat left 0;
	float:left;
}

/* ##### Short content boxes ##### */

#learnContent .contentBoxShortContainer, #learnContent .connectorShortContainer {
	padding:0 20px 0 20px;
}
#learnContent .contentBoxShortL {
	float:left;
	margin-right:20px;
}
#learnContent .contentBoxShortR {
	float:right;
}
#learnContent .contentBoxShortL, #learnContent .contentBoxShortR {
	width:311px; /* based on image dimensions */
	z-index:1;
}
#learnContent .contentBoxShortL .cbContent, #learnContent .contentBoxShortL .cbT, #learnContent .contentBoxShortL .cbB, #learnContent .contentBoxShortL .cbB div, #learnContent .contentBoxShortR .cbContent, #learnContent .contentBoxShortR .cbT, #learnContent .contentBoxShortR .cbB, #learnContent .contentBoxShortR .cbB div {
	background:transparent url(../../media/images/learn/content_box.gif) no-repeat top right;
}
#learnContent .contentBoxShortL .cbContent, #learnContent .contentBoxShortR .cbContent {
	position:relative;
	zoom:1;
	_overflow-y:hidden;
	min-height:auto;
}
#learnContent .contentBoxShortL .cbT, #learnContent .contentBoxShortR .cbT {
	/* top+left vertical slice */
	position:absolute;
	left:0;
	top:0;
	width:20px; /* top slice width */
	margin-left:-20px;
	height:100%;
	_height:2000px; /* arbitrary long height, IE 6 */
	background-position:top left;
}
#learnContent .contentBoxShortL .cbB, #learnContent .contentBoxShortR .cbB {
	/* bottom */
	position:relative;
	width:100%;
}
#learnContent .contentBoxShortL .cbB, #learnContent .contentBoxShortL .cbB div, #learnContent .contentBoxShortR .cbB, #learnContent .contentBoxShortR .cbB div {
	height:20px; /* height of bottom cap/shade */
	font-size:1px;
}
#learnContent .contentBoxShortL .cbB, #learnContent .contentBoxShortR .cbB {
	background-position:bottom right;
	margin-left:0;
}
#learnContent .contentBoxShortL .cbB div, #learnContent .contentBoxShortR .cbB div {
	position:relative;
	width:20px; /* bottom corner width */
	margin-left:-20px;
	background-position:bottom left;
}
#learnContent .contentBoxShortL .cbWrapper, #learnContent .contentBoxShortR .cbWrapper {
	/* extra content protector - preventing vertical overflow (past background) */
	position:static;
	max-height:1000px;
	overflow:auto;
	padding-right:20px;
}

/* ##### Short content box connectors ##### */

#learnContent .connectorShortL {
	float:left;
	width:302px;
	margin-left:-3px;
	_margin-left:-3px;
	_margin-bottom:-1px;
}
#learnContent .connectorShortR {
	float:left;
	width:301px;
	margin-left:48px;
	_margin-bottom:-1px;
}
#learnContent .connectorShortLL, #learnContent .connectorShortRL {
	width:7px;
	background:transparent url(../../media/images/learn/connect_l.gif) no-repeat left 0;
	float:left;
}
#learnContent .connectorShortLM, #learnContent .connectorShortRM {
	width:287px;
	background:transparent url(../../media/images/learn/connect_m.gif) repeat-x left 0;
	float:left;
}
#learnContent .connectorShortLR, #learnContent .connectorShortRR {
	width:7px;
	background:transparent url(../../media/images/learn/connect_r.gif) no-repeat left 0;
	float:left;
}

/* ##### CTA boxes ##### */

#learnContent .ctaBox {
	width:220px; /* based on image dimensions */
	z-index:1;
	margin:0 20px 0 20px;
	_margin-top:-2px;
}
#learnContent .ctaBox .ctaContent, #learnContent .ctaBox .ctaT, #learnContent .ctaBox .ctaB, #learnContent .ctaBox .ctaB div {
	background:transparent url(../../media/images/learn/content_box.gif) no-repeat top right;
}
#learnContent .ctaBox .ctaContent {
	position:relative;
	zoom:1;
	_overflow-y:hidden;
}
#learnContent .ctaBox .ctaT {
	/* top+left vertical slice */
	position:absolute;
	left:0;
	top:0;
	width:20px; /* top slice width */
	margin-left:-20px;
	height:100%;
	_height:80px; /* arbitrary long height, IE 6 */
	background-position:top left;
}
#learnContent .ctaBox .ctaB {
	/* bottom */
	position:relative;
	width:100%;
}
#learnContent .ctaBox .ctaB, #learnContent .ctaBox .ctaB div {
	height:20px; /* height of bottom cap/shade */
	font-size:1px;
}
#learnContent .ctaBox .ctaB {
	background-position:bottom right;
	margin-left:0;
}
#learnContent .ctaBox .ctaB div {
	position:relative;
	width:20px; /* bottom corner width */
	margin-left:-20px;
	background-position:bottom left;
}
#learnContent .ctaBox .ctaWrapper {
	/* extra content protector - preventing vertical overflow (past background) */
	position:static;
	min-height:28px;
	max-height:80px;
	overflow:auto;
	padding-top:14px;
	_padding-top:10px;
}

/* ##### CTA box connectors ##### */

#learnContent .connectorCta {
	width:214px;
	margin-left:13px;
}
#learnContent .connectorCtaL {
	width:7px;
	background:transparent url(../../media/images/learn/connect_l.gif) no-repeat left 0;
	float:left;
}
#learnContent .connectorCtaM {
	width:200px;
	background:transparent url(../../media/images/learn/connect_m.gif) repeat-x left 0;
	float:left;
}
#learnContent .connectorCtaR {
	width:7px;
	background:transparent url(../../media/images/learn/connect_r.gif) no-repeat left 0;
	float:left;
}

/* ##### Text styles ##### */

#learnContent h1, #learnContent h2, #learnContent h3 {
	color:#d67d40;
}

/* Link styles */

#learnContent p a:link, #learnContent p a:hover, #learnContent p a:visited, #learnContent p a:active, 
#learnContent li a:link, #learnContent li a:hover, #learnContent li a:visited, #learnContent li a:active {
	color: #d67d40;
}

/* ##### Page quotes ##### */

/* Gated quotes */
/* !!! all other attributes: set in general.css !!! */

.gatePageQuoteBg {
	background-image:url(../../media/images/learn/lead_line.gif);
	overflow:visible;
}
#gatePageQuoteBR {
	background: url(../../media/images/learn/lead_bottom_gate_quote.gif) no-repeat;
}
#gatePageQuote {
	background: url(../../media/images/learn/lead_gate_quote.gif) no-repeat;
	background-position: right bottom;
}
#gatePageQuote p {
	color: #d67d40;
}