/*
*
* aodacolours.css
*
* @link    http://www.tech360.ca
* @link    http://www.colourphill.com
* @license For open source use: GPLv3
*          For commercial use: tech360 Commercial License
* @author  David Rumsey
* @version 1.0.0
*
* Purpose:       Contains primary styles for AODA Colour Tool.
* Author:        colourphill.com
* Creation Date: December 30, 2016
*
*/

.jsColorBtn {
  border: 1px solid #333333;
  border-radius: 9px;
  position: absolute;
  padding: 0 15px;
  height: 15px;
  color: #333333;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  line-height: 1.3em;
}
.jsColorBtn:hover {
  border-color: #0000ff;
  color: #ffffff;
  background-color: #0000ff;
}
.jsColorField:hover {
  background-color: #EBF7F9;
}

body { margin: 0; min-width: 1024px; font-family: 'Open Sans', sans-serif; }
#cover { padding: 0 20px; }

#top-banner { background-color: #02aad8; width: 100%; height: auto; }
#top-banner a { vertical-align: middle; }
#top-banner img {
  height: 50px;
  width:auto;
  margin: 5px 0 0px 15px;
  padding: 10px;
  border-radius: 15px;
  background-color: #ffffff;
}
#top-banner h1 {
  color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  font-size: 36px;
  padding: 15px 0 15px 20px;
  margin: 0px 0px 0px 0px;
}
#top-banner h1 a {
  font-family: 'Viga', sans-serif;
  text-decoration: none;
  color: #ffffff; font-size: 1.3em;
 }
#top-banner h1 a:hover { color: #565656; }


#colourChart table {
  margin-left: 10px;
  table-layout: fixed;
  margin-top: 30px;
  border-collapse: collapse;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
}
#colourChart .hdr { background-color: #f0f0f0; }
#colourChart .cHdr { width:140px; }
#colourChart .clrNameHdr:hover { cursor: pointer; background-color: #EBF7F9; border: 2px #cc0000 solid; }
#colourChart .rHdr { width:120px; }
#colourChart th, #colourChart td { height: 1.5em; }
#colourChart tbody {  }
#colourChart .cdisp { height:1em; width: 15px; color:#ffffff; }
#colourChart .algnRt { text-align:right; }
#colourChart .rCName { width:160px; }
#colourChart .rHexName { width:60px; text-align: right; font-family: Courier, monospace; }
#colourChart .cHexName { font-family: Courier, monospace; }
#colourChart .ratioCell  { text-align:right; width: 50px; }
#colourChart .resultCell { width: 30px; }
#colourChart .resultCell:hover { cursor: pointer; }
#colourChart .hvy-btm    { border-bottom: 2px solid black; }
#colourChart .hvy-tp     { border-top: 2px solid black; }
#colourChart .hvy-lft    { border-left: 2px solid black; }
#colourChart .hvy-rt     { border-right: 2px solid black; }
#colourChart .lt-btm    { border-bottom: 1px solid black; }
#colourChart .lt-tp     { border-top: 1px solid black; }
#colourChart .lt-lft    { border-left: 1px solid black; }
#colourChart .lt-rt     { border-right: 1px solid black; margin-left: 10px; }
#colourChart .addBtn    { background-color: rgba(5,153,12,0.5); color: #ffffff; margin-bottom: 10px; }
#colourChart .addBtn:hover { background-color: rgba(5,153,12,1.0); }
#colourChart .rmvBtn    { background-color: rgba(221,0,0,0.5); color: #ffffff; margin-right: 10px;  margin-bottom: 10px;}
#colourChart .rmvBtn:hover { background-color: rgba(221,0,0,1.0); }
#colourChart button { width: 40px; border:none; font-size: 14px; border-radius: 10px; padding: 0 0 3px 0; }
#colourChart #rmvBtn0 { display:none; }
#colourChart #addBtn0 { margin-right: 0 auto; }

#colourSampleCover {
  background-color: rgba(0,0,0,0.40);
  display:none;
  z-index: 1000;
  position:absolute;
  bottom:0;
  left:0;
}

#colourSample {
  position: fixed;
  top: 50px;
  left: 100px;
  background-color: #ffffff;
  z-index: 1001;
  width: 480px;
  height: auto;
  border: 1px solid black;
  border-radius: 10px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}

#sampleHeaders {
  background-color: #ffffff;
  margin: 0;
  border-bottom: 1px solid #0000ff;
  border-radius: 10px 10px 0 0;
}
#sampleHeaders h1 {
  margin:0 0 5px 0;
  padding: 5px 0 5px 0;
  color: #0000ff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
  font-variant: small-caps;
  border-bottom: 1px solid #0000ff;
}
#sampleHeaders p {
  color: #0000ff;
  padding:0px 10px 5px 10px;
  margin: 0;
}
#sampleBox { padding: 10px; }

#explanations {
  width: 80%;
  margin: 15px 0px 15px 10px;
  font-family: 'Open Sans',sans-serif;
  font-size: 14px;
}
#explanations ul { margin-top: 3px; }
#explanations h2 { font-weight: 600; font-size: 18px; margin-bottom: 0px; }
#explanations h3 { font-weight: 600; font-size: 14px; margin-bottom: 0px; margin-top: 5px; }
#explanations p { margin-top: 5px; margin-bottom: 0px; }