<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="RenderTimeline.aspx.vb" Inherits="FinIQWebApp.RenderTimeline" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <style type="text/css">
        timelineContainer {
            /*width: 300%;*/
        }

        /* ---- Timeline ---- */
        .timelineContainer ol {
            position: relative;
            display: block;
            margin: 150px;
            /*height: 2px;
        background: #31708F;*/
        }
        /* ol::before,
ol::after {
	content: "";
	position:relative;
	top: -8px;
	display: block;
	width: 0;
	height: 0;*/
        /*border-radius: 10px;
	border: 10px solid #31708F;*/
        /*}*/
        /*ol::before {
	left: -5px;
}
ol::after {
	right: -10px;
	border: 10px solid transparent;
	border-right: 0;
	border-left: 20px solid #31708F;
  border-radius: 3px;
}*/

        /* ---- Timeline elements ---- */
        .timelineContainer li {
            position: relative;
            display: inline-block;
            float: left;
            width: 150px;
            font: bold 14px arial;
            height: 50px;
            white-space: nowrap;
        }



            .timelineContainer li .diplome {
                position: absolute;
                top: -17px;
                left: 185%;
                color: #000000;
            }

            .timelineContainer li .point {
                content: "";
                top: -30px;
                left: 43%;
                display: block;
                width: 20px;
                height: 20px;
                /*border: 4px solid #f4f4f4;*/
                border-radius: 100px;
                background: #b1acac;
                position: absolute;
            }

            .timelineContainer li .description {
                /*display: none;*/
                /*background-color: #f4f4f4;*/
                padding: 2px;
                margin-top: 70px;
                position: absolute;
                left: 100px;
                top: -87px;
                font-weight: normal;
                z-index: 1;
                white-space: nowrap;
            }



        .timelineContainer .description::before {
            content: '';
            display: block;
            left: 43%;
        }

        .timelineContainer li::after {
            content: "";
            position: absolute;
            width: 46px;
            height: 2px;
            background: #b3abab;
            top: -48px;
            left: 52px;
            /*z-index:-1;*/
            transform: rotate(90deg);
        }


        .timelineContainer li:first-child::after {
            content: none;
        }

        /* ---- Hover effects ---- */
        .timelineContainer li:hover {
            cursor: pointer;
            color: #48A4D2;
        }

        li:hover .description {
            display: block;
        }
</style>
</head>

<body>
    <form id="form1" runat="server">
     <div id="dynaDate" class="timelineContainer" runat="server">

        </div>
    </form>
</body>
</html>
