/*******************************************************************************************
*******************************************************************************************
/shared/css/layout/_grid.css
*******************************************************************************************
*******************************************************************************************/

/***************************/
/* percentage-based blocks */

.box, 
.box-10, 
.box-15,
.box-20, 
.box-22,
.box-25, 
.box-30, 
.box-33, 
.box-35, 
.box-40,
.box-45, 
.box-50, 
.box-55,
.box-60,
.box-65, 
.box-66, 
.box-70,
.box-75,
.box-78, 
.box-80,
.box-85 {
	box-sizing: border-box;
	float: left;
}

.box { display: block; float: none; }
.box-10 { width: 10%; }
.box-15 { width: 15%; }
.box-20 { width: 20%; }
.box-22 { width: 22%; }
.box-25 { width: 25%; }
.box-30 { width: 30%; }
.box-33 { width: 33.33%; }
.box-35 { width: 35%; }
.box-40 { width: 40%; }
.box-45 { width: 45%; }
.box-50 { width: 50%; }
.box-55 { width: 55%; }
.box-60 { width: 60%; }
.box-65 { width: 65%; }
.box-66 { width: 66%; }
.box-70 { width: 70%; }
.box-75 { width: 75%; }
.box-78 { width: 78%; }
.box-80 { width: 80%; }
.box-85 { width: 85%; }

/*********************/
/* table-cell layout */

.cellWrap {
	box-sizing: border-box;
	display: table;
	table-layout: fixed;
	width: 100%;
}
.cellWrap2 {
    display: table;
    table-layout: fixed;
	width: auto;
}
.cell, 
.cell-10, 
.cell-15,
.cell-20, 
.cell-22,
.cell-25, 
.cell-30, 
.cell-33, 
.cell-35, 
.cell-40,
.cell-45, 
.cell-50, 
.cell-55,
.cell-60,
.cell-65, 
.cell-66, 
.cell-70,
.cell-75,
.cell-78, 
.cell-80,
.cell-85 {
    display: table-cell !important;
}

.cell-10 { width: 10%; }
.cell-15 { width: 15%; }
.cell-20 { width: 20%; }
.cell-22 { width: 22%; }
.cell-25 { width: 25%; }
.cell-30 { width: 30%; }
.cell-33 { width: 33.33%; }
.cell-35 { width: 35%; }
.cell-40 { width: 40%; }
.cell-45 { width: 45%; }
.cell-50 { width: 50%; }
.cell-55 { width: 55%; }
.cell-60 { width: 60%; }
.cell-65 { width: 65%; }
.cell-66 { width: 66%; }
.cell-70 { width: 70%; }
.cell-75 { width: 75%; }
.cell-78 { width: 78%; }
.cell-80 { width: 80%; }
.cell-85 { width: 85%; }

/**********/
/* FLOATS */
.floatR { float: right; }
.floatL { float: left; }

/* don't forget to clear the float */
.clear { clear: both; }
.clearR { clear: right; }
.clearL { clear: left; }

/***********/
/* PADDING */

/* left and right padding */
.padLR0 { padding-left: 0 !important; padding-right: 0 !important; }
.padLR { padding-left: 6px !important; padding-right: 6px !important; }
.padLR2 { padding-left: 9px !important; padding-right: 9px !important; }
.padLR3 { padding-left: 12px !important; padding-right: 12px !important; }
.padLR4 { padding-left: 18px !important; padding-right: 18px !important; }
.padLR5 { padding-left: 24px !important; padding-right: 24px !important; }

.padL0 { padding-left: 0 !important; }
.padL { padding-left: 6px !important; }
.padL2 { padding-left: 9px !important; }
.padL3 { padding-left: 12px !important; }
.padL4 { padding-left: 18px !important; }
.padL5 { padding-left: 24px !important; }
.padL6 { padding-left: 30px !important; }
.padL7 { padding-left: 36px !important; }
.padL8 { padding-left: 42px !important; }
.padL9 { padding-left: 48px !important; }

.padR0 { padding-right: 0 !important; }
.padR { padding-right: 6px !important; }
.padR2 { padding-right: 9px !important; }
.padR3 { padding-right: 12px !important; }
.padR4 { padding-right: 18px !important; }
.padR5 { padding-right: 24px !important; }

/* top and bottom padding */
.padBT0 { padding-bottom: 0 !important; padding-top: 0 !important; }
.padBT { padding-bottom: 6px !important; padding-top: 6px !important; }
.padBT2 { padding-bottom: 9px !important; padding-top: 9px !important; }
.padBT3 { padding-bottom: 12px !important; padding-top: 12px !important; }
.padBT4 { padding-bottom: 18px !important; padding-top: 18px !important; }
.padBT5 { padding-bottom: 24px !important; padding-top: 24px !important; }

.padB0 { padding-bottom: 0 !important; }
.padB { padding-bottom: 6px !important; }
.padB2 { padding-bottom: 9px !important; }
.padB3 { padding-bottom: 12px !important; }
.padB4 { padding-bottom: 18px !important; }
.padB5 { padding-bottom: 24px !important; }

.padT0 { padding-top: 0 !important; }
.padT { padding-top: 6px !important; }
.padT2 { padding-top: 9px !important; }
.padT3 { padding-top: 12px !important; }
.padT4 { padding-top: 18px !important; }
.padT5 { padding-top: 24px !important; }

/* all around padding */
.padAll0 { padding: 0 !important; }
.padAll { padding: 6px !important; }
.padAll2 { padding: 9px !important; }
.padAll3 { padding: 12px !important; }
.padAll4 { padding: 18px !important; }
.padAll5 { padding: 24px !important; }


/***********/
/* offsets */
.offset { margin: 0 -6px !important; }
.offset2 { margin: 0 -9px !important; }
.offset3 { margin: 0 -12px !important; }
.offset4 { margin: 0 -18px !important; }
.offset5 { margin: 0 -24px !important; }
.offset6 { margin: 0 -30px !important; }
.offset7 { margin: 0 -36px !important; }
.offset8 { margin: 0 -42px !important; }
.offset9 { margin-left: -48px !important; }


/**************/
/*** MARGIN ***/

/* all margins */
.margin0 { margin: 0 !important; }
.marginsm { margin: 6px !important; }
.margin { margin: 12px !important; }
.margin2 { margin: 18px !important; }
.margin3 { margin: 24px !important; }

/* bottom margin */
.marginB0 { margin-bottom: 0 !important; }
.marginBsm { margin-bottom: 6px !important; }
.marginB { margin-bottom: 12px !important; }
.marginB2 { margin-bottom: 18px !important; }
.marginB3 { margin-bottom: 24px !important; }
.marginB4 { margin-bottom: 30px !important; }
.marginB5 { margin-bottom: 48px !important; }

/* top margin */
.marginT0 { margin-top: 0 !important; }
.marginTsm { margin-top: 6px !important; }
.marginT { margin-top: 12px !important; }
.marginT2 { margin-top: 18px !important; }
.marginT3 { margin-top: 24px !important; }
.marginT4 { margin-top: 30px !important; }
.marginT5 { margin-top: 48px !important; }

/* top and bottom margin */
.marginBT0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.marginBTsm { margin-top: 6px !important; margin-bottom: 6px !important; }
.marginBT { margin-top: 12px !important; margin-bottom: 12px !important; }
.marginBT2 { margin-top: 18px !important; margin-bottom: 18px !important; }
.marginBT3 { margin-top: 24px !important; margin-bottom: 24px !important; }
.marginBT4 { margin-top: 30px !important; margin-bottom: 30px !important; }
.marginBT5 { margin-top: 48px !important; margin-bottom: 48px !important; }

/* left margin */
.marginL0 { margin-left: 0 !important; }
.marginLsm { margin-left: 6px !important; }
.marginL { margin-left: 12px !important; }
.marginL2 { margin-left: 18px !important; }
.marginL3 { margin-left: 24px !important; }
.marginL4 { margin-left: 30px !important; }
.marginL5 { margin-left: 36px !important; }
.marginL6 { margin-left: 42px !important; }
.marginL7 { margin-left: 48px !important; }

/* right margin */
.marginR0 { margin-right: 0 !important; }
.marginRsm { margin-right: 6px !important; }
.marginR { margin-right: 12px !important; }
.marginR2 { margin-right: 18px !important; }
.marginR3 { margin-right: 24px !important; }
.marginR4 { margin-right: 30px !important; }

/* left and right margin */
.marginLRsm { margin-left: 6px !important; margin-right: 6px !important; }
.marginLR { margin-left: 12px !important; margin-right: 12px !important; }
.marginLR2 { margin-left: 18px !important; margin-right: 18px !important; }
.marginLR3 { margin-left: 24px !important; margin-right: 24px !important; }


/***********/
/* borders */
.border { border: solid 1px #e0e0e0; }
.border-md { border: solid 2px #e0e0e0; }
.border-lg { border: solid 3px #e0e0e0; }

.borderL { border-left: solid 1px #e0e0e0; }
.borderR { border-right: solid 1px #e0e0e0 !important; }
.borderLR { border-left: solid 1px #e0e0e0; border-right: solid 1px #e0e0e0; }

.borderDashed { border: dashed 1px #ccc; }
.borderDashedL { border-left: dashed 1px #ccc; }
.borderDashedR { border-right: dashed 1px #ccc; }
.borderDashedLR { border-left: dashed 1px #ccc; border-right: dashed 1px #ccc; }

.borderB-lg { border-bottom: solid 3px #C5DEF1; }

a.border:hover {
	border: solid 1px #ccc;
}

/********************/
/* horizontal rules */
hr,
.hr { 
	border: 0;
	border-top: solid 1px #e0e0e0;
	display: block;
	height: 1px;
	margin-top: 14px;
	margin-bottom: 14px;
	clear: both;
}
.hr-tall {
	border-top-width: 2px;
}
.hr-dashed {
	border-top-color: #ccc;
	border-top-style: dashed;
}

/******************/
/*** BOX STYLES ***/

/* boxes with background fill */
.box-bg { /* gray */
	background: #ededed;
}
	a.box-bg:hover {
		background: #ccc;
	}
.box-white { /* white */
	background: #fff;
}
    a.box-white:hover {
        background: #d3e7fd;
    }
.box-bgAlt { /* light blue */
	background: #d3e7fd;
}
.box-bgAlt2 { /* light yellow */
	background: #fdf0de;
}

/* rounded corners */
.rounded {
	border-radius: 10px;
}
.roundedLeft {
	border-radius: 10px 0 0 10px;
}
.roundedRight {
	border-radius: 0 10px 10px 0;
}
.roundedBottom {
	border-radius: 0 0 10px 10px;
}
.roundedTop {
	border-radius: 10px 10px 0 0;
}

/* box shadow */
.box-shadow {
	box-shadow: 1px 1px 5px #ccc;
}
a.box-shadow:hover {
	box-shadow: 1px 1px 8px #b6b6b6;
}

/* boxes with a top frame */
.box-frameTop {
	border-top: solid 10px #e5e5e5;
}
a.box-frameTop:hover {
	border-top: solid 10px #ccc;
}

/* boxes with a left frame */
.box-frameLeft {
	border-left: solid 10px #e5e5e5;
}
a.box-frameLeft:hover {
	border-left: solid 10px #ccc;
}

/* hyperlinked boxes */
a.box {
	color: #222;
	text-decoration: none;
}
a.box .link {
	color: #055bad;
}

/********/
/* misc */

.hide {
    display: none;
}

.zFix {
	position: relative;
	z-index: 999;
}
.zFix-sm {
	z-index: 10;
}

/* margin un-collapse (for child elements whose margin is appearing outside of its parent) */
.marginFix {
	overflow: auto;
}
.marginFix2 {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}