div.line {		
	/* height of the line needs to be set both in border-top
	   and in height */
	border-top : 6px solid rgb(0, 25, 168);	
	height : 6px;
	position : relative;
	width : 80%;
	margin-top: 140px;
	margin-left: auto;
	margin-right : auto;
	z-index : 4;
}

div.line.events {
	margin-top : 50px;
}

div.line.goals {
	border-color : #007C00;
}

div.line.interactions {
	border-color : #7A7A7A;
}

div.line-text {
	width : 100px;
	text-align: right;
	position : absolute;
	left : -110px;
	top : -0.8em;
}

div.line.interactions {
	margin-bottom: 100px;
}

div.point {
	/* change this to change the point's inner colour */
	background-color : white;
	
	/* change these to change the point's size 
	 	The border radius values need to be half
	 	of the height and width. 
	 	The margin values need to be half the height and width
	 	minus half the height of the line */	
	height : 20px;
	width : 20px;
	margin-top : -12px;
	margin-left : -12px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	border : 4px solid gray;

	/* change this to change font size */
	font-size : 80%;

	/* LEAVE THESE ALONE :-) */
	top : 0px;
	position : absolute;
	box-sizing : border-box;
	-moz-box-sizing : border-box;	
	-webkit-box-sizing : border-box;		
	display : block;
}

div.point.selectable {
	border-color : black;
}

div.point.selectable:hover {
	background : rgb(0, 25, 168);
	cursor : hand;
	cursor : pointer;
}

div.touchpoint-details {
	display : none;
	position : absolute;
	border : 2px solid black;
	background-color : white;
	padding : 5px;
	box-sizing : border-box;
	-moz-box-sizing : border-box;	
	-webkit-box-sizing : border-box;
	min-width : 300px;
}

div.touchpoint-details div.title {
	background-color : black;
	color : white;
	padding : 3px;
	margin-bottom: 0.5em;
	text-align : center;
}
	
div.diagonal-line {
	/* change these to change appearance of the
	   line. Both height and border-top need to change
	   to alter the width of the line */
	height : 4px;
	border-top : 4px solid black;

	/* LEAVE THESE ALONE :-) */
	padding : 0px;
	margin : 0px;
	box-sizing : border-box;
	-moz-box-sizing : border-box;
        -webkit-box-sizing : border-box;
	line-height : 1px;
	position : absolute;
}
