@font-face {
    font-family: 'DINMedium';
    src: url('http://www.razerzone.com/asset/fonts/dinm___0-webfont.eot');
    src: url('http://www.razerzone.com/asset/fonts/dinm___0-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.razerzone.com/asset/fonts/dinm___0-webfont.woff') format('woff'),
         url('http://www.razerzone.com/asset/fonts/dinm___0-webfont.ttf') format('truetype'),
         url('http://www.razerzone.com/asset/fonts/dinm___0-webfont.svg#DINMedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DINRegular';
    src: url('http://www.razerzone.com/asset/fonts/dinreg-webfont.eot');
    src: url('http://www.razerzone.com/asset/fonts/dinreg-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.razerzone.com/asset/fonts/dinreg-webfont.woff') format('woff'),
         url('http://www.razerzone.com/asset/fonts/dinreg-webfont.ttf') format('truetype'),
         url('http://www.razerzone.com/asset/fonts/dinreg-webfont.svg#DINRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*
@font-face {
    font-family: 'DINMedium';
    src: url('../../../fonts/dinm___0-webfont.eot');
    src: url('../../../fonts/dinm___0-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../../fonts/dinm___0-webfont.woff') format('woff'),
         url('../../../fonts/dinm___0-webfont.ttf') format('truetype'),
         url('../../../fonts/dinm___0-webfont.svg#DINMedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DINRegular';
    src: url('../../../fonts/dinreg-webfont.eot');
    src: url('../../../fonts/dinreg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../../fonts/dinreg-webfont.woff') format('woff'),
         url('../../../fonts/dinreg-webfont.ttf') format('truetype'),
         url('../../../fonts/dinreg-webfont.svg#DINRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/

/*reset*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	background:#000;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*main page*/

#header {
	width:1016px;
	margin: 20px auto;
}

#container{
	background:url(../images/bg.jpg) top center no-repeat;
	width:1275px;
	margin: 0 auto;
	/*font-family: Arial,Helvetica,sans-serif;
	*/
	font-family: Verdana, Arial,Helvetica,sans-serif;
	text-align: justify;
}

#container-cn{
	background:url(../images/bg.jpg) top center no-repeat;
	width:1275px;
	margin: 0 auto;
	font-family:  "Microsoft YaHei", Arial,Helvetica,sans-serif;
	text-align: justify;
}

#mainContainer{
	background:url(../images/mainBg-new.jpg) 65px 0 no-repeat;
	width:1016px;
	height: 755px;
	margin: -4px auto 0;
}	
.whatContainer{
	width:365px;
	height:175px;
	float:left;
	margin:260px 0 0 113px;
}
.guideContainer{
	width:365px;
	height:175px;
	float:left;
	margin:260px 0 0 60px;
}
#footer{
	width: 984px;
	margin: auto;
	text-align:left;
	border-top: 1px solid #1d1d1d;
}	
	
	
/*switchblade ui*/	

#uiContainer{
	background:url(../images/uiBg-new.jpg) 0 0 no-repeat;
	width:1016px;
	min-height:600px;
	margin: -4px auto 20px;
	/*padding-top: 425px;*/
	padding-top: 550px;
}
#switchContainer1{
	background:url(../images/switchbladeuibg1-new.jpg) no-repeat 485px -55px;
	width:1016px;
	min-height:436px;
	padding-top: 20px;
}
#switchContainer1 h2{
	color:#777777;
	font-size:25px;
	padding: 0 0 0 35px;
}
.switchDivider{
	background:url(../images/uiDivider.jpg) no-repeat;
	height:17px;
	width:1016px;
	margin: 20px auto 0;
}	
#switchContainer1 p{
	color:#777;
	font-size:13px;
	width:555px;
	padding-left: 35px;
	margin:10px 0;
	line-height:20px;
}	
.switchBox{
	width:236px;
	height:auto;
	float:left;
}	
#switchContainer2{
	background:url(../images/switchbladeuibg2-new.jpg) no-repeat left 36px;
	width:1016px;
	min-height:390px;	
}
#switchContainer2 h2{
	color:#777777;
	font-size:25px;
	padding:50px 0 0 430px;
}	
#switchContainer2 p{
	color:#777777;
	font-size:13px;
	width:574px;
	padding-left: 430px;
	margin:10px 0;
	line-height:20px;
}		
#switchContainer2 li{
	color:#777777;
	font-size:13px;
	line-height:20px;
	margin: 0 0 0 430px;
}	
#switchContainer3{
	background:url(../images/switchbladeuibg3-new.jpg) no-repeat right center;
	width:1016px;
	min-height:390px;
}
#switchContainer3 h2{
	color:#777777;
	font-size:25px;
	padding:50px 0 0 35px;
}	
#switchContainer3 p{
	color:#777777;
	font-size:13px;
	width:550px;
	padding-left: 35px;
	margin:10px 0;
	line-height:20px;
}		
#switchContainer3 a{
	color:#00ff00;
	font-size:13px;
	text-decoration:none;
}
#switchContainer3 a:hover{ text-decoration:underline;}	
#switchContainer3 li{
	color:#777777;
	font-size:13px;
	line-height:20px;
	margin: 0 0 0 450px;
}	
#switchContainer3 li{
	color:#777777;
	font-size:13px;
	line-height:20px;
	margin: 0 0 0 35px;
}	
#switchContainer4{
	background:url(../images/switchbladeuibg4-new.jpg) no-repeat 40px top;
	width:1016px;
	margin-bottom: 40px;
}	
#switchContainer4 h2{
	color:#777777;
	font-size:25px;
	padding:50px 0 0 400px;
}	
#switchContainer4 p{
	color:#777777;
	font-size:13px;
	width:574px;
	padding-left: 400px;
	margin:10px 0;
	line-height:20px;
}

#switchContainer4 ol {
	list-style: decimal inside;
}

#switchContainer4 li{
	color:#777777;
	font-size:14px;
	line-height:20px;
	margin-left: 400px;
}		
	
/*switchblade guide*/	
#switchGuideContainer{
	background:url(../images/guideBg-new.jpg) no-repeat left top;
	width:1016px;
	margin: -4px auto 20px;
	padding-top: 475px;
}

.guideMenu1{
	background:url(../images/guideMenu1.jpg) top center no-repeat;
	width:1016px;
	height:65px;
}

.gm1-cn {
	background:url(../images/guideMenu1-cn.jpg) top center no-repeat;
}
.guideMenu1 p{
	color:#777777;
	font-size:18px;
	margin-left: 230px;
	padding-top: 15px;
}
.guideMenu1 a{
	color:#777;
	font-size:18px;
	text-decoration:none;
	margin:0 10px;
}
.guideMenu1 a:hover{
	text-decoration:underline;
}	
.guideMenu2{
	background:url(../images/guideMenu2-new.jpg) top center no-repeat;
	width:1016px;
	height:65px;
}

.gm2-cn {
	background:url(../images/guideMenu2-cn.jpg) top center no-repeat;
}
.guideMenu2 p{
	color:#777;
	font-size:18px;
	text-decoration:none;
	margin-left: 230px;
	padding-top: 15px;
}
.guideMenu2 a{
	color:#777777;
	font-size:18px;
	text-decoration:none;
	margin: 0 10px 0 10px;
}
.guideMenu2 a:hover{
	text-decoration:underline;
}	
.guideMenu3{
	background:url(../images/guideMenu3-new.jpg) top center no-repeat;
	width:1016px;
	height:65px;
}

.gm3-cn{
	background:url(../images/guideMenu3-cn.jpg) top center no-repeat;
}
.guideMenu3 p{
	color:#777;
	font-size:18px;
	text-decoration:none;
	margin-left: 230px;
	padding-top: 15px;
}
.guideMenu3 a{
	color:#777777;
	font-size:18px;
	text-decoration:none;
	margin: 0 10px 0 10px;
}
.guideMenu3 a:hover{
	text-decoration:underline;
}
.guideText{
	width:1016px;
}
.guideText h2{
	color:#777777;
	font-size:25px;
	margin: 0 0 10px 35px;
}	
.guideText p{
	color:#777777;
	font-size:13px;
	margin: 0 0 0 35px;
}
.guideText img{
	margin:10px 0 10px 40px;
}	
.guideGesturesLeft{
	width:225px;
	min-height:200px;
	float:left;
    }

.guideGesturesLeft ul{margin:15px 0 0 35px;}
.guideGesturesLeft li{
	color:#777777;
	font-size:14px;
	line-height:21px;
}	
.guideGesturesRight{
	width:303px;
	min-height:300px;
	float:left;
}	

 /*sdk*/
 #sdkContainer{
	background:url(../images/sdkBg.jpg) 0 -42px no-repeat;
	width:1016px;
	min-height:600px;
	margin: -4px auto 20px;
	padding-top: 510px;
}

#sdkContainer1 h2{
	color:#777777;
	font-size:25px;
	padding: 0 0 0 35px;
}

#sdkContainer1 p{
	color:#777;
	font-size:13px;
	padding-left: 35px;
	padding-right: 35px;
	margin:10px 0;
	line-height:20px;
}

/*sdk*/
 #appsContainer{
	background:url(../images/appsBg.jpg) -125px -100px no-repeat;
	width:1016px;
	min-height:600px;
	margin: -4px auto 20px;
	padding-top: 545px;
}

#appsContainer1 h2{
	color:#777777;
	font-size:25px;
	padding: 0 0 0 35px;
	margin-bottom: 30px;
}	

.home {
	margin-right: 20px;
	font-size: 12px;
	text-align: right;
	display: none;
}

.home a {
	color: #777;
	text-decoration: none;
}

.home a:hover {
	color: #777;
	text-decoration: underline;
}

#facebooklike {
	margin: 20px 0;
}

.fl{float:left;}
.fr{float:right;}
.clear{clear:both;}

#nav {
	width: 1016px;
	height: 58px;
	margin: 35px auto 0;
	background: url(../images/menu-bg.png) no-repeat center center;
}

#nav ul {
	width: 715px;
	margin: auto;
}

#nav li {
	display: block;
	float: left;
	margin-left: 80px;
	font-family: "DINRegular", Arial, Helvetica, sans-serif;
	font-size: 18px;
	text-align: center;
	height: 58px;
	line-height: 58px;
	background: url(../images/green-arrow.png) no-repeat left center;
	padding-left: 15px;
}

#nav li:first-child {
	margin-left: 0;
}

#nav a {
	color: #fff;
}

#nav a:hover {
	color: #0f0;
}

#nav .selected {
	color: #0f0;
}

#links {
	padding-top: 430px;
}

a#what {
    background: url(../images/btn-what.jpg);
    display: block;
    width: 239px;
    height: 98px;
    margin-left: 12px;
}

a#what:hover,a#what.selected {
    background-position: 0px 98px;
}

a#guides {
    background: url(../images/btn-guides.jpg);
    display: block;
    width: 239px;
    height: 98px;
    margin-left: 12px;
}

a#guides:hover,a#guides.selected {
    background-position: 0px 98px;
}

a#apps {
    background: url(../images/btn-apps.jpg);
    display: block;
    width: 239px;
    height: 98px;
    margin-left: 12px;
}

a#apps:hover,a#apps.selected {
    background-position: 0px 98px;
}

a#sdk {
    background: url(../images/btn-sdk.jpg);
    display: block;
    width: 239px;
    height: 98px;
    margin-left: 12px;
}

a#sdk:hover,a#sdk.selected {
    background-position: 0px 98px;
}

a#visit {
    background: url(../images/btn-visit.jpg);
    display: block;
    width: 313px;
    height: 98px;
    margin-left: 185px;
}

a#visit:hover,a#visit.selected {
    background-position: 0px 98px;
}

a#apply {
    background: url(../images/btn-apply.jpg);
    display: block;
    width: 313px;
    height: 98px;
    margin-left: 20px;
}

a#apply:hover,a#apply.selected {
    background-position: 0px 98px;
}

#list {
  float: left;
  color: white;
  padding: 0;
  margin-left: -200px;
  width: 175px;
  background: url(../images/apps-bg.png) no-repeat right top;
  font-size: 12px;
  font-weight: bold;
  color: #777;
  min-height: 475px;
}

#list div.tracker-individual-blip {
	cursor: pointer !important;
	background: url(../images/grey-arrow-small.png) no-repeat left center;
	padding-left: 12px;
}

#list div.tracker-individual-blip-selected {
	background-image: url(../images/green-arrow-small.png);
}

#list li {
	margin-bottom: 10px;
	width: 130px;
	text-align: left;
	line-height: 15px;
}

#list li.title {
	color: #fff;
	padding-left: 12px;
	margin-top: 30px;
}

.carousel-caption p {
	font-size: 13px;
	color: #9d9d9d;
}

.carousel-caption p span {
	font-weight: bold;
	color: #00a6ff;
}

.carousel-feature .carousel-caption {
	margin-top: -416px;
	margin-left:-262px;
	width: 750px;
}

.carousel-feature .carousel-caption p {
	width: 670px;
	margin-left: 15px;
	line-height: 20px;
	margin-top: -4px;
}