@charset "utf-8";
/* CSS Document */
body{
	padding:20px;
	background:#808080;
    font:12px "Arial",Verdana,Arial,sans-serif; 
	text-align:left; 
	color:#666;
	line-height:18px;
	}
p{margin:5px 0}
a{color:#ff7a1a;text-decoration:underline}
a:hover{text-decoration:none}

img{ border:0}
input , textarea{color:#666; font:11px "Arial",Verdana,Arial,sans-serif;}
h1{
	font-size:20px; 
	font-weight:lighter;
	color:#FFF; 
	color:#666; 
	margin:0; padding:0;
	 line-height:normal; 
	text-align:left
	}
h2{font-size:18px;color: #666}
h3{font-size:14px;color: #666}
p{ text-align: left; padding-bottom:0.4em}
a{outline:none;}
.main{ width:948px;margin:0 auto; clear:both; }
.box1{
	background:#f2f2f2; 
	display:block; width:947px;
	float:left; 
	position:relative; 
	margin:0 auto 10px auto;}

.topbarbox1{ display:none;
	float:right; 
	width:758px; height:120px;
	background:url(images/phones.png) no-repeat; 
	}
.topbarbox1 h1{ margin:35px 0 0 0; padding:0; font-size:30px; }
.topbarbox1 h1 span{ display: block; font-size:13px;}
.d3{ 
	background:url(images/phones.gif) no-repeat ; 
	position: absolute; 
	top:0px;
	right:0; border:1px solid #000;
	width:467px;
	height:146px; 
	display:block;
	padding-left:148px;
	display:none;}	
.d3 ul{ list-style:none; display:inline; margin:0; padding:0;}
.d3 ul li{ float:left;width:155px;padding-right:25px;}
.d3 ul li h2{ margin-top:15px; font-weight:normal}
.d3 ul li p{ margin-top:20px;}
.small , .medium , .large{ 
	height:125px;
	padding-top:10px; 
	float:right; 
	display:block;
	width:345px;
	}
.small h2 , .medium h2 , .large h2{ font-size:20px;}
.small{ background:url(images/topbar_imgs.png) no-repeat 0 -136px;}
.medium{ background:url(images/topbar_imgs.png) no-repeat 0 -272px;}
.large{ background:url(images/topbar_imgs.png) no-repeat 0 -408px; }



div.box2{
	background:#f2f2f2;
	width:370px;
	float:left; 
	position:relative;
	}

div.box2 h4{ 
	font-size:100%;
	color:#fff; 
	letter-spacing:6px; 
	margin:0 auto; 
	clear:both; 
	background:url(images/gray_curve_left.png) no-repeat 0 0;
	height:24px; 
	text-transform:uppercase; 
	text-align:center;
	position:absolute; 
	top:0; 
	left:0;
	padding:0 0 0 10px; 
	display:block;width:95%
 }
div.box2 h4 span{ 
	float:left;
	background:url(images/gray_curve_right.png) no-repeat 100% 0; 
	height:21px; 
	padding:3px 0 0 0;
	width:360px;  
	}

/*box5*/
div.box5{
	background:#f2f2f2;
	width:945px; clear:both;
	position:relative; 
	}
	/* added by nag for thanks page */
	div.box6{
	background:#f2f2f2;
	width:945px; clear:both;
	position:relative; 
	height:400px;

	}

div.box5 h4{ 
	font-size:100%;
	color:#fff; 
	letter-spacing:6px; 
	margin:0 auto; 
	clear:both; 
	background:url(images/graystrip.gif) repeat-x;
	height:24px; 
	text-transform:uppercase; 
	text-align:center;
	position:absolute;
	top:0; 
	left:0;
	padding:0; line-height:20px;
	display:block; width:100%;
 }
.box5 h1{ color:#fc9042; margin:0 0 10px 0}
.box5 h1 span{ font-size:12px; color:#666; display:block;}
.gray_strip_lc{ background:url(images/graystrip_curvs.gif) no-repeat 0 0; width:6px; height:24px; position:absolute; top:0; left:0;display:block; z-index:777;}
.gray_strip_rc{ background:url(images/graystrip_curvs.gif) no-repeat 0 -24px;  top:0; right:0; position:absolute; width:6px; height:24px; z-index:777}
/*box5*/



.clear{ clear:both;height:1px;overflow:hidden}

div.box3{
	background:#f2f2f2;
	float:right; 
	position:relative; 
	width:563px;
	}
div.box4{
	background:#f2f2f2;
	float:left; clear:both; 
	width:948px; 
	clear:both; margin:10px 0 0 0 ;
	
	}
div.box4 .ul_menu { 
	list-style:none; 
	margin:5px 0 0 20px; 
	padding:0;
	width:133px; 
	float:left;
	font-size:18px;
	}
div.box4 .ul_menu .normal{}
div.box4 .ul_menu .normal a{ 
	display:block;
	text-decoration:none; 
	font-size:18px; 
	text-transform:lowercase; 
	margin:0; 
	text-align:right; 
	color:#666; height:30px;
	padding-right:25px;
	background:url(images/arrow.gif) no-repeat 100% -21%;
	}
/*div.box4 .ul_menu li a:hover{ background:url(images/arrow.gif) no-repeat 100% 0}*/
div.box4 .ul_menu .active{}
div.box4 .ul_menu .active a{
	display:block;
	background:url(images/arrow.gif) no-repeat 100% -26px;
	text-decoration:none; 
	font-size:18px; 
	text-transform:lowercase; 
	margin:0; 
	text-align:right; 
	color:#666; height:30px;
	padding-right:25px;}
.submit{
	background:url(images/submit.png) no-repeat; 
	width:153px; 
	height:33px; 
	border:0; margin:30px 0 0 60px; 
	top:0; 
	right:5PX; cursor:pointer;
	}
	.start{
	/*
	background:url(images/start.gif) no-repeat; 
	width:156px; 
	height:37px; 
	border:0; 
	position:absolute; 
	top:0; 
	right:5PX; cursor:pointer;
	*/
		background:url(images/start.png) no-repeat; 
        width:162px; 
        height:44px; 
        border:0; 
        position:absolute; 
        top:-5px; 
        right:5PX; cursor:pointer;
	}
.vertical{
	width:175px;
	margin-top:10px; 
	height:309px; 
	padding:30px 0 0 200px; 
	position:relative;
	background:url(images/iphone.jpg) no-repeat left center; 
	float:left;
	}
.appstore_clip{ position:absolute; right:10px; bottom:20px}
.appstore_clip2{position:absolute; right:10px; bottom:20px}

.vertical .screen_vertical{ position:absolute; left:24px; top:56px}
.vertical p{ margin:7px 0 0 0}
.horizantal h1 sup,.vertical h1 sup{ font-size:10px;}
.horizantal{
	width:352px; 
	padding:190px 0 0 0;
	margin:0px 0 0 5px; 
	background:url(images/iphone_horizatal.jpg) no-repeat  top center; 
	float:left
	}

.screen_horizantal{ position:absolute; left:240px; top:23px}
.vertical h3 ,.horizantal h3{ margin:0; padding:0; }
.horizantal h3{ text-align:left}
.vertical h3 { text-align:right}
.test_monials{color:#333;font-weight:bold; margin:0; padding:0}

div.scrollable { 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
	    /* vertical scrollers have typically larger height than width */ 
    height: 300px; 
    width: 140px;
	padding-left:25px;
	float:left;
	
} 
 
/* root element for scrollable items */ 
div.scrollable div.items { 
    position:absolute; 
    /* this time we have very large space for the height */ 
    width:140px;
	
}
div.scrollable a.app_icon { 
	width:60px; 
	height:60px; 
	margin:0px 10px 20px 0; 
	float:left; 
	display:block; text-decoration:none;
	}
.nav_arrow1 , .nav_arrow2 {
	height:19px; 
	width:19px; 
	display:block; 
	margin:0 auto 0 80px;
	text-decoration:none; 
}
.nav_arrow1{background:url(images/nav_arrows.gif) no-repeat; margin-bottom:5px;}
.nav_arrow2{background:url(images/nav_arrows.gif) no-repeat 0 -20px; clear:left;}

.cnt3div{width:520px; padding:0 0 0 35px; float:left}
.cnt3div p{ margin:10px 5px} 
.inputNrml{}
.inputNoData{color:#AAA;}
.footer{ clear:both; color:#ccc;text-align:right; background:url(images/purpletalk_logo.gif) no-repeat 98% 50%; height:22px; padding:5px 110px 0 0; }
.arrows_top{ width:50px; float:left; position:relative; top:-5px; margin:0px 25px 0 15px ;}

.arrows_top a , .arrows_top  .arrows_top_active{
	height:23px; 
	width:25px; 
	padding:0 25px 0 0;
	font-size:18px;
	color:#666; 
	margin-bottom:8px; 
	display:block; 
	text-decoration:none; 
	text-align:right;
	}
.arrows_top a{background:url(images/arrow.gif) no-repeat 100% 4px; }
.arrows_top a:hover , .arrows_top .arrows_top_active{background:url(images/arrow.gif) no-repeat 100% -26px;}

.TopAni{ float:right; height:140px; width:508px;}
a.email{ background:url(images/arrow.gif) no-repeat 100% -24px; padding:0 25px 0 0; float:left;  margin:0; text-decoration:none; color:#666;}
a.email:hover{ color:#000;}
.error{ 
	position:absolute; 
	background:#ae1919; 
	padding:10px; 
	color:#fff; 
	width:85%; 
	z-index:101; 
	top:115px;
	opacity:0.9; 
	font-weight:bold;
	filter: alpha(opacity = 90);
	}

	.error2{ 
		position:absolute; 
		background:#ae1919; 
		padding:10px; 
		color:#fff; 
		width:45%; 
		height: 10px;
		z-index:101; 
		top:30px;
		left:27%;
		opacity:0.9; 
		font-weight:bold;
		filter: alpha(opacity = 90);
	}
	.success{ 
		position:absolute; 
		background:green; 
		padding:10px; 
		color:#fff; 
		width:45%; 
		height: 10px;
		z-index:101; 
		top:30px;
		left:27%;
		opacity:0.9; 
		font-weight:bold;
		filter: alpha(opacity = 90); text-align:center;
	}

	/* added by nag to disabling arrows for first and last elements */
	a.disabled {
		/* visibility:hidden !important;		 */
		filter:alpha(opacity=30);
        -moz-opacity:0.3;
        -khtml-opacity: 0.3;
        opacity: 0.3;
	}
/*
	.start{
        background:url(images/start.png) no-repeat; 
        width:162px; 
        height:44px; 
        border:0; 
        position:absolute; 
        top:-5px; 
        right:5PX; cursor:pointer;
}


.arrow_inactive{

        filter:alpha(opacity=30);
        -moz-opacity:0.3;
        -khtml-opacity: 0.3;
        opacity: 0.3;

}
*/


.lightbox{
	width:100%;
	display:none;
	background:#000;
	position:absolute; 
	overflow:hidden;
	top:0;
	left:0;
	z-index:30000;
	opacity:0.7;
	filter:alpha(opacity=70);

}
/*body{border: 1px solid #0F0;}*/

.lightbox-panel{
	display:none;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-200px;
	margin-top:-310px; 
	position:absolute;
	width:424px; 
	background:url(images/iphone_big.png) no-repeat 0 0;
	padding:120px 0 130px 51px;
	z-index:30001;
	color:#333; line-height:20px;
}

.lightbox-panel p a{color:#0782a5}
.lightbox-panel h2{color:#1a1a1a}


.light_box_close{ 
	position:absolute; 
	top:20px;
	right:70px; 
	height:39px; 
	width:39px; 
	text-decoration:none;	
}
.loader{ width:320px; height:480px; background:url(images/Loader.gif) no-repeat 50% 50%;}

.light_box_close{background:url(images/close_2.png) no-repeat 0 0;}

.demo_reel{
	position:absolute; 
	right:10px; 
	bottom:75px; 
	display:block; 
	background:url(images/demoreel.png) no-repeat 0 0; 
	width:139px; 
	height:44px; 
	text-decoration:none; 
	outline:none
}