.tm-p {
    box-shadow: 0 0 10px gray;
    background-color: #edf3fb;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    padding-left: 0px;
    padding-right: 0px;
}

.tm-p-testname {
    text-align: left;
    padding-top: 5px;
}

.tm-p-testname p {
    margin-bottom: 0;
}

.tm-p.h4 {
    color:#777;
}

.tm-p-img {
    max-width: 100%;
    max-height: 200px;
    display: inline;
    padding-top: 15px;
}



.tm-shadowed {
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
filter: url(#drop-shadow);
-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}


.tm-p-wide-img {
    width:100%;
}

.tm-p-header {
    color:#ddd;
    box-shadow: 0 0 10px gray;
    background-color:#16293e;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.tm-p-header > h2 {
    font-family: 'Yanone Kaffeesatz', arial;
    font-size: xx-large;
}

.tm-p-header > h3 {
    font-family: 'Yanone Kaffeesatz', arial;
    font-size: xx-large;
}

.tm-p-content > h4 {
    font-family: 'Yanone Kaffeesatz', arial;
    font-size: x-large;
}

.tm-p-testname > h4 {
    font-family: 'Yanone Kaffeesatz', arial;
    font-size: large;
    font-weight: 300;
}

.tm-p-subheader {
    color:#777;
    margin-top: 10px;
    margin-bottom: 20px;
}

.tm-p-text {
    color:#333;
}

.tm-p-btn {
    border-radius: 9px;
    box-shadow: 0 0 7px 0px #aaa;
    font-size: large;
    white-space: normal;
}

.meter { 
	height: 40px;  /* Can be anything */
	position: relative;
	background: #555;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding: 10px;
	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
        margin-bottom: 10px;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
}

.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43,194,83);
  background-image: linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
  );
  box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

.orange > span {
  background-color: #f1a165;
  background-image: linear-gradient(to bottom, #f1a165, #f36d0a);
}


.rating-container {
    display:inline-block;
}

.jq-stars {
  display: inline-block;
}

.jq-rating-label {
  font-size: 22px;
  display: inline-block;
  position: relative;
  vertical-align: top;
  font-family: helvetica, arial, verdana;
}

.jq-star {
  width: 100px;
  height: 100px;
  display: inline-block;
  cursor: pointer;
}

.jq-star-svg {
  padding-left: 3px;
  width: 100%;
  height: 100% ;
}

.jq-star:hover .fs-star-svg path {
}

.jq-star-svg path {
  /* stroke: #000; */
  stroke-linejoin: round;
}

/* un-used */
.jq-shadow {
  -webkit-filter: drop-shadow( -2px -2px 2px #888 );
  filter: drop-shadow( -2px -2px 2px #888 );
}

.social-button-container {
  /*background-color: red;*/
  /**
  * This is a nice CSS trick that allows you to clear an element
  * without having to add extra elements to your HTML. This helps
  * seperate content from design, which should always be an architectural
  * goal.
  */
  overflow: hidden;
  float: right;
}

.social-button {
  float: left;
  min-width: 90px;
  min-height: 20px;
  padding-right: 25px;
}

@media screen and (max-width: 568px) {
        h2 {
    font-size:24px;
    }
        h3 {
    font-size:18px;
    }
        h4 {
    font-size:14px;
    }
    .tm-p-btn {
    font-size: 14px;
    }
}

.perf_468x60_ad img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
    box-shadow: 5px 5px 2px #777;
}