947 menu thingy

by Mike Gleeson

HTML

<!-- Begin Value Message Categories -->
<h1> Value Message Category </h1>
<div class="lgCircle categoryB">
</div><p class="legendTitle"> Burden of Disease <br></p>

<div class="lgCircle categoryF"> 
</div><p class="legendTitle"> Functional / R&D <br></p>

<div class="lgCircle categoryA">
</div><p class="legendTitle"> Adherence / Preference <br></p>

<div class="lgCircle categoryC"> 
</div><p class="legendTitle"> Clinical <br></p>

<div class="lgCircle categoryH"> 
</div><p class="legendTitle"> Health Economics <br></p>

<!-- End Value Message Categories -->

<!-- Begin Level of Evidence Categories -->
<h1> Level of Evidence </h1>
<div class="smCircle categoryHigh">
</div><p class="legendTitle"> High - HTA/Government Agencies/Payors <br></p>

<div class="smCircle categoryMed"> 
</div><p class="legendTitle"> Med - HCP <br></p>

<div class="smCircle categoryLow"> 
</div><p class="legendTitle"> Low - Patient Groups <br></p>

<!-- End Level of Evidence Categories -->


<!-- Begin Evidence Quality Categories -->
<h1> Evidence Quality </h1>
<div class="smCircle categoryHQ">
</div><p class="legendTitle"> High Quality <br></p>

<div class="smCircle categoryMQ"> 
</div><p class="legendTitle"> Medium Quality <br></p>

<div class="smCircle categoryLQ"> 
</div><p class="legendTitle"> Low Quality <br></p>

<!-- End Evidence Quality Categories -->

<!-- Begin Support Level Categories -->
<h1> Support Level </h1>
<div class="smCircle categoryHigh">
</div><p class="legendTitle"> High Support <br></p>

<div class="smCircle categoryMed"> 
</div><p class="legendTitle"> Medium Support <br></p>

<div class="smCircle categoryLow"> 
</div><p class="legendTitle"> Low Support <br></p>

<!-- End Support Level Categories -->

CSS

.legendTitle
{
    display:inline;
}

.lgCircle
{
    display: inline-block;
    text-align: center;
    border-radius:50px;
    width:100px;
    height:100px;
    border:1px solid #C7C7C7;
    font-size: 50px;
    line-height: 1.9;
    font-weight: bold;
    color: white;
}

.smCircle
{
    display: inline-block;
    text-align: center;
    border-radius:25px;
    width:50px;
    height:50px;
    border:1px solid #C7C7C7;
    font-size: 16px;
    line-height: 3;
    font-weight: bold;
    color: white;
}

.categoryA
{
    background-color:rgb(215, 139, 0);
}

.categoryA:after
{
    content: "A";
}

.categoryB
{
    background-color:blue;
}

.categoryB:after
{
    content: "B";
}

.categoryC
{
    background-color:lightblue;
}

.categoryC:after
{
    content: "C";
}

.categoryF
{
    background-color: rgb(255, 203, 0);
}

.categoryF:after
{
    content: "F";
}

.categoryH
{
    background-color:purple;
}

.categoryH:after
{
    content: "H";
}

.categoryHigh
{
    background-color:green;
}

.categoryHigh:after
{
    content: "High";
}

.categoryMed
{
    background-color: rgb(255, 203, 0);
}

.categoryMed:after
{
    content: "Med";
}

.categoryLow
{
    background-color:rgb(215, 139, 0);
}

.categoryLow:after
{
    content: "Low";
}

.categoryHQ
{
    background-color:green;
}

.categoryHQ:after
{
    content: "HQ";
}

.categoryMQ
{
    background-color: rgb(255, 203, 0);
}

.categoryMQ:after
{
    content: "MQ";
}

.categoryLQ
{
    background-color:rgb(215, 139, 0);
}

.categoryLQ:after
{
    content: "LQ";
}