html, body {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    margin:0; padding:0;
}

#leftContainer {
    float: left;
    width: 700px;
}
#rightContainer {
    float: left;
    width: 220px;
    height:400px;
    margin:50px 0 0 20px;
    padding:0;
}
#rightContainer a {
	color: #000;
}
#rightContainer.balloon_missing {
	background: url(images/comment_balloon_missing.gif) no-repeat 0 20px;
}
#rightContainer p {
	margin:10px;
	margin-top:0;
	padding-top: 0px;
	height:182px;
}
#rightContainer h1 {
	font-size: 24px;
	margin:0 0 10px 0;
	padding:0;
}
#rightContainer ul {
	padding-left:15px;
}
#rightContainer .helpDrawer {
	display: block;	
	position:relative; 
	top:-30px; 
	left:50px; 
	width:170px;
	height:40px;
}
	#rightContainer .embedDrawer {
		display: block;	
		position:relative; 		
		float:right;
		margin:-5px 5px 0 0;
		width: 130px;
	}
		#rightContainer .embed {
			width: 120px;
		}
	#rightContainer .help {
		float:right;		
		display: block;	
		cursor: help;
		position:relative; 
	}
#rightContainer .cancel {
	display: none;	
	cursor: pointer;
	position:relative; 
	top:-20px; 
	left:190px;
}


.transparent {
    position:absolute;
    filter: alpha(opacity=70); /* ie */
    opacity: .7; /* mozilla */
    background:#fff;
} 
.semiTransparent {
    filter: alpha(opacity=30); /* ie */
    opacity: .3; /* mozilla */
    background:#fff;
} 
#coursesDrawers {
  width:700px;
  height:275px;
  overflow: hidden;
  border:1px solid black;
  margin: 0;
  padding: 0;
}
#coursesDrawersHeading {
    position:absolute;
    font-size: 30px;
    font-weight: bold;
    color: #000;
	padding:0;
}
#coursesDrawersHeading div {
	margin:100px 0 0 70px;
    float: left;
}
#coursesDrawersHeading div div, #coursesDrawersHeading div img {
	display: block;
    float: left;
    margin: 10px;
}

#coursesDrawers  {
  position:relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
#coursesDrawers li{
  float: left;
  display: block;
}
#coursesDrawers li a {
  display: block;
  overflow: hidden;
  height: 300px;
  width: 75px;
}
#coursesDrawers li p{
  margin: 35px 0 0 85px;
  padding: 0;
  width: 400px;
  display: block;
}

/* Selectboxes */
#coursesDrawers dl {
	margin: 10px 0 0 85px; 
	padding: 0;
	width: 350px;
}
#coursesDrawers dl dt {
	float: left;
	padding: 2px 0 2px 0;
	margin: 0 0 0 0; 
	height: 20px; 
	width: 30px;
	border-bottom: 1px solid #ccc; 
	border-left: 5px solid #fff; 
}
#coursesDrawers dl dd
{
	float: left;
	padding: 4px 0 0 0;
	margin: 0 5px 0 0; 
	height: 20px; 
	width: 300px;
	border-bottom: 1px solid #ccc; 
	overflow: hidden; 
}
#coursesDrawers dl dd.selected { /* Not used yet */
	background: #00B200; 
	color: #fff; 
} 
#coursesDrawers dl dd:hover { 
	border-right:5px solid #ccc; 
	background-color:#EEE; 
	cursor: pointer; 
}


#coursesDrawers li #a1 {
  width: 475px; /* Opening */
  background-image: url(images/tab-itilv2.png);
}
#coursesDrawers li #a2{
  background-image: url(images/tab-itilv3.png);
}
#coursesDrawers li #a3{
  background-image: url(images/tab-iso2000.png);
}
#coursesDrawers li #a4{
  background-image: url(images/tab-other.png);
}


/* Diagram */
#diagramDrawer {
  width:700px;
  height:280px;
  overflow: hidden;
/*  border:1px solid black;*/
  margin: 20px 0 0 0 ;
  padding: 0;
  overflow:hidden;
}

#diagramDrawersArrows {
    position:absolute;	
}
#diagramDrawersHeading {
    position:absolute;
    font-size: 30px;
    font-weight: bold;
    color: #000;
	padding:0;
}
#diagramDrawersHeading div {
	margin:100px 0 0 70px;
    float: left;
}
#diagramDrawersHeading div div, #diagramDrawersHeading div img {
	display: block;
    float: left;
    margin: 10px;
}
/* Various statuses */
#diagramDrawer .bckNeutral {
	background-repeat:no-repeat;
	background-image: url(images/diagram/diagram_neutral.gif);
}
#diagramDrawer .bckSelected {
	background-repeat:no-repeat;
	background-image: url(images/diagram/diagram_selected.gif);
}
#diagramDrawer .bckSelectedPossess {
	background-repeat:no-repeat;
	background-image: url(images/diagram/diagram_selected_possess.gif);
}
#diagramDrawer .bckSelectedMissing {
	background-repeat:no-repeat;
	background-image: url(images/diagram/diagram_selected_missing.gif);
}
#diagramDrawer .bckHover {
	background-repeat:no-repeat;
	background-image: url(images/diagram/diagram_hover.gif);
	cursor:pointer;
}
#diagramDrawer .bckPossess {
	background-repeat:no-repeat;
	background-image: url(images/diagram/diagram_possess.gif);
}
#diagramDrawer .bckMissing {
	background-repeat:no-repeat;
	background-image: url(images/diagram/diagram_missing.gif);
}

/* Diagram declarements */
#diagramDrawer .levelA1, #diagramDrawer .levelA2 {
	float:left;
	width: 350px;
	height: 60px;
}
#diagramDrawer .levelA1 {
	background-position: 0 0;
}
#diagramDrawer .levelA2 {
	background-position: -350px 0;
}

#diagramDrawer .levelB1, #diagramDrawer .levelB2 {
	float:left;
	width: 350px;
	height: 57px;
	background-position: 0 -62px;
}
#diagramDrawer .levelB2 {
	background-position: -350px -62px;
}

#diagramDrawer .levelC1, #diagramDrawer .levelC2, #diagramDrawer .levelC3, #diagramDrawer .levelC4, #diagramDrawer .levelC5, #diagramDrawer .levelC6 {
	float:left;
	width: 92px;
	height: 80px;
}

#diagramDrawer .levelC1 {
	width: 166px;
	background-position: 0 -120px;
}
#diagramDrawer .levelC2 {
	background-position: -166px -120px;
}
#diagramDrawer .levelC3 {
	background-position: -258px -120px;
}
#diagramDrawer .levelC4 {
	background-position: -348px -120px;
}
#diagramDrawer .levelC5 {
	background-position: -440px -120px;
}
#diagramDrawer .levelC6 {
	width: 166px;
	background-position: -532px -120px;
}
#diagramDrawer .levelD1, #diagramDrawer .levelD2 {
	float:left;
	height: 80px;
}
#diagramDrawer .levelD1 {
	width: 430px;
	background-position: 0 -200px;
}
#diagramDrawer .levelD2 {
	width: 270px;
	background-position: -430px -200px;
}
/* Classes */
.clear {
	clear:both;
}

acronym {
	border-bottom:1px dashed #666;
	cursor: help;
}