html {
	background:#798472;
}

body {
	width:90%;
	max-width:1024px;
	margin:auto;
	background:#fff url(../images/bgtiler.gif) repeat-y;
}

header {
	background:#090b32;
	text-align:center;
}

header h1 {
	margin:0;
	padding:0;
	font:2em;
}

header h1 a {
	display:block;
	color:#cecfcf;
	text-decoration:none;
}

header h1 a:hover {
	background:#cecfcf;
	color:#090b32;
}

nav.main-nav {
	float:left;
	width:236px;
}

nav.mobile-nav {
	display:none;
}

nav.mobile-nav ul {
	list-style:none;
	text-align:center;
}

div.content {
	margin-left:236px;
	min-height:546px;
}

div.content p {
	margin:15px;
}

div.content h3 {
	margin:15px;
}

img.thumb {
	height:100px;
}

h2 {
	padding-left:10px;
}

h2.pageid {
	text-align:right;
	margin-right:15px;
	font-variant:small-caps;
}

p.back {
	text-align:right;
	margin:0 20px;
	border-bottom:1px inset gray;
	font-size:0.75em;
}

iframe.webcam {
	border:none;
	width:500px;
	height:360px;
	overflow:hidden;
}

iframe.calendar {
	border:none;
	width:600px;
	height:400px;
	overflow:hidden;
}

img.citypic {
	display:block;
	margin:auto;
}

footer {
	margin-left:250px;
}

/*** City Navigation ***/

nav.city, nav.mobile-nav {
	margin:0 auto 40px auto;
	border-top:1px solid #999;
	/* position:fixed; */
}

nav.city ul, nav.mobile-nav ul {
	list-style:none;
	text-align:center;
	padding:0;
	margin-top:-8px;
}

nav.city ul li, nav.mobile-nav ul li {
	display:inline;
	margin:0 5px;
}

nav.city li a, nav.mobile-nav li a {
	background:#fff;
	color:#666;
	border:1px solid #ccc;
	text-decoration:none;
	padding:1px 7px;
}

nav.city li a:hover, nav.mobile-nav li a:hover {
	color:#000;
	border:1px solid #666;
	border-top:2px solid #666;
	border-bottom:2px solid #666;
}

/* RWD STYLES */

/*--- DESKTOP 800px ---*/

@media all and (max-width:800px) {
	body {
		background-image:none;
	}
	
	nav.main-nav {
		display:none;
	}
	
	nav.mobile-nav {
		display:block;
	}
	
	div.content {
		margin-left:0;
	}
	
	footer {
		margin:auto;
		text-align:center;
		font-size:1em;
	}
}

/*--- TABLET AND LANDSCAPE PHONE 600px ---*/

@media all and (max-width:600px) {
	body {
		width:100%;
	}
	
	header h1 {
		font:2em;
	}
	
	h2.pageid {
		font:2em;
	}
	
	iframe.webcam, iframe.calendar {
		width:100%;
	}
}

/*--- PHONE LANDSCAPE 480px ---*/

@media all and (max-width:480px) {
	body {
		width:100%;
	}
	
	nav.city {
		border:none;
	}
	
	nav.city ul {
		margin:0;
		width:85%;
		text-align:center;
	}
	
	nav.city li {
		
	}
	
	nav.city li a {
		float:left;
		margin:13px 5px;
		padding:13px 7px;
	}
	
	img.citypic {
		overflow:auto;
	}
	
	header h1 {
		font:1.3em;
	}
	
	h2.pageid {
		font:1.2em;
	}
	
	iframe.webcam, iframe.calendar {
		width:100%;
	}
	
	footer {
		font-size:0.75em;
	}
}

/*--- PHONE PORTRAIT 320px ---*/

@media all and (max-width:320px) {
	
}