html { min-height: 100%; }
body, html {
	height: 100%;
	background-color: #0e0e0c;
	//background-image: url('../images/tt2/bkg-gradient.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	color: #999;
	font-size: 14px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	z-index: 1;
}
	#nodes {
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		background-image: url('../images/tt2/bkg-nodes.png');
		background-position: center top;
		background-repeat: no-repeat;
	}
		
		
/* TYPOGRAPHY */
a {
	text-decoration: none;
	color: #01c3f4;
	}
	
a:hover {
	color: #fff;
	transition: all .3s linear;
	-webkit-transition: all .25s linear;
	}
	
strong {
	font-weight: 500;
	}
	
i {
	font-style: italic;
	}
	
p {
	line-height: 19px;
	margin-bottom: 17px;
	}
	
p.deviceartist {
	font-size: 12px;
	line-height: 18px;
	}

p.devicefeature {
	color: #c1c1c1;
	font-size: 16px;
	line-height: 22px;
}

h1 {
	color: #fff;
	font-size: 22px;
	margin: 0 0 16px -27px;
	padding-left: 27px;
	display: block;
	background-image: url('../images/knob_bullet.png');
	background-position: 0 center;
	background-repeat: no-repeat;
	}

h1.pagetitle {
	color: #fff;
	font-size: 28px;
	margin: 0 30px 45px 0;
	padding: 0;
	display: block;
	background-image: none;
	}
	
h1.combofeature {
	color: #fff;
	font-size: 36px;
	margin: 5px 0 15px 0;
	font-weight: bold;
	padding: 0;
	display: block;
	background-image: none;
	}


h1.devicefeature {
	color: #fff;
	font-size: 40px;
	margin: 0 0 10px -30px;
	display: block;
	background-image: none;
}

h1.deviceartist {
	color: #fff;
	font-size: 22px;
	margin: 15px 0 16px 0;
	padding-left: 0;
	display: block;
	background-image: none;
	}
	
h2 {
	color: #fff;
	font-size: 22px;
	margin: 0 0 17px 0;
	}
	
h2.combosubhead {
	color: #fff;
	font-size: 18px;
	font-weight: 100;
	line-height: 23px;
	margin: 0 0 30px 0;
	}

	
h2.devicefeature {
	color: #01c3f4;
	font-size: 24px;
	font-weight: 500;
	margin: 0 0 20px 0;
	display: block;
	background-image: none;
}

h3 {
	color: #fff;
	font-size: 17px;
	margin: 0 0 17px 0;
	}
	
h4 {
	color: #575757;
	font-size: 17px;
	line-height: 21px;
	margin-bottom: 20px;
	}
	
h5 {
	color: #01c3f4;
	margin: -13px 0 15px 0;
	font-weight: 500;
	}
	
h6 {
	color: #fff;
	font-weight: 500;
	line-height: 19px;
	}
	
	
#artist_feat p {
	color: #c754a0;
	}
	
#artist_feat a {
	font-size: 11px;
	float: right;
	}
	
div#content ul {
	font-size: 13px;
	line-height: 23px;
	list-style: disc;
	list-style-position: inside;
	color: #c1c1c1;
	}
	
.player_subtitle {
	display: block;
	color: #fff;
	font-size: 11px;
	margin: 5px 0 35px 0;
	}
	
.tt_credit {
	color: #3d3d3d;
	font-size: 11px;
	float: right;
	}
	
#effects h1 {
	color: #fff;
	font-size: 20px;
	margin: 0 0 20px 0;
	padding-left: 0;
	display: block;
	background: none;
	}
	
#effects h2 {
	font-size: 17px;
	}
	
#effects h5 {
	font-size: 12px;
	}
	
#effects p {
	font-size: 12px;
	line-height: 18px;
	}
	
.more {
	font-size: 11px;
	text-align: right;
	}
	
hr {
	border: 0;
	height: 1px;
	color: #343433;
	background-color: #343433;
	margin-bottom: 20px;
	}
	
#deviceFeature h1 { 
	color: #fff;
	font-size: 36px;
	margin: 40px 0 5px 0;
	padding-left: 0;
	display: block;
	background-image: none;
	}

#deviceFeature h2 { 
	color: #01c3f4;
	font-size: 16px;
	font-weight: 500;
	}
	
#deviceFeature p { 
	color: #c1c1c1;
	font-size: 16px;
	line-height: 21px;
	margin-bottom: 20px;
	}

#deviceFeature p.featureprice { 
	border-top: 1px #818181 solid;
	padding: 10px 0 0 0;
	font-size: 16px;
	width: 390px;
	}
	

#featureAnatomy h1 {
	color: #fff;
	font-size: 24px;
	font-weight: 500;
	margin: 0 0 22px 0;
	padding-left: 0;
	background-image: none;
}

#featureAnatomy ol {
	list-style: decimal outside;
	color: #c1c1c1;
	font-size: 12px;
	line-height: 18px;
	margin-left: 14px;
}

#featureAnatomy li {
	margin-bottom: 10px;
}



	
		
/* STRUCTURE */

#container {
	width: 1000px;
	min-height: 100%;
	margin: 15px auto 30px auto;
	position: relative;
	}
	
#content {
	padding-top: 35px;
	clear: both;
	}

#content_full, .content_full {
    width: auto;
    padding: 30px;
}

#content_l, .content_l {
	width: 420px;
	float: left;
	padding: 10px;
	margin-left: 20px;
	position: relative;
	}
	
#content_r, .content_r {
	width: 420px;
	float: right;
	padding: 10px;
	margin-right: 0px;
	position: relative;
	}
	
#about_l {
	width: 420px;
	float: left;
	padding: 0;
	margin-left: 0;
	margin-top: 30px;
	position: relative;
	}
	
#about_r {
	width: 470px;
	float: right;
	padding: 0;
	margin-right: 40px;
	margin-top: 10px;
	position: relative;
	}

#feature_l {
	width: 575px;
	float: left;
	padding: 0;
	margin-left: 0;
	margin-top: 30px;
	position: relative;
	}
	
#feature_r {
	width: 260px;
	float: right;
	padding: 0;
	margin-right: 55px;
	margin-top: 40px;
	position: relative;
	}
	
#feature_widedev_l {
	width: 415px;
	float: left;
	padding: 0;
	margin-left: 0;
	margin-top: 30px;
	position: relative;
	}
	
#feature_widedev_r {
	width: 415px;
	float: right;
	padding: 0;
	margin-right: 0px;
	margin-top: 40px;
	position: relative;
	}

.tt_logo_main {
	position: absolute;
	top: 305px;
	left: 20px;
	}
	
.tt_logo_int {
	position: absolute;
	top: 50px;
	left: 20px;
	}
	
#feat {
	position: relative;
	width: 350px;
	margin: 0 0 60px -10px;
	padding: 38px 45px 45px 45px;
	border-width:1px;
    -moz-border-image:url("border-image.png") 1 stretch;
    -webkit-border-image:url("border-image.png") 1 stretch;
    border-image:url("border-image.png") 1 stretch;
	}
	
#artist_feat {
	position: relative;
	width: 400px;
	margin: 0 0 60px -10px;
	padding: 18px 20px 22px 20px;
	border-width:1px;
    -moz-border-image:url("border-image.png") 1 stretch;
    -webkit-border-image:url("border-image.png") 1 stretch;
    border-image:url("border-image.png") 1 stretch;
	}
	
.deviceArtists {
	float: left;
	width: 218px;
	padding: 0 29px 30px 0;
}

#deviceArtistIntro {
	float: left;
	width: 720px;
	padding: 0 0 30px 0;
}
	
#fb_feat {
	position: relative;
	width: 315px;
	padding: 30px 0px 30px 40px;
	border-width:1px;
    -moz-border-image:url("border-image.png") 1 stretch;
    -webkit-border-image:url("border-image.png") 1 stretch;
    border-image:url("border-image.png") 1 stretch;
    }
	
#dokogeo_feat {
	position: absolute;
	bottom: 125px;
	right: 50px;
	display: block;
	width: 235px;
	padding: 20px;
	border-width:1px;
    -moz-border-image:url("border-image.png") 1 stretch;
    -webkit-border-image:url("border-image.png") 1 stretch;
    border-image:url("border-image.png") 1 stretch;
    }

	#dokobot {
		position: absolute;
		bottom: 0;
		right: 100px;
		}

.newdevicebadge1 {
	position: absolute;
	top:140px;
	left:450px;	
	width:60px;
	height:59px;
}
		
.newdevicebadge2 {
	position: absolute;
	top:140px;
	left:775px;	
	width:60px;
	height:59px;
}

.newdevicebadge3 {
	position: absolute;
	top:100px;
	left:950px;	
	width:60px;
	height:59px;
}

.newdevicebadge4 {
	position: absolute;
	top:40px;
	left:160px;	
	width:60px;
	height:59px;
}

.newdevicebadge5 {
	position: absolute;
	top:410px;
	left:350px;	
	width:60px;
	height:59px;
}

#effects {
	position: relative;
	width: 990px;
	margin: 80px 30px 0px -30px;
	padding: 28px 0 30px 30px;
	border-width:1px;
    -moz-border-image:url("border-image.png") 1 stretch;
    -webkit-border-image:url("border-image.png") 1 stretch;
    border-image:url("border-image.png") 1 stretch;
	}
	
/* Div wrapping the highlighted device table */
div#highlightedDevices {
	position: relative;
	width: 990px;
	margin: 0px 30px 30px -30px;
	padding: 28px 0 30px 30px;
	
	/* Give it a gradient */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#384044', endColorstr='#000000'); /* for IE */
	background-image: linear-gradient(top, #384044 18%, #000000 96%);
	background-image: -o-linear-gradient(top, #384044 18%, #000000 96%);
	background-image: -moz-linear-gradient(top, #384044 18%, #000000 96%);
	background-image: -webkit-linear-gradient(top, #384044 18%, #000000 96%);
	background-image: -ms-linear-gradient(top, #384044 18%, #000000 96%);

	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0.18, #384044),
		color-stop(1, #000000)
	);
	border-width:1px;
	
	/* Hack it for safari */
    -moz-border-image:url("border-image-highlight.png") 1 stretch;
    -webkit-border-image:url("border-image-highlight.png") 1 stretch;
    border-image:url("border-image-highlight.png") 1 stretch;
 	}

/* Hack it for safari */ 	
table#highlightedDevicesGrad {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#384044', endColorstr='#000000'); /* for IE */
	background-image: linear-gradient(top, #384044 18%, #000000 100%);
	background-image: -o-linear-gradient(top, #384044 18%, #000000 100%);
	background-image: -moz-linear-gradient(top, #384044 18%, #000000 100%);
	background-image: -webkit-linear-gradient(top, #384044 18%, #000000 100%);
	background-image: -ms-linear-gradient(top, #384044 18%, #000000 100%);

	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0.18, #384044),
		color-stop(1, #000000)
	);
	}
	
#deviceFeature img {
	float: right;
	display: block;
	margin: -40px 0 0 50px;
	}
	
#newDevice {
	position: relative;
	width: 350px;
	margin: 0 0 20px -10px;
	padding: 38px 45px 10px 45px;
	border-width:1px;
    -moz-border-image:url("border-image.png") 1 stretch;
    -webkit-border-image:url("border-image.png") 1 stretch;
    border-image:url("border-image.png") 1 stretch;
}

#newDevice img.badge {
	position: relative;
	margin: -48px -55px 0 0;
	float: right;
}

#content_r img.soundcloudFeature {
	position: relative;
	display: block;
	float: right;
	margin: -10px 0 0 0;
	}

#featureAnatomy {
	position: relative;
	width: 880px;
	margin: 0 0 80px -10px;
	padding:40px 40px 40px 40px;
	border-width:1px;
    -moz-border-image:url("border-image.png") 1 stretch;
    -webkit-border-image:url("border-image.png") 1 stretch;
    border-image:url("border-image.png") 1 stretch;
    background: #999; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c2c2b', endColorstr='#000000'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#2c2c2b), to(#000)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #2c2c2b,  #000); /* for firefox 3.6+ */ 
}

#featureAnatomy img {
	display: block;
	float: right;
	margin-left: 80px;
}

#featureAnatomy img.xox {
	display: block;
	float: left;
	margin: 0 0 0 0;
}

#anatomyList {
	position: relative;
	width: 410px;
	margin: 50px 30px 40px 0;
}

#feature iframe {
	border: 1px solid #2d2d2d;
	margin: 0 0 50px 0;
	}

iframe {
	border: 1px solid #2d2d2d;
	margin: 0 0 50px -10px;
	}
	
#users {
	float: left;
	width: 180px;
	font-size: 12px;
	margin: 0 10px 15px 10px;
	}
	
#thirdparty {
	float: right;
	width: 180px;
	font-size: 12px;
	margin: 0 10px 15px 10px;
	}
	
object {
	margin-top: 10px;
	}
	
td div {
	width: 302px;
	position: relative;
	}
	
#effects td div {
	width: 165px;
	position: relative;
	}
	
#effects td.wide div {
	width: 495px;
	position: relative;
	}

#effects {
	margin-left: -7px;
	}

td img {
	display: inline;
	margin-bottom: 4px;
	}
	
.ourapps {
	width: 925px;
	margin: 0 auto 0 auto;
	}
	
.ourapps table {
	margin:25px 0 50px 0;
	width: 100%;
	}
	
	
.ourapps td img {
	display: inline;
	margin-bottom: 25px;
	}
	
.ourapps td div {
	width: 282px;
	position: relative;
	}
	
.userguide {
	position: absolute;
	right: 0;
	z-index: 0;
	}
	
.clientlogos img {
	margin: 0 36px 17px 0;
	float: left;
	}
	
#clear, .clear {
	clear: both;
	}
	
	
	
/* HEADER STRUCTURE */	
ul#nav {
	width: 100%; height: 58px;
	margin: 0 0 10px -1px;
	background-color: #343330;
	border: 1px solid #44433f;
	white-space: nowrap;
	line-height: 58px;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: bold;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
	text-align: center;
	color: #fff;
}

	ul#nav li {
		list-style: none;
		display: block; float: left;
		width: 142px; height: 100%;
		border-right: 1px solid #44433f;
		-webkit-transition: all 0.3s;  
		-moz-transition: all 0.3s;  
		-o-transition: all 0.3s;  
		transition: all 0.3s;
	}
	
		ul#nav li:hover { background-color: #c2c1c1; color: #343330; text-shadow: none; }
		
		ul#nav li.active { background-color: #262523; }
			
			ul#nav li.active:hover { background-color: none; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); }
	
		ul#nav li:last-child { border: 0; }
		
		ul#nav li a { color: inherit; text-decoration: none; display: block; height: 100%;}
		
		ul#nav li a {
			-webkit-transition: none;  
			-moz-transition: none;  
			-o-transition: none;  
			transition: none;
		}
		
		ul#nav .icnTT, ul#nav .icnRetro {
			display: inline-block;
			width: 35px; height: 35px;
			background-size: 100%;
			background-position-y: 70px;
			vertical-align: middle;
		}
		
			ul#nav .icnTT { background-image: url('../images/tt2/icn-ttlogo.png'); }
		
			ul#nav .icnRetro { background-image: url('../images/tt2/icn-retrologo.png'); }
		
			ul#nav a:hover .icnTT, ul#nav a:hover .icnRetro { background-position-y: 35px; }
				
				ul#nav li.active a:hover .icnTT, ul#nav li.active a:hover .icnRetro { background-position-y: 70px; }
	


/* Feature list Styles */

div.featurelist h2 {
	border-top: 1px #424242 solid;
	margin-top: 20px;
	padding-top: 20px;
	}
	div.featurelist h1 + h2 {
		border-top: none;
		}

div.featurelist h3 {
	margin: 0 0 5px 0;
	padding: 0;
	font-size: 13px;
	color: #c1c1c1;
	font-weight: bold;
	}
	
div.featurelist ul {
	margin-bottom: 30px;
	}
	

/* Email Signup */

div#emailBox {
	width: 693px;
	height: 168px;
	border: 1px solid #565655;
	background: #181a19; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#393939', endColorstr='#181a19'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#393939), to(#181a19)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #393939,  #181a19); /* for firefox 3.6+ */
	margin: -20px 0 25px 0;
	}
	
	div#emailBox label {
		display: block;
		padding-left: 20px;
		height: 45px;
		line-height: 45px;
		background-color: #00aeef;
		font-size: 18px;
		font-weight: normal;
		color: #fff;
		margin-bottom: 32px;
		}
		
	div#emailBox input#emailInput {
		-webkit-appearance: none;
		width: 478px;
		height: 52px;
		line-height: 52px;
		font-size: 25px;
		color: #444;
		padding-left: 20px;
		-webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		border-radius: 7px;
		border: 1px solid #6d6d6d;
		-moz-box-shadow: inset 6px 9px 7px rgba(0,0,0,0.12);
  		-webkit-box-shadow: inset 6px 9px 7px rgba(0,0,0,0.12);
  		box-shadow: inset 6px 9px 7px rgba(0,0,0,0.12);
  		margin: 0 15px 0 34px;
  		vertical-align: middle;
  		}
  		
  	div#emailBox input#emailSubmit {
  		-webkit-appearance: none;
  		width: 111px;
		height: 52px;
		font-size: 14px;
		font-weight: bold;
		text-transform: uppercase;
		text-shadow: 0 1px 0 rgba(255,255,255,1);
		color: #4a4c4e;
		-webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		border-radius: 7px;
		border: 1px solid #6d6d6d;
		background: #bbbbbb; /* for non-css3 browsers */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#bbbbbb'); /* for IE */
		background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#bbbbbb)); /* for webkit browsers */
		background: -moz-linear-gradient(top,  #fefefe,  #bbbbbb); /* for firefox 3.6+ */
		vertical-align: middle;
		}
		
h3#emailListHeader {
	font-size: 18px;
	line-height: 18px;
	margin-bottom: 20px;
	}
	
div#content ul#emailList {
	font-size: 14px;
	line-height: 38px;
	list-style: none;
	color: #c1c1c1;
	width: 500px;
	}
	
	div#content ul#emailList li {
		background: url('../images/email_list_chevron.png') no-repeat left center;
		padding-left: 27px;
		border-bottom: 1px solid #454544;
		}
		
		div#content ul#emailList li:last-child {
			border: 0;
			}