/******************************************************************************
 * NI-BASE.CSS
 * @author Keegan Watkins
 * 
 * This stylesheet contains some common CSS that should be safe for all pages.
 * Do not add any specific styles in this file, it should remain as generic as
 * possible to ensure future compatibility... 
 * 
 * NO ID OR MULTIPLE-CLASS SELECTORS ALLOWED!
 ******************************************************************************/

/******************************************************************************
 * Reset styles - reset browser defaults on elements. Most of these rules will
 * get overwritten whenever other stylesheets are loaded, but they create a 
 * common ground across browsers.
 ******************************************************************************/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,
fieldset, input, p, blockquote, th, td { margin:0;padding:0; }
table{ border-collapse:collapse;border-spacing:0; }
fieldset, img { border:0; }
address, caption, cite, code, dfn, em, strong, th, var 
{ font-style:normal;font-weight:normal; }
ol, ul { list-style:none; }
caption, th { text-align:left; }
h1, h2, h3, h4, h5, h6 { font-size:100%; }
q:before, q:after { content:''; }
body {font-family:Arial, Helvetica, sans-serif;}
a {color:#065FA3;}

/******************************************************************************
 * Em-based typography - defines text size in terms of ems, rather than px. We 
 * can't use this everywhere yet, or stuff will break. By deriving from a class
 * on the <body/> element, we can control where/how we roll this out (i.e. with 
 * new content, add the class "use-ems" to the <body/> tag to enable this font 
 * system). 
 ******************************************************************************/

	/**
	 * Ems-based fonts are relative to the <body/>, so set to 62.5% (roughly 
	 * 10px), and then define elements in ems. EX => 
	 * 
	 * font-size:1.5em = 150% of the <body/> element = roughly 15px
	 */
body.use-ems { font-size:62.5%; }
body.use-ems p, body.use-ems a, body.use-ems li, body.use-ems dl, body.use-ems dt,
body.use-ems span { font-size:1.2em; }
body.use-ems h1 { font-size:2em; }
body.use-ems h2 { font-size:1.6em; }
body.use-ems h3 { font-size:1.4em; }
body.use-ems h4 { font-size:1.3em; }
body.use-ems h5 { font-size:1.2em; }
body.use-ems h6 { font-size:1.1em; } 

/******************************************************************************
 * Layout styles - common classes to control display properties
 ******************************************************************************/

.left { float:left; }
.right { float:right; }
.block { display:block; }
.inline-block { display:inline-block; }
.inline { display:inline; }
.hide { display:none; }
	/** 
	 * Screen-readers and ADA-compliant rendering devices do not reflect       
	 * content that is set to "display:none", so use this where needed to hide 
	 * elements in an accessible manner. This pattern can replace system text 
	 * with an image for web browsers without removing the text on devices that
	 * offer limited capabilities. EX =>
	 * 
	 * HTML:
	 * <h1><span class='hide-accessible'>This text will be replaced</span></h1>
	 * 
	 * CSS:
	 * h1 { background: transparent url(path/to/replacement/image.png); }
	 */
.hide-accessible { position:absolute;left:-10000px;top:-10000px; }

/******************************************************************************
 * Grid system styles - use to create columns on the grid. There are twelve 
 * columns on the NI grid, with eight pixel gutters. EX =>
 * 
 * 12 columns x 73 pixels each = 876 pixels
 * 11 gutters x 8 pixels each = 88 pixels
 * 876 pixels of columns + 88 pixels of gutters = 964 pixels
 * 
 * Note that each grid size reflects its columns AND its inner gutters. EX =>
 * 
 * .grid6 { width:478px }
 * 
 * 6 columns x 73 pixels each = 438 pixels
 * 5 gutters x 8px each = 40 pixels
 * 438 pixels of columns + 40 pixels of gutters = 478 pixels
 * 
 *****************************************************************************/

.grid1 { width: 73px; }
.grid2 { width: 154px; }
.grid3 { width: 235px; }
.grid4 { width: 316px; }
.grid5 { width: 397px; }
.grid6 { width: 478px; }
.grid7 { width: 559px; }
.grid8 { width: 640px; }
.grid9 { width: 721px; }
.grid10 { width: 802px; }
.grid11 { width: 883px; }
.grid12 { width: 964px; }
	/**
	 * Dead columns are useful, for example, when creating a 4-1-4 layout 
	 * inside of a 9-column container (where the center 1-column container is
	 * empty). When floating the columns, the empty single column will not 
	 * naturally consume any space, so use .grid-dead-column to force floated
	 * siblings to flow around the container
	 */
.grid-dead-column { height:1px; }

/******************************************************************************
 * Gutter styles - classes to apply the padding/margin needed to create the 
 * gutters between columns on the grid. NOTE: watch out for the IE6 
 * "double-margin bug", where shared margins fail to collapse (as this will 
 * break the columns).
 *****************************************************************************/

.gutter-inner { padding:0 8px; }
.gutter-inner-l { padding-left:8px; }
.gutter-inner-r { padding-right:8px; }
.gutter-outer { margin:0 8px; }
.gutter-outer-l { margin-left:8px; }
.gutter-outer-r { margin-right:8px; }

/******************************************************************************
 * Padding/margin styles - use to set standardized padding/margin on elements.
 * Using these classes will allow minimal HTML changes, as the values can be 
 * set in a single place here, even as they change over time. Both padding and 
 * margin are indicated in terms of degree: small, medium, or large. The 
 * following symbols describe the first portion of the class:
 * 
 * t - top
 * b - bottom
 * v - vertical (both top and bottom)
 * l - left
 * r - right
 * h - horizontal (both left and right)
 * 
 * EX => 
 * 
 * .t-padding-med = the middle value of padding applied to the top
 * .h-margin-lg = the highest value of margin applied to the left and right
 *****************************************************************************/

	/* All dimensions */
.padding-sm { padding:5px; }
.padding-med { padding:10px; }
.padding-lg { padding:20px; }
.margin-sm { margin:5px; }
.margin-med { margin:10px; }
.margin-lg { margin:20px; }
	/**
	 * Left, right, top, bottom, vertical (top|bottom), and horizontal 
	 * (left|right) dimensions
	 */
.t-padding-sm { padding-top:5px; }
.t-padding-med { padding-top:10px; }
.t-padding-lg { padding-top:20px; }
.b-padding-sm { padding-bottom:5px; }
.b-padding-med { padding-bottom:10px; }
.b-padding-lg { padding-bottom:20px; }
.v-padding-sm { padding:5px 0; }
.v-padding-med { padding:10px 0; }
.v-padding-lg { padding:20px 0; }
.l-padding-sm { padding-left:5px; }
.l-padding-med { padding-left:10px; }
.l-padding-lg { padding-left:20px; }
.r-padding-sm { padding-right:5px; }
.r-padding-med { padding-right:10px; }
.r-padding-lg { padding-right:20px; }
.h-padding-sm { padding:0 5px; }
.h-padding-med { padding:0 10px; }
.h-padding-lg { padding:0 20px; }
.t-margin-sm { margin-top:5px; }
.t-margin-med { margin-top:10px; }
.t-margin-lg { margin-top:20px; }
.b-margin-sm { margin-bottom:5px; }
.b-margin-med { margin-bottom:10px; }
.b-margin-lg { margin-bottom:20px; }
.v-margin-sm { margin:5px 0; }
.v-margin-med { margin:10px 0; }
.v-margin-lg { margin:20px 0; }
.l-margin-sm { margin-left:5px; }
.l-margin-med { margin-left:10px; }
.l-margin-lg { margin-left:20px; }
.r-margin-sm { margin-right:5px; }
.r-margin-med { margin-right:10px; }
.r-margin-lg { margin-right:20px; }
.h-margin-sm { margin:0 5px; }
.h-margin-med { margin:0 10px; }
.h-margin-lg { margin:0 20px; }

/******************************************************************************
 * Floated content styles - use .clearfix for elements which contain floated
 * elements, and .clear to force an element to clear its floated siblings
 *****************************************************************************/

.clear { clear:both; }
.clearfix { display: inline-block; }
.clearfix:after { content: ".";display: block;clear: both;visibility: hidden;
	line-height:0;height:0; }
	/**
	 * IE6 fix
	 */
* html .clearfix { height:1%; }
	/**
	 * CSS3-compliant browsers get it right, so set back to display:block. All
	 * of our pages should be using the XML-Namespace attribute.
	 */
html[xmlns] .clearfix { display: block; }