Documentation [alpha]

HTML(click to show/hide)

<link rel="stylesheet" type="text/css" href="default.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="../../scripts/knob.js"></script>

<div class="my_account">
    <div class="middle">
        <h3>My account</h3>
        <h4>Hi Gabriella!</h4>
        <div class="image_area">
            <img src="http://dummyimage.com/150x150/000000/fff" alt="Hi Gabriella!" />
        </div>
        <dl>
            <dt>Name</dt>
            <dd>
                Gabriela Estevez
            </dd>
            <dt>Email</dt>
            <dd>
                gabriela.estevez@hotmail.com
            </dd>
            <dt>International Calling Access Number</dt>
            <dd>
                (201) 204-1125
            </dd>
        </dl>
    </div>    
    <div class="service_line">
        <div class="gauge">
            <div class="progress">
                <input type="text" value="30" data-width="60" data-height="60" data-font="24" data-value="100" data-thickness=".2" class="dial">            
                <script>
                    $(function() {
                        $(".dial").knob({'readOnly': true, 'fgColor':"#cc0000", 'bgColor':'#9eb7cf'});
                    });
                </script>            
            </div>
            <span class="message">Your Profile is 30% Complete</span>
        </div>
        <a href="#" class="btn2">Edit profile</a>
    </div>
</div>

generated CSS(click to show/hide)

/*  */
.module_header {
  color: #730000;
  text-transform: uppercase;
  font-size: 42px;
  margin: 0;
}
.my_account .middle {
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  background: #fff;
  padding: 25px;
}
.my_account .middle h3 {
  color: #730000;
  text-transform: uppercase;
  font-size: 42px;
  margin: 0;
}
.my_account .middle h4 {
  font-size: 20px;
  font-weight: 300;
  border-bottom: solid 2px #e8e8ee;
  margin: 0 0 23px;
  padding: 0 0 10px 0;
}
.my_account .middle .image_area {
  float: left;
  padding-right: 25px;
}
.my_account .middle dl dt {
  font-size: 12px;
  font-weight: bold;
  color: #484848;
  padding-bottom: 5px;
}
.my_account .middle dl dd {
  font-size: 16px;
  color: #000;
  padding-bottom: 15px;
}
.my_account .service_line {
  clear: both;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  min-height: 100px;
  background: #ebf0f5;
  position: relative;
}
.my_account .service_line .btn2 {
  /*
1 - border
2 - pressed inner shadow
3 - gradient
4 - focus
*/
  display: inline-block;
  border: none;
  border-radius: 5px;
  padding: 14px 34px;
  text-transform: uppercase;
  text-decoration: none;
  color: #CC0000;
  text-shadow: 0 1px 0 #FFF;
  font-size: 1em;
  font-weight: bold;
  line-height: 1.2;
  background: #e0e0ed;
  box-shadow: /* 1 */ inset 0 0 0 1px rgba(0, 0, 0, 0.2), /* 2 */ inset 0 0 0 0 rgba(0, 0, 0, 0), /* 3 */ inset 0 2.2em 2.2em -1.1em #ffffff, /* 4 */ 0 0 0 0 rgba(0, 128, 255, 0.3);
  transition: all 0.2s;
  position: absolute;
  right: 30px;
  top: 26px;
}
.my_account .service_line .btn2:hover {
  color: #FD0000;
  background-color: #ECECFB;
  text-decoration: none;
  box-shadow: /* 1 */ inset 0 0 0 1px rgba(0, 0, 0, 0.3), /* 2 */ inset 0 0 0 0 rgba(0, 0, 0, 0), /* 3 */ inset 0 2.2em 2.2em -1.1em #ffffff, /* 4 */ 0 0 0 0 rgba(0, 128, 255, 0.3);
}
.my_account .service_line .btn2:focus {
  outline: none;
  box-shadow: /* 1 */ inset 0 0 0 1px rgba(0, 0, 0, 0.3), /* 2 */ inset 0 0 0 0 rgba(0, 0, 0, 0), /* 3 */ inset 0 1.1em 1.1em -0.6em #ffffff, /* 4 */ 0 0 0 3px rgba(0, 128, 255, 0.3);
}
.my_account .service_line .btn2:active {
  outline: none;
  box-shadow: /* 1 */ inset 0 0 0 1px rgba(0, 0, 0, 0.3), /* 2 */ inset 1px 2px 3px 0 rgba(0, 0, 0, 0.2), /* 3 */ inset 0 1.1em 1.1em -0.6em #ffffff, /* 4 */ 0 0 0 0 rgba(0, 128, 255, 0.3);
  transition-duration: 0.1s;
}
.my_account .service_line .btn2.disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}
.my_account .service_line .btn2.disabled:hover,
.my_account .service_line .btn2.disabled:focus,
.my_account .service_line .btn2.disabled:active {
  background: #e0e0ed;
}
.my_account .service_line .dial {
  font-size: 24px;
  font-weight: bold;
  float: left;
}
.my_account .service_line .gauge {
  position: absolute;
  top: 20px;
  left: 30px;
}
.my_account .service_line .gauge .progress {
  display: inline-block;
  vertical-align: top;
}
.my_account .service_line .gauge .message {
  display: inline-block;
  color: #000;
  font-weight: bold;
  max-width: 120px;
  padding: 5px 0 0 10px;
}