/* CSS Document */
body{
	font-family:Tahoma,Verdana,Arial;
	font-size:12px;
	font-weight:normal;
}
a {
	color:#000;	
}
.adminHolder{
	border:solid 1px #0C6;	
}
.adminHeader{
	color:#000;
	font-family:Tahoma,Verdana,Arial;
	font-size:14px;
	font-weight:bold;
	border-bottom:solid 2px #B2A266;
	background:#D9C0AA;
}
.adminLogin{
	width:400px;
	margin-top:200px;
}
.formInputTitle{
	font-family:Tahoma,Verdana,Arial;
	font-weight:bold;
	text-align:right;	
	vertical-align:top;
	padding-top:6px;
	font-size:14px;
	white-space:nowrap;
}
.errorMessage{
	font-family:Tahoma,Verdana,Arial;
	font-size:11px;
	font-weight:bold;	
	color:#900;
}
.formInputField{
	border-bottom:solid 1px #B2A266;	
	padding:3px;
	font-family:Tahoma,Verdana,Arial;
	font-size:11px;
}
.adminListBtmBorder{
	border-bottom:solid 1px #B2A266;	
	padding:3px;
	font-family:Tahoma,Verdana,Arial;
	font-size:11px;
}

.adminListBtmBorderAlt1{
	border-bottom:solid 1px #B2A266;	
	padding:3px;
	font-family:Tahoma,Verdana,Arial;
	font-size:12px;
	background-color:#F5EBD3;
}
.adminListBtmBorderAlt0{
	border-bottom:solid 1px #B2A266;	
	padding:3px;
	font-family:Tahoma,Verdana,Arial;
	font-size:12px;
	background-color:#FFFFFF;
}
.backButton{
	font-size:11px;
}
.saveButton{
	font-size:11px;
}
.pointer { 
cursor:default;
text-decoration: underline;
}    

// This technique was created by Thierry Koblentz 
// (http://www.cssmojo.com/) to make larger hit areas for
// interactive content:
// https://codepen.io/thierry/pen/gvYPbN
.input-wrapper {
  position: relative;
  
  // Make the pseduo element stretch to the full width and
  // height of `.input-wrapper`
  & label::after {
    content: "";
    height: 100%;
    position: absolute;
     top: 0;
     left: 0;
    width: 100%;
  }
  
  // Ensure the input isn't accidentally blocked by clicks 
  // on the pseudo element
  & input {
    position: relative;
    z-index: 2;
  }
}
/*
label {
  color: #4a4a4a;
  display: block;
  letter-spacing: 0.015em;
 /* padding-bottom: 0.25em;
  padding-left: 0.25em;*/
}
*/
.input-hint {
  display: block;
  font-size: 80%;
  line-height: 1.4;
  margin-top: 0.15em;
  padding-left: 0.25em;
}

input {
  background: #ffffff;
  background: linear-gradient(0deg, #ffffff 93%, #e0e0e0 100%); 
  border: 1px solid #999999;
  font-size:12px;
 /* line-height: 1;*/
 /* padding: 0.75em 0.75em 0.6em 0.75em;*/

  // States
  &:hover,
  &:active {
    border-color: darken(#999999, 15%);
  }

  &:focus {
    box-shadow:
     0 0 0 2px #ffffff,
     0 0 0 5px #d33a2c;
    outline: none;
  }
}
textarea {
  background: #ffffff;
  background: linear-gradient(0deg, #ffffff 93%, #e0e0e0 100%); 
  border: 1px solid #999999;
  border-radius: 0.3em;
  display: block;
  line-height: 1;
  padding: 0.75em 0.75em 0.6em 0.75em;
  width: 98%;

  // States
  &:hover,
  &:active {
    border-color: darken(#999999, 15%);
  }

  &:focus {
    box-shadow:
     0 0 0 2px #ffffff,
     0 0 0 5px #d33a2c;
    outline: none;
  }
}



// Demo setup
*, 
*::before, 
*::after {
  box-sizing: border-box; 
}

html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
}
/*
body {
  background-color: #bc3428;
  color: #666666;
  margin: 5em;
}
*/
main {
  background-color: #ffffff;
  border-radius: 0.5em;
  padding: 1em;
  position: absolute;
   top: 50%;
   left: 50%;
  transform: translate(-50%, -50%);
  width: 95vw;

  // Media Queries
  @media screen and (min-width: 35em) {
    padding: 2em;
    width: 75vw;
  }
}

samp {
  background-color: #ededed;
  border: 2px solid #ededed;
  border-radius: 0.2em;
  margin-left: 0.15em;
  margin-right: 0.05em;
  padding-left: 0.25em;
  padding-right: 0.25em;
  speak: digits;
  word-break: break-word;
}

abbr[title] {
  text-decoration: none;
}