/* Main Content - Steps Styles
-----------------------------------------*/


.stepsContainer {
  margin:0 0 0 14px !important;
  width:951px;
  }

.stepsContainer:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
  }

* html .stepsContainer {
  height:1%;
  }

.stepsContainer #date {
  float:left;
  font-style:italic;
  font-size:86%;
  }

.stepsContainer #subscribe a {
  float:right;
  display:block;
  width:213px;
  height:21px;
  margin:0;
  overflow:hidden;
  background:url(../../i/global/subscribe.gif) no-repeat 0 0;
  text-indent:-9999px;
  }

#stepsHeaderContainer {
  background:url(../../i/homepage/borderLeadStory.gif) repeat-x left bottom;
  padding-bottom:5px;
  margin-bottom:10px;
  }

#stepsHeaderContainer:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
  }
.stepsHeaderContainerLeft {
	float:left;
	width:548px;
	_width:448px;
}
.stepsHeaderContainerRight {
	float:right;
	width:370px;
}

* html #stepsHeaderContainer {
  height:1%;
  }

#mainContentSteps {
  width:921px;
  margin:4px 10px 10px 14px;
  padding:10px;
  font-size:100%; 
  background:url(../../i/global/mainBGDivider.gif) repeat-x 0 10px;
  }

#mainContentSteps:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
  }

* html #mainContentSteps {
  height:1%;
  }
  
#stepsTitleContainer {
	border:1px solid #fff;
  }  

#stepsTitleContainer #headline h1,
#stepsTitleContainer #headline .rss {
  display:block;
  float:left;
  }

#stepsTitleContainer #headline h1 {
  font:normal 24px Georgia, "Times New Roman", Times, serif;
  color:#323232; float:left;
  }

#stepsTitleContainer h1 span {
  font:italic 24px Georgia, "Times New Roman", Times, serif;
  color:#5b5b5b;
  }

#stepsHeaderContainer .rss {
clear:both;
float:left;
margin:0;
width:90px;
  }

#stepsTitleContainer .rss:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
  }

* html #stepsTitleContainer .rss {
  height:1%;
  }

#stepsTitleContainer .rss a.icon {
  float:left;
  width:18px;
  height:10px;
  margin:1px 5px 0 0;
  overflow:hidden;
  background:url(../../i/global/rss.gif) no-repeat 0 0;
  text-indent:-9999px;
  }

#stepsTitleContainer .rss a.whatIsThis {
  float:left;
  font:10px arial, helvetica, sans-serif;
  }

.discussAd {
  float:right;
 
  }

.discussAd:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
  }

* html .discussAd {
  height:1%;
  }

.step-nav {
  background:#f9f8f3;
  padding:17px 10px 0 10px;
  width:430px; /* 450px */
  margin-bottom:10px;
  color:#323232;
  font:normal 12px Arial, Helvetica, sans-serif;
  height:32px;
  float:left;
  }  

.step-nav a {text-decoration:underline;}
.step-nav em {font-family:georgia,serif; font-size:11px; padding-left: 25px;}
.step-nav div.links-container {position:relative;top:-8px;}
.step-nav span {color:#c2c2c2; margin:0 0.5em;}

.step-nav span.step-links {
  color:#323232;
  margin:0;
  font-size:11px;
  display:table-cell;
  vertical-align:middle;
  height:32px;
}

.step-nav span.step-links em {
  font-family:Georgia, "Times New Roman", Times, serif;
  font-style:italic;
  }

.step-nav span.step-links a {
  margin:0 0 0 2px;
  }

.step-nav .step-next {
  float:right;
  display:block;
  width:51px;
  }
  
.step-nav a.step-back {
	background:transparent url(../../i/global/btn_stepbystep_back.gif) no-repeat scroll 0pt;
	display:block;
	height:19px;
	margin:-2px 4px 0 4px;
	width:56px;
	float:left;
	}  

.step-nav a.step-next {
	background:transparent url(../../i/global/btn_stepbystep_next.gif) no-repeat scroll 0pt;
	display:block;
	height:19px;
	margin:-2px 0 0 4px;
	width:51px;
	float:left;
	} 

#step_menus {
  display:none;
  clear:both;
  font-size:11px;
  font-weight:bold;
  width:500px;
  margin-top:10px;
  height:20px;
  float:left;
  padding-bottom:5px;
  _padding-bottom:0;
  }
 #step_menus.active{
	display:block;
} 

/*
#step_menus .stepMenuContainer {
  margin:0;  
  } 
*/ 

#step-thumbs {
  width:444px;
  padding:0 0 0 9px;
  margin:10px 0 0 0;
  background-color:#f9f8f3;
  display:block;
  }

#step-thumbs .step-thumb {
  width:102px;
  margin:6px 8px 0 0;
  padding:0;
  display:block;
  float:left;
  }

#step-thumbs .first {
  clear:both; 
  display:block;
  background-color:#f9f8f3;
  }
  
#step-thumbs .first:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }

#step-thumbs img {
  width:100px;
  height:100px;
  }

#step-thumbs a img {
  border:1px solid #d6d5d4;
  padding:0;
  margin:0 0 7px 0;
  }

#step-thumbs .gt-link {padding-bottom:10px;
  }
#step-info {
  background:#f9f8f3;
  color:#323232;
  width:450px;
  display:block;
  float:left;
  margin-bottom:10px;
  margin-left:20px;
  padding: 6px 0 4px 0;
  font-size:11px;
  z-index:10
  }

#step-info:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
  }

* html #step-info {
  height:1%;
  }

#step-info .step-info-time,
#step-info .step-info-cost,
#step-info .step-info-skill {
  display:block;
  float:left;
  }

#step-info .step-info-time,
#step-info .step-info-cost {
  text-align:center;
  background:url(../../i/global/bg_dots_vert.gif) repeat-y right;
  }

#step-info .step-info-time div,
#step-info .step-info-cost div {
  position:relative;
  padding:27px 0 0 0;
  margin:0;
  }

#step-info .step-info-time {
  width:83px;
  }

#step-info .step-info-time div {
  background:url(../../i/global/icon_clock.gif) no-repeat top center;
  }

#step-info .step-info-cost {
  width:123px;
  }

#step-info .step-info-cost div {
  background:url(../../i/global/icon_dollar.gif) no-repeat top center;
  }

#step-info .step-info-skill {
  width:231px;
  margin-left:9px;
  }

#step-info .step-info-skill h4 {
  font-size:11px;
  }

#step-info .step-info-skill h4 span {
  color:#fe7203;
  }

/* aColumnSteps styles
-----------------------------------------*/

#aColumnSteps {
  float:left;
  clear:both;
  width:450px;
  margin:0; 
  }

/* bColumnSteps styles
-----------------------------------------*/
#bColumnSteps, .page-steps #dColumnSteps {
  float:left;
  width:440px;
  margin-left:20px;
  }

#bColumnSteps p {
  font:normal 13px/20px Georgia, "Times New Roman", Times, serif;
  color:#121313;
  }

.page-steps #bColumnSteps, .page-steps #dColumnSteps{
	position:relative;
}

.page-steps #bColumnSteps p, .page-steps #bColumnSteps h4, .page-steps #bColumnSteps ul, .page-steps #dColumnSteps p, .page-steps #dColumnSteps h4, .page-steps #dColumnSteps ul{
	width:270px;
}

.page-steps .helpful-links.container-last{
	background-image:none;
}
.page-steps #commentBlock{
	width:448px;
	padding-top:10px;
	clear:right;
	background:transparent url(http://dev-img2.timeinc.net/toh/i/global/border_top.gif) top left repeat-x;	
	/*background:transparent url(../../i/global/border_top.gif) top left repeat-x;*/
}
.page-steps #bColumnSteps #commentBlock p{
	width:100%;
}
.page-steps #commentBlock ul#comments li{
	/**display: none;*/
}
/* cColumnSteps styles
-----------------------------------------*/

#cColumnSteps {
  float:right;
  width:162px;
  }

#cColumnSteps .adModule {
  background-color:#fff;
  margin:0;
  clear:both;
  } 
  
#cColumnSteps .adModule img {
  border:1px solid #eceae0;
  }  
  
/* dColumnSteps styles
-----------------------------------------*/  
#dColumnSteps {
  float:left;
  width:443px;
  margin-left:20px;
  }
  
#stepByStep-scroll {   
/*    width:435px;   */
    background-color:#fff;
    padding:8px;
	margin:0 0 5px 0;   	    
/*    overflow:auto; */
} 

#stepByStep-scroll p {	 
    color:#121313;
    font:13px/20px Georgia,"Times New Roman",Times,serif;
    margin:0 0 20px 0;	    
}


#dColumnSteps .dColumnlink {
	font:normal 13px Arial, Helvetica, sans-serif;
}
  
#dColumnSteps p.posted {
  color:#999;
  font-style:italic;
  }  
  
/* sub nav step styles */ 
/* SKDas@MT fixing bug 26166 as per comment 6*/
#stepsTitleContainer .byline {
  color: #5b5b5b;
  font-style: italic;
  clear:both;
  display:block;
  margin-bottom:0.5em;
  font-size: 12px; 
  float:left;
  width:500px;
  }

#stepsTitleContainer .byline .name {
  font-style: normal;
  text-transform:uppercase;
}

#stepsTitleContainer .byline .magsource {
  font-style: normal;
}

.stepMenuContainer {
		border: 0px solid #000;
		float:left;
		position:relative;
		margin:0px;
		z-index:100;
	}
	
.stepMenuContainer a.menuTab {
	background:transparent url(../../i/step-by-step/b_step-by-step.gif) no-repeat;
	display:block;
	font-family:arial, helvetica, sans-serif;
	width:148px;
	height:22px;
	padding:4px 0px 2px 0px;
	margin-right:2px;
	color:#0066CC;
	text-decoration:none;
	float:left;	
	position:relative;
}

.stepMenuContainer a.menuTab span {
	padding:0 0 2px 10px;
	color:#0066cc;
	}

.stepMenuContainer a.menuTabOn {
	background:transparent url(../../i/global/i_step_on.gif) right no-repeat;
	display:block;
	background-color:#EDEAE0;
	border:1px solid #D8D6D2;
	padding:5px 17px 2px 5px;
	margin-right:2px;
	color:#32312E;
	float:left;
	position:relative;
}
  
.orangeLine {
  border-top: 5px solid #f36000;
  position: relative;
  width: 480px;
  background: #fff;
  display:none;
  position:absolute;
  top: 23px;
  z-index:1000; 
  }

#menu1 .orangeLine{
	left: 1px; 
	z-index:100;
	font-weight:normal;
}

#menu2 .orangeLine{
	left:-90px;
	z-index:100;
}

#menu3 .orangeLine{
	left:-195px;
	z-index:100;
}


#brightcove{
	/*position:relative;*/
	z-index:10;
}

.popup {
  border-left: 5px solid #edeae1;
  border-right: 5px solid #edeae1;
  border-bottom: 5px solid #edeae1;
  padding: 10px;
  }

.popup:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }

* html .popup {
  height: 1%;
  }

.popup .col {
  width: 215px;
  float: left;
  padding: 0 10px 10px 0;
}

.popup .header  {
  border-bottom: 1px dotted #ccc;
  padding-bottom: 4px;
  margin-bottom: 10px;
  }

.popup .header h2 {
  font: italic 20px Georgia;
  float: left;
  padding: 0;
  margin: 0;
  }

.popup .col ol {
  margin-left: 25px;
  }

.popup .col ol li {
  font: bold 13px Georgia;
  padding-bottom: 5px;
  }

.popup .col ol li h5 {
  padding-bottom: 5px;
  }

.popup .col ol li p {
  font: normal 11px / 1.4em Georgia;
  }  
  
.popup .row:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }
* html .popup .row {
  height: 1%;
  }
  
.popup .row .viewAll {
  padding: 5px 0 0 0;
  text-align: left;
  }

.popup .row .viewAll p {
  font: normal 11px Georgia;
  }

.popup .closeB {
  width: 100%;
  border-top: 1px dotted #ccc;
  text-align: right;
  padding: 4px 0 0 0;
  }
  
.popup .row .tool {
  width: 145px;
  height:190px;
  float: left;
  margin: 0 5px 10px 0;
  font: normal 10px Arial;
  }

.popup .row .tool img {
  border: 1px solid #eaeaea;
  margin-bottom: 4px;
  }