* {
  margin: 0px;
  padding: 0px;
  font-family: Arial, sans-serif !important;
}

body {
	width: 800px;
	behavior: url(/static/css/csshover3-source.htc); 
}

div.narrow {
  padding-left: 250px;
  padding-right: 220px;
}

div.centered {
  text-align: center;
}

div.right {
  padding-left: 250px;
}

div.header {
  font-weight: bold;
  padding-top: 5px;
}

td {
	padding-top: 5px;
	padding-right: 5px;
}

h1 {
  font-size: 1.3em;
  padding-top: 15px;
  padding-bottom: 10px;
}

p {
  padding-top: 10px;
  padding-bottom: 10px;
}

#logo {
  background: transparent url(/static/img/skin/logo_cropped.png) no-repeat scroll 0 0;
  width: 243px;
  height: 66px;
  border: 0px;
  display: block;
}

div#logo_small {
  background: transparent url(/static/img/skin/logo_small.png) no-repeat scroll 0 0;  
  width: 200px;
  height: 54px;
  position: absolute;
  z-index: 3;
  left: 18px;
  top: 8px;
  border: 0px;
}


/*From: http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/ */
html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }

#container {
  height: 100%;
}

#content {
  padding-bottom: 300px;
  position: relative;
  height: 100%;
  z-index: 1;
}

#landscape {
  height:300px;
  width: 100%;
  background:transparent url(/static/img/skin/footer_landscape.png) repeat-x;
  clear: both; 
  position: relative; 
  z-index: 3; 
  margin-top: -300px;
}

#tree1 {
  position: absolute;
  left: 190px;
  bottom: 210px;  
}

#tree2 {
  position: absolute;
  left: 70px;
  bottom: 80px;    
}

#tree3 {
  position: absolute;  
  right: 200px;
  bottom: 150px;      
}

#tree4 {
  position: absolute;  
  right: 60px;
  bottom: 100px;      
}

#tree5 {
  position: absolute;  
  left: 400px;
  bottom: 175px;      
}

#tree6 {
  position: absolute;  
  right: 340px;
  bottom: 80px;      
}


.checkmark {
  padding-left: 44px !important;
  padding-bottom: 25px;
  padding-top: 9px;
  background:transparent url(/static/img/checkmark.png) no-repeat scroll 0 0;
}

td.status {
  padding: 0px;
  margin: 0px;
}

label.error { 
  color: #FF211F;
  padding-left: 3px;
  padding-right: 3px;
  font-weight: bold;
  vertical-align: top; 
}

span.ui-icon {
  margin-left: 2px;
  margin-right: 2px;  
  float: left;
}

div.ui-state-error {
  padding-top: 5px; 
  padding-left: 15px;
  padding-right: 5px;
  padding-bottom: 5px;
}

div#invalidInvitation {
  display: none;
}

#thankyou {
  display: none;
}

.submitConfirmation {
  display: none;
  font-style: italic;
  font-weight: bold;
  color: #5EF400;
}



body {
  background-color: #0644C4;
	margin:0px 0px 0px 0px;
	height:100%;
	width:100%;
	padding:0px;
	font-size:14px;
	line-height:20px;
	color:#fff;
}

#headerLinksContainer {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
}

div#headerLinksSignedIn {
  display: none;
  text-align: right;
}

div#headerLinksAnonymous {
  text-align: right;
}

div#headerLinks a.selected {
  font-weight: bold;
  text-decoration: none;
  color: #FFFFFF;
}

.fullName {
  font-weight: bold;
}

textarea.feedback {
  width: 420px;
  height: 100px;
  margin-top: 10px;
  font-family: Helvetica;
}

a {
  color: #FFFFFF;
}

.jqmWindow a {
  color: #0644C4;
}

.header {
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}

.linkButton {
  cursor: pointer;
  text-decoration: underline;
}

input[type=password], input[type=text], textarea {
	border-top:#333 1px solid;
	border-left:#333 1px solid; 
	border-bottom:#70b5f0 1px solid;
	border-right:#70b5f0 1px solid;
	height:25px;
	font-family: Georgia, Times, serif !important;
	font-size:20px !important; 
	padding:5px;
  width:100%;
	/*width:285px;*/
	/*color:#F7931E;*/
}             

input[type=submit], input[type=button] {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 20px;
}

input[type=submit]:hover, input[type=button]:hover {
  cursor: pointer;
}

#gradientContainer {
  position: fixed;
  top: 90px;
  bottom: 0px;
	width: 100%;
	height: 100%;
	text-align: center;
}

#gradient_image {
  height: 100%;
  width: 750px;
}

/*#gradientContainer {
  position: absolute;
  top: 90px;
  bottom: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}*/

#gradient {
  background: transparent url(/static/img/gradient_background.png) no-repeat scroll 0 0;
	width:750px;      
	height:900px;
	margin: auto;
}

#sky {
  position: fixed;
  z-index: 0;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background:#0644C4 url(/static/img/skin/bg_tile.jpg) repeat-x;
}

#signup {
	height:45px;
	width:300px;
	border:0px;
	background: transparent url(/static/img/skin/btn_signup.png) no-repeat scroll 0 0;
}

#login {
	height:45px;
	width:300px;
	border:0px;
	background: transparent url(/static/img/skin/btn_login.png) no-repeat scroll 0 0;
}

#playnow:hover {
  background-position:0px -45px; 
}

#signup:hover {
	background-position:0px -45px;
}
   
#playnow {
	height:45px;
	width:300px;
	border:0px;
	background: transparent url(/static/img/skin/btn_playnow.png) no-repeat scroll 0 0;
}

#login:hover {
    background-position:0px -45px; 
}


/* Library
=====================================================================*/

.l { float: left; width: 59%; }
.r { float: right; width:40%; }
.r:after { display: block; content: ''; clear: both; height: 0; visibility: hidden; }
.center { margin:0px auto 0px auto; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.justify { text-align: justify; }
.float-left { float: left; }
.float-right { float: right; }
.clear-both { clear: both; float: none; }
.clear-right { clear: right; float: none; }
.hide {	display:none; }
.clear-both { clear: left; float: none; }
.inline { display: inline; }
.block { display: block; }
.noborder { border: 0px none; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.normal { font-weight: normal; }
.nomargin { margin: 0; }
.nopadding { padding: 0; }
.visible { display: block; }
.top10 { margin-top: 10px; }
.top20 { margin-top: 20px; }
.bottom20 { margin-bottom: 20px; }
.right10 { padding-right:10px; }
.right20 { padding-right:20px; }
.border5 { border: solid 10px #c7c7c7; }
.border10 { border: solid 10px #c7c7c7; }
.border20 { border: solid 20px #c7c7c7; }
.font14 { font-size:14px;}
.font16 { font-size:16px;}
.font18 { font-size:18px;}
.one-third { width:33%;}

.group:after {
	content: ".";
	display: block;
	height: 0;
	clear:both;
	visibility: hidden;
}

.bgwhite50 {
	background:transparent url(/static/img/skin/bg_50_white.png) repeat;
}

a.pageLink {
/*  color:#3595e5;
  background-color: #fff;
  padding:3px;
  text-decoration:none;
*/
  font-weight:bold;
}

a.imageLink {
  border:0px;
  padding:0px;
  background: none;
  color: transparent;
}

a.button {
  padding: 0px;
  background: none;
}
 
a.pageLink:hover {
/*  color:#fff;
  background-color:#76d6ff;*/
}

td.label {
	text-align:left !important;
	width: 120px;
	font-size:1.2em;
}   

.container {                  
	margin:0px auto 0px auto;
	width:700px;      
	padding-top:30px;
}

#signin_container {
  width: 500px;
}

#reset_container {
  width: 500px;
}

#containertop {
	background:transparent url(/static/img/skin/rounded_top.png) no-repeat;	
}

#containercontent {
  padding: 60px;
  z-index: 10px;
}

h1 {
	font-weight:bold;
	font-size:4.5em;
	line-height:1em;
	letter-spacing:-4px;
	color:#ffa800;
}

h1.smaller {
	font-weight:bold;
	font-size:2.5em;
   
	letter-spacing:-2px;
	color:#ffa800;
}

h2 {
	font-weight:bold;
	text-transform:uppercase;
	font-size:1.2em;
	padding-top: 10px;
	padding-bottom: 10px;
}

#signupForm {
  padding-top: 10px;
}

#loginForm {
  padding-top: 10px;  
}

.r {
	float:right;
}

#airplane {
  background:transparent url(/static/img/skin/airplane.png) no-repeat;	
	width:1110px;  
	height:200px;
  position:absolute;
  top: 20px;
  left: -400px;
  z-index:-10px; 
} 

#cloud {
  background:transparent url(/static/img/skin/cloud1.png) no-repeat;	
	width:133px;  
	height:117px;
  position:fixed;
  top:150px;
  left:20px;
}   

#cloud2 {
	background:transparent url(/static/img/skin/cloud2.png) no-repeat;	
	width:159px;  
	height:106px;
	position:fixed;
	top:300px;
	right: 10px;
} 

.status .error {
  color:#FF211F;
  margin-left: 1px;
	font-weight:bold;
}

#copyright {
	color:#FFFFFF;
	font-size:.9em;
	width: 100%;
	text-align: center;
	position: absolute;
	z-index: 2;
	bottom: 5px;
} 

#copyright a {
	color:#83ffaf;
}
#copyright a:hover {
	color:#72fe00;
}

.instructions {
  font-size: 1.2em;
  padding-top: 10px;
  padding-bottom: 10px;
} 

.jqmWindow .instructions {
  font-weight: bold;
}


.traceback {
  background-color: black;
  margin-top: 50px;
  padding: 20px;
}

.traceback pre {
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* jqModal base Styling courtesy of;
	Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
	the Window's z-index value will be set to 3000 by default (via jqModal.js). */
.jqmWindow {
    display: none;
    position: absolute;
    top: 10%;
    left: 50%;
    
    margin-left: -220px;
    width: 440px;
    
    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 20px;
}




.jqmOverlay { background-color: #000; }

/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
	width: expression(this.parentNode.offsetWidth);
	height: expression(this.parentNode.offsetHeight);
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100));
}


.check {
  margin: auto;
  background:url(/static/img/app/checkmark.png) no-repeat;
  width: 24px;
  height: 20px;
}

td.noborder {
  border: 0px !important;
}

#saveAccountFromUpsell {
  cursor: pointer !important;
  font-size: 18px;
  text-decoration: underline;
  color: #0644C4;  
  margin-top: 30px;
  margin-bottom: 30px;
}

.upsellRejection {
  text-align: center;
  cursor: pointer !important;
  font-size: 12px;
  line-height: 1.1em;
  text-decoration: underline;
  color: #0644C4;
}

#buyNowSpan {
  display: none;
}

#buyNowLink {
  font-weight: bold;
}

#buyNowContainer {
  margin-top: 20px;
  margin-bottom: 15px;
  text-align: center;
}

#breadcrumb {
  font-size: 12px;
}

td.noborder {
  border: 0px !important;
}

#upsellRejectionSurvey label {
  margin-left: 5px;
}

#upsellRejectionSurveyTable {
  margin-bottom: 15px;
}

#upsellRejectionSurveyTable td {
  padding-left: 14px;
}

#noneOfTheseRow {
  padding-left: 0px !important;
  text-align: center;
}

#checkAllInstructions {
  font-weight: bold;
  margin-top: 10px;
}


#upsell {
  width: 940px;
  margin-left: -490px;
  /* background-color: E1F1FB;*/  /* Nice light blue*/
  background-color: #EEE;
}

#upsell h1, #upsell h2, #upsell p {
  text-align: center;
}

#upsell h1 {
  color: black;
  font-size: 50px;
  font-weight: bold;
  letter-spacing: -2.2px;
  margin-top: 10px;
  margin-bottom: 5px;
  padding-top: 0px;
}

#upsell h2 {
  font-weight: normal;
  font-size: 22px;
  padding: 0px;
  margin-bottom: 20px;  
  text-transform: none;
}

#upsell p {
  font-size: 14px;
  line-height: 20px;
  padding-top: 0px;
}

.featuresTable {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 25px;
  background-color: #FFFFFF;
  border-spacing: 0px;
  border: 1px solid #999999;
  width: 900px;
}

.featuresTable td {
  text-align: center;
  border-left: 1px solid #CCCCCC;
/*  border-bottom: 1px solid #CCCCCC;  */
  font-size: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.featuresTable th {
  border-left: 1px solid #CCCCCC;
/*  border-bottom: 1px solid #CCCCCC;*/
  padding-left: 0px;
  padding-right: 0px;
  text-decoration: none;
  font-size: 1.3em;
  font-weight: normal;
  padding-top: 10px;
}

.featuresTable .paidColumn {
  width: 21%;
}

.featuresTable caption {
  text-align: left;
  font-size: 22px;
  padding-bottom: 10px;
  padding-top: 10px;
  margin: 0px;
}

.featuresTable .feature {
  font-weight: bold;
  text-align: left;  
  border-left: none; 
  padding-left: 20px;
  width: 160px;
}

.featuresTable .product {
  font-size: 1.6em; 
  line-height: 1.6em;
  font-weight: bold;
  letter-spacing: -1px;
}

.featuresTable .price {
  font-size: 24px;  
  padding-bottom: 15px;  
}

.featuresTable .alternatingRow td {
/*  background-color: #FBFBFB; /*#F8F8F8; */
}

.featuresTable .selectPlanRow td {
  padding-bottom: 20px;
  padding-top: 20px;
}

.featuresTable .selectPlanButton {
  width: 120px;
  margin: auto;
}

.featuresTable .selectPlanButton a {
  background-image: url('/static/img/upsell/select_plan_small.png');
  height: 37px;
  display: block;
  cursor: pointer;
}

.featuresTable .selectPlanButton a:hover {
	background-position: 0 -37px;
}

.invisible {
  visibility: hidden;
}

.spreadlyDialog {
  width: 660px;
  height: 1100px;
  margin-left: -330px;
  padding:0px;
  background: transparent;
  border: none;
  display: block;
}

.spreadlyContainer {
  width: 100%;
  height: 100%;
}


.breadcrumbsBannerStep1 {
  background-image: url('/static/img/upsell/breadcrumbs_banner_step1.png');
  width: 563px;
  height: 36px;
  margin: auto;
  margin-bottom: 25px;
}

.breadcrumbsBannerStep2 {
  background-image: url('/static/img/upsell/breadcrumbs_banner_step2.png');
  width: 563px;
  height: 36px;
  margin: auto;
}

.breadCrumbsBannerContainer {
  background: #EEE;
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-right: 1px solid black;  
  padding-top: 20px;
}

.breadCrumbSelectPlan {
  cursor: pointer;
  float: left;
  margin-left: 20px;
  width: 150px;
  height: 36px;
  background: transparent;
}

#classroomSignup {
    width: 500px;
}

.field {
  width:285px;
}

