@charset "utf-8";
/* CSS Document */

img {
	max-width:100%;
	height: auto !important;
}

input {
	background-color:#333;
	color:#CCC;
}

textarea {
  max-width: 100%;
  	background-color:#333;
	color:#CCC;
}

body {
    margin: 0;
	background-image:url(images/background_dark2.jpg);
	background-repeat:repeat;
	color:#CCC;
	background-color:#555;
}

.r2_column {
	margin-left: auto;
	margin-right: auto;
	max-width: 950px;
	position: relative;
	display: flex;
    flex-direction: column;
	min-height: 100vh;
}

.r2_header {
	padding-left: 2vh;
	position: relative;
	z-index: 100;
	height: 60px;
	background-color:#343a41;
	border-width: thin;
	border-style: solid;
	border-color: #666;
}

@media only screen and (max-width: 900px) {
    .r2_header {
    	position: sticky; 
		top: 0;
		position: -webkit-sticky;
    }
}

.mobileNav {
	position: absolute;
	top: 10px;
    right: 5px; 
}

@media only screen and (min-width: 901px) {
    .mobileNav {
        display: none;
    }
}

.r2_body {
	flex-grow: 1;
	overflow: hidden;
	background-color:#2e3035;
	display: flex;
	height: 100%;
	border-left-color:#666;
	border-right-color:#666;
	border-left-style:solid;
	border-right-style:solid;
	border-width: thin;
}

.r2_footer {
	padding-left: 1vh;
	position: relative;
	height: 25px;
	background-color:#343a41;
	margin-top: auto;
	border-width: thin;
	border-style: solid;
	border-color: #666;
	text-align:center;
}

.r2_left{
	padding: 24px;
  	flex: 100px 0 0;
	text-align: right;
	border-right-style:solid;
	border-right-width:thin;
	border-right-color:#333;
	background-color:#2b2d31;
}
@media only screen and (max-width: 900px) {
    .r2_left {
        display: none;
    }
}

.r2_right{
  	flex-grow: 1;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 6px;
	min-height: 100%;
	padding: 3vw;
}
@media only screen and (min-width: 900px) {
    .r2_right {
        padding: 24px;
    }
}

.desktopNav {
	font-family: 'MuseoModerno', cursive;
	font-size:18px;
}

.desktopNav a:hover {
	color: #CCC;
}

.desktopNav a:visited {
	color: #CCC;
}

.desktopNav a:link {
	color: #CCC;
}

.slotNum {
	font-size: 36px;
	font-weight:bold;
}

.rubricLabel {
	height: 135px;
	font-weight:bold;
	padding-top: 4px;
	padding-bottom: 4px;
}
@media only screen and (max-width: 576px) {
	.rubricLabel {
		height: auto;
	}
}

.rubricValue {
	text-align:center;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	color: #9C9C9C;
	font-size: large;
}

.rubricPerValue {
	text-align:center;
	font-style: italic;
	color: #C4C4C4;
}

.gradeSelect {
	background-color: #900;
}

.selfSelect {
	background-color: #039;
}

.r2_textarea {
	width: 100%;
	box-sizing: border-box;
	resize: none;
}

.textarea_wrapper {
	max-width: 95%;
}

.selfRadio {
	margin-top: 5px;
	margin-bottom: 5px;
}