/*Property that I used in this CSS:
background-color;
font-family;
font-size;
color;
padding;
margin;
width;
font-weight;
display;
clear;
position;
float;
border;
font-style;
list-style;
text-decoration;
*/
/*set up the inital values*/
body{
	background-color: #EEEEEE;
	font-family: Arial, Verdana, sans-serif;
	font-size: 16px;
	color: #000000;
	padding:0;
	margin:0;
	text-align:center;
	-webkit-box-sizing:border-box;
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
}
#wrapper{
	max-width:960px;
	padding:0.5em 0.5em 0 0.5em;
	margin: 0 auto;
	background-color: #FFFFFF;
	text-align:left;
	
}
header{
	width:944px;
	padding:0.4em;
	max-width:100%;
	border:1px solid #000;
}
/*set up the actural content box*/
	header img{
		display:inline;
		margin: 0 0.3em 0 0;
		float: left;
	}
	header form{
		display:inline;
		margin-right: -0.2em;
		margin-top:2.5em;
		max-width:100%;
		float: right;
	}
	header form a{
		font-size:0.7rem;
		display:inline;
		background-color:#1499F7;
		color:#FFFFFF;
		border-right: 2px solid #404040;
		border-bottom: 2px solid #404040;
		border-top:2px solid #BBBBBB;
		border-left:2px solid #BBBBBB;
		padding:0.2em;
		text-align:center;
		text-decoration:none;
	}
	header form a:hover{
		font-weight:bold;
	}
	/*city name's property*/
	#cityName{
		display:inline-block;
		font-family: 'Metrophobic', sans-serif;
		font-size:2rem;
		font-weight:bold;
		float: left;
	}
	/*city slogan's property*/
	#citySlogan{
		display:block;
		font-family: 'Metrophobic', sans-serif;
		font-style:italic;
		font-size:1.3rem;
		color:#615D5E;
		float: left;
	}
	
	header:after{
		content:"";
		clear:both;
		display:block;
	}
/*main menu's property, planed to do a dropdown menu using css*/
#mainMenu{
	float:none;
	padding:0;
	font-weight:bold;
}

	#mainMenu ul {
		width:100%;
		padding:0;
		background: #1499F7;   
		list-style: none;
		position: relative;
		display: inline-table;
	}
	#mainMenu ul:after {
		content:" ";
		clear: both; 
		display: block;
	}
		#mainMenu ul li:hover > ul {
			display: block;
		}
		#mainMenu ul li {
			max-height:53px;
			font-size:1.2rem;
			float: left;
			text-align:center;
		}
		#mainMenu ul li a {
			padding: 15px 0;
			color:#FFFFFF;
			display: block;  
			text-decoration: none;
		}
		#mainMenu ul li:hover {
			background: #27618A;
		}


	#mainMenu ul ul {
		padding:0;
		display:none;
		position:relative;
		top:100%;
	}
		#mainMenu ul ul li {
			font-weight:normal;
			font-size:0.8rem;
			background: #27618A;
			float: none; 
			border-top: 1px solid #FFFFFF;
			position: relative;
		}
			#mainMenu ul ul li a {
				padding:10px 20px;
				color: #FFFFFF;
			}	
				#mainMenu ul ul li a:hover {
					font-weight:bold;
				}
figure{
	margin:0.2em 0;
	font-style:italic;
	font-size:0.8rem;
	text-align:left;
}
/*set up footer's property, it's a four column bar*/
footer{
	margin:0px;
	padding:0px;
	width:100%;
}
	
	footer ul{
		margin:5px 0px 0px 0px;
		background-color: #27618A; 
		padding: 0px;	
		list-style: none;
		position: relative;
		display: inline-table;
		width:100%;
	}
		footer ul li {
			max-height:80px;
			text-align:center;
		}
		footer ul li:after{
			content:" ";
			clear: both; 
			display: block;
		}
		footer ul li a {
			padding:5px 45px;
			color:#BBBBBB;
			display: block; 
			text-decoration: none;
			text-align:center;
		}
				footer ul li:hover a {
					font-weight:bold;
					color: #FFFFFF;
				}
/* set up properties for sub-navigation bar under the main menu and above the page header*/
#subNav{
	padding:0px;
	margin:0px 0px 5px 0px;
	font-size:0.8rem;
	color:#8E8E8E;
}
	#subNav a{
		text-decoration:none;
	}
		#subNav a:hover{
			font-weight:bold;
		}
			#subNav a:visited{
				color:#27618A;
			}
/*common id for all the text in all webpages*/
.content{
	margin:2px 0px 2px 0px;
	font-size:1rem;
	font-weight:normal;
	text-align:left;
	max-width:100%;
}
/*common id for all the page header in all webpages*/
#pageHeader{
	margin:5px 0px 5px 0px;
	font-size:1.6rem;
	font-weight:bold;
	
}
/*common id for all the sub-header that is under the main page header in all webpages*/
.subHeader{
	margin:1em 0 0.2em 0;
	font-size:1.2rem;
	font-weight:bold;
	text-align:left;
}
/*common id for all the side column title in all webpages*/
#sideColumnTitle{
	margin:0.5em 0;
	font-size:1rem;
	font-weight:bold;
}
/*set up side column's property*/
aside{
	margin: 0.5em 0 0.5em 0.3em;
	background-color:#D1D1D1;
	padding:0.2em 0.5em;

}
/*set up properties for any lists that are used in side column*/
.sideContent{
	color: #222222;
	text-align:left;
	font-size: 0.8rem;
	padding:0 0.2em;
}

/*set up images that is in the page content*/
section form input{
	display:block;

}
section input{
	width:50%;
	margin:5px 15px 10px 0;
}
section img{
	margin: 0 auto;
	width:auto;
	height:auto;
	max-width:100%; 
}
.button-left{
	width:150px;
	max-width:100%;
	margin:2px;
}
.button-right{
	width:150px;
	max-width:100%;
	margin:2px;
	float:right;
}

.button-left a{
	border-right: 2px solid #404040;
	border-bottom: 2px solid #404040;
	border-top:2px solid #BBBBBB;
	border-left:2px solid #BBBBBB;
	font-size:0.9rem;
	display:inline-block;
	background-color:#1499F7;
	color:#FFFFFF;
	padding:0.1em;
	width:100%;
	text-align:center;
	text-decoration:none;
}
.button-right a{
	border-right: 2px solid #404040;
	border-bottom: 2px solid #404040;
	border-top:2px solid #BBBBBB;
	border-left:2px solid #BBBBBB;
	font-size:0.9rem;
	display:inline-block;
	background-color:#1499F7;
	color:#FFFFFF;
	width:100%;
	padding:0.1em;
	text-align:center;
	text-decoration:none;

}
.button-left a:hover{
	font-weight:bold;
}
.button-right a:hover{
	font-weight:bold;
}
.button-left a:after{
	content: " ";
	clear:both;
	display:block;
}
.button-right a:after{
	content: " ";
	clear:both;
	display:block;
}

#cityNews{
	margin-top: 0.8em;
	margin-bottom: 0.8em;

}
.tooltips-A{
	list-style:none;
	width:180px;
	height:auto;
	padding: 0.5em;
	background:rgba(100,153,100,0.8);
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	position:absolute; 
	color: #ffffff;
	display:none;
}
.tooltips-B{
	list-style:none;
	width:180px;
	height:auto;
	padding: 0.5em;
	background:rgba(100,153,100,0.8);
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	position:absolute; 
	color: #ffffff;
	display:none;
}
.tooltips-C{
	list-style:none;
	width:180px;
	height:auto;
	padding: 0.5em;
	background:rgba(100,153,100,0.8);
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	position:absolute; 
	color: #ffffff;
	display:none;
}
.tooltips-D{
	list-style:none;
	width:180px;
	height:auto;
	padding: 0.5em;
	background:rgba(100,153,100,0.8);
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	position:absolute; 
	color: #ffffff;
	display:none;
}

map area{
	border: 2px solid red;
}
.sideColumnTitle{
	margin:0.5em 0;
	font-size:1rem;
	font-weight:bold;
}