﻿/* 
    This stylesheet is intended for use as the generic
    layout of the site. For more specific presentation
    changes, such as colors, refer to the 
    MilitaryFriendlySchools.css file 
*/
.printerOnly {
    display: none;
}
html, body { margin: 0; padding: 0; }
.h6 {
    padding: 2px;
    margin: 0;
    height: 20px;
}
.everything {
    width: 1014px;
    padding: 0; margin: 0 auto;
}
.andAnAd {
    width: 1200px;
}
.containerMain { 

    width: 996px;
    /*width: 1166px;*/
    background-image: url('/images/content_box_middle2011.jpg');
    background-repeat: repeat-y;
    background-position: center;
    padding: 0px 9px;
    margin: 0;
    display: inline-block;
}
.containerContent, .containerAds, .containerHeader {
    width: 964px;
    margin: 0 auto;
}

.containerAds {
    height: 152px;
}
.containerMainEndShadow {

    background-image: url('/images/content_box_bottom2011.jpg');
    background-position: top center;
    background-repeat: no-repeat;
  
    min-height: 16px;
    height: 16px;
    width: 996px;
    padding: 0px 9px;
    display: inline-block;
    margin: 0;
  
}
.sectionNavigation {
    vertical-align: top; 
    width: 180px; 
    display: inline-block;
}
.sectionCenter {   
    vertical-align: top; 
    height: 100%; 
    min-height: 100%;
    display: inline-block;
    width: 470px;
}
.sectionArticle {
    display: inline-block;
    vertical-align: top;
    width: 760px;
}
.sectionArticleContent {
    margin-left: 60px;
    height: 100%;
    padding: 10px;
}
.sectionVideo {
    vertical-align: top; 
    width: 280px;
    display: inline-block;
}

.formLabel {
    width: 100px;
    display: inline-block;
}
.formInput {
    display: inline;
}
.formInput input {
    width: 200px;
    clear: right;
}
.formInput  input.formSmall {
    width: 145px;
    clear: right;
}
.formInput textarea {
    width: 300px;
}
.formRequired {
    background-image: url('/images/required-field.png');
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 10px;
}
.formSection {
    padding: 2px;
}
.formSection input {
    border-width: 1px;
    border-style: solid;
    border-color: #CACACA;
}
.formError {
    padding-left: 10px;
    color: #f00;
}

/* Adverts */
.ad {
    float: left;
    border-width: 1px;
    border-style: solid;
    height: 152px;
}
.ad200 {
    width: 208px;
}
.ad234 {
    width: 242px;
}
.adHack {
    width: 458px;
}
.adInner {
    padding: 4px;
    height: 124px;
}
.adTitle {
    padding: 2px;
    height: 16px;
}

/* Header */
.containerHeader { 
    height: 80px; 
    position: relative; /* children to be positioned relative to this div */
}
.containerHeader .socialNetworks {
    position: absolute;
    top: 2px;
    right: 0;
    height: 24px;
}
.containerHeader .imageGroupLabel {
    line-height: 20px;
    margin: 0; 
    padding: 0 10px 0 0;
    float: left;
    font-size: 8pt;
}
.containerHeader .searchBar {
    position: absolute;
    top: 30px;
    right: 0;
}

/* Footer */
.containerFooter {
    text-align: center;
}
.footerImages img {
    padding: 20px;
}
.footerLinks a, .footerLinks span {
    padding: 0px 6px;
}

/* Navigation */
.navigation .login {
    padding: 10px;
    border-width: 1px;
    border-style: solid;
}
.navigation .login input {
    width: 148px;
}
.navigation .login .modalPopup input {
    width: 20px;
}
.modalPopup p {
    text-align: left;
    display: inline-block;
}
.navigation .login p {
    margin: 4px 0;
}
.navigation .links ul {
    padding: 0;
    margin: 0;
}
.navigation .links ul li {
    height: 36px;
    overflow: hidden;
}
.navigation .links ul li.navLarge {
    height: 78px;
}

.ui-accordion-content {
    padding: 10px;
}
.accordionHeader:hover {
    cursor: pointer;
}
.accordionHeader {
    padding: 5px 0px;
    /*padding: 5px 0px 5px 20px;
    background-position: left;
    background-repeat:no-repeat;
    background-image: url('/images/bullet_arrow_right.png');*/
}

.ui-icon-triangle-1-e {
    background-image: url('/images/bullet_arrow_right.png');
    background-position: left;
    background-repeat:no-repeat;
    width: 20px; height: 20px;
    float: left;
}
.ui-icon-triangle-1-s {
    background-image: url('/images/bullet_arrow_down.png');
    background-position: left;
    background-repeat:no-repeat;
    width: 20px; height: 20px;
    float: left;
}

#resourceHeading {
    border-bottom: solid 1px #9F2226;
    padding-left: 20px;
    padding-bottom: 5px;
}
ul.resources li {
    margin: 10px 0px 0px 0px;
    padding-bottom: 10px;
    border-bottom: solid 1px #CACACA;
}
ul.resources li.noBorder {
    border: none;
}
ul.resources {
    padding-left: 20px;
    padding-right: 10px;
}


/* ESO Locator */
.esoAddress, .esoContact {
    float: left;
    width: 300px;
}
.esoName {}


.marginR { margin-right: 8px; }
.marginL { margin-left: 8px; }
.marginT { margin-top: 8px; }
.marginB { margin-bottom: 8px; }

.marginRx2 { margin-right: 16px; }
.marginLx2 { margin-left: 16px; }
.marginTx2 { margin-top: 16px; }
.marginBx2 { margin-bottom: 16px; }





.whitetext { font-family: Arial; font-size: 11pt; color: white; font-weight: bold; }

/* General Classes */
.absolute		{ position: absolute; }
.alignCenter	{ text-align: center; }
.alignLeft		{ text-align: left; }
.alignRight		{ text-align: right; }
.block			{ display: block; }
.bold			{ font-weight: bold; }
.border0		{ border: none; }
.clearBoth		{ clear: both; }
.cursorDefault	{ cursor: default; }
.cursorPointer	{ cursor: pointer; }
.floatLeft		{ float: left; }
.floatRight		{ float: right; }
.font12			{ font-size: 12pt; }
.inline			{ display: inline; }
.left0			{ left: 0px; }
.nodisplay		{ display: none; }
.red            { color: #ED1C29; }
.regular		{ font-weight: normal; }
.relative		{ position: relative; }
.right0			{ right: 0px; }
.valignTop      { vertical-align: top; }
.watermark		{ color: #666; font-weight: normal; }

/*a:link { color: #999999; text-decoration: none; }
a:visited { color: #999999; text-decoration: none; }
a:hover, a:active { color: #6281ab; text-decoration: underline; }
a img { border: none; }
*/
/* Color Classes */
.green { color: #0f0; }
.red { color: #A02225; }

.surveyBG { background: #949378; }

/* Notification Classes */
.error 
{ 
	background: #fff url(../../images/exclamation.png) no-repeat 3px 3px; 
	border: solid 1px #F00; 
	color: #F00; 
	font-weight: bold;
	padding: 3px 3px 3px 27px; 
}
.alert 
{ 
	background: #fff url(../../images/error.png) no-repeat 3px 3px; 
	border: solid 1px #ED1C29; 
	color: #ED1C29; 
	padding: 3px 3px 3px 27px; 
}


/* Cart Styles */
.cartItem { margin: 0 0 10px 0; }
.CartButton { cursor: pointer; }


/* Contact Styles */
.contactitem { float: left; height: 200px; margin: 0 10px 10px 0; width: 250px; }

/* FAQ */
#faq h2 { margin-top: 0; }
#faq ol { font-weight: bold; }
#faq ul>li { margin: 0 0 10px 0; }
#faq ol ul { font-weight: normal; }

/* Modal Popup Style */
.popup
{
    background-color: #fff;
    padding: 8px;
    border: solid 1px #ccc;
    color: #000;
}
/* Popup Extender Style */
.popupcal
{
    background-color: #fff;
    border: solid 1px #fff;
    visibility: hidden;
    
}
/* popup calendar extender style */
.popup_calendar .ajax__calendar_container 
{
    z-index: 10001;
    background-color: #fff;
    border: solid 1px #ccc;
}
.modalBackground 
{
    background-color: Gray;     
    filter: alpha(opacity=50);     
    opacity: 0.50; 
}  
.updateProgress 
{     
    border-width: 1px;     
    border-style: solid;     
    background-color: #FFFFFF;     
    position: absolute;     
    width: 180px;     
    height: 65px; 
} 

/* Progress Control */
.progressBoxFull { background: #A02225; border-bottom: solid 1px #A02225; border-top: solid 1px #A02225; float: left;  width: 50px; }
.progressBoxEmpty { background: #fff; border-bottom: solid 1px #A02225; border-top: solid 1px #A02225; float: left; width: 50px; }
.progressBoxLeft { border-left: solid 1px #A02225; }
.progressBoxRight { border-right: solid 1px #A02225; margin: 0 6px 0 0; }

/* survey.master */
/*body { background: #fff url(../../images/survey/background.jpg); }*/
body {
    /*margin: 0px auto; 
    width: 1014px; */
    font-family: Arial; 
    font-size: 10pt;
}
#site { margin: 0 auto; width: 962px; }
#siteHeader { height: 68px; width: 962px; }
#siteBody { float: left; }
#surveyBoxTop { background: url(../../images/survey/content_box_top.jpg) no-repeat; height: 10px; line-height: 10px; width: 962px; }
#surveyBoxMiddle { background: url(../../images/survey/content_box_middle.jpg) repeat-y; padding: 4px 15px; width: 932px; }
#surveyBoxBottom { background: url(../../images/survey/content_box_bottom.jpg) no-repeat; height: 10px; line-height: 10px; width: 962px; }
.testimonials { background: #fff; border: solid 1px #999; float: left; font-size: 8pt; height: 110px; margin: 10px 10px 10px 0; padding: 10px; width: 708px; }
.testimonials div { float: left; }
.testimonials div img { float: left; height: 94px; margin: 0 10px 0 0; width: 68px; }
.testimonials div div { float: left; height: 94px; margin: 0 8px 0 0; width: 268px; }
.testimonials div p { height: 76px; margin: 0 0 10px 0; }
.testimonials div p.attribution { color: #999; height:26px; margin: 0; }
ul#siteNav { float: left; margin: 10px 0; padding: 0; width: 200px; }
ul#siteNav  li { list-style-type: none; }
ul#siteNav  li a { background: #fff; border: solid 1px #999; color: #e9172b; display: block; font-weight: bold; padding: 13px 10px; width: 200px; }
#siteFooter { background: url(../../images/survey/footer.jpg); clear: both; color: #fff; height: 23px; margin: 10px 0 0 0; padding: 10px 10px 0 10px; text-align: center; width: 942px; }
#siteFooter a { color: #fff; text-decoration: underline; }

#VerifyAnswersBox { border: solid 2px #f00; padding: 5px; }

/* surveylogin.aspx */
#loginFrame { background: url(../../images/survey/main_image.jpg) no-repeat; color: #fff; height: 276px; width: 962px; }
#loginBox { background: transparent; height: 266px; margin: 5px 0 0 558px; padding: 40px 0 0 0; width: 400px; }
#loginWelcome { font-size: 12pt; margin: 14px 0 0 0; text-align: center; }
.loginLabel { display: block; padding: 10px 0 0 130px; }


/* ToolTip */
.tipAnchor { display: inline; position: relative; }
.tipAnchor img { vertical-align: bottom; }
.tipAnchor div { background: #fff; border: solid 1px #000; display: none; padding: 3px; position: absolute; right: 0px; top: 15px; width: 400px; z-index: 8000; }

.tipAnchorBig { display: inline; position: relative; }
.tipAnchorBig img { vertical-align: bottom; }
.tipAnchorBig div { background: #fff; border: solid 1px #000; display: none; left: -100px; padding: 3px; position: absolute; top: 15px; width: 700px; z-index: 8000; }

.tipHovering div { display: block; }


/* Invoice Styles */
#invoiceBody { margin: 0 auto; min-height: 600px; position: relative; width: 640px; }
#headerLogo { height: 67px; left: 0; position: absolute; top: 0; width: 450px; }
#paidStamp { height: 75px; left: 100px; position: absolute; top: 290px; width: 200px; z-index: 10; }
.invoiceHeader { font-size: 14pt; font-weight: bold; }
#invoiceTop { position: absolute; right: 0; text-align: right; top: 0; }
#invoiceTop table { border: solid 1px #000; }
#invoiceTop table td { padding: 4px 8px; text-align: center; }

#invoiceBillToHeader{ border: solid 1px #000; left: 50px; margin: 0 0 4px 0; padding: 4px; position: absolute; text-align: center; top: 150px; width: 300px; }
#invoiceBillToData { border-left: solid 1px #000; border-right: solid 1px #000; border-bottom: solid 1px #000; height: 100px;
                     left: 50px; padding: 6px; position: absolute; top: 176px; width: 296px; }
#invoicePayToHeader { border: solid 1px #000; margin: 0 0 4px 0; padding: 4px; position: absolute; right: 0; text-align: center; top: 150px; width: 150px; }
#invoicePayToData { border-left: solid 1px #000; border-right: solid 1px #000; border-bottom: solid 1px #000; height: 100px;
                    padding: 6px; position: absolute; right: 0px; top: 176px; width: 146px; }

#invoiceDueDateHeader { border: solid 1px #000; padding: 4px; position: absolute; right: 129px; text-align: center; top: 305px; width: 120px; }
#invoiceDueDate { border-left: solid 1px #000; border-right: solid 1px #000;
                   height: 20px; padding: 4px; position: absolute; right: 129px; text-align: center; top: 331px; width: 120px; }

#invoiceSalesRepHeader { border-top: solid 1px #000; border-right: solid 1px #000; border-bottom: solid 1px #000; 
						padding: 4px; position: absolute; right: 0; text-align: center; top: 305px; width: 120px; }
#invoiceSalesRep { border-right: solid 1px #000; padding: 4px; height: 20px; position: absolute; right: 0; text-align: center; top: 331px; width: 120px; }

#invoiceItemTableContainer { left: 0; position: absolute; top: 359px; }
#invoiceItemTable { }
#invoiceItemTableHeaderLeft { border: solid 1px #000; padding: 4px 0; text-align: center; width: 150px; }
#invoiceItemTableHeaderMiddle { border-top: solid 1px #000; border-bottom: solid 1px #000; 
                                padding: 4px 0; text-align: center; width: 347px; }
#invoiceItemTableHeaderRight { border: solid 1px #000; padding: 4px 0; text-align: center; width: 140px; }

.invoiceItemTableLeft { border-left: solid 1px #000; padding: 0 4px 8px 4px; }
.invoiceItemTableMiddle { border-left: solid 1px #000; border-right: solid 1px #000; padding: 0 4px 8px 4px; }
.invoiceItemTableRight { border-right: solid 1px #000; padding: 0 4px 8px 4px; text-align: right; }

#invoiceThankYouNote { border: solid 1px #000; float: left; height: 30px; padding: 4px; width: 391px; }
#invoiceTotalBox { border-top: solid 1px #000; border-right: solid 1px #000; border-bottom: solid 1px #000;
                   float: left; height: 30px; padding: 4px; width: 230px; }
#invoiceTotalLabel { float: left; font-weight: bold; text-align: left; width: 120px; }
#invoiceTotalAmount { float: right; font-weight: bold; text-align: right; width: 100px;}






/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}




/** Articles **/

div.article p {
    margin: 0 0 1em 0;
}
div.article h1 {
    margin: 0;
}
div.article h2 {
    margin: 0;
}
div.article h3 {
    margin: 0;
}
div.article h4 {
    margin: 0;
}


div.article .checklist {
    list-style-type: none;
}
div.article .checklist li {
}

div.article ol.letteredlist {
    list-style-type: lower-alpha;
}
/*div.article .checklist input {
}
div.article .checklist label {
    display: inline-block;
    padding-left: 30px;
    top: -18px;
    min-height: 36px;
    position: relative;
    
}*/
div.article ul.checklist div {
    width: 12px;
    height: 12px;
    border: solid 1px black;
    display: inline-block;
    margin-right: 4px; 
}
div.article .imgleft {
    float: left;
    margin: 0px 10px 10px 0px;
}
div.article .imgright {
    float: right;
/*    margin: 0px 0px 10px 20px; */
}

.studentPhoto { 
    width:200px;
    background-color: #F9F9F9;
    border: 1px solid #CCCCCC; padding: 3px;
    font: 11px/1.4em Arial, sans-serif; 
    }
.studentPhoto img { vertical-align:middle; margin-bottom: 3px; }
.studentPhotoLeft {margin: 0.5em 0.8em 0.5em 0; float:left; }
.studentPhotoRight { margin: 0.5em 0pt 0.5em 0.8em; float:right; }

.stepcarousel{
    position: relative; /*leave this value alone*/
    border-width: 9px 10px;
    overflow: hidden; /*leave this value alone*/
    width: 615px; /*Width of Carousel Viewer itself*/
    height: 120px; /*Height should enough to fit largest content's height*/
    font-size: 10px;
}

.stepcarousel .belt{
    position: absolute; /*leave this value alone*/
    left: 0;
    top: 0;
    
}

.stepcarousel img {
    padding-bottom: 5px;
}

.stepcarousel .panel{
    float: left; /*leave this value alone*/
    overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
    margin: 5px 5px; /*margin around each panel*/
    width: 110px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
    height: 120px;
}
.stepcarousel .panel a:hover {
    text-decoration: none;
}

.slidenav:hover {
    cursor: pointer;
}

.toc {
    margin: 4px;
    padding: 4px;
    margin-left: 20px;
    height: 40px;
    position: relative;
}
.toc .seperator {
    
    display: inline;
    background-color: #152F51;
    width: 1px;
    height: 100%;
    
    overflow: hidden;

}
.toc a {
    background-image: url('/js/opencircle.png');
    background-position: top center;
    background-repeat: no-repeat;
    height: 50px;
    min-height: 50px;
    position: relative;
    top: 8px;
    padding: 12px 8px 0px 8px;
}
.toc a:hover {
    background-image: url('/js/graycircle.png');
    
}
.toc .l {
    border-left: 1px solid #152F51;
}
.toc .r {
    border-right: 1px solid #152F51;
}
.panelGrouping {
    color: #9F2226; 
    font-weight: bold; 
    padding: 0 7px 0 7px;
}
