/***************************
 * kingworkscreative.com
 ***************************/
 
@import url(http://fonts.googleapis.com/css?family=Francois+One);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(http://fonts.googleapis.com/css?family=Tangerine:700);
 
body{
    background:url('../jpg/body_bg.jpg') repeat 0 0 #252525;
    margin:0;
    padding:0;
 }
.charts_right {
  position: relative;
  min-width: 100px;
}
.clear{
    clear:both;
    height:1px;
    margin:0;
    padding:0;
    width:100%;
}
.cr_head {
  color:#999999;
  font: bold 16px Arial;
  height: 34px;
  padding: 15px 0 0;
}
 .column{
    float:left;
 }
  .hort_gauge {
  float: left;
  height: 160px;
  width: 200px;
}
.intro {
  font-family: 'Arial',sans-serif;
  font-size: 14px;
  margin: 20px 0 0;
  width: 1025px;
}
.job_list {
  margin: 0;
  padding: 0;
  width: 100%;
}
.job_list li {
  background-color:#999999;
  border-top: 1px solid #777777;
  list-style-type: none;
  padding: 2px 5px;
  width: 100%;
  
  background: #888888; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg4ODg4OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5OTk5OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #888888 0%, #999999 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#888888), color-stop(100%,#999999)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #888888 0%,#999999 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #888888 0%,#999999 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #888888 0%,#999999 100%); /* IE10+ */
background: linear-gradient(to bottom,  #888888 0%,#999999 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#999999',GradientType=0 ); /* IE6-8 */


}
.job_list li.top{
  border-top:none;
}
.job_list li a:link, .job_list li a:visited {
  color:#ffffff;
  display:block;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  text-decoration: none;
  width:100%;
}
.job_list li a:hover{
  color:#252525;
}
.job_list .selected a:link, .job_list .selected a:visited{
  color:#F9C300;
}
.jobs_left {
  width: 172px;
}
.job_title {
  color: #999999;
  font: bold 16px Arial;
  height: 34px;
  padding: 15px 0 0;
  text-align: center;
}
.job_wrap {
  border: 1px solid #bbb;
  height: 600px;
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 0;
}
.legend {
  background:#bfbfbf;
  float: right;
  padding:10px;
  width: 455px;
  height: 160px;
  
  -webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.marks {
  margin: 0 30px;
  width: 50px;
}
.notes_list {
  color:#252525;
  font-family: 'Arial',sans-serif;
  font-size: 12px;
  margin: 0;
  padding: 0 0 0 15px;
}
.notes_list li {
  margin: 0 0 8px;
}
.notes_title {
  clear: both;
  color: #ffffff;
  font: bold 16px Arial;
  height: 30px;
  padding: 0;
}
.page_banner {
  background: url("../png/banner.png") no-repeat scroll -7px 0 transparent;
  height: 168px;
  margin: 0 0 -26px;
  position: relative;
  width: 1064px;
  z-index: 999;
}
.content_wrap {
  background: url("../jpg/wrap_bg.jpg") repeat scroll 0 0 #ffffff;
  height: 1000px;
  margin: 0 auto;
  padding: 5px 0 0 15px;
  width: 1040px;
}
.page_wrap{
    margin: 0 auto;
    width: 1070px;
}
.page_wrap a:link, .page_wrap a:visited{
    color:#2F5B7F;
    text-decoration:none;
}
.page_wrap a:hover{
    text-decoration:underline;
}
.pay_gauge{
  margin-left:10px;
}
.site {
  color: #efefef;
  font-family: 'Tangerine',cursive;
  font-size: 26px;
}
.site a:link, .site a:visited{
    color:#F9B900;
    font-family: 'Oswald', sans-serif;
    font-size:16px;
}
.site a:hover{
    color:#B9D20D;
    text-decoration:none;
}
.social{
  height:30px;
  margin-bottom:-30px;
  position:relative;
  width:200px;
  z-index:999;
}
.sources{
    float:left;
}
.source_list {
  font-family: 'Arial',sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0 0 0 15px;
}
.source_list li{
    list-style-type:none;
}
.sources_title {
  clear: both;
  color: #999999;
  font: bold 16px Arial;
  height: 30px;
  padding: 10px 0 0;
}
.source_wrap {
  height: 200px;
  width: 1000px;
}
.spacer {
  background: none repeat scroll 0 0 gray;
  height: 50px;
}
.tag {
  clear: both;
  color: #888;
  float: right;
  font-family: 'Tangerine',cursive;
  font-size: 20px;
  position: relative;
  right: 15px;
}
.tag a:link, .tag a:visited{
    color:#888;
    font-family: 'Oswald', sans-serif;
    font-size:13px;
}
.tag a:hover{
    color:#B9D20D;
    text-decoration:none;
}
/********************** arched gauges **************************/
.arch_gauges {
  height: 155px;
  margin-left: 45px;
  width: 600px;
}
 
/********************* scatterplot.css *************************/
.axis-x{
  height:30px;
}
.axis-y{
  float: left;
  height:30px;
  left: -155px;
  position: relative;
  top: 195px;
  width: 350px;
  z-index: 999;

    transform:rotate(270deg);
    -ms-transform:rotate(270deg); /* IE 9 */
    -webkit-transform:rotate(270deg); /* Opera, Chrome, and Safari */
}
.axis-label {
  color: #252525;
  font-family: 'Francois One',sans-serif;
  font-size: 24px;
  text-align: center;
}
#canvas {
  background: none repeat scroll 0 0 #dfdfdf;
  border: 30px solid #dfdfdf;
  height: 350px;
  left: 40px;
  margin-top: 20px;
  position: relative;
  width: 550px;
}
#container {
  width: 100%;
}
.container_head {
  font-family: 'Oswald',sans-serif;
  font-size: 17px;
  height: 20px;
  margin: 0;
  padding: 0;
}
.dot {
    background: none repeat scroll 0 0 #4682B4;
    border-radius: 5px;
    bottom: 0;
    opacity: 0.8;
    position: absolute;
    transition-duration: 0.8s;
}
#canvas .selected {
  background-color: red;
  z-index: 999;
}
.bar:hover {
    opacity: 1;
}
.dot .label {
    background: none repeat scroll 0 0 #ffffff;
    bottom: -25px;
    box-shadow:0 1px 1px #252525;
    color:#252525;
    display: none;
    font-family:'Arial', sans-serif;
    font-size:14px;
    left: 10px;
    padding: 5px;
    position: absolute;
    right: 0;
    text-align: center;
    width:75px;
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.dot:hover .label, .selected .label{
    display: block;
}
.selected .label {
  border: 1px solid pink;
  
  z-index:999;
}
.dot .value {
    font-weight: bold;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    top: -25px;
}
.scatterwrap {
  height: 500px;
  position: relative;
  text-align: center;
  width: 650px;
  z-index: 997;
}
.selector {
  float: left;
  margin: 0 5px;
}
.selector select {
  height: 20px;
  margin: -4px 5px 0;
  padding: 0;
  vertical-align: middle;
}
.select_label{
    float:left;
    margin-right:0px;
}
.selector_wrap {
  color: #999999;
  height: 35px;
  margin: 0 auto;
  padding: 0 0 0 40px;
  text-align: center;
  width: 629px;
}
.dot:hover{
    z-index:999;
}

/******* linear *********/
.outer {
    width: 22px;
    height: 560px;
    /*overflow: hidden;*/
    padding: 0 5px 0;
    position: relative;
    
    -moz-box-shadow:    inset 0 0 8px #cfcfcf;
    -webkit-box-shadow: inset 0 0 8px #cfcfcf;
    box-shadow:         inset 0 0 8px #cfcfcf;
}

.inner, .inner div {
  border: medium none !important;
  left: 0;
  /*overflow:hidden; */
  position: absolute;
  width: 32px;
}

.inner {
    border: 2px solid #999;
    border-top-width: 0;
    background-color: #A9D70D;
    bottom: 0;
    height: 0%;
    opacity:0.6;
}

.inner div {
    /*border: 2px solid orange;
      border-bottom-width: 0;
      background-color: orange;
    */
    
    top: 0;
    width: 100%;
    height: 5px;
}
.edu_gauge {
  width: 90px;
}
.edu_gauge .outer{
    background:url('../png/edu_lines.png') no-repeat 0 0 #efefef;
}
.pay_gauge {
  width: 115px;
}
.linear_label {
  background-color: #ffffff;
  box-shadow: 0 2px 2px #252525;
  font-family: 'Arial',sans-serif;
  font-size: 14px;
  height: 18px !important;
  left: 38px !important;
  padding: 7px 5px 5px;
  position: relative !important;
  text-align:center;
  top: -12px !important;
  width: 62px !important;
  z-index: 999;
  
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.label_long{
  width:128px !important;
}
.pay_gauge .outer{
    background:url('../png/linear_lines.png') no-repeat 0 0 #efefef;
}
.skill {
  overflow:visible;
  padding-left: 18px;
  position: relative;
  width: 115px;
  z-index: 1;
}
#label_edu_level{
    opacity:1;
}