body { background-color : #EEEEEE; font-size: 100%; } /* STUFF RELATING TO FONT SIZES AND COLOURS */ h1, h1 a { color: #111111; font-size: 24px; font-weight: normal; font-family: Calibri, Verdana, Arial, sans-serif; margin: 10px 10px 10px 10px; padding: 0; text-decoration: none; } h2, h2 a { color: #333333; font-size: 18px; font-weight: normal; font-family: Calibri, Verdana, Arial, sans-serif; margin: 0 0 0 0; padding: 0; text-decoration: none; } h3, h3 a { color: #333333; font-size: 14px; font-family: Calibri, Verdana, Arial, sans-serif; margin: 0 0 0 0; padding: 0; font-weight: normal; text-decoration: none; } h4, h4 a { color: #00788A; font-size: 18px; font-weight: normal; font-family: Calibri, Verdana, Arial, sans-serif; margin: 0 0 0 0 ; padding: 0; text-decoration: none; } h5, h5 a { color: #00788A; font-size: 20px; font-weight: bold; font-family: Calibri, Verdana, Arial, sans-serif; margin: 0 0 0 0; padding: 0; text-decoration: none; } h6, h6 a { color: #FFFFFF; font-size: 18px; font-weight: normal; font-family: Calibri, Verdana, Arial, sans-serif; margin: 0 0 0 0; padding: 0; text-decoration: none; } /* HEADERS, FOOTERS AND BASIC TABLE OPTIONS */ #myheader { background-image:url(imgs/header.jpg); background-repeat:no-repeat; width:1000px; height:144px; position:relative; left:0px; top:0px; } #mybuttons { width:240px; height:30px; position:relative; left:700px; top:80px; } #myviewcartbutton { border:0px; width:117px; height:30px; position:absolute; left:708px; top:100px; z-index:9;} #mycheckoutbutton { border:0px; width:117px; height:30px; position:absolute; left:119px; top:0px; z-index:10;} #myfooter { background-image:url(imgs/footer.gif); background-repeat:no-repeat; width:1000px; height:80px; position:relative; left:0px; top:0px; } #rightmargin { background-image:url(imgs/graduated_margin.png); background-repeat:no-repeat; width:200px; height:300px; position:relative; left:740px; top:0px; } #mainbitwrapper { background-color:#FFFFFF; } .clearthis { position:relative; left:0px; top:0px; } /* THE DYNAMIC DROP DOWN BUTTONS ALONG THE TOP */ #sddm { margin: 0; padding: 0; z-index: 30; } #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: bold 12px arial; } #sddm li a { display: block; margin: 0 1px 0 0; padding: 4px 0px; height: 20px; width: 141px; background-color: #006D75; color: #FFFFFF; text-align: center; text-decoration: none; } #sddm li a:hover { background-color: #00788A; } #sddm div { position: absolute; visibility:hidden; margin: 0; padding: 0; background-color: #EEEEEE; border: 1px solid #222222; z-index:20; } #sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background-color: #EEEEEE; color: #222222; font: 12px arial; z-index:20; } #sddm div a:hover { background-color: #888888; color: #FFFFFF; z-index:20; } #bullet li { color: #333333; font-size: 14px; font-family: Calibri, Verdana, Arial, sans-serif; margin: 0px 10px 8px 10px; padding: 0; font-weight: normal; text-decoration: none; } .irr li { color: #333333; font-size: 14px; font-family: Calibri, Verdana, Arial, sans-serif; margin: 0px 10px 8px 10px; padding: 0; font-weight: normal; text-decoration: none; } /* INFORMATION FOR THE TABLES */ /* One colum emphasis 400 pixels wide */ #one-column-emphasis { font-family: Calibri, Arial, Sans-Serif; font-size: 12px; margin: 2px; width: 400px; text-align: left; border-collapse: collapse; } #one-column-emphasis th { font-size: 14px; font-weight: normal; padding: 8px 8px; color: #111111; } #one-column-emphasis td { padding: 6px 6px; color: #111111; border-top: 1px solid #777777; } #one-column-emphasis a { padding: 6px 6px; color: #111111; border-top: 1px solid #777777; } .oce-first { background: #DDD; border-right: 6px solid transparent; border-left: 6px solid transparent; } #one-column-emphasis tr:hover td { color: #222222; background: #AAAAAA; } /* One column emphasis wide */ #one-column-wide { font-family: Calibri, Arial, Sans-Serif; font-size: 12px; margin: 2px; width: 800px; text-align: left; border-collapse: collapse; } #one-column-wide th { font-size: 14px; font-weight: normal; padding: 8px 8px; color: #111111; } #one-column-wide td { padding: 6px 6px; color: #111111; border-top: 1px solid #61B7C6; } #one-column-wide tr:hover td { color: #555555; background: #61B7C6; } /* One column emphasis superwide */ #one-column-superwide { font-family: Calibri, Arial, Sans-Serif; font-size: 12px; margin: 2px; width: 900px; text-align: left; border-collapse: collapse; } #one-column-superwide th { font-size: 14px; font-weight: normal; padding: 8px 8px; color: #111111; } #one-column-superwide td { padding: 6px 6px; color: #111111; border-top: 1px solid #61B7C6; } #one-column-superwide tr:hover td { color: #555555; background: #61B7C6; } /* One column emphasis superwide 2 */ #one-column-superwide2 { font-family: Calibri, Arial, Sans-Serif; font-size: 12px; margin: 2px; width: 900px; text-align: left; border-collapse: collapse; } #one-column-superwide2 th { font-size: 14px; font-weight: normal; padding: 8px 8px; color: #111111; } #one-column-superwide2 td { padding: 6px 6px; color: #111111; border-top: 1px solid #61B7C6; } #one-column-superwide2 tr:hover td { color: #555555; background: #61B7C6; } /* One column emphasis superwide 3 */ #one-column-superwide3 { font-family: Calibri, Arial, Sans-Serif; font-size: 12px; margin: 2px; width: 850px; text-align: left; border-collapse: collapse; } #one-column-superwide3 th { font-size: 14px; font-weight: normal; padding: 8px 8px; color: #111111; } #one-column-superwide3 td { padding: 6px 6px; color: #111111; border-top: 1px solid #61B7C6; } #one-column-superwide3 tr:hover td { color: #555555; background: #61B7C6; } /* One column emphasis superwide 4 - just like 3 except the header has a permanent coloured background */ #one-column-superwide4 { font-family: Calibri, Arial, Sans-Serif; font-size: 12px; margin: 2px; width: 850px; text-align: left; border-collapse: collapse; background: #EEEEEE; } #one-column-superwide4 th { font-size: 14px; font-weight: normal; padding: 8px 8px; color: #111111; background: #61B7C6; } #one-column-superwide4 td { padding: 6px 6px; color: #111111; border-top: 1px solid #61B7C6; } /* One column emphasis superwide 5 - just like 3 except the hover background colour is always pale grey and border is on the bottom not top */ #one-column-superwide5 { font-family: Calibri, Arial, Sans-Serif; font-size: 12px; margin: 2px; width: 850px; text-align: left; border-collapse: collapse; } #one-column-superwide5 th { font-size: 14px; font-weight: normal; padding: 8px 8px; color: #111111; background: #61B7C6; } #one-column-superwide5 td { padding: 6px 6px; color: #111111; border-bottom: 1px solid #DDD; } #one-column-superwide5 tr:hover td { color: #555555; background: #EEE; } /* One column emphasis narrow */ #one-column-narrow { font-family: Calibri, Arial, Sans-Serif; font-size: 12px; margin: 2px; width: 200px; text-align: left; border-collapse: collapse; } #one-column-narrow th { font-size: 14px; font-weight: normal; padding: 8px 8px; color: #111111; } #one-column-narrow td { padding: 6px 6px; color: #111111; border-top: 1px solid #61B7C6; } #one-column-narrow tr:hover td { color: #555555; background: #61B7C6; } /* Let the width find itself ! */ #one-column-whateverwidth { font-family: Calibri, Arial, Sans-Serif; font-size: 12px; margin: 2px; text-align: left; border-collapse: collapse; } #one-column-whateverwidth th { font-size: 12px; font-weight: normal; padding: 6px 6px; color: #111; } #one-column-whateverwidth td { padding: 6px 6px; color: #111111; border-top: 1px solid #888; } #one-column-whateverwidth tr:hover td { color: #222; background: #AAA; } /* Same as above but so we don't have two tables with the same ID, keeps it clean */ #one-column-whateverwidth2 { font-family: Calibri, Arial, Sans-Serif; font-size: 12px; margin: 2px; text-align: left; border-collapse: collapse; } #one-column-whateverwidth2 th { font-size: 12px; font-weight: normal; padding: 6px 6px; color: #111; } #one-column-whateverwidth2 td { padding: 6px 6px; color: #111111; border-top: 1px solid #888; } #one-column-whateverwidth2 tr:hover td { color: #222; background: #999; } /* Same as above yet again */ #one-column-whateverwidth3 { font-family: Calibri, Arial, Sans-Serif; font-size: 12px; margin: 2px; text-align: left; border-collapse: collapse; } #one-column-whateverwidth3 th { font-size: 12px; font-weight: normal; padding: 6px 6px; color: #111; } #one-column-whateverwidth3 td { padding: 6px 6px; color: #111111; border-top: 1px solid #888; } #one-column-whateverwidth3 tr:hover td { color: #222; background: #999; } /* Same as bove but no border lines between rows */ #one-column-whateverwidthnolines { font-family: Calibri, Arial, Sans-Serif; font-size: 12px; margin: 2px; text-align: left; border-collapse: collapse; } #one-column-whateverwidthnolines th { font-size: 12px; font-weight: normal; padding: 6px 6px; color: #111; } #one-column-whateverwidthnolines td { padding: 6px 6px; color: #111111; } #one-column-whateverwidthnolines tr:hover td { color: #222; background: #AAA; } #smallscrolltable { font-family: Calibri, Arial, Sans-Serif; font-size: 12px; margin: 1px; text-align: left; border-collapse: collapse; } #smallscrolltable td { padding: 1px 1px; color: #333333; } #smallscrolltable tr:hover td { color: #222; background: #AAA; } /* The Gantt chart is actually a table with graphics in it */ #gantt-table { font-family: Calibri, Arial, Sans-Serif; font-size: 12px; text-align: left; } #gantt-table td { font-family: Calibri, Arial, Sans-Serif; font-size: 12px; text-align: left; border : 1px solid #AAA; } #gantt-data { font-family: Calibri, Arial, Sans-Serif; font-size: 12px; text-align: left; } #gantt-data td { padding: 6px 1px 6px 0px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; text-align: left; } /* Input text boxes, dropdown menus and textboxes */ input.onecol_txt_150 { width: 150px; height: 20px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; } input.onecol_txt_120 { width: 120px; height: 20px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; } input.onecol_txt_70 { width: 70px; height: 20px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; } input.onecol_txt_70m { width: 70px; height: 18px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #AAAAAA; text-align: right;} input.onecol_txt_50 { width: 50px; height: 20px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; } input.onecol_txt_210 { width: 210px; height: 20px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777777; } input.onecol_txt_350 { width: 350px; height: 20px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777777; } input.onecol_txt_700 { width: 700px; height: 20px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777777; } .onecol_drop_70 { width: 70px; height: 20px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; } .onecol_drop_150 { width: 150px; height: 20px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; } .onecol_drop_210 { width: 210px; height: 20px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; } .onecol_txtarea { width: 210px; height: 80px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; } .onecol_txtarea_deep { width: 210px; height: 160px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; } .onecol_txtarea_shallow { width: 210px; height: 20px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; } .onecol_txtarea_medium { width: 210px; height: 100px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777777; } .onecol_txtarea_superwide { width: 760px; height: 30px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #DDD; } .onecol_filebox { width: 170px; height: 20px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; } .preview { width: 420px; height: 240px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; } .preview2 { width: 640px; height: 335px; font-family: Calibri, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; } /* POPUP DIVS */ .mypopup1 { position:absolute; left:80px; top:100px; width: 290px; height:190px; border:2px solid #006D75; background-color: #FFFFFF; z-index:99; visibility:hidden; } /* SNAZZY ROUNDED BUTTONS */ .clearbtn { /* generic container (i.e. div) for floating buttons */ overflow: hidden; width: 100%; } a.button { background: transparent url('imgs/bg_button_a.gif') no-repeat scroll top right; color: #444; display: block; float: left; font: normal 12px arial, sans-serif; height: 24px; margin-right: 6px; padding-right: 18px; /* sliding doors padding */ text-decoration: none; } a.button span { background: transparent url('imgs/bg_button_span.gif') no-repeat; display: block; line-height: 14px; padding: 5px 0 5px 18px; } a.button:active { background-position: bottom right; color: #000; outline: none; /* hide dotted outline in Firefox */ } a.button:active span { background-position: bottom left; padding: 6px 0 4px 18px; /* push text down 1px */ } a.button:hover { cursor : pointer; } .clickable : { border : 0px; } .clickable:hover { cursor : pointer; } /* CALENDAR CONTROL */ #CalendarControlIFrame { display: none; left: 0px; position: absolute; top: 0px; height: 250px; width: 250px; z-index: 99; } #CalendarControl { position:absolute; background-color:#FFF; margin:0; padding:0; display:none; z-index: 100; } #CalendarControl table { font-family: arial, verdana, helvetica, sans-serif; font-size: 8pt; border-left: 1px solid #336; border-right: 1px solid #336; } #CalendarControl th { font-weight: normal; } #CalendarControl th a { font-weight: normal; text-decoration: none; color: #FFF; padding: 1px; } #CalendarControl td { text-align: center; } #CalendarControl .header { background-color: #00788A; } #CalendarControl .weekday { background-color: #DDD; color: #000; } #CalendarControl .weekend { background-color: #00788A; color: #000; } #CalendarControl .current { border: 1px solid #339; background-color: #222; color: #FFF; } #CalendarControl .weekday, #CalendarControl .weekend, #CalendarControl .current { display: block; text-decoration: none; border: 1px solid #FFF; width: 2em; } #CalendarControl .weekday:hover, #CalendarControl .weekend:hover, #CalendarControl .current:hover { color: #FFF; background-color: #333; border: 1px solid #999; } #CalendarControl .previous { text-align: left; } #CalendarControl .next { text-align: right; } #CalendarControl .previous, #CalendarControl .next { padding: 1px 3px 1px 3px; font-size: 1.4em; } #CalendarControl .previous a, #CalendarControl .next a { color: #FFF; text-decoration: none; font-weight: bold; } #CalendarControl .title { text-align: center; font-weight: bold; color: #FFF; } #CalendarControl .empty { background-color: #CCC; border: 1px solid #FFF; } .bigcalprevious { font-size: 18px; font-weight: normal; font-family: Calibri, Verdana, Arial, sans-serif; text-align: center; background-color: #166CAF; color : #FFF; width:50px; height:40px; border: 1px solid #FFF; } .bigcalnext { font-size: 18px; font-weight: normal; font-family: Calibri, Verdana, Arial, sans-serif; text-align: center; background-color: #166CAF; color : #FFF; width:50px; height:40px; border: 1px solid #FFF; } .bigcaltitle { font-size: 18px; font-weight: normal; font-family: Calibri, Verdana, Arial, sans-serif; text-align: center; background-color: #166CAF; color : #FFF; width:406px; height:40px; border: 1px solid #FFF; } .bigcalday { font-size: 18px; font-weight: normal; font-family: Calibri, Verdana, Arial, sans-serif; text-align: center; background-color: #FFF; color : #333; width:86px; height:30px; border: 1px solid #777; } .bigcalweekend { font-size: 14px; font-weight: normal; font-family: Calibri, Verdana, Arial, sans-serif; text-align: center; background-color: #387CB1; color: #000; width:86px; height:30px; text-align : left; border: 1px solid #777; } .bigcalweekday { font-size: 14px; font-weight: normal; font-family: Calibri, Verdana, Arial, sans-serif; text-align: center; background-color: #DDD; color: #000; width:86px; height:30px; text-align : left; border: 1px solid #777; } .bigcalempty { font-size: 14px; font-weight: normal; font-family: Calibri, Verdana, Arial, sans-serif; text-align: center; background-color: #CCC; width:86px; height:30px; text-align : left; border: 1px solid #777; } .bigcaleventno { background: transparent url('imgs/round_empty.png') no-repeat; font-size: 10px; font-weight: normal; font-family: Calibri, Verdana, Arial, sans-serif; text-align: left; color : #166CAF; width:24px; height:15px; padding-left:6px; } .minicalday { font-size: 12px; font-weight: bold; font-family: Calibri, Verdana, Arial, sans-serif; text-align: center; background-color: #DDD; color : #222; width:30px; height:30px;} .minicalwkd { font-size: 12px; font-weight: bold; font-family: Calibri, Verdana, Arial, sans-serif; text-align: center; background-color: #DDD; color : #006D75; width:30px; height:30px;} .minicalweekend { font-size: 12px; font-weight: normal; font-family: Calibri, Verdana, Arial, sans-serif; text-align: center; background-color: #DDD; color: #006D75; height:20px; } .minicalweekday { font-size: 12px; font-weight: normal; font-family: Calibri, Verdana, Arial, sans-serif; text-align: center; background-color: #DDD; color: #000; height:20px; } .minicalempty { font-size: 12px; font-weight: normal; font-family: Calibri, Verdana, Arial, sans-serif; text-align: center; background-color: #DDD; height:20px; }