@charset "UTF-8"; /* David.Clark@CIBER-research.eu 2012-12-15 * * Stylesheet for CIBER-research webpages HTML5 * version 0.6 * derived from ciber-2012.css * * 3 column layout sans tables * * ref. HTML XML compatibility http://www.w3.org/TR/xhtml1/#guidelines * div#w3c_valid is a shorthand for div[id='w3c_valid'], and div.contentmain * for div[class~='contentmain']. In XML an attribute of type ID need not be * called id, it is however defined as such in the XHTML DTD, as is 'class'. * Ideally we should like to use the XML form rather than a shorthand that * applies only to the XHTML namespace. However this is not recognised by * IE6 -so shorthand it is. * * A note on font sizing (see also below [class~='contentcentre']) * ref. CSS2 http://www.w3.org/TR/REC-CSS2/syndata.html#length-units * * In document root em refers to 'initial value' * The UA should rescale pixel values to match a typical screen (~90dpi) * viewed at arms length. This reference pixel has a visual angle of * ~0.0227 degrees (1px ~0.28mm). Printed, and viewed at closer range the * reference pixel needs to be ~0.21mm. Printed at 600dpi this is ~5dots. * The CSS recomended scaling interval between font sizes is 20%. * * Font Sizing reference: (not equivalents): * Screen is ~800x600, minimum is 640x480 above 1024x768 is oversize. * pixels ~ 96ppi, minimum 72ppi * The % and em are relative and in effect equivalent. * Note that the standard default font size is SMALL not medium. * HTML CSS Print Screen Type Box * 1 xx-small 7pt 9px 0.7em 60% * 2 x-small 8.5pt 11px 0.9em 75% * 3 * small 10pt 13px 1.0em 90% * 4 'medium' 12pt 16px 1.2em 100% * 5 large 14pt 19px 1.4em 120% * 6 x-large 18pt 24px 1.8em 145% * 7 xx-large 21pt 27px 2.1em 175% * * Our preferred text font is Univers, we will settle for real Helvetica, * but are resigned to seeing our work rendered in Arial if we are lucky. * * logo CIBER-research.eu. * Font Dejavu Sans, * {font-family : "DejaVu Sans","Bitstream Vera Sans",Verdana, Arial, Helvetica, Geneva, Sans-serif;} */ /* __________________________________ Base */ /* Define both html and body for XML HTML compatibibility */ html { margin: 0px; padding: 0px; border: none; font-family: Univers,Helvetica,Arial,sans-serif; font-size: 1em; color: #000; background-color: #fff;} body { margin: 0px; padding: 0px; border: none; font-family: Univers,Helvetica,Arial,sans-serif; font-size: 1em; color: #000; background-color: #fff; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } h1,h2,h3,h4,h5,h6 { font-weight: bold; color: #004A4A ; background-color: inherit; /* Turquoise8 */ margin-bottom: 2px; margin-top: 0.75em; } h1 { font-size: 1.25em; color: #198A8A ; background-color: inherit; /* turquoise6 */ } h2 { font-size: 1.25em; color: #b80047; background-color: inherit; /* red 7 */ } h3 { font-size: 1.1em; color: #006B6B; background-color: inherit; /* turquoise7 */ } h4 { font-size: 1.1em; color: #99284c ; background-color: inherit; /* red 8 */ } h5 { font-size: 1.0em; color: #004A4A; background-color: inherit; /* Turquoise8 */ } h6 { font-size: 1.0em; color: #7E0021 ; background-color: inherit; /* chart5 (red) */ } /* Paragraph defined with tight spacing * for use in headers and side panels * see below for centre panel body text. */ p,ul,ol,dl { color: #000; background-color: #fff; margin-top: 0.25em; margin-bottom: 1px; } p.big { font-size: 120%; } p.mini { font-size: 90%; } li,dt,dl { margin-top: 0.25em; margin-bottom: 1px; } img { border: none; } div.centre { /* specify width inline eg
*/ margin-left: auto; margin-right: auto;} /* must specify in the order :link :visited :hover :active */ a:link { text-decoration: none; color:#0084D1; background-color: inherit /* chart12 (blue)*/ } a:visited { text-decoration: none; color:#004586; background-color: inherit; /* chart1 (dk blue)*/ } a:hover { color:#00b8ff; background-color: inherit; /* blue7 */ text-decoration: underline; } a:active { color:#e62300; background-color: white; /* red2 */ } *.clear { clear: both;} /* improve non-GUI access [including search engines] * note: NS4 will ignore this stylesheet and display skipnav */ *.accesskey { text-decoration: underline; font-weight: bold; speak: spell-out; } @media screen,print,projection { div#precis, div.precis-x { display: none; } *.skipnav { display: none; } } @media tty, tv, braille { div#precis, div.precis-x { display: block; } *.skipnav { display: block; } } @media handheld, embossed { div#precis, div.precis-x { display: block; } *.skipnav { display: none; } } @media aural { div#precis, div.precis-x { speak: normal; } *.skipnav { speak: normal; } } header#cr_topbar { width: 900px; height: 160px; color: #004a4a; background-color: white; } img#cr_topbar_background { overflow: hidden; } div#cr_topbar_logo { width: 100px; height: 160px; position: absolute; left: 1px; top:0px; color: #008080; background-color:inherit; /* text applies only if image missing */ font-size: 66px; font-weight: bold; } div#cr_topbar a { /* color: #9c9161; background-color: #fff; */ } div#cr_topbar_title { position: absolute; left: 24px; top:72px; color: #008080; background-color:transparent; font-family: "DejaVu Sans","Bitstream Vera Sans",Verdana, Arial, Helvetica, Geneva, Sans-serif; font-size: 2.5em; font-weight: bold; padding-top: 0px; padding-left: 0px; } div#cr_topbar_title a:hover { border: none; text-decoration: none; } .cr_ciber { font-family: "DejaVu Sans","Bitstream Vera Sans",Verdana, Arial, Helvetica, Geneva, Sans-serif; color: rgb(230,35,0); background-color:transparent; } .cr_hyphen { font-family: "DejaVu Sans","Bitstream Vera Sans",Verdana, Arial, Helvetica, Geneva, Sans-serif; color: rgb(126,0,33); background-color:transparent; } .cr_research { font-family: "DejaVu Sans","Bitstream Vera Sans",Verdana, Arial, Helvetica, Geneva, Sans-serif; color: rgb(0,128,128); background-color:transparent; } .cr_dot1 { font-family: "DejaVu Sans","Bitstream Vera Sans",Verdana, Arial, Helvetica, Geneva, Sans-serif; color: rgb(0,0,0); background-color:transparent; } .cr_eu { font-family: "DejaVu Sans","Bitstream Vera Sans",Verdana, Arial, Helvetica, Geneva, Sans-serif; color: rgb(0,184,255); background-color:transparent; } .cr_dot2 { font-family: "DejaVu Sans","Bitstream Vera Sans",Verdana, Arial, Helvetica, Geneva, Sans-serif; color: rgb(230,35,0); background-color:transparent; } .cr_ltd { font-family: "DejaVu Sans","Bitstream Vera Sans",Verdana, Arial, Helvetica, Geneva, Sans-serif; color: rgb(126,0,33); background-color:transparent; } footer#cr_footer { clear: both; width: 72%; float:left; padding-left: 16px; padding-right: 6px; } section.cr_footer_contact { text-align: left; font-size: 0.6em; } nav#cr_footer_menu { text-align: left; font-size: 0.7em; } nav#cr_footer_menu ul { margin-left: 0; padding-left: 0; } nav#cr_footer_menu li { list-style-type: none; display: inline; } nav.link_panel { color: #dc2300; background-color: inherit; font-size: 1.2em; font-weight: bold; padding-top: 0px; padding-left: 0px; } nav.link_panel p{ background-color: inherit; } iframe { border: 0; overflow: hidden; } /* Floating 2 column layout * contentmain contains contentcentre [contentright] */ div.contentmain { padding: 6px; } /* assume min screen size for 3 cols is XVGA 1024x768 * right column: 200px +-10 * left column max 200 * with left 170px and right 200px or 23% * width 50.6% permits 3 columns down to 800px * max-width 34em at font-size 1em needs ~62% at 800px width */ section.contentcentre { width: 55%; float:left; padding-left: 12px; padding-right: 6px; } /* The Font Size Problem * For once, to be fair, it's not all M$'s fault. * HTML 3.2 introduced, or rather, caught up with, the tag. * The tag, and the related tag, defined 7 sizes * numbered 1 to 7. The default size was 3, a resonable decision given * that there is a limit to how small a readable font can be, but less * restraint on making a font larger. The actual size on screen depends * on the browser * HTML 4 introduced Cascading Style Sheets, the seven standard sizes were * retained but now mapped to names: from xx-small to xx-large. The middle * term in this series being called, not in itself unreasonably, 'medium'. * But, that made the name of the deault size 3 or 'small'. * Now, if you offer choices to people on matters about which they know very * little, you should not be suprised if they think 'medium' is a safe option. * The next stage is rather tangled, suffice to say that IE seems to have been * responsible for confusing medium with default, and the habit of designing to * work with IE leaves us with web sites where 1em looks too big on IE. * But good practice, with regard to both legal and social obligations of * accessibilty, and sound software engineering for device independence, * require the use of relative (ie 'em') units. * So, the next item in this CSS is a reluctant compromise between doing the * right thing (1em) and keeping an IE user with good eysight happy. * Oct 2005: occasional and incoherent reports of IE users finding text 'very small' * so maybe time to drop this nonsense and set everything to a 1em datum. */ section.contentcentre.pica { font-size: 1em} section.contentcentre.elite { font-size: 0.9em;} /* some adjustment for body text readability */ section.contentcentre p,blockquote { margin-bottom: .5em; line-height: 1.3; max-width: 34em; } section.contentcentre ul,ol,li,dt,dd { max-width: 40em; } section.contentright { /* width: 36%; */ width: 30%; float:right; margin-top: 1.2em; padding-left: 5px; border-left: 1px dotted #aaa; font-size: 0.80em; } section.contentright h1,h2,h3 { /* font-size: 1em; margin-bottom: 2px; */ } section.contentright p { margin: 2px; } section.contentright ul,ol,dl { margin: 2px; padding: 0px; } section.contentright li { list-style-type: circle; list-style-position: inside; margin: 0px; } article.news_item { clear: both; margin: 2pt auto 20pt; } article.project { clear: both; margin: 2pt auto 20pt; } article.diary { clear: both; margin: 2pt auto 20pt; } p.rightsolus { padding: 0.25em 0.25em 0.5em; font-size: 1.1em; color: #004a4a; background-color: inherit; /* dark green */ font-style: italic; font-weight: bold; } ul { /* set type as fallback if no image */ list-style-type: circle; } ul.cfplist { max-width: 40em; list-style-position: outside; /* image URL is relative to location of style sheet */ list-style-image: url(CfPdotGR.png); } ul.pinlist { max-width: 20em; list-style-position: outside; /* image URL is relative to location of style sheet */ list-style-image: url(CfPpin.png); } /* only use li style as overide of ul definition */ li.cfpdotred { list-style-image: url(CfPdotRG.png); } li.cfpdotgreen { list-style-image: url(CfPdotGR.png); } img.left { float: left; clear: left; margin: 2px;} img.centered { margin-left: auto; margin-right: auto;} img.right { float: right; clear: right; margin: 2px;} img.staff_portrait { float: left; clear: left; margin: 5px auto 5px; /* border: 3px solid #7e6068; */ border: 3px solid rgb(188,161,168); padding: 5px; } /* CIBER Services * span */ .turnaways { color: rgb(126,0,33); background-color: inherit; font-family: "DejaVu Sans","Bitstream Vera Sans",Verdana, Arial, Helvetica, Geneva, Sans-serif; font-size: 1.1em; font-weight: bold; font-style: italic; } /* news pages * start item with name */ .staffname { color: #7E0021; background-color: inherit; } .daydate { clear: both; margin-top: 1.5em; color: #00b8ff; background-color: inherit; /* blue7 */ } .dateline { color: #004a4a; background-color: inherit; /* turquoise8 */ font-size: .9em; } .headline { color: #008080; background-color: inherit; /* Turquoise */ font-size: 1.2em; } .short_title { color: #008080; background-color: inherit; /* Turquoise */ font-size: 1.2em; } .client { color: #008080; background-color: inherit; /* Turquoise */ font-size: 1.1em; } .datetime { color: #00b8ff; background-color: inherit; /* blue7 */ font-size: 1.1em; }