body{
	background-color: #E2E2E2;
	margin:0;
} 
 
 #top_bar {
	background-color: #333333;
	color: #D0CFCF;
	height: 60px;
	padding-left: 50px;
	padding-bottom: 20px;
	Padding-top: 5px;
 }
 
 #nav_bar{
	background-color: #333333;
	height: 30px;
	position: relative;
 }
 #nav_list{ 
	margin:0;
	margin-bottom: 0px;
	position: absolute; 
	bottom: 0;
}
 
 #nav_bar li  {
	background: #484848;
	color: #D0CFCF;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	display:inline;
	float: left;
	padding-right:10px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-right: 10px;
	margin-left: 10px;
	cursor:pointer;
}

 #nav_bar li.selected {
	background: #E2E2E2;
	color: #484848;
}

#message_box {
	width:655px;
	height: 425px;
	margin-top: 20px;
	margin-left: 50px;
	margin-right: auto;
	background-image: url('images/message_box.JPG'); 
	padding-top:60px;
	padding-left: 10px;
}

.name{
	width: 75px;
	float: left;
	padding-left: 10px;
}

#message_box [type=text]{
	width: 80%;
}
#message_box [type=button]{
	float: right;
	margin-right: 40px;
}
#m{
	height: 200px;
}

#graph_div, #analysis_div{
	/*border:2px solid #D0CFCF; 
	background: #F4F4F4; */
	width: 80%;
	margin-left: 50px; 
	margin-right: auto;
	margin-top: 25px;
	padding-left: 5px;
	padding-right: 5px;
}

#graph_div { 
	height: 375px; 
	width: 610px;
	background-image: url('images/trends_grapharea.JPG');
	padding-left: 25px;
}

#graph_div select {
	padding: 5px;
	margin: 5px;
}
#graph_div img {
	margin-right: 25px;
	margin-top: 45px;
}
#analysis_div { height: 200px; }

#trends_col, #trends_arrows {
	float: left;
	margin-top: 175px;
	
}

#trends_graph, #trends_pie{
	float: right;
}

.label{
	border: 1px solid #00A5D5;
	background: #01ADE0;
	color: #FFFFFF;
	width: 125px;
	height: 25px;
	text-align: center;
	margin: 5px;
}

/* home page ------------------------ */
#home_area {
	width: 675px;
	margin-left: 50px;
	margin-right: auto;
	padding-top: 50px;
}
#home_controls {
	height: 35px;
}

#home_controls img {
	float: right;
	
}
#home_cols{
	width: 675px;
	height: 800px;
	position: relative;
}

.home_col{
	width: 50%;
	height: 800px;
	float: left;
}

.student_name {
	float: left;
	
}

 .participation, .attendance, .grade{
	float: right;
	border: 2px solid #00B3D9;
	height: 25px;
	margin-left: 10px;
}

.student {
	border:2px solid #D0CFCF;
	height: 25px;
	padding: 10px;
	background: #F4F4F4;
}

.participation, .grade  {
	height: 21px;
	width: 35px;
	text-align: center;
	background: #FFFFFF
}
.grade {
	border-color: #D0CFCF;
	background: #F4F4F4;
}
#list_view, #grid_view, .participation{
    cursor:pointer;
}