/*
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Title : Main CSS
Author : Helldesign
URL : http://www.helldesign.net

Description : This is the main stylesheet

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/


/****************************************************************
	RESET
****************************************************************/

/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 0.12.0
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;}

/****************************************************************
	BASIC
****************************************************************/
body {
	background:#fff;
	padding:0 0 20px;
	text-align:center;
}
body,input,textarea,select,td,th {
	color:#5b5b5b;
	font:12px Helvetica, Arial, sans-serif;
	line-height:1.25em;
}
a {
	color:#37a700;
	text-decoration:none;
}
a:visited {
}
a:hover {
	text-decoration:underline;
}

.hidden,
hr
{
	display:none;
}
strong {
	font-weight:bold;
}
em {
	font-style:italic;
}
.clr:after {
	clear:both;
	content:".";
	display:block;
	height:0;
	visibility:hidden;
}
/****************************************************************
	ROOT
****************************************************************/
#root {

}
#nav ul:after,
#wrapper-content-2:after,
.box-header:after,
.content .video:after,
#footer:after,
.content .stats-box .row:after,
.content .videos-box li:after{
	clear:both;
	content:".";
	display:block;
	height:0;
	visibility:hidden;
}

/****************************************************************
	HEADER
****************************************************************/
#wrapper-header{
	background: #dddddd url('../images/layout/bg_header.gif') 0 0 repeat-x;
	border-bottom:1px solid #c9c9c9;
	min-height:105px;
}
	#header{
		margin:0 auto;
		width:901px;
		position:relative;
		text-align:left;
	}
		/* logo */
		#header .logo {
			background: url('../images/layout/logo.gif') 0 0 no-repeat;
			height:50px;
			left:11px;
			position:absolute;
			top:45px;
			width:329px;
		}
			#header .logo a {
				display:block;
				height:28px;
			}
			#header .logo span {
				display:none;
			}
		/* headers */
		#header h2 {
			background-position:0 0;
			background-repeat:no-repeat;
			height:57px;
			left:345px;
			position:absolute;
			top:30px;
			width:600px;
		}
		#header h2.about {
			background-image: url('../images/layout/bg_header_about.gif');
		}
		#header h2.videos {
			background-image: url('../images/layout/bg_header_videos.gif');
		}
		#header h2.stats {
			background-image: url('../images/layout/bg_header_stats.gif');
		}
		#header h2.featured_apps {
			background-image: url('../images/layout/bg_header_featured_apps.gif');
		}
		#header h2.resources {
			background-image: url('../images/layout/bg_header_resources.gif');
		}
			#header h2 span {
				display:none;
			}
		/* header-map */
		#header #header-map {
			right:0;
			position:absolute;
			top:11px;
		}
			#header #header-map img{
				display:block;
			}
			#header-map .box {
				position:relative;
			
			}
			#header-map .box .hd .c,
			#header-map .box .ft .c {
				font-size:1px;
				background:transparent;
			}
			#header-map .box .hd,
			#header-map .box .hd .c,
			#header-map .box .ft,
			#header-map .box .ft .c{
				font-size:1px;
				height:10px;
			}
			#header-map .box .hd {
				background: url('../images/layout/bg_box_1_tl.png') 0 0 no-repeat;
				position:absolute;
				top:0;
				left:0;
				width:100%;
				z-index:10000;
				
			}
			#header-map .box .hd .c {
				background: url('../images/layout/bg_box_1_tr.png') 0 0 no-repeat;
				position:absolute;
				top:0;
				right:0;
				width:22px;
				z-index:10000;
			}
			#header-map .box .bd {
				background: url('../images/layout/bg_box_1_ml.gif') 0 0 repeat-y;
				
			}
			#header-map .box .bd .c {
				background: url('../images/layout/bg_box_1_mr.gif') 100% 0 repeat-y;
				padding:0 2px 0 2px;
			}
			#header-map .box .ft {
				background: url('../images/layout/bg_box_1_bl.png') 0 0 no-repeat;
				position:absolute;
				bottom:0;
				left:0;
				width:100%;
				z-index:10000;
			}
			#header-map .box .ft .c {
				background: url('../images/layout/bg_box_1_br.png') 0 0 no-repeat;
				position:absolute;
				top:0;
				right:0;
				width:22px;
				z-index:10000;

			}

/****************************************************************
	WRAPPER CONTENT
****************************************************************/
#wrapper-content{
	background:url('../images/layout/bg_wrapper-content.gif') 0 0 repeat-x;
}
	#wrapper-content-1{
		margin:0 auto;
		width:901px;
		text-align:left;
	}
	/* #nav */
	#nav {
		margin:0 0 22px;
		position:relative;
		top:-1px;
	}
	#nav ul {
		padding:0;
		height:34px;
		width:100%
	}
	#nav ul li {
		height:34px;
		float:left;
	}
	#nav ul li,
	#nav ul li a {
		background-position:0 0;
		background-repeat: no-repeat;
	}
		#nav ul li a {
			display:block;
			height:34px;
		}
		#nav ul li a:hover {
			background-position:0 -134px;
		}
		#nav ul li a.hover,
		#nav ul li a.hover:hover {
			background-position:0 -268px;
		}
		#nav ul li span {
			display:none;
		}
	#nav ul li#nav-home,
	#nav ul li#nav-home a {
		background-image: url('../images/layout/bg_nav-home.gif');
		width:67px;
	}
	#nav ul li#nav-videos,
	#nav ul li#nav-videos a {
		background-image: url('../images/layout/bg_nav-videos.gif');
		width:78px;
	}
	#nav ul li#nav-stats,
	#nav ul li#nav-stats a {
		background-image: url('../images/layout/bg_nav-stats.gif');
		width:61px;
	}
	#nav ul li#nav-featured_apps,
	#nav ul li#nav-featured_apps a {
		background-image: url('../images/layout/bg_nav-featured_apps.gif');
		width:143px;
	}
	#nav ul li#nav-resources,
	#nav ul li#nav-resources a {
		background-image: url('../images/layout/bg_nav-resources.gif');
		width:109px;
	}
	#nav ul li#nav-about,
	#nav ul li#nav-about a {
		background-image: url('../images/layout/bg_nav-about.gif');
		width:70px;
	}
	/* login box */
	#header .login-box {
		background: #f5f6f6 url('../images/layout/bg_login_box_r.gif') 100% 100% no-repeat;
		position:absolute;
		top:0;
		right:3px;
	}
		#header .login-box ul {
			background: url('../images/layout/bg_login_box_l.gif') 0 100% no-repeat;
			padding:0 3px 8px 20px;
			float:left;
		}
		#header .login-box ul:after {
			clear:both;
			content:".";
			display:block;
			height:0;
			visibility:hidden;
		}
			#header .login-box ul li {
				float:left;
				margin:0 11px 0 0;
				line-height:1em;
			}
				#header .login-box ul li a {
					background: url('../images/layout/underline.gif') 0 100% repeat-x;
					font-size:11px;
					font-weight:bold;
				}
				#header .login-box ul li a:hover {
					background:none;
					text-decoration:none;
				}
/****************************************************************
	gfx headers
****************************************************************/
	h2.page-header {
		border-bottom:1px solid #d3d3d3;
		color:#3b3b3b;
		font:bold 31px Helvetica, Arial, sans-serif;
		line-height:1.25em;
		letter-spacing:-0.05em;
		margin:0 0 6px 8px;
		padding:0 0 14px;
	}
	.box-header {
		padding:0 0 13px;
	}
	body.featured_apps .box-header {
		padding-left:8px;
	}
	body.stats .box-header {
		padding-left:8px;
	}
		.box-header div {
			border-bottom:1px solid #d3d3d3;
			float:left;
			padding:0 0 5px 1px;
		}
			.box-header h3 {
				color:#3b3b3b;  
				font:bold 12px Helvetica, Arial, sans-serif;
				line-height:1.25em;
				letter-spacing:-0.03em;
				text-transform:uppercase;  
				margin: 0 0 5px 0;
				display: block;
			}
			.box-header a.rss {
				background: url('../images/layout/icon_rss.gif') 0 0 no-repeat;
				float:left;
				height:16px;
				margin:0 0 0 5px;
				width:16px;
			}
				.box-header a.rss span {
					display:none;
				}
		
/****************************************************************
	.sidebar
****************************************************************/
/* .news */
.sidebar {
	background: url('../images/layout/bg_sidebar.gif') 186px 0 no-repeat;
	float:left;
	width:187px;
}
	.sidebar .news {
		clear:left;
		margin:0 18px 0 0;
	}
		.sidebar .news dl {
			margin:0 0 14px;
		}
		.sidebar .news li.last dl {
			margin:0;
		}
			.sidebar .news dl dt{
				font-size:12px;
				line-height:1.15em;
				margin:0 0 4px;
			}
			.sidebar .news dl dd{
				color:#a7a7a7;
				font-size:9px;
				line-height:1.15em;
				text-transform:uppercase;
			}
/****************************************************************
	.content
****************************************************************/
.home #wrapper-content-2{
	padding:0 0 0 8px;
}
.c-1,
.c-2,
.c-3{
	float:left;
}
/* .body .home */
.home #wrapper-content-2{
	background:url('../images/layout/bg_wrapper-content-2.gif') 194px 0 repeat-y;
}
.home .content {
	float:right;
	width:685px;
}
	
/* .body .about */
.about #wrapper-content-2{
	background:url('../images/layout/bg_wrapper-content-2.gif') 417px 0 repeat-y;
	padding-left:8px;
}
	.about .c-1 {
		background: url('../images/layout/bg_sidebar.gif') 409px 0 no-repeat;
		padding:0 34px 0 0;
		width:376px;
	}
	.about .c-2 {
		margin:0 0 0 45px;
		width:420px;
	}
/* .body .resources */
.resources #wrapper-content-2{
	background:url('../images/layout/bg_wrapper-content-2_1.gif') 279px 0 repeat-y;
	padding-left:8px;
}
	.resources .c-1 {
		background:  url('../images/layout/bg_sidebar.gif') 271px 0 no-repeat;
		padding:0 34px 0 0;
		width:238px;
	}
	.resources .c-2 {
		background:  url('../images/layout/bg_sidebar.gif') 306px 0 no-repeat;
		margin:0 0 0 29px;
		padding:0 34px 0 0;
		width:273px;
	}
	.resources .c-3 {
		margin:0 0 0 31px;
		width:254px;
	}
/* .body .stats */
.stats #wrapper-content-2{
	padding-left:0;
}

	.content p{
		margin:0 0 15px;
	}
	.content ul li {
		margin:0 0 15px;
	}
	.content ul.blogs {
		margin:0 0 15px;
	}
		.content ul.blogs li {
			margin:0 0 3px;
		}
	.content dl.developers {
		margin:0 0 2px;
	}
		.content dl.developers dt {
			margin:0 0 1px;
		}
		.content dl.developers dd {
			color:#a7a7a7;
			font-size:9px;
			font-weight:bold;
			margin:0 0 12px;
			line-height:1.5em;
			text-transform:uppercase;
		}
	.content address {
		display:block;
		font-weight:bold;
		margin:0 0 15px;
	}
	/* .video*/
	.content .video {
		border-bottom:1px solid #b6b6b6;
		margin:0 0 5px;
		padding:0 0 1px;
	}
		.content .video .player {
			float:left;
			margin:0 18px 5px 0;
		}
			.content .video .player img{
				display:block;
			}
	/* .home .featured-apps */
	.content .scroller{
		position:relative;
		padding:0 0 0 22px;
		height:87px;
	}
	body.featured_apps .content .scroller {
		border-bottom:1px solid #b6b6b6;
		height:219px;
		margin:0 0 7px;
		padding:0 0 0 29px;
	}
	body.featured_apps .content .last-scroller {
		border-bottom:none;
	}

.content div.scrollable {
	position:relative;
	overflow:hidden;
	width: 639px;
	height:67px;
	margin:0 0 0 1px;
}
body.featured_apps .content div.scrollable {
	width: 842px;
	height:199px;
}
.content .mask {
	background: url('../images/layout/bg_scrollable_1_1.gif') 0 0 no-repeat;
	width: 2px;
	height:67px;
	top:0;
	left:22px;
	z-index:100;
	position:absolute;
}
.content .mask-1 {
	background: url('../images/layout/bg_scrollable_1_2.gif') 0 0 no-repeat;
	width: 2px;
	height:67px;
	top:0;
	left:661px;
	z-index:100;
	position:absolute;
}
body.featured_apps .content .mask {
	background: url('../images/layout/bg_scrollable_2_1.gif') 0 0 no-repeat;
	left:29px;
	width: 2px;
	height:199px;
}
body.featured_apps .content .mask-1 {
	background: url('../images/layout/bg_scrollable_2_2.gif') 0 0 no-repeat;
	left:871px;
	width: 2px;
	height:199px;
}
	div.scrollable .items {	
		/* this cannot be too large */
		width:5000em;	
		position:absolute;
		clear:both;
		margin-left:10px;
	}
		div.scrollable .items li {
			float:left;
			text-align:center;
			width:617px;
			margin-right: 20px;
		}
		body.featured_apps div.scrollable .items li {
			width:243px;
			margin-right:46px;
		}
		div.scrollable .items div.active {
			/*
			background-color:#fff;*/
		}
		body.featured_apps .content div.scrollable .items li dl {
			padding:0 5px;
		}
		.content div.scrollable .items li dl dt {
			float:left;
			height:65px;
			text-align:center;
			width:203px;
		}
		body.featured_apps .content div.scrollable .items li dl dt {
			float:none;
			width:auto;
			height:99px;
			line-height:101px;
		}
			.content div.scrollable .items li dl dt img {
				margin:4px auto;
			}
			body.featured_apps .content div.scrollable .items li dl dt img {
				margin:0 auto;
				vertical-align:middle;
			}
		.content div.scrollable .items li dl dd {
			float:left;
			height:65px;
			margin:10px 0 0;
			width:400px;
		}
		body.featured_apps .content div.scrollable .items li dl dd {
			float:none;
			height:100px;
			margin:0;
			text-align:left;
			width:auto;
		}
	.content div.scrollable {
		float:left;
	}
		.content .scroller a.prev,
		.content .scroller a.next{
			display:block;
			height:67px;
			position:absolute;
			top:0;
			width:21px;
			cursor:pointer;
		}
		body.featured_apps .content .scroller a.prev,
		body.featured_apps .content .scroller a.next{
			height:199px;
		}
		.content .scroller a.prev span,
		.content .scroller a.next span {
			display:none;
		}
		.content .scroller a.prev {
			background: url('../images/layout/bg_lnk_prev.gif') 0 25px no-repeat;
			left:3px;
		}
		body.featured_apps .content .scroller a.prev {
			background-position:0 84px;
			left:10px;
		}
		.content .scroller a.prev:hover {
			background-position:0 -94px;
		}
		body.featured_apps .content .scroller a.prev:hover {
			background-position:0 -35px;
		}
		.content .scroller a.next {
			background: url('../images/layout/bg_lnk_next.gif') 3px 25px no-repeat;
			right:3px;
		}
		body.featured_apps .content .scroller a.next {
			background-position:3px 84px;
		}
		body.featured_apps .content .scroller a.next {
			right:9px;
		}
		.content .scroller a.next:hover {
			background-position:3px -94px;
		}
		body.featured_apps .content .scroller a.next:hover {
			background-position:3px -35px;
		}
		/* disabled navigational button */
		.content .scroller a.disabled {
			visibility:hidden !important;
		}
/****************************************************************
	footer
****************************************************************/
#footer {
	border-top:1px solid #d3d3d3;
	color:#a2a2a2;
	font-size:10px;
	letter-spacing:-0.05em;
	margin:16px 0 0;
	padding:11px 0 0;
}
	#footer .copy-design{
		float:right;
	}
		#footer a {
			color:#a2a2a2;
		}
			#footer .copy {
				float:left;
				text-align:right;
				padding:0 3px 0 0;
			}
			#footer h1.design{
				float:left;
				font-size:10px;
				font-weight:normal;
				margin:0;
				padding:0;
				text-align:right;
			}
				#footer h1.design a {
					background: url('../images/layout/logo_helldesign.gif') 100% 5px no-repeat;
					padding:6px 11px 2px 0;
					z-index:100;
					margin:0 0 0 2px;
				}
/****************************************************************
	stats
****************************************************************/
.content .stats-box {
	border-bottom:1px solid #b6b6b6;
	margin:0 0 7px;
	padding:0 6px 25px 8px;
}
.content .last-box {
	border-bottom:none;
	margin:0 0 24px;
	padding-bottom:0;
}

.content .stats-box li {   
	list-style-type: disc;   
}
.content .stats-box ul {   
	margin-left: 15px;
	font-size: 1.1em;
}    
                   
.disclaimer {
	font-size: 0.9em;
	font-style: italic;
}

.content .stats-box a {
	text-decoration: underline;
}

.content .stats-box .row {
	padding:0 0 12px 0;
}
	.content .stats-box .col-1 {
		float:left;
		width:436px;
	}
	.content .stats-box .col-2 {
		float:right;
		width:436px;
	}
		.content .stats-box .graph {
			background:#dedede;
		}
			.content .stats-box .graph .body{
				background:#fff;
				border:1px solid #c0c0c0;
				left:-2px;
				position:relative;
				top:-2px;
				text-align:center;
			}
			.content .stats-box .graph .body img {
				display:block;
				margin:0 auto;
			}
		.content .stats-box p {
			margin:0 0 7px;
			padding:7px 0 0;
		}
/****************************************************************
	videos-box
**************************************************************/
.content .videos-box li {
	margin:0;
	padding:0 0 8px;
    padding-bottom: 20px;
}
	.content .videos-box li .player {
		float:left;
		padding:2px 0 0;
		width:400px;
	}
	.content .videos-box li .desc {
		float:right;
		min-height:192px;
		padding:0 20px 0 0;
		width:450px;
	}