/* **********************************************************
   ___  _     _
  / _ \| |__ (_) ___    file: eomjmy.layout.css
 | | | | '_ \| |/ _ \   contents: layout containers and
 | |_| | | | | | (_) |  properties for eomjmy channel
  \___/|_| |_|_|\___/

	this should be for page layout, re-used container styles,
	and media queries for different layouts at breakpoints.

	colors and design attributes do not belong (see branding.css)
	also layouts of function-specific things like forms and
	buttons should be elsewhere (see controls.css)


 ********************************************************** */

/* ***** primary page containers ***** */
/* UX wants page body above the footer to be min 700px, so:
header:       82px
search bar:   50px
quick links: 205px
content:     400px ballpark it
;
.content
{
	min-height: 400px;
}


/* let's start with a layout class that determines the width of all our primary containers */
.layout{display: block;clear: both;width: 994px; margin: 0 auto;}

/* 508 (c) */
input:focus, input[type=text]:focus,input[type=password]:focus, select:focus {outline:1px solid blue;}

/* ***** box-sizing roundup
	instead of replicating the vendor prefixes for box-sizing everywhere, this is a
	roundup of elements with box-sizing applied. */
/* trying asterisk instead. IE7 seems to be choking on processing the selector list. */
*{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}

/* ***** page header ***** */
.page-header{position: relative;height: 80px; padding-top: 0; margin-top: 0;}
.channels_eomjmy_home .page-header{margin-top: 1px;}
.header-logo{position: absolute; margin-top: 10px; left: 0;top: 0;width: 64px;height: 72px;text-indent: -2000%;}
.header-utility{position: absolute;top: 20px;right: 0;height: 60px;margin-left: 74px;text-align: right;float: right;}
.header-login{display: inline;}
.header-social{position: absolute;right: 0;bottom: 0;}

/* ***** main navigation ***** */
.page-header .header-menu
{z-index: 15; /* needs to be above the login form on login.aspx */
	/* hate to add px width here, but if left to full width it overlaps utility buttons.
		if we add z-index to the header-utility container, it re-stacks the login dropdown to the
		relative z-index stack instead of absolute, and it ends up *below* the overlay. */
	width: 600px;
	margin-left: 100px;
	top: 30px;
	overflow: visible;
}

/* for all other page-header header-menu styles, see the seeker-menu/header-menu section below */

/* ***** utility navigation ***** */


/* ***** simple grid stuff ***** */
.half{display: block;float: left;width: 50%;}
.half.gutter{padding-right: 0.75em;}
.half.gutter:nth-child(2n+2){padding-right: 0;padding-left: 0.75em;}

th.half, td.half{display: table-cell;float: none;}

.full{width: 100%;}

table.full thead,
table.full tbody{width: 100%;}
.third, .box.third{width: 33%;margin-left: 1%;float: right;clear: none;}

.third.first,
.third:first-child{margin-left: 0;width: 32%;}
.twothirds{width: 65%;margin-left: 1%;float: left;clear: none;}
.twothirdsEdit{width: 66%;margin-left: 0;float: left;clear: none;}
.twothirds.first,.twothirds:first-child{margin-left: 0;width: 66%;}

.third.no-margin {margin-left: 0;width: 33%;}

.fifth {width:20%; float:left;}
.fourfifths {width:80%; float:left;}
.tenth {width:10%; float:left;}
.twotenths {width:20%; float:left;}
.fourtenths {width:40%; float:left;}


/* repetitive left/right layouts */

/*	visuals are built on a 14-column grid with an overall width of 994px.
		columns are 56px wide and gutters are 14px wide (with 15 total gutters)
		for those that like equations, that's ((14*56)+(15*14)) go ahead and copy/paste into Alfred. :)

		we have two primary two-column layouts in the comps:

		one with an 11-column/3-column split (e.g. Job Search Results), and
		another with a 10-column/4-column split (e.g. Career Profile landing)

		11-columns = (11*56)+(11*14) = 770
		3-columns = (3*56)+(4*14) = 224 (including the extra gutter between content and sidebar here)
		770 + 224 = 994
 	*/

/*.content.content-with-sidebar,
.sidebar{min-height: 600px;}*/
.content.content-with-sidebar {width: 770px;}
.content.content-with-sidebar,
.sidebarVarBar{/*min-height: 340px;*/display:inline-block;}

.content.content-with-sidebar{padding-right: 14px;border-right: 1px solid #ccc;}
/*.sidebar{position: absolute;top: 0;right: 0;width: 224px;padding: 0 0 0 14px;}*/
.sidebarVarBar{float:right;width: 220px !important;padding: 0 0 0 10px;}
.sidebarVarBar .moveBottom {position:absolute;right:0;bottom:20px;width:210px;}
.sidebarVarBar #avatarBirdSidebarListResumes {margin-bottom:15px;}
.sidebar .chuckPositionCenter {width:100%;text-align:center;margin-top:15px;margin-bottom: 30px;}
.contentThickWithSidebar {width:700px;float:left;}


/* ***** vertical rhythm *****
	here is where we establish a pattern of whitespace vertically between elements
	significant changes like header->content->footer should be larger, individual
	elements inside layout containers should be smaller. */

.page-header,
.search-bar-container,
.content,
fieldset,
h1 {margin-bottom: 10px;}

/*h1, h2, h3, h4, h5, h6, p, ul, ol, dl, table, dt */
select, input, label {margin-bottom: 0.588em;}
p, ul, ol, dl, h1, h2, h3, h4, h5, h6, dt, dd, table{/* this is an override from normalize.css */margin-top: 0;margin-bottom: 0.346em;}
dd{margin-left: 0;}

/* ***** box unit *****
	a re-usable 'box' for item layout, with a header and content area.
	default colors are here - should override in branding css. */
.box,
.BorderStyle,
.BorderStyle3{position: relative;
	/* this is 100% width because it's supposed to go into a sized container */width: 100%; margin-bottom: 1em; /* override these */background-color: #fff;border-color: #bbb;border-style: solid;border-width: 1px;}

/* layout of the header inside the box */
.box-header,
.ControlHeaderDiv,
.ResumeSectionDivider,
#MilInfoView .ControlBody {width: 100%; padding: 1px 5px 1px 5px;/* override these */color: #333;background-color: #eee;}
.box-header a{color: #333;}

.box-content,
.ControlBody{width: 100%; padding: 0.875em; /* override these */background-color: #fff;}

/* here's the .media variant of box - media on the left. */
.box.media{	/* apply the clearfix class .cf to this element! */}
.box.media .box-media{float: left; width: 206px;padding: 10px; margin: 15px; background-color: #eeeeee; height:100%;}
.box.media .box-content{float: left; width: 60%;}

.PadTable table td {vertical-align:top;}
.PadTable table label {padding-top:2px;}

/* full-bleed height and width for things that should span
	all the way to the box border. set your own padding inside! */
.box-content.bleed{padding-left: 0;padding-right: 0;padding-top: 0;padding-bottom: 0;}

/* tables will get bottom margin that screws everything up */
.box-content.bleed table{margin-bottom: 0;}

/* a full-bleed table with a thead row will look weird because
	the thead background and first row background will match */
.box-content.bleed table thead{background-color: #eee; border-color: #bbb;border-style: solid;border-width: 1px 0 1px 0;}
.box-content.bleed table thead:first-child{border-width: 0 0 1px 0;}

/* this is the 'solid' variant of box, seen in the sidebars and whatnot */
.box.solid{border: none;/* override these */background-color: #eee;}
.box.solid .box-header,
.box.solid .box-content{/* this way, if branding overrides background color for .box.solid, this picks it up */background-color: inherit;}

/* ***** search bar ***** */
.search-bar {position: relative;height: 50px;padding: 10px;}

/* ***** navigation ***** */
/* TODO: these strings of descendant selectors need to be simplified! */
.flyout-menu{position: relative;}
.flyout-menu a{display: block;width: 100%;}
.flyout-menu > ul > li > a{*width: 70px;}
.flyout-menu > ul > li > ul { padding: 0; border: 1px solid #b81f39; }
.flyout-menu ul{padding-left: 0;}
.flyout-menu li li{padding: 6px 14px;}
.flyout-menu ul ul{position: absolute;left: -2000em;margin-bottom: 0;padding: 1px 0 1px 10px;overflow: hidden;z-index: 2;*margin-top: 22px;*margin-left: -106px;}
.flyout-menu ul ul{margin-left: -1px;}
.flyout-menu ul ul{padding: 1px;}
.menu-subitems {display:inline-block;}
.flyout-menu ul ul ul{padding: 0;}
.flyout-menu ul ul li{padding: 0;}
.flyout-menu ul ul li h3,
.flyout-menu ul ul li a{padding: 4px 9px;}
.flyout-menu ul ul li h3{margin-bottom: 3px;}
.flyout-menu ul ul ul{position: relative;left: 0;padding-left: 0;margin-left: 0;}
.flyout-menu > ul > li.active > ul{left: auto;width: auto;}

/* override for header instance - a bit of left side anomaly */
.header-menu.flyout-menu > ul > li.active > ul{margin-left: 0;}
.seeker-menu > ul > li.active > ul{left: 100%;top: 0;width: 110%;}
.flyout-menu h2, .flyout-menu h3{margin-bottom: 0;}

/* this makes the first-level in the left nav links big like buttons */
.flyout-menu > ul > li > a, .flyout-menu .main-menu-item-link {display: inline-block;padding: 6px;}

/* this makes the 'regional' link in left nav a bit taller */
.seeker-menu > ul > li > a.last{height: 72px;}

/* some overrides for the header instance */
.showHorNavItem {display: none;}
.hideHorNavItem {display: block;}
.header-menu > ul > li{display: inline-block;*display: inline;margin-right: 15px;}
.header-menu li h2{display: inline;}
.header-menu li span{display: none;}
.header-menu li .showHorNavItem {display: block;}
.header-menu li .hideHorNavItem {display: none;}
.header-menu .regional{display: none;}


/* ***** content area ***** */
.content{position: relative;}
.article-header{margin: 0;}


/* ***** quick links ***** */
.quickLinks {padding: 10px 20px 10px 20px;/*height: 205px;*/white-space: nowrap;}

section.quickLinks {border-top: 1px solid #ccc;border-bottom: 1px solid #ccc; margin-top:30px;}
.quickLinks .quickLinkHeader, .quickLinks .quickLinkHeader {margin-top: 2px;}
.quickLinks .layout > div, .quickLinks.layout > div{display: inline-block;}
.quickLinks .layout > div.links, .quickLinks.layout div.links{width: 90%; margin-top: -3px;}
.quickLinks .layout > div.links a, .quickLinks.layout > div.links a {text-decoration: none;}
.quickLinks .layout > div.links li, .quickLinks.layout > div.links li {float:left; display:inline-block; padding-bottom: 10px;width: 30%;}
.quickLinks .quickLinks-social h4 {margin-right: 20px;}
.quickLinksSocial {z-index:1; position:relative;}

/* ***** career details page ***** */
.career-details .box ul{padding-left: 5px;list-style-type: none;}
.career-details .box ul ul{padding-left: 18px;list-style-type: circle;}
.career-details .box li{padding: 2px;border-top: 1px solid #eee;}
.career-details .box li li{border-top: none;}
.career-details .box li:first-child{border-top: none;}

/* ***** page footer ***** */
.home-footer hr{margin:0; padding: 0; color: #ccc;}

.page-footer{position: relative;padding:  30px 0; font-size: 11px; color: #565656; background-color: #f4f4f4;}
.page-footer .footer-nav {margin: 0 0 14px 0;}
.page-footer .footer-nav a {text-decoration: none;color: #565656;}
.page-footer .footer-nav a:hover {text-decoration: underline;}
.page-footer .footer-nav ul li{margin-left: 3px;padding-left: 5px;border-left: 1px solid #838383;}
.page-footer .footer-nav ul li:first-child{border-left: 0;}
.page-footer .partner-msg {padding: 14px 0 0 0;}
.page-footer .partner-msg img {position: relative;left: 2px;top: 1px;}

#socialMedia img{width: 20px;height: 20px;vertical-align: middle;}
#socialMedia img.qr-code {width: auto;height: auto;}


/* ***** new account page ***** */
.channels_eomjmy_account_newaccount .box ul{padding-left: 0;list-style-type: none;}
.channels_eomjmy_account_newaccount .box li{padding: 0.5em;}

/* ***** backpack page ***** */
.backpack .section-header,
.backpack .history .third,
.backpack .iep,
.backpack .docs{padding-top: 10px;padding-bottom: 10px;margin-bottom: 10px;}
.backpack .section-header{min-height: 80px;}
.backpack .history{padding-left: 10px;padding-right: 10px;}
.backpack .history .third{min-height: 190px;padding: 0 50px;}
.backpack .history h2{text-align: center;padding: 8px;}
.backpack .iep{min-height: 200px;overflow: hidden;padding-left: 10px;padding-right: 10px;background: #eee;}
.backpack .iep.show{height: 600px;}
.backpack .iep .iep-hide{display: none;}
.backpack .iep .show .iep-show{display: none;}
.backpack .iep .show .iep-hide{display: inline;}
.backpack .iep .progress{height: 30px;margin-bottom: 10px;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;background-color: #fff;overflow: hidden;}
.backpack .iep .progress .complete{height: 30px; /* match the height of the progress container, above */}
/* we have to adjust the normal third/twothirds widths because we need the 'progress bar'
	to line up with the borders above/below, and those containers have margins */
.backpack .iep .progress .complete.third{width: 33%;padding-left: 0;}
.backpack .iep .progress .complete.twothirds{width: 67%;padding-left: 0;}
.backpack .iep .third{min-height: 80px;}
.backpack .iep .third,
.backpack .docs .third{padding-left: 10px;}
.backpack .iep .third.first{padding-left: 0;}
.backpack .iep h3{padding: 8px 0 0;}
.backpack #drawer{position: relative;}
.backpack #drawer .third{padding-bottom: 30px;}
.backpack #drawer .third .button{position: absolute;bottom: 0;}
.backpack .resumes ul{padding-left: 20px;}
.backpack .docs{padding: 0 10px;}
.backpack .docs #docCount{padding-left: 68px;}
.backpack .docs #pnlDocList > div > a.icon-file{display: block;padding-left: 18px;margin-bottom: 8px;min-height: 20px;}

/* ***** resume rating summary page ***** */
.grade-letter{width: 30%;float: left;}
.grade-text{width: 70%;padding-left: 20px;padding-right: 180px;float: left;}
.grade-text{padding-top: 3em;}
.guidance-graph{float: left;width: 20%;}
.guidance-details{float: left;width: 80%;padding-left: 20px;}

/* you can adjust this to the content or implement
	javascript to equalize the heights, this is simpler */
.guidance-graph .box,
.guidance-details .box{min-height: 200px;}

/* overriding the .third class to eliminate padding/gutters between the boxes */
.guidance-details .box{margin-left: 0;border-left-width: 0;}
.guidance-details .box:first-child{border-left-width: 1px;}

/* ***** My Documents upload page ***** */
.upload-panel{padding: 20px;margin: 10px auto;}
.documents-panel-header{margin-top: 10px;padding: 4px 16px;}
.documents-panel{margin: 0 auto 10px;}
.documents-panel div{position: relative;padding: 6px 16px 6px 6px;line-height: 16px;vertical-align: middle;}
.documents-panel div .rmvbutton{position: absolute;right: 3px;}

/* ***** My Jobs page ***** */
.ControlBodyTableHeads th{padding: 4px 8px;}

.RepeaterItemRow td{padding: 8px;}
p.description{line-height: 20px; /* this evens out the Jobs and Apply tables */}
p.description select{margin-bottom: 0;}


/* ***** account edit ***** */
#account-edit .edit-link {float: right}

/* **** My Jobs Status modal */
#updateStatus{overflow: hidden;width:100% !important;}
#updateStatus iframe{width: 100%;height: 87%;}

.myjobs-status .txtNotes{width: 100%;height: 100px;}
.myjobs-status th{width: 68px;vertical-align: top;}
.myjobs-status .buttons {margin-left: 68px; /* match the above width */}

/* ***** Job Search stuff - see what is combined with MGS ***** */
#col1{width: 600;float: left;}
#col2{width: 340px;float: right;}

/* ***** placeholders ***** */
/* a 4:3 video */
.placeholder-120x90 {width: 120px;height: 90px;background: #aaa;}

/* a 16:9 video */
.placeholder-120x68{width: 120px;height: 68px;background: #aaa;}
.placeholder-120x89{width: 120px;height: 89px;}
.placeholder-100x76{background: gray;width: 100px;height: 76px;}
.placeholder-fullx100{background: gray;width: 100%;height: 100px;}

/* ***** debug ***** */

/*  remove/add a space between this asterisk and slash to toggle --> * /

a[href='#']
{
	color: lime !important;
	font-weight: bold !important;
}
/* */

.helpDisplay { z-index: 1000; position: absolute; }
.helpDisplay img { display:block; }
.helpDisplay a.button-large { display:block; width: 80px; float:right; }

.compareOccupations {padding: 20px;}
.compareOccupations table {width: 100%;}
.compareOccupations tr {border-bottom: 1px solid #DDDDDD;}
.compareOccupations tr:first-child {border-top: 2px solid;}
.compareOccupations td:first-child {font-weight: bold;}
.compareOccupations td {width: 33.3%;padding: 12px;}
.compareOccupations td:not(:last-child) {border-right: 1px solid #DDDDDD;}
.compareOccupations > h3 {margin-top: 35px;padding-left: 12px;}
.compareOccupations > h2 {background: none repeat scroll 0 0 #EEEEEE;margin-bottom: 0;padding: 10px 0 12px 10px;}
.compareOccupations .skillOverlap {border-top: 2px solid;padding: 10px 0 0 12px;}
.careersContainer .careersNote {
    margin-bottom: 20px;
}
.resumeButtonsAndNote > div {
    padding: 0 0 5px 10px;
}
.listResumesCtrl .privateResumesOnlyMessage {
    background-color: #FFFED9;
    border: 1px solid #FFFB00;
    margin-bottom: 10px;
    padding: 5px 15px;
    margin-top:15px;
}
.skillsYouNeed {
    margin-bottom: 10px;
}
#viewSampleResume { margin: 10px 0 20px;}
.resumeSidebar .innerContainer {width: 180px;}

#sampleCoverLettersHeading {
    margin-top: 22px;
}
#sampleFollowUpHeading {
    margin-top: 16px;
}
#followUpLettersGoButton, #coverLettersGoButton {
    float: right;
    margin: -4px 30px 0 0;
}
#myDocumentsSidebar {
    margin-top: 57px;
}
#coverLettersBody select {
    width: 180px;
}
.interestProfilerHeader
{
    padding: 6px 6px 0;
}

.WhiteBackground
{
    background-color: #FFF;
}


#listResumesButtonsBoxes {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

    #listResumesButtonsBoxes .resumeButtonsBox {
        background: none repeat scroll 0 0 #EEEEEE;
        display: inline-block;
        padding: 15px;
        width: 30%;
    }

#viewResumesFormat .resumeBox {
    background: none repeat scroll 0 0 #EEEEEE;
    display: inline-block;
    padding: 28px;
    width: 994px;
    height: 800px;
    min-height: 150px;
    margin-top: 20px;
}

#viewResumesFormat .resumeFrame {
    width: 100%;
    height: 95%;
    background-color: white;
}

#viewResumesSampleBoxes .resumeButtonsBox {
    background: none repeat scroll 0 0 #EEEEEE;
    display: inline-block;
    padding: 28px;
    width: 100%;
}

#viewResumesSampleCTA {
    display: inline-block;
    width: 100%;
    margin-top: 15px;
}

#listResumesButtonsBoxes .resumeButtonsBox > p {
    padding-bottom: 10px;
}

#uploadResume.resumeButtonsBox {
    left: 258px;
}
.inlineBlock {
    display: inline-block;
}
#resumesOrCircle > img { margin: 0 10px 23px; }
.resumesGrayBox { padding: 4px 14px; background: #EEEEEE; }

#resumesCount {margin: 5px 0 32px;}
.ResumeHeaderRow {padding: 4px 14px;}
.listResumesDataRow > td {padding: 4px 0 4px 15px;}

#noResumesHorizontalLine {margin: 4px 0 14px;}

tr.ControlHeaderDiv {font-weight: bold;}
tr.ControlHeaderDiv th {text-align:left;}
.bold { font-weight: bold; }


.resumeRatingGraphLeft { position: relative; 
                         background:  url(https://securemedia.applygovt.com/id/mgs/rating_graph_left.png) no-repeat 0 0; 
                         width: 138px; height: 146px; border: none;  cursor: pointer;display:block;font-size:0;line-height:0; }
.placeholder-gray-graph 
{
    position: absolute;
    background: rgba(123, 156, 144, 0.46);
    width: 70px;
    height: 59px;
    left: 50px;
    bottom: 46px; 
}
.ratingTipsSectionHeader 
{
    font-size: 12px; 
    font-weight:bold; 
}
.ratingTipsWrapper
{ 
    padding-top: 10px;
    padding-bottom: 10px;
}

.military-info-div {width:100%}
.military-info-div .military-info-left-col {width:190px; display: inline-block; vertical-align:top;}
.military-info-div .military-info-right-col {display: inline-block; vertical-align:top;}

#avatarBirdSidebarListResumesTop,
.avatarBirdSidebarListResumesTop {
    background: url("https://securemedia.applygovt.com/id/mgs/8836/box-avatar-top.png") no-repeat scroll 0 0 transparent;
    width: 210px;
    height: 31px;
}
#avatarBirdSidebarListResumesMain,
.avatarBirdSidebarListResumesMain {
    background: transparent url(https://securemedia.applygovt.com/id/mgs/6914/sidebar/static-note-content.png) repeat-y;
    width: 210px;
    /*height: 230px;*/
    padding: 0 23px 100px 23px;
}
#avatarBirdSidebarListResumesMain2,
.avatarBirdSidebarListResumesMain2 
{
    background: url("https://securemedia.applygovt.com/id/mgs/8836/box-avatar-main2.png") no-repeat scroll left bottom transparent;
    width: 210px;
    /*height: 230px;*/
    padding: 0 14px 100px 14px;
    position:relative;
}
#avatarBirdSidebarListResumesMain3,
.avatarBirdSidebarListResumesMain3 
{
    background: url("https://securemedia.applygovt.com/id/mgs/8836/box-avatar-main2.png") no-repeat scroll left bottom transparent;
    width: 210px;
    /*height: 230px;*/
    padding: 0 18px 80px 18px;
    position:relative;
}
#avatarBirdSidebarListResumesMain4,
.avatarBirdSidebarListResumesMain4 
{
    background: url("https://securemedia.applygovt.com/id/mgs/8836/box-avatar-main2.png") no-repeat scroll left bottom transparent;
    width: 210px;
    /*height: 230px;*/
    padding: 0 25px 80px 18px;
    position:relative;
}
.avatarBirdSidebarListResumesMain2  .chuckCapAndGown, .avatarBirdSidebarListResumesMain3  .chuckCapAndGown , .avatarBirdSidebarListResumesMain4  .chuckCapAndGown 
{
    position:absolute;
    right:5px;
    bottom:0;    
}

#avatarBirdSidebarRegionArticle
{
    background: url("https://securemedia.applygovt.com/id/mgs/8836/boxChuckNote.png") no-repeat scroll 0 -740px transparent;
    width: 210px;
    height: 230px;
    padding: 0 23px;
}
#workKeysPageButtons > table {
    display: inline-block;
}
#workKeysPageButtons > a {
    margin: 3px auto auto 10px;
    position: absolute;
    text-decoration: none;
}
#brightOutlookPopup .ui-dialog-titlebar-close {
    position: absolute;
    right: 5px;
    top: 5px;
}

.AccountEditLink {
padding-top: 4px;
text-align: right;
padding-right: 7px;
font-weight:normal; 
}
#saveToBackPack {
    margin-top: 18px;
}


.border-left {
	border-left: solid 1px #ccc;
}

.border-right {
	border-right: solid 1px #ccc;
}

.border-join-left {
	margin-left: -1px;
}

.container-padding-left {
	padding-left: 30px;
}

.container-padding-right {
	padding-right: 30px;
}

.container-padding-left-right {
	padding-left: 30px;
	padding-right: 30px;
}

.container-padding-top {
	padding-top: 15px;
}

.container-padding-top-10 {
	padding-top: 10px;
}

.container-padding-top-20 {
	padding-top: 20px;
}

.container-padding-top-25 {
	padding-top: 25px;
}

.container-padding-top-30 {
	padding-top: 30px;
}

.container-padding-bottom {
	padding-bottom: 15px;
}

.container-padding-bottom-20 {
	padding-bottom: 20px;
}

.container-padding-bottom-25 {
	padding-bottom: 25px;
}

.container-padding-bottom-30 {
	padding-bottom: 30px;
}

.vspacer {
	margin: 30px 0;
	height:1px;
	font-size:0;
	line-height:0;
	overflow:hidden;
}

.env-10 {padding:10px;}
.env-15 {padding:15px;}

.no-margin {margin:0;}

.col2 {width:600px;} 

.mh80 {min-height:80px}
.mh100 {min-height:100px}
.mh120 {min-height:120px}

.w25 {width:25px;} 
.w50 {width:50px;}
.w70 {width:70px;}
.w100 {width:100px;}
.w120 {width:120px;}
.w130 {width:130px;}
.w150 {width:150px;}
.w200 {width:200px;}
.w300 {width:300px;}
.w350 {width:350px;}
.w380 {width:380px;}
.w400 {width:400px;}
.w475 {width:475px;}
.w600 {width:600px;}
.w680 {width:680px;}

.w-1-from-2 {width:50%;}
.w-1-from-5 {width:20%;}
.w-2-from-5 {width:40%;}
.w-3-from-5 {width:60%;}
.w-4-from-5 {width:80%;}

.w-1-from-10 {width:10%;}
.w-9-from-20 {width:45%;}

.left-align {text-align:left;}
.right-align {text-align:right;}

.to-left-20 {left:-20px;}

.minimini {width:1px; height:1px; overflow:hidden; font-size:0px; line-height:0px;}

@media screen and (max-width:500px){
	.sidebar{position:relative; width:auto;}
}

.horizontal-line {border-top:1px solid #CCCCCC; line-height:0; font-size:0; overflow:hidden; height:1px;}

@media only screen and (max-width: 1024px) {
	#rootHomeFooterSection { display: inline-block; }
}

#rootHomeFooterSection footer.page-footer
{
    border-top: 1px solid #CCCCCC;
    margin-top: 15px;
}
.livechat
{
    width:-moz-max-content; 
    margin-top:3px; 
    margin-left:auto; 
    margin-right:auto; 
    display:inline-block;
}

/* ***** IGE STYLES***** */

.page-header2 {
    position: relative;
    height: 115px;
    min-width:320px;
    padding-top: 0px;
    background: url("https://securemedia.applygovt.com/id/mgs/6914/ige/body-background-top-banner2.png") no-repeat scroll center top transparent;
    border-bottom: 1px solid #CCCCCC; 
}

.page-header3 {
    position: relative;
    height: 115px;
    padding-top: 0px;
  
}

.TitleBarContainerNote {
    display:inline;
}

.TopBannerText {
    color: rgb(0, 0, 0);
    font-size: 13px;
    line-height: 5px;
    padding: 12px 0px 0px 0px;
    line-height: 15px;
}

.BannerTextTitle {
    font-size: 16px;
    font-weight:bold;
    padding:0 30px;
}

   
.BannerText {
    color: rgb(0, 0, 0);
    font-size: 13px;
    /*line-height: 2px;*/
    padding: 5px 30px 5px 30px;   
    width:60%;
}

.BannerTextButton {
    float:right; padding-right:10px;
}

.TitleBarText {
    background-color:#B81F39;
    padding-bottom:2px;
    font-size:11px;
    color:#ffffff;
    padding: 5px 22px 5px 30px;
}

.TitleBarContainer {
    margin:0 auto; 
    width:100%;
}

.ExitBanner {
    float:right; 
    padding-right:20px; 
    font-size:12px; 
    color:#ffffff; 
    text-decoration:none; 
    font-weight:bold;
}

.NotePadding {
    padding-left:22px; 
    font-size:11px; 
    color:#ffffff; 
    text-decoration:none; 
}

.IGEMainContainter {
    margin: 0 0 0 0px; 
    padding: 60px 0 0 15px;
}

.IGEbg { 
    position: relative; 
    width:994px;
    height: 510px;
    background: transparent  url("https://securemedia.applygovt.com/id/mgs/6914/ige/IGEbg.png") center top no-repeat !important;
    margin: 0 auto;    
}

.IGEbg { 
    position: relative; 
    width:994px;
    height: 510px;
    background: transparent  url("https://securemedia.applygovt.com/id/mgs/6914/ige/IGEbg.png") center top no-repeat !important;
    margin: 0 auto;    
}

.IGEbg2 { 
    position: relative; 
    width:994px;
    height: 510px;
    background: transparent  url("https://securemedia.applygovt.com/id/mgs/6914/ige/IGEbg4.png") center top no-repeat !important;
    margin: 0 auto;    
}

.IGEPageAvatar {
    position: absolute; 
    left: 695px; 
    top: 35px;
}

.IGEContent {
    padding: 0 40px 20px 20px; 
    width: 300px; 
    float: left; 
}

.IGERightContent  {
    padding: 0px 40px 150px 30px; 
    width: 430px; 
    float: left;
    border-left: 1px solid #ccc;
}

.igelist {  
    list-style: none;
    margin: 0;
    padding-left: 5px;
    font-size:14px;
}

.igelist li {  
    background-repeat: no-repeat;
    padding: 10px 0 10px 35px;
    text-decoration:none;
    background-position:left center;
}

li.ige1 {background-image: url(https://securemedia.applygovt.com/id/mgs/6914/ige/1.png); border-bottom:1px solid #ccc;}
li.ige2 {background-image: url(https://securemedia.applygovt.com/id/mgs/6914/ige/2.png); border-bottom:1px solid #ccc;}
li.ige3 {background-image: url(https://securemedia.applygovt.com/id/mgs/6914/ige/3.png); border-bottom:1px solid #ccc;}
li.ige4 {background-image: url(https://securemedia.applygovt.com/id/mgs/6914/ige/4.png); border-bottom:1px solid #ccc;}
li.ige5 {background-image: url(https://securemedia.applygovt.com/id/mgs/6914/ige/5.png); border-bottom:1px solid #ccc;}
li.ige6 {background-image: url(https://securemedia.applygovt.com/id/mgs/6914/ige/6.png); border-bottom:1px solid #ccc;}
li.ige7 {background-image: url(https://securemedia.applygovt.com/id/mgs/6914/ige/7.png);}

.igelanding {
    width:200px;
    float:left; 
    padding: 0px 25px 0px 0px; 
   
}

.igelandingMiddle {

    width:70%;
    float:left; 
    padding-left:85px;
    padding-top:100px; 
    font-size:15px;
}

.igeTitle {
    font-size:25px;

}

.igeMain {
    line-height:20px;
}

.hrIGE {

    height: 1px;
    border: 0; 
    border-top: 1px solid #ccc;
    float:right;
    width:160px;
}

.igeStrike {
    text-decoration: line-through;
}

.IGEtopMargin {
    margin-top:18px;
}

.IGEPage1Chuck {
    background-image: url(https://securemedia.applygovt.com/id/mgs/8836/Chuck_front.png);
    background-repeat: no-repeat;
    width: 204px;
    height: 349px;
    min-width: 204px;
    min-height: 349px;
}

.IGEChuck {
    background-image: url(https://securemedia.applygovt.com/id/mgs/8836/Guided_Experience_Two_GradChuck.png);
    background-repeat: no-repeat;
    width: 204px;
    height: 349px;
    min-width: 204px;
    min-height: 349px;
}

.livechat 
{
    width:-moz-max-content; margin-top:3px; margin-left:auto; margin-right:auto; display:inline-block;
}

.halfs-env {padding: 0px 0 64px 0;}

.inline-block {display:inline-block;}

#viewsRowCell {
    padding-left: 39px;
}
.listResumesCtrl .ResumeHeaderRow, .listResumesCtrl #resumesCount  {
    border-top: 1px solid #C0C0C0;
}
.listResumesCtrl .listResumesDataRow.first, .listResumesCtrl .listResumesDataRow.other{
    border-bottom: 1px solid #C0C0C0;
}
.ResumeHeaderRow.title {
    width: 287px;
}
.ResumeHeaderRow.rating {
    width: 93px;
}
.ResumeHeaderRow.status {
    width: 121px;
}
.ResumeHeaderRow.totalViews {
    width: 106px;
}

.resume-row-container {border:1px solid #ccc;padding:15px 15px;border-radius:3px;display:flex;flex-flow:row wrap;flex-direction:row;margin-top:20px;position:relative;}
.resume-cellContainer {font-size:11px;line-height:15px;color:#333;padding:15px;display:flex;flex-flow:column;align-content:center;}
.resume-cell-container.resume-flex-row {display:grid;justify-items:center;}
.resume-cell-container.resume-flex-row-container {flex-flow:row wrap;justify-content: flex-end;align-items:center;}
.resume-cell {text-align:right;display:inline-block;font-size:13px;margin-left:25px;cursor:pointer;}
.resume-heading {font-size:15px;color:black;margin-bottom:5px;text-transform:uppercase;line-height:22px;}
.resume-rating {font-size:20px;font-weight:bold;}
.lnk-rate {font-size:11px;font-weight:normal;}
.resume-right {text-align:right;}

.resumeWidth10 {width:10%;}
.resumeWidth35 {width:35%;}
.resumeWidth55 {width:55%;}

.customPopup {display:block;border:3px solid #ccc;border-radius:3px;width:300px;padding:15px;position:absolute;background:white;z-index:999;}
.customPopupHeader {border-bottom:2px solid #ccc;padding-bottom:10px;margin-bottom:15px;font-size:18px;}
.customPopupHeaderTitle .small {font-size:11px;}
.customPopupClose {position:absolute;right:15px;top:12px;font-size:19px;text-decoration:none;z-index:2}
.customPopupLoading {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: white;vertical-align: middle;padding-left: 15px;padding-top: 15px;display:none;z-index:1}
#customPopup.loading .customPopupLoading {display:block;}
.customPopupButtons {padding-top:10px;margin-top:15px;border-top:2px solid #ccc;}
a:hover.customPopupClose {text-decoration:none;}

.customPopupHiddenContent {display:none;}

.statusRadioBtns {margin-top:15px;}
.statusRadioChbxContainer {margin-top:5px;margin-left:21px;}
.statusRadioChbx {float:left;width:20px;}
.statusRadioChbxText {float:left;width: calc(100% - 25px);}
.statusRadioContainer {margin-top:0px;margin-left:0px;}
.statusRadio {float:left;width:20px;}
.statusRadioText {float:left;width: calc(100% - 25px);}
.resumeWhich {margin-top:5px;margin-left:17px;}
.statusCancelButton, .statusNextButton {width:49%;text-align:center;}
.statusCancelButton {float:left;}
.statusNextButton {float:right;}
.statusButtons {margin-top:25px;}
.chbxPlaceholder {margin:15px 0;}

/* Make Header Sticky */
#header_container {position:fixed; width:100%; z-index:100; }
#header{width:100%;  }

.linked-in {
    background-image: url("https://securemedia.applygovt.com/id/mgs/6914/linked-in.png");
    display: inline-block;
    height: 15px;
    width: 15px;
}
 
/* Account Edit Clean-Up */

.accountLeft {
    float: left;
    padding: 0 25px 0 0;
    width: 200px;
}

.accountRight {
    float: left;
    padding: 0 40px 150px 30px;
    width: 430px;
}

.companycol1{
    float: left;
    width: 40%;    
    padding: 10px 5px;  
}

.companycol2{
    float: left;
    width: 15%;
     padding: 10px 5px;    
}

.companycol3{
    float: left;
    width: 15%;
    padding: 10px 5px;    
}
.companycol4{
    float: left;
    width: 15%;
     padding: 10px 5px;   
}
.companycol5{
    float: left;
    width: 15%;
     padding: 10px 5px;
}

.companycol1j{
    float: left;
    width: 55%;
     padding: 10px 5px;
}

.companycol2j{
    float: left;
    width: 15%;
     padding: 10px 5px;
}

.companycol3j{
    float: left;
    width: 15%;
     padding: 10px 5px;
}

.companycol4j{
    float: left;
    width: 15%;
     padding: 10px 5px;
}

.companyrow1{
    overflow: hidden;  /* "overflow: auto;" works just as well instead */
    width:100%;        /* Helps older versions of IE */
    vertical-align: top;  
}

.companyrow2{
    overflow: hidden;  /* "overflow: auto;" works just as well instead */
    width:100%;        /* Helps older versions of IE */
    vertical-align: top;
}

.companylast{
    clear: left;
}

.company table{
    margin-bottom: 0.35em;
}

.otwJobTable{
    padding: 5px;
    text-align: left;
 }
 .greybg{
    background-color: #EEEEEE;
    height:40px;
    width:100%;
    padding: 3px;
}

.bottomborder{
    border-bottom:1px solid #EEEEEE;
    clear: left;
}

.backToEventsContainer {
    margin-top: 10px;
}

.workshopRegistrationNote {
    border-left: 2px solid #FF0000;
    margin: 10px 0;
    padding-left: 5px;
}

.occupationsbutton {font-size:13px; font-weight:bold}
.occupationscheckbox {width:20px; float:left; padding-top:2px;}
.occupationscheckbox2 {width:111px; float:left;}


.detailsEventMain .cancel-workshop-registration-button {
    margin-top: 25px;
}

.careerCoachIconBox {display: none;}

.budgetCalcContent #industry-search {
    margin-top: 30px;
}
.budgetCalcContent .occupationSearchContainer {
    width: 238px;
}
.saved-schools .programName {
    margin-left: 17px;
}
.saved-schools .savedSchoolLink {
    font-size: 14px;
}
.button-large.buttonBelowText {
    margin-top: 15px;
}
.box-content.saveBackpackResults {
    width: 200px;
}
.detailsEventMain .eventInPast {
    color: #808080;
    font-style: italic;
    margin-top: 26px;
}

.pointer {
    cursor: pointer;
}

.careerPlan.careerClusterResultsTable .resultsGraphColor {
    height: 10px;
    width: 125px;
}
.careerPlan.careerClusterResultsTable {
    font-size: 10px;
    text-align: left;
}
.linksStrip {
    margin-right: 23px;
}

.outOfScreen {
    position:absolute;
    left: -3000px;
}

.skipContent {
	position: absolute;
}

.skip {
	height: 1px;
	left: -10000px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.report-tab { list-style-type: none; margin: 0; padding: 0; }
.report-tab .header div { font-weight: bold; padding: 7px 14px; vertical-align: top; background-color: #eee; }
.report-tab li.td { border-top: dotted 1px #b4b2b2; padding-top: 14px; padding-bottom: 28px; padding-left: 14px; }
.report-tab .list-item-activity { width: 43%; float: left; }
.report-tab .list-item-note { width: 7%; text-align: center; float: left; }
.report-tab .list-item-status { width: 16%; min-width: 90px; float: left; }
.report-tab .list-item-date { width: 19%; min-width: 65px; float: left; }
.report-tab .list-item-edit { width: 7%; text-align: center; float: left; }
.report-tab .list-item-delete { width: 8%; text-align: center; float: left; }
.report-tab .status { margin-left: 10px; }
.clearfix-t:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.for-print-only { display: none; }

.icon-aligned-vert {
  display: inline-block;
  position: relative;
  top: 15px;
}

.userNotification a {text-decoration:underline !important;}
.ui-widget-content a {text-decoration: underline;}
.careersContainer .userNotification a {text-decoration:none !important;}


/* Guided tour partialy responsive */
@media only screen and (max-width: 1039px) {
    .BannerText { width: 100%; }
    .TitleBarText { padding: 5px 15px 5px 15px; }
    .BannerTextTitle { font-size: 16px; padding: 0 15px; }
    .BannerText { font-size: 13px; padding: 5px 15px 5px 15px; }
    #header_container {position:relative; }
    .page-header3 {height:0;}
    .page-header2 {height:auto;background:#E3ECF3;padding-bottom:5px;}
    .eomjmy #aspnetForm,
    .yomjmy #aspnetForm,
    .eomjmy #mgsForm,
    .yomjmy #mgsForm {display:inline-block;}
}

@media only screen and (max-width: 499px) {
    .TitleBarContainerNote {display:block;}
    .NotePadding {padding-left:0;}
    .ExitBanner {position:absolute;right:0;top:5px;}
    .TitleBarText {max-height:40px;}
}

@media only screen and (max-width: 499px) {
    .BannerTextTitle {font-size: 13px;}
}



/* Create Account Password Validation */

.passval {
    background-color: #fcf8e3;
    border: 1px solid #faebcc;
    color: #8a6d3b;
    padding:10px;
    margin-bottom:10px;
    display:none;
}

.passval ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.passgreen {
    background-color:#dff0d8;
    border:1px solid #d6e9c6;
} 

.passred {
    background-color:#f2dede;
    border:1px solid #ebccd1;
}

.checkSign {
    float:left;width:20px;color:green;
}

#passwordValidationContainer {
    margin-left:0;
    float:left;
    width:100%;
}


/* Everything except FireFox */
#veteranMsg {
    margin-top: 880px;
}
/* FireFox only */
@-moz-document url-prefix() {
    #veteranMsg {
        margin-top: 920px;
    }
}
#pwdErrorLabel { position:relative; background-color: #D65252; color: whitesmoke; padding: 5px; }

.fileUpload{
    width:240px;
}

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



/* Seeker Landing Page */

.seekerLandingUl {padding-left:8px;list-style-type:none;}

.seekerLandingUl li:before {
  content: '-';
  position: absolute;
  margin-left: -8px;
}