/*----------------------------------------------- Ashton (Tymos Technology) Base Styles Author: Mike Barsham Version 1: dated 2013.01 rev 2015.12 bodyfooter - add clear:both; rev 2105.1226 L740 td div input[text] width:98% to allow size to work on Edit tables rev 15.1229 (L122) why is

0.875 em, leave out NB images - border-width:0px to avoid "underlining" showing through blockelements: M-B-P - padding is just TReBLe ; 3 units => T, LR, B 2 units => TB, LR Preference: - ID selectors over class border-style: solid; double; groove; dotted; dashed; inset; outset; ridge; hidden; top nav updated from alistapart / suckerfish - very lightweight fonts: in loggedinas, favourites, 2019.12 In div.table_column : remove width : 58%; **/ /*========= STRUCTURE & GENERAL POSITIONING ========== * use as div class= hdr position: absolute; top: 10px; float: top; * body { margin:0; padding:0;} * the old body tag had TOPMARGIN=0 MARGINHEIGHT=0 * border: 1px solid blu; topmargin:0; topmargin:0; marginheight:0; checked e.meyer's reset http://meyerweb.com/ but leave th out and NO!!vertical-align: baseline; ============= ====================================== */ img, table, caption, tbody, tfoot, thead, tr, td, textarea, input { margin: 0; border: 0; padding: 0; font-size: 100%; font: inherit; } input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; } /* background:#EEE; If we make this too dark, then lost contrast with the stripe colours DDD and EEF */ div.bodywrapper { min-height:100%; border:4px solid white; border-radius: 16px; -moz-border-radius: 16px; /* FF3.6+ */ -webkit-border-radius: 16px; /* Chrome,Safari4+ */ background:#FAFAFF; /* FFF */ margin-bottom: -4em; } div.pushdown { position:absolute; bottom:0em; width:100%; } div.bodyfooter { clear:both; margin: 0 auto; width:600px; border:0px solid blue; } /* container_R2 class C2 is the container for the middle row after the LHS menu column Favourites and tabbedPagesRow sit in here first 2012.08 added clear left - Pos Relative 2013.11 for abs positioned top right menu 2014.05 now weve lost the debug info, increase height... for lots of user_roles overflow:hidden; */ #container_R2 { position:relative; width:100%; height:80%; min-height:600px; margin: 0px; padding:0; } #container_R2.C2 { border: 3px double #AA00AA; border-radius: 6px; -moz-border-radius: 6px; /* FF3.6+ */ -webkit-border-radius: 6px; /* Chrome,Safari4+ */ } #container_R2.indent20 { margin-left : 20px;} /* include, but no special formatting; output is meant to be visible */ #table_warnings { } /* _basics.js:: default styling if body_container is not available */ .warnings_default { margin-top;400px;opacity:0.6;border:1px solid red; } #tooltip { position: absolute; display:none; width: 12em; border: 1px solid black; padding: 5px; background-color: #EEC; z-index: 100; } /*============ HREFS, NON-SPECIFIC ============================= */ a, a:link, a:active { color: var(--root-font-color); text-decoration: none; } A:hover {color: #F00; text-decoration: none; } A.roll:hover { color:#5A9Ad6; } /* dummy hrefs for use in software-tabs without hrefs attached */ div.softtab { color: #00A; } div.softtab:hover { color: #F00; cursor:pointer;} /* put color here as tags have color:0000EE and it affects img was 20px, */ a img.favicon { width: 1.25em; height:1.25em; padding: 0.5em; border:0; color:#EEE; } /* for doc_reg try different styles of href along the row depending on field */ a.edit { color: #909; } a.edit_2 { color: #909; } /*============= FONT SIZES **ONLY** HERE AND colour classes ========================== 2013:: font:: standard is 1em = 12pt = 16px = 100%. postinfo good at 8pt input.date, 2013.03 need font:11px arial,verdana, sans-serif; */ th { font-size : 14px; } td, td input, td select, td textarea { font-size: 1.0em;} /* 875=>14pt;*/ td input[type=submit] { font-size: 1.0em;} td input[type=button] { font-size: 1.0em;} /* 0.875 2014.05 don't restrict to td unrestrict; 14.0724 make same as submit else looks odd */ @media screen and (max-width : 768px ) { td, td input, td select, td textarea { font-size: 1.15em;} input[type=submit], input[type=button] { font-size: 1.2em;} } .normal { font-size: 0.9em; } .font08 { font-size: 0.8em; } /* header.tpl; "reload" */ .font07 { font-size: 0.7em; } /* header.tpl; "reload" */ .font11B { font-size: 1.1em; font-style:bold;} /* used for +/- in reports */ .debugfont { font-size : 0.75em; } /*div#postinfo*/ .rcFont { font-size : 0.9em; font-family:Calibri;} /*contextMenu(docCreate) */ .fontCGA { font-family: Calibri, Geneva, Arial; font-size:1em; } /* for wysed */ div#e404 { font-size : 0.75em; } div#favourites_row { font-size : 12px; } div#tooltip { font-size : 0.66em } span.advisory { font-size : 0.66em } /* colours to match to js::loadtop::ASYM.global */ .tymosRed { background-color: '#F99'} .gray, .ghost { color : #AAA;} /* for job setup span class; same thing for text areas */ /* 2015.07 aim reduce default 0.875 for bank_trans table */ table.font08 td { font-size: 0.85em; } /* cursor styles for (say) billing selection */ .cursor_hand { cursor:hand;} /* ============= FAVOURITES / GROUPS /+ IMAGES =================== was wrap then _row at width=80% */ div#fave_wrap { position:relative; width:1000px; } div#favourites_row { height: 2.0em; overflow:auto; margin-left:5px; padding-left:2px; padding-top:5px; border: 1px solid #CCD; font-weight:bold; font-family: Arial , Helvetica , sans-serif; } /* selection box to add/remove from favourites + from group top:0.05em; right:6em; height:1em; */ div#favourites_icon_div { position:absolute; bottom:0; right:5px; } img.favourites_img { width: 28px; height:28px; } img.groups_img { margin-left:4px; width:20px; } div.img_centre { text-align:center; } /* horiz. align for images in td div */ img.acl {background:white; text-align:center; } /* ============= STRUCTURE - CONTAINERS ===================== OFFSETS & INDENTS container_middlerow sits up at the top - this is overall wrapper container xx width: 95% */ /*========================================================== STRUCTURE & DEBUG POSITIONING - FOOTER STUFF font-size : 8pt; */ #postinfo { float:left; /* add this to allow proginfo to float too */ width:800px; /*border: solid blue 1px;*/ padding:20px; text-align:left; font-family: Arial, Verdana; visibility:visible; clear:left; } #debuginfo { margin:0; /* border: 1px solid red; */ min-height:40px; } #debug_proginfo { float:left; width:360px; margin:0; border: 1px solid red; overflow-x:visible; } /* use by FX:Utils for debugging */ font.backtrace { font-size:smaller; color:#66F;} font.cerror_warn { font-size:smaller; color:#F61;} /* fa3=orange F3c=pink*/ /* leave these in for time being; used in page_import_base.tpl at least display:none; clear:left; */ .tableHidden {visibility:hidden; } .tableShowing { visibility:visible; } /* Cost import - a wide ta.ble - TRY get scro.lling height: 200px; XX as much as it needs width: 300px - was fixed - try a percentage - of what ?? */ #table_cost_import { overflow: auto; border: 2px solid #666; padding: 4px; } tr.costs_import input { font-size:11px; } /*=======================================================*/ /* Language Menu - appears when you click on the option in htmlheader.php */ #langdiv {position : absolute; top: 60px; right: 100px; visibility:hidden; } /* .message and .footer; est RED. - gone to bb_dev_bit err.or messages on login etc */ /* ======================================= CLIENTS 4-PANEL LAYOUT (#fourpanel) padding:=zero by default; don't add padding on outer elements - use margin on the inner plus req'd width starts with content_wrap's inner dimension =width; so wid=2x300 + 4x(20/1/10) := 724 + panelwrap 2x11:= 746 ok width:96%; 14.1004 if you narrow viewport the 4 panels wrap; ugly; use fixed width 520+520+... */ div#content_wrap { margin:5px 0 0 5px; border:1px solid red; width:1060px; } div#content_wrap .panel_wrap { margin:0px; } /* border: 0px solid blue; } /* height:350px; */ div.panel { float:left; min-height:160px; margin:10px 0 5px 5px; border:1px solid pink; padding:10px; } div.panel.panela {width:520px; } /* a was 55% but c - 460px! */ div.panel.nscroll { height:400px; overflow-y:scroll; } /* with just browser scrolling */ div.panel.panelc {width:520px; } div.vscroll { height:400px; overflow:hidden; } /*height:300px;*/ span.panel_title { font-weight:bold;} /*====== END OF STRUCTURAL ELEMENTS ======================*/ /*============================================ TABLES - SPECIFICS =========================================== */ tr.table_header { background: #CCD; } div.tbl_hdr { position:relative;} /* 2014.0319 to allow for help icon absolutely placed */ /*2014.02 change to Light-Dark ; 2014.05 move to td elements display only to avoid shadow on inputs; but include checkboxes so don't restrict to td, bec they only appear there anyway 14.09 td stripes overrides row_inactive! so stop that */ .stripe_0 { background: #EEF; vertical-align:top; } .stripe_1 { background: #DDD; vertical-align:top; } /* first one (odd) needs to be darker */ tr.stripe { border-bottom: 1px solid #ddd; } tr.odd { background: #f9f9f9; vertical-align:top; } tr.even { background: #fefefe; vertical-align:top; } tr.inactive td.stripe_0, tr.inactive td.stripe_1 { background: #FF9F9F; } /* colour for inactive rows */ /* 14.0604 setting colour on zero; /*table-layout:fixed; update_report used by js-driven page update dialog boxes padding:2px here is pretty useless - its just offsets the whole table slightly, like a margin better to apply a spearate class for Margin Now for admin-type Display-Only tables we want to increase the td padding to space the table out ================================================*/ table.TC_DIS { border-spacing: 1px; table-layout:fixed; } table.TC_DIS.TO4 td { padding: 4px; } table.TC_DIS.TS { border-spacing: 0px; } /* 0629 test incr b-spacing 1px temp xx*/ table.update_report { border : 1px solid #336; border-spacing: 1px; padding: 2px; } /* for doc_reg TC_ED spacing too generous, use different one edit_n(arrow) */ table.TC_ED table.edit_n { margin:10px; border: 0px solid blue ; border-spacing: 1px; padding: 2px; } table.TC_ED tr>td { margin:0 10px 0 10px; padding: 2px; } /* for bank trans, without stripes we need margin-bottoms as whit.e else difficult to see on multi-row rows */ tr.border_bw td {border-bottom:1px solid #BBB;} /*whit.e*/ /*============================================== INPUTS IN TABLES + FILTER HEADERS ==================================================*/ /*Main Table Body tag border:1px solid black; border-collapse:collapse; rev 2014.06 padding isn't doing anything - padding:10px; */ tbody.MTB { } tbody.MTB td div input { width:96%; } /* 2014.01 try again 96% MUST HAVE - without w100 they shoot out to default width of 20em & ignore colgroups */ tbody.MTB td div input.dpick { width: 70px; } /* bit of a fight here, MTB td div was overriding */ tbody.MTB td div input.decimal { padding-right:0; } /* was 10px; width:95%; nasty hack else final decimal gets cut off */ /* adj see blog 2014.0128 but WHY is height = 1.72?? ~ 0.875EM X 2?? */ tbody.MTB td div select { width:100%; height:1.720em; margin-left:1px; /* 2014.06 no - it drops them out of line ... margin-top:1px; best 2px but only on chrome please */ } /* Rules for TSI Time Sheet Input - useful but we have dpick inputs in non-TSI tables; why should we have to add a table class just to get narrow width on dpick inputs ? 14.0730 restrict to td here else inputs get border due to td input[] list above*/ tbody.TSI td { border :1px solid #AAC; padding:2px; } tbody.TSI td input[type=text], tbody.TSI td input[type=password], tbody.TSI td input[type=checkbox], tbody.TSI td select, tbody.TSI td textarea { width:98%; border :0px } tbody.TSI td input[type=text].dpick, input.dpick { width:70px; margin:0px; padding-right:0px; } /* but having border, makes it narrower */ tbody.TSI td select { width:100%; border :0px } /* 2014.0703 fix appearance of small tables - number set in fieldclas */ tbody.tdpad1 td { padding:1px;} tbody.tdpad2 td { padding:2px;} tbody.tdpad4 td { padding:4px;} tbody.tdpad1 td a{ padding-left:4px;} /* special for assoc_grades */ tbody.tdpad2 td a{ padding-left:4px;} /* timesheet input where all elements are inputs; can't use background, so have to reinstate borders, unlike other tables 2014.01 tryy border-spacing 1px If we add padding to the inner td, we don't want it on the (single) outer td, so now page_base allows for different classes; tBodies are now TSO for TimeSheet Outer & TSI First the non-div-wrapped display elements Also try input at 98%; won't affect left-jus but helps a lot with decimals OK this is looking quite clean now 14.1002 For timesheet import gone messyagain (15xp short on 7 cols) but table-layout fixed worked wonders css-tricks/fixing-tables-long-strings : require width 100% */ table.innertable { margin:0px; border:0px; padding:0px; border-collapse:collapse;} /* width 100% screws up Edge; Without it is fine, but Chome screws up wihtout it, try 10px; */ table.innertable.afixed { table-layout:fixed; width:10px;; } /* 2015.07 probs again with bank_trans table */ table.innertable.bank { border-collapse:separate; border-spacing:1px;} thead tr.centre th{ text-align:center;} td div.nopunch { margin-right:2px; overflow:hidden; } /* avoid punch-through */ /* gone for addition to MTB class td input.dpick, td div input.dpick { width:70px; margin:0px; padding-right:0px; !important } /* but having border, makes it narrower */ input[type=text].filter { padding:0px; } input[type=text].inputHint { color:#AAA; } /* 14.0630 because the td display elements are borderless any inputs look naked, so HAVE to have a border ; try adding td to restrict ; .0703 Selects in edit.tpl have left margin, makes them indented; remove 14.0730 but NOT for Timesheet Input in a table 15.1115 these are overriding the TSI classes above - try adding '>' for Child, ie if div-wrapped these won't apply.. no; add 98%? */ td input[type=text], td input[type=password], td input[type=checkbox], td select, td textarea { margin-left:0px; border : 1px solid #aaa; padding : 2px; } /* 2015.1226 width of 98% in edit tables is preventing "size" from doing anything * try setting width only on td div input * 2020.03 revert to 100% */ td div input[type=text], td div input[type=password] { width:100%; } /* 14.1004 job renewal want plain input wiht border */ input.normal { border : 1px solid #aaa; } /* THIS NOT WORK!! td input[type=checkbox] { text-align:center; vertical-align:middle; } ...Bec its not the *input* - we need centreing on the wrapper for check.box allow for td OR div-wrapped */ td.checkbox { text-align:center; vertical-align:middle; } div.checkbox { text-align:center; vertical-align:middle; } /* 14.0526 */ td.centre { text-align:center;} /*============================================ COLUMN MULTI-FILTERS - for large tables =========================================== */ /* PAGERBLOCK - header for clients display and several others NB this is used in the TEMPLATES clients_display.tpl, generic_tableview.tpl - not the code width:1200px; no effect border-radius:10px; -moz-border-radius:10px; 2013.12 NOT border : 6px solid #EEE; - punches through R2C2 dbl-lines as page narrows 2016.0107 KKK change this to class pagerclass to allow id to have {divid} */ .pagerclass { width: 900px; padding:5px; } #pagerblock legend { border:1px solid black; } /* ============= FILTER BLOCK PAGING =============== */ /* take out to 90 to avoid jumps as numbers go from 2-digit to 3-digit */ table.filterblock_table td.filter_count { width: 90px; padding:0;} table.filterblock_table td.filter_count.scroll { padding-right:20px;} table.filterblock_table td.filter_name_input { width:140px;} /* =========== COLUMN HEADER & FILTERS ============== */ /* 2020.02 Why have this border #ccc?? border :1px solid #CCC ; */ div.filter { } div.filter table.filter { border-spacing : 0px; } div.filter table.filter td { border:0px ; padding : 0; } div.filter input.filter_text { padding:2px; } /* 2020.01: height:1.0em; .. problem with cells collapsing in FFox on re-display*/ div.filter input.cb_styled { vertical-align:middle; height:1.2em; width:1.2em; margin:0; padding:0; margin-bottom:1px;} div.filter select { height:1.55em; margin:0; padding:0; } /* border:0; very bland */ td.cosr1 { display:block; height:0px; } /* visibility: none; background:yellow;*/ td.cosr2 { height:18px; text-align:center; font-weight:bold; border :0px black solid; } td.cosr3 { height: 18px; border :0px black solid; } td.cosr3 div input { width:100%; } /* 2013.0718 without this, inputs in col hdrs springing width out to max again */ td.cosr3 div select { width:100%; } /* 2013.0718 without this, inputs in col hdrs springing width out to max again */ div.centalign, td.centalign, input.centalign { text-align:center; } div.rtalign, td.rtalign, input.rtalign { text-align:right; } div.vertalign, td.vertalign { vertical-align:middle; } /* ACL_TABLE */ input.bincol { text-align:center;} /*[value=x] is fine for the initial display, but on toggling the value - doesn't change*/ input.bincol[value='1'], input.bincol.bc1 { color:green; background:green; } /* border:3px solid #fff; */ input.bincol[value='0'], input.bincol.bc0 { color:red; background:red; } input.bincol[value='-1'], input.bincol.bcx { color:#AAA; background:#AAA; } input.bincol:hover { color : #cfc; background:#cfc; cursor:pointer;} input.bincol.bcx:hover {} /* but of we're "bcx-d" then don't change on hover */ input.bincol[value='-1']:hover { color:gray; background:gray; } /* Formatting text in tables GOTCHA!! for Table-B-type displays, although the row is a there isn't actually any td-text (!) - its ALL either or or