body{
	font-family: helvetica;
	margin: 0;
	padding: 0;
}
/*Career Path title*/
#path-title{
	color: rgb(0,94,172);
	width: 210px;
	text-align: center;
	font-size: 25px;
	margin-top: 48px;
	margin-left: 5px;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: underline;
	display: none;
	
}
/* Top box that contain the start point */
#top-box{
	position: absolute;
	width: 200px;
	height: 50px;
	border: solid 1px black;
	left: 220px;
	top: 23px;
	background-color: white;

}
#courses-container{
	width: 640px;
	height: 512px;
	position: absolute;
	top: 190px;
	z-index: 1;
}
#sml-quote{
	font-size: 8px;
	position: absolute;
	left: 10px;
	top: 40px;

}
#start{
	font-weight: bold;
	font-size: 20px;
	font-style: bold;	
	position: absolute;
	top: 14px;
	left: 51px;

}
/* Background of the whole path*/
#path-bg{
	width: 640px;
	height: 700px;
	border: solid 1px black;
	background-color: rgb(233, 233, 233);

}
/* Horizontal and vertical bars on the path*/
#bar1-v{
	position: absolute;
	left: 350px;
	top: 75px;
	width: 20px;
	height: 100px;
	background-color: rgb(0, 94, 172);

}

#bar1-h{
	position: absolute;
	left: 335px;
	top: 175px;
	width: 200px;
	background-color: rgb(0, 94, 172);
	height: 5px;

}
#bar3-h{
	position: absolute;
	width: 88px;
	left: 222px;
	top: 185px;
	background-color: rgb(0, 185, 223);
	height: 5px;

}
#bar4-h{
	position: absolute;
	width: 88px;
	left: 330px;
	top: 185px;
	background-color: rgb(0, 185, 223);
	height: 5px;

}
#bar5-h{
	position: absolute;
	width: 196px;
	left: 106px;
	top: 175px;
	background-color: rgb(0, 94, 172);
	height: 5px;

}
#bar5-h:hover{
	cursor: pointer;
}
#bar6-h{
	position: absolute;
	left: 54px;
	top: 369px;
	width: 100px;
	height: 5px;
	background-color: rgb(0, 94, 172);

}
#bar7-h{
	position: absolute;
	left: 46px;
	top: 449px;
	width: 130px;
	height: 5px;
	background-color: rgb(0, 94, 172);

}
#bar8-h{
	position: absolute;
	left: 56px;
	top: 560px;
	width: 100px;
	height: 5px;
	background-color: rgb(0, 94, 172);

}
#bar9-h{
	position: absolute;
	left: 370px;
	top: 281px;
	width: 89px;
	height: 5px;
	background-color: rgb(0, 185, 223);

}
#bar10-h{
	position: absolute;
	left: 480px;
	top: 372px;
	width: 100px;
	height: 5px;
	background-color: rgb(0, 94, 172);

}
#bar11-h{
	position: absolute;
	left: 46px;
	top: 222px;
	width: 130px;
	height: 5px;
	background-color: rgb(0, 94, 172);
}
#bar2-v{
	position: absolute;
	width: 5px;
	height: 453px;
	background-color: rgb(0, 94, 172);
	left: 530px;
	top: 180px;

}
#bar3-v{
	position: absolute;
	top: 75px;
	left: 330px;
	width: 20px;
	height: 110px;
	background-color: rgb(0, 185, 223);

}
#bar4-v{
	position: absolute;
	top: 75px;
	left: 318px;
	width: 5px;
	height: 570px;
	background-color: rgb(0, 94, 172);

}
#bar5-v{
	position: absolute;
	left: 290px;
	top: 75px;
	width: 20px;
	height: 110px;
	background-color: rgb(0, 185, 223);


}
#bar6-v{
	position: absolute;
	left: 270px;
	top: 75px;
	width: 20px;
	height: 100px;
	background-color: rgb(0, 94, 172);

}
#bar7-v{
	position: absolute;
	left: 415px; 
	top: 185px;
	width: 5px;
	height: 450px;
	background-color: rgb(0, 185, 223);

}
#bar8-v{
	position: absolute;
	left: 106px;
	top: 180px;
	width: 5px;
	height: 453px;
	background-color: rgb(0, 94, 172);

}
#bar9-v{
	position: absolute;
	left: 218px;
	top: 185px;
	width: 5px;
	height: 450px;
	background-color: rgb(0, 185, 223);

}
#bar10-v{
	position: absolute;
	top: 75px;
	left: 310px;
	width: 20px;
	height: 110px;
	background-color: rgb(0, 94, 172);

}
/**/
#title-circle{
	width: 100px;
	height: 20px;
	position: absolute;
	left: 238px;
	top: 221px;
	font-size: 12px;
	font-family: calibri;

}
#content-circle1{
	height: 50px;
	position: absolute;
	z-index: 2;
	left: 238px;
	top: 241px;
	font-size: 10px;
	font-family: calibri;

}
#content-circle1 li{
	list-style-type: none;
	margin-left: 10px;

}
#content-circle2{
	width: 100px;
	height: 50px;
	position: absolute;
	left: 238px;
	top: 361px;
	z-index: 2;
	font-size: 10px;
	font-family: calibri;

}
#content-circle2 li{
	list-style-type: none;
	margin-left: 10px;

}#content-circle3{
	width: 100px;
	height: 50px;
	position: absolute;
	left: 238px;
	z-index: 2;
	top: 521px;
	font-size: 10px;
	font-family: calibri;

}
#content-circle3 li{
	list-style-type: none;
	margin-left: 10px;

}
ul{
	margin: 0;
	padding: 0;

}
#title-circle2{
	width: 100px;
	height: 20px;
	position: absolute;
	left: 238px;
	top: 342px;
	font-size: 12px;
	font-family: calibri;

}
#title-circle3{
	width: 100px;
	height: 20px;
	position: absolute;
	left: 238px;
	top: 502px;
	font-size: 12px;
	font-family: calibri;

}

/* Bottom boxes those contain the career reached by the bar */
#career-box1{
	width: 100px;
	height: 50px;
	position: absolute;
	left: 50px;
	top: 632px;
	background-color: rgb(0,94,172);

}
#career-box1 span{
	color: white;
	position: absolute;
	left: 1px;
	top: 11px;
	font-size: 13px;
	text-align: center;

}
#career-box2{
	width: 100px;
	height: 50px;
	position: absolute;
	left: 160px;
	top: 632px;
	background-color: rgb(0, 185, 223);
	
}
#career-box2 span{
	color: white;
	position: absolute;
	left: 1px;
	top: 11px;
	font-size: 13px;
	text-align: center;

}
#career-box3{
	width: 100px;
	height: 50px;
	position: absolute;
	left: 270px;
	top: 632px;
	background-color: rgb(0,94,172);
	
}
#career-box3 span{
	color:white;
	position: absolute;
	left: 5px;
	width: 90px;
	top: 11px;
	font-size: 13px;
	text-align: center;

}

#career-box4{
	width: 100px;
	height: 50px;
	position: absolute;
	left: 380px;
	top: 632px;
	background-color: rgb(0, 185, 223);
	
}
#career-box4 span{
	color: white;
	position: absolute;
	left: 5px;
	width: 90px;
	top: 11px;
	font-size: 13px;
	text-align: center;

}
#career-box5{
	width: 100px;
	height: 50px;
	position: absolute;
	left: 490px;
	top: 632px;
	background-color: rgb(0,94,172);
	
}
#career-box5 span{
	color: white;
	position: absolute;
	left: 4px;
	top: 10px;
	width: 90px;
	font-size: 13px;
	text-align: center;

}
/**Bottom Box**/
#bottom-box{
	position: absolute;
	height: 86px;
	width: 640px;
	top: 616px;
	left: 0;
	border: solid 1px black;
	background-color: white;

}
/** Labels on the top Bars **/
#label1{
	position: absolute;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	left: 307px;
	top: 115px;
	color: white;
	z-index: 1;

}
#label2{
	position: absolute;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	left: 311px;
	top: 119px;
	color: white;
	z-index: 1;

}
#label3{
	position: absolute;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	left: 262px;
	top: 114px;
	color: white;
	z-index: 1;

}
#label4{
	position: absolute;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	left: 279px;
	top: 115px;
	color: white;
	z-index: 1;

}
#label5{
	position: absolute;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	left: 271px;
	top: 123px;
	color: white;
	z-index: 1;
	font-size: 12px;

}
/** Arrows **/
#arrow1 img{
	position: absolute;
	width: 41px;
	height: 15px;
	top: 276px;
	left: 476px;

}

#arrow2 img{
	position: absolute;
	width: 24px;
	height: 13px;
	top: 277px;
	left: 337px;
	
}
#dorset-logo{
	width: 83px;
	z-index: 3;
	position: absolute;
	float: right;
	left: 352px;
	top: 413px;

}

#dorset-logo-front{
	width: 138px;
	height: 138px;
	z-index: 3;
	position: absolute;
	float: right;
	left: 465px;
	top: 17px;

}

.course-circle{
	z-index: 7; 
	position: absolute;

}


/** Box that shows up when you click on a course **/

#info-box{
	display: none;
	position: absolute;
	top: 100px;
	left: 100px;  
	width: 440px;
	height: 500px;
	border-radius: 5px;
	background-color: white; 
	z-index: 7;
	border: solid 1px #C0C0C0;
}

#logo-box{
	width: 186px;
	height: 88px;
	margin-left: 20px;
	margin-top: 20px;

}
#title-box{
	width: 410px;
	margin-top: 18px;
	margin-left: 20px;

}
#closebtn{
	width: 20px;
	height: 20px;
	border: solid 0px #C0C0C0;
	float: right;
	margin-top: 5px;
	margin-right: 5px;
	cursor: pointer;

}
#description-box{
	width: 410px;
	height: 307px;
	margin-top: -7px;
	margin-left: 15px;

}
#description-box span{
	font-size: 10px;
	color: #808080;

}
#link{
	width: 315px;
	height: 20px;
	margin-left: 30px;
	margin-top: 10px;
	float: left;

}
img{
	width: 100%;
	height: 100%;

}
h2{
	margin-top: 2px;
	color: #808080;
	font-size: 20px;
	
}