html, body, div, span, applet, object, iframe,
		h1, h2, h3, h4, h5, h6, p, blockquote, pre,
		a, abbr, acronym, address, big, cite, code,
		del, dfn, em, img, ins, kbd, q, s, samp,
		small, strike, strong, sub, sup, tt, var,
		b, u, i, center,
		dl, dt, dd, ol, ul, li,
		fieldset, form, label, legend,
		table, caption, tbody, tfoot, thead, tr, th, td,
		article, aside, canvas, details, embed, 
		figure, figcaption, footer, header, hgroup, 
		menu, nav, output, ruby, section, summary,
		time, mark, audio, video
		{
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
		}
		
		
		
        html
		{
			-webkit-text-size-adjust: none; /* prevent font scaling in landscape */
		}



        body /* required */
		{
            font-family: 'Open Sans', sans-serif;
			font-weight:400;
			max-width:800px;
			margin: 0px auto;
        }
		
		

        a, /* required */
		a:link,
		a:visited
		{
            color: #4774CC;
            text-decoration: none;
        }
		
		
		
        a:hover, /* required */
		a:active
		{
			opacity: 0.7;
		}
		
		
		
        /*.footnotes p,*/
        .footer  /* required */
		{
            font-size: 14px;
            color: #808080;
			font-weight:100;
			padding-bottom:15px;
        }
		
		
		
        /* chart */
        #graphic /* required */
		{
            width: 100%;
        }
		
		
		
        #graphic:before, /* required */
        #graphic:after
		{
            content: " "; /* 1 */
            display: table; /* 2 */
        }
		
		
		
        #graphic:after /* required */
		{
			clear: both;
		}
		
		

        #graphic img /* required */
		{
            max-width: 100%;
            height: auto;
        }
		
		
		
		/* x-axis tick labels
        #graphic .axis    
		{
            font-size: 12px;
            fill: #666;
        }  */ 
		
		
		/* x-axis baseline; not to be confused with centreline. Can consider overlaying this with #centreline */
        #graphic .axis path  
		{
            fill: none;
            stroke: #666;
            shape-rendering: crispEdges;
        }
		
		
		#graphic .axis line
		{
            fill: none;
            stroke: #ccc;
            shape-rendering: crispEdges;
        }
		
		/* y-axis line path */
        #graphic .axis.y path 
		{
			display: none;
		}
		
	
		
		/* y-axis full width grid lines */
        #graphic .grid .tick /* required */
		{
            stroke: #CCC;
            stroke-width: 1px;
            shape-rendering: crispEdges;
        }
		
		
		
		/* ploted graph line */
        #graphic .line /* required */
		{
            fill: none; /* must be 'none' */
            stroke-width: 3px;
			stroke-linecap:round;
			stroke-linejoin:round;
        }
		
		
		
	
		
		
		/* y-axis units label */
        #graphic .unit/* required */
		{
            font-size:12px;
            fill:#333333;
            text-align: left;
			width:130px;
			height:20px;
			display:block;
			float:none;
        }
		
	 	 
	
		/* y- and x-axis tick text */
		.domain/* required. BOTH MUST BE NONE */
		{
			fill:none;
			stroke:none;	
		}
		
		
		.circles
		{
			float:left;	
		}
		
		
		/* footnotes to graph */
		#keypoints/* required. */
		{
			margin-bottom:10px;
			color:#666;
			font-weight:700;	
		}

		#keypoints p/* required. */
		{
			margin-bottom:0.6em;
		}