/* --------------------------------------------------------------
   grid.css - mirror version of src/grid.css
-------------------------------------------------------------- */

/* A container should group all your columns. */

.container, .container2, .container3, .containerFluid {
	margin: 0 auto;
	text-align: left;
	width: 1000px;
}

/* 950 Centered (container2) */
.container2 {
	width: 73.076em;
	*width: 71.25em;
}


/* 974 Centered (container3) */
.container3 {
	width: 74.923em;
	*width: 73.05em;
}



/* 100% (containerFluid) */
.containerFluid {
/**
 * Left and Right margins are not a structural part of Grids. Without them 
 * Grids works fine, but content bleeds to the very edge of the document, which
 * often impairs readability and usability. They are provided because they 
 * prevent the content from "bleeding" into the browser's chrome. 
 */
	margin: auto 10px;
	width: auto;
}

/* used to create a shadow surrounding the vertical edgaes of "container", which should be redefined to be 960px - must be in a <div> with pngscale to work */
.BKDfade{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	background: transparent url(assets/common/BKDfade.png) repeat-y scroll 0px 0px;
}



/*  Flexible Content Components
-------------------------------------------------------------- */
.halfDiv {width:49.5%;}
.thirdDiv {width:32.5%;} 
.twothirdDiv {width:65.5%;}
.quarterDiv {width:24.5%;}
.fifthDiv {width:19.5%;}




/* Use this class on any div.span / container to see the grid. */
.showgrid { 
  background: url(BluePrint/blueprint/src/src/grid.png); 
}


/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
.column, div.w10, div.w20, div.w30, div.w40, div.w50, div.w60, div.w70, div.w80, div.w90, div.w100, div.w110, div.w120, div.w130, div.w140, div.w150, div.w160, div.w170, div.w180, div.w190, div.w200, div.w210, div.w220, div.w230, div.w240, div.w250, div.w260, div.w270, div.w280, div.w290, div.w300, div.w310, div.w320, div.w330, div.w340, div.w350, div.w360, div.w370, div.w380, div.w390, div.w400, div.w410, div.w420, div.w430, div.w440, div.w450, div.w460, div.w470, div.w480, div.w490, div.w500, div.w510, div.w520, div.w530, div.w540, div.w550, div.w560, div.w570, div.w580, div.w590, div.w600, div.w610, div.w620, div.w630, div.w640, div.w650, div.w660, div.w670, div.w680, div.w690, div.w700, div.w710, div.w720, div.w730, div.w740, div.w750, div.w760, div.w770, div.w780, div.w790, div.w800, div.w810, div.w820, div.w830, div.w840, div.w850, div.w860, div.w870, div.w880, div.w890, div.w900, div.w910, div.w920, div.w930, div.w940, div.w950, div.w960, div.w970, div.w980, div.w990, div.w1000{
  float: left;
  margin-right: 0px; /* was intially 10 in BluePrint */
  line-height: 0;
}

.lineStd{
	line-height: 1.5em;
}


/* The last column in a row needs this class. */
.last, div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.w10{width:10px;} .w20{width:20px;} .w30{width:30px;} .w40{width:40px;} .w50{width:50px;} .w60{width:60px;} .w70{width:70px;} .w80{width:80px;} .w90{width:90px;} .w100{width:100px;} .w110{width:110px;} .w120{width:120px;} .w130{width:130px;} .w140{width:140px;} .w150{width:150px;} .w160{width:160px;} .w170{width:170px;} .w180{width:180px;} .w190{width:190px;} .w200{width:200px;} .w210{width:210px;} .w220{width:220px;} .w230{width:230px;} .w240{width:240px;} .w250{width:250px;} .w260{width:260px;} .w270{width:270px;} .w280{width:280px;} .w290{width:290px;} .w300{width:300px;} .w310{width:310px;} .w320{width:320px;} .w330{width:330px;} .w340{width:340px;} .w350{width:350px;} .w360{width:360px;} .w370{width:370px;} .w380{width:380px;} .w390{width:390px;} .w400{width:400px;} .w410{width:410px;} .w420{width:420px;} .w430{width:430px;} .w440{width:440px;} .w450{width:450px;} .w460{width:460px;} .w470{width:470px;} .w480{width:480px;} .w490{width:490px;} .w500{width:500px;} .w510{width:510px;} .w520{width:520px;} .w530{width:530px;} .w540{width:540px;} .w550{width:550px;} .w560{width:560px;} .w570{width:570px;} .w580{width:580px;} .w590{width:590px;} .w600{width:600px;} .w610{width:610px;} .w620{width:620px;} .w630{width:630px;} .w640{width:640px;} .w650{width:650px;} .w660{width:660px;} .w670{width:670px;} .w680{width:680px;} .w690{width:690px;} .w700{width:700px;} .w710{width:710px;} .w720{width:720px;} .w730{width:730px;} .w740{width:740px;} .w750{width:750px;} .w760{width:760px;} .w770{width:770px;} .w780{width:780px;} .w790{width:790px;} .w800{width:800px;} .w810{width:810px;} .w820{width:820px;} .w830{width:830px;} .w840{width:840px;} .w850{width:850px;} .w860{width:860px;} .w870{width:870px;} .w880{width:880px;} .w890{width:890px;} .w900{width:900px;} .w910{width:910px;} .w920{width:920px;} .w930{width:930px;} .w940{width:940px;} .w950{width:950px;} .w960{width:960px;} .w970{width:970px;} .w980{width:980px;} .w990{width:990px;} .w1000{width:1000px;}, div.w1000 { width:1000px; margin:0; }

/* Misc classes and elements
-------------------------------------------------------------- */

/* In case you need to add a gutter above/below an element */
.prepend-top { 
  margin-top:1.5em; 
}
.append-bottom { 
  margin-bottom:1.5em; 
}

/* Use a .box to create a padded box inside a column.  */ 
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #E5ECF9; 
}



/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.45em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}


/* Floating
-------------------------------------------------------------- */

.right, div.right{
	float: right;
}

.left, div.left{
	float: left;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
  content: "\0020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
  overflow:hidden; 
}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */


.clear { clear:both; }


/* BKD TEST colour
   used to view div on screen easily */

.bkdTest{
		background-color:#699;
}





/* Position relative
-------------------------------------------------------------- */

/* For use with Positon absolute - place this class below on the wrapper div above the div you are trying to absolute position for div based positioning rather than page based */
.posRel{
		position: relative;
}

.posAbs{
	position:absolute;
}