/* For all devices: */
* {
  box-sizing: border-box;
}

p {
	margin-top: 0;
	margin-bottom: 0;
}

h1 {
    color: SteelBlue;
}

.boxShadow {
	box-shadow       : 4px 7px 18px DodgerBlue;
}

.content {
	font: 100%/1.4 serif;
	background-image: linear-gradient(to bottom, #FFE5B4  0%,  #FFA500 100%);
	margin: 0;
	padding: 0;
	color: black;
	border-radius: 10px;
	min-height: 560px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 5px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

img {
  border-radius: 5%;
}

a:link {
	color: darkorange;
    text-decoration: none;	
}

a:visited {
	text-decoration: none;
	color: darkorange;
}

a:hover, a:active, a:focus {
    color: orange;	
	text-decoration: none;
}

.header {
  background-color: Orange;
  color: white;
  padding: 5px;
  border-radius: 10px;
}

.nav {
	background-color: Aqua;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 2px;
  margin-bottom: 5px;
  background-color: teal;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  border-radius: 10px;
}

.menu li:hover {
  background-color: dodgerBlue;
  border-radius: 10px;
}

.aside {
  background-color: orange;
  padding: 6px;
  color: white;
  text-align: center;
  font-size: 14px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.whiteOnBlack {
  background-color: Black;
  padding: 6px;
  color: white;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.blueOnYellow {
  background-color: LightYellow;
  padding: 6px;
  color: Blue;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.orangeOnWhite {
  background-color: WhiteSmoke;
  padding: 6px;
  color: OrangeRed;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.orangeOnBlack {
  background-color: Black;
  padding: 6px;
  color: Orange;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/* form styles */
form {
  padding-left: 10px;
  text-align: left;
  border-radius: 10px;
}

.form-25 {
  float: left;
  margin-top: 5;
  text-align: left;
}

.form-50 {
  float: left;
  margin-top: 5;
  text-align: left;
}

.form-75 {
  float: left;
  margin-top: 5;
  text-align: left;
}

.form-100 {
  float: left;
  margin-top: 5;
  text-align: left;
}

label {
  padding: 2px 2px 2px 0;
  display: inline-block;
}

input[type=text], select, textarea {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 10px;
  resize: vertical;
  border-radius: 10px;
}

input[type=submit] {
  background-color: black;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: 10px;  
}

input[type=submit]:hover {
  background-color: orange;
  color: black;
  border-radius: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.headerCellOnly {
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
  height: 10vw;
  width: 100%;
}

.login-on-cell {  
   margin-top: 10px;
   margin-bottom: 4px; 
   width: 100%;  
}
  
.show-on-cell    { 
    width: 100%;   
}

.footer {
  background-color: Black;
  color: Orange;
  text-align: center;
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
  border-radius: 10px;
}

.backgroundColorCenter {
   background-image: linear-gradient(to bottom, #AFEEEE 0%,  #FFFAFA 100%);  
}

.bottomRight {
  vertical-align: bottom;
  text-align: right;
}

.always-25  {width: 25%;}
.always-75  {width: 75%;}
.always-100 {width: 100%;}

/**********************/
/* Different devices  */
/**********************/

/* For mobile phones: */
@media only screen and (max-width: 600px) { 
  .show-on-wideScreen { display:none; }
  .show-on-cell       { display:inline-block }
  .headerCellOnly     { display:inline-block; }
  .login-on-cell      { display:inline-block; } 
  .form-25            { width: 100%; }
  .form-50            { width: 100%; }
  .form-75            { width: 100%; }
  .form-100           { width: 100%; }
  [class*="col-"]     { width: 100%; }
  input[type=text], select, textarea { width: 100%; }
  input[type=submit] { width: 98%; }
}

/* For tablets: */
@media only screen and (min-width: 600px) and (max-width: 767px) {
  .show-on-wideScreen { display:inline-block; }
  .show-on-cell       { display:none }
  .headerCellOnly     { display:none; }
  .login-on-cell      { display:none; }
  .form-25            { width: 25%; }
  .form-50            { width: 50%; }
  .form-75            { width: 75%; }
  .form-100           { width: 100%; }
  .col-d-1            {width: 8.33%;}
  .col-d-2            {width: 16.66%;}
  .col-d-3            {width: 25%;}
  .col-d-4            {width: 33.33%;}
  .col-d-5            {width: 41.66%;}
  .col-d-6            {width: 50%;}
  .col-d-7            {width: 58.33%;}
  .col-d-8            {width: 66.66%;}
  .col-d-9            {width: 75%;}
  .col-d-10           {width: 83.33%; }
  .col-d-11           {width: 91.66%;}
  .col-d-12           {width: 100%;}
  input[type=submit]  {width: 250px; }
}

/* Mobile phones and tablets on lanscape - treat like a fat cell phone*/
@media screen and (min-width: 568px) and (max-width: 767px) and (orientation: landscape) {
  .show-on-wideScreen { display:none; }
  .show-on-cell       { display:inline-block }
  .headerCellOnly     { display:inline-block; }
  .login-on-cell      { display:inline-block; }
  .form-25            { width: 100%; }
  .form-50            { width: 100%; }
  .form-75            { width: 100%; }
  .form-100           { width: 100%; }
  [class*="col-"]     { width: 100%; } 
  input[type=text], select, textarea { width: 100%; }
  input[type=submit] { width: 98%; }
}

/* block rotating...not working */
@media screen and (min-width: 601px) and (max-width: 600px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

/* For desktop: */
@media only screen and (min-width: 768px) {
  .show-on-wideScreen { display:inline-block; }
  .show-on-cell       { display:none }
  .headerCellOnly     { display:none; }
  .login-on-cell      { display:none; }
  .form-25            { width: 25%; }
  .form-50            { width: 50%; }
  .form-75            { width: 75%; }
  .form-100           { width: 100%; }
  .col-d-1            {width: 8.33%;}
  .col-d-2            {width: 16.66%;}
  .col-d-3            {width: 25%;}
  .col-d-4            {width: 33.33%;}
  .col-d-5            {width: 41.66%;}
  .col-d-6            {width: 50%;}
  .col-d-7            {width: 58.33%;}
  .col-d-8            {width: 66.66%;}
  .col-d-9            {width: 75%;}
  .col-d-10           {width: 83.33%; }
  .col-d-11           {width: 91.66%;}
  .col-d-12           {width: 100%;}
  input[type=submit]  {width: 250px; }
}