/* iPhone Promo page specific styling */
.beautiful-boss #article-header div.microsite-has-badge
{
	min-height: 80px;
	height: auto;
}

.beautiful-boss #editor-zone-3
{
	border-top: 10px solid #d3d3d3;
	overflow: hidden;
}

.beautiful-boss #editor-zone-3 ul.trailblock
{
	margin-top: 10px;
}

.beautiful-boss #article-header div.microsite-has-badge .microsite-badge,
#editor-zone-3 li.image,
.beautiful-boss div#page-header
{
	border-top-width: 0;
}

/* should the page heading ALWAYS have a top border I wonder? */
body.beautiful-boss #page-heading
{
	width: 940px;
}

.beautiful-boss #page-heading h2
{
	background-color: #fff;
	border-top-style: solid;
	border-top-width: 10px;
	font-weight: bold;
	padding-bottom: 20px;
	padding-top: 4px;
}


/* This is for the promo column component */

#promo .news-trailblock li.trail,
#promo .news-trailblock li.first div.linktext,
#promo .news-trailblock li.trail div.video-container,
#promo .news-trailblock li.trail div.video-container div,
#promo .news-trailblock div.flash
{
	margin-bottom: 0;
}

#promo .news-trailblock li.first
{
	border-top-width: 0;
}

#promo .news-trailblock li.first h2
{
	font-size: 16px;
	margin-top: 0px;
	margin-bottom: 10px;
	padding: 0;
}

.beautiful-boss div#wrapper #promo .news-trailblock div.linktext h3
{
/*	border-top-style: dotted;
	border-top-width: 1px;
*/
	font-family: georgia, serif;
	font-size: 16px;
	font-weight: normal;
	margin-bottom: 10px;
	line-height: 1.138;
	padding-top: 0;
}

/** For the interactive **/

body.interactive div#wrapper div.microsite
{
	border-bottom-style: solid;
	border-bottom-width: 3px;
	margin-bottom: 3px;
	padding-top: 0;
}

body.interactive div#wrapper div.microsite div.microsite-badge
{
	border-top-width: 0;
	padding-top: 0;
}

body.interactive div#wrapper div.microsite-has-badge
{
	height: 120px;	
}