:focus {
  outline: 1px solid var(--ubBlue);
}
body, .content {
	color: var(--ubBlue); 
}
th {
  background-color: var(--ubBlue);
  color: #FFF;
}
a {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}
h1, h2, h3, h4 {
  color: var(--ubBlue);
}
#nav {
  background-color: var(--ubBlue);
}
#nav > a:hover, a:hover {
  color: var(--ubBlue);
}
.ref {
  color: var(--ubBlue);
}
.ref::after {
  content: " " url(/images/ub-new-window.png);
}
code, a > code, pre {
  color: #000;
  font-family: "Courier New", monospace, sans-serif;  
}
.plain {
  color: var(--ubBlue); 
}  
figure {
  background-color: #FFF;
  border: 2px ridge var(--ubBlue); 
}
figcaption {
  background-color: var(--ubBlue);
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}
figcaption > code {
  color: #000;
  font-family: "Courier New", monospace, sans-serif; 
}
#task {
  background-color: #DDD;
  color: #000;
  padding: 0 1% 1% 1%;
/*  width: 90%; */
}
#task > h2 {
  background-color: var(--ubBlue);
  color: #FFF;
  margin: 0 -1%;
  padding: 1%;
}
.current {
  border-bottom: 2px solid #FFF; 
  color: #CCC; 
}
.heading {
/*	border-top: buttonshadow 1px ridge; 
	border-right: buttonhighlight 1px ridge; 
	border-bottom: buttonhighlight 1px ridge; 
	border-left: buttonshadow 1px ridge; */
	background-color: #CC9;
	color: black; 
	font-family: Verdana, Geneva, arial, Helvetica, sans-serif; 
	font-size: 11px; 
	font-weight: bold; 
	padding-top: 2px;
	padding-right: 2px;  
	padding-bottom: 2px; 
	padding-left: 2px; 
	vertical-align: top; 
}
.fieldContainer {
  margin: 0 0 1% 0;
}
#myCanvas {
  background-color: #FFF;
  margin: 0 0 1% 0;
  text-align: center;
}
form {
  /* background-color: #DDD; */
  margin: 5% 10% auto;
}
input[placeholder] {
  /* color: #CCC; */
}
hr {
  background-color: var(--ubBlue); 
/*  color: var(--ubBlue);  */
  height: 2px;
}
fieldset {
  background-color: #CCC;
  border: 2px ridge var(--ubBlue);
  border-radius: 11px;
 /* margin: 0 10% auto; */
  width: 80%;
}
input, label, select {
  border: none;
  display: block;
  float: left;
  height: 20px; 
  margin: .5em 1em;
  width: 200px;
}
input[type=checkbox], input[type=radio], input[type=submit] {
  /* background-color: yellow; */
  clear: right;
  display: inline;
  float: left;
  margin: 0 2px auto;
  padding: 2em;
  vertical-align: middle;
  width: auto;
}
textarea {
  display: block;
  float: left;
  margin: .5em 1em;
}
label, .label{
  color: var(--ubBlue);
  display: block;
  float: left;
  font-family: Verdana, Arial, sans-serif;
  font-weight: bold;
  margin: 0 1% 0 0;
  text-align: right;
  width: 20%;
}
legend {
  border: 2px ridge #FFF;
}  
table, th, td {
  font-size: 10pt;
  padding: 2px;
  vertical-align: top;
}
#main {
  clear: both;
  display: block;
  margin: 0 5% 1% 5%;
  width: 90%
}
#aboutLeftCol {
  display: inline;
  float: left;
  width: 40%;
}
#aboutMidCol {
  float: left;
  width: 40%;
}
#aboutRightCol {
  float: right;
  width: 19%;
}
#adminnav {
  background-color: var(--ubBlue);
  color: white;
  display: block;
  text-align: center;
}
#adminnav a, #adminnav p {
  color: white;
}
#guideLeftCol {
  float: left;
  width: 50%;
}
#guideRightCol {
  float: right;
  width: 49%; 
}
#navLeft {
  background-color: var(--ubBlue);
}
#nav > a:hover, a:hover {
  color: var(--ubBlue);
}
#navRight {
  background-color: var(--ubBlue);
  color: white;
  float: right;
  padding: .5% 1% 0 1%;
  text-align: right;
  vertical-align: top;
  width: 10%;
}
#msg {
  background-color: red;
  color: white;
  display: block;
  text-align: center;
}
#msg a, #msg p {
  color: white;
  font-size: 8pt;
}
#usertable td {
  border: 2px var(--ubBlue) ridge;
}
#usertable th {
  background-color: var(--ubBlue);
}
#usertable th a {
  background-color: var(--ubBlue);
}
.note {
  color: var(--ubBlue); 
}
.subheading {
	background-color: #039;
	color: black; 
	font-family: Verdana, arial, sans-serif; 
	font-size: 11px;  
  font-weight: bold; 
	padding-top: 2px;
	padding-right: 2px; 
	padding-bottom: 2px; 
	padding-left: 2px; 
	vertical-align: top; 
}
/* Sortable tables */
table.sortable thead {
  background-color:#eee;
  color:#666666;
  font-weight: bold;
  cursor: default;
}
#showhide {
  font-size: 8pt;
  margin: 0 2px;
  padding: 2px;
}
#username {
  background-image: url('../images/man-24.png'); 
  background-position: 180px 4px; 
  background-repeat: no-repeat; 
  padding: 2px;
}
.tab-selected { 
  color: #CCC !important;
}
.leftcol {     
  background-color: #CCC;     
  border: 1px ridge var(--ubBlue);
  border-radius: 11px;  
  box-shadow: 10px 10px 5px #888888;
  float: left;
  margin: 1% 1% 2% 4%;
  padding: 1%;
  width: 40%;
}
.rightcol {    
  background-color: #CCC;
  border: 1px ridge var(--ubBlue);     
  border-radius: 11px;  
  box-shadow: 10px 10px 5px #888888;
  clear: right;
  float: right;     
  margin: 1% 4% 1% 1%;
  padding: 1%;      
  width: 40%;
}
#nav a.selected {
  background-color: white;
  border-top: 2px var(--ubBlue) ridge;
  border-left: 2px var(--ubBlue) ridge;
  border-right: 2px var(--ubBlue) ridge;
  color: var(--ubBlue);
}
.selected {
  background-color: var(--ubBlue);
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
}
.blanks {
  background-color: yellow;
}
.ver {
  background-color: var(--ubBlue);
}
#avatar, #changeFont, #changeColors {
  background-color: var(--ubBlue);
}

@media print {
	#myHeader, #myIntro {
		display: none;
  }
	#recipe {
   	border: 1px solid #000;
	}
}

@media screen and (max-width: 480px) {
  #guideLeftCol {
	  clear: both;
    display: block;
    width: 100%;
  }
  #guideRightCol {
	  clear: both;
    display: block;
    width: 100%;
  }
}