/* This style sheet is for displaying the tenancy lifecycle on its own page. The differences to the original style shett are that the first 4 boxes are displayed in a more centred column, and the main div container is positioned so that the life cycle allows for the left-hand navigation menu. An extra custom return arrow has been added to link the (now centred) boxes in the 1st column back to where they used to be. Defines the positioning and appearance of the boxes and diamonds */ /* Master container element */ /* the container expands to fill the whole space behind the flowchart */ div.tenancyLifeCycle {position: relative; width:auto; height:1800px} /* Flowchart container (allows all flowchart elements to be moved together) */ /*allows flowcahrt to be nudged left or right if positions below are not quite accurate */ div#flowchart {position: absolute; top:10px; left:-15px} /***************************** PROCESS BOXES *******************************/ /* Container for process box */ div.tenancyLifeCycle div.tlcBox {padding:5px; background-image:url(../../graphics/tenancy_lifecycle/process_box.gif); background-repeat:no-repeat; width:210px; height:80px; overflow:hidden} /* positioning for process boxes */ /* 1. boxes in first vertical column */ /* the boxes and diamonds have the highest z indexes so they float above arrows and links work */ div.tenancyLifeCycle div.tlcBox#b0 {position: absolute; left:296px; top:0px; z-index:399} div.tenancyLifeCycle div.tlcBox#b1 {position: absolute; left:296px; top:122px; z-index:400} div.tenancyLifeCycle div.tlcBox#b2 {position: absolute; left:296px; top:248px; z-index:401} div.tenancyLifeCycle div.tlcBox#b3 {position: absolute; left:296px; top:362px; z-index:402} div.tenancyLifeCycle div.tlcBox#b4 {position: absolute; left:296px; top:477px; z-index:403} div.tenancyLifeCycle div.tlcBox#b5 {position: absolute; left:50px; top:771px; z-index:404} div.tenancyLifeCycle div.tlcBox#b6 {position: absolute; left:50px; top:885px; z-index:405} div.tenancyLifeCycle div.tlcBox#b7 {position: absolute; left:50px; top:999px; z-index:406} div.tenancyLifeCycle div.tlcBox#b8 {position: absolute; left:50px; top:1677px; z-index:407} /* 2. boxes in second vertical column */ div.tenancyLifeCycle div.tlcBox#b9 {position: absolute; left:296px; top:885px; z-index:408} div.tenancyLifeCycle div.tlcBox#b10 {position: absolute; left:296px; top:1157px; z-index:409} div.tenancyLifeCycle div.tlcBox#b11 {position: absolute; left:296px; top:1524px; z-index:410} /* 3. boxes in third vertical column */ div.tenancyLifeCycle div.tlcBox#b12 {position: absolute; left:539px; top:629px; z-index:411} div.tenancyLifeCycle div.tlcBox#b13 {position: absolute; left:539px; top:1306px; z-index:412} div.tenancyLifeCycle div.tlcBox#b14 {position: absolute; left:539px; top:1522px; z-index:413} div.tenancyLifeCycle div.tlcBox#b15 {position: absolute; left:539px; top:1638px; z-index:414} /************************************ DECISION DIAMONDS ********************************/ /* Container for decision box */ div.tenancyLifeCycle div.tlcDiamond {padding:5px; background-repeat:no-repeat; width:210px; height:150px; overflow:hidden} /* positioning of decision boxes */ /* 1. diamonds in first column */ div.tenancyLifeCycle div.tlcDiamond#d1 {position: absolute; left:50px; top:587px; background-image:url(../../graphics/tenancy_lifecycle/decision_box_wNO_sYES.gif); z-index:450} div.tenancyLifeCycle div.tlcDiamond#d2 {position: absolute; left:50px; top:1121px; background-image:url(../../graphics/tenancy_lifecycle/decision_box_sNO_eYES.gif); z-index:451} div.tenancyLifeCycle div.tlcDiamond#d3 {position: absolute; left:50px; top:1301px; background-image:url(../../graphics/tenancy_lifecycle/decision_box_sNO_eYES.gif); z-index:452} div.tenancyLifeCycle div.tlcDiamond#d4 {position: absolute; left:50px; top:1503px; background-image:url(../../graphics/tenancy_lifecycle/decision_box_sNO_eYES.gif); z-index:453} /* 2. Diamonds in second column */ div.tenancyLifeCycle div.tlcDiamond#d5 {position: absolute; left:296px; top:1299px; background-image:url(../../graphics/tenancy_lifecycle/decision_box_sNO_eYES.gif); z-index:454} /* 3. Diamonds in third column */ div.tenancyLifeCycle div.tlcDiamond#d6 {position: absolute; left:539px; top:750px; background-image:url(../../graphics/tenancy_lifecycle/decision_box_wNO_nYES.gif); z-index:455} div.tenancyLifeCycle div.tlcDiamond#d7 {position: absolute; left:539px; top:1123px; background-image:url(../../graphics/tenancy_lifecycle/decision_box_sNO_nYES.gif); z-index:456} /************************************* ARROWS ********************************/ /* Arrows */ /* standard vertical arrows */ div.tenancyLifeCycle div.tlcVArrow {} /* positioning of arrows */ /* arrows have higher z-indexes and so the sit over the top of the boxes */ /* 1. arrows in first vertical column */ div.tenancyLifeCycle div.tlcVArrow#av0 {position: absolute; left:396px; top:79px; z-index:100} div.tenancyLifeCycle div.tlcVArrow#av1 {position: absolute; left:396px; top:202px; z-index:101} div.tenancyLifeCycle div.tlcVArrow#av2 {position: absolute; left:396px; top:329px; z-index:102} div.tenancyLifeCycle div.tlcVArrow#av3 {position: absolute; left:396px; top:443px; z-index:103} div.tenancyLifeCycle div.tlcVArrow#av4 {position: absolute; left:149px; top:558px; z-index:104} div.tenancyLifeCycle div.tlcVArrow#av5 {position: absolute; left:150px; top:738px; z-index:105} div.tenancyLifeCycle div.tlcVArrow#av6 {position: absolute; left:150px; top:852px; z-index:106} div.tenancyLifeCycle div.tlcVArrow#av7 {position: absolute; left:150px; top:966px; z-index:107} div.tenancyLifeCycle div.tlcVArrow#av8 {position: absolute; left:150px; top:1079px; z-index:108} div.tenancyLifeCycle div.tlcVArrow#av9 {position: absolute; left:150px; top:1271px; z-index:109} div.tenancyLifeCycle div.tlcVArrow#av10 {position: absolute; left:150px; top:1452px; z-index:110} div.tenancyLifeCycle div.tlcVArrow#av11 {position: absolute; left:150px; top:1643px; z-index:111} /* 3. arrows in third vertical column */ div.tenancyLifeCycle div.tlcVArrow#av12 {position: absolute; left:638px; top:709px; z-index:112} div.tenancyLifeCycle div.tlcVArrow#av13 {position: absolute; left:638px; top:1273px; z-index:112} div.tenancyLifeCycle div.tlcVArrow#av14 {position: absolute; left:638px; top:1604px; z-index:112} /* horizontal arrows */ div.tenancyLifeCycle div.tlcHArrow {} div.tenancyLifeCycle div.tlcHArrow#ah1 {position: absolute; left:252px; top:1190px; z-index:151} div.tenancyLifeCycle div.tlcHArrow#ah2 {position: absolute; left:252px; top:1367px; z-index:152} div.tenancyLifeCycle div.tlcHArrow#ah3 {position: absolute; left:252px; top:1561px; z-index:153} div.tenancyLifeCycle div.tlcHArrow#ah4 {position: absolute; left:506px; top:1190px; z-index:154} div.tenancyLifeCycle div.tlcHArrow#ah5 {position: absolute; left:506px; top:1560px; z-index:155} /* custom-shaped return arrows */ div.tenancyLifeCycle div.tlcReturnArrow {} div.tenancyLifeCycle div.tlcReturnArrow#ar1 {position:absolute; left:15px; top:223px; z-index:201} div.tenancyLifeCycle div.tlcReturnArrow#ar2 {position:absolute; left:167px; top:1450px; z-index:202} div.tenancyLifeCycle div.tlcReturnArrow#ar3 {position:absolute; left:498px; top:901px; z-index:203} div.tenancyLifeCycle div.tlcReturnArrow#ar4 {position:absolute; left:394px; top:819px; z-index:204} div.tenancyLifeCycle div.tlcReturnArrow#ar5 {position:absolute; left:162px; top:965px; z-index:205} /*another return arrow for lone flowchart linked first 4 centred boxes into chart */ div.tenancyLifeCycle div.tlcReturnArrow#ar6 {position:absolute; left:149px; top:510px; z-index:206} /******************************* LINKS **************************/ /* links in boxes (set to block to create square link area around text inside, so not just text is link, but whole process box becomes one) links are black on hover, not red like rest of site */ div.tenancyLifeCycle div.tlcBox a {color:#000000; display:block; width:100%; text-decoration:underline; margin:0px} div.tenancyLifeCycle div.tlcBox p {line-height:12px; margin:0px 7px 0px 0px; display:block} div.tenancyLifeCycle div.tlcBox a.inline {display:inline} div.tenancyLifeCycle div.tlcDiamond a {color:#000000; display:block; width:100%; text-decoration:none} /****************************** TEXT ****************************/ /* positioning of flowchart title */ div.tenancyLifeCycle div#flowchart div#flowchartTitle {position: absolute; top:-39px; left:300px; width:210px} /* text in boxes (has to be fairly small to fit, and have low margins) */ div.tenancyLifeCycle h1 {font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; margin-top:2px; margin-bottom:2px; padding:0px} div.tenancyLifeCycle p {margin: 2px} /* the h1's in the decision diamonds have margin top individually set to get them into the middle of the diamond */ div.tenancyLifeCycle div.tlcDiamond h1#d1t {margin-left:40px; margin-top:50px} div.tenancyLifeCycle div.tlcDiamond h1#d2t {margin-left:60px; margin-top:50px} div.tenancyLifeCycle div.tlcDiamond h1#d3t {margin-left:37px; margin-top:45px} div.tenancyLifeCycle div.tlcDiamond h1#d4t {margin-left:37px; margin-top:55px} div.tenancyLifeCycle div.tlcDiamond h1#d5t {margin-left:40px; margin-top:48px} div.tenancyLifeCycle div.tlcDiamond h1#d6t {margin-left:60px; margin-top:50px} div.tenancyLifeCycle div.tlcDiamond h1#d7t {margin-left:60px; margin-top:50px} /********************** NOTE ICONS AND POP_UP DIV BOXES (not in flowchart container) ************************************/ div.tenancyLifeCycle div.note {width: 34px; height:37px;} div.tenancyLifeCycle div.note#n1 {position: absolute; top:175px; left:510px; z-index:601} div.tenancyLifeCycle div.note#n2 {position: absolute; top:300px; left:510px; z-index:602} div.tenancyLifeCycle div.note#n3 {position: absolute; top:420px; left:510px; z-index:603} div.tenancyLifeCycle div.note#n4 {position: absolute; top:530px; left:510px; z-index:604} div.tenancyLifeCycle div.note#n5 {position: absolute; top:825px; left:263px; z-index:605} div.tenancyLifeCycle div.note#n6 {position: absolute; top:1050px; left:263px; z-index:606} div.tenancyLifeCycle div.note#n7 {position: absolute; top:1354px; left:325px; z-index:607} div.tenancyLifeCycle div.note#n8 {position: absolute; top:189px; left:778px; z-index:608} div.tenancyLifeCycle div.note#n9 {position: absolute; top:325px; left:767px; z-index:608} div.tenancyLifeCycle div.note#n10 {position: absolute; top:529px; left:720px; z-index:608} div.tenancyLifeCycle div.notePopup {background-color: #EEEEEE; border:2px solid #000000; padding:3px; overflow:hidden} div.tenancyLifeCycle div.notePopup#np1 {position: absolute; top:175px; left:532px; z-index:651; width: 250px; visibility: hidden} div.tenancyLifeCycle div.notePopup#np2 {position: absolute; top:300px; left:532px; z-index:652; width: 250px; visibility: hidden} div.tenancyLifeCycle div.notePopup#np3 {position: absolute; top:420px; left:532px; z-index:653; width: 250px; visibility: hidden} div.tenancyLifeCycle div.notePopup#np4 {position: absolute; top:530px; left:532px; z-index:654; width: 280px; visibility: hidden} div.tenancyLifeCycle div.notePopup#np5 {position: absolute; top:825px; left:285px; z-index:655; width: 250px; visibility: hidden} div.tenancyLifeCycle div.notePopup#np6 {position: absolute; top:1050px; left:285px; z-index:656; width: 250px; visibility: hidden}