@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,700i');
/* CSS Document */

.wrapper{ max-width: 960px; margin: 0 auto;}

img{ max-width:100%;}

/************** HEADER *********************/

#header-bar{ width: 100%; float: left; padding-top: 5px; padding-bottom: 5px;}

#navigation{width: 100%; margin: 0 auto; text-align: center;}
#navigation.nav_loggedin{width: 80%; float:left; text-align: left;}
.toggleMenu{display:none; font-family: 'fontawesome'; font-size: 24px;}
a.toggleMenu:link,a.toggleMenu:visited,a.toggleMenu:hover {text-decoration:none;}
.toggleMenu span{ font-size: 18px; font-weight: 700;}
.toggleMenu .fa-bars{padding-left: 8px; vertical-align: middle;}
#navigation ul{ margin: 0 auto; padding: 15px 0; list-style: none;}
#navigation.nav_loggedin ul{ line-height: 27px;}
#navigation ul li{ display: inline-block; padding: 7px 1.5%;}
#navigation ul li a{ /*font-size: 14px;*/ text-decoration: none;}
#navigation ul li a:hover{ }

#user_info{width: 20%; float: right; /*font-size: 14px;*/ font-weight: 400; text-align: right; }
#navigation li.last-mobile-menu {display:none;}
#user_info span{font-weight:700;}
#user_info a{ font-style: italic; text-decoration: none;}


/****** PAGE  ****************/
#mobile-overlay{display: none; position: absolute; background: rgba(0,0,0,0.8); width: 100%; height: 100%; z-index: 998;}
#banner{ width: 100%; margin: 0 auto; text-align: center; float:left; /*padding-top: 64px;*/}
.logo{ padding-top: 30px; padding-bottom: 30px;display:none;}
.logo img{ max-width: 100%;}
.banner-graphic{ display:block;}
.banner-graphic.logo-spacing{ padding-top: 30px; padding-bottom: 30px;}
.banner-graphic img{ max-width: 100%;}

#page_container{margin-top: 30px; margin-bottom: 30px; position: relative; float: left; width:960px;}
#page_container::after{content: ""; background: url(/oa/responsive/images/content_shadow.png) no-repeat; width: 100%; height: 8px; display: block; background-size: 100% 100%; position: absolute; margin-top:0px; bottom: -8px;}
.content_banner{width: 100%; padding: 0px; margin: 0 auto;}
.content_banner img{width: 100%; height: auto;}
.page_content{ padding: 25px 35px; text-align: left;}
.page_content h1{ font-size: 24px; font-weight: 300;}

#page_container.application-page{border: none;}
#page_container.application-page::after{content: ""; background: none;}
.page_content.inside_page{width: 70%; float:left; position: relative; padding: 0px; margin-left: 2%;}
.page_content.inside_page.full_width{width:100%; float:none; margin:0; /* padding: 25px; */}
.page_content.inside_page::after{content: ""; background: url(/oa/responsive/images/content_shadow.png) no-repeat; width: 100%; height: 8px; display: block; background-size: 100% 100%; position: absolute; margin-top:0px; bottom: -8px;}
.page_content.inside_page.full_width::after{background:none;}

#page_content_inner{ padding: 25px; /*width: calc( 100% - 50px);*/}

.page_content.inside_page table.spaced-tables{ /*padding: 25px 35px; display: block;*/ width: 100%; max-width: 100%;}
.page_content.inside_page.full_width table.spaced-tables{width:auto;}
.page_content.inside_page ul.formlist{ padding: 0px; margin: 0 auto; width: 100%; }
.page_content.inside_page table.spaced-tables > tbody > tr{ /*margin-bottom: 20px; display: block;*/ width: 100%;}
.page_content.inside_page.full_width table.spaced-tables > tbody > tr{ width: auto;}
table.spaced-tables > tbody, /*.page_content.inside_page td*/{width: 100%; display: block;}
.page_content.inside_page tr.section-title{ border: none;}
.page_content.inside_page tr.section-title td{ }
.page_content.inside_page tr.section-title td.headerbg{ font-size: 24px; font-weight: 300; /*width: 100%;*/ display: block; padding: 8px 15px; text-align:left;}
.page_content.inside_page h1{padding:5px; margin-top:0;}

.page_content.inside_page ul.formlist > li {margin:0 !important; padding:10px 0 !important;}

.page_content.inside_page ul.formlist > li.headerbg.oi-student{ font-size: 24px; font-weight: 300; padding: 8px 15px !important;}

#oi-student-yes-no {display:inline-block;}

.page_content.inside_page ul.formlist > li ul > li {list-style:disc;}
.page_content.inside_page td.two-col-form{ width: 48% !important; /*margin-left: 2%;*/ display: inline-block;}
#review-screen td.two-col-form {margin-left: 0 !important;}
.page_content.inside_page td.pad-right {padding-right:1%;}
.page_content.inside_page td.pad-left {padding-left:1%;}
.page_content.inside_page select{ width: 90%;}
select.sort-select {width:80px !important;}
.page_content.inside_page ul.formlist .section{ font-size: 21px; font-weight: 700; line-height: 100%;}

#grandparent-household-1{display: none;}

.form_divider_top{ font-weight: 700;}
span.redtext, div.redtext{ color: red; vertical-align: top;}
a.copy-button{ font-weight: 700; text-decoration: underline; padding-left: 10%; /*font-size: 14px;*/
}

input[type="password"],
input[type="text"]
{max-width: 90%;}

/*********** FLOATING HEADER **********/
#floating_header{ width: 100%; position: relative; z-index: 997; margin-bottom: 10px; text-align: left;}
#floating_header::after{content: ""; background: url(/oa/responsive/images/content_shadow.png) no-repeat; width: 100%; height: 8px; display: block; background-size: 100% 100%; position: absolute; margin-top:0px;}
#floating_header.hidden-header{display: none !important;}
#floating_header a:link, #floating_header a:visited, #floating_header a:hover {text-decoration:none !important;}

.page-title{ font-size: 30px; font-weight: 300; line-height: 125%; padding: 10px 0px 10px 20px;}

/*.page-buttons{padding: 10px 0px 10px 20px;}*/
.page-buttons input[type=submit], .page-buttons input[type=button]{ font-size: 14px; border: none; display: inline-block; margin-right: 5px; padding: 3px 10px; cursor: pointer;}

#page-nav{ text-align: left; font-size: 14px; font-weight: 400; padding: 0px 0px 0px 20px;}
#page-nav ul{padding: 0px; margin: 0 auto;}
#page-nav ul li{list-style: none; display: block; position: relative; padding: 5px 0px;}
#page-nav ul li ul{display: none; margin-top: 0.5em;}
#page-nav ul li ul li{ padding: 5px 0px;}
#page-nav ul li ul li a{ padding-left: 20px;}
#page-nav ul li i{display: none; position: absolute; right: 10px; top: 0px; font-family: 'fontawesome'; font-size: 25px; cursor: pointer;}
#page-nav ul li.has-children .fa-plus{display: block;}
#page-nav ul li.has-children.active .fa-plus{display: none;}
#page-nav ul li.has-children.active .fa-minus{display: block;}

.form-nav{display: none;}
.form-nav.active{display: block !important;}
.go-to{ padding: 3px 10px; display: inline-block; margin-bottom: 10px; }

/********* BOTTOM FIXED BAR WITH BUTTONS **********/

#bottom-bar{ position: fixed; bottom: 0px; width: 100%; height: 40px; margin: 0 auto; text-align: center; z-index: 997; }


/********** INSIDE LEFT MENU *********/
.left_menu_column{ float: left; width: 27%; position: relative;}
.left_menu_column::after{content: ""; background: url(/oa/responsive/images/content_shadow.png) no-repeat; width: 100%; height: 8px; display: block; background-size: 100% 100%; position: absolute; margin-top:0px;}
.student-info{ text-align: left; /*font-size: 14px;*/ font-weight: 400; padding-top: 10px; padding-bottom: 10px; padding-left: 20px;}
.student-info-fp {position:relative;}
.student-info span{font-weight: 700;}
.student-info span.family-student-name, .student-info span.family-student-grade {font-weight: 300;}
.student-info.active span.family-student-name, .student-info.active span.family-student-grade {font-weight: 700;}
.student-info div.family-name{font-weight: 700; font-size:larger; padding-bottom:15px;}

.left-nav-button{display: none; position: absolute; left: 0px; border-radius: 5px 5px 0px 0px; transform: rotate(90deg); transform-origin: left; margin-left: 16px;}
.left-nav-button a:link, .left-nav-button a:visited, .left-nav-button a:hover{font-size: 16px; padding: 0px 25px; line-height: 36px; text-decoration:none;}
.left-nav-button i{font-family: 'fontawesome'; font-size: 25px; margin-left: 5px; vertical-align: middle;}

#menu ul{ padding:0px; margin: 0 auto;}
#menu ul li{ list-style: none; padding: 15px 0px; position: relative;}
#menu ul li a.ln2{ padding-left: 60px; display: block;}
#menu ul li a.ln2_default{ padding-left: 60px; display: block; text-decoration:underline !important;}
#menu ul li a.ln2_top, #menu ul li a.ln2_bottom{display: table; padding-left: 20px; padding-right: 10px;}

#menu ul li a.form_completed::before{ content: ""; background: url(/oa/responsive/images/complete.png) no-repeat; background-size: 25px 25px; display: block; width: 25px; height: 25px; position: absolute; left: 20px;}
#menu ul li a.form_errors::before{ content: ""; background: url(/oa/responsive/images/warning.png) no-repeat; background-size: 26px 26px; display: block; width: 26px; height: 26px; position: absolute; left: 20px;}

/*********** FOOTER **************/
#footer{ width: 100%; margin: 0 auto; padding-bottom: 45px; padding-top: 20px; float:left; }
#footer ul.footer-nav{ margin: 0 auto; padding: 15px 0; width: 100%; text-align: center;}
#footer ul.footer-nav li{ display: inline-block; padding:7px 1.5%;}
#footer ul.footer-nav li a{ /*font-size: 14px;*/ text-decoration: none;}
#footer ul.footer-nav li a:hover{ /*font-weight: 700;*/}

.footer-credit{ margin: 0 auto; text-align: center; width: 100%;}
.footer-credit p{/*font-size: 12px;*/ text-align: center;}
.footer-credit a{ font-weight: 700;}

/**********FAMILY PACKET EXPAND/COLLAPSE STUDENTS*************/
.fp-student ul{ display: none;}
.fp-student.active ul{ display: block;}
.fp_expand{ position: absolute; right: 0px; top: 15px; cursor: pointer; padding: 0px 10px;z-index:9999;}
.fp_expand.active{ 
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}
div.student-completed::before{ content: ""; background: url(/oa/responsive/images/complete.png) no-repeat; background-size: 25px 25px; display: block; width: 25px; height: 25px; position: absolute; left: 20px;}
div.student-errors::before{ content: ""; background: url(/oa/responsive/images/warning.png) no-repeat; background-size: 26px 26px; display: block; width: 26px; height: 26px; position: absolute; left: 20px;}
#menu ul li a.form_completed_fp::before{ content: ""; background: url(/oa/responsive/images/complete.png) no-repeat; background-size: 25px 25px; display: block; width: 25px; height: 25px; position: absolute; left: 40px;}
#menu ul li a.form_errors_fp::before{ content: ""; background: url(/oa/responsive/images/warning.png) no-repeat; background-size: 26px 26px; display: block; width: 26px; height: 26px; position: absolute; left: 40px;}
div.student-info-fp {padding-left:60px;}
#menu ul li a.ln2-fp{ padding-left: 80px; display: block;}
#menu ul li a.ln2-fp_default{ padding-left: 80px; display: block; text-decoration:underline !important;}

/*****MEDIA QUERIES*****/
@media all and (max-width: 960px) {
	#page_container{width:100%;}
	#navigation.nav_loggedin ul li{ padding-left: 1%; padding-right: 1%;}
	#navigation.nav_loggedin ul li a{font-size: 12px;}
	#user_info{font-size: 12px;}
	#page_container::after{ display: none;}
}
@media all and (max-width: 850px) {
	#page_container{width:100%;}
	#navigation.nav_loggedin ul li{ padding-left: 0.75%; padding-right: 0.75%;}
	#navigation.nav_loggedin ul li a{font-size: 11px;}
	#user_info{font-size: 11px;}
	
	.wrapper{ width: 100% !important; max-width: 92% !important;}
}
@media all and (max-width: 818px) {
	#page_container{width:100%;}
	#navigation ul li{ padding-left: 1%; padding-right: 1%;}
	#navigation ul li a{font-size: 12px;}
}
@media all and (max-width: 767px) {
	#page_container{width:100%;}
	#navigation ul li{ padding-left: 0.5%; padding-right: 0.5%;}
	
	.page_content.inside_page table.spaced-tables > tbody > tr > td{width: 100% !important; display: block !important;}
	.page_content.inside_page tr.section-title td.headerbg{ width: calc(100% - 30px) !important;}
	/* .page_content.inside_page.full_width table.spaced-tables > tbody > tr > td{width: auto !important;} */
	.page_content.inside_page table.spaced-tables > tbody > tr > td.view_label{text-align:left !important;}
	.page_content.inside_page td.two-col-form{margin-left: 0px;}
	.page_content.inside_page td.pad-left {padding-top:15px;}
	.page_content.inside_page ul.formlist li.hh-subhead-mob {background-color:#e6e6e6;padding-left:15px !important; width: calc( 100% - 15px);}
	#oi-student-yes-no {display:block;}
	
	table.spaced-tables, table.spaced-tables tbody, table.spaced-tables tr, table.spaced-tables td{ display: block !important; width: 100% !important;}
	table.spaced-tables tr td.headermobile {text-align:left;font-weight:bold;background-color:#e6e6e6;margin-top:15px;}
}

@media all and (min-width: 738px) {
	#page_container{width:100%;}
	#navigation ul{display: block !important;}
	.left_menu_column{top:0px !important;}
}
@media all and (max-width: 737px) {
	#page_container{width:100%;}
	#navigation.nav_loggedin{width: 100%; text-align: center;}
	#user_info{display: none;}
	#navigation li.last-mobile-menu {display:block;}
	#navigation ul{display: none;}
	.toggleMenu{display: block; width: 100%; padding-top: 10px; padding-bottom: 10px; }
	#navigation ul li{ display: block; width: 100%; padding-left: 0px; padding-right: 0px; }
	#navigation.nav_loggedin ul li a{ font-size: 15px;}
}
@media all and (max-width: 640px) {
	#page_container{width:100%;}
	.wrapper{max-width: 92%;}
	.wrapper.application-page-wrapper{max-width: 100%;}
	#page_container.application-page{ width:100%;}
	
	.page_content.inside_page table{padding: 0px; margin: 0px;}
	input[type="password"],
	input[type="text"]
	{max-width: 70%;}
	
	.left-nav-button{display: block; z-index: 9990;}
	.left_menu_column{display:none;}
	.left_menu_column.open{display: block; width: 80%; margin-left: 46px; z-index: 9999; position: absolute;}
	.page_content.inside_page{width: 80%; margin-left: 46px;}
	.page_content.inside_page.full_width{margin:0; width:auto;}
	.page_content.inside_page table{padding: 0px;}
	.page_content.inside_page tr.section-title td{padding: 10px 0px;}
	.page_content.inside_page td{padding:0px;}
	
	#mobile-overlay.active{display: block;}
	
	a.copy-button{ display: block; padding-left: 0px; padding-top: 10px;}
	.page-buttons input[type=submit], .page-buttons input[type=button]{font-size: 12px;}
	
	#floating_header_left{ /*position: relative !important; top: auto !important; display: block !important;*/ width: 99%; margin-top: 35px; z-index: 9999;}
	
	.page-buttons input[type=submit], .page-buttons input[type=button]{ font-size: 12px; margin-right: 2px;}
	
	.g-recaptcha div, .g-recaptcha iframe{ width: 100% !important;} 
}

@media all and (max-width: 480px) {
	#page_container{width:100%;}
	#footer ul.footer-nav li{ width: 100%; text-align: center;}
}

@media all and (max-width: 380px) {
	#page_container{width:100%;}
	.page_content.inside_page select{ width: 100%; max-width: 70%;}
	.page_content.inside_page table{display:block; max-width: 100%;}
	tbody{display: block;width: 100%;}
	.page_content.inside_page tr{display:block;}
	.logo{display:block;}
	.banner-graphic{display:none;}
}

@media all and (max-width: 320px) {
	#page_container{width:100%;}
	.page_content.inside_page{width: 78%; margin-left: 46px;}
	.left_menu_column.open{display: block; width: 78%; margin-left: 46px;}
	.logo{display:block;}
	.banner-graphic{display:none;}
}