@-ms-viewport {width: device-width;}
 @-o-viewport {width: device-width;}
    @viewport {width: device-width;}

html {
       overflow-y: scroll; /* vertical scrollbar */
       -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
          -moz-text-size-adjust: 100%;
           -ms-text-size-adjust: 100%;
}
    
/* No media queries for old IE */
.lt-ie9 body { padding-left: 20px; padding-right: 20px; min-width: 920px;}

/*
 * 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;
}

.td {display: table-cell;}

/* un-Normalize */
dl {margin-top: 0;}

/* clearfix */
.group:before, .group:after {content: " ";display: table;}
.group:after {clear: both;}
.lt-ie8 .group {zoom: 1;} /* hasLayout */

.nobr 
{
    overflow: hidden; 
    text-overflow: ellipsis;
    white-space: nowrap;
}
.noselect 
{
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
         -o-user-select: none;
            user-select: none;
}

img {max-width: 100%;}
.ie8 img { width: auto;} /* necessary to prevent max-width: 100% from breaking images in IE8 */
#RotatorContainer img {max-width: none;} /* TODO: see about this */

a.roundedLink 
{
    display: inline-block;
    text-decoration: none;
    background: #ddd;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    padding: 0 .5em;
    color: black; /* overridden by anchor color settings */
    border: thin solid #12559c;
} 

a.roundedLink:hover { background-color: white;}

.caret-right 
{
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-left: 10px solid #8C8D96;
    display: inline-block;
    height: 0;
    width: 0;
}

.caret-down 
{
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #8C8D96;
    display: inline-block;
    height: 0;
    width: 0;
}

h1 {margin-top: 0;}
h1 {padding-top: .5em; font-size: 1.7142857em;} /* 24px */
h2 {font-size: 1.42857em;} /* 20px */

@font-face {

    font-family: 'arial-black';
    src: local('Arial Black');
} /* Workaround for Firefox */ /* TODO: Is this still needed? */

/* Chrome-only unable to display Arial Black */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { #headerTitle, #headerTitleSub { font-family: Tahoma, sans-serif !important;} #headerTitle { bottom: .85em !important;} }

.no-js, .lt-ie9, .lt-ie8, .lt-ie7 {} /* TODO: Remove this */
.homepageInformationSharingNews {display: none;} /* TODO: Remove this when no longer needed */
.legacyDisplayNone {display: none;} /* TODO: Remove this when no longer needed */
/* TODO: -ms-interpolation-mode: bicubic !important; */
.lt-ie8 img { -ms-interpolation-mode: bicubic !important; } /* TODO: Already in normalize.css */
/* TODO: */
/*
.button a {
			background-image: url(tweet-icon.png);
			background-repeat: no-repeat;
			background-position: right center;			
		}

		@media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {

			.button.hires a{
			  background-image: url(tweet-icon@x2.png);
	 		  background-size: 32px 32px; 
			}
			
		}
		*/

html 
{
    font-size: 100%; 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%;
    /* 
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: antialiased;
    */ 
    
    color: #383943;
    font-family: Arial, Helvetica, sans-serif;
}

body 
{
    margin: 0;
    padding: 0.5em 1em;
    font-size: 0.875em; /* 14px */
    line-height: 1.5;
    background-color: #3f587d;
}
body.smallerfont {font-size: .75em;}
body.largerfont {font-size: 1em;}

form 
{
    max-width: 1400px; margin: .5em auto;
    position: relative;
    overflow: hidden; /* TODO: change this */
}

.roundedTop 
{
    -webkit-border-radius:  5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

.lt-ie9 .roundedTop
{
    border-radius: 5px 5px 0 0;
    behavior: url(PIE.htc);
}

.roundedBottom 
{
    -webkit-border-radius:  0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

.lt-ie9 .roundedBottom
{
    border-radius: 0 0 5px 5px;
    behavior: url(PIE.htc);
}

.rounded5px
{
    -webkit-border-radius:  5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}
.lt-ie9 .rounded5px
{
    border-radius: 5px 5px 5px 5px;
    behavior: url(PIE.htc);
}

/*
 *  LINKS
*/
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active
{
	color: #12559c;
}

.nu a,
.nu a:link,
.nu a:visited,
.nu a:hover,
.nu a:focus,
.nu a:active
{
	text-decoration: none;
}

img {border : 0; outline : none;}

/*
 *
 * HEADER
 *
 */
 
#header {position: relative; z-index:100; /* for nav drop shadow */}

/* SEARCH PANEL */
#navAndSearch {position: relative;}
#searchLabel {display: none;} /* TODO: fix this */
#SearchPanel 
{
    width: 18.5%; /* same as "right" */
    min-width: 9.5em;
    height: 1.3em; /* used for v. centering */
    position: absolute;
    right: 0; top: 50%;
    font-size: 1.142857em;
}
#tbSearchPanel { /* THIS IS THE SEARCH INPUT */
    -webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box; 
    width: 100%;
    top: -.8em;
    right: 0;
    position: absolute;
}
#imgbtnSearchPanel 
{ /* THIS IS THE IMAGE SUBMIT BUTTON */
    height: 16px; /* Don't set the height? */
    position: absolute;
    top: -.5em;
    right: 5px;
    display: block;
    margin:0; padding: 0; border: 0 none;
}


/* SEAL AND TITLE */
#SealAndTitle 
{
    position: relative;
    min-height: 63px;
    display: table;
}
    
#headerSeal {display: block; width: 63px; height: 63px; overflow: hidden;}

#headerTitle, #headerTitleSub
{
    color: white;
    font-weight: 900; /* prevent italics in Chrome, Opera, IE9 due to faulty font on some systems */
    font-family: HelveticaNeue-CondensedBlack, "Arial Black", Arial, sans-serif;
    display: block;
    /* text-rendering: optimizeLegibility;*/
} /* TODO: Sub an image for ltIE9 */

#headerTitle 
{
    font-size: 1.7142857em; /* 24px */
    line-height: .95;
    margin-bottom: .15em;
}

#headerTitleSub 
{
    font-size: 0.857142857em;  /* 12px */
    letter-spacing: 1px; font-family: Arial, sans-serif; font-weight: 700;
    line-height: 1.1;
}

ul#MainNavigationList a,
h2 a,
h3 a
{
    text-decoration: none;
}

/*
 *
 * Main Navigation 
 * 
 */

ul#MainNavigationList
{
    width: 80%; /* default */
    font-size: 1.142857em; /* 16px */
    line-height: 1.1;
    font-weight: bold;
    white-space: nowrap;
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    /* background-repeat: repeat-x;
    background-image: url('../images/navigation/mainNavigationBackground.gif');
    background-position: center center; */
    box-shadow: 0 8px 10px -10px black;
}

ul#MainNavigationList li 
{
    display: inline-block;
    float: left;
    position: relative; /* allow correct stacking order for sibling li elements */
}

ul#MainNavigationList li a 
{
    /* float: left;  */ /* Why is this floated? It allows the full hover action but also lets the items wrap. */
    /* padding: 0em 1.25em; */
    background-color: #efefef;
    border-left: solid 1px #ccc;
    white-space: normal;
    display: -moz-inline-box;
    display: inline-block;
    width: 100%;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;
    text-align: center;
    vertical-align: middle;
    letter-spacing: .02em;
    text-rendering: optimizeLegibility;
    padding: 4px 0;
}
    
ul#MainNavigationList li:last-child a {border-radius: 0 5px 0 0;}
ul#MainNavigationList li:first-child a {border-left: none; border-radius: 5px 0 0 0;}

ul#MainNavigationList li a.singleLine { position: relative; }
ul#MainNavigationList li a.singleLine span { position: relative;top: .5em;}


ul#MainNavigationList li a:hover 
{
    color: #fff; 
    background-color: #383943;
    background-image: none;
}

ul#MainNavigationList li a.current 
{
    color: #fff; 
    background-color: #999;
    background-image: url('../../../../images/navigation/mainNavigationBackgroundCurrent.gif');
    background-repeat: repeat-x;
}
    
ul#MainNavigationList li a.bookmarkPage:hover
{
    color: #12559C; 
    background-color: Transparent;
}
    
/* li#NavGlobal {width: 11.88475%;}
li#NavGIST {width: 22.92917%;}
li#NavNI {width: 14.28571%;}
li#NavPCL {width: 18.24729%;}
li#NavPP {width: 12.96518%;}
li#NavIA {width: 19.687875%;} */

/* http://www.palantir.net/blog/responsive-design-s-dirty-little-secret */
li#NavHome {width: 9.01%; margin-right: -100%; }
li#NavGlobal {width: 11.01%; margin-right: -100%; margin-left: 9%;}
li#NavGIST {width: 26.01%; margin-right: -100%; margin-left: 20%; }
li#NavNI {width: 15.01%; margin-right: -100%; margin-left: 46%; }
li#NavPCL {width: 19.01%; margin-right: -100%; margin-left: 61%; }
li#NavIA {float: right !important; width: 20.01%;}
/* END Main Navigation */


/*
 *  CENTERSPANWHOLE, CENTER, LEFT, RIGHT
 */
.contentItem {padding: 0 1%; margin-bottom: 1em;}
.contentItem.fullWidthOverride { padding: 0;}
.pageHome .contentItem {margin-bottom: 0;}

.center {float: left; width: 80%; margin-bottom: 1em;overflow: hidden;} /* overflow: hidden to allow child elements to extend negative margins beyond container, but not show; used for specific drop shadow needs */
#homepageFooterDisclaimer {width: 80%;}

/* add padding to most content containers, but allow override */
.center > div { padding: 0 1%;}
.center > div.fullWidthOverride { padding: 0;}

.centerSpanWhole, .center 
{
    background: #f7f8f9;
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImczMjYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGN0Y4RjkiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNFNEU3RUYiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2czMjYpIiAvPgo8L3N2Zz4=);
    background-image: -o-linear-gradient(top, #f7f8f9 0%, #e4e7ef 100%); /* opera */
    background-image: -moz-linear-gradient(top, #f7f8f9 0%, #e4e7ef 100%); /* ff */
    background-image: -ms-linear-gradient(top, #f7f8f9 0%, #e4e7ef 100%); /* IE10 */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f7f8f9), color-stop(1, #e4e7ef)); /* webkit */
    background-image: -webkit-linear-gradient(top, #f7f8f9 0%, #e4e7ef 100%); /* chrome 11+ */
    background-image: linear-gradient(top, #f7f8f9 0%, #e4e7ef 100%); /* w3c */
    
     /* Non standard for webkit */
     word-break: break-word;
     word-wrap: break-word;
}

.rightCell, .leftCell
{
    float: right;
    /* -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; */
    width: 18.5%;
    overflow: hidden;
}
.leftCell .contentItem, .rightCell .contentItem {padding: 0;}
 
div.hidePreviousVersion {display: block !important;} /* ie7? */
div.hidePreviousVersion[style] {display: block !important;}
div[style].hidePreviousVersion {display: block !important;}

/*
 *  HOMEPAGE ONLY TODO: SEPARATE THIS OUT
 */
.GSP-button[style] { display: block !important;}

 #oldDisclaimer { display: none; } /* TODO: remove from CMS */
 #homepageFooterDisclaimer 
 {
     clear: left;
     background-color: #FFEEBE;
     margin: 1em 0;
     padding: .5em;
     box-sizing: border-box;
}

/* EVENTS SPOTLIGHT */
#EventsSpotlightContainer, .submenuContainer {margin-bottom: 1em;}
#EventsSpotlightOL, #EventsSpotlightFooter 
{
    font-size: 81.25%;
    line-height: 1.3;
}
#subnavname {
    margin: 0;
    background-color: #383943; color: white; /* border: 1px solid black;  */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px 5px 0 0;
}
#subnavname a {padding: 0 .25em; display: inline-block;}
#subnavTitle {color: white; font-size: 1.42857em;} /* same size as h2 */
#EventsSpotlightTitle 
{
    margin: 0;
    padding: 1px .25em;
    background-color: #383943; color: white; /* border: 1px solid black;  */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px 5px 0 0;
}
#EventsSpotlightOL {
    list-style: none;
    padding: 0 .5em; margin: 0; /* overriding normalize.css */
    background-color: #dee6eb;

}
.submenuContainer {background-color: #dee6eb; margin-bottom: 1em;}
.submenuContainer ul {list-style: none; margin: 0; padding: 0 .5em;}
.submenuContainer a {padding: .45em 0; display: inline-block; line-height: 1;}
.submenuContainer li li a {padding: .2em 0;}
.submenuContainer a.current {font-weight: bold;}

#EventsSpotlightOL li{
    padding: .5em 0; 
    border-bottom: thin solid #91a7c8;
}
#EventsSpotlightOL li:last-child, .submenu li:last-child {border:none;}
#EventsSpotlightFooter 
{
    text-align:center; padding: .5em;
    background-color: #383943; color: white;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 0 0 5px 5px;
}
#EventsSpotlightFooter a {color: white;}


/* LOGIN BAR */
.login-block { background-color: #3F587D; padding: 0 !important;}
.login-block a { color: #ffffff; }
#headerLoginBarLoggedOut { display: none; }


/* NEWS DISPLAY */
.div-newsLinkContainer { margin: 1em 0;}
.rssRecentNewsLink {display: none;} /* TODO: replace this in CMS */
.newsItem {padding: 0 1%; margin-bottom: 1.5em;}
.center > .newsItem:first-child > h2 { margin-top: 1em;}

.newsTitleBorder, .collapsibleItemTitleBorder {display: inline-block; padding: 2px;cursor: pointer;margin: .25em 0;line-height: 1.3;}
.newsTitleBorder:hover, .collapsibleItemTitleBorder:hover { background-color: #C7CCDC;}
.newsTitleContent {display: inline-block; text-indent: -1em;margin-left: 1em;}
	
#homepageInformationSharingNews, .pageHome #GSP, #GlobalNewsContainer h2, #GlobalRightContainer h2, h2.bar
{
    
    position: relative; /* for the shadow */
    margin: 0;
    z-index: 11; /* for the shadow */
    padding: 1px 10px;
    color: #fff;
    background-color: #383943;
    -webkit-box-shadow: 0 -8px 10px -10px black;
    -moz-box-shadow:    0 -8px 10px -10px black;
    box-shadow:         0 -8px 10px -10px black;
}
h2.bar { padding: 1px 1%;}

.headingAdditionalLinks {
    float: right;
    font-weight: normal;
    font-size: 0.583333em;
    font-size: .875rem;
    line-height: 2.57142855; /* 1.7142857 x 1.5 */
	
}
.headingAdditionalLinks a {
    color: #85aaeb;
}
.newsBlockImage {float: right; margin-left: 1%;}
.datetime {color: #777; font-style: italic;}

.collapsibleNewsItem { padding-left: 1em;margin-bottom: 1em;}

.HomepageNewsItem {padding-top: .75em; padding-bottom: .75em;}
.HomepageNewsItem h2, .HomepageNewsItem h3 { font-size: 1.142857em; /* 16px */}
.HomepageNewsItem h2, .HomepageNewsItem h3, .newsItem h2
{
    margin-bottom: 0; 
	line-height: 1.2;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto; 
    text-rendering: optimizeLegibility;
}
.newsSource {margin-top: .5em;}
.newsSourceText, .sourcename, .sourcename div {display: inline;}
.newsSourceText u, .newsSourceText i {text-decoration: none; color: #777; font-style: italic;}

/* DL */
/* FEATURED PROGRAMS and DOWNLOADS */
.list-menu {margin-bottom: 0;} /* TODO: Working? Used to close up gap btwn Site Tools and Text Size*/
.list-menu dt
{
    color: #FEC013; font-weight: bolder; 
    font-size: 1.2857142857em; /* 18px */ /* 16px 1.142857em */
    letter-spacing:.02em;
    border-bottom: thin #FEC013 dotted; /* used to be #ccc */
    line-height: 1.25;
}

.list-menu dd
{
    margin: .25em 0 1em; /* overriding normalize.css */
    line-height: 1;
}

#featuredDownloadsDL 
{
    float: left; width: 53%;
/*    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing:     border-box;
    box-sizing:         border-box; */
}
#featuredDownloadsDL dd {text-indent: -19px; margin-left: 19px;}
#featuredDownloadsDL dd img {vertical-align: top; width: 14px; height: 14px;}

#featuredProgramsDL 
{
    float: left; 
    width: 25%;
    margin-right: 1.5%;
    /* -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing:     border-box;
    box-sizing:         border-box; TODO: lte IE7 polyfill */
}
/* TODO: Change in CMS and then remove after publish */
#featuredDownloadsDL a[style] {text-indent: 0 !important; padding-left: 0 !important;} /* This overrides inline style */

/* .pageHome #siteToolsDL, .pageHome #textchanger {clear: right; float: right; width: 18.5%;}*/
#textchangerContainer {background-color: #FFEEBE; display: inline-block; padding: .1em;}
#textchanger span {color: #12559C; cursor: pointer; border: 1px none #FEC013;}
#textchanger span.smallerfont {font-size: 12px; font-size: .75rem;} /* 12px */
#textchanger span.normalfont {font-size: 14px; font-size: 0.875rem;} /* 14px */
#textchanger span.largerfont {font-size: 16px; font-size: 1rem;} /* 16px */
.smallerfont #textchanger span.smallerfont {border-style:inset;}
.normalfont #textchanger span.normalfont {border-style:inset;}
.largerfont #textchanger span.largerfont {border-style:inset;}

#siteToolsDL dt{}

/* #siteToolsDL a, 
#featuredDownloadsDL a,
#featuredProgramsDL a, */
dl.list-menu a
{color:white; text-decoration: none;}
dl.list-menu .contact { line-height: 1.3;} 
dl.list-menu .contact:hover span.hoverLink{ text-decoration: underline;} 

/*
 * FOOTER
 */
 #Footer {margin-top: 1em;}
.footerBottomBar a {
    color: white;
    display: inline-block;
}
.footerBottomBar, #footerLogos {
    color: #FFFFFF;
    text-align: center;
}
#footerLogos img {
    display: inline-block;
    margin: 0 2em;
}

/*
 * HOLDOVERS
 */
.listBlurb {
    background-color: #EFEFEF;
    border-bottom: 1px solid #CCCCCC;
    border-top: 1px solid #FFFFFF;
    color: #333333;
    padding: 5px 1% 10px;
}

.eventsCalendar {margin: 0 auto;}

/*
 * GLOBAL HOME PAGE
 */
#GlobalNewsContainer {width: 49%; float: left;}
#GlobalNewsContainer .HomepageNewsItem {width: auto; float: none;}
#GlobalRightContainer {width: 49%; float: right;}

/*
 *  Horizontal Nav
 */
nav.horizontalSubmenu 
{
    text-align: center;
}  

nav.horizontalSubmenu a  
{
    display: inline-block;
    padding: 0 1em;margin: .5em;text-decoration: none;line-height: 2em;
    background-color: #EFEFEF;
    font-weight: bold;
    border: 1px solid #ccc;
    -webkit-border-radius: 1.1em;
       -moz-border-radius: 1.1em;
            border-radius: 1.1em;
}
nav.horizontalSubmenu a:hover { border-color: #999;}
nav.horizontalSubmenu a.selected { background-color: #3f587d;color: white;border: 2px solid #FEC013;}

/* Thumbnails */
.image100pxLeft {margin-left: 110px;}
.image100pxLeft .group {margin-bottom: 2em;}
.image100pxLeft .pullImageLeft {margin-left: -110px; float: left;}
.image100pxLeft img {max-width: 100px}
	
/* DL with thumnails */	
dl.image100pxLeft dt { font-weight: bold;clear: left;}
dl.image100pxLeft dd {margin: 0 0 2em;}
dl.image100pxLeft .pullImageLeft {margin-bottom: 2em;}

/*
 * Horizontal separator
 */ 
.fakeHR, hr.subdued 
{
    /* max-width: 12em; */
    margin-left: 0; border: 0;
    height: 1px;font-size: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.35), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.35), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.35), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.35), rgba(0,0,0,0)); 
}
.lt-ie10 .fakeHR, .lt-ie10 hr.subdued {background-color: #999;margin-right: auto;}

/*
 * Columns
 */
@media only screen and (min-width: 700px) {
    .col2 {-webkit-column-count: 2; -moz-column-count:2; column-count:2;}
    .col2 p{ margin-top: 0;}
    .col2 p{display: inline-block;}
} 
ul.col2 { padding-left: 0; list-style-type: none;margin: 1.5em 0 0 0;}
ul.col2 p {margin-bottom: 1.5em;}

/*
 * Asides
 */
aside  
{
    margin: 1em 0;
    padding: 1em 1em 0;
    background-color: #efefef;
            -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
} 

/*
 * RESPONSIVE
 */
 
@media only screen and (min-width: 800px) {
	/* Three-column news stories */
	.HomepageNewsItem {width: 31%; float: left;}
} 

@media only screen and (max-width: 700px) {
	/* 3x2 nav */
    ul#MainNavigationList {white-space: normal;}
    ul#MainNavigationList li {display: inline-block; }/* float: none; */
    ul#MainNavigationList li a {background-image: none; padding-top:4px; padding-bottom: 4px;}
	li#NavHome {width: 33%; margin: 0;}
  	li#NavGlobal {width: 34%; margin: 0;}
	li#NavGIST {width: 33%; margin: 0;}
	li#NavNI {width: 33%; margin: 0;}
	li#NavPCL {width: 34%; margin: 0;}
	li#NavIA {width: 33%; margin: 0;}
	ul#MainNavigationList li:last-child a {border-radius: 0 0 0 0;}
	ul#MainNavigationList li:nth-child(3) a {border-radius: 0 5px 0 0;}
	ul#MainNavigationList li:nth-child(2n) a {border-right: medium none;}
	/* ul#MainNavigationList li:nth-child(2n+1) a {border-right: solid 1px #ccc;} */
	ul#MainNavigationList li a {border-bottom: 1px solid #ccc;} 
}

@media only screen and (max-width: 1001px) {

    /* Push the search up */
    #SearchPanel {top: -.5em;}
    #navAndSearch {position: static;} /* make #SearchPanel abs position relative to different element */
	
	/* Navigation Across the Top */
	ul#MainNavigationList{width: 100%;}
    #featuredProgramsDL {float: right; width: 30%;}
    #featuredDownloadsDL {width: 66%;}
	.pageHome #siteToolsDL, .pageGlobal #siteToolsDL {clear: both; float: none; width: 100%;}
	.pageHome #siteToolsDL dd, .pageGlobal #siteToolsDL dd {float: left; width: 32%; margin-right: 1%;}
	.pageHome #textchanger, .pageGlobal #textchanger {float: left; width: 100%;}
	
	/* Center column is full width now */
	.center {float:none; width: 100%; margin-bottom: 0;}
    #homepageFooterDisclaimer {width: 100%;}
	.leftCell {margin-top: 1em;}
	
	/* Bring down the left column */
	.leftCell {float: none; width: auto;}
	.pageGlobal .leftCell {padding-left: 0;}
	/* #subnavname, .submenuContainer {clear: left; float: left; width: 100%; margin-left: -104.081632653%;} container width is 49% of overall width, need to move 51% over; 51/49 = 1.04081632653   */
    #subnavname, .submenuContainer {}
	.pageGlobal #subnavname, .pageGlobal .submenuContainer {margin-left: 0; width: 49%; margin-right: 1.5%;}
	
    #footerLogos img {margin: 0;}
    #footerLogos a {display: inline-block; width: 170px; text-align: center;}
	/* #FooterBJA:after{content:"\A"; white-space:pre;} */ /* linefeed character */
	#footerLogosFirstThree {display: block;}
	
	/* Stack Global News and Global "How Do I" */
    #GlobalNewsContainer, #GlobalRightContainer {width: auto; float: none;}
}

@media only screen and (max-width: 500px) {
    /* Take up more width */
    body {padding: .5em .5em;}
    
    /* rig header; TODO: unrig */
    #headerTitle {font-size: 1.3em; bottom: .9em;}
    #headerTitleSub {font-size: .65em; letter-spacing: -.05em;}
    
    /* Scrunch navigation */
    ul#MainNavigationList {white-space: normal;}
    ul#MainNavigationList li {display: inline-block; } /* float: none; */
    ul#MainNavigationList li a {background-image: none; padding-top:4px; padding-bottom: 4px;}
  	li#NavHome {width: 50%; margin: 0;}
  	li#NavGlobal {width: 50%; margin: 0;}
	li#NavGIST {width: 50%; margin: 0;clear: left;}
	li#NavNI {width: 50%; margin: 0;}
	li#NavPCL {width: 50%; margin: 0;clear: left;}
	li#NavIA {width: 50%; margin: 0;}
	ul#MainNavigationList li:last-child a {border-radius: 0 0 0 0;}
	ul#MainNavigationList li:nth-child(2) a {border-radius: 0 5px 0 0;}
	ul#MainNavigationList li:nth-child(3) a {border-radius: 0 0 0 0;}
	ul#MainNavigationList li:nth-child(2n) a {border-right: medium none;}
	/* ul#MainNavigationList li:nth-child(2n+1) a {border-right: solid 1px #ccc;} */
	ul#MainNavigationList li a {border-bottom: 1px solid #ccc;}
	
	#featuredProgramsDL, 
	#featuredDownloadsDL, 
	.pageGlobal #subnavname, 
	.pageGlobal .submenuContainer {float: none; width: 100%; margin: 0 0 1em;}
    .pageGlobal #subnavname {margin: 0;}

   	#footerLogos a {float: left; width: 50%;}
	div[data-shortdate].datetime span{display: none;}
	.datetime:after 
	{
	    content:attr(data-shortdate); 
	}
	
	/* Abbreaviate the GIST nav item */
	#mainNavigationGIST span {display: none;}
    #mainNavigationGIST:after 
	{
	    content:attr(data-shortName); 
	}
	#mainNavigationGIST {line-height: 2.17;}

}