/*
Theme Name: DREA Report
Author: Wei Sheng
Description: DREA Report theme
Version: 1.0

*/


/**
 * Table of Contents
 *
 * 1.0 - Normalize
 * 2.0 - Genericons
 * 3.0 - Typography
 * 4.0 - Elements
 * 5.0 - Forms
 * 6.0 - Navigation
 *   6.1 - Links
 *   6.2 - Menus
 * 7.0 - Accessibility
 * 8.0 - Alignments
 * 9.0 - Clearings
 * 10.0 - Widgets
 * 11.0 - Content
 *    11.1 - Header
 *    11.2 - Posts and pages
 *    11.3 - Post Formats
 *    11.4 - Comments
 *    11.5 - Sidebar
 *    11.6 - Footer
 * 12.0 - Media
 *    12.1 - Captions
 *    12.2 - Galleries
 * 13.0 - Multisite
 * 14.0 - Media Queries
 *    14.1 - >= 710px
 *    14.2 - >= 783px
 *    14.3 - >= 910px
 *    14.4 - >= 985px
 *    14.5 - >= 1200px
 * 15.0 - Print
 */


/**
 * 1.0 - Normalize
 *
 * Normalizing styles have been helped along thanks to the fine work of
 * Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
 */

html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: 700;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 0;
}

hr {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

code,
kbd,
pre,
samp {
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

select {
	text-transform: none;
}

button {
	overflow: visible;
}

button,
input,
select,
textarea {
	max-width: 100%;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
	opacity: .5;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input[type="checkbox"],
input[type="radio"] {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-right: 0.4375em;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"] {
	-webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #d1d1d1;
	margin: 0 0 1.75em;
	min-width: inherit;
	padding: 0.875em;
}

fieldset > :last-child {
	margin-bottom: 0;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

optgroup {
	font-weight: bold;
}

/***** Start! *****/
@font-face {
    font-family: Lato;
    src: url(fonts/Lato-Regular.woff);
}
@font-face {
    font-family: Lato;
	font-weight: bold;
    src: url(fonts/Lato-Bold.woff);
}

html, body {
	font-family: 'Lato', sans-serif !important;
	font-size: 14px;
	color: #666;
}

header#report-header {
    width: 100%;
    height: 400px;
    background-size: cover !important;
    background-position: center;
	position: relative;
}

.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0,0,0,0.6);
}

.top-bar {
    width: 80%;
    margin: 25px auto auto auto;
}

a.drea-download-link {
    float: right;
    display: block;
    padding: 10px 15px;
    border: 3px solid #FFF;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 1.25em;
    text-transform: uppercase;
    margin-left: 10px;
}

a.exp-drea {
    background: #FFF;
    color: #2489ce !important;
    /* padding: 15px 25px; */
}

header#report-header h1 {
	width: 100%;
	color: #FFF;
	padding: 0;
	margin: 0;
	text-align: center;
	bottom: 50px;
	left: 50%;
	font-size: 3em;
	transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	position: absolute;
}

span.contents-header {
	font-size: 36px;
	color: #2489CE;
	display: block;
	margin-bottom: 25px;
}

.aligncenter {
    margin: auto;
    display: block;
}
.alignleft {
    margin: auto;
	margin-right: 20px;
    float: left;
}
.alignright {
    margin: auto;
	margin-left: 20px;
    float: right;
}

.main-contents {
    width: 80%;
    margin: auto;
    padding: 25px 0px;
}

.main-contents img {
    max-width: 100%;
    height: auto;
}

.main-contents h1,
.main-contents h2,
.main-contents h3,
.main-contents h4,
.main-contents h5,
.main-contents h6 {
	color: #2489CE;
	padding: 0 20px;
}

.main-contents p {
	padding: 0 20px;
}

.main-contents h4 {
	color: #333;
    font-size: 1.5em !important;
}

.main-contents a,
.main-contents a:active,
.main-contents a:visited {
    color: #2489CE;
	text-decoration: none;
}

.main-contents a:hover {
    color: #333;
	text-decoration: none;
}

p {
	text-align: left;
}

.main-contents blockquote:before {
    content: '“';
    font-size: 200px;
    line-height: 160px;
    font-family: sans-serif;
	top: 0;
	left: 0;
	color: rgba(255,255,255,0.5);
    position: absolute;
}

.main-contents blockquote:after {
    content: '”';
    font-size: 200px;
    line-height: 0px;
    font-family: sans-serif;
    bottom: -25px;
	right: 0;
	color: rgba(255,255,255,0.5);
    position: absolute;
}

.main-contents blockquote {
    width: 100%;
    background: #2489CE;
    box-sizing: border-box;
    margin: 0;
    color: #FFF;
    padding: 20px 80px;
    margin: 20px 0px;
    font-size: 25px;
    position: relative;
	clear: both;
    overflow: hidden;
}
.main-contents blockquote span {
    display: block;
    width: 65%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

.main-contents blockquote img {
    margin-left: 80%;
}

span.source {
    float: right;
    font-size: 10px;
}

ul.drea-content {
	border: 1px solid #2489CE;
	display: inline-block;
	margin: 0;
	padding: 10px 55px 25px 55px;
	font-weight: bold;
	width: 100%;
	box-sizing: border-box;
}
ul.drea-content li {
	list-style: none;
}

span.expand-icon {
    border: 1px solid #2489ce;
    display: inline-block;
    height: 14px;
    width: 14px;
    text-align: center;
    line-height: 14px;
    color: #2489ce;
    margin-right: 10px;
}

ul.sub-section {
    display: none;
	margin-left: 30px !important;
}

span.sub-header {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
	cursor: pointer;
}
label.drea-content-select-lbl {
    font-weight: bold;
    margin-left: 20px;
}

ul.drea-content ul{
	margin: 0;
	padding-left: 20px;
}

ul.drea-content ul li{
	list-style: disc;
}
	
ul.drea-content a,
ul.drea-content a:active,
ul.drea-content a:visited{
	font-weight: normal;
	color: #2489CE;
	text-decoration: none;
}

li {
    margin: 5px 0px;
}

.drea-pagination {
    text-align: center;
}

.drea-pagination a,
.drea-pagination a:active,
.drea-pagination a:visited  {
	border: 1px solid #2489CE;
    display: inline-block;
	color: #2489CE;
	text-decoration: none;
	padding: 2px 3px;
	margin: 0 2px;
}

.drea-pagination a.current,
.drea-pagination a.current:active,
.drea-pagination a.current:visited  {
	border: 1px solid transparent;
	background: #2489CE;
	color: #FFF;
}

.main-contents h2 {
	color: #2489CE;
    margin-bottom: 0;
	border-bottom: 1px solid #999;
}
.main-contents h3 {
	color: #999;
	font-size: 1.6em;
    margin-top: 0;
}

.annotation {
    font-size: 12px;
    font-style: italic;
}

.red-brick {
	float: right;
	color: #CB0600;
	font-weight: bold;
}

.red-brick a {
	color: #903330;
}

.main-contents table.top-searched-condos th,
.main-contents table.qc-extension th {
    border-bottom: 3px solid #2489CE;
}
.main-contents table.top-searched-condos td,
.main-contents table.qc-extension td {
    border-bottom: 2px dashed #999;
    padding: 3px 10px;
}
.main-contents table.top-searched-condos tr:last-child td,
.main-contents table.qc-extension tr:last-child td {
    border-bottom: none;
}


.main-contents table.top-searched-condos,
.main-contents table.qc-extension  {
    border-bottom: 3px solid #2489CE;
    margin: auto;
    margin-bottom: 15px;
}


.main-contents table{
    margin: auto;
    margin-bottom: 15px;
}

table.best-value-top-schools tr td:first-child {
    border-right: 1px solid #000;
}

.main-contents table.best-value-top-schools td {
    height: 35px;
    padding: 5px 10px;
}

.main-contents table.looking-cbd td {
    height: 102px;
	padding: 0 25px;
}
.main-contents table.looking-cbd img {
    width: auto;
    height: 100%;
}

.main-contents table.looking-cbd td.cbd-chart {
    border-left: 1px solid #000;
}
.main-contents table.looking-cbd td.cbd-chart img {
    height: auto;
}

.color-2489ce {
	color: #2489CE;
}

.drea-chart-container {
    min-width: 400px;
}


div.blue-box {
    width: 100%;
    background: #2489CE;
    box-sizing: border-box;
    margin: 0;
    color: #FFF;
    padding: 20px 80px;
    margin: 20px 0px;
    font-size: 25px;
    position: relative;
    clear: both;
    overflow: hidden;
    height: 100px;
}

.drea-pagination-link {
    /* display: block; */
    font-size: 24px;
    padding: 10px 35px !important;
    background: #2489ce;
    color: #FFF !important;
}
.drea-pagination-prev {
    float: left;
}
.drea-pagination-next {
    float: right;
}
.clear-fix {
	clear: both;
}



@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
	
	header#report-header{
		height: 250px;
	}
	
	header#report-header h1 {
		font-size: 2em;
	}
	.top-bar {
		width: 100%;
		padding: 10px;
		margin: auto;
		margin-top: 10px;
		box-sizing: border-box;
	}
	a.drea-download-link {
		padding: 10px 10px;
		font-size: 0.7em;
		margin-left: 5px;
	}
	a.drea-download-link:last-child {
		margin-left: 0;
	}
	
	.main-contents {
		width: 100%;
		margin: auto;
		padding: 25px 0;
		box-sizing: border-box;
	}
		
	ul.drea-content {
		padding: 10px 10px 25px 10px;
		font-weight: bold;
	}
		
	.main-contents blockquote:before {
		font-size: 100px;
		line-height: 80px;
	}

	.main-contents blockquote:after {
		font-size: 100px;
		line-height: 80px;
		bottom: -52px;
	}
	.main-contents blockquote {
		font-size: 14px;
		padding: 5px 40px;
	}
	.main-contents table.looking-cbd td {
		height: 48px;
		padding: 0px 5px;
	}
	.drea-chart-container {
		min-width: 150px;
	}
	table {
		font-size: 8px;
	}
	
	label.drea-content-select-lbl {
		font-weight: bold;
		margin-left: 15px;
	}
	select.drea-content-select {
		margin-left: 15px;
	}
	.drea-pagination a,
	.drea-pagination a:active,
	.drea-pagination a:visited {
		border-right: none;
		margin: 0;
	}
	
	.drea-pagination a:last-child{
		content: "";
		border-right: 1px solid #2489CE;
		margin: 0;
	}
	.drea-pagination a:first-child{
		content: "";
		margin: 0;
	}
	
	.main-contents table img {
		width: 48px !important;
		height: 48px !important;
	}
		
	.red-brick {
		float: none;
	}

	.main-contents blockquote span {
		width: 35%;
	}
	.main-contents blockquote img {
		margin-left: 50%;
	}
	
	.larger {
		margin-left: 30% !important;
	}
}