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

}

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

}

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

}

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

}

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {background: #2c3c4a url(../img/body-bg.jpg) repeat-x top; margin: 0;}

body {
    font-size: 14px;
    line-height: 1.4;
	font-family: 'CartoGothicStdBook', Arial, Helvetica, sans-serif;
	color: #333;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
#page {width:960px; margin:0 auto; padding: 0 0 50px 0;}

#login { width: 692px; margin: 30px auto;}
#login h1 { text-align: center; text-transform: uppercase; font-size: 24px; color: #1d4971; font-weight: normal; text-shadow:0 1px 1px #fff; margin: 0;}
#login .login-form { background:url(../img/login-bg.png) no-repeat top center; height: 405px; margin-top: -15px;}
#login form { display:block; padding: 45px 0 0;}
#login p { width: 340px; margin: 8px auto;}
#login p label { display: block}
#login p input { width: 325px; height: 24px; line-height: 24px; padding: 3px 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #5b7da2 !important}
#login input:focus {border: 1px solid #2c4b6c !important}
#login form a { font-size: 14px;}
#login .form-submit a, #reset-password .form-submit a { width: 80px; margin: 0 auto; float: none; height: 34px !important; line-height: 34px !important; font-size: 16px; text-align: center}

#reset-password {border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border: 1px solid #315678; -moz-box-shadow: 0 0 10px #1e282f; -webkit-box-shadow: 0 0 10px #1e282f; box-shadow: 0 0 10px #1e282f; background: #fff url(../img/content-pattern.gif); padding: 15px; width: 500px; margin: 45px auto 100px auto;  }

.clearfix:after {content: "."; display: block;  clear: both; visibility: hidden;}
.clr { clear:both;}
.fll {float:left !important;}
.flr {float:right !important;}
.ofl { overflow:hidden;}
.bd-r { border-right: 1px solid #ccc;}
.bd-l { border-left: 1px solid #ccc;}

/*--- Form ---*/
label, input, textarea, select { font: normal 14px/22px 'CartoGothicStdBold', Arial, Helvetica, sans-serif; text-shadow: 0 0 1px #fff; }
input, select, textarea { height: 22px; line-height: 22px; padding: 2px 4px; background: #f2f2f2; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #a8a8a8;  }
input:focus, textarea:focus, select:focus { background: #fff; border: 1px solid #7d7d7d}
select { height: 27px; line-height: 26px; text-shadow: none; padding-top: 4px }

label.checkbox { vertical-align:middle;}
label.checkbox input { width: 18px !important; margin-right: 6px !important; margin-top: 0px !important; display: inline !important}

.info-tip { min-height: 30px; position:absolute; left: 350px; z-index: 99; width: 160px; top:20px;}
.info-tip .arrow { background:url(../img/sprites/tip-arrows.png) no-repeat; width: 10px; height:12px; position:absolute; z-index: 5; left: 0; top: 10px}
.info-tip p { position:absolute; z-index: 4; top:0; left: 9px; margin: 0; border: 1px solid #9fc4e5; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; background: #d4e6f7;}
.info-tip p span { padding: 8px 10px; line-height: 16px; display:block; color: #090}

.error .info-tip p { border: 1px solid #d21a00; background: #fcdcd8;}
.error input { border: 1px solid #D21A00; background: #ffefef}
.error .info-tip .arrow { background-position: 0 -14px}
.error .info-tip p span { color: #ca2008}

.input-note p { margin: 3px 0 0 0; max-width: 350px; line-height: 16px; font-size: 13px; min-height: 24px}

.note {font: normal 14px/22px 'CartoGothicStdBoldItalic', Arial, Helvetica, sans-serif; margin-left: -5px;}

a.form-btn { display:block; margin-right: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #365b7d; height: 30px; line-height: 32px; padding: 0 20px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 1px #000; text-decoration: none; font-weight: normal; font-family: 'CartoGothicStdBook'; font-size: 16px;

background: #164d8d;
}

a.form-btn:hover{
	background: #154d8d url(../img/btn-bg-hover.png) repeat-x top;
}

a.form-btn span { display:block; background:url(../img/sprites/btn-arrows.png) no-repeat; width: 26px; height: 19px;}
a.form-btn span.next { background-position: 0 0; float: right; margin: 10px -5px 0 10px}
a.form-btn span.prev { background-position: 0 -20px; float: left; margin: 10px 10px 0 -5px}


.input-set { padding-bottom: 10px; position: relative;}
.form-submit { padding: 12px 0 0 0;}

/*----Buttons---*/
a.view-detail, a.edit-btn, a.info-btn, a.logout, a.reply-btn { display:block; background:url(../img/sprites/icons.png) no-repeat; font-size: 14px; font-weight: bold; height: 30px; line-height: 30px; text-decoration: none; }

a.view-detail {background-position: right 2px; padding-right: 30px; text-decoration: none; margin-top: 55px;}
a.edit-btn { background-position: right -114px; padding-right: 32px; height: 25px; line-height: 25px; margin-right: 10px; }
a.info-btn {background-position: left -84px; padding-left: 35px; margin: 45px 0 0 18px;}
a.reply-btn {background-position: -3px -26px; padding-left: 30px; }

/*--- page styles ---*/
#header { position:relative}
	#logo {width: 140px;}
	.top-header {margin-left: 140px; width: 820px}
	.portal-tt,.prog-tt  { margin: 12px 0 0 0; height: 35px; width: 135px;}
	.prog-tt  { text-align: right;}

	#logged { padding-top: 12px}
	#logged .stu-logo {
		display:block;
		width: 55px;
		height: 55px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-box-shadow:    0 0 5px #000;
		-webkit-box-shadow: 0 0 5px #000;
		box-shadow:         0 0 5px #000;
		margin-right: 15px
	}
	#logged .stu-logo img { max-width: 55px;}
	#logged .user { margin: 0; text-align: right; color: #fff;}
	#logged .user a { display:block; overflow:hidden; color: #fff; text-shadow: 0 1px 1px #000; text-decoration: none; cursor: pointer}
	#logged .user span { color: #ffba00; font-size: 14px;}
	#logged a.logout {  background-position: right -55px; height: 28px; line-height: 28px; padding-right: 32px; font-weight: normal; margin-top: 5px;}

	#menu { clear:both; float: left}
	#menu ul { list-style: none; padding: 0; margin: 8px 0 0 0;}
	#menu ul li { float:left; display:block; margin-right: 25px; height: 30px;}
	#menu ul li a {display: block; height: 30px; font: normal 15px/30px 'CartoGothicStdBold', Arial, Helvetica, sans-serif; text-transform:uppercase; color: #a4bbd0; text-shadow: 1px 1px 2px #000; text-decoration: none}
	#menu ul li a:hover, #menu ul li.active a, #logged a.logout:hover {color: #ffba00;}

#main { padding: 15px 0 25px 0;}
	.content { position:relative;}
	.content-block { background: #fff url(../img/content-pattern.gif);
		-moz-box-shadow:    0 0 1px #111;
		-webkit-box-shadow: 0 0 1px #111;
		box-shadow:         0 0 1px #111;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px; padding: 2px;}

	h1.tt-bar {background-color: #78a0c4; height: 32px; text-indent: 20px; font:  normal 18px/33px 'CartoGothicStdBook', Arial, Helvetica, sans-serif; text-transform: uppercase; text-shadow: 0 0 1px #fff; color: #212931; border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; margin-bottom: 15px; }
	h1.tt-bar span { display:block; height: 32px; line-height: 33px;}
	h1.tt-bar span.col-r { text-indent: 0;}
/*==== Steps bar===*/
.steps-ctn {overflow: hidden; margin-bottom: 12px;}
	.steps-ctn p.guide { color: #fff; font-size: 115%; margin: 4px 0;}
	ul.steps {list-style: none; padding: 0; margin: 0; color: #343434;}
	ul.steps li, .step-bar-r, .step-num  {display: block; height: 54px; background-image: url(../img/sprites/steps-bg.png); background-repeat:no-repeat; float:left;}
	.step-num {width: 47px; height: 47px; background-position: -1px -437px; text-align: center; font: italic bold 32px/44px "Times New Roman", Times, serif; text-shadow: 0 1px 1px #fff; margin: 4px 8px 0 4px; }
	ul.steps li.active .step-num {color: #ffba00; text-shadow: 0 1px 1px #000; background-position: 0 -390px;}
	.step-tt, a.step-tt { font-size: 120%; font-family: 'CartoGothicStdBold', Arial, Helvetica, sans-serif; line-height: 1.1em; }
	ul.steps li.active .step-tt, ul.steps li a:hover .step-tt {color: #154977;}

	ul.steps li.step1 { background-position: 0 -275px; padding-left: 7px;}
	ul.steps li.step1.active { background-position: 0 -165px;}
	ul.steps li.step1 .step-bar-r {background-position: 0 right; padding: 0;}
	ul.steps li.step1.active .step-bar-r, ul.steps li.step2.active .step-bar-r, ul.steps li.step3.active .step-bar-r { background: url(../img/sprites/steps-bg.png) -8px -55px; padding-right: 33px;}

	ul.steps li.step2.active .step-bar-r, ul.steps li.step3.active .step-bar-r { background-position: -14px -55px;}
	ul.steps li .step-bar-m { background:url(../img/step-nm-rp.png) repeat-x top; height: 54px; float:left; text-shadow: 0 0 1px #fff }
	ul.steps li p, ul.steps li a {display:block; float:left; padding-right: 10px; margin-top: 15px; color: #343434;}
	ul.steps li a:hover { text-decoration:none}
	ul.steps li.step1 p, ul.steps li.step1 a{ width: 115px}
	ul.steps li.step2 p, ul.steps li.step3 p, ul.steps li.step2 a, ul.steps li.step3 a{ width: 157px}
	ul.steps li.step2.dis, ul.steps li.step3.dis {background-position: -15px 0; padding-left: 33px;}
	ul.steps li.step2.dis .step-bar-r, ul.steps li.step3.dis .step-bar-r { padding-right: 0;}
	ul.steps li.step2.active, ul.steps li.step3.active, ul.steps li.step4.active {background-position: 0 -110px; padding-left: 33px}


	ul.steps li.step4 p, ul.steps li.step4 a{ width: 142px}
	ul.steps li.active .step-bar-m { background:url(../img/step-active-rp.png) repeat-x top; }

	ul.steps li .step-bar-r  { background-position: right 0; padding-right: 33px;}
	ul.steps li.step4 .step-bar-r { background-position: right -330px; padding-right: 7px;}
	ul.steps li.step4.active .step-bar-r { background-position: right -220px; padding-right: 7px;}

/*==== Step 1 =====*/
.form-col {width: 49%; padding: 10px 0 10px 0; margin-bottom: 15px}
#schoolInfo .input-set { width: 345px; margin: 0 auto;}
#schoolInfo label, #schoolInfo input { display: block; width: 340px;}
img.input-icon { position:absolute; left: 325px; top: 26px; z-index: 5}

textarea.address { width: 340px; height: 70px; clear:left !important; float:left }
div.state-select { width: 243px;margin-right: 10px; position:relative}
div.state-select label { width: 80px;}
div.state-select select { width: 235px;}
div.state-select .info-tip { left: 235px;}

div.zipcode { width: 92px; position:relative}
div.zipcode label { width: 80px !important }
div.zipcode .info-tip { left: 92px;}
input.zip {width: 83px !important;}
select.timezone {width: 350px; float:left; clear:both}

#schoolInfo .op-hours label { width: 118px; float: left; margin-top: 10px; font-family: 'CartoGothicStdBook'; }
#schoolInfo .op-hours select { width: 95px; float: left; margin-top: 10px;}
#schoolInfo .op-hours span { display:block; padding: 12px 0; width: 30px; text-align:center; float: left}
#schoolInfo .note { margin: 25px 0 0 -5px}

/*==== Step 2 ======*/
#loginCreds .input-set{margin: 0 0 0 10%; }
#loginCreds label, #loginCreds input{ display: block; width: 340px; float: left; clear: left; margin-right: 10px;}
#passwordStrengthMeter { overflow:hidden; margin-top: 5px;}
#passwordStrengthMeter span { display:block; float:left; margin-right: 10px; font-family: 'CartoGothicStdBold'; }
#passwordStrengthMeter span.pw-meter-bar { height: 6px; width: 140px; background: #2b2b2b; margin-top: 6px;}
#passwordStrengthMeter span.meter-strength { height: 6px; background: #4378aa;}
.upload-btn { clear: both; width: 56px; margin-top: 2px;}
.stu-logo-uploaded {clear: both}
.stu-logo-uploaded img {max-with: 64px; margin-right: 12px;}
.stu-logo-uploaded a, .stu-logo-uploaded span {display: block; float:left; margin-top: 20px;}
.stu-logo-uploaded span { padding: 0 8px; color: #6c6c6c}

/*==== Step 3 ======*/
.col-l {width: 330px; display:block;}
.col-r {margin-left: 331px; display:block; padding-left: 25px}
#billingInfo h1.tt-bar{ margin-bottom: 0;}
.reg-info { padding: 10px 20px}
.reg-info p{ padding: 4px 0; font-size: 15px;}
.reg-info p.support { background: #8db3d6 url(../img/hotline-ico.png) no-repeat 12px 5px; padding-left: 67px; height: 51px; font: normal 27px/54px 'CartoGothicStdBook', Arial, Helvetica, sans-serif; color: #154977; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border: 1px solid #78A0C4; text-shadow: 0 1px 1px #fff; margin: 0 }


#billingInfo .billing-form {padding: 12px 12px 0 25px; overflow: hidden;  }
#billingInfo label, #billingInfo input { display: block; width: 340px; float: left; clear: left; margin-right: 10px;}
#billingInfo input.csv-code { width: 75px;}
#billingInfo label.checkbox { width: auto;}
.terms-conditions  {background: #e8e8e8; padding: 7px 12px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-shadow: 0 1px 1px #fff; margin: 5px 0 20px 0;}
#billingInfo .other-billing-address { padding-bottom: 10px;}
#billingInfo .other-billing-address .input-set { width: 345px;}

/*==== Step 4 ======*/
ul.ac-summary { list-style: none; padding: 10px 20px 0 20px; margin: 0;}
ul.ac-summary li { padding: 7px 20px; font-size: 15px;}
ul.ac-summary li.odd { background: #ebebeb}
ul.ac-summary li span { font-family: 'CartoGothicStdBold'; display:block; width: 150px; }

.more-info { padding: 10px 20px 10px 40px; font-family: 'CartoGothicStdBold'; font-size: 16px;}

/*==== Congrats ======*/
.ac-welcome {padding: 20px 10px;}
.ac-welcome .col-l { text-align: center; font-size: 16px;}
.ac-welcome .col-r { text-align:center; padding: 30px 10px;}
.ac-welcome .congrats-txt {font-size: 24px; color: #154977; font-family: 'CartoGothicStdBold';}
.ac-welcome .welcome-txt {font-size: 16px; font-family: 'CartoGothicStdBold';}

/*==== Edit AC Info ======*/
#editInfo .input-set { margin: 5px 0 5px 40px; position:relative}
#editInfo label, #editInfo input, #editInfo select, #editInfo textarea  { clear: none !important; float:left; margin-right: 10px}
#editInfo label {width: 160px}
#editInfo input { width: 340px}
#editInfo .info-tip { top: 0px; left: 520px}
#editInfo div.state-select { width: 370px !important;}
#editInfo div.state-select label { width: 160px !important;}
#editInfo div.state-select select { width: 180px !important }
#editInfo .input-icon { left: 496px; top: 5px}
#editInfo div.zipcode { width: 190px; }
#editInfo div.zipcode label { width: 65px !important }
#editInfo input.zip {width: 55px !important;}
#editInfo .stu-logo-uploaded {clear: none; float: left;}
#editInfo a.upload-btn { margin-left: 170px}
#editInfo .op-hours { margin-bottom: 12px;}
#editInfo .op-hours span { display:block; float: left; width: 40px; text-align:center; line-height: 26px;}
#editInfo .op-hours select { margin-right: 0; width: 95px;}
#editInfo .op-hours label { width: 110px; font-family: 'CartoGothicStdBoldItalic'; line-height: 26px;}

.step-submit { background: #8db3d6 url(../img/step-btn-bg.gif) repeat-x top; clear: both; height: 72px; overflow:hidden; margin-top: 10px; padding: 0 10px}
.step-submit .step-count { font-size: 20px; color: #14446f; text-shadow: 0 1px 1px #fff; text-transform: uppercase; margin: 25px 0 0 10px}
.step-submit .btn-set { margin-top: 15px;}
.step-submit a.form-btn { height: 42px; line-height: 44px; font-size: 20px; font-family: 'CartoGothicStdBook'; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff; box-shadow: 0 0 1px #fff; opacity: 0.8; filter: alpha(opacity=75); margin-left: 5px}
.step-submit a.form-btn:hover, .step-submit a.form-btn.active {opacity: 1; filter: alpha(opacity=100);}
.step-submit a.form-btn.active { font-size: 24px;}

/*===== FAQ =====*/
.post-content {padding: 10px 20px}
h3.question {background: #e4e4e4; padding: 6px 20px}
p.answer {padding: 6px 20px}


	.message-box { width: 434px; height: 245px; position:absolute; top: 140px; left: 263px; z-index: 9999;}
	.message-box.info {background: url(../img/info-message-dialog.png) no-repeat top center;}
	.message-box h2 { text-align:center; text-transform: uppercase; font-size: 20px; text-shadow: 0 1px 1px #fff; margin: 30px 0 6px 0;}
	.message-box p { font-family: 'CartoGothicStdBold'; width: 340px; margin: 5px auto; font-size: 16px; text-shadow: 0 0 1px #fff; min-height: 90px; text-align:center; line-height: 20px;}
	.message-box.warning, .message-box.error {background: url(../img/warning-message-dialog.png) no-repeat top center;}
	.message-box.info h2 {color: #1d4971;}
	.message-box.warning h2 {color: #f16600;}
	.message-box.error h2, .message-box .error {color: #d81900;}
	.message-box a.form-btn { width: 90px; margin: 0 auto; text-align:center; font-size: 18px;}

#footer {background:url(../img/nav-bar.png) no-repeat top center; height: 48px; clear: both; color: #fff; text-align: center; line-height: 47px; text-shadow: 0 1px 1px #000;}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

@media only screen and (device-width: 768px) {
#page {width: 750px; padding-bottom: 30px;}
#header .top-header { width: 615px;}
#logged .stu-logo { margin-right: 10px;}
#logo {width: 135px;}
.top-header {margin-left: 135px;}
#menu ul li { float:left; display:block; margin-right: 20px; height: 30px;}
	#menu ul li a {display: block; height: 30px; font: normal 14px/30px 'CartoGothicStdBook', Arial, Helvetica, sans-serif; text-transform:uppercase; color: #a4bbd0; text-shadow: 1px 1px 2px #000; text-decoration: none}

.info-tip { position:absolute; left: auto; right: 10px; z-index: 99; top:53px;}
.info-tip .arrow { background:url(../img/sprites/tip-arrows-ipad.png) no-repeat; width: 12px; height:10px; left: auto; right: 10px; top: -9px; background-position: right 0;}
.info-tip p { position:absolute; z-index: 4; top:0; left: auto; right: 0; margin: 0; border: 1px solid #9fc4e5; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; background: #d4e6f7;}
.info-tip p span { padding: 8px 10px; line-height: 16px; display:block; color: #090}

.error input { border: 1px solid #D21A00; background: #ffefef}
.error .info-tip .arrow { background-position: 0 0}

/*==== Overide Steps bar===*/
.steps-ctn p.guide { font-size: 110%; }
.step-num {width: 36px; height: 36px; background-position: 0px -37px; font: italic bold 22px/35px "Times New Roman", Times, serif; margin: 8px 5px 0 0; background-image: url(../img/sprites/steps-bg-ipad.png); }
ul.steps li.active .step-num {color: #ffba00; text-shadow: 0 1px 1px #000; background-position: 0 0;}
.step-tt, a.step-tt { font-size: 100%; font-family: 'CartoGothicStdBold', Arial, Helvetica, sans-serif;  }
ul.steps li.active .step-tt, ul.steps li a:hover .step-tt {color: #154977;}
ul.steps .step-desc {line-height: 14px !important; font-size: 85%}

ul.steps li.step1 { background-position: 0 -275px; padding-left: 6px;}
ul.steps li.step1.active { background-position: 0 -165px;}
ul.steps li.step1 .step-bar-r {background-position: 0 right; padding: 0;}
ul.steps li.step1.active .step-bar-r, ul.steps li.step2.active .step-bar-r, ul.steps li.step3.active .step-bar-r { background: url(../img/sprites/steps-bg.png) -52px -55px; padding-right: 30px}

ul.steps li.step2.active .step-bar-r { background-position: -15px -55px;}
 ul.steps li.step3.active .step-bar-r { background-position: -23px -55px;}
ul.steps li .step-bar-m { background:url(../img/step-nm-rp.png) repeat-x top; height: 54px; float:left; text-shadow: 0 0 1px #fff }
ul.steps li p, ul.steps li a { padding-right: 0; }
ul.steps li a:hover { text-decoration:none}
ul.steps li.step1 p, ul.steps li.step1 a{ width: 100px}
ul.steps li.step2 p, ul.steps li.step2 a {width: 136px;}
ul.steps li.step3 p, ul.steps li.step3 a{ width: 130px}
ul.steps li.step2.dis, ul.steps li.step3.dis {background-position: -16px 0; padding-left: 30px;}
ul.steps li.step2.dis .step-bar-r, ul.steps li.step3.dis .step-bar-r { padding-right: 0;}
ul.steps li.step2.active, ul.steps li.step3.active, ul.steps li.step4.active {background-position: 0 -110px; padding-left: 30px}

ul.steps li.step4 .step-bar-r {padding-right: 6px;}
ul.steps li.step4 p, ul.steps li.step4 a, ul.steps li.step4.active p, ul.steps li.step4.active a{ width: 117px}

ul.steps li .step-bar-r  { padding-right: 28px;}

/*==== Step 1 =====*/
.form-col { margin-bottom: 0;}
#schoolInfo .input-set { width: 320px;}
#schoolInfo label, #schoolInfo input { display: block; width: 300px;}
img.input-icon { position:absolute; left: 284px; top: 26px; z-index: 5}

textarea.address { width: 300px }
div.state-select { width: 206px;}
div.state-select label { width: 80px;}
div.state-select select { width: 200px;}
div.state-select .info-tip { left: auto; right: 5px;}

div.zipcode .info-tip { left: auto; right: 0px}
select.timezone {width: 309px; float:left; clear:both}

#schoolInfo .op-hours label { width: 100%; margin-top: 5px; }
#schoolInfo .op-hours select { width: 100px; margin-top: 3px;}
#schoolInfo .op-hours span {  padding: 7px 0; width: 35px; }
#schoolInfo .note { margin: 10px 0 0 -5px}

/*==== Step 2 ======*/
#loginCreds img.input-icon { left: 324px}
#loginCreds .info-tip {right: auto; left: 190px;}

/*==== Step 3 ======*/

#billingInfo .info-tip {top: 52px; left: auto; right: 30px;}
#billingInfo .other-billing-address .input-set {width: 347px;}
#billingInfo .other-billing-address .info-tip {right: -3px;}
.terms-conditions {width: 326px}

#billingInfo .billing-form {
    width: 380px;
	padding-right: 0;
}

/*==== Step 4 ======*/
ul.ac-summary { list-style: none; padding: 10px 20px 0 20px; margin: 0;}
ul.ac-summary li { padding: 7px 20px; font-size: 15px;}
ul.ac-summary li.odd { background: #ebebeb}
ul.ac-summary li span { font-family: 'CartoGothicStdBold'; display:block; width: 150px; }

.more-info { padding: 10px 20px 10px 40px; font-family: 'CartoGothicStdBold'; font-size: 16px;}

.step-submit .step-count {font-size: 18px}

/*==== Congrats ======*/

.ac-welcome .col-l { font-size: 15px; width: 300px}
.ac-welcome .col-r {padding: 0px 10px; margin-left: 315px}
.ac-welcome .welcome-txt {font-size: 15px; font-family: 'CartoGothicStdBold'; line-height: 26px;}

/*==== Edit AC Info ======*/
#editInfo .input-set { margin: 5px 0 5px 50px; }
#editInfo textarea, #editInfo input  { width: 340px}

#editInfo .info-tip { left: 515px; top:0px;}
#editInfo .info-tip .arrow { background:url(../img/sprites/tip-arrows.png) no-repeat; width: 10px; height:12px; left: 0; top: 10px}
#editInfo .info-tip p { top:0; left: 9px; margin: 0;}
#editInfo .info-tip p span { padding: 8px 10px; line-height: 16px; display:block; color: #090}

#editInfo .error .info-tip .arrow { background-position: 0 -14px}

#editInfo select.timezone {width: 350px}

#editInfo #passwordStrengthMeter, #editInfo .input-note {
    margin-left: 170px;
    margin-top: 8px;
}

.step-submit .btn-set { margin-top: 17px;}
.step-submit a.form-btn { height: 40px; line-height: 42px; font-size: 17px; padding: 0 15px; }
.step-submit a.form-btn:hover, .step-submit a.form-btn.active {opacity: 1; filter: alpha(opacity=100);}
.step-submit a.form-btn.active { font-size: 20px;}

.message-box {left: 150px;}

}