/********************************************  CSS RESET  *********************************************/

.graphContainer html, .graphContainer body, .graphContainer div, .graphContainer span, .graphContainer applet, .graphContainer object, .graphContainer iframe, .graphContainer h1, .graphContainer h2, .graphContainer h3, .graphContainer h4, .graphContainer h5, .graphContainer h6, .graphContainer p, .graphContainer blockquote, .graphContainer pre, .graphContainer a, .graphContainer abbr, .graphContainer acronym, .graphContainer address, .graphContainer big, .graphContainer 
cite, .graphContainer code, .graphContainer del, .graphContainer dfn, .graphContainer em, .graphContainer font, .graphContainer img, .graphContainer ins, .graphContainer kbd, .graphContainer q, .graphContainer s, .graphContainer samp, .graphContainer small, .graphContainer strike, .graphContainer strong, .graphContainer sub, .graphContainer sup, .graphContainer tt, .graphContainer var, .graphContainer b, .graphContainer u, .graphContainer i, .graphContainer center, .graphContainer dl, .graphContainer dt, .graphContainer dd, .graphContainer 
ol, .graphContainer ul, .graphContainer li, .graphContainer fieldset, .graphContainer form, .graphContainer label, .graphContainer legend, .graphContainer table, .graphContainer caption, .graphContainer tbody, .graphContainer tfoot, .graphContainer thead, .graphContainer tr, .graphContainer th, .graphContainer td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
.graphContainer ol, .graphContainer ul {
	list-style: none;
	line-height: 1;
}
.graphContainer blockquote, .graphContainer q {
	quotes: none;
}
.graphContainer :focus {
	outline: 0;
}
.graphContainer ins {
	text-decoration: none;
}
.graphContainer del {
	text-decoration: line-through;
}
.graphContainer table {
	border-collapse: collapse;
	border-spacing: 0;
}
.graphContainer .clearFloat {
	clear: both;
}


/**********************************************  FONTS  ***********************************************/

h1 {

}
h2 {

}
p {

}
a {

}

/***********************************************  GRAPH  **********************************************/

.graphContainer {
	width: 410px;
	height: 180px;
	position: relative;
	padding: 20px 0px 0px 40px;
	margin: 10px 0px 10px 0px;
}
#graphContainerHeight,
#graphContainerPeriod,
#graphContainerDirection {
	background-image: url('../images/graph-bg.gif');
	background-repeat: no-repeat;
	margin: 0px 0px 0px 0px;
	width: 366px;
	height: 149px;
	position: relative;
}
#hLineGroup {
	height: 149px;
	position: absolute;
	top: -4px;
}
.hLine {
	height: 1px;
	width: 366px;
	position: absolute;
	background-color: #b9b9b9;
	overflow: hidden;
}


/***********************************************  TEXT  ***********************************************/

#key {
	font-size: 12px;
	position: absolute;
	top: 0px;
	left: 30px;
}
#key div {
	float: left;
	margin: 0px 0px 0px 30px;
	padding: 0px 0px 0px 15px;
	background-repeat: no-repeat;
	background-position: left center;
}
#key .red {
	background-image: url('../images/point-red.gif');
}
#key .blue {
	background-image: url('../images/point-blue.gif');
}
#yLabel {
	position: absolute;
	left: 3px;
	top: 30px;
	width: 12px;
	height: 114px;
	background-position: center center;
	background-repeat: no-repeat;
}
.labelHeight {
	background-image: url('../images/wave-height.gif');
}
.labelPeriod {
	background-image: url('../images/wave-period.gif');
}
.labelDirections {
	background-image: url('../images/wave-directions.gif');
}


/***********************************************  POINTS  *********************************************/

.pointRed, .pointBlue {
	height: 5px;
	width: 5px;
	position: absolute;
	overflow: hidden;
}
.pointRed {
	background-image: url('../images/point-red.gif');
}
.pointBlue {
	background-image: url('../images/point-blue.gif');
}
#pointGroup {
	position: absolute;
	top: -2px;
	left: -2px;
	width: 366px;
	height: 149px;
}


/**********************************************  NUMBERS  *********************************************/

#hNumGroup {
	position: absolute;
	top: 20px;
	left: 20px;
	height: 149px;
}
.hNum, .vNum {
	position: absolute;
	font-size: 10px;
}
.vNum {
	text-align: center;
	width: 60px;
	bottom: 16px;
}
#vnum1 { left: 10px; }
#vnum2 { left: 83px; }
#vnum3 { left: 156px; }
#vnum4 { left: 229px; }
#vnum5 { left: 302px; }
#vnum6 { left: 375px; }


/********************************************  Z - INDEX  **********************************************/

.hLine {
	z-index: 2;
}
.hNum {
	z-index: 2;
}
.pointRed {
	z-index: 3;
}
.pointBlue {
	z-index: 4;
}