/* This style sheet is written as a page-specific overlay to the other
   sitepoint.com style sheets; however, if it becomes desirable to bundle it
   with the rest of the site’s styles for general inclusion, there are only a
   few rules that aren’t protected by a #body.siteindex selector.             */

/* Layout *********************************************************************/

#header
{
	min-width: 950px;
	max-width: 1100px;
	margin: 0 auto;
	position: relative; /* positioning content for #search */
}

form#search
{
	/*top: 0; overrides standard header layout */
}

div#navcontainer
{
	margin: 0 0 10px; /* overrides standard margin */
	padding: 0;
}

div#tertiary
{
	margin: 0 -7px 10px; /* overrides standard margin; -ive margin hides unwanted white bar on rhs of background image */
	padding: 2px 0 3px;
}

ul#navlist
{
	float: none;
	margin: 0 auto;
	max-width: 1100px;
	min-width: 950px;
}

ul#navlist #tabz
{
	border-left-width: 1px;
	margin-left: 12px;
}

#content
{
	min-width: 910px; /* 950px - 40px padding */
	max-width: 1060px; /* 1100px - 40px padding */
	padding: 0 20px; /* overrides uneven padding in structure.css */
	margin: 0 auto 1em;
}

#body.siteindex #features
{
	margin-right: 235px; /* leave space for #ads - 15px for background overlap */
}

#body.siteindex #feature
{
	float: left;
	margin: 0; /* override margins specified in index.css */
	width: auto; /* override width specified in index.css */
	padding: 4px 8px; /* override padding specified in index.css */
	margin-right: 274px; /* leave space for #whatshot */
	background:#f5f5f5;
}

#body.siteindex #feature .header
{
	min-height: 123px; /* leave space for .featureimg (115px + 8px top margin) - implemented for IE6 with height in newindex-ie6.css */
	padding-left: 135px; /* leave space for .featureimg */
}

#body.siteindex .featureimg
{
	left: 10px;
	position: absolute;
	top: 2px;
}

#feature img
{
	float: none; /* override float in index.css */
	margin: 0; /* override margin in index.css */
}

#body.siteindex #feature h2, #body.siteindex #feature h3
{
	margin-top: 0;
}

#body.siteindex #whatshot
{
	float: left;
	margin-left: -256px; /* +1px to work around FF3 zoom rounding issue */
	margin-right: -25px;
	margin-top: 4px; /* align with top of #feature h2 text */
	padding: 0 15px 0 10px;
	right: 250px; /* leave space for #ads */
	top: 0;
	width: 254px; /* 280px minus padding and border */
}

#body.siteindex #news
{
	clear: left;
}

#body.siteindex #news .story
{
	/* padding-left: 60px; leave space for .newsimg */
	padding:9px 10px 1px 70px;
	position: relative; /* positioning context */
	left:-10px;
}

#body.siteindex #news .story.odd	/* odd tiger striping */
{
	background:#f5f5f5;
}
#body.siteindex #news .story.even	/* even tiger striping */
{
	background:transparent;
}

#body.siteindex #news .newsimg
{
	height: 50px;
	left: 11px;
	position: absolute;
	top: 11px;
	width: 50px;
}

#body.siteindex .department
{
	overflow: hidden;
}

#body.siteindex .department .feature
{
	float: left;
	position: relative;
	margin-right: 50%; /* leave space for .recentlyindept */
	padding-right: 20px;
}

#body.siteindex .department .feature h3, #body.siteindex .department .feature .storymeta, #body.siteindex .department .feature .blurb
{
	margin-left: 135px; /* leave space for .featureimg */
}

#body.siteindex .department .recentlyindept
{
	float: right;
	margin-left: -50%; /* overlap .feature */
	width: 49%;
}

#body.siteindex #sidebar
{
	position: absolute;
	top: 0;
	right: 20px;
	width: 250px;
}

#body.siteindex #ads .ad125x125
{
	float: left;
	width: 125px;
}

#body.siteindex #ads #ad125x125left
{
	margin-left: -5px;
	margin-right: 10px;
}

#body.siteindex #ads #ad125x125right
{
	margin-right: -5px;
}

#body.siteindex #ads .ad120x600
{
	float: left;
	margin-right: 5px;
	width: 120px;
}

#body.siteindex #ads .product
{
	clear: both;
}

#body.siteindex #othercontent
{
	overflow: hidden;
}

#body.siteindex #mostviewed
{
	float: left;
	width: 49%;
}

#body.siteindex #pointybits
{
	float: right;
	width: 50%;
}



/* sidebar overlap fix */
#sidebar
{
	z-index:100;
}
#othercontent, #topics, #footer
{
	background-color:#fff;
	position:relative;
	z-index:200;
}





/* Block styles ***************************************************************/

#content
{
	background-color: #fff; /* new index has no boxes, so stick with a white bg */
}

#body.siteindex
{
	border: none; /* overrides 1px white border in structure.css */
	margin-top: 0.75em; /* needed for consistent spacing in IE and FF */
}

#body.siteindex #features
{
	background: transparent url(/images/sidebarshadow.png) right bottom no-repeat;
	padding-right: 40px;
}

#body.siteindex #feature
{
	border: none; /* overrides 1px blue border in index.css */
}

#body.siteindex #feature .header
{
	overflow: hidden;
}

#body.siteindex #feature .blurb
{
	margin: 1em 0 2em; /* overrides margin in index.css */
}

#body.siteindex #features h2, #body.siteindex #features h3
{
	margin-bottom: 0;
}

#body.siteindex #features #whatshot h2
{
	margin: -5px 0 12px;
}

#body.siteindex #whatshot ol
{
	list-style-image: url(/images/bullet.png);
	margin: 0;
	padding: 0 0 0 20px;
}

#body.siteindex .recentlyindept ol, #body.siteindex #othercontent ol
{
	list-style-image: url(/images/bullet-light.png);
	margin: 0;
	padding: 0 0 0 18px;
}




#body.siteindex #whatshot ol li.blog, #body.siteindex .recentlyindept ol li.blog,
#body.siteindex #othercontent ol li.blog,
#body.siteindex #whatshot ol li.forum, #body.siteindex .recentlyindept ol li.forum,
#body.siteindex #whatshot ol li.article, #body.siteindex .recentlyindept ol li.article,
#body.siteindex #othercontent ol li.article
{
	list-style:none;
	list-style-type:none;
}

#body.siteindex #whatshot ol li.blog, #body.siteindex .recentlyindept ol li.blog,
#body.siteindex #othercontent ol li.blog,
#body.siteindex #whatshot ol li.forum, #body.siteindex .recentlyindept ol li.forum,
#body.siteindex #whatshot ol li.article, #body.siteindex .recentlyindept ol li.article,
#body.siteindex #othercontent ol li.article, #body.siteindex #othercontent ol,
#body.siteindex #whatshot ol, #body.siteindex .recentlyindept ol
{
	list-style-image:none;	/* shore up list style removal */
}

#body.siteindex #whatshot ol,
#body.siteindex #othercontent ol,
#body.siteindex .recentlyindept ol
{
	padding-left:0;
}

#body.siteindex #whatshot ol li div,
#body.siteindex #othercontent ol li div,
#body.siteindex .recentlyindept ol li div
{
	display:block;
	position:relative;
	padding-left:18px;
}

#body.siteindex #whatshot ol li a.icon,
#body.siteindex #othercontent ol li a.icon,
#body.siteindex .recentlyindept ol li a.icon
{
	width:16px;
	height:16px;
	position:absolute;
	left:0;
	top:1px;
	text-decoration:none;
}

span.comments, dd.comments
{
	cursor:default;
}

#body.siteindex #whatshot ol li span.comments,
#body.siteindex #othercontent ol li span.comments,
#body.siteindex .recentlyindept ol li span.comments,
#body.siteindex #othercontent ol li span.comments a
{
	color: #808080;
	font: 10px Verdana, Helvetica, sans-serif;
	white-space:nowrap;
}

#body.siteindex #whatshot ol li span.comments a,
#body.siteindex #othercontent ol li span.comments a,
#body.siteindex .recentlyindept ol li span.comments a
{
	padding-left:0;
	background-image:none;
	color: #F60;
	cursor:pointer;
}

#body.siteindex #whatshot ol li span.comments a:hover,
#body.siteindex #othercontent ol li span.comments a:hover,
#body.siteindex .recentlyindept ol li span.comments a:hover
{
	color: #4B5970;
}


#body.siteindex * .comments a,
#body.siteindex * .comments a:visited
{
	text-decoration:none;
}
#body.siteindex * .comments a:hover,
#body.siteindex * .comments a:focus,
#body.siteindex * .comments a:active
{
	text-decoration:underline;
}


#body.siteindex .recentlyindept ul.more-in-section
{
	list-style-type:none;
	margin:2em 0 0 0;
	padding:0;
	text-transform:uppercase;
	font-weight:bold;
	font-size:0.85em;
	overflow:hidden;
}

#body.siteindex .recentlyindept ul.more-in-section li a
{
	padding:0 5em 0 14px;
	background:url(/images/bullet-light.png) no-repeat 0 -3px;
	float:right;
}



#body.siteindex #whatshot li
{
	line-height: 1.4;
	margin: 0.6em 0;
}

#body.siteindex .recentlyindept li, #body.siteindex #othercontent li
{
	line-height: 1.3;
	margin: 0.4em 0;
}

#body.siteindex #news
{
	max-width: 700px;
	padding-left: 10px;
}

#body.siteindex #features #news h2
{
	margin-top: 10px;
	margin-left: -10px; /* outdent against #news padding-left */
}

#body.siteindex #news .blurb
{
	margin-top: 5px;
}

#body.siteindex .department
{
	margin: 20px 0;
}

#body.siteindex #business
{
	margin-bottom: 10px;
	padding-bottom: 30px;
}

#body.siteindex #features .department h2, #body.siteindex #whatshot h2
{
	background: transparent url(/images/heading-line.png) repeat-x right bottom;
	margin: -5px 0 5px;
}

#body.siteindex .department .story
{
	margin-top: 1em;
}

#body.siteindex .department .story h3
{
	margin-top: 0;
}

#body.siteindex .department .recentlyindept h3
{
	margin: 16px 0 0;
}

#body.siteindex dl.storymeta
{
	margin: 0.5em 0;
	overflow: hidden;
}

#body.siteindex .storymeta dt
{
	position: absolute;
	left: -9999px;
}

#body.siteindex .storymeta dd
{
	float: left;
	margin: 0;
}

#body.siteindex .featureimg
{
	margin: 6px 20px 20px 0; /* Align with top of h3 text */
	height: 115px;
	width: 115px;
}

#body.siteindex #feature .featureimg
{
	margin-top: 8px; /* Align with top of h2 text */
}

#body.siteindex .department .blurb
{
	margin: 1em 0; /* overrides margin in index.css */
}

#body.siteindex h3
{
	position: static; /* overrides absolute positioning in format.css */
}

#body.siteindex .product h3, #body.siteindex .cart h2
{
	position: absolute; /* restores absolute positioning, but only for cart and product ads */
}

#body.siteindex .cart h2
{
	background: url(/images/new/bulletr-cart.gif) no-repeat right;
	font-size: 0.9em;
	top: -0.8em;
	right: -1px;
	padding: 2px 1.5em 4px 0.5em;
	height: 1em;
	margin-top: 0;
}

#body.siteindex .next
{
	background: url(/images/bullet-light.png) left no-repeat;
	float: right;
	margin-top: -4px; /* offsets padding-top to reposition bullet image */
	padding-left: 14px;
	padding-top: 4px; /* offsets margin-top to reposition bullet image */
	padding-right:5em;
}

#body.siteindex #sidebar
{
	background: #fff url(/images/sidebarshadow-top.png) bottom left no-repeat;
	padding-bottom: 125px;
}


#body.siteindex #ads .ad
{
	margin: 1em 0;
}

#body.siteindex #othercontent h2
{
	border-bottom: 1px solid #e6e6e6;
}

#body.siteindex #topics h2
{
	background: #ebebeb;
	float: left;
	margin: 3em 0 0;
	padding: 3px 1em 0;
}

#body.siteindex #topics ul
{
	background: #ebebeb;
	clear: left;
	margin: 0;
	padding: 1em;
	text-align: center;
}

#body.siteindex #topics li
{
	display: inline;
}

/* Inline styles **************************************************************/

#body.siteindex h2, #body.siteindex h3
{
	font-family: Verdana, Helvetica, sans-serif;
	font-weight: bold;
}

#body.siteindex h2 a:link, #body.siteindex h3 a:link,
#body.siteindex h2 a:visited, #body.siteindex h3 a:visited
{
	text-decoration: none;
}

#body.siteindex h2 a:hover, #body.siteindex h3 a:hover
{
	text-decoration: underline;
}

#body.siteindex #feature .blurb
{
	color: #333;
	font-size: 14px;
	margin-left: 10px;
}

#body.siteindex #feature h2
{
	font-size: 25px;
	letter-spacing: -1px;
}

#body.siteindex #features .department h2, #body.siteindex #whatshot h2
{
	color: #332F29;
	font: bold italic 18px Verdana, Helvetica, sans-serif;
	letter-spacing: -1px;
}

#body.siteindex .department h2 span, #body.siteindex #whatshot h2 span
{
	position: relative;
	top: 4px;
}

#body.siteindex h3
{
	background-image: none; /* overrides background image in format.css */
	height: auto; /* overrides height in format.css */
	margin-top: 15px;
	padding: 0; /* overrides padding in format.css */
}

#body.siteindex .product h3
{
	background: transparent url(/images/new/bulletr-br.gif) no-repeat scroll right center;
	height: 1em;
	margin-top: 0;
	padding: 2px 1.5em 4px 0.5em;
}

#body.siteindex .department .story h3
{
	font-size: 18px;
	letter-spacing: -1px;
}

#body.siteindex .department .recentlyindept h3
{
	color: #AAA;
	font: 12px Verdana, Helvetica, sans-serif;
}

#body.siteindex #news .story
{
	margin-bottom: 1em;
}

#body.siteindex #news h3
{
	font-size: 18px;
	letter-spacing: -1px;
}

#body.siteindex #news .blurb
{
	color: #666;
}

#body.siteindex .storymeta dd
{
	border-right: 1px solid #808080;
	color: #808080;
	font: 10px Verdana, Helvetica, sans-serif;
	margin-right: 1ex;
	padding: 1px 1ex 1px 0;
}

#body.siteindex .storymeta dd.type
{
	text-transform: uppercase;
}

#body.siteindex .storymeta dd.comments,
#body.siteindex .storymeta dd.date,
#body.siteindex #feature dd.author
{
	border-right: none;
	padding-right: 0;
}

#body.siteindex #whatshot .storymeta dd.comments
{
	/*border-left: 1px solid #808080;*/
}

#body.siteindex .storymeta dd.comments a:link,
#body.siteindex .storymeta dd.comments a:visited
{
	color: #F60;
}

#body.siteindex .storymeta dd.comments a:hover
{
	color: #4B5970;
}

#body.siteindex a:link
{
	color: #036;
}

#body.siteindex a:visited
{
	color: #4B5970;
}

#body.siteindex a:hover
{
	color: #F60;
}

#body.siteindex .more:link, #body.siteindex .more:visited
{
	color: #424242;
	font: bold 10px Verdana, Helvetica, sans-serif;
	text-transform: uppercase;
	white-space: nowrap;
}

#body.siteindex .more:hover
{
	color: #f60;
}

#body.siteindex .next
{
	font-size: 11px;
	font-weight: bold;
	text-align: right;
	text-transform: uppercase;
}


#body.siteindex .product h4 a:link, #body.siteindex .product h4 a:visited
{
	color: #ca1400;
}

#body.siteindex #othercontent h2, #body.siteindex #topics h2
{
	font: bold 12px Verdana, Helvetica, sans-serif;
	margin-right: 1em;
}

#body.siteindex #othercontent h2 span
{
	background: #fff;
	padding-right: 1em;
	position: relative;
	top: 4px;
}

#body.siteindex #othercontent li
{
	color: #666;
	font: 11px Verdana, Helvetica, sans-serif;
}

#body.siteindex #othercontent li a:link, #body.siteindex #othercontent li a:visited
{
	font-size: small;
}

#body.siteindex .tagcloud .tagcloud0,
#body.siteindex .tagcloud .tagcloud5
{
	font-size: 13px;
}

#body.siteindex .tagcloud .tagcloud0 a,
#body.siteindex .tagcloud .tagcloud5 a
{
	color: #777;
}

#body.siteindex .tagcloud .tagcloud10,
#body.siteindex .tagcloud .tagcloud15,
#body.siteindex .tagcloud .tagcloud20,
#body.siteindex .tagcloud .tagcloud25
{
	font-size: 14px;
}

#body.siteindex .tagcloud .tagcloud10 a,
#body.siteindex .tagcloud .tagcloud15 a,
#body.siteindex .tagcloud .tagcloud20 a,
#body.siteindex .tagcloud .tagcloud25 a
{
	color: #666;
}


#body.siteindex .tagcloud .tagcloud30,
#body.siteindex .tagcloud .tagcloud35,
#body.siteindex .tagcloud .tagcloud40,
#body.siteindex .tagcloud .tagcloud45
{
	font-size: 15px;
}

#body.siteindex .tagcloud .tagcloud30 a,
#body.siteindex .tagcloud .tagcloud35 a,
#body.siteindex .tagcloud .tagcloud40 a,
#body.siteindex .tagcloud .tagcloud45 a
{
	color: #555;
}


#body.siteindex .tagcloud .tagcloud50,
#body.siteindex .tagcloud .tagcloud55,
#body.siteindex .tagcloud .tagcloud60,
#body.siteindex .tagcloud .tagcloud65
{
	font-size: 16px;
}

#body.siteindex .tagcloud .tagcloud50 a,
#body.siteindex .tagcloud .tagcloud55 a,
#body.siteindex .tagcloud .tagcloud60 a,
#body.siteindex .tagcloud .tagcloud65 a
{
	color: #444;
}

#body.siteindex .tagcloud .tagcloud70,
#body.siteindex .tagcloud .tagcloud75,
#body.siteindex .tagcloud .tagcloud80,
#body.siteindex .tagcloud .tagcloud85
{
	font-size: 17px;
}

#body.siteindex .tagcloud .tagcloud70 a,
#body.siteindex .tagcloud .tagcloud75 a,
#body.siteindex .tagcloud .tagcloud80 a,
#body.siteindex .tagcloud .tagcloud85 a
{
	color: #333;
}

#body.siteindex .tagcloud .tagcloud90,
#body.siteindex .tagcloud .tagcloud95,
#body.siteindex .tagcloud .tagcloud100
{
	font-size: 18px;
}

#body.siteindex .tagcloud .tagcloud90 a,
#body.siteindex .tagcloud .tagcloud95 a,
#body.siteindex .tagcloud .tagcloud100 a
{
	color: #333;
}

#body.siteindex .tagcloud a:link, #body.siteindex .tagcloud a:visited
{
	font-family: "Trebuchet MS", Verdana, Helvetica, sans-serif;
	padding: 0 0.15em;
	text-decoration: none;
}

#body.siteindex .tagcloud a:hover
{
	text-decoration: underline;
}







/* Utility styles *************************************************************/

.structural-label /* labels for non-visual browsers */
{
	position: absolute;
	left: -99999px;
}

a#headerpromo {
top:-20px;
}