/*
2.0 Layout Styles

2.1 Edges
2.2 Page & Content
2.3 Panels
2.4 Columns
2.5 Indents
2.6 Table
2.7 Timeline
2.8 Dialogs
2.9 Miscellaneous Responsive

*/


/* 2.1 Edges */

div.edge-left {
	width: 30px;
	height: 100%;
	background-image: url('/images/bg-edge-left.png');
	background-size: 30px 30px;
	background-repeat: repeat-y;
	z-index: 100;
	position: fixed;
	top: 0;
	}

div.edge-right {
	width: 30px;
	height: 100%;
	background-image: url('/images/bg-edge-right.png');
	background-size: 30px 30px;
	background-repeat: repeat-y;
	z-index: 100;
	position: fixed;
	top: 0;
	}

@media all and (min-width: 1231px) {
div.edge-left {
	right: 50%;
	margin-right: 570px;
	}

div.edge-right {
	left: 50%;
	margin-left: 570px;
	}
	}

@media all and (min-width: 651px) and (max-width: 1230px) {
div.edge-left {
	left: 1%;
	}

div.edge-right {
	right: 1%;
	}
	}

@media all and (max-width: 650px) {
div.edge-left,
div.edge-right {
	display: none;
	}
	}



/* 2.2 Page & Content */

div.page {
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
	width: 100%;
	background: #fff;
	position: relative;
    z-index: 10;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
 	overflow-x: hidden;
	}

div.content {
	margin: auto;
	padding: 0px 50px 0px 50px;
	max-width: 1100px;
	position: relative;
	}

@media all and (max-width: 650px) {
div.content {
	padding: 0px 20px 0px 20px;
	}
	}



/* 2.3 Panels */

.panel {
	position: relative;
	overflow: auto; /* prevents margin-collapse of nested column layouts */
	overflow-x: hidden;
	}

.panel.light-gray {
	background: #f7f7f7;
	transition-property: all;
	transition-duration: .2s;
	transition-timing-function: ease;
	}

.panel.white {
	background: #fff;
	transition-property: all;
	transition-duration: .2s;
	transition-timing-function: ease;
	}

.panel.white h1,
.panel.white h2,
.panel.white h3,
.panel.white h4,
.panel.white h5 {
	color: #000;
	}

.panel.white h6 {
	color: #05526d;
	}

.panel.white p {
	color: #666;
	}



/* 2.4 Columns */

div.onecolumn,
div.twocolumns,
div.threecolumns,
div.fourcolumns,
div.fivecolumns,
div.sixcolumns {
	margin: 50px auto 50px auto;
	}

div.onecolumn:after,
div.twocolumns:after,
div.threecolumns:after,
div.fourcolumns:after,
div.fivecolumns:after,
div.sixcolumns:after {
	content: "";
	display: table;
	clear: both;
	}

div.onecolumn.tight,
div.twocolumns.tight,
div.threecolumns.tight,
div.fourcolumns.tight,
div.fivecolumns.tight,
div.sixcolumns.tight {
	margin: 30px auto 30px auto;
	}

div.onecolumn.extra-tight,
div.twocolumns.extra-tight,
div.threecolumns.extra-tight,
div.fourcolumns.extra-tight,
div.fivecolumns.extra-tight,
div.sixcolumns.extra-tight {
	margin: 10px auto 10px auto;
	}

div.column {
	margin: 0px 1.5% 0px 1.5%;
	float: left;
	}

div.twocolumns div.column {
	width: 47%;
	}

div.threecolumns div.column {
	width: 30.3333%;
	}

div.threecolumns div.column.double {
	width: 63.6666%;
	}

div.fourcolumns div.column {
	width: 22%;
	}

div.fourcolumns div.column.double {
	width: 47%;
	}

div.fourcolumns div.column.triple {
	width: 72%;
	}

div.fivecolumns div.column {
	width: 17%;
	}

div.fivecolumns div.column.double {
	width: 37%;
	}

div.fivecolumns div.column.triple {
	width: 57%;
	}

div.fivecolumns div.column.quadruple {
	width: 77%;
	}

div.sixcolumns div.column {
	width: 13.6666667%;
	}

div.onecolumn div.column,
div.twocolumns div.column.double,
div.threecolumns div.column.triple,
div.fourcolumns div.column.quadruple,
div.fivecolumns div.column.quintuple {
	width: 97%;
	float: none;
	}

div.onecolumn div.column.narrow,
div.twocolumns div.column.wide,
div.threecolumns div.column.wide,
div.fourcolumns div.column.wide,
div.fivecolumns div.column.wide,
div.sixcolumns div.column.wide {
	margin: 0px 13% 20px 13%;
	width: 74%;
	}

@media all and (max-width: 770px) {
div.onecolumn div.column.narrow,
div.twocolumns div.column.wide,
div.threecolumns div.column.wide,
div.fourcolumns div.column.wide,
div.fivecolumns div.column.wide,
div.sixcolumns div.column.wide {
	margin: 0px 1.5% 0px 1.5%;
	width: 97%;
	}

div.fourcolumns div.column {
	margin: 0px 1.5% 20px 1.5%;
	width: 47%;
	}

div.fourcolumns div.column.double {
	margin: 0px 1.5% 20px 1.5%;
	width: 97%;
	}

div.fivecolumns div.column,
div.fivecolumns div.column.double,
div.fivecolumns div.column.triple,
div.fivecolumns div.column.quadruple {
	margin: 0px 1.5% 0px 1.5%;
	width: 97%;
	}

div.sixcolumns div.column {
	width: 30.3333334%;
	}
	}

@media all and (max-width: 650px) {
div.twocolumns div.column,
div.twocolumns div.column.narrow-left,
div.twocolumns div.column.narrow-right {
	margin: 0px 1.5% 20px 1.5%;
	width: 97%;
	float: none;
	}

div.threecolumns div.column,
div.threecolumns div.column.double,
div.fourcolumns div.column,
div.fourcolumns div.column.double,
div.sixcolumns div.column {
	margin: 0px 1.5% 20px 1.5%;
	width: 97%;
	}
	}



/* 2.5 Indents */
/* These are primarily used in the Top 10 Sectors table to position the icon to the left of the sector names. Also used on the home page and Fact Sheet.  */

div.indent {
	margin: 5px 0px 20px 0px;
	padding: 0px 0px 0px 60px;
	}

div.indent span.icon {
	margin: -12px 0px 0px -60px;
	float: left;
	}

div.indent hr {
	margin: 10px 0px 10px -60px;
	}



/* 2.6 Articles */
/* These are used throughout the Distributions & Reports and News sections, to position the date to the left of the article title.  */

div.article-set {
	display: none;
	}

div.article {
	clear: left;
	border-top: 1px dashed #ccc;
	}

div.article p {
	margin: 10px 0px 10px 0px;
	font-family: "Freight Sans Medium";
	font-weight: normal;
	color: #666;
	font-size: 11px;
	line-height: 14px;
	float: left;
	}

div.article p.note,
div.article p.note a {
	font-size: 10px;
	line-height: 14px;
	color: #999;
	}

div.article h5 {
	margin: 10px 0px 10px 100px;
	font-size: 15px;
	line-height: 16px;
	}

div.article a:link,
div.article a:visited {
	color: #000;
	}

div.article a:hover,
div.article a:active {
	color: #02689a;
	}



/* 2.7 Tables */

table {
	margin: 10px 0px 40px 0px;
	padding: 0px 0px 0px 0px;
	font-family: "Freight Sans Medium";
	font-size: 15px;
	line-height: 18px;
	color: #333;
	border-collapse: collapse;
	table-layout: auto;
	text-align: left;
	vertical-align: top;
	width: 100%;
	}

@media all and (min-width: 651px) {
table.small {
	margin: 10px 0px 30px 0px;
	font-size: 13px;
	line-height: 14px;
	}
	}

@media all and (max-width: 650px) {
table {
	font-size: 16px;
	line-height: 18px;
	}
	}

@media (max-width: 600px) {
	table {
		display: block;
		max-width: -moz-fit-content;
		max-width: fit-content;
		margin: 0 auto;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* 2.6.1 Table Rows */

tr {
	border-top: 2px solid #fff;
	background-color: #f7f7f7;
	vertical-align: top;
	}

table.alternating tr:nth-child(odd),
tr.odd {
	border-top: 2px solid #fff;
	background-color: #f5f5f5;
	vertical-align: top;
	}

table.alternating tr:nth-child(even),
tr.even {
	border-top: 2px solid #fff;
	background-color: #fbfbfb;
	vertical-align: top;
	}

tr.white,
table.alternating tr.white {
	color: #333;
	background-color: #fff;
	vertical-align: top;
	}

tr.green {
	background: #bbc789;
	color: #fff;
	}

tr.blue {
	background: #619dc6;
	color: #fff;
	}



/* 2.6.2 Table Headers */

th {
	margin: 0px 0px 0px 0px;
	padding: 7px 12px 7px 12px;
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
	font-family: "Freight Sans Semibold";
	font-weight: normal;
	font-size: 14px;
	line-height: 16px;
	text-align: right;
	text-transform: uppercase;
	letter-spacing: 1px;
	background: #f0f0f0;
	}

@media all and (min-width: 651px) {
table.small th {
	padding: 7px 10px 7px 10px;
	font-size: 12px;
	line-height: 14px;
	}
	}

@media all and (max-width: 650px) {
table th {
	padding: 7px 10px 7px 10px;
	font-size: 12px;
	line-height: 14px;
	}
	}


tr.green th {
	background: #bbc789;
	color: #fff;
	}

tr.blue th {
	background: #619dc6;
	color: #fff;
	}



/* 2.6.3 Table Cells */

td {
	margin: 0px 0px 0px 0px;
	padding: 10px 12px 10px 12px;
	text-align: right;
	}

table.small td {
	padding: 9px 10px 9px 10px;
	}


td.left,
th.left {
	text-align: left;
	float: none;
	}

td.center {
	margin: 0px auto 0px auto;
	text-align: center;
	}

td.bold {
	font-family: "Freight Sans Semibold";
	color: #000;
	}

tr.subtotal,
table.alternating tr.subtotal {
	border-top: 2px solid #bbc789;
	font-family: "Freight Sans Semibold";
	color: #000;
	vertical-align: top;
	background-color: #fff;
	}

tr.total,
table.alternating tr.total {
	border-top: 2px solid #bbc789;
	border-bottom: 2px solid #bbc789;
	font-family: "Freight Sans Semibold";
	color: #000;
	vertical-align: top;
	background-color: #fff;
	}

tr.subtotal.blue,
table.alternating tr.subtotal.blue,
tr.total.blue,
table.alternating tr.total.blue {
	border-top: 2px solid #619dc6;
	}



/* 2.6.4 Table Text */

td h5 {
	margin: 0px 0px 5px 0px;
	font-family: "Freight Sans Semibold";
	}

@media all and (max-width: 650px) {
td h5 {
	margin: 0px 0px 5px 0px;
	font-family: "Freight Sans Semibold";
	font-size: 16px;
	line-height: 18px;
	}
	}



div.page#fact-sheet td h5 {
	margin: 0px 0px 5px 0px;
	font-family: "Freight Sans Semibold";
	font-size: 15px;
	line-height: 18px;
	}

td p {
	margin: 0px 0px 3px 0px;
	font-size: 14px;
	line-height: 16px;
	color: #666;
	}



/* 2.6.5 ColGroups (Cell Widths) */

colgroup#dividends-per-common-share col#column1,
colgroup#dividends-per-common-share col#column2,
colgroup#dividends-per-common-share col#column3,
colgroup#dividends-per-common-share col#column4 {
	width: 25%;
	}



/* 2.8 Dialogs */

div.dialog-outer {
	margin: -22% 0px 0px -20%;
	padding: 1% 1% 1% 1%;
	border-radius: 10px 10px 10px 10px;
	width: 40%;
	background: rgba(0,0,0,0.6);
	box-shadow: 0px 0px 30px rgba(0,0,0,0.3);
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 101;
	display: none;
	}

@media all and (max-width: 850px) {
div.dialog-outer {
	margin: -30% 0px 0px -40%;
	width: 80%;
	}
	}

div.dialog-inner {
	padding: 25px 25px 25px 25px;
	border-radius: 7px 7px 7px 7px;
	background: #fff;
	text-align: center;
	}

div.dialog-inner p {
	margin: 0px 0px 16px 0px;
	font-size: 14px;
	line-height: 16px;
	color: #333;
	}




/* 2.10 Miscellaneous Responsive */

div.page#fact-sheet .no-factsheet {
	display: none;
	}

@media all and (max-width: 650px) {
.no-mobile {
	display: none;
	}
	}

@media all and (min-width: 651px) and (max-width: 770px) {
.no-tablet {
	display: none;
	}
	}

@media all and (min-width: 771px) {
.no-desktop,
img.customer.no-desktop {
	display: none;
	}
	}

#tabpages .tabpage .content .column h3.loose { margin-top: 55px; }
#tabpages .tabpage .content .column h3.loose:first-child { margin-top: 20px; }