AlertCard

an ebmx alert card

by SnakeFox

HTML

<div id="alertsDetailBox">
    <div class="alertsDetailBoxRow">
        <div class="adbDate">22/12/2012</div>
        <div class="adbPatientInfo">
            <span class="title">Patient ID:</span> 71829<br>
            <span class="title">Alert Name:</span> Ami Discharge Beta Blocker
        </div>
        <div class="adbPatientInfob">
            <span class="title">Patient Name:</span> Jeff Walkman<br>
            <span class="title">Category:</span> uncategorized
        </div>
        <div class="adbButton">
        <img src="http://ebmxalert.local.com:8888/images/blue_arrow.jpg"/>
        </div>
    </div>
    <div class="alertsDetailBoxRow">
        <div class="adbPatientInfoC">
            <span class="title">Attending:</span>Dr Alice Waters<br>
            <span class="title">Unit:</span> U2<br>
            <span class="title">C/I:</span> CI<br>
            <span class="title">ord:</span> No<br>
            <span class="title">Working Diagnosis:</span> 428.0<br>
            <span class="title">DC Diagnosis:</span> 156.1 (cancer)/428.3



        </div>
        <div class="adbPatientInfoD">
        <span class="title" style="float:left;">Notes</span><br>
            <div class="note">
                <span class="title">Alice Wilson</span> | <span class="notedate">22/12/2010 8:30 am</span>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                </p>    
            </div><br>
              <div class="note">
                <span class="title">Josh Douglas</span> | <span class="notedate">22/12/2010 3:23 pm</span>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                </p>   
            </div>  
        </div>
    </div>
    <div class="alertsDetailBoxRow">
    <div class="adbCloseButton">
        <center> <img...

CSS

#alertsDetailBox {
    border-color: #FFFFFF;
    border-style: solid;
    border-width: 2px;
    background-color: #E8E8E8;
    width: 650px;
    height: 250px;
    font-family: Verdana;
}

#alertsDetailBox .alertsDetailBoxRow{
    border-bottom-color: #FFFFFF;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    width:100%;
    float:left;
}

#alertsDetailBox .alertsDetailBoxRow .title{
    font-weight: bold;
    font-size: 12px;
    color: #FF9000;    
}

#alertsDetailBox .adbPatientInfo{
    width: 225px;
    padding:5px;
    border-right-color: #FFFFFF;
    border-right-style: solid;
    border-right-width: 1px;
    float:left;
    font-size: 10px;
    overflow: hidden;
}
#alertsDetailBox .adbPatientInfoC{
    width: 225px;
    padding:5px;
    border-right-color: #FFFFFF;
    border-right-style: solid;
    border-right-width: 1px;
    float:left;
    font-size: 10px;
    overflow: hidden;
}
#alertsDetailBox .adbPatientInfoD{
    padding:5px;
    float:left;
    font-size: 10px;
}
#alertsDetailBox .adbPatientInfoD p{
    width:375px;
}
#alertsDetailBox .adbPatientInfoD .note{
    padding:3px;
    float:left;
    font-size: 10px;
    background-color: #FFFFFF;
    margin-bottom: 3px;
}
#alertsDetailBox .adbPatientInfoD .notedate{
font-weight:bold;
}
#alertsDetailBox .adbPatientInfoD .note .title{
    font-weight: bold;
    color:#366599;
}

#alertsDetailBox .adbPatientInfob{
    width: 225px;
    padding:5px;
    border-right-color: #FFFFFF;
    border-right-style: solid;
    border-right-width: 1px;
    float:left;
    font-size: 10px;
    overflow: hidden;
}
#alertsDetailBox .adbButton{
    height:27px;
    float:left;
   padding-left: 20px;
    padding-top: 10px;
}
#alertsDetailBox .adbCloseButton{
    width: 100%;
    align: center;
    padding: 10px;
}
#alertsDetailBox .adbDate{
    width: 90px;
    height:27px;
    padding:5px;
    padding-top: 10px;
    vertical-align:middle;
    border-right-color: #FFFFFF;
    border-right-style: solid;
...