/*Reset css*/
*{ margin:0px; padding:0px }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6{color:#353535}
h1{font-size:20px; line-height:1.4em;}
h2{font-size:18px; line-height:1.4em; }
h3{font-size:16px; line-height:1.4em; }
h4{font-size:15px; line-height:1.4em; }
h5{font-size:14px; line-height:1.4em; }
h6{font-size:13px; line-height:1.4em; }
p{font-size:14px; line-height:1.4em; padding:3px 0px 6px 0px}
q:before, q:after { content:''}
strong { font-weight: bold }
em { font-style: italic }
a img { border:none }
.clear{clear:both}
.hide{display:none}
.orange{color:#c34a09}
.float-right{float:right}
.float-left{float:left}
.no-border{border:none!important}
.break{height:10px; width:auto}
.break-small{height:5px; width:auto}
a:hover, a:hover b.orange{text-decoration:underline; color:#e28500}

/*Layout*/
/* Header navigation*/
body{background:#FFFFFF url(../imgs/tile.gif) repeat-x; font-size:14px;  line-height:18px; font-family:Arial, Helvetica, sans-serif; text-align:center; color:#000}
.big-container{width:945px; margin:0px auto; text-align:left; position:relative; overflow:hidden}
#logo{height:98px}
#logo a{padding-left:44px}
#top-navigation{position:absolute; right:0px; top:68px}
#top-navigation li{display:inline; float:left; padding-right:30px}
#top-navigation li a{ font-size:16px; font-weight:bold; color:#589101; text-decoration:none}
#top-navigation li a:hover{color:#e28500}
#top-navigation li a.stay, #top-navigation li a.stay:hover{color:#000000!important; text-decoration:underline!important}

/*Header green*/
#header-green{width:939px; height:172px; background:url(../imgs/header-green.gif) repeat-x; border:3px solid #FFF; border-top:none; border-bottom:none}
#header-green-content{width:100%; background:url(../imgs/breeze.png) top right no-repeat; height:172px; position:relative}
#header-green-content li b{display:none}
li.green1{position:absolute; width:743px; height:27px; display:block; background:url(../imgs/green1.gif); top:23px; left:18px}
li.green2{position:absolute; width:743px; height:22px; display:block; background:url(../imgs/green2.gif); top:54px; left:40px}
li.green3{position:absolute; width:743px; height:25px; display:block; background:url(../imgs/green3.gif); top:85px; left:61px}
ul.green-buttons{position:absolute; left:80px; top:119px}
ul.green-buttons-register{position:absolute; left:60px; top:100px}
ul.green-buttons li, ul.green-buttons-register li{float: left; display:inline; padding:0px 10px}
a.green-signup{width:152px; height:42px; display:block; background:url(../imgs/green-signup2.gif);}
a.green-signup:hover{background:url(../imgs/green-signup2.gif) bottom left}
a.green-developer{ width:241px; height:42px; display:block; background:url(../imgs/green-developer2.gif); }
a.green-developer:hover{background:url(../imgs/green-developer2.gif) bottom left}
a.green-tour{ width:167px; height:42px; display:block; background:url(../imgs/green-tour2.gif);}
a.green-tour:hover{background:url(../imgs/green-tour2.gif) bottom left}
ul.header-buttons li a{text-decoration:none; color:#000000}

/*Container*/
#content{padding:10px 4px 0px 4px}
h1.welcome{background:url(../imgs/welcomeh1.gif); width:341px; height:30px;}
h1.recomended{background:url(../imgs/recomendedh1.gif) no-repeat; width:347px; height:36px}
#app-container{border:1px solid #f6d55c; border-bottom:none; overflow:auto; width:935px; height:210px; background:#fff5d1; position:relative}
#app-container2{border:1px solid #fff; border-bottom:none;  border-right:none;  width:2775px}
.v-spacer{float:left; padding:3px 10px 0px 23px}
#app-container a:hover{text-decoration:none!important}
.individual-app{float:left;}
.individual-app h2{color:#000; background:url(../imgs/app-box-line.gif) center left  repeat-x; padding-left:20px; width:865px; font-size:20px;}
.individual-app h2 b{ background:#fff5d1; padding:0px 10px}
.small-box-spacer{float:left; width:20px; height:10px}
.small-box-border{width:280px; height:130px; border:1px solid #fff; float:left}
.small-box{ width:278px; height:128px; border: 1px solid #f6d55c; background:#FFFFFF; position:relative; overflow:hidden; float:left}
.small-box .step{position:absolute; left:33px; bottom:5px; font-size:15px; font-weight:bold}
.float-right span{padding:7px 5px 5px 15px; display:block; background:url(../imgs/arrow-orange.gif) 0px 11px no-repeat}

/*Register page*/

.register-table{margin-left:20px; line-height:15px}
.register-table{width:420px}
.register-table td{padding:3px 3px;}
.register-table .td30{width:130px; vertical-align:middle;  font-weight:bold }
.input-text, .table-select{border:1px solid #CCCCCC; width:100%; height:20px;}
.table-textarea{border:1px solid #CCC; width:100%; height:90px}
.table-radio{padding:0px 0px 0px 15px; height:16px; vertical-align:top}
.button-row{height:40px;  vertical-align:bottom}
.button-span{padding:5px 10px 0px 0px; text-transform:uppercase; float:left; display:inline}
.button{padding:4px 5px; background:#84c225; border:1px solid #6aa313; line-height:20px; text-transform:uppercase; color:#000; font-weight:bold; font-size:12px; -moz-border-radius: 5px; display:inline; display:inline; cursor:pointer}
.button-second{padding:4px 5px; background:#ddd; border:1px solid #bbb; line-height:20px; text-transform:uppercase; color:#000; font-weight:bold; font-size:12px; -moz-border-radius: 5px; display:inline; display:inline; cursor:pointer}
.button:hover{background:#f99f1b; border:1px solid #dd880a; color:#FFFFFF;  text-decoration:none!important}
.button-second:hover{background:#777; border:1px solid #555; color:#FFFFFF;  text-decoration:none!important}
#register-message{width:99%}
#register-error{width:99%; background:#fff5d1; border:1px solid #ffe481; padding:5px 10px; color:#f50303; font-size:12px; font-weight:bold; -moz-border-radius: 5px;}
#register-success{width:99%; background:#daffa1; border:1px solid #b8e96d; padding:5px 10px; color:#416806; font-size:12px; font-weight:bold; -moz-border-radius: 5px;}

/*Sample page*/
.sample-table{width:100%;}
.sample-table table{width:100%}
.sample-table table td{padding:2px 3px; border-left:1px solid #FFF}
.sample-table table td a:hover{text-decoration:none} 
.light_grey{background:#eee}
.sample-table table th{background:#f99f1b; font-size:13px; line-height:23px; font-weight:bold; color:#FFF; border-left:#ffbf61 1px solid; border-bottom:#dd880a 1px solid; padding:2px 3px; }
.image-border-left img{margin:0px 10px 5px 0px; padding:3px; background:#FFF; border:1px solid #ccc; float:left}
.image-border-right img{margin:0px 0px 5px 10px; padding:3px; background:#FFF; border:1px solid #ccc; float:right}

/*Application page*/
.app-h1{background:url(../imgs/r-app-h1.gif) no-repeat; width:219px; height:38px; padding-bottom:5px}
.app-box{width:937px; background:#fffcf2; border:1px solid #fff2c8}
.app-box h2{padding:3px 0px 3px 20px}
.app-box{border:1px solid #f6d55c; width:935px; background:#fff5d1; position:relative}
.app-box2{border:1px solid #fff; border-right:none; width:933px}
.app-box a:hover{text-decoration:none!important}
.app-box p{padding:5px 24px 2px; font-size:12px; line-height:18px;  color:#000000}
.app-button{padding:5px 26px 10px;}
.button-app{padding:2px 6px; background:#f6d55c; border:1px solid #e6bf32; line-height:20px; text-transform:uppercase; color:#000; font-weight:bold; font-size:12px; -moz-border-radius: 5px; display:inline; display:inline; cursor:pointer}
.button-app:hover{background:#222; border:1px solid #000; color:#FFFFFF;  text-decoration:none!important}

/*Footer*/
#footer{background:url(../imgs/footer-tile.gif) repeat-x; height:40px; font-size:12px!important; line-height:14px}
.copyright{ padding:9px 0px 0px 5px; float:left}
.bottom-nav{float:right;padding:9px 0px 0px 5px}
.bottom-nav li{float:left; display:inline; padding:0px 10px; border-left:1px solid #bebebe}
.stepcarousel{
	position: relative;
	overflow: scroll; /*leave this value alone*/
	width: 935px; /*Width of Carousel Viewer itself*/
	height: 165px; /*Height should enough to fit largest content's height*/
	background-color: #FFF5D1;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #F5D55C;
	border-bottom-color: #F5D55C;
	border-left-color: #F5D55C;
	z-index: 1;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFF5D1;
}

.stepcarousel .belt{
	position: absolute; /*leave this value alone*/
	left: 0;
	top: 0;
	float: left;
}

.stepcarousel .panel{
	float: left; /*margin around each panel*/
	width: 281px;
	height: 132px;
	border: 1px solid #FFFFFF;
	margin-top: 15px;
	margin-right: 23px;
	margin-bottom: 15px;
	margin-left: 23px;
}
.panel .step {
	position: absolute;
	top: 95px;
	left: 40px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	height: 23px;
}

.header {
	top: 0px;
	position: absolute;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	width: 875px;
	height: 22px;
	background-image: url(../imgs/backheader.gif);
}
.header  b {
	background-color: #FFF5D1;
	padding-right: 10px;
	padding-left: 10px;
	margin-left: 22px;
}
.panel img {
	border: 1px solid #F6D55C;
}

 #statushide4 {
	position: absolute;
	background-color: #FFF5D1;
	height: 16px;
	margin-top: 30px;
	z-index: 999;
	margin-left: 194px;
	width: 190px;
	border: 1px solid #333333;
 }
 #statushide7 {
	position: absolute;
	background-color: #FFF5D1;
	height: 8px;
	margin-top: 32px;
	z-index: 999;
	margin-left: 388px;
	width: 189px;
}

/* custom */
div.header-text {
    color: white;
    float: left;
    width: 700px;
    font-size: 20px;
    margin: 20px 20px 20px 20px;
}
.content-img{float:right}
.content-img img{margin:5px}
ul.header-text{font-size:20px; line-height:30px; color:#FFFFFF; padding:15px 0px 10px 30px;}
ul.header-text li{background:url(../imgs/arrow-ongreen.gif) 0px 7px no-repeat; padding-left:20px}
#content ul li{background:url(../imgs/arrow-orange.gif) 10px 6px no-repeat; padding:2px 0px 2px 25px}
a.big-green-button{background:url(../imgs/btn-right.gif) top right no-repeat; height:42px; padding-right:14px; display:inline-block; float:left; cursor:pointer }
a.big-green-button span.btn-left{background:url(../imgs/btn-left.gif) top right no-repeat; height:42px;  padding-left:14px; display:inline-block; float:left; cursor:pointer}
a.big-green-button span.btn-back{background:url(../imgs/btn-back.gif) repeat-x; height:42px; font-size:20px; font-weight:bold; display:inline-block; float:left; line-height:40px; color:#000000; cursor:pointer}
a.big-green-button:hover{background:url(../imgs/btn-right-o.gif) top right no-repeat; text-decoration:none!important; border-bottom:none!important}
a.big-green-button:hover span.btn-left{background:url(../imgs/btn-left-o.gif) top right no-repeat; }
a.big-green-button:hover span.btn-back{background:url(../imgs/btn-back-o.gif) repeat-x;  color:#000000; }
ul.header-buttons{margin-left:10px; margin-top:5px}
ul.header-buttons li{float:left; padding-left:25px}


.iphone-float {
    width: 120px;
    margin: 6px 6px 6px 6px;
    padding: 5px 5px 5px 5px;
    float: left;
}

.iphone-icon {
/*    width: 57px;
    height: 57px;*/
    /* width: 140px; */
    height: 120px;
	margin: 10px 10px 10px 10px;
    float: left;
}

/*Content*/
.content-box{padding:20px 20px 10px; display:block; width:100%;}
.content-left{float:left; width:550px}
.right-column{float:right; width:320px; background:url(../imgs/right-column-divider.gif) 0px 5px no-repeat; padding-left:15px; padding-right:35px}