purelymental-demo/assets/stylesheets/layout/_assessment-results.css.scss

.assessment_results {
  .clearFloats {
    clear: both;
  }
  .spacer {
    background: transparent image-url("assessment/ellipse.png") top left no-repeat;
    width: 36px;
    height: 10px;
    margin-left: auto;
    margin-right: auto;
  }
  #result-top {
    font-family: "Dosis", "Open Sans";
    font-size: 18px;
    @media screen and (min-width: 768px) {
      padding: 20px;
    }
    #animal {
      width: 137px;
      height: 107px;
      margin-left: auto;
      margin-right: auto;
    }

    #description {
      padding: 10px;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      max-width: 768px;
    }
  }
  .result-section {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 20px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    max-width: 768px;
    font-family: "Dosis", "Open Sans";
    font-size: 14px;
    
    #memory-image {
	  background: transparent image-url("assessment/memory_76.png") top left no-repeat;
    }
    #focus-image {
    background: transparent image-url("assessment/focus_76.png") top left no-repeat;
    }
    #problem_solving-image {
	  background: transparent image-url("assessment/logic_76.png") top left no-repeat;
    }
    #spatial_recognition-image {
	  background: transparent image-url("assessment/spatial_76.png") top left no-repeat;
    }

    .result-image {
      width: 76px;
      height: 76px;
      margin-left: auto;
      margin-right: auto;
      @media screen and (min-width: 768px) {
        float: left;
        margin-right: 10px;
      }
    }
    
    .result-details {
      float: left;
      max-width: 600px;
      .result-bar {
        height: 40px;
        position: relative;
        padding-bottom: 10px;
        
        #memory-floater {
	      color: #D55F60;
        }
        #focus-floater {
          color: #F6D474;
        }
          
        #problem_solving-floater {
          color: #67ABDE;
        }
          
        #spatial_recognition-floater {
          color: #84C99D;
        }
        
        .bar-floater {
          width: 45px;
          height: 26px;
          padding-top: 3px;
          padding-left: 13px;
          background: transparent image-url('assessment/result-indicator.png') top left no-repeat;
          font-family: "Open Sans";
          font-size: 10px;
          font-weight: bold;
}
        .meter {
          width: 100%;
          height: 20px;
          background: lightgray;
          border-radius: 10px;
          
          #memory-bar {
            background: #D55F60 image-url("assessment/red_texture.png");
          }
          
          #focus-bar {
            background: #F6D474 image-url("assessment/yellow_texture.png");
          }
          
          #problem_solving-bar {
            background: #67ABDE image-url("assessment/blue_texture.png");
          }
          
          #spatial_recognition-bar {
            background: #84C99D image-url("assessment/green_texture.png");
          }
          
          span {
            height: 100%;
            display: block;
            background-color: limegreen;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
          }
        }

        .full_memory { background: #D55F60 !important; }
        .full_focus { background: #F6D474 !important; }
        .full_problem_solving { background: #67ABDE !important; }
        .full_spatial_recognition { background: #84C99D !important; }
      }
      .result-description {
        padding: 5px;
        h1 {
          font-size: 20px;
          font-weight: bold;
          padding-bottom: 15px;
        }
      }
    }
  }
  #conclusion {
	font-family: "Dosis", "Open Sans";
	font-size: 14px;
	max-width: 768px;
	padding: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}
}