body {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	padding:0;
	margin:0 auto;
	font-size:13px;
	background-color:#eeeeee;
	color:#333333;
}


#header {
	width:100%;
	height:160px;
	padding:0;
	background-color:#303538;
}

.titleLogo {
	margin-left:20px;
	float:right;
	padding-top:60px;
	font-weight:bold;
	font-size:40px;
	color:#ffffff;
	line-height:35px;
	
}
.titleLogo a {
	cursor:pointer;
	text-decoration: none;
	color:#fff;
}
.titleLogo:hover a {
	color:#ffa400;
}
#headerButtons {
	width: 250px;
	padding-top: 160px;
}
#imgFB {
	background-image:url("/images/fbW.png");
	width:30px;
	height:30px;
	cursor:pointer;
	
}
#imgFB:hover{
	background-image:url("/images/fbY.png");
}
#imgHome {
	background-image:url("/images/homeW.png");
	width:30px;
	height:30px;
	cursor:pointer;
}
#curimgHome,
#imgHome:hover{
	background-image:url("/images/homeY.png");
	width:30px;
	height:30px;
	cursor:pointer;
}

#imgM {
	background-image:url("/images/Mw.png");
	width:30px;
	height:30px;
	cursor:pointer;
	
}
#curimgM,
#imgM:hover{
	background-image:url("/images/M.png");
	width:30px;
	height:30px;
	cursor:pointer;
}
#imgT {
	background-image:url("/images/Tw.png");
	width:30px;
	height:30px;
	cursor:pointer;
}
#curimgT,
#imgT:hover{
	background-image:url("/images/T.png");
	width:30px;
	height:30px;
	cursor:pointer;
}
#imgK {
	background-image:url("/images/Kw.png");
	width:30px;
	height:30px;
	cursor:pointer;
}
#curimgK,
#imgK:hover{
	background-image:url("/images/K.png");
	width:30px;
	height:30px;
	cursor:pointer;
}
.boxUp {
	width:250px;
	height:140px;
}
.mainBox {
	cursor:pointer;
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,.3);
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,.3);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,.3);
	border-radius: 5px; 
	background-color: #fff;
	float:left;
	width:250px; 
	height:300px;
	opacity:.8;
}
.shadowBox{
	-webkit-box-shadow: 0px 0px 10px 0px rgba(51,51,51,.4);
	-moz-box-shadow: 0px 0px 10px 0px rgba(51,51,51,.4);
	box-shadow: 0px 0px 10px 0px rgba(51,51,51,.4);
	width:800px;
	margin:0px auto;
	background-color:#ffffff;
	padding:0px 10px 10px 10px;
	
}
.pageTitle {
	font-size:20px;
	font-weight:bold;
	padding-top:10px;
	
}
.mainBox:hover {
	border-bottom:3px solid #ffa400;
	opacity:1;
}

.tableRow:hover {
	background-color:#eeeeee;
}

@media screen and (min-height: 820px) {
	#header {
		height:200px;
	}
	#headerLogo {
		margin-top: 20px;
	}
	#headerButtons {
		padding-top: 200px;
	}
}

@media screen and (max-width: 825px) {
	#header {
		width:100% !important;
	}
	#headerContent {
		width:95% !important;
	}
	.mainBox1 {
		float: left;
		margin: 0px !important;
	}
	.mainBox2 {
		float: none;
		display: inline;
		margin: 0 !important;
	}
	.mainBox3 {
		float: right;
		margin: 0px !important;
	}
	.centerDiv {
		text-align: center;
	}
	.third {
		width: 33.33%;
		float: left;
	}
	.mainBox {
		width: 200px;
		height: 240px;
	}
	.mainLink {
		width: 200px !important;
		margin-top: 140px !important;
	}
	.mainPic {
		width: 200px;
		height: 240px !important;
	}
	#pageContent {
		width: 95% !important;
	}
	#pageFooter {
		width: 95% !important;
	}
	.shadowBox {
		width: 100% !important;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 725px) {
	.mainBox {
		width: 150px;
		height: 180px;
	}
	.mainLink {
		width: 150px !important;
		margin-top: 80px !important;
	}
	.mainPic {
		width: 150px;
		height: 180px !important;
	}
}

@media screen and (max-width: 570px) {
	.third {
		clear: both;
		width: 100%;
	}
	.mainBox {
		width: 95% !important;
		height: 80px !important;
		margin: 10px !important;
		padding: 0px !important;
		clear: both;
	}
	.mainBox2 {
		display: block;
	}
	.mainLink {
		padding: 0px !important; 
		margin-top: 0px !important;
		width: 90% !important;
		height: 40px !important;
		margin-top: 0px !important;
	}
	.mainPic {
		display: none;
	}
	#header {
		height:160px;
	}
	#headerButtons {
		display: none;
	}
	#pageFooter {
		border-top: none !important;
	}
}