@import "nv-top.css";
@import "nv-footer.css";
@import "nv-post.css";

/* Generic */
html{
	font-size: 62.5%;
}
html, body{
	margin: 0;
	padding: 0;
}
body{
	background: #333 url(img/body.png) repeat-x left 24px;
	color: #FFF;
	font: 1.1em/1.8em "Lucida Grande", Tahoma, Arial, sans-serif;
}

.autoclear:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}
.autoclear {overflow: hidden;}
.autoclear {display: inline-block;}

/* Hides from IE5/Mac \*/
* html .autoclear {height: 1px; overflow: visible;}
.autoclear {display: block;}
/* End hide from IE5/Mac */

h1, h2, h3{
	font-weight: normal;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2{
	font-size: 1.6em;
	color: #F90;
}
h3{
	font-size: 1.3em;
}
a{
	color: #FFF;
}
a:hover{
	color: #F90;
}
a img{
	border: 0;
}
fieldset{
	padding: 0;
	margin: 0;
	border: 0;
}

hr{
	clear: both;
	border: 0;
	height: 10px;
	background: transparent;
}
/*
hr{
    background: transparent url(img/separator.png) no-repeat center center;
}
*/

/*
img.hr{
	clear: both;
	width: 443px;
	display: block;
	margin: 2em auto;
}
*/
hr.separator{
	background: transparent;
	visibility: hidden;
}
div.clear{
	height: 10px;
	clear: both;
	background: url(img/rounded.png) no-repeat left top;
}
/*
a.bt-big{
	display:-moz-inline-block;
	display:-moz-inline-box;
	display: inline-block;
	height: 30px;
	padding-right: 16px;
	background: transparent url(img/bt-big.png) no-repeat right top;
}
	a.bt-big span{
		display:-moz-inline-block;
		display:-moz-inline-box;
		display: inline-block;
		height: 30px;
		line-height: 30px;
		padding-left: 16px;
		background: transparent url(img/bt-big.png) no-repeat left top;
	}
a.bt-big:hover{
	background-position: right bottom;
}
	a.bt-big:hover span{
		background-position: left bottom;
	}
*/

/* Header
 ******************************************************************************/
#header{
	position: relative;
	margin: 0 auto;
	width: 900px;
}
	#header h1{
		margin: 0 auto;
		padding: 30px 0;
		width: 900px;
	}
	#header h1 a{
		display: block;
		text-indent: -1000em;
		overflow: hidden;
		
		height: 40px;
		width: 178px;
		background: transparent url(img/static/netvibes.png) no-repeat left center;
	}
	
	#header ul.nav{
		position: absolute;
		top: 0;
		right: 0;
		width: 600px;
		height: 72px;
		line-height: 72px;
		margin: 0;
		padding: 0 20px 0 0;
		text-align: right;
	}
		#header ul.nav li{
			display: inline;
			margin-left: 2em;
		}
		#header ul.nav li a{
			text-transform: uppercase;
			text-decoration: none;
			color: #AAA;
		}
		#header ul.nav li.selected a{
			color: #F90;
			cursor: default;
		}
		#header ul.nav li a:hover{
			color: #CCC;
		}
		#header ul.nav li.selected a:hover{
			color: #F90;
		}

/* Content
 ******************************************************************************/
.content{
	margin: 0 auto 20px auto;
	width: 900px;
	font-size: small;
}
	.content h2{
		margin: 0 0 10px 10px;
		color: #d2d1d1;
		font-size: 2em;
	}
/* Intro
 ******************************************************************************/
#intro, #invite{
	height: 286px;
}
#intro h2, #invite h2{
	font-size: large;
	font-weight: bold;
	line-height: 1.2em;
	color: #FFF;
}
#intro{
	float: left;
	width: 523px;
	padding: 20px;
	background: #333 url(img/intro.jpg) no-repeat;
}
	#intro p{
		width: 260px;
	}
#invite{
	float: left;
	width: 279px;
	padding: 20px;
	margin-left: 18px;
	
	background: #333 url(img/invite.jpg) no-repeat;
}
	#invite form p label{
		display: block;
		width: 8em;
		float: left;
	}
	#invite form p{
		clear: left;
	}
	#invite p.submit{
		text-align: center;
	}
		#invite p.submit input.submit{
			display: block;
			margin: 0 auto;
			border: 0;
			height: 24px;
			width: 128px;
			background: transparent url(img/button.png) no-repeat center top;
			color: #FFF;
			cursor: pointer;
		}
		#invite p.submit input.submit:hover{
			background: transparent url(img/button.png) no-repeat center bottom;
		}
	#invite form p.invite{
		margin: 0;
		text-align: center;
		font-size:0.8em;
	}
#intro h2, #invite h2{
	margin: 0;
}

/* Nav
 ******************************************************************************/
#nav{
	margin: 0;
	font-size: 1.2em;
	line-height: 32px;
	padding: 0 0 20px 0;
	font-family: Helvetica, Arial, sans-serif;
	height: 32px;
	background: transparent url(img/nav/navigation.png) no-repeat left top;
}
	#nav ul{
		margin: 0;
		padding: 0;
		height: 32px;
		background: transparent url(img/nav/nav.png) no-repeat right top;
	}
		#nav ul li{
			display: block;
			float: left;
			border-right:1px solid #333;
		}
		#nav ul.path li{
			padding-right: 16px;
			background: url(img/nav/step.png) no-repeat right center;
		}
		#nav ul.path li.first{
			background: url(img/nav/step-first.png) no-repeat right center;
		}
		#nav ul li.selected{
			background: #555;
		}
		#nav ul.path li.selected{
			background: url(img/nav/step-selected.png) no-repeat right center;
		}
		#nav ul li.first-selected{
			background: transparent url(img/nav/step-first-selected.png) no-repeat left center;
		}
		#nav ul.path li.first-selected{
			background: url(img/nav/step-first-selected.png) no-repeat right center;
		}
		#nav ul.path li.last-selected{
			background: url(img/nav/step-last.png) no-repeat right center;
		}
		#nav ul li.signup{
			background: transparent;
		}
		#nav ul li a{
			display: block;
			padding: 0 10px 0 10px;
			text-decoration: none;
			color: #CCC;
		}
		#nav ul.path li.first a{
			background: url(img/nav/step-first.png) no-repeat left center;
		}
		#nav ul.path li.first-selected a{
			background: url(img/nav/step-first-selected.png) no-repeat left center;
		}
		#nav ul li.selected a,
		#nav ul li.first-selected a,
		#nav ul li.last-selected a{
			color: #FFF;
			cursor: default;
		}
		#nav ul li a:hover{
			color: #F90;
		}
		#nav ul li.selected a:hover,
		#nav ul li.first-selected a:hover,
		#nav ul li.last-selected a:hover{
			color: #FFF;
		}

        #nav ul .submit {
            background:transparent url(img/button.black.bg.png) no-repeat scroll right 0;
            display:inline;
            height:24px;
            padding-right:8px;
            margin: 4px 8px;
            border:0;
        }
        #nav ul li.submit a {
            color: #FFF;
        }
        * html #nav ul .submit a{
            padding:3px 3px 1px 11px;
        }
        * html #nav ul .submit {
            width: 180px;
        }
        #nav ul .submit a {
            background:transparent url(img/button.black.bg.png) no-repeat scroll left 0;
            cursor:pointer;
            display:block;
            height:18px;
            line-height:20px;
            padding:3px 3px 3px 11px;
            text-align: center;
            white-space: no-wrap;
            margin: 0;
        }
        #nav ul .submit:hover {
            background:transparent url(img/button.black.bg.png) no-repeat scroll right -24px;
        }
        #nav ul .submit a:hover {
            background:transparent url(img/button.black.bg.png) no-repeat scroll left -24px; 
            color:#FFFFFF;         
        }

/* Main info
 ******************************************************************************/
#main{
	background: #FFF url(img/rounded.png) no-repeat left -20px;
	color: #333;
	padding: 20px;
}
	#main .title{
		position: relative;
	}
		#main .title a{
			color: #666;
			position: absolute;
			right: 10px;
			top: -5px;
			text-decoration: none;
			height: 24px;
			line-height: 24px;
			padding-right: 20px;
			background: transparent url(img/next.png) no-repeat right top;
		}
		#main .title a:hover{
			color: #999;
			background-position: right bottom;
		}

	#main .side{
		width: 250px;
		float: left;
		margin: 0;
		padding: 0;
	}
		#main .side a{
			text-decoration: none;
		}
		#main .side a:hover{
			color: #F90;
		}
		#main .side h3{
			margin-top: 0;
		}
		#main .side ul{
			margin: 0 10px 1.5em 0;
			padding: 0;
			border-bottom: 1px solid #EEE;
		}
			#main .side ul ul{
				padding-left: 20px;
				border: 0;
			}
		#main .side ul.collapsed{
			display: none;
		}
		#main .side ul li{
			list-style: none;
			border-top: 1px solid #EEE;
		}
		#main .side ul ul li{
			border: 0;
		}
		#main .side ul li a{
			display: block;
			padding: 5px 0;
			outline: 0;
		}
		#main .side ul li a.selected{
			font-weight: bold;
		}
		#main .side ul li a:hover{
			text-decoration: underline;
		}
	#main .content{
		margin: 0;
		padding: 0;
		width: 609px;
		float: right;
		border-left: 1px solid #EEE;
	}
	#main a{
		color: #333;
	}
	#main h2{
		margin-top: 10px;
		margin-bottom: 30px;
		color: #666;
	}
	
/* Overview
 ******************************************************************************/
#overview-private a,
#overview-more a{
	text-decoration: none;
}
#overview-private{
	width: 390px;
	margin-left: 20px;
	float: left;
	background: transparent url(img/overview/private.jpg) no-repeat center top;
}
#overview-more{
	width: 400px;
	margin-left: 40px;
	float: left;
}
	.overview-more{
		/*padding-left: 170px;
		padding-top: 40px;*/
		padding-right: 10px;
		height: 115px;
		font-size: 11px;
		clear: left;
	}
	.overview-more a.illus{
		display: block; 
		height: 115px; 
		width: 170px; 
		float: left; 
		overflow: hidden; 
		text-indent: -1000em;
	}
	.overview-more p{
		margin: 0;
		padding: 40px 0 0 0;
	}
	#overview-public{
		background: transparent url(img/overview/public.jpg) no-repeat;
	}
	#overview-community{
		background: transparent url(img/overview/community.jpg) no-repeat;
	}
	#overview-join{
		background: transparent url(img/overview/join.jpg) no-repeat;
	}
/*
ul.overview{
	margin: 0;
	padding: 0;
}
	ul.overview li{
		list-style: none;
	}
	ul.overview li a{
		display: block; 
		width: 215px;
		padding-top: 160px;
		padding-bottom: 10px;
		float: left;
		text-align: center;
	}
	ul.overview li.private a{
		background: transparent url(img/overview/private.png) no-repeat;
	}
	ul.overview li.public a{
		background: transparent url(img/overview/public.png) no-repeat;
	}
	ul.overview li.community a{
		background: transparent url(img/overview/community.png) no-repeat;
	}
	ul.overview li.join a{
		background: transparent url(img/overview/join.png) no-repeat;
	}
*/

/* Private
 ******************************************************************************/
.nv-thumbnailedList{
	
}
	.nv-thumbnailedList .item{
		width: 250px;
		margin: 0 20px 0 10px;
		float: left;
	}
	.nv-thumbnailedList .item img {
	}
	.nv-thumbnailedList .item h3{
		color: #F90;
		font-size: 1em;
		font-weight: bold;
	}
		#main .nv-thumbnailedList .item h3 a{
			color: #F90;
			text-decoration: none;
		}
	.nv-thumbnailedList .item p{
		text-align: justify;
	}

.nv-bigList{
	clear: left;
}
	.nv-bigList .item{
		margin: 0 20px 0 10px;
		float: left;
	}
	.nv-bigList .item img {
		float: left;
		margin-right: 10px;
	}
	.nv-bigList .item h3{
		color: #F90;
		font-weight: bold;
	}
	.nv-bigList .item h3,
	.nv-bigList .item h4{
		font-size: 1em;
		margin-left: 290px;
	}
	.nv-bigList p{
		margin-left: 290px;
	}

/* Information */
#info{
	padding: 20px 0;
}
	#info div.tabs{
		overflow: hidden;
		width: 560px;
		float: left;
	}
		#info div.tabs ul.tabs{
			margin: 0;
			padding: 0;
		}
		#info div.tabs ul.tabs li{
			display: block;
			float: left;
			height: 34px;
			padding: 0 16px 0 0;
			background: transparent url(img/tabs-normal.png) no-repeat right bottom;
			font-size: 0.8em;
		}
		* html #info div.tabs ul.tabs li{
			width: 170px;
		}
			#info div.tabs ul.tabs li a{
				color: #CCC;
				outline: 0;
				text-decoration: none;
				display: block;
				height: 34px;
				padding: 0 14px 0 30px;
				line-height: 34px;
				background: transparent url(img/tabs-normal.png) no-repeat left bottom;
			}
		#info div.tabs ul.tabs li.selected{
			background: transparent url(img/tabs.png) no-repeat right bottom;
		}
			#info div.tabs ul.tabs li.selected a{
				color: #FFF;
				background: transparent url(img/tabs.png) no-repeat left bottom;
			}
		#info div.tabs div.tab{
			padding: 20px;
			clear: both;
			background: #3A3A3A;
		}
		body.js #info div.tabs div.tab{
			display: none;
		}
		body.js #info div.tabs div.selected{
			display: block;
		}
		.section{
			clear: both;
			padding: 20px 20px 0 20px;
		}
			.section h3{
				margin-top: 0;
			}

	#info #widgets{
		width: 280px;
		padding: 20px;
		margin-left: 20px;
		float: left;
	}
		#info #widgets ul{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		#info #widgets li{
			border: 1px solid #000;
			margin-bottom: 10px;
		}
			div.widget{
				padding: 10px;
				border: 1px solid #333;
				background: #242424 url(img/widget.png) repeat-x left bottom;
			}
				div.widget img{
					float: left;
				}
				div.widget div.info{
					margin-left: 74px;
				}
				div.widget h3{
					font-weight: bold;
					font-size: 1em;
					margin: 0;
				}
				div.widget h3 a{
					text-decoration: none;
				}
				div.widget p{
					margin: 0;
				}
				
			#ecosystem{
				padding: 10px;
			}
				#ecosystem img{
					margin-top: 5px;
					float: left;
				}
				#ecosystem div.info{
					margin-left: 44px;
				}
				#ecosystem h3{
					font-weight: bold;
					font-size: 1em;
					margin: 0;
				}
				
/* Private
 ******************************************************************************/
		#moreinfo{
			width: 900px;
			margin: 0 auto;
			padding-top: 20px;
			clear: both;
		}
		#moreinfo .section{
			width: 185px;
			padding: 0 20px 20px 20px;
			margin: 0;
			float: left;
			clear: none;
			text-align: justify;
		}
		#videos{
			display: none;
		}
		
/* Big tabs
 ******************************************************************************/
body.js .section-tabs .tab{
	display: none;
}
body.js .section-tabs .selected-tab{
	display: block;
}