A:link {text-decoration: none; color:black; font-weight:bold;}
A:visited {text-decoration: none; color:black; font-weight:bold;}
A:active {text-decoration: none; color:black;}
A:hover {text-decoration: underline; color: #285DFF;}

body {
	margin: 0;
	font: 9pt/10pt arial;
	color: black;
}

#header {
	width: 100%;
	background-color: #cccccc;
	height: 45px;
}
#navLinks {
	float: right;
}

#navLinks a {
	padding: 15px 30px;
	color: #333333;
	font: 10pt Arial;
	font-weight: bold;
	background-color: #cccccc;
	float: left;
}

#navLinks a:hover {
	color: #ffffff;
	background-color: #333333;
	text-decoration: none;
}

#logoutBtn {
	padding: 15px 30px;
	color: #333333;
	font: 10pt Arial;
	font-weight: bold;
	background-color: #cccccc;
	float: left;
	border: none;
	margin: 0;
}

#logoutBtn:hover {
	color: #ffffff;
	background-color: #333333;
	text-decoration: none;
}

@media (max-width: 1000px){
	#navLinks {
		width: 100%;
		background-color: #cccccc;
	}
  	#navLinks a {
  		width: 50%;
  		padding: 15px 0px;
  		text-align: center;
  		margin: 0;
  	}
  	#logoutBtn {
  		width: 50%;
  	}
  	.adminLink {
  		width: 100%;
  	}
}

@media (max-width: 400px){
	#navLinks {
		width: 100%;
		background-color: #cccccc;
	}
  	#navLinks a {
  		width: 100%;
  		padding: 15px 0px;
  		text-align: center;
  		margin: 0;
  	}
  	#logoutBtn {
  		width: 100%;
  	}
  	.adminLink {
  		width: 100%;
  	}
}

#nyroContainer {
	margin: 0 auto;
	width: 900px;
	height: 500px;
	padding-bottom: 100px;
	text-align: center;
	overflow-y: hidden;
}

.student:hover {
	background-color: #eee;
}

.status {
    text-align: center;
	font: 10pt/12pt arial;
	color: black;
}

.alert {
	text-align: center;
	font: 20pt/16pt arial;
	color: black;
}

.contentTitle {
	font: 16pt Arial;
	font-weight: bold;
}

#head {
	text-align: center;
	font: 20pt/30pt arial;
	font-weight:bold;
	color: black;
}

#title1 {
    width: 100%;
    height: 40px;
    margin: 0;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    background-color: #DDDDDD;
    text-align: center;
}

.subtitle {
    text-align: center;
	font: 20pt/30pt arial;
	font-weight:bold;
	color: black;
}

tr.title2 {
	font: 14pt/13pt arial;
	font-weight:bold;
	color: black;
}

#title3 {
	font: 10pt/13pt arial;
	font-weight:bold;
	color: white;
}

.formTable td {
	font: 10pt Arial;
	font-weight: bold;
}

.formTable input {
	font: 10pt Arial;
	font-weight: bold;
}

#addClassForm {
	margin: 0 auto;
	width: 450px;
	height: 120px;
	overflow-y: hidden;
	overflow-x: hidden;
}

#addClassForm a {
    padding: 5px 10px 5px 10px;
    margin-left: 5px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    background-color: #DDDDDD;
    float: left;
    font: 10pt Arial;
    font-weight: bold;
}

#nyroForm {
	margin: 0 auto;
	max-width: 550px;
	overflow-y: auto;
	overflow-x: hidden;
}

#nyroForm a {
    padding: 5px 10px 5px 10px;
    margin-left: 5px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    background-color: #DDDDDD;
    float: left;
    font: 10pt Arial;
    font-weight: bold;
}

#categoryForm {
	margin: 0 auto;
	width: 800px;
	height: 500px;
	overflow-y: auto;
	overflow-x: hidden;
}

.submitButtons {
	font: 12pt Arial;
	font-weight: bold;
	padding: 5px 10px;
	background: #666666;
	color: white;
}

#categoryForm a {
    padding: 5px 10px 5px 10px;
    margin-left: 5px;
    float: left;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    background-color: #DDDDDD;
    font: 10pt Arial;
    font-weight: bold;
}

.cancel{
	text-align: center;
	margin-left: 150px;
	margin-top: 50px;
}

#commentBox {
	font: 12pt Arial;
}

#importForm {
	margin:0 auto;
	width: 500px;
	font: 14pt Arial;
}

#topForm {
	margin: 0 auto;
	min-width:700px;
	max-width: 1024px;
	padding-top: 10px;
}

#topForm select {
    float: left;
}

#topForm a {
    padding: 10px 20px 10px 20px;
    margin-left: 10px;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    background-color: #DDDDDD;
    float: left;
    font: 10pt Arial;
    font-weight: bold;
}

#topForm a:hover {
	text-decoration: none;
	color: white;
	background-color: black;
}

#topForm input {
	font: 12pt Arial;
	font-weight: bold;
	padding: 5px 10px;
	background: #666666;
	color: white;
}

#commentForm1 {
    float: left;
}

#commentForm1 input {
	float: right;
	font: 12pt Arial;
	font-weight: bold;
	padding: 5px 10px;
	background: #666666;
	color: white;
}

#checkboxes {
    float: left;
    padding-right: 20px;
}

#comments {
    float: left;
    padding-top: 50px;
    width: 100%;
    text-align: center;
    margin: 0;
}

#comments table {
    width: 90%;
    border: solid black 1px;
}

#comments td {
    padding: 5px;
}

#commentTable td a {
    padding-left: 8px;
}

.commentContent {
    text-align: right;
}

.firstRow {
    background-color: #EEEEEE;
}

.commentLinks {
    position: relative;
    bottom: 5px;
    text-align: center;
}

.commentLinks a {
    padding: 5px 10px;
    text-align: center;
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;
    border-color: #2BA3DA;
    border-style: solid;
    border-width: 2px;
    background-color: white;
}

.commentLinks a:hover {
	background-color: #2BA3DA;
	color: white;
	text-decoration: none;
}

.secondRow {
    background-color: #FFFFFF;
}

.italicized {
    font-style: italic;
}

#classView {
    padding-top: 50px;
}

#classTable {
	clear: both;
	margin: 0 auto;
    text-align: center;
    *border-collapse: collapse; /* IE7 and lower */
	border-spacing: 0;
}

.headerRow {
	border: 2px;
	border-top-left-radius: 2em;
	border-top-right-radius: 2em;
	background-color: #2BA3DA;
	height: 40px;
	color: white;
}

thead.fixedHeader {
	width: 100%;
}

@media only screen and (min-width: 1024px) {
	#classTable {
		width: 950px;
	}
  .commentsField {
  	width: 300px;
  }

}
@media only screen and (max-width: 1023px) {
  #classTable {
		width: 750px;
	}
.commentsField {
  	width: 250px;
  }
}
@media only screen and (max-width: 640px) {
	#classTable {
		width: 650px;
		font-size: 8pt;
	}
	  .headerRow {
  	font-size: 9pt;
  }
  .commentsField {
  	width: 150px;
  }
}
@media only screen and (max-width: 480px) {
	#classTable {
		width: 550px;
		font-size: 8pt;
	}
	.headerRow {
  	font-size: 9pt;
  }
  .commentsField {
  	width: 100px;
  }
}

.headers {
	font-weight: bold;
}

#classTable th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

#classTable th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

#classTable th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}



.templateLink {
	font: 11pt Arial;
	font-weight: normal;
}

.headerRow th {
	padding-top: 8px;
	font: 15pt Arial;
	font-weight: bold;
}

#classTable p {
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
}

#addCommentTable {
	padding-right: 50px;
	padding-left: 40px;
}

#addCommentTable td {
	font: 12pt Arial;
	padding: 5px 10px;
}
.sortComment {
	float: left;
    position: relative;
    width: 460px;
    left: 50px;
}

.editCategories {
	float: left;
    position: relative;
    width: 500px;
    left: 20px;
    font: 14pt Arial;
}


.hideLink a {
	position: absolute;
	margin-top: 30px;
	text-decoration: none;
}
.hideLink a:hover {
	color: #2BA3DA;
}

.roundedLinks a {
	padding: 5px 15px 5px 15px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    background-color: #DDDDDD;
    font: 10pt Arial;
    font-weight: bold;
}

.roundedLinks a:hover {
	text-decoration: none;
	color: white;
	background-color: black;
}

.sortLinks {
	float:right;
    width: 180px;
    right:20px;
}

.sortLinks a {
	padding: 5px 15px 5px 15px;
    margin-left: 10px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    background-color: #DDDDDD;
    float: left;
    font: 10pt Arial;
    font-weight: bold;
}

.sortLinks a:hover {
	text-decoration: none;
	color: white;
	background-color: black;
}

ul {
    list-style-type: none;
}

#backButton {
    z-index: 1;
    position: absolute;
    padding-left: 20px;
    padding-top: 0px;
    font: 10pt Verdana;
}

.subtitle {
    z-index: 2;
    text-align: center;
}

.classInfo {
    font: 12pt arial;
	color: black;
	padding: 10px;
}

#comment-list li {
	padding-top: 20px;
	padding-bottom: 50px;
	padding-left: 20px;
	margin-bottom: 3px;
	cursor: move;
	width: 800px;
	text-align: left;
}

#comment-list p {
	margin-left: 50px;
	width: 550px;	
}

#category-list li {
    display: block;
	padding-top: 10px;
	padding-bottom: 30px;
	padding-left: 10px;
	margin-bottom: 3px;
	cursor: move;
	text-align: left;
	background-color: #ffffff;
}

#category-list li:hover {
	background-color: #cccccc;
}

#category-list li a:hover {
	text-decoration: none;
	color: white;
	background-color: black;
}

.categoryFilter {
	float: left;
	margin-left: 20px;
}

.shown:hover {
	background-color: #cccccc;
}

.shown {
	background-color: #efefef;
}

.hidden {
	background-color: red;
}

#comment-list li img.handle {
    float: left;
    margin-right: 20px;
	cursor: move;
}

.clear {
	margin-bottom: 60px;
}