/*****************

Filename: widgets.css (Default)
Purpose: Used for reusable graphic elements across all pages.  
Notes:

Example list of widgets:

* onCourse footer logo (black/white versions)
* Tooltips
* Course, class panel
* Lightboxes
* Google Maps

- Table of Contents -
* E-mail a friend
* My Shortlist
* Google maps
* Shortlist
* Calendar/Timeline styling

****************/

/* onCourse footer logo (black/white versions) */

div#footer a#oncourse_logo { display: block; width: 102px; height: 9px; line-height: 200px; text-indent: 200px; overflow: hidden; background: url(/s/img/oncourse_badge_light.png) no-repeat; text-decoration: none; padding: 0; margin: 0; }

#tagTree img.nodeControl {display:inline; visibility: visible; margin-bottom:-4px; width:16px; height:16px;}
ul#tagTree li {background:none;}
#tagTree a.web-tagged {font-weight:bold;}
#tagTree a.web-tagged, #tagTree a.web-untagged {background-repeat:no-repeat; background-position-y:1px; padding-left:14px; margin-left:4px;}
#tagTree a.web-tagged, #tagTree a.web-untagged:hover {background-image:url(../../images/checkSmallTicked.png);}
#tagTree a.web-untagged, #tagTree a.web-tagged:hover {background-image:url(../../images/checkSmall.png);}

/* ---------------- Email a Friend --------------------- */
/*
div.email-course-title {width:45%; }
div.email-course-code {width:45%;}
*/

a.timeliner {
	padding: 4px 0 4px 28px;
	background: transparent url(/s/img/timeline.png) no-repeat 0 50%;
}

a.timeliner:hover, a.timeliner:link {
	padding: 4px 0 4px 28px;
	background: transparent url(/s/img/timeline.png) no-repeat 0 50%;
}

/* My Shortlist and enrolment */

div.highlightWrapper {background-position: left bottom; width:200px; 
background-repeat: no-repeat;}

div.highlightBalloon {padding:0px; 
background-position: left top; 
background-repeat: no-repeat;}

/* do this if using balloon arrow on the side
div.highlightBalloon div#myShortList{width:150px; }*/

/* Google Maps directions */

div.map1 {background-image: url(../../images/map1.png);
background-repeat: no-repeat;
padding-left:22px; height: 22px;
}

div.mapCollapsed{ border:none;}
div.mapExpanded{ height:400px; border:1px solid silver;}
div#location h3.blockhead {padding-left: 14px;}

  #map, #mapDelayed { height: 300px; }
  #map h4, #mapDelayed h4 {margin:0; padding:0; color: #444;}
  #map h5, #mapDelayed h5 {margin:0; padding:0; color: #444;}
 div.column {width:227px; clear:right;}
  

div.regionEdit {border:1px solid brown;}
div.regionHeader {background-color:yellow; font-weight:bold;padding:0.3em;}
div.blockSelected {border:1px solid red;}

/* Start Shortlist display */

ul.menu li.onshortlist, ul.menu li.onshortlist-x { background:transparent url(/s/img/bullet.png) no-repeat scroll 3px 0.6em;
padding:1px 0 1px 14px; }

ul.menu li.onshortlist:hover, ul.menu li.onshortlist-x:hover {
background-color:#D8D8D8;
}

ul.menu li a.cutitem {
background:transparent url(/s/img/b-cut.png) no-repeat scroll 3px 50%;
float:right;
height:16px;
width:16px;
}
ul.menu li a.cutitem:hover {
background:transparent url(/s/img/b-cut.png) no-repeat scroll -200px 50%;
}

/* End Shortlist display */

/* Calendar/Timeline styling */

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	text-align: center;
	background-color: #000;
}
#timeline-wrap-new {
	position: relative;
	bottom: 500px;
	top: -50%;
	left: 50%;
	margin: 0px 0 0 -375px;
	padding: 10px;
	width: 750px;
	height: 400px;
	font-size: 90%;
	z-index: 9900;
	background: #fff;
	border-right: 1px solid #888;
	border-bottom: 1px solid #888;
}
#timeline-wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -200px 0 0 -375px;
	padding: 10px;
	width: 750px;
	height: 400px;
	font-size: 90%;
	z-index: 9000;
	background: #fff;
	border-right: 1px solid #888;
	border-bottom: 1px solid #888;
}
#timeline {
	width: 748px;
	height: 398px;
	background: #eee;
	border: 1px solid #aaa;
}
#timeline img { display:inline;}