/*This is the weather application stylesheet*/

/* Bring in the weather_type.css file */
@import url('../../../jsonweather/css/user_styles.css');

/*Change the box model*/

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}


/* *********** Base Styles ***********/


/*The Body*/

body {
	font-family: helvetica, arial, sans-serif;
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
}


/*The body inner-div*/

#wrapper {
	width: 100%;
	padding: 0 1em 0;
	position: relative;
}


/*The page header */

#page-header h1 {
	margin: 0;
}

.tagline {
	font-weight: normal;
	font-style: italic;
	font-size: .75em;
	margin: 0 0 0 1em;
}


/*The page navigation*/

#page-nav ul {
	border: 1px solid #000;
	border-bottom: 1px solid #fff;
	list-style: none;
}

#page-nav .flexlist li {
	display: flex;
	flex: auto;
}

#page-nav a {
	display: flex;
	flex: auto;
	background-color: #000;
	color: #fff;
	padding: 1% 5%;
	text-decoration: none;
}

#page-nav a:hover {
	background-color: #fff;
	color: #000;
	border-bottom: 1px solid #fff;
}

/*The main element*/


/*The page footer*/

#page-footer {
	font-size: .7rem;
	margin: 0;
}

#page-footer > *{
	padding: 0 0 0 1em;
}

#page-footer li{
	padding-right: 1em;
}

/*Lists as Flex Containers*/

.flexlist {
	display: flex;
	align-items: baseline;
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: #000;
	color: #fff;
}

/* ****** Weather Presentation ******/

.weather-container{
	border: 5px solid #000;
	padding: .15em;
	font-size: 8vw;
	display: flex;
	flex-direction: column;
}
#cityDisplay{
	margin: 0;
	font-size: inherit;
	border-bottom: 2px solid #000;
}

.weather-container h2{
	margin: 0;
	font-size: 60%;
}

#current_conditions{
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 700;
	font-size: 1.5rem;
}

#currentTemp{
	margin: 0;
	font-size: 18vw;
	text-align: center;
}
#summary {
text-align: center;
}

/* ***** Utility Classes ***** */

.hidden{
	display: none;
}

/* ***** Medium Screens ***** */
@media screen and (min-width: 44em){
	#page-header h1 {
		font-size: 10vw;
	}
	.tagline {
		font-size: 2em;
margin-top: -.5em;
	}
	#page-nav ul {
		font-size: 4vw;
	}
	#page-footer {
		font-size: 1.25rem;
	}
}

/* ***** Large Screens ***** */
@media screen and (min-width: 60em){
	.tagline {
		font-size: 3em;
		margin-top: -.5em;
	}
	#page-footer {
		font-size: 2rem;
	}
	#summary {
		font-size: 4vw;
	}
}