/*----------------------------
 * ANNUAL ADMIN CYCLE
 *----------------------------

/*Timeline table properties*/
#cycle {
	border-collapse:collapse;
	width:594px;
	}
#cycle th {
	border:none;
	background:transparent;
	width:220px;
	font-size:120%;
	padding:4px 0;
	border:none;
	}
/*.ccol is class for central column*/
#cycle th.ccol {
	width:150px;
	}
#cycle td.ccol {
	padding:0;
	}
#cycle td {
	font-size:12px;
	border:none;
	padding:0;
	}

#cycle a {
	display:block;
	min-height:20px;
	}

/*-----------------------------------------------------------------------------------------------------------
Box a-c used to make extendable red background box for central column and set fonts etc.
boxa for vertically repeated background - This allows the box to be as long as necessary to accomodate text
boxb for top of background, not repeated
boxc for bottom of background, not repeated
The hover properties are used to make the on hover glow effect by switching out background images
-----------------------------------------------------------------------------------------------------------*/
div.boxa {
	background: url(manager_area/images/box_02.gif) repeat-y left top #a50829;
	width:150px;
	}
div.boxa:hover {
	background: url(manager_area/images/box_hover_02.gif) repeat-y left top #a50829;
	}
div.boxb {
	background: url(manager_area/images/box_01.gif) no-repeat left top transparent;
	}
div.boxb:hover {
	background: url(manager_area/images/box_hover_01.gif) no-repeat left top transparent;
	}
div.boxc {
	min-height:80px;
	text-align:center;
	color:#FFF;
	padding:0 10px 0 10px;
	background: url(manager_area/images/box_03.gif) no-repeat left bottom transparent;
	}
div.boxc:hover {
	background: url(manager_area/images/box_hover_03.gif) no-repeat left bottom transparent;
	}
#cycle td.ccol a:link, #cycle td.ccol a:visited, #cycle td.ccol a:hover, #cycle td.ccol a:active {
	color:#fff;
	text-decoration:none;
	}
/*Month headers are level 3*/
div.boxc h3 {
	color:#FFF;
	font-size:12pt;
	line-height:normal;
	padding-bottom:7px;
	padding-top:10px;
	}
div.boxc ul {
	padding:0 0 10px 0 !important;
	margin:0;
	list-style-type:none;
	}
div.boxc li {
	padding:3px;
	}
/*
Just in case
div.boxc li.acti {
	background:url(manager_area/images/activity.png) no-repeat;
	}
*/

/*Red downwards arrow between boxes*/
td.arrowd {
	background: url(manager_area/images/arrowd.gif) no-repeat center;
	height:42px;
	}

/*------------------------------------------------------------------
Arrows and symbols representing direction and type of communication
First letter indicates arrow pointing r - right or l - left
Following letters indicate type of communication:
e - email
l - letter
d - acted via database
f - acted via fundholder
------------------------------------------------------------------*/
#cycle .r {
	padding-right:0px;
	padding-left:73px;
	text-align:left;
	height:20px;
	background:left no-repeat;
	}
#cycle .l {
	padding-right:73px;
	padding-left:0px;
	text-align:right;
	height:20px;
	background:right no-repeat;
	}
#cycle .re {
	background-image: url(manager_area/images/re.gif);
	}
#cycle .rl {
	background-image: url(manager_area/images/rl.gif);
	}
#cycle .red {
	background-image: url(manager_area/images/red.gif);
	}
#cycle .rld {
	background-image: url(manager_area/images/rld.gif);
	}
#cycle .rldf {
	background-image: url(manager_area/images/rldf.gif);
	}
#cycle .le {
	background-image: url(manager_area/images/le.gif);
	}
#cycle .ll {
	background-image: url(manager_area/images/ll.gif);
	}
#cycle .led {
	background-image: url(manager_area/images/led.gif);
	}
#cycle .lld {
	background-image: url(manager_area/images/lld.gif);
	}

/*Backgrounds to swap out on hover for glow effect*/
#cycle .re:hover {
	background-image: url(manager_area/images/re_h.gif);
	}
#cycle .rl:hover {
	background-image: url(manager_area/images/rl_h.gif);
	}
#cycle .red:hover {
	background-image: url(manager_area/images/red_h.gif);
	}
#cycle .rld:hover {
	background-image: url(manager_area/images/rld_h.gif);
	}
#cycle .rldf:hover {
	background-image: url(manager_area/images/rldf_h.gif);
	}
#cycle .le:hover {
	background-image: url(manager_area/images/le_h.gif);
	}
#cycle .ll:hover {
	background-image: url(manager_area/images/ll_h.gif);
	}
#cycle .led:hover {
	background-image: url(manager_area/images/led_h.gif);
	}
#cycle .lld:hover {
	background-image: url(manager_area/images/lld_h.gif);
	}

/*-----------------------------------------------------------------------
All Key properties
Key a-c used to create grey background box and set fonts etc.
keya for vertically repeated background
keyb for top of background, not repeated
keyc for bottom of background, not repeated
-----------------------------------------------------------------------*/
#keya {
	width:200px;
	position:fixed;
	bottom:0;
	background: url(manager_area/images/Key_02.gif) repeat-y left top #404040;
	margin-top:2em;
	}
#keyb {
	background: url(manager_area/images/Key_01.gif) no-repeat left top;
	}
#keyc {
	min-height:100px;
	background: url(manager_area/images/Key_03.gif) no-repeat left bottom;
	color:#FFF;
	padding:10px 0 15px 0;
	}
#keyc h3 {
	color:#FFF;
	font-size:12pt;
	padding:5px 10px 5px 15px;
	}
#keyc ul {
	padding:0 7px 0 7px;
	margin:0;
	list-style-type: none;
	}
#keyc ul li {
	background-repeat: no-repeat;
	background-position: 0 0.2em;
	padding: 5px 0 5px 22px;
	}
li#email {
	background: url(manager_area/images/email.png) transparent;
	}
li#letter {
	background: url(manager_area/images/letter.png) transparent;
	}
li#database {
	background: url(manager_area/images/database.png) transparent;
	}
#keyc ul li#acti {
	background: url(manager_area/images/activity.png) no-repeat transparent 0.3em 0.5em;
	}
#keyc ul li#fund {
	background: url(manager_area/images/fund.png) no-repeat transparent 0 0.2em;
	padding-left:32px;
	}
#keyc p {
	padding: 5px 5px 0 22px;
	margin:0;
	font-size:14px;
	font-weight:bold;
	display:none;
	}
div#keyc[id=keyc] p {
	display:block;
	}
#keyc a {
	color:#FFF;
	}
#hide {
	position:fixed;
	bottom:0;
	margin-top:2em;
	display:none;
	}

/* Key hider
For the show/hide key hover button*/
div#keya[id=keya] {
	display:none;
	}
p#hide[id=hide] {
	display:block !important;
	}
p#hide:hover + div#keya, div#keya:hover {
	display:block;
	}