body, html {
	height: 100%;
	background: #000;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #999999;
	font-weight: 200;
	}
		
		
/* 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;
	letter-spacing: 0.08em;
	}

h1.pagetitle {
	color: #fff;
	font-size: 28px;
	margin: 0 30px 45px 0;
	padding: 0;
	display: block;
	background-image: none;
	letter-spacing: 0;
	}

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

h1.deviceartist {
	color: #fff;
	font-size: 22px;
	margin: 15px 0 16px 0;
	padding-left: 0;
	display: block;
	background-image: none;
	letter-spacing: 0.08em;
	}
	
h2 {
	color: #fff;
	font-size: 22px;
	margin: 0 0 17px 0;
	letter-spacing: 0.08em;
	}
	
h2.devicefeature {
	color: #01c3f4;
	font-size: 24px;
	font-weight: 500;
	margin: 0 0 20px 0;
	display: block;
	background-image: none;
	letter-spacing: 0;
}

h3 {
	color: #fff;
	font-size: 17px;
	margin: 0 0 17px 0;
	letter-spacing: 0.08em;
	}
	
h4 {
	color: #575757;
	font-size: 17px;
	line-height: 21px;
	margin-bottom: 20px;
	letter-spacing: 0.08em;
	}
	
h5 {
	color: #01c3f4;
	margin: -13px 0 15px 0;
	font-weight: 500;
	letter-spacing: 0.08em;
	}
	
h6 {
	color: #fff;
	font-weight: 500;
	line-height: 19px;
	letter-spacing: 0.08em;
	}
	
	
#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;
	letter-spacing: 0.08em;
	margin: 40px 0 5px 0;
	padding-left: 0;
	display: block;
	background-image: none;
	letter-spacing: 0.08em;
	}

#deviceFeature h2 { 
	color: #01c3f4;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.08em;
	}
	
#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: 960px;
	min-height: 100%;
	margin: 0 auto 30px auto;
	position: relative;
	}
	
#content {
	padding-top: 35px;
	background: url('../images/radial.png') no-repeat center top;
	clear: both;
	}
	
#content_l {
	width: 420px;
	float: left;
	padding: 10px;
	margin-left: 20px;
	position: relative;
	}
	
#content_r {
	width: 420px;
	float: right;
	padding: 10px;
	margin-right: 20px;
	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: 140px;
	left: 30px;
	}
	
.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:100px;
	left:290px;	
	width:60px;
	height:59px;
}
		
.newdevicebadge2 {
	position: absolute;
	top:8px;
	left:625px;	
	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: both;
	}
	
	
	
/* HEADER STRUCTURE */	

#header {
	position: relative;
	background-image: url('../images/tt_main.png');
	height: 470px;
	}
	
#header #nav {
	position: absolute;
	bottom: 10px;
	width: 100%;
	height: 75px;
	background-color: rgba(0, 0, 0, 0.75);
	letter-spacing: 0.08em;
	}
	
#header #nav img {
	float: left;
	margin: 16px 15px 0 20px;
	}
	
#header #nav ul {
	margin-top: 31px;
	}
	
#header #nav ul, #header #nav li {
	display: inline;
	font-size: 11px;
	float: left;
	font-weight: 400;
	}
		
#header #nav li {
	padding: 1px 7px;
	border-left: 1px solid #515151;
	}

#header #nav .nav_select:after {
	content: " ";
	display: block;
	width: 100%;
	position: relative;
	height: 3px;
	margin-top: -3px;
	top: 10px;
	background-image: url(../images/nav_pointer.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	}

#header #nav li:first-child {
	border: 0;
	}

#header #nav a {
	color: #fff;
	}
	
#header #nav a:hover {
	color: #01c3f4;
	-webkit-transition: all .25s linear;
	}

#header #nav #retronyms {
	width: 150px;
	float: right;
	overflow: hidden;
	margin-right: 15px;
	}
	
#header #nav #retronyms img {
	float: right;
	margin: 11px 0 0 10px;
	}
	
#header #nav #retronyms ul, #header #nav #retronyms li {
	display: block;
	float: none;
	padding: 0;
	border: 0;
	text-align: right;
	line-height: 14px;
	color: #fff;
	font-weight: 200;
	}
	
#header #nav #retronyms ul {
	margin-top: 18px;
	}
	
#header #nav #retronyms a {
	text-decoration: none;
	color: #01c3f4;
	}
	
#header #nav #retronyms a:hover {
	color: #fff;
	transition: all .3s linear;
	-webkit-transition: all .25s linear;
	}

#header #nav #featured {
	font-size: 11px;
	line-height: 14px;
	float: right;
	width: 155px;
	background-color: rgba(0, 0, 0, 0.9);
	padding-left: 15px;
	}
	
#header #nav #featured img {
	float: left;
	margin: 13px 10px 0 0;
	}
	
#header #nav #featured p {
	margin-top: 16px;
	padding-right: 20px;
	line-height: 14px;
	font-weight: 200;
	}
	
#header #nav #featured a {
	text-decoration: none;
	color: #01c3f4;
	}
	
#header #nav #featured a:hover {
	color: #fff;
	transition: all .3s linear;
	-webkit-transition: all .25s linear;
	}
	


/* 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;
			}