/* ========================================================================
 * version:      main.css v1.2
 * date:         August 25, 2014
 * project:      FEWD19 final project called "dataVizDOM"
 * instructor:   Kara Yu
 * organization: General Assembly
 * developer:    Karl Schultz
 * contact:      karl.schultz@yahoo.com
 * ======================================================================== */

/* ========================================================================
 * typography:
 * ======================================================================== */
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.bodyLink {
  color: #646452;
  text-decoration: none;
}

a:hover {
  color: #646452;
  background-color: #E6F5FA;
  text-decoration: none;
}

.bodyCopy {
  font-family: Georgia, serif;
  line-height: 1.6em;
  padding: 0 0 2em 0;
}

/* ========================================================================
 * colors:
 * ======================================================================== */
/* WHITE background */
.white {
  background-color: #FFFFFF;
}

/* BEIGE background */
.color1-1 {
  background-color: #F7F7F4;
}

.color1-2 {
  background-color: #EEEEE7;
}

.color1-3 {
  background-color: #E3E3D6;
}

.color1-4 {
  background-color: #D8D8C6;
}

.color1-5 {
  background-color: #C7C7A3;
}

.color1-6 {
  background-color: #646452;
}

/* BEIGE font */
.fontColor1-6 {
  color: #646452;
}

.navLinks a {
  color: #FFFFFF;
}

a:link {

}

.navLinks a:visited {
  color: #D8D8C6;
}

.navLinks a:hover {
  color: #FFFFFF;
  background-color: #E3E3D6;
  text-decoration: none;
}

/* BLUE background */
.color2-1 {
  background-color: #E6F5FA;
}

.color2-2 {
  background-color: #B2E0F0;
}

.color2-3 {
  background-color: #80CCE6;
}

.color2-4 {
  background-color: #4DB8DB;
}

.color2-6 {
  background-color: #0099CC;
}

/* BLUE font */
.fontColor2-4 {
  color: #4DB8DB;
}

.fontColor2-6 {
  color: #0099CC;
}

/* ========================================================================
 * circles:
 * ======================================================================== */
.circleShape {
  border-radius: 50%;
  width: .5em;
  height: .5em;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.copyEndCircle {
  border-radius: 50%;
  width: .5em;
  height: .5em;
  margin: 0;
  padding: 0;
  display: inline-block;
  background-color: #0099CC;
}

.sidebarImage {
  margin: 0 0 0.5em 0;
  width: 8em;
  height: 8em;
}

.circleCallout {
  border-radius: 50%;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.circleShape2 {
  width: 50%;
  height:0;
  padding-bottom: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.circleShape2padding {
  padding: 1em;
  text-align: center;
}

/* ========================================================================
 * borders:
 * ======================================================================== */
.imgBorder {
  border-style: solid;
  border-width: 2px;
  border-color: #EEEEE7;
}

/* ========================================================================
 * layout:
 * ======================================================================== */
nav {
  padding: 1.6em 0 0.8em 0;
}

.top1-Right1 {
  padding: 1em 5% 0 0;
}

.top3-Right1 {
  padding: 3em 5% 0 0;
}

.top9-Right1 {
  padding: 9em 5% 0 0;
}

.topMargin1 {
  margin: 1em 0 0 0;
}

.bottom2 {
  padding: 0 0 2em 0;
}

.bottom3 {
  padding: 0 0 3em 0;
}

.width80 {
  width: 80%;
}

/* ========================================================================
 * D3:  draw div for D3
 * ======================================================================== */
#d3 {
}

.d3div {
  display: inline-block;
  width: 20px;
  height: 75px;
  background-color: red;
}

.arc path {
  stroke: #fff;
}

.bar {
  display: inline-block;
  width: 20px;
  height: 75px;
  background-color: red;
}

.bar.positive {
  fill: blue;
}

.bar.negative {
  fill: red;
}

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

/* ========================================================================
 * source code:  css3button.net START
 * ======================================================================== */
button.css3button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #ffffff;
  padding: 10px 20px;
  background: -moz-linear-gradient(
    top,
    #b2e0f0 0%,
    #0099cc);
  background: -webkit-gradient(
    linear, left top, left bottom,
    from(#b2e0f0),
    to(#0099cc));
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  border: 5px solid #eeeee7;
  -moz-box-shadow:
    0px 1px 3px rgba(100,100,82,0.5),
    inset 0px 0px 1px rgba(255,255,255,0.7);
  -webkit-box-shadow:
    0px 1px 3px rgba(100,100,82,0.5),
    inset 0px 0px 1px rgba(255,255,255,0.7);
  box-shadow:
    0px 1px 3px rgba(100,100,82,0.5),
    inset 0px 0px 1px rgba(255,255,255,0.7);
  text-shadow:
    0px -1px 0px rgba(000,000,000,0.4),
    0px 1px 0px rgba(255,255,255,0.3);
}

/* ========================================================================
 * source code:  css3button.net END
 * ======================================================================== */