/*----- credits -----*/
/* http://dariocorsi.com */

/*----- imports -----*/
@import url("reset.css"); /* meyer html5 reset */
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed); /* google web fonts */
@import url(http://fonts.googleapis.com/css?family=Dosis:400,600);


/*----- typography -----*/
html, body, text-area {font-family: 'Arial', 'Helvetica', sans-serif; font-size:0.9em; line-height: 1.6; color:#6E6E70; letter-spacing:0.03em;}

h1 {font:600 2em/1.5 'Dosis', sans-serif; color:#fff; text-transform:uppercase; letter-spacing:0.335em;}
h2 {font:600 1.25em/1.5 'Dosis', sans-serif; letter-spacing:0.3em; text-transform:uppercase; text-align:center; color:#fff; padding-top:1em;}
h3 {font:1em/1.5 'Dosis', sans-serif;  font-weight:600; text-transform:uppercase; letter-spacing:0.2em; border-radius:.5em .5em 0 0;padding:1em; margin:-1em -1em 1em; background:#ddd;}

a:link, a:visited {text-decoration: none; color:#ccc;}
a:hover {color:#aaa;}
a:active {color:#000;}

.no-break {white-space: nowrap;}
p, ul {margin-bottom: 1em;}
ul {margin-bottom: 2em;}
footer {font-size:.875em; color:#A6A8AB;}
hr {display:none;}

/*----- images -----*/
img {max-width:100%; height:auto; display:block;}

/*----- branding -----*/
header {position:relative; top:0; left:0; width:100%; background:#4D4D4D; padding-top:1em;}
header p {color:#ccc;}
header .column {width:50%; float:left;}
header form {padding:1em 0; overflow:auto;}
header form div {float:left; width:80%;}
header form input.text {height:40px; width:100%; font-size:1.5em; border:0;} 
header form button.submit {float:left; height:40px; width:20%; border:0; border-radius:0 .5em .5em 0; background:#ccc;}
header form button.submit:hover {background:#aaa;}
header form button.submit:active {background:#999;}
input {-webkit-appearance: none; border-radius: 0; padding:0;}


/*----- structure -----*/
body {width:100%; background:#4D4D4D;}
header>.inner, section>.inner, footer>.inner {max-width:1000px; margin:auto; padding:0 2em;}
section {padding-top:0em; background:#fff; overflow:auto; width:100%; clear:both;}

#dale-image {float:left; width:50%;}
#dale-fact {display:block; float:right; width:50%; font-size:2em; background:#eee; border-radius:1em; position:relative; margin-top:2em;}
#dale-fact:before {content:""; display:block; width:0; height:0; position:absolute; left:-70px; top:50%; margin-top:-20px; 
    border-top: 20px solid transparent;
	border-bottom: 20px solid transparent; 
	border-right:80px solid #eee; }
#dale-fact .inner {padding:2em;}

section.secondary {background:#999999;}
#forecast {background:#4D4D4D;}
.forecast-item{display:block; float:left; width:20%; text-align:center; font-size:1.2em;}
.forecast-item .inner {padding:1em; margin:1em 1em 1.5em; background:#eee; border-radius:.5em; border:3px solid #ddd;}

/*----- footer -----*/
footer {background:#4D4D4D; clear:both; text-align:right; padding:1em 0;}
/*----- media queries -----*/

@media all and (min-width:581px){
ul#forecast-list {margin-left:-1em; margin-right:-1em;}
}

@media all and (max-width:800px){
    #dale-image {width:70%;}
    #dale-fact {width:30%; font-size:1.5em;}
    .forecast-item {display:block; float:none; width:100%; text-align:center; margin:auto;}
}


@media all and (max-width:580px){
	header h1 {font-size:1.2em; font-weight:600;}
	header h2 {font-size:1.2em;}
	header p {display:none;}
	header .column, #dale-fact, #dale-image, footer {float: none; width:100%; text-align:center;}
	#dale-fact { font-size:1.25em; padding:0; margin:-1em 0 0em;}
	#dale-fact:before {content:""; display:block; width:0; height:0; position:absolute; left:50%; top:-30px; margin-left:-20px; 
		border-bottom: 50px solid #eee;
		border-top: 0px solid transparent; 
		border-right:20px solid transparent; 
		border-left: 20px solid transparent;}
	section.secondary { margin-top:-2em; padding-top:2em;}
	.forecast-item .inner {padding:1em; margin:1em 0; background:#eee; border-radius:.5em; border:3px solid #ddd;}


}