@charset "utf-8";
 
 .loginbackground {
	width:100%;
 	padding: 0px 0px 0px 0px;	
 	margin:60px 0px 0px 0px;	/* first value=top: adjusts the height from the bottom of the element just above */
 	min-height:650px;  /* use min-height to grow with content */
 	position:relative;
	background-color:white;
	background-image:url('../images/Bar 3C_sepia_composite_crop.gif');
	background-repeat:no-repeat;
	background-size:100%;	
 }
 
 /* moves bdycontent up to meet navbar on mobile devices */
 @media (max-width:768px){
  .loginbackground {
	  margin-top:100px;  
	  display:block;  
  }
 }
 
  .transbox {
  	width:30%;
	position:relative;
	top:225px;
	margin:auto;
	padding:10px;
	height:210px;
	background-color:transparent;
	border-radius:2px;
	border: 2px solid #553c2a;			
  }
  
  @media (max-width:768px){ /* changes image to full width on mobile devices */
	  .transbox {
		  width:90%;
		  height:auto;
		  margin-top:60px; /* sets main image to appear under sticky navbar */
	  }	
  }
  
/* =================================== */
  
  form {
	  border: 0px solid #553c2a;
	  border-radius:6px;	 
  }
  
  input[type=text], input[type=password] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0px 10px 0px;
      display: inline-block;
      border: 1px solid #553c2a;
	  border-radius:6px;
      box-sizing: border-box;
	  background-color:#fff;
	  opacity:0.9;
	  font-size:14px;	  
  }
	  
  .button {
      background-color: #b98f71;
	  opacity:0.9;
      color: #553c2a;
      padding: 14px 20px;
      margin: 8px 0px 10px 0px;
      border: 1px solid #553c2a;
	  border-radius:6px;
      cursor: pointer;
      width: 100%;
	  font-size:16px;
	  font-weight:bold;
  }

  button:hover {
      opacity: 0.8;
  }