/*
=======================================================================
	 structure.css - All the positioning styles
=======================================================================
*/

.bcu-header {
    padding-top:30px;
    padding-bottom:30px;
}



.page {
    max-width: 940px;
    margin: 0 auto;
    padding: 0;
}



.center { margin:auto; }

/* new clearfix - suitable for hover reveal elements */
.clear-fix:after, 
.base-tabs:after,
.col-row:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

/* last col needs this to play nicely with floats */
.last-col { overflow: hidden;} 

/* IE7 */
*:first-child+html .clear-fix,
*:first-child+html .base-tabs,
*:first-child+html .col-row,
*:first-child+html .last-col { zoom: 1; } 

/* last resort - add an element with class of clear */
.clear { clear:both;}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

.hide-x { overflow-x: hidden;}

/**
 * =======================================================================
	 Columns
 * =======================================================================
 */
.size1of1   { width: 100% ;}
.size1of2   { width: 49.9999% ;}
.size1of3   { width: 33.33333% ; }
.size2of3   { width: 66.66666% ; } 
.size1of4   { width: 25% ; }
.size3of4   { width: 75% ; }
.size1of5   { width: 19.999% ; }
.size2of5   { width: 40% ; }
.size3of5   { width: 60% ; }
.size4of5   { width: 79.9999% ; }
.size1of6   { width: 16.66% ;}
.size1of7   { width: 14.285% ;}
.size1of8   { width: 12.50% ;}
.size1of9   { width: 11.11% ;}
.size1of10  { width: 10.00% ;}
.size1of11  { width: 9.09% ;}

.size1of12  { width: 8.33333% ; }
.size2of12  { width: 16.66667% ; }
.size3of12  { width: 25% ; }
.size4of12  { width: 33.33333% ; }
.size5of12  { width: 41.66667% ; }
.size6of12  { width: 50% ; }
.size7of12  { width: 58.33333% ; }
.size8of12  { width: 66.66667% ; }
.size9of12  { width: 75% ; }
.size10of12 { width: 83.33333% ; }
.size11of12 { width: 91.66667% ; }
.size12of12 { width: 100% ; }

.size1of16  {width: 6.25% ;}
.size2of16  {width: 12.5% ;}
.size3of16  {width: 18.75% ;} 
.size4of16  {width: 25.0% ;}
.size5of16  {width: 31.25% ;}
.size6of16  {width: 37.5% ;}
.size7of16  {width: 43.75% ;}
.size8of16  {width: 50.0% ;}
.size9of16  {width: 56.25% ;}
.size10of16 {width: 62.5% ;}
.size11of16 {width: 68.75% ;}
.size12of16 {width: 75.0% ;}
.size13of16 {width: 81.25% ;}
.size14of16 {width: 87.5% ;}
.size15of16 {width: 93.75% ;}
.size16of16 {width: 100% ;}

.size1of9, .child-9 > li        {width:11%;}
.size1of10, .children-10 > li   { width:10%; }

.col-space-left     { margin-left: 0;}
.col-space-right    { margin-right: 0;}

/**
 * =======================================================================
	 Wrap .size*of* in .grid to create columns with automatic gutter padding
     Add .grid-col + .half-gutter for more control of gutters
 * =======================================================================
 */
.grid {
    clear: both;
    margin-left: -1.5em;
    overflow: hidden;
    }

.grid .size1of1,
.grid .size1of2,
.grid .size1of3,
.grid .size2of3,
.grid .size1of4,
.grid .size3of4,
.grid .size1of5,
.grid .size2of5,
.grid .size3of5,
.grid .size4of5,
.grid-col
 {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding-left: 1.5em;
    }

.half-gutter            {margin-left: -0.5em; }
.half-gutter .grid-col  {padding-left: 0.5em; }

.size-golden-long {width:61.803398%; }
.size-golden-short {width:38.196602%; }

.size1of1, 
.lt480 .lt480-break {width: 100%; float:none; }



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

    .grid            {margin-left: -0.5em; }
    .half-gutter     {margin-left: -0.25em; }

    .grid .size1of1,
    .grid .size1of2,
    .grid .size1of3,
    .grid .size2of3,
    .grid .size1of4,
    .grid .size3of4,
    .grid .size1of5,
    .grid .size2of5,
    .grid .size3of5,
    .grid .size4of5,
    .grid-col {padding-left: 0.5em;}

    .half-gutter .grid-col  {padding-left: 0.25em; }

	.m-size1of1 { width: 100% !important; min-width: 100% !important; }
	.m-size1of2 { width: 50% !important; min-width: 50% !important; }
	.m-size1of3 { width: 33.33333% !important; min-width: 33.33333% !important; }
	.m-size1of4 { width: 25% !important; min-width: 25% !important; }
	.m-size3of4 { width: 75% !important; min-width: 75% !important; }
	.m-size1of5 { width:19.999% !important; min-width:19.999% !important; }
	.m-size2of5 { width:40% !important; min-width:40% !important; }
	.m-size3of5 { width:60% !important; min-width:60% !important; }
	.m-size4of5 { width:79.9999% !important; min-width:79.9999% !important; }

    .m-size1of8 {
        width: 12.50% !important;
        min-width: 12.50% !important;
    }

    .m-size7of8 {
        width: 87.50% !important;
        min-width: 87.50% !important;
    }

    .m-hidden { display: none !important; }

    .m-page { padding-left: 0.5em; padding-right:0.5em}
}

@media only screen and (min-width: 481px) and (max-width: 899px) {
    .t-size1of4 {
        width: 25% !important;
        min-width: 25% !important;
    }
    .t-size1of2 {
        width: 50% !important;
        min-width: 50% !important;
    }

}


.push1of2   {margin-left: 50%;}
.push1of3   {margin-left:33.33333%; }
.push1of4   {margin-left:25%;}
.push1of5   {margin-left:20%;}
.push3of4   {margin-left: 75%;}
.push3of16  {margin-left:18.75%;}

.push1of12  {margin-left:8.33333%;}
.push2of12  {margin-left:16.66667%;}
/*.push3of12 same as .push1of4*/
/*.push4of12 same as .push1of3*/
.push5of12  {margin-left:41.66667%;}
/*.push6of12 same as .push1of2*/
.push7of12  {margin-left: 58.33333%;}
.push8of12  {margin-left: 66.66667%;}
/*.push9of12 same as .push3of4*/
.push10of12 {margin-left:83.33333%;}
.push11of12 {margin-left:91.66667%;}

/* .grid--- modifiers*/
@media only screen and (max-width: 320px) {

    .grid--cards .grid-col {
        margin-bottom: 1.5em;
    }

    .grid--cards > .size1of2:last-of-type,
    .grid--cards > .size1of3:last-of-type,
    .grid--cards > .size1of4:last-of-type {
        padding-right: 0.5em;
    }
}

@media only screen and (min-width: 481px) and (max-width: 899px) {

    .grid--cards > .size1of3,
    .grid--cards > .size1of4,
    .grid--cards > .size1of5 {
        width: 50%;
        float: left;
        min-width: inherit;
    }

        .grid--cards > .size1of3:nth-child(even) {
            padding-right: 0.5em;
        }

    .grid.t-full-gutter {
        padding-left: -1.5em;
    }

    .grid.t-full-gutter .grid-col {
        padding-left: 1.5em;
    }
}

@media only screen and (max-width: 900px) {
    .grid--cards > .grid-col {
        padding-right: 0.5em;
        margin-bottom: 1.5em;
    }
}

@media only screen and (min-width: 900px) {
    .grid--cards > .grid-col {
        padding-right: 0.5em;
        margin-bottom: 1.5em;
    }
}

/**
 * =======================================================================
	 EM Widths: 
     usually used for flyouts and elements that are only visible on medium to large devices like flyout menus and header tabs
     not mobile re-sizable, but will adjust to contain different size text
 * =======================================================================
 */
.size7em { width: 7em;}
.size14em {width: 14em;}
.size20em { width: 20em;}
.size30em { width: 30em;}
.size35em { width: 35em;}
.size40em { width: 40em;}
.size45em { width: 45em;}
.size47em { width: 47em;}
.size50em { width: 50em;}
.size55em { width: 55em;}
.size60em { width: 60em;}
.size80em { width: 80em;}
.size90em { width: 90em;}
.size100em { width:100em;}

.oversize { width: 101%;} /* for % width elements that round up above full width eg in galleries */

/**
 * =======================================================================
	 Alignment (M|T|D)
 * =======================================================================
 */
/* NOTE : .left-col is killed by mobile styling, .left is not */
.left-col { float:none; display:block; min-width:100%; }
.left { float: left;}

/* NOTE: .right-col is killed by device styling,  .right is not */
.right-col { float:none; display:block; min-width:100%; }
.right{ float: right;}

/**
 * =======================================================================
	 Alignment (T)
 * =======================================================================
 */
    @media only screen and (min-width: 481px) and (max-width: 900px) {
        .kill-tablet .left-col { min-width:1px; float: left;}
        /* NOTE sizes n.99999% are compatible with resizing in ie7*/
    }

/**
 * =======================================================================
	 Alignment (D)
 * =======================================================================
 */
    @media only screen and (min-width: 900px) {
        /* NOTE : .left-col is killed by mobile styling, .left is not */
        .left-col{ 	float:left; min-width:inherit;}

        /* NOTE: .right-col is killed by device styling,  .right is not */
        .right-col{ float:right; min-width:inherit;}

        /* add gutters that get killed by mobile styling */
        .col-space-left { margin-left: 20px;}
        .col-space-right { margin-right: 20px;}
    }

/**
 * =======================================================================
	 Alignment (D+)
 * =======================================================================
 */
    @media only screen and (max-width: 899px)
    {
	    .left-col.push1of4 { margin: 0 !important;}
    }

.abs-middle {
    text-align: center;
    vertical-align:middle;
    top: 50%;
    position: relative;
}
.v-align--middle {
    vertical-align: middle;
}
/*vertical align any element*/
.v-align-middle {
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
/*.v-align elements can appear blurry as can be placed on half-pixel add following to parent element to correct blur*/
.preserve3d-for-valign {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;  
}

.v-align-items {
	display:table;
}

.v-align_item--middle {
	display:table-cell;
	vertical-align:middle;
}

/**
 * =======================================================================
	 Height Helpers
    instances where columns need to be the same height - use sparingly, height should normally be controlled by content 

    h= height
    t = tiny
    s = small 100px
    m = medium 200px
    l = large 341px
    lg = largest 360px
    mx = medium extended 300px
    trailing s = scroll
 * =======================================================================
 */
.ht  { min-height:36px; _height:36px;}
.hs  { min-height:110px; _height:110px;}
.hm  { min-height:200px; _height:200px;}
.hl  { min-height:341px; _height:341px;}
.hlg { min-height:520px; _height:520px;}

.content-min-height {min-height:600px;_height: 600px;}

.cms-max-height { max-height: 330px;overflow-y: auto;}

/* scrolling boxes max heights - used on widgets */
.hss, .hms, .hls {
	overflow-x:hidden;
	overflow-y:scroll;
}

.auto-height { height: auto !important; }
.full-height { height: 100%;}

/**
 * =======================================================================
	Spacing  Helpers 
    
    1: p = padding, m = margin

    2: a = all, n = none, t = top, v = vertical (top & bottom), h = horizontal (left & right), t= top, r = right, b = bottom, l = left

    3: s = small (0.5em), m= medium(1em), l = large()1.5em n = none
 * =======================================================================
 */
.ptn,.pvn,.pan{padding-top:0 !important}
.pts,.pvs,.pas{padding-top:5px !important}
.ptm,.pvm,.pam{padding-top:10px !important}
.ptl,.pvl,.pal{padding-top:20px !important}
.prn,.phn,.pan{padding-right:0 !important}
.prs,.phs,.pas{padding-right:5px !important}
.prm,.phm,.pam{padding-right:10px !important}
.prl,.phl,.pal{padding-right:20px !important}
.pbn,.pvn,.pan{padding-bottom:0 !important}  
.pbs,.pvs,.pas{padding-bottom:5px !important}
.pbm,.pvm,.pam{padding-bottom:10px !important}
.pbl,.pvl,.pal{padding-bottom:20px !important}
.pln,.phn,.pan{padding-left:0 !important}
.pls,.phs,.pas{padding-left:5px !important}
.plm,.phm,.pam{padding-left:10px !important}
.pll,.phl,.pal{padding-left:20px !important}
.mtn,.mvn,.man{margin-top:0 !important}
.mts,.mvs,.mas{margin-top:5px !important}
.mtm,.mvm,.mam{margin-top:10px !important}
.mtl,.mvl,.mal{margin-top:20px !important}
.mrn,.mhn,.man{margin-right:0 !important}
.mrs,.mhs,.mas{margin-right:5px !important}
.mrm,.mhm,.mam{margin-right:10px !important}
.mrl,.mhl,.mal{margin-right:20px !important}
.mbn,.mvn,.man{margin-bottom:0 !important}  
.mbs,.mvs,.mas{margin-bottom:5px !important}
.mbm,.mvm,.mam{margin-bottom:10px !important}
.mbl,.mvl,.mal{margin-bottom:20px !important}
.mln,.mhn,.man{margin-left:0 !important}
.mls,.mhs,.mas{margin-left:5px !important}
.mlm,.mhm,.mam{margin-left:10px !important}
.mll,.mhl,.mal{margin-left:20px !important}

.mbxs { margin-bottom: 1px !important;}
.mrxs {margin-right: 1px !important;}
.mlxs {margin-left: 1px !important;}
.maxs {margin: 1px!important;}

.cms-form .mbxl { margin-bottom: 80px!important;}

.stack-top { z-index: 99999;}
.has-icon, .has-icon-right, .has-bullet, .has-bullet li { position: relative; display: block;}

.has-icon { padding-left:30px  !important}
.has-icon-right { padding-right:30px !important }
.has-bullet, .has-bullet li {padding-left:18px  !important } 

/* necessary evil to fix gallery slide width rounding up and overspilling their container */
.minus-left{ margin-left: -4px;}

/**
 * =======================================================================
	 General display helpers
 * =======================================================================
 */
.block, .article .bcu-button.block { display:block;}
.inline-block { display: inline-block!important;}
.inline { display: inline;}
.fixed { position: fixed;}
.kill-width, .kill-width * {width:auto!important;}
.kill-margin { margin: 0!important;}
@media(max-width:900px) {

    .m-kill-margin {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
.kill-padding { padding: 0!important;}
.pos-rel { position: relative;}
.pos-abs { position: absolute;}
.ie-haslayout {zoom: 1;}

/**
 * =======================================================================
	 Hiding Elements
 * =======================================================================
 */
/* visible to screen readers */
.off-screen {
	position:absolute;
	text-indent:-10000px;
    direction: ltr;
	left:-10000px;
	height: 1px;
}

/**
 * =======================================================================
	 Hover Reveals
 * =======================================================================
 */
.relative {
 position:relative;
	
}

.reveal-left /* show hover to the left of element */ {
	right: 0;
	left: auto;
}
.reveal-top-right {
	top: 0;
	left: 100%;
}

.top-right-bar {
	right:0;
    top: -20px;
	position: absolute;
    height: 19px;
   
}
.top-left-bar {
    top: -19px;
	position: absolute;
    z-index: 999;
}
	


.site-map-block {
	min-height: 450px;
}

.thumb-gallery li {
	padding-right: 9px;
	padding-bottom:9px
}

.overflow-auto {
    overflow: auto
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
	overflow: visible;
}
.reveal-above
{
    overflow: hidden;
    bottom: 100px;
    background-color: #fff;
    -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.80);
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.80);
    margin-left: 1px;
}

.fix-bottom { 
    position: fixed;
    bottom: 0;
}
.tall-scroll {
    min-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;

}

/* Fluid Elements */

.grey-box img { max-width:100%; height:auto;} 
.article img { max-width:100%; height:auto;}

.fluid-img img {
    width: 100%;
    height: auto;
    display: block;
}

    @media only screen and (min-width: 900px) {
        .grey-box img { max-width:inherit; height:auto;} 
        .article img { max-width:inherit; height:auto;} 
        .fluid-img img {width: auto; height: auto; display: block;}
    }


.scalable,
.scalable img, 
.scale-images object,
.scale-images video,
.responsive-img,
iframe { width: 100%;box-sizing: border-box;}

.status-bar li {display:inline-block;vertical-align: middle;}
.status-bar .hover-reveal a span { vertical-align: middle;display: inline-block;}
.status-bar .hover-reveal-content .block-list li { width: 100%;}


.toolbar-dropdown--submenu { margin-left: 90%;}



/*Infinite loop 360 degree rotation*/
.spin {
  display:inline-block;
    /*text-align: center;
    vertical-align: middle;*/
-webkit-animation: spin 0.7s infinite linear;
-moz-animation: spin 0.7s infinite linear;
-o-animation: spin 0.7s infinite linear;
-ms-animation: spin 0.7s infinite linear;
    letter-spacing: 0!important;
}

@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}

.no-cssanimations .spin:before { content: ''; }
.no-cssanimations .spin{
    background:url("/Content/imgs/icons/segment-small.gif")center no-repeat;
    *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = null);
    height: 16px;
    width: 16px;

}

.noscroll {overflow: hidden; width: 100%;}


#itempreview {
    height: 280px;
}

.cms-message {
    z-index: 1000;
    position: absolute;
    top: 40px;
    width: 100%;

}
.ie .cms-message {
    top: 46px;
}

.hover-reveal-content { z-index: 1000;}

.fixed-mod
{
    position: fixed;
    z-index: 1000000;
    width: 100%;
}

.remove-mediaitem{
    margin-left: -14px;
    margin-top: -12px;
    cursor: pointer;
}
.lt-ie8 .remove-mediaitem {
    margin-left: 0;
    margin-top: 0;
}

.module a, .content-block a {position: relative;z-index: 2;}

.touch a:hover * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
   -webkit-transform: none !important;
  -moz-transform: none !important;
  -o-transform: none !important;
  -ms-transform: none !important;
   
  
}

.hide-on-mobile {
    display: none;
    visibility: hidden;
}


@media screen and (min-width: 480px) {
    .mobile-only {
        display: block;
        visibility: visible;
    }
}

@media screen and (min-width: 700px) {

    .mobile-only {
        display: none;
        visibility: hidden;
    }

    .hide-on-mobile {
        display: block;
        visibility: visible;
    }

    .hide-on-tablet {
        display: none;
        visibility: hidden;
    }
}

@media screen and (min-width: 940px) {
    .mobile-only {
        display: none;
        visibility: hidden;
    }

    .hide-on-mobile {
        display: block;
        visibility: visible;
    }

    .hide-on-desktop {
        display: none;
        visibility: hidden;
    }
}


.top-right {
    top: 0;
    right: 0;
}

.top-left {
    top: 0;
    left: 0;
}