@charset "UTF-8";
/* CSS Document */

/* Bigger screen size */

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

#wrapper {
	min-width:2300px;
}

#left {
	width:30%;
	height:100%;
	background:url(../images/weather.jpg) repeat top center;
	background-size: auto 100%;
	-moz-background-size: auto 100%;
	-webkit-background-size: auto 100%;
}

.weather-info {
	width:30%;
	max-width:223px;
	margin:25% auto;
}

.big {
	display:block;
}

.small {
	display:none;
}

#nav {
	width:650px;
	height:55px;
	background:url(../images/nav.png) repeat center center;
	top:0;
	left:0;
}

#right {
	width:70%;
	height:100%;
}

#center {
	width:73.214286%;
	height:100%;
	position:relative;
	background:url(../images/content.jpg) repeat center center;
	background-size: auto 120%;
	-moz-background-size: auto 120%;
	-webkit-background-size: auto 120%;
}

#comment {
	width:117px;
	height:133px;
	top:-117px;
	background:url(../images/speech-bubble-l.png) no-repeat center center;
	font-size:76px;
	line-height:117px;
}

#side {
	width:26.785714%;
	height:100%;
	background:#888888;
}

.title {
	width:90%;
	height:auto;
	font-size:5.875em;
	padding:5%;
	line-height:84px;
}

.byline {
	font-size:0.17021em;
	line-height:2em;
}

.social {
	width:100%;
	height:33.33333333333%;
}

.social01 {
	background:url(../images/social1.jpg) repeat center center;
	background-size:auto 100%;
	-moz-background-size:auto 100%;
	-webkit-background-size:auto 100%;
}

.social02 {
	background:url(../images/social2.jpg) repeat center center;
	background-size:auto 100%;
	-moz-background-size:auto 100%;
	-webkit-background-size:auto 100%;
}

.social03 {
	background:url(../images/social3.jpg) repeat center center;
	background-size:auto 100%;
	-moz-background-size:auto 100%;
	-webkit-background-size:auto 100%;
}

.overlay {
	background:rgba(0,0,0,0.6);
}

h3 {
	font-size:2.215em;
	line-height:1em;
	top:5%;
	left:5%;
}

.label {
	font-size:0.4706em;
}

h2 {
	font-size:6.875em;
	bottom:5%; 
	left:5%;
}

.subhead {
	font-size:0.145454em;
}

}

/* 21 inch and up to 27 inch display */

@media screen and (min-width:1024px) and (max-width:2300px) {

#wrapper {
	min-width:100%;
}

#left {
	width:40%;
	height:100%;
	background:url(../images/weather.jpg) repeat top center;
	background-size: auto 100%;
	-moz-background-size: auto 100%;
	-webkit-background-size: auto 100%;
}

.weather-info {
	width:30%;
	max-width:223px;
	margin:25% auto;
}

.big {
	display:block;
}

.small {
	display:none;
}

#nav {
	width:650px;
	height:55px;
	background:url(../images/nav.png) repeat center center;
	top:0;
	left:0;
}

#right {
	width:60%;
	height:100%;
	
}

#center {
	width:100%;
	height:79.62963%;
	position:relative;
	background:url(../images/content.jpg) repeat center center;
	background-size: auto 120%;
	-moz-background-size: auto 120%;
	-webkit-background-size: auto 120%;
}

#comment {
	width:117px;
	height:133px;
	top:-117px;
	background:url(../images/speech-bubble-l.png) no-repeat center center;
	font-size:76px;
	line-height:117px;
}

#side {
	width:100%;
	height:20.37037%;
}

.title {
	width:90%;
	height:auto;
	font-size:3.375em;
	padding:5%;
}

.byline {
	font-size:0.3em;
	line-height:2em;
}

.social {
	width:33.333333%;
	height:100%;
	float:left;
	background:url(../images/box2.png) repeat center center;
	background-size:100% 100%;
	-moz-background-size:100% 100%;
	-webkit-background-size:100% 100%;
}

h3 {
	font-size:1.875em;
	top:8%;
	left:8%;
}

.label {
	font-size:0.5333333em;
}

h2 {
	font-size:4.75em;
	bottom:8%; 
	left:8%;
}

.subhead {
	font-size:0.21052em;
}

}

/* ----------------------- */

/* iPad landscape mode */

@media screen and (min-width:768px) and (max-width:1024px) {
	
#wrapper {
	min-width:100%;
}

#left {
	width:40%;
	height:100%;
	background:url(../images/weather.jpg) repeat top center;
	background-size: auto 100%;
	-moz-background-size: auto 100%;
	-webkit-background-size: auto 100%;
}

.weather-info {
	width:30%;
	max-width:223px;
	margin:25% auto;
}

.big {
	display:block;
}

.small {
	display:none;
}

#nav {
	width:650px;
	height:55px;
	background:url(../images/nav.png) repeat center center;
	top:0;
	left:0;
}

#right {
	width:60%;
	height:100%;
	
}

#center {
	width:100%;
	height:79.62963%;
	position:relative;
	background:url(../images/content.jpg) repeat center center;
	background-size: auto 120%;
	-moz-background-size: auto 120%;
	-webkit-background-size: auto 120%;
}

#comment {
	width:81px;
	height:97px;
	top:-81px;
	background:url(../images/speech-bubble-s.png) no-repeat center center;
	font-size:40px;
	line-height:81px;
}

#side {
	width:100%;
	height:20.37037%;
}

.title {
	width:90%;
	height:auto;
	font-size:2.75em;
	padding:5%;
}

.byline {
	font-size:0.3636em;
	line-height:2em;
}

.social {
	width:33.333333%;
	height:100%;
	float:left;
	background:url(../images/box2.png) repeat center center;
	background-size:100% 100%;
	-moz-background-size:100% 100%;
	-webkit-background-size:100% 100%;
}

h3 {
	font-size:1.375em;
	top:5%;
	left:5%;
}

.label {
	font-size:0.545454em;
}

h2 {
	font-size:3.75em;
	bottom:5%; 
	left:5%;
}

.subhead {
	font-size:0.26667em;
}

}

/* ihone screen size and up to ipad */

@media screen and (min-width:480px) and (max-width:768px) {


#wrapper {
	min-width:100%;
}

#left {
	width:100%;
	height:30.664063%;
	background:url(../images/weather.jpg) repeat center center;
	background-size: 100% auto;
	-moz-background-size: 100% auto;
	-webkit-background-size: 100% auto;
}

.weather-info {
	width:63.151042%;
	max-width:485px;
	margin:10% auto 0 auto;
}

.big {
	display:none;
}

.small {
	display:block;
}

#nav {
	width:148px;
	height:63px;
	background:url(../images/mobile-nav.png) repeat center center;
	top:0;
	left:10px;
}

#right {
	width:100%;
	height:69.335938%;
	
}

#center {
	width:100%;
	height:76.619718%;
	position:relative;
	background:url(../images/content.jpg) repeat center center;
	background-size: auto 120%;
	-moz-background-size: auto 120%;
	-webkit-background-size: auto 120%;
}

#comment {
	width:81px;
	height:97px;
	top:-81px;
	background:url(../images/speech-bubble-s.png) no-repeat center center;
	font-size:40px;
	line-height:81px;
}

#side {
	width:100%;
	height:23.380282%;
	background:#888888;
}

.title {
	width:90%;
	height:auto;
	font-size:2.75em;
	padding:5%;
}

.byline {
	font-size:0.3636em;
	line-height:2em;
}


.social {
	width:33.333333333333%;
	height:100%;
	float:left;
	background:url(../images/box2.png) repeat center center;
	background-size:100% 100%;
	-moz-background-size:100% 100%;
	-webkit-background-size:100% 100%;
}

h3 {
	font-size:1.375em;
	top:8%;
	left:8%;
}

.label {
	font-size:0.545454em;
}

h2 {
	font-size:3.75em;
	bottom:8%; 
	left:8%;
}

.subhead {
	font-size:0.26667em;
}

}

/* ----------------------- */

/* iphone up to kindle fire */

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

#wrapper {
	min-width:320px;
	margin:0 auto;
	background:#222222;
	height:auto;
}

#left {
	width:100%;
	height:563px;
	background:url(../images/weather.jpg) repeat bottom center;
	background-size: auto 100%;
	-moz-background-size: auto 100%;
	-webkit-background-size: auto 100%;
}

.weather-info {
	width:40%;
	max-width:223px;
	margin:20% auto 0 auto;
}

.big {
	display:block;
}

.small {
	display:none;
}

#nav {
	width:148px;
	height:63px;
	background:url(../images/mobile-nav.png) repeat center center;
	top:0;
	left:10px;
}

#right {
	width:100%;
	height:auto;
	
}

#center {
	width:100%;
	height:563px;
	position:relative;
	background:url(../images/content.jpg) repeat center center;
	background-size: auto 120%;
	-moz-background-size: auto 120%;
	-webkit-background-size: auto 120%;
}

#comment {
	width:81px;
	height:97px;
	top:-81px;
	background:url(../images/speech-bubble-s.png) no-repeat center center;
	font-size:40px;
	line-height:81px;
}

#side {
	width:100%;
	height:auto;
	background:#888888;
}

.title {
	width:90%;
	height:auto;
	font-size:2.75em;
	padding:5%;
}

.byline {
	font-size:0.3636em;
	line-height:2em;
}

.social {
	width:100%;
	height:160px;
	float:left;
	background:url(../images/box.png) repeat center center;
	background-size:100% 100%;
	-moz-background-size:100% 100%;
	-webkit-background-size:100% 100%;
}

h3 {
	font-size:1.375em;
	top:5%;
	left:5%;
}

.label {
	font-size:0.545454em;
}

h2 {
	font-size:3.75em;
	bottom:5%; 
	left:5%;
}

.subhead {
	font-size:0.26667em;
}

}

/* ----------------------- */