/* colors and other constants
	Primary Navy : #00263a or rgb(0,38,58);
	Grey : #7a99ac or rgb(122,153,172);
	Grey - Light : #f1f5f7 or rgb(241,245,247);
	White : #fff or rgb(255,255,255);

	Font weights for various fonts: Light/200, Normal/400, Demi/600, Bold/700
		font-family:'Cabrito Sans W01 Norm Regular'; - weight 400
		font-family:'Cabrito Sans W01 Cond Demi'; - weight 600
		font-family:'Cabrito Sans W01 Cond Bold'; - weight 700

*/
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	font: normal 400 62.5%/100% 'Cabrito Sans W01 Norm Regular', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #00263a;
	background-color:#11374b;
	background-image:linear-gradient(to bottom,#00263a,#00263a);
	background-size:100% 13.8rem;
	background-repeat:no-repeat;
}

a { 
	color: #00263a;	/* override with Project Primary/Dark Color */
	text-decoration: none;
}
a:link {
	color: #00263a;	/* override with Project Primary/Dark Color */
}
a:visited {
	color: #7a99ac;
}
a:hover {
	color: #00263a;
	text-decoration: underline;
}
a:active {
	color: #00263a;
}
.content a  {
	text-decoration: underline;	
}
.content .buttonbox a {
	text-decoration: none;
}

/* #TODO - verify that this is still needed, used, and appropriately set */
hr {	
	border: 0;
	color: rgb(152,87,155);
	background-color: #9E9E9E;
	height: 1px;
	width: 100%;
}

p {
	margin-top: 1.4rem;
	margin-bottom: 1.3rem; 
}
h5 > p {
	margin-top: 1rem;
}
h1 {
	font-size:2.1rem;
	font-weight:normal;
	line-height:2.4rem;
	color: #00263a;
	margin-top:0;
	margin-bottom:2.7rem;
	text-transform: uppercase;
}
h2 {
	font-family:'Cabrito Sans W01 Norm Bold';
	margin-top:2.7rem;
	font-size: 1.4rem;
	font-weight:normal;
	line-height: 1.8rem;
	color:#00263a;
	text-transform: uppercase;
}
h3 {
	font-size: 1.4rem;
	font-weight:normal;
	line-height: 1.8rem;
	color:#00263a;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 0;
}
h5 {
	font-size:1.4rem;
	font-weight:normal;
	line-height:100%;
	color:#7a99ac;
	text-transform:uppercase;
	margin-bottom:0;
}

h6 {
	font-size:1.4rem;
	font-weight:normal;
	line-height:100%;
	color:#7a99ac;
	text-transform:uppercase;
	margin-bottom:0;
	border-bottom: 1px solid #000033;
}
img {
	border: 0;
}

th {
	font-weight:normal;
}
strong, b {
	font-family:'Cabrito Sans W01 Cond Demi';	
	font-weight:normal;
}

/* Levin Alexander's graphic headers image replacement markup from
	http://levinalex.net/files/20030809/alternatefir.html

	Note, non-standard markup to support IE5/Mac is omitted.
	Note, z-index to support Opera 5 and 6 is omitted.

	See Also:
	http://www.mezzoblue.com/archives/2003/12/12/accessible_i/#c002804
*/
.replace {
	position:relative;
	margin:0;
	padding:0;
}

.replace span {
	display: block;
	position:absolute;
	top:0px;
	left:0px;
}

/* Levin Alexander's graphic headers image replacement for the title */
#title, #title span {
	width:44.1rem;
	/* leave 1 rem space for numbers */
	height:12.7rem;
	background:  #00263a 0 3.0rem no-repeat;
}
/* end levin's graphic header image replacement.  to use, add the following css:
	#myh1, #myh1 span { height:XXXpx; width:XXXpx; background-image: url(XXX); }
	
	where myh1 is id of element being replaced declared as such:
	
	<tag class="replace" id="myh1">Text to be replaced.<span></span></tag>
*/


/* generic sap classes, faux absolute positioning from 
	http://www.alistapart.com/articles/fauxabsolutepositioning
*/
.line {
	float: left;
	width: 100%;
	display: block;
	position: relative; /*prevents shifting when changing viewport in IE;thanks to Alan Gresley*/
	/* overflow: hidden; only needed for equal height columns but	*
	*	breaks in page anchor links.  for now, use background image	*
	*	for left and center column backgrounds and avoid full 		*
	*	column height backgrounds or left borders on right column.	*
	*/
}
.item {
	float:left;
	left:100%;
	position:relative;
	/* overflow:hidden; */
}
.sap-content {
	width:100%;
}
/* end generic; all sap elements must have margin-left and with defined */

/* specific faux absolute positioning declarations */
#canvas {
	overflow:hidden;
	width: 88.2rem;
	margin: 0 auto;
	padding-left:3.5rem; 
	font-size:1.4rem;
	line-height: 1.8rem;
}
	
/* line 1 */
#header {
	width:100%;
	height:13.8rem;
}

#logoitem {
	margin-left: -100%;
	width: 44.2rem;
	z-index: 1200; /* make sure it appears above navline */
}

/* line 2 - this is pulled out of the flow */
#navline {
	float:none;
	position:absolute;
	width:88.2rem;
}
#primary_nav {
	margin-left: -50%;
	width: 50%;
}

/* line 3 */
#main #sidebar-left {
	margin-left: -100%;
	width: 19.2rem;
}

#main #maincontent {
	width: 63.5rem;
	margin-left: -69.0rem;
	padding:0;
	padding:4.4rem 2.5rem 2.5rem 3.0rem;
}

/* #TODO - widecontent and sidebar-right are related to old designs and should be stripped */
#main.widecontent #maincontent {
	width: 63.5rem;
}

#main.nomenu #maincontent {
	margin-left: -88.2rem;
	width: 82.7rem;
}

#main #sidebar-right {
	display:none;
}

/* line 4 */
#footer {
	margin-left: -100%;
	width: 100%;
}
/* end faux absolute positioning declarations */

/* header */

#header {
	/* this will be the number bar once the image is added as a background */
	background: #00263a bottom left/88.2rem 1.1rem repeat-x;
}

/*top navigation*/
#primary_nav {
	top:7.4rem;
	font-family:'Cabrito Sans W01 Cond Bold'; 
	font-weight:normal;
	font-size:1.4rem;
	letter-spacing: 0.05rem;
	color:#f5f8f9;
	text-transform: uppercase;
}
#primary_nav {
	border-top:1px #f5f8f9 solid;
	padding-top:1.3rem;
	padding-bottom:2.6rem;
}
#primary_nav a {
	text-decoration: none;
	color:#f5f8f9;
}
#primary_nav a:hover {
	color:#7a99ac;  /* color should be overridden with project color */
}
#primary_nav ul {
  margin: 0;
  padding-left: 0rem;
  padding-right: 0.25rem;
}
#primary_nav ul li {
  display: inline;
  list-style-type: none;
}
#primary_nav li:before {
	content:"\00a0|\00a0\00a0";
}
#primary_nav ul li:first-child:before {
	content:"";
}

/* decorative pictures */
#picturebar {
	position:absolute;
	z-index:1000;
	width:88.2rem;
	height:10.0rem;
	background-color:#fff;
	margin-top:3.2rem;
	padding-top:0.3rem;
	padding-bottom:0.3rem;
	border-bottom:0.3rem solid #7a99ac; /* color should be overridden with project color */
	left:-100%;
}
#picturebar:before {
	/* supports middle 3px border line */
	content:" ";
	position:absolute;
	z-index:999;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	border-bottom:0.3rem solid #00263a;
}
#picturebar div {
	float:left;
	background-color:#7a99ac; /* color should be overridden with project light color */
	width:14.45rem;
	height:9.65rem;
	border-right:0.3rem solid #fff;
	background-size:100% 100%;
	background-repeat:no-repeat;
}
#picturebar div:last-child {
	border-right:none;
}

/* main body and sidebars */
#main {
	margin-top:10.9rem;
	background-color:#fff;
	background-image:  linear-gradient(to right,
							#f1f5f7,
							#f1f5f7 19.2rem,	
							#fff 19.2rem);
}
#main.nomenu {
	background-image:none;
}

/*left column - main navigation*/
#sidebar-left {
	padding-top:2.2rem;
}
#sidebar-left {
	font: normal normal 1.1rem/1.8rem 'Cabrito Sans W01 Cond Demi';
	text-transform:uppercase;
}
#sidebar-left h2{
	color: #7a99ac;
	font: normal normal 1.4rem/1.8rem  'Cabrito Sans W01 Cond Bold';
	letter-spacing:0.05rem;
	padding-left:1.5rem;
	margin-top:2.2rem;
	margin-bottom:0.2rem;
}
#sidebar-left h2 a {
	color: #7a99ac;
	text-decoration: none;
}
#sidebar-left ul {
	font-size: 1.1rem;
	list-style: none;
	padding-left:1.5rem;
	/*	padding-right:1.5rem; /* leave it out so slightly longer items won't wrap */
	margin-top:0.3rem;
	margin-bottom:0;
}
#sidebar-left li.active {
	width:17.7rem; /* 19.2 minus 1.5 for padding */
	margin-left:-1.5rem;
	padding-left:1.5rem;
	background-color:#7a99ac;	/* override with project primary color */
}
#sidebar-left a { 
	color: #7a99ac;
	text-decoration: none;
}
#sidebar-left li.active a {
	color:#fff;
}
#sidebar-left a:hover {
	/* use Project primary/*dark color */
	margin-left:-0.6rem;
	margin-right:1rem;
}
#sidebar-left a:hover:before {
	content:"- ";
}
#sidebar-left a:hover:after {
	content:" -";
}
#sidebar-left a:active {
	color: #f99;
}

/* button boxes */
.buttonbar {
	margin:4.4rem -2.5rem 0rem -2.5rem;
}
.buttonbox {
	float:left;
	width:34.0rem;
	margin-bottom:0.3rem;
	text-align:center;

}
.buttonbox:nth-child(1) {
	background-color:#7a99ac;	/* override with project primary color */
	margin-right:0.4rem;	
}
.buttonbox:nth-child(2) {
	background-color:#f1f5f7;	/* override with project secondary color */
}
/* using line behind title technique from http://codepen.io/ericrasch/pen/Irlpm */
.buttonbox h2 {
    display: table;
    white-space: nowrap;
	font-family:'Cabrito Sans W01 Norm Bold';
	font-weight:normal;
    color:#fff;
    margin-left:2.5rem;
    margin-right:2.5rem;
 }
.buttonbox h2:before, .buttonbox h2:after {
	border-top: 1px solid #fff;
	content: '';
	display: table-cell;
	position: relative;
	top: 0.7rem;
	width: 10rem;
}
.buttonbox h2:before { right: 1rem; }
.buttonbox h2:after { left: 1rem; }
.buttonbox:nth-child(2) h2 {
	color:#7a99ac;	/* override with project primary color */
}
.buttonbox:nth-child(2) h2:before, .buttonbox:nth-child(2) h2:after  {
	border-color:#7a99ac;	/* override with project primary color */
}
.buttonbox p {
	margin-top:2.7rem;
	margin-bottom:2.7rem;
}
.buttonbox a {
	color: #00263a;	/* override with Project Primary/Dark Color */
	font-family:'Cabrito Sans W01 Cond Bold'; 
	font-weight:normal;
	font-size: 1.4rem;
	line-height: 1.4rem;
	text-transform: uppercase;
	padding:0.8rem 2.7rem;
	background-color:#fff;
}
.buttonbox:nth-child(2) a {
	color:#fff;
	background-color:#7a99ac;	/* override with project primary color */
}
.buttonbox a:visited {
	color: #00263a;	/* override with Project Primary/Dark Color */	
}
.buttonbox:nth-child(2) a:visited {
	color:#fff;
}
.buttonbox a:hover {
	color: #00263a;	/* override with Project Primary/Dark Color */
	text-decoration:none;
	background-color:#f1f5f7;	/* override with project secondary color */
}	
.buttonbox:nth-child(2) a:hover {
	background-color:#fff;
}
.buttonbox a:active, .buttonbox:nth-child(2) a:active { /* this needs to be repeated in the project specific to override hovers */
	color:#00263a;
}

/* callout box */
.callout {
	clear:both;
	margin:0 -2.5rem 2.0rem -2.5rem;
	padding:2.0rem 2.5rem;
	background-color:#f1f5f7;
}
.callout h2 {
	margin:0;
	padding:0;
	font-family:'Cabrito Sans W01 Norm Regular'; 
	font-size:1.4rem;
	line-height: 1.8rem;
	text-transform: uppercase;
}
.callout p {
	font-family:'Cabrito Sans W01 Norm Light';
	font-size:1.2rem;
	line-height:1.6rem;
	margin-top:2.0rem;
}

/* subsection links */
.subsection_links ul{
	padding-left:0;
}
.subsection_links ul li {
	display: inline;
	list-style-type: none;
	font: normal normal 1.1rem/1.8rem 'Cabrito Sans W01 Cond Demi';
	text-transform:uppercase;
}
.subsection_links li:before {
	content:"\00a0|\00a0\00a0";
}
.subsection_links ul li:first-child:before {
	content:"";
}

/*footer*/
#footerline {
	border-top:3px solid #00263a;
	background-color: #fff;
}
#firstFooter {
		background-color: #fff;
		text-align:center;
}
#firstFooter #supportedBy {
	border-bottom:1px solid #7a99ac;
}
#supportedBy p {
	margin:2.7rem 0;
}
#supportedBy p a:hover img {
	opacity: 1;
	filter: alpha(opacity=100);
}
#supportedBy p a img {
	vertical-align:middle;
	border:none;
	margin: 0rem 1.8rem;
	opacity: 0.6;
	filter: alpha(opacity=60);
}

/* using line behind title technique from http://codepen.io/ericrasch/pen/Irlpm */
#firstFooter h2 {
    display: table;
    white-space: nowrap;
	margin:4.4rem 5rem 2.7rem 5rem;
	padding:0;
	font-family:'Cabrito Sans W01 Norm Regular'; 
	font-weight:normal;
	font-size:1.4rem;
	line-height: 1.8rem;
	text-transform: uppercase;
    color:#7a99ac;
}
#firstFooter h2:before, #firstFooter h2:after {
	border-top: 1px solid #7a99ac;
	content: '';
	display: table-cell;
	position: relative;
	top: 0.7rem;
	width: 50%;
}
#firstFooter h2:before { right: 5rem; }
#firstFooter h2:after { left: 5rem; }
#firstFooter p { 
	margin-top:2.7rem;
}
#firstFooter p a {
	font-family:'Cabrito Sans W01 Cond Bold'; 
	font-weight:normal;
}
#firstFooter p a:hover {
	font-weight:900;
}
#secondFooter {
	color:#fff;
	background-color:#00263a;	
	text-align: center;
	padding-top:2.7rem;
	padding-bottom:2.7rem;
	letter-spacing: 0.05rem;
}
#secondFooter ul {
	font-family:'Cabrito Sans W01 Cond Bold'; 
	font-weight:normal;
	font-size: 1.0rem;
	line-height:1.4rem;
	padding:0;
}
#secondFooter li a {
	color:#fff;
	margin:0 1rem;
}
#secondFooter ul li {
  display: inline;
  list-style-type: none;
}
#secondFooter li:before {
	content:"|";
}
#secondFooter ul li:first-child:before {
	content:"";
}
#secondFooter p {
	font-family:'Cabrito Sans W01 Norm Light';
	font-size: 0.8rem;
	line-height: 1.2rem;
	text-transform: uppercase;
}
#secondFooter p a:link,
#secondFooter p a:visited,
#secondFooter p a:hover {
	color:#7a99ac;
}
#secondFooter p a:active {
	color:#f1f5f7;
}

/*** BEGIN other specialized styles ***/
#primary_nav ul li#logInLink {
	display:none;
}
.spacedList li, .spacedList dd {
	margin-bottom: 1em;
}
.numberColumns {
	font-family:Verdana, Arial, Helvetica Neue, Helvetica, sans-serif;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption {
/* this is similar to h2 but without the uppercase and centered */
	font-family:'Cabrito Sans W01 Cond Demi';	
	font-weight:normal;
	margin-top:1.8rem;
	margin-bottom:1rem;
	font-size: 1.4rem;
	line-height: 1.8rem;
	font-weight:normal;
}
td, th {
	padding-left:0.5rem;
	padding-right:0.5rem;
}
tr:hover {
	background-color:#f1f5f7;	
}
.compressText {
	letter-spacing:-0.04em;
}
/*** END other specialized styles ***/