/* ===============================================================

	general resets 

=============================================================== */
.clear {clear: both;}

body {
	margin:0;
	font:14px/16px Arial, Helvetica, Verdana, Geneva, sans-serif;
	color:#000;
	min-width:1000px;
	background:url(../images/bg-body.gif) repeat-x;
}

img {border-style:none;}

a {text-decoration: none; color: #fff;}

a:hover {text-decoration: underline;}

input,
textarea,
select {
	font:12px arial,sans-serif;
	vertical-align: middle;
}

form,
fieldset {
	margin: 0;
	padding: 0;
	border-style: none;
}

.feeder-space {
	text-indent: -9999px;
	height: 15px;
}

/* ===============================================================

	wrapper 
	
===============================================================	*/
#wrapper{
	width:891px;
	margin:0 auto;
	overflow:hidden;
	background:url(../images/bg-header.gif) no-repeat 50% 0;
	position:relative;
	padding:336px 0 0;
}

/* ===============================================================
	
	logo 
	
=============================================================== */
.logo{
	margin:0;
	width:420px; /* 350 -> 420 px */
	height:83px;
	position:absolute;
	top:20px;
	left:0;
	text-indent: -9999px;
	z-index:10;
}

.logo a{
	display: block;
	height:100%;
	overflow: hidden;
	background:url(../images/bg-logo.png) no-repeat;
	position:relative;
	cursor:pointer;
}

/* ===============================================================

	header 
	
=============================================================== */
#header{
	position:absolute;
	top:0;
	left:0;
	height:333px;
	width:746px;
	padding:3px 0 0 145px;
}

#header .lang{
	margin:0;
	padding:0;
	list-style:none;
	overflow:hidden;
	float:right;
	position:relative;
	z-index:99;
}

#header .lang li{
	float:left;
	padding:0 7px 0 5px;
	background:url(../images/sep-lang.gif) no-repeat 100% 2px;
	margin:0 -7px 0 7px;
	display:inline;
}

#header .lang li a{
	color:#333;
	padding:0 25px 0 0;
	float:left;
}

#header .lang li a:hover{text-decoration:none;}
#header .lang li .usa{background:url(../images/ico-lang-usa.gif) no-repeat 100% 0;}
#header .lang li .japan{background:url(../images/ico-lang-japan.gif) no-repeat 100% 0;}
#header .lang li .facebook{background:url(../images/ico-lang-facebook.gif) no-repeat 100% 0;}
#header .lang li .twitter{background:url(../images/ico-lang-twitter.gif) no-repeat 100% 0;}

#header .holder{
	overflow:hidden;
	width:565px;
 	margin:141px 0 0;
}
* html #header .holder { margin-top: 144px; }
* +html #header .holder { margin-top: 144px; }

#header .holder .ad{
	height: 1%;
	overflow: hidden;
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
	color:#aaa;
	font-size:16px;
}

#header .holder .ad li strong{
	margin:0 0 6px -9px;
	display:block;
}

#header .holder .ad li{
	float:left;
	margin:0 42px 0 0;
}

#header .holder .ad ul{
	margin:0;
	padding:0;
	list-style:none;
}

#header .holder .ad ul li{
	float:left;
	margin:0 9px 0 0;
	display:inline;
}

#header .holder .ad ul li img{display:block;}

/* ===============================================================

	iphone-box 
	
===============================================================	*/
.iphone-box{
	height:166px;
	width:111px;
	position:absolute;
	right:0;
	top:35px;
	background:url(../images/bg-iphone.gif) no-repeat;
	padding:41px 22px 71px 24px;
}

.iphone-box .visual{
	overflow:hidden;
	height:100%;
	width:100%;
	position:relative;
}

.iphone-box .visual img.active{z-index:2;}

.iphone-box .visual img{
	position:absolute;
	top:0;
	lefT:0;
	width:100%;
	height:100%;
	display:none;
}

/* ===============================================================

	nav 
	
=============================================================== */
#nav{
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	bottom:0;
	left:3px;
	width:740px;
	height:65px;
}

#nav li{float:left;}

#nav li a{
	float:left;
	position:relative;
	cursor:pointer;
}

#nav li a strong{float:left;}

#nav li a span{
	float:left;
	padding:17px 25px 6px 25px;
}

#nav li a em{
	display:block;
	width:50px;
	height:22px;
	text-indent:-9999px;
}

/* ===============================================================

	navigation buttons 
	
=============================================================== */

/* Navigation menu texts for nomral state */
#nav li .home em{
	background:url(../images/nav/txt-home.png) no-repeat;
	width:58px; 
}
#nav li .screenshot em{
	background:url(../images/nav/txt-screenshot.png) no-repeat;
	width:107px; /* 107px */
}
#nav li .tutorial em{
	background:url(../images/nav/txt-tutorial.png) no-repeat;
	width:74px;
}
#nav li .support em{
	background:url(../images/nav/txt-support.png) no-repeat;
	width:79px;
}
#nav li .blog em{
	background:url(../images/nav/txt-blog.png) no-repeat;
	width:50px;
}
#nav li .buy em{
	background:url(../images/nav/txt-buy.png) no-repeat;
	width:45px;
}
#nav li .iphone em{
	background:url(../images/nav/txt-iphone.png) no-repeat;
	width:71px;
}
#nav li .android em{
	background:url(../images/nav/txt-android.png) no-repeat;
	width:80px;
}


#nav li a:hover{
	background:url(../images/nav/bg-nav-hover.gif) no-repeat 0 100%;
}
#nav .active a,
#nav .active a:hover{
	background:url(../images/nav/bg-nav-hover.gif) no-repeat 50% 100%;
}
#nav li a:hover strong,
#nav .active a strong{
	background:url(../images/nav/bg-nav-hover-l.gif) no-repeat;
}
#nav li a:hover span{
	background:url(../images/nav/bg-nav-hover-r.gif) no-repeat 100% 0;
	padding:17px 25px 26px 25px;
}
#nav .active a span,
#nav .active a:hover span{
	background:url(../images/bg-nav-hover-r.gif) no-repeat 100% 0;
	padding:17px 25px 26px 29px;
}

/* Navigation menu texts for .hover & .active */
#nav li .home:hover em,
#nav .active .home em{background:url(../images/nav/txt-home-hover.png) no-repeat}

#nav li .screenshot:hover em,
#nav .active .screenshot em{background:url(../images/nav/txt-screenshot-hover.png) no-repeat;}

#nav li .tutorial:hover em,
#nav .active .tutorial em{background:url(../images/nav/txt-tutorial-hover.png) no-repeat;}

#nav li .support:hover em,
#nav .active .support em{background:url(../images/nav/txt-support-hover.png) no-repeat}

#nav li .blog:hover em,
#nav .active .blog em{background:url(../images/nav/txt-blog-hover.png) no-repeat}

#nav li .buy:hover em,
#nav .active .buy em{background:url(../images/nav/txt-buy-hover.png) no-repeat}

#nav li .iphone:hover em,
#nav .active .iphone em{background:url(../images/nav/txt-iphone-hover.png) no-repeat}

#nav li .android:hover em,
#nav .active .android em{background:url(../images/nav/txt-android-hover.png) no-repeat}

/* ===============================================================

	content 
	
=============================================================== */
#content{
	overflow:hidden;
	padding:4px 0 0 10px; /* 28 0 0 10 */
}

#content h2{
	margin:0 0 20px;
	font-size:24px;
	line-height:24px;
}

#content .heading{
	overflow:hidden;
	width:100%;
	position:relative;
	padding:0 0 4px;
}

#content .heading .shadow{
	position:absolute;
	width:100%;
	top:2px;
	left:0;
	background:url(../images/bg-shadow.png) repeat-x;
}

/* ===============================================================

	gallery box 
	
=============================================================== */
.gallery-box{
	overflow:hidden;
	width:100%;
}

.gallery-box .visual{
	float:left;
	width:201px;
	height:302px;
	background:url(../images/bg-visual.gif) no-repeat;
	padding:3px 3px 5px;
	margin:50px 55px 0 18px;
	display:inline;
}

* html .gallery-box .visual{margin:50px 52px 0 18px;}

.gallery-box .visual img{display:block;}

.gallery-box .gallery-holder{
	overflow:hidden;
	height:1%;
	padding:0 21px 0 0;
}

.gallery-holder .box{
	overflow:hidden;
	height:1%;
	margin:0 0 13px;
}

.gallery-holder .box h3{
	margin:0 0 12px;
	font-size:18px;
	line-height:20px;
	color:#2d5598;
}


/* ===============================================================

	flex box 
	
=============================================================== */
.half-box {
	width: 400px;
	float: left;
	margin: 0px auto;
}

.flex-box{
	overflow:hidden;
	height:1%;
	background:#f4f4f4;
}

.flex-box a { color: #7e3517;}

.flex-box .t {background:url(../images/bg-t-flext-box.gif) repeat-x;}

.flex-box .b {background:url(../images/bg-b-flext-box.gif) repeat-x 0 100%;}

.flex-box .tl {background:url(../images/bg-tl-flext-box.gif) no-repeat;}

.flex-box .tr {
	padding-top:7px;
	background:url(../images/bg-tr-flext-box.gif) no-repeat 100% 0;
}

.flex-box .bl {background:url(../images/bg-bl-flext-box.gif) no-repeat 0 100%;}

.flex-box .br {
	background:url(../images/bg-br-flext-box.gif) no-repeat 100% 100%;
	padding-bottom:7px;
}

.flex-box .l {background:url(../images/bg-l-flext-box.gif) repeat-y;}

.flex-box .r {
	background:url(../images/bg-r-flext-box.gif) repeat-y 100% 0;
	padding:0 7px;
}

.box-frame{
	overflow:hidden;
	height:1%;
	background:#f4f4f4;
	padding:7px 0 0;
}

.gallery-list{
	margin:0 0 0 -18px;
	padding:0;
	list-style:none;
	overflow:hidden;
	width:580px;
}

.gallery-list li{
	float:left;
	margin:0 0 0 31px;
	display:inline;
	padding:0 0 10px;
}

.gallery-list li a{float:left}

.gallery-list li a img{display:block;}

.text-box{
	padding:0 60px 47px 0;
	height:1%;
}

.flex-box .faq h3 {
	border-bottom: 1px dashed #999999;
	width: 100%;
	margin-top: 30px;
	background: #e0e0e0;
	padding: 4px 10px 2px 10px;
}

.flex-box .horizontal-line {
	color: #aaaaaa;
	background-color: #aaaaaa;
	height: 1px;
	margin: 10px auto;
	border: none;
	width: 90%;
	clear: both; 
}

/* =============================================================== 

	text box 
	
===============================================================	*/
.info {
	width: 655px;
	float: left;
}

.text-box p{
	margin:0 0 0px; /* top = 0, left/right = 0, bottom = 10 */
}

.text-box:after{
	clear:both;
	display:block;
	content:"";
}

.text-box .video-link{
	float:right;
	margin:-47px 0 0 0;
	position:relative;
}

.text-box h3{
	margin:0 0 10px;
	color:#2D5598;
	font-size:14px;
	line-height:16px;
}

.text-box .video-link img { display: block; }

.youtube {
	float: right;
	margin: 15px 50px 13px 20px;
	min-height: 260px;
}

/* a class for how-to-download-app YouTube video */
.app-download-youtube {
	float: right;
	margin: 5px 0px 5px 20px;
}

.box-holder{
	overflow:hidden;
	background:#f4f4f4;
	padding:9px 0 0;
}

.box-holder h3{
	color:#2d5598;
	/* font-size:14px; */
	/* line-height:16px; */
	/* margin:0 0 15px; */
	font-size: 18px;
	line-height: 18px;
	margin: 15px 0 5px 0;
}

.box-holder p{
	/* margin:0 0 10px; */ 
	margin: 20px 20px 5px 5px;
}

.features-heading{
	overflow:hidden;
	height:1%;
	padding:0 0 0 7px;
}

.features-holder{
	overflow:hidden;
	height:1%;
	margin:0 0 0 -10px;
}

.features-holder .item{
	float:left;
	width:380px;
	min-height:100px;
	padding:0 0 20px 45px;
	display:inline;
}

/* image buttons in the iPhone details page */
.buy-btn {
	margin: 10px auto 0px;
	display: block;
	border: 1px solid #7e3517;
}

.image-center {
	margin: 10px auto 0px;
	display: block;
	border: none;
}

.testimonials {
	font-size: 12px;
	/* height: 200px; */
}

.features-holder .item2 {
	float:left;
	width:760px;
	/* min-height:100px; */
	min-height: 20px;
	padding:0 0 10px 45px; /* 0 0 50 45 */
	/*display:inline; */
	display: block;
	/* border: solid 1px #000000; */
}
* html .features-holder .item{height:100px;}
* html .features-holder .item2{height:20px;}

.features-holder .item .img-holder{
	float:left;
	width:60px;
}

.features-holder .item .img-holder-wide{
	float:left;
	width:105px;
}

.features-holder .item2 .img-holder-android{
	float:right;
	width:250px;
	margin-left: 30px;
}

.features-holder .item2 .img-holder-iphone{
	float:right;
	width:400px;
	margin-left: 5px;
}

/* Horizontal lines for install instructions */
.horizontal_border {
	border-bottom: solid 1px #aaaaaa;
	margin-bottom: 15px;
}

.features-holder .item2 .img-holder-iphone img {float: right;}

.features-holder .item .img-holder img{display:block;}

.features-holder .item .holder{overflow:hidden;}
* html .features-holder .item .holder{
	overflow:visible;
	height:1%;
}

/* ===============================================================

	button 
	
=============================================================== */
.button-holder{
	overflow:hidden;
	width:100%;
	padding:0 0 26px;
	position:relative;
	text-align: center; /* 1-30-10 */
}

.button-holder a{	
	display:block;
	display: -moz-inline-box;
	display: inline-block;
	/display: inline;
	/margin-right: 3px; 
	width:303px;
	height:31px;
/*	margin:0 auto; */
	padding:9px 0 0;
	font-size:18px;
	line-height:20px;
	letter-spacing:1px;
	color:#fff;
/*	background:url(../images/btn-see-screen.gif) no-repeat; */
	text-align:center;
	/zoom: 1;
}

.button-holder a.seescreenshot {
	background:url(../images/btn-see-screen.gif) no-repeat;
	/* margin-right: 50px; */
	display: block;
	margin: 0 auto;	
}

.button-holder a.buyapp {
	background:url(../images/btn-buy-app.gif) no-repeat;
	/* margin-left: 50px; */
	display: block;
	margin: 0 auto;	
}

.button-holder a:hover{
	text-decoration:none;
}

/* ===============================================================

	Buy & More buttons 
	
===============================================================*/
.button-holder-dev{
	overflow:hidden;
	/*width:100%; */
	padding:0 0 0px;
	position:relative;
}

.button-holder-dev a{	
	display:block;
	display: -moz-inline-box;
	display: inline-block;
	/display: inline;
	/margin-right: 3px; 
	width:180px;
	height:30px;
	margin:10px auto 0px 20px; 
	padding:7px 0 0;
	font-size:12px;
	line-height:14px;
	letter-spacing:1px;
	color:#fff;
/*	background:url(../images/btn-see-screen.gif) no-repeat; */
	text-align:center;
	/zoom: 1;
}

.button-holder-dev a.learn-more {
	background:url(../images/btn-learn-more.png) no-repeat;
}

.button-holder-dev a.buy-now {
	background:url(../images/btn-buy-now.png) no-repeat;
}

.button-holder-dev a:hover{
	text-decoration:none;
}


/* ===============================================================

	footer
	
===============================================================	*/
#footer{
	overflow:hidden;
	height:1%;
	font-size:10px;
	line-height:12px;
	color:#999;
	padding:43px 0 20px 10px;
}

#footer a{color:#999;}

.footer-top{
	margin:0;
	padding:0;
	list-style:none;
	text-align:right;
	width:100%;
	padding:0 0 3px;
}

.footer-top li{
	display:inline;
	background:url(../images/sep-footer-list.gif) no-repeat 0 2px;
	padding:0 3px 0 6px;
}

.footer-top li:first-child{
	background:none;
	padding:0 3px 0 0;
}

.footer-top li a{color:#999;}

#footer .holder{
	overflow:hidden;
	height:1%;
	border-top:1px solid #999;
	padding:5px 0 0;
}

#footer .holder p{margin:0 0 10px;}

#footer .holder ul{
	display:inline;
	margin:0;
	padding:0;
	list-style:none;
}

#footer .holder ul li{
	display:inline;
	background:url(../images/sep-footer-list.gif) no-repeat 0 2px;
	padding:0 3px 0 6px;
}

#footer .holder ul li:first-child{
	background:none;
	padding:0 3px 0 0;
}

#footer .holder ul li a{color:#999;}

/* ===============================================================

	Lightbox (not used anymore)
	
=============================================================== */
.lightbox{
	position:absolute;
	display:none;
	background:#000;
	width:640px;
	height:505px;
}
.lightbox a.close{
	position:absolute;
	bottom: -27px;
	right: 0;
	background:url(../images/close.png) no-repeat;
	width:32px;
	height:32px;
	text-indent:-9999px;
	outline:none;
}
.lightbox .standart{
	width:100%;
	height:100%;
}

p.video-instruction {
 color: #666; /* #666 might work better */
 font-size: 14px;
 margin: 10px 0;
}