/* GENERAL CLASSES */
.mc-relative { position: relative; }
.mc-abs { position: absolute; }

/* FIXED WRAPPER */
.wp-graphics-fixed-wrapper { position: relative; }
.wp-graphics-fixed { position: absolute; top:0; }
.wp-graphics-fixed.fixed { position:fixed; }
.wp-graphics-fixed.bottom { position:absolute; }

/* SIDEBAR */
#left-bar-container {
    width: 400px;
    min-height: 500px;
    float: left;
}
#left-bar,
#circle-container {
    width: 400px;
}

#timeline-container {
    height: 400px;
    width: 100%;
    position: relative;
}

.vert-line {
    height: 100%;
    width: 0px;
    border-left: 1px solid #ccc;
    position: absolute;
    left: 50%;
    top: 0;
}

#events-container {
    width:400px;
    margin-top:-45px;
}

/* CIRCLE */
#events-container .event {
    width: 100%;
    font-size: 12px;
    color: #999;
    cursor: pointer;
}
#events-container .event-date {
    width: 179px;
}
#events-container .date-left {
    text-align: right;
    margin-right: 15px;
}
#events-container .circle-left {
    margin-left: 194px;
    margin-right: 7px;
}
#events-container .circle {
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background-color: #d37f36;
    border: 2px solid white;
}
/* CIRCLE HOVER */
#events-container .event.active { cursor: default; }
#events-container .event.active,
#events-container .event:hover {
    color: #333;
    font-weight: bold;
}
#events-container .event.active .circle,
#events-container .event:hover .circle {
    background-color: #333;
}

/* Content */

#main-content-column {
    width: 550px;
    float: left;
    padding: 10px;
}
#legend { width: 100%; height: 40px; }
#legend .gun-icon { margin-right: 40px; }
#legend .gun-icon .gun-label {
    position: absolute;
    top: -18px;
    left: 5px;
    width: 200px;
    color: #666;
}
#legend .gun-icon.handgun { margin-left: 10px; }
#legend .gun-icon.pistol { margin-right: 60px; }
#legend .gun-icon.rifle { margin-right: 25px; }
#legend .gun-icon.shotgun { margin-right: 0; }

.incident-item.active { background-color: #eee; }

/* Infobox */
.rollovers {
    position: relative;
    font-family: Arial;
    z-index: 2000;
}
#infoBox {position: absolute;
    padding:7px 9px;
    background: white;
    border: 1px solid #aaa;
    display: none;
    text-align: left;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 2px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
#infoBox p {
    font-size:13px;
    margin-bottom: 0;
    float: left;
}

/* main roll*/
.incident-item {
    padding: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ededed;
}

.deaths-wrapper {
    float: left;
    width: 550px;
    height: 39px;
    margin: 5px 0;
}

.victim-icon {
    width: 15px;
    height: 39px;
    background: url('../img/person.png');
    float: left;
}

.shooter-icon {
    width: 15px;
    height: 39px;
    background:url('../img/person.png') no-repeat top right;
    background-position:-15px 0;
    margin-left: 10px;
    float: left;
}

.deaths-line {
    font-size: 12px;
    color: #666;
    font-style: italic;
}

.gun-wrapper {
    width: 550px;
    height: 40px;
    margin: 5px 0;
}

.gun-icon {
    background: url('../img/guns.png') no-repeat;
    height: 40px;
    float: left;
    position: relative;
}

.handgun {
    width: 50px;
}

.pistol {
    width: 44px;
    background-position: -50px 0;
}

.shotgun {
    width: 142px;
    background-position: -96px 0;
}

.rifle {
    width: 166px;
    background-position: -239px 0;
}

/* clearfix */
.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }


/*CSS FOR MENTAL HEATLH GRAPHIC BY DARLA*/
/* infobox */
        .rollovers {
            position: relative;
            font-family: Arial;
            z-index: 2000;
        }
        #info-box {
            position: absolute;
            padding:7px 9px;
            background: white;
            border: 1px solid #aaa;
            display: none;
            text-align: left;
            box-shadow: 0 0 2px rgba(0,0,0,0.3);
            -moz-box-shadow: 0 0 2px rgba(0,0,0,0.3);
            -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.3);
            max-width:175px;
        }
        #info-box p {
            font-size:13px;
            margin-bottom: 0;
            float: left;
            
        }
        #map {
            padding:10px 0;
            width:610px;
            height:382px;
        }
        .map.inset {
            overflow: hidden;
            position: absolute;
        }
        #ak-map {
            width:125px;
            height:115px;
            bottom:10px;
            left:-10px;
        }
        #hi-map {
            width:70px;
            height:45px;
            bottom:25px;
            left:130px;
        }
        .key_right {width:50%; float:right;}
        .key_left {width:50%; float:left;}
        .key_left p {font-weight:bold; font-size:13px;}
        .name {font-size:14px; font-weight:bold;}