/* GRID
---------------------------------------------------------------------------------------- //// */

/* container ----------------------------------------------- //// */
.container {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%;
    max-width: 1360px; /*permits 1280px column when taking 40px left/right outer gutter into consideration*/
    padding: 0 10px;
}

/* fields ----------------------------------------------- //// */
.fields {
	clear:both}
.ie7 .fields {
	zoom:1}

.fields:before,
.fields:after {
	display:table;
	content:''}
.fields:after {
	clear:both}

/* borders */ /*As of 5/2014, only used on Card/Index.aspx line 44*/
.fields.border_top {
	padding-top:1.714286em; /* 24px */
	border-top:2px solid #333}
.fields.border_bottom {
	margin-bottom:1.714286em; /* 24px */
	border-bottom:2px solid #333}

/* region ----------------------------------------------- //// */
.region {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
    padding: 0 10px;
}

/* media ----------------------------------------------- */
.region embed,
.region img,
.region object,
.region video {
	max-width:100%}

.region img,
.region video {
	/* height:auto */}

.ie7 .region img {
	-ms-interpolation-mode:bicubic}

.ie8 .region img {
    width: auto}

.media-full { /*as of 5/2014, this is not used anywhere*/
	margin-left:-3%;
	width:106%}

/* blocks ----------------------------------------------- //// */
.blocks {
	display:block;
	clear:both;
	margin-left:-20px;
	list-style:none}
.blocks:after {
	display:block;
	clear:both;
	content:''}

.blocks > li {
	display:block;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	clear:both;
	padding:0 0 0 20px;
	background:none}


/* MEDIA QUERY: 320px
---------------------------------------------------------------------------------------- //// */
@media (min-width:320px) {
	/* blocks ----------------------------------------------- //// */
	.blocks > li {
		clear:none}
	.blocks-four-up > li,
	.blocks-five-up > li,
	.blocks-six-up > li {
		float:left;
		width:50%}
	.blocks-four-up > li:nth-child(2n+1),
	.blocks-five-up > li:nth-child(2n+1),
	.blocks-six-up > li:nth-child(2n+1) {
		clear:left}

	/* nth-child polyfill (IE7, IE8, etc) ----------------------------------------------- */
	.no-nthchild .blocks-start {
		clear:left}
	.no-nthchild .blocks-end {
		zoom:1;
		float:none;
		width:auto}
}


/* MEDIA QUERY: 480px
---------------------------------------------------------------------------------------- //// */
@media (min-width:480px) {
	/* region ----------------------------------------------- //// */
	.region:after {
	    display:table;
	    content:''}
    .region:after {
	    clear:both}
	
	/* blocks ----------------------------------------------- //// */
	.blocks-two-up > li,
	.blocks-three-up > li {
		float:left;
		width:50%}

	.blocks-five-up > li,
	.blocks-six-up > li {
		width:33.333333%}
	.blocks-five-up > li:nth-child(2n+1),
	.blocks-six-up > li:nth-child(2n+1) {
		clear:none}
	.blocks-two-up > li:nth-child(2n+1),
	.blocks-three-up > li:nth-child(2n+1),
	.blocks-five-up > li:nth-child(3n+1),
	.blocks-six-up > li:nth-child(3n+1) {
		clear:left}
	.blocks img {
		width:auto}
}


/* MEDIA QUERY: 600px
---------------------------------------------------------------------------------------- //// */
@media (min-width:600px) {
	/* blocks ----------------------------------------------- //// */
	.blocks-three-up > li {
		width:33.333333%}
	.blocks-four-up > li {
		width:25%}
	.blocks-five-up > li {
		width:20%}
	.blocks-six-up > li {
		width:16.666667%}

	.blocks-three-up > li:nth-child(2n+1),
	.blocks-four-up > li:nth-child(2n+1),
	.blocks-five-up > li:nth-child(2n+1),
	.blocks-five-up > li:nth-child(3n+1),
	.blocks-six-up > li:nth-child(3n+1) {
		clear:none}
	.blocks-three-up > li:nth-child(3n+1),
	.blocks-four-up > li:nth-child(4n+1),
	.blocks-five-up > li:nth-child(5n+1),
	.blocks-six-up > li:nth-child(6n+1) {
		clear:left}
}


/* MEDIA QUERY: 769px
---------------------------------------------------------------------------------------- //// */
@media (min-width:769px) {
	/* container ----------------------------------------------- //// */
	.container,
    .region {
		padding: 0 12px;
	}
    .blocks {
        margin-left: -24px;
    }

    .blocks > li {
	    padding: 0 0 0 24px;
    }

	/* region ----------------------------------------------- //// */
	.region {
		position:relative;
		float:left;
	}

	/* ---- reset padding ---- */
	.region.reset,
	.region.reset-left {
		padding-left:0}
	.region.reset,
	.region.reset-right {
		padding-right:0}

	/* ---- last region ---- */
	.ie7 .region-last {
		/* class add via JS */
		zoom:1;
		float:none;
		width:auto}

	/* ---- sizes ---- */
	.size1of1 {float:none}
	.size1of2 {width:50%}
	.size1of3 {width:33.333333%}
	.size2of3 {width:66.666666%}
	.size1of4 {width:25%}
	.size3of4 {width:75%}
	.size1of5 {width:20%}
	.size2of5 {width:40%}
	.size3of5 {width:60%}
	.size4of5 {width:80%}
	.size1of6 {width:16.666667%}
	.size5of6 {width:83.333333%} /*as of 5/2014, not used anywhere*/
	.size1of7 {width:14.285714%} /*as of 5/2014, not used anywhere*/
        /*as of 5/2014, only used on Shop/ECardPromo.aspx(36)*/
	    .size-golden-long {width:61.803398%}
	    .size-golden-short {width:38.196602%}

	/* ---- prefix ---- */
    /*as of 5/2014, not used anywhere*/
	.prefix1of2 {margin-left:50%}
	.prefix1of3 {margin-left:33.333333%}
	.prefix2of3 {margin-left:66.666666%}
	.prefix1of4 {margin-left:25%}
	.prefix3of4 {margin-left:75%}
	.prefix1of5 {margin-left:20%}
	.prefix2of5 {margin-left:40%}
	.prefix3of5 {margin-left:60%}
	.prefix4of5 {margin-left:80%}
	.prefix1of6 {margin-left:16.666667%}
	.prefix5of6 {margin-left:83.333333%}
	.prefix1of7 {margin-left:14.285714%}
	.prefix-golden-long {margin-left:61.803398%}
	.prefix-golden-short {margin-left:38.196602%}

	/* ---- suffix ---- */
	.suffix1of2 {margin-right:50%}
	.suffix1of3 {margin-right:33.333333%}
	.suffix2of3 {margin-right:66.666666%}
    /*as of 5/2014, the rest of these are not used anywhere*/
	.suffix1of4 {margin-right:25%}
	.suffix3of4 {margin-right:75%}
	.suffix1of5 {margin-right:20%}
	.suffix2of5 {margin-right:40%}
	.suffix3of5 {margin-right:60%}
	.suffix4of5 {margin-right:80%}
	.suffix1of6 {margin-right:16.666667%}
	.suffix5of6 {margin-right:83.333333%}
	.suffix1of7 {margin-right:14.285714%}
	.suffix-golden-long {margin-right:61.803398%}
	.suffix-golden-short {margin-right:38.196602%}

	/* ---- push ---- */
	.push1of2 {left:50%}
	.push1of3 {left:33.333333%}
	.push2of3 {left:66.666666%}
    /*as of 5/2014 the rest aren't used anywhere*/
	.push1of4 {left:25%}
	.push3of4 {left:75%}
	.push1of5 {left:20%}
	.push2of5 {left:40%}
	.push3of5 {left:60%}
	.push4of5 {left:80%}
	.push1of6 {left:16.666667%}
	.push5of6 {left:83.333333%}
	.push1of7 {left:14.285714%}
	.push-golden-long {left:61.803398%}
	.push-golden-short {left:38.196602%}

	/* ---- push filler ----*/
	.push1of2, 
	.push1of3,
	.push2of3,
	.push1of4,
	.push3of4,
	.push1of5,
	.push2of5,
	.push3of5,
	.push4of5,
	.push1of6,
	.push5of6,
	.push1of7,
	.push-golden-long,
	.push-golden-short {
		min-height: 1px;
	}

	/* ---- pull ---- */
	.pull1of2 {left:-50%}
	.pull1of3 {left:-33.333333%}
    /*as of 5/2014, the rest aren't used anywhere*/
	.pull2of3 {left:-66.666666%}
	.pull1of4 {left:-25%}
	.pull3of4 {left:-75%}
	.pull1of5 {left:-20%}
	.pull2of5 {left:-40%}
	.pull3of5 {left:-60%}
	.pull4of5 {left:-80%}
	.pull1of6 {left:-16.666667%}
	.pull5of6 {left:-83.333333%}
	.pull1of7 {left:-14.285714%}
	.pull-golden-long {left:-61.803398%}
	.pull-golden-short {left:-38.196602%}

	/* ---- centered ---- */
    /*as of 5/2014, only used on a few TWAC pages*/
	.region-centered {
		float:none;
		margin:0 auto}

	/* ---- keyline ---- */
    /*as of 5/2014, keyline left used once: Views\Shop\StarbucksCardList.ascx(4)
      keyline-right is not used*/
	.region-keyline-left {
		border-left:1px solid #e6e5e3}
	.region-keyline-right {
		border-right:1px solid #e6e5e3}

	/* media ----------------------------------------------- */
    /*as of 5/2014, not used*/
	.media-full {
		margin-left:0;
		width:100%}
}

@media (min-width:1024px) {
    .container,
    .region {
        padding: 0 15px;
    }
    .blocks {
        margin-left: -30px;
    }

    .blocks > li {
	    padding: 0 0 0 30px;
    }
}

@media (min-width:1280px) {
    .container, 
    .region {
        padding: 0 20px;
    }
    .blocks {
        margin-left: -40px;
    }

    .blocks > li {
	    padding: 0 0 0 40px;
    }
}