/* *************************************************************** */
/* MAIN SHELL
all pages of internet including home (eventually) use these styles
SwRI Home presently uses CORPORATE.CSS in place of INSTITUTE-HOME
/* *************************************************************** */
/*select working comments removed 111511 - refer to warehouse for prior comments*/
/*select working comments removed 072613 - refer to !reference for prior comments*/
/* *************************************************************** */
/* HTML SELECTORS / ELEMENTS
/* *************************************************************** */
body {
font-size: 78%; /*suppose to be approximately the same size in all browsers with minor difference*/
line-height: 1.5; /*needed for globalnav dropdown to work properly*/
font-family: Arial, Helvetica, sans-serif;
background: #ffffff;
text-align: center; /*this centers the pagewrapper in IE 5* browsers, the text is then set to the left aligned default in the #pagewrapper selector*/
color: #000;
}
p {
}
h1 {/*see INSTITUTE-HOME.CSS for adjustments specific to SwRI home*//*if adjust here, may need to adjust in INSTITUTE-HOME.CSS*/
font-size: 220%;
font-weight: normal;
color: #c1272d;
padding-top: 0px;
margin: 0px 0px 4px 0px;
line-height: 120%;
text-align: left;
}
h1.bottomrule {
border-bottom: 2px dotted #fbb03b; /*width style color (orange)*/
padding-bottom: 6px;
}
h1.no-nav { /*use when H1 is below #HEADER and #GLOBALNAV with no navigation*//*templates/2011/reviewed/c1/video-click-to-start-up-to-980.htm*/
margin-top: 17px;
}
h2 {
color: #c1272d;/*red*/
font-size: 120%;
font-weight: normal;
}
.separator-btm,/*051713 moved style from below and created equivalent style-01 version*/
h2.style-01 { /*horizontal small dotted rule below h2 in #NEWS, #PUBS, #CAPABILITIES, and #VIDEO-FEATURED* or #VIDCLIP//*similar rule used in #CONTENT P.MORE*/
border-bottom: 1px dotted #0065cd;
padding: 2px 0px;
}
h2.style-02 {/*H2 for News Release pages found in 9what-releases*/
color: #000000;
font-size: 120%;
font-weight: bold;
border-bottom: 1px solid #d1d3d4;
padding-bottom: 4px;
}
h2.style-03 {/*H2 for TT Article and Other Tech Papers OPTION A 3pubs-papers*//*chosen option*/
border-bottom: 1px solid #d1d3d4;
padding-bottom: 2px;
}
h2.rule,/*.RULE class may only be used on templates, created .STYLE-04 version for consistency of names*//*/ changed to style-04 on http://swri.org/templates/2011/reviewed/c2/ex-pan.htm, and http://swri.org/templates/2011/reviewed/c1/partial/txt-list-item-image-rt.htm*/
h2.style-04 {/*H2 for TT Article and Other Tech Papers OPTION B 3pubs-papers*//*unchosen option*/
border-top: 2px dotted #fbb03b; /*width style color (orange)*/
margin-top: 20px;
}
h2.style-05,
h2.article-entry,
p.style-05,
p.article-entry {/*H2 and P TAG for TT TOC template /3pubs/toc-new-template.htm*/
text-align:right;
}
h2.style-06,
h2.media {/*H2 for Media Resources for SwRI News Release pages /templates/2011/working/media-resources.htm*/
text-align:center;
}
select {font-size:.9em;}/*120211 pulled from dwm-8-5-2011-pubs.css in test/dwm/Landing/ folder for its application to new publications page*//*noted in dwm.css file*/
/*this makes a size difference in IE but not Safari*//*possibly make a more specific rule for HR*/
#maincontent {
margin-bottom:0;
padding-bottom:30px;
}
#maincontent h2 {
padding-top: 8px;
}
#maincontent h2 a {/*this keeps H2 red even when a link*//*012012 formerly .row h2 a*/
color: #c1272d;
}
#maincontent h2 .link-blue a {/*this allows LINKDESC to be default blue when a link*//*chose not to apply style to LINKDESC in case other instances exist*//*/EMS/ISO14001-new.htm*/
color: #0000ff;
}
/*Begin 012012 removing so to keep hovered links red*/
/*.row h2 a:hover {
color: #0000ff;
}*/
/*End 012012 removing so to keep hovered links red*/
#sidebar1 h2,
#sidebar2 h2 { /*Home-SwRI News & Announcements, Careers, SwRI Publications*//*Beijing-Automotive Engineering Capabilities, Featured Video, SwRI News & Announcements*/
padding-top: 3px;/*this affects the space between H2 and .SECTION border-top above it*/
padding-bottom: 5px;
margin-bottom: 8px;
line-height: 120%;/*this tightens wrap leading*/
}
h3 { /*Featured Video labels*/
font-weight: normal;
}
#maincontent h3 {
font-weight: bold;
color: #000000;
padding-top: 8px;
}
#maincontent p {/*see test.css adjustment*//*see also img.space-p*/
margin-top: 8px;
margin-bottom:8px;/*120111*//*101311 check img.space-p*//*may also need to apply to sidebars*/
}
#maincontent ul {/*need to compare this and test.css adjustments to classes associated with capabilities page*/
list-style-type: square;
list-style-position: outside;
margin-left: 20px;
padding-top: 4px;
padding-bottom: 6px;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 4px;
margin-bottom: 4px;
}
#maincontent ul li {
margin-left: 25px;
}
/*Begin creating for list of addresses for /templates/2011/reviewed/c1/partial/width-partial-2col-address-list.htm*/
#maincontent.li-space-01 ul li,/*LI-SPACE-01 added to #MAINCONTENT adds space above and below all UL LI TAGS in #MAINCONTENT*/
#maincontent ul li.li-space-01 {/*LI-SPACE-01 added to UL LI TAG adds space above and below that UL LI TAG*/
margin-top: 8px;
margin-bottom: 8px;
}
/*End creating for lists of addresses for URL*/
#maincontent ul li ul li {
list-style-type: circle;
margin-left: 5px;
}
#maincontent ol {
list-style-type: decimal;
list-style-position: outside;
margin-left: 20px;
padding-top: 4px;
padding-bottom: 6px;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 4px;
margin-bottom: 4px;
}
#maincontent ol li {
margin-left: 25px;
}
h4 {/*possibly unused at this time except as #SIGNOFF H4*/
font-weight: normal;
}
#signoff h4 {
font-weight: bold;
font-size: 90%;
}
h5 {/*possibly unused at this time*/
}
/*Begin adding for Consortia page 112012*/
a:link { text-decoration: none; color: #0000ff; }
a:visited { text-decoration: none; color: #0000ff; }
a:hover { text-decoration: underline; }
a:active { text-decoration: underline; }
/*TARGET PSEUDO SELECTORS*/
/*apply class TARGET-01 to #MAINCONTENT for pages where target destination is to be highlighted and with arrow*//* http://www.swri.org/4org/d03/vehsys/advveh/esses/default-new.htm *//*full URL needed*/
.target-01 :target {background-color:#fbe2bb;}
.target-01 :target::before {content:url(/images/2011/target13x13.gif);}
/*SUB and SUP TAGs due to equations in IRD pages, sub drops low in Firefox on PC, others are acceptable*/
sup {
vertical-align: super;
font-size: 80%;
}
sub {
vertical-align: sub;
font-size:80%;/*font-size set to 100% for IE in IE.CSS*/
}
h1 sub, h1 sup {
font-size: 60%;/*font-size set to 80% for IE in IE.CSS*/
}
/* *************************************************************** */
/* STRUCTURE
/* *************************************************************** */
/* --------------------------------------------------------------- */
/* #PAGEWRAPPER - OUTER WRAPPER
one wrapper around all other wrappers except #SNIPPETSWRAPPER
/* --------------------------------------------------------------- */
#pagewrapper {
width: 100%;
margin: 0 auto; /*auto margins, in conjunction with a width, center the page*/
text-align: left; /*this overrides the text-align:center on the body element*/
}
/* --------------------------------------------------------------- */
/* INDIVIDUAL WRAPPERS
in the case individual wrappers are or become 100% of page
/* --------------------------------------------------------------- */
#headerwrapper {
height: 70px;
}
#globalnavwrapper {
height: 18px;
background-image: url('/images/2011/globalnav.gif');
}
#specialinfowrapper { /*wrapper around #SPECIALINFO which in turn wraps around #LANGUAGE and #OPTIONS*/
font-size: 80%;
margin-top: 2px; /*this drops the div down from #GLOBALNAV, works in all browsers*/
height: 19px; /*this retaisn depth in instances when contents of are removed, such as for vault version*//*IE conditional needed*/
}
#breadcrumbwrapper { /*wrapper around #BREADCRUMB*//*this wrapper not included on institute home*/
padding-bottom: 8px;
}
#contentwrapper {
}
#signoffwrapper { /*wrapper around #SIGNOFF*//*this wrapper not included on institute home*/
}
#footerwrapper {
color: #464646;
}
#footer1wrapper {
background-image: url('/images/2011/footer1.gif');
background-repeat: repeat-x; /*keeps graphic at top*/
background-color: #fafafa;
padding-bottom: 9px;
}
#footer2wrapper {
background-image: url('/images/2011/footer2.gif');
background-repeat: repeat-x;
padding-top: 18px;
}
#datewrapper {
font-style: italic;
font-size: 70%;
color: #464646;
margin-top: 50px;
padding-left: 2px;
}
#snippets-body-wrapper {
}
#snippets-footer-wrapper {
text-align: left; /*this overrides the text-align:center; on the BODY element*//*needed since #SNIPPETSWRAPPER outside of #PAGEWRAPPER*/
padding-left: 2px;
}
/* *************************************************************** */
/* #HEADER
div around #RESOURCENAV and #LOGO1-SEARCH
/* *************************************************************** */
#header {
margin: 0 auto; /*this centers the div in its outer wrapper*/
width: 980px;
}
/* --------------------------------------------------------------- */
/* #RESOURCENAV
top right universal resource navigation above search
Institute site - Advanced Search / Search Tips / SwRI Site Map / SwRI Home
Beijing site - Advanced Search / Search Tips
/* --------------------------------------------------------------- */
#resourcenav {
height: 21px; /*21px plus 4px (padding-top) equals actual measure 25px*/
text-align: right;
font-size: 80%;
padding-top: 4px;
line-height: 100%; /*this corrects the space from top of browser to navigation without moving other elements in #HEADER*/
}
#resourcenav ul {
padding-top: 2px;/*use padding instead of margin to drop nav down from top of page to eleviate extra space gained above #HEADER in all browsers except IE*/
}
#resourcenav ul li {
display: inline;
}
#resourcenav a:link,
#resourcenav a:visited {
border-left: 1px solid #000;
color: #000;
padding-right: 3px;
padding-left: 4px;
}
#resourcenav a:link.first,
#resourcenav a:visited.first {
border-left: none; /*removes border from first link*/
padding-left: 0px; /*removes padding (most of space) to left of first link*/
}
#resourcenav a:link.last,
#resourcenav a:visited.last {
padding-right: 0px; /*removes padding to right of last link*/
}
/* --------------------------------------------------------------- */
/* #LOGO1-SEARCH
div around #LOGO1 AND #SEARCH
/* --------------------------------------------------------------- */
#logo1-search {
height: 45px;
}
#logo1 { /*Southwest Research Institute*/
width: 665px;
float: left;
}
#search {
position: relative;
width: 220px;
height: 12px;
float: right;
text-align: left;
margin-top: 6px;
line-height: 100%;
padding-top: 1px;
}
/*Begin new for AE internal search option 093013*//*move to sidebar*/
#search-internal {
position: relative; /*needed for GO graphic arrow to be visible*/
width: 220px;/*no affect at first, needed after other adjustments made*/
/*height: 12px;only reduces depth of background-color at this time*//*keeping for now*/
/*float: right;no affect at first*//*after other adjustments made removing it creates extra space below the box*//*because of this and next, using .select-space and plan to adjust with new class*/
/*text-align: left;makes space below box smaller and nicer*/
/*margin-top: 6px;dropped box down, do not want this*/
line-height: 100%;/*no affect at this time*/
padding-top: 1px;/*drops box down within the background-color area, lines up box with arrow*//*compromise, each browser differs*/
/*background-color:aqua;*/
}
/*End new for AE internal search option*/
.formfield {
text-align: left;
vertical-align: middle;
}
.coloredformfield {
background-color: #f7f8f9;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px; /*this affects the size of the box*//*change in font-size moves the box in safari and google chrome up or down*/
border: 1px solid #d1d3d4; /*appearance of the form border*/
width: 196px;
color: #000;
padding-left: 4px;
}
.coloredformfield-01 {/*for use with SEARCH found in #MAINCONTENT area instead of HEADER*/
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px; /*this affects the size of the box*//*change in font-size moves the box in safari and google chrome up or down*/
border: 1px solid #d1d3d4; /*appearance of the form border*/
width: 196px;
color: #464646;
padding-left: 4px;
}
#go,
#go-internal {/*100113 added for http://swri.org/templates/2011/working/sb1-search-1nav.htm*/
position:absolute;
right:0px;
top:0px;
width:10px;
height:20px;
}
/* *************************************************************** */
/* #GLOBALNAV
top horizontal navigation below institute name
styles in NAV-GLOBAL.CSS
/* *************************************************************** */
/* *************************************************************** */
/* #SPECIALINFO
div around #OPTIONS and #LANGUAGE
/* *************************************************************** */
#specialinfo {
margin: 0 auto; /*this centers the div in its outer wrapper*/
width: 980px;
}
/* --------------------------------------------------------------- */
/* #OPTIONS
links to extra options
Institute site - Follow SwRI on Facebook / YouTube / Follow SwRI on Twitter / RSS Feed
Beijing site - RSS Feed
Web Tech pages - Printer Friendly added until PRINT.CSS complete
/* --------------------------------------------------------------- */
#options {
float: right;
width: 145px; /*width must change if icons are added*//*priors, width: 145px; width: 120px;*/
text-align: right;
}
#options ul {
padding-top: 2px;
}
#options ul li {
display: inline;
}
#options a:link,
#options a:visited {
border-right: 1px solid #fbb03b;
padding-right: 5px;
padding-left: 2px;
}
#options a:link.last,
#options a:visited.last {
border-right: none;
padding-left: 3px;
padding-right: 0;
}
/* --------------------------------------------------------------- */
/* #LANGUAGE
links to foreign language pages
Institute site - chinese / french / german / japanese / spanish
Beijing site - chinese / english
Web Tech pages - none
/* --------------------------------------------------------------- */
#language {
}
#language ul {
padding-top: 2px;
}
#language ul li {
display: inline;
}
#language a:link,
#language a:visited {
border-left: 1px solid #fbb03b;
color: #0000ff;
padding-right: 3px;
padding-left: 4px;
}
#language a:link.first,
#language a:visited.first {
border-left: none; /*removes border from first link*/
padding-left: 0px; /*removes most of space to left of first link*/
}
/* *************************************************************** */
/* #BREADCRUMB
trail to the parent page of the current page
not included on SwRI Home
/* *************************************************************** */
#breadcrumb {
margin: 0 auto; /*this centers the div in its outer wrapper*/
width: 980px;
font-size: 11px; /*if needed, font-size: 90%; is close to 11px;*/
padding-top: 4px;/*padding-top differs and margin-top added to SHARE.CSS for instances of share #OPTIONS in #SPECIALINFO*/
clear: both; /*added to address display problem for browsers other than IE for web tech pages*/
}
#breadcrumb a:link,
#breadcrumb a:visited {
color: #000;
}
#breadcrumb a.current { /*not using this option at this time*/
/*color: #c1272d;*/
}
/* *************************************************************** */
/* #CONTENT
div around some or all #PANORAMIC, #SIDEBAR1, #SIDEBAR2, and #MAINCONTENT
/* *************************************************************** */
#content {
margin: 0 auto; /*this centers the div in its outer wrapper*/
width: 980px;
}
#content p.more { /*links to more information*//*color styled through link*/
font-size: 80%;
margin-top: 6px;
padding-top: 4px;
border-top: 1px dotted #0065cd; /*similar to .SEPARATOR-BTM*/
padding-bottom: 0px;
}
#content p.more a:link,
#content p.more a:visited { /*color of links to more information*/
color: #0000ff;
}
#content.vertical-drop {
padding-top: 124px;
/*lines up #SIDEBAR1, #MAINCONTENT, and #SIDEBAR2 with pages containing div IDs prior to #PAGEWRAPPER*//*used for beijing contact submit response page*/
}
/* *************************************************************** */
/* PAGE CONTENTS
styles other than #PANORAMIC found in other style sheets
/* *************************************************************** */
/* --------------------------------------------------------------- */
/* #PANORAMIC
image size 980x160px
border-bottom is added through .BORDER-BTM CLASSES found below
/* --------------------------------------------------------------- */
#panoramic {
height:160px;
margin-bottom: 11px;/*margin-bottom: 21px; on institute-home.css*//*this affects the space between #PANORAMIC and elements below it*/
background-color: #010101;/*this alleviates white spots showing through darkest portion of images as transitions occur in IE when a rotating banner is used*//*#010101 nearly black since warnings in validator*/
}
#panoramic-bkgd-image {
height: 160px;
width: 980px; /*this fixes the text not aligning to the right*/
margin-bottom: 8px;
background-color: white;
clear:both;
background-image: url('/templates/2011/images/image980x160-fade.gif');
display: table-cell; /*from http://htmlcsstutorials.blogspot.com/2009/07/vertical-align-text-in-floating-div.html*/
/*causes problems in browsers other than IE unless margin-left added to h1 below*/
text-align: right;
vertical-align: middle; /*needs to be both here and in H1 below, no longer the case*//*does not work in IE without using a hack*/
}
#panoramic-bkgd-image h1 { /*adding for altfuels comp purposes at this time*/
text-align: right;
margin-left: 550px; /*this is needed to fix problem with table-cell above and break text in IE*//*may be unresolved*/
/*vertical-align: middle;does not work in IE without using a hack*/
}
/* *************************************************************** */
/* #SIGNOFF
generic contact information
not included on SwRI Home
/* *************************************************************** */
#signoff {
margin: 0 auto;/* this centers the div in its outer wrapper */
width: 980px;
padding-top: 4px;
margin-bottom: 10px;
border-top: 1px solid #d1d3d4;
text-align: center;
margin-top: 0;
}
/* *************************************************************** */
/* #FOOTER1
div around #FOOTERMENU1
/* *************************************************************** */
#footer1 {
margin: 0 auto; /*this centers the div in its outer wrapper*/
width: 980px;
padding-top: 12px;
}
#footer1menu { /*div around series of .COL divs for footer navigation*/
font-size: 80%;
font-weight: bold;
}
#footer1menu a,
#footer1menu a:hover {/*this makes the links dark grey*/
color: #464646;
}
#footer1menu ul ul {
font-weight: normal;/*this makes the #FOOTER1 links normal instead of bold like their column heads*/
}
.col {
width: 162px;
float: left;
}
/* *************************************************************** */
/* #FOOTER2
div around #LOGO2, #MISSION, #LEGAL, #BOILERPLATE
/* *************************************************************** */
#footer2 {
margin: 0 auto; /*this centers the div in its outer wrapper*/
width: 980px;
line-height: 100%;
}
#logo2 { /*swri-logo-91x40.gif*/
float: left;
width: 162px;
padding-top:6px;
}
#mission,
#legal,
#boilerplate {
margin-left: 162px;
}
#mission {
font-size: 130%;
color: #0065cd;
padding-top: 4px;
line-height: 110%;
font-style:italic;
}
#legal,
#boilerplate {
font-size: 80%;
}
#legal {
padding-top: 5px;
}
#boilerplate {
padding-top: 8px;
}
/* *************************************************************** */
/* #DATE
div around #DATEWEBBOT
/* *************************************************************** */
#date {
}
#datewebbot {
}
/* *************************************************************** */
/* IMAGES AND PULLQUOTES
determine width using width classes for IMAGES and PULLQUOTES
IE matches other browsers when width is included
references for border-left and border-right -
http://www.hss.edu/why-choose-hss.asp
http://www.sfbr.org/About/milestone_2.aspx
border same as #SIGNOFF
/* *************************************************************** */
.image-w-caption,/*adding for instances where float is not needed*/
.image-rt,
.image-rt-no-border,
.image-lft,
.image-lft-no-border,
.image-ctr,
.pullquote-rt,
.pullquote-lft,
.statement {
font-style: italic;
font-weight: bold;
line-height: 180%;
}
.image-w-caption,/*adding for instances where float is not needed*/
.image-rt,
.image-rt-no-border,
.image-lft,
.image-lft-no-border,
.image-ctr {
color: #464646;
}
.pullquote-rt,
.pullquote-lft,
.statement {
color: #fb8c3b;
font-size: 110%;
}
.image-rt,
.pullquote-rt {
float: right;
margin-top: 12px;
margin-left: 20px;
padding-left: 15px;
border-left: 1px solid #d1d3d4;
}
.image-rt {
margin-bottom: 10px;
}
.pullquote-rt {
margin-bottom: 10px;/*changed in test.css to 2*/
padding-bottom: 8px;/*changed in test.css to 0*/
}
.image-lft,
.pullquote-lft {
float: left;
margin-top: 12px;/*changed in test.css to 4*/
margin-right: 20px;
margin-bottom: 10px;/*changed in test.css to 2*/
padding-right: 15px;
border-right: 1px solid #d1d3d4;
}
.image-lft {
}
.pullquote-lft {
padding-bottom: 8px;/*changed in test.css to 0*/
}
.image-rt-no-border {/*created for Other Research Areas page, may no longer be using*/
float: right;
margin-top: 12px;
margin-left: 20px;
margin-bottom: 10px;
}
.image-lft-no-border {
float: left;
margin-top: 12px;
margin-right: 20px;
margin-bottom: 10px;
}
.image-lft {/*also needs to be applied to -no-border files*/
margin-top: 4px;
margin-bottom: 2px;
}
.image-w-caption {/*adding for instances where float is not needed*/
margin-top: 4px;
margin-right: 20px;
margin-bottom: 2px;
}
.pullquote-rt {
margin-bottom: 2px;
padding-bottom: 0;
}
.pullquote-lft {
margin-top: 4px;
margin-bottom: 2px;
padding-bottom: 0;
}
/*Begin Temporary fix only for http://www.swri.org/4org/d09/avionics/renegade/default.htm*/
.image-rt h2 {
font-style:normal;
}
/*End Temporary fix only for http://www.swri.org/4org/d09/avionics/renegade/default.htm*/
/*ACTION NEEDED*/
/*draw from this to create styles without rules, that then have a class to add a rule*//*compare this approach to .GROUP*//*070113 .GROUP is being phased out of col-01, col-02, and group-catalog css */
/*Inserted by Don @ Jean's request 9-9- 2011 - see: /4org/d10/indeng/workdev/default-new.htm */
.image-ctr {/*does not work with image floated to right as in /4org/d18/mateng/matint/NASGRO/Overview/equation-new.htm*/
margin-top: 12px;
margin-left: auto;
margin-right:auto;
margin-bottom: 10px;
}
/*Begin this drops IMAGE or PULLQUOTE down level with body text when initial cap is used*/
.image-rt.first,
.image-lft.first,/*changed in test.css to 12*/
.image-rt-no-border.first,/*added for div10 syssec-new2.htm*/
.pullquote-rt.first,
.pullquote-lft.first {/*changed in test.css to 12*/
margin-top: 20px;
}
/*End this drops IMAGE or PULLQUOTE down level with body text when initial cap is used*/
/*Begin TS for other research areas image-lft position*/
.image-lft.first,
.pullquote-lft.first {/*also needs to be applied to -no-border files*//*this fixes it*/
margin-top: 10px;
}
/*End TS for other research areas image-lft position*/
img.keyline {
border: 1px solid #d1d3d4;/*same as coloredformfield, and image-rt and image-lft borders*/
}
.statement {/*initial statement following panoramic*/
padding-top: 4px;
margin-bottom: 0px;
padding-bottom: 4px;
}
/*Begin need to determine if this is used*//*if so possibly combine with others*/
.panoramic-caption {/*creating for between #PANORAMIC and #MAINCONENT */
font-style: italic;
line-height: 180%;
font-weight: bold;
color: #464646;
margin-bottom: 20px;
}
/*End need to determine if this is used*/
/* --------------------------------------------------------------- */
/* WIDTH CLASSES
JKF - IMAGES and PULLQUOTES
sample total measure for .IMAGE-LFT WIDTH 150
150(image) + 15(padding-right) +1(border) +20(margin-right) = 186px
DWM - 011312 adding usage to boxed-area on ar page(s), see also boxed-info - THIS INFO IS NOW OUTDATED, BOXED-AREA REPLACED WITH BOXED-INFO FONT-SIZE-MINUS
JKF - 022012 adding usage to DIV area in MediaContacts-new.htm
use with .AUTO-CTR to constrain DIV to a specific width and center it in #MAINCONTENT
/* --------------------------------------------------------------- */
.width-980 {width: 980px;}/*/templates/2011/template-reference-file.htm*/
.width-960 {width: 960px;}/*/templates/2011/working/media-resources.htm*/
.width-876 {width: 876px;}/*/templates/2011/working/media-resources.htm*/
.width-870 {width: 870px;}/*/templates/2011/working/media-resources.htm*/
.width-860 {width: 860px;}/*/templates/2011/working/media-resources.htm*/
.width-800 {width: 800px;}/*/templates/2011/working/media-resources.htm*/
.width-790 {width: 790px;}/*/templates/2011/working/media-resources.htm*/
.width-780 {width: 780px;}/*/templates/2011/working/media-resources.htm*/
.width-730, .width-partial {width: 730px;}/*use .WIDTH-PARTIAL for 1 column layouts that contrain #MAINCONTENT to center 730 pixels 121712*/
.width-728 {width: 728px;}/*031213 http://www.swri.org/templates/2011/work-needed-more/c2-img-group-hzt-exact.htm*/
.width-720 {width: 720px;}/*070912 added for four images with caption-navs*//*031113 width of VidClip Brightcove video, not needed*//*http://swri.org/7biz/offsite/default.htm*/
.width-710 {width: 710px;}/*043012 ADDED for IMAGE-GROUP and IMAGE-INLINE application from COL-02-GROUPED-IMAGES.HTM to BRO-FLYER-TEMPLATE-CONTINUED.HTM*/
.width-705 {width: 705px;}/*071513 /templates/2011/working/media-up-to-980.htm*/
.width-700 {width: 700px;}/*022012 adding for use on MediaContacts-new.htm*//*use with .AUTO-CTR*/
.width-690 {width: 690px;}/*030513 adding for use on consortia.htm*//*use with .AUTO-CTR*/
.width-680 {width: 680px;}/*031513 adding for use on consortia.htm*//*use with .AUTO-CTR*/
.width-675 {width: 675px;}/*071513 /templates/2011/working/media-up-to-980.htm*/
.width-660 {width: 660px;}/*043012 ADDED for IMAGE-GROUP and IMAGE-INLINE application from COL-02-GROUPED-IMAGES.HTM to BRO-FLYER-TEMPLATE-CONTINUED.HTM*/
.width-650 {width: 650px;}/*120913 ADDED for mars-measurement.HTM*/
.width-640 {width: 640px;}/*012313 ADDED for VIDEO-HTML-DEPAINT.HTM*/
.width-630 {width: 630px;}/*032613 for beijing flow chart on business page*/
.width-600 {width: 600px;}/*060112 ADDED for TABLE.HTM*/
.width-585 {width: 585px;}/*042712 ADDED for IMAGE-GROUP and IMAGE-INLINE testing on COL-02-GROUPED-IMAGES.HTM*/
.width-576 {width: 576px;}/*081513 DMOORE*/
.width-560 {width: 560px;}/*012313 ADDED for VIDEO-HTML-HEDGE-III.HTM*/
.width-550 {width: 550px;}/*022912 CREATED FOR TABLE ON /4org/d10/comm/commeng/cots.htm*/
.width-544 {width: 544px;}/*030713 adding for use on http://www.swri.org/templates/2011/work-needed-more/c2-img-group-hzt.htm*//*use with .AUTO-CTR*/
.width-540 {width: 540px;}/*031513 http://www.swri.org/templates/2011/work-needed-more/c2-img-group-hzt-percent_exactConversion.htm*//*use with .AUTO-CTR*/
.width-520 {width: 520px;}/*101413 http://swri.org/4org/d01/fire/listlab/listprod/marine-new.asp?*/
.width-510 {width: 510px;}/*031513 http://www.swri.org/templates/2011/work-needed-more/c2-img-group-hzt-percent_exactConversion.htm*//*use with .AUTO-CTR*/
.width-500 {width: 500px;}/*030712 also using on HR Send Job to a Friend*//*use with .AUTO-CTR*/
.width-494 {width: 494px;}/*041612 added for brochure page centered image in text flow*//*use with .AUTO-CTR*//*used to replace .BODY-TEXT on http://swri.org/!reference/jfox/3pubs/brochure/flyer-template/RegularBackups/flyer-template-494px.htm*/
.width-486 {width: 486px;}/*072513 /templates/2011/working/media-partial_copy(1).htm*/
.width-480 {width: 480px;}/*standard Brightcove video width, not needed*/
.width-474 {width: 474px;}/*041812 added for brochure and flyer template page left image in text flow, maximum width allowed*/
.width-465 {width: 465px;}/*040312 ADDED FOR BROCHURE PAGE, 3PUBS-BROCHURE-D64-HOME-NEW*/
.width-450 {width: 450px;}
.width-444 {width: 444px;}/*082713 /templates/2011/working/c2-row2col-image-rt/c2-row-2col-image-rt-250.htm*/
.width-440 {width: 440px;}/*050212 added for testing max width for bro-flyer-template-vertical*/
.width-436 {width: 436px;}
.width-435 {width: 435px;}/*040312 ADDED FOR BROCHURE PAGE, 3PUBS-BROCHURE-D64-HOME-NEW*/
.width-430 {width: 430px;}/*050212 added for testing max width for bro-flyer-template-vertical*/
.width-425 {width: 425px;}/*050212 added for testing max width for bro-flyer-template-vertical*/
.width-424 {width: 424px;}/*050212 added for testing max width for bro-flyer-template-vertical*/
.width-420 {width: 420px;}/*050212 added for testing max width for bro-flyer-template-vertical*/
.width-408 {width: 408px;}/*031513*/
.width-400 {width: 400px;}/*120211 ADDED FROM WEB TECH STYLE SHEET*/
.width-394 {width: 394px;}/*082213 ADDED for confining ROW with 2 columns with IMAGE-RT on /4org/d15/spacsci/SpacSupt/pims/default.htm*/
.width-390 {width: 390px;}/*042712 ADDED for IMAGE-GROUP and IMAGE-INLINE testing on COL-02-GROUPED-IMAGES.HTM*/
.width-380 {width: 380px;}/*011312 Annual Report pages*/
.width-365 {width: 365px;}/*011312 testing for D15HOME-NEW.HTM applied to P tag list of contacts along with .FLOATRIGHT*/
.width-362 {width: 362px;}/*010313 created for horizontal Annual Report cover on 2012 arhome.htm*/
.width-350 {width: 350px;}
.width-345 {width: 345px;}/*071513 /templates/2011/working/media-up-to-980.htm*/
.width-340 {width: 340px;}/*022812 CREATED FOR TABLE.CSS AND TABLE-COL-02.HTM*/
.width-325 {width: 325px;}/*071513 /templates/2011/working/media-up-to-980.htm*/
.width-324 {width: 324px;}/*032613 Beijing*/
.width-320 {width: 320px;}/*01112012 ADDED FOR ANNUAL REPORT PAGES - dwm*/
.width-300 {width: 300px;}/*120211 ALSO IN WEB TECH STYLE SHEET*/
.width-295 {width: 295px;}/*090412 ADDED FOR NASGRO TRAINING PAGE*/
.width-290 {width: 290px;}/*081313 ADDED FOR DMOORE*/
.width-270 {width: 270px;}/*031513 FOR http://www.swri.org/templates/2011/work-needed-more/c2-img-group-hzt-percent.htm*/
.width-260 {width: 260px;}/*072712 CREATED FOR PUBSNET*/
.width-259 {width: 259px;}/*091313 http://swri.org/3pubs/ttoday/disclaim.htm*/
.width-254 {width: 254px;}/*072613 /templates/2011/working/media-resources.htm*/
.width-252 {width: 252px;}/*071213 http://www.swri.org/templates/2011/working/c2-img-group-hzt-exact.htm and http://www.swri.org/staging/ae/usgr.htm*/
.width-250 {width: 250px;}
.width-248 {width: 248px;}/*071213 http://www.swri.org/templates/2011/working/c2-img-group-hzt-exact.htm and http://www.swri.org/staging/ae/usgr.htm*/
.width-240 {width: 240px;}
.width-230 {width: 230px;}
.width-227 {width: 227px;}/*032613 Beijing flow chart on business page*/
.width-225 {width: 225px;}
.width-224 {width: 224px;}
.width-223 {width: 223px;}/*030513 adding for use on consortia.htm*//*use with .AUTO-CTR*/
.width-222 {width: 222px;}
.width-220 {width: 220px;}
.width-210 {width: 210px;}/*080613 for http://pubsnet.swri.edu/graphic-design-illustration/flyer-design/index_jkf.asp*/
.width-206 {width: 206px;}/*030513 adding for use on consortia.htm*//*use with .AUTO-CTR*/
.width-200 {width: 200px;}
.width-190 {width: 190px;}/*061812 made while developing NAV-CAPTION*/
.width-185 {width: 185px;}/*061212 created to ts AWs AE dropdown*/
.width-183 {width: 183px;}/*030713 adding for use on http://www.swri.org/templates/2011/work-needed-more/c2-img-group-hzt.htm*//*use with .AUTO-CTR*/
.width-182 {width: 182px;}/*030713 adding for use on http://www.swri.org/templates/2011/work-needed-more/c2-img-group-hzt.htm*//*use with .AUTO-CTR*/
.width-177 {width: 177px;}/*032613 Beijing*/
.width-175 {width: 175px;}/*120211 ALSO IN WEB TECH STYLE SHEET*/
.width-170 {width: 170px;}
.width-168 {width: 168px;}/*010313 created for horizontal Annual Report cover on pubshome.htm*/
.width-164 {width: 164px;}/*011014 AE*/
.width-163 {width: 163px;}/*030713 adding for use on http://www.swri.org/templates/2011/work-needed-more/c2-img-group-hzt.htm*//*use with .AUTO-CTR*/
.width-162 {width: 162px;}/*030713 adding for use on http://www.swri.org/templates/2011/work-needed-more/c2-img-group-hzt.htm*//*use with .AUTO-CTR*/
.width-160 {width: 160px;}/*071612 created for caption-nav for four images*/
.width-155 {width: 155px;}
.width-150 {width: 150px;}
.width-145 {width: 145px;}/*030713 adding for use on http://www.swri.org/templates/2011/work-needed-more/c2-img-group-hzt.htm*//*use with .AUTO-CTR*/
.width-139 {width: 139px;}/*Beijing*/
.width-130 {width: 130px;}/*COL-01-PUBLICATIONS.HTM*/
.width-116 {width: 116px;}/*030713 adding for use on http://www.swri.org/templates/2011/work-needed-more/c2-img-group-hzt.htm*//*use with .AUTO-CTR*/
.width-102 {width: 102px;}/*Div 10 comp video images*/
.width-100 {width: 100px;}
.width-73 {width: 73px;}/*032613 for Beijing flow chart on business page*/
.width-60 {width: 60px;}/*072613 /EMS/ISO14001-new.htm*/
.width-59 {width: 59px;}/*12091313 /4org/d01/fire/listlab/listprod/director.htm*/
.width-20 {width: 20px;}/*032613 for Beijing flow chart on business page*/
/*Begin version with pc as opposed to pct moved to depricate.css, no instances found in searches*/
.width-100pct {width: 100%;}
.width-25pct {width: 25%;}
.width-20pct {width: 20%;}
.width-90pct {width: 90%;}
.width-22pct {width: 22%;}
.width-24pct {width: 24%;}
/*video widths*/
.width-1280 {width: 1280px;}
.width-1180 {width: 1180px;}
.width-1080 {width: 1080px;}
/* --------------------------------------------------------------- */
/* HEIGHT CLASSES
used in altfuels to determine depth of panoramic-bkgd-image
/* --------------------------------------------------------------- */
.height-150 {height: 150px;}/*used in altfuels to determine depth of panoramic-bkgd-image*/
.height-365 {height: 365px;}/*used in HR Return Seeker Thank You to include full background image*/
.height-75 {height: 75px;}/*used in http://swri.org/4org/d01/fire/listlab/listprod/director.htm to define depth of entries with IMAGE-LFT and H2*/
/* --------------------------------------------------------------- */
/* BORDER-BTM CLASSES
style, width, color
build color classes for border-btm as needed and place in individual project style sheet
see SAMPLES.CSS for example
/* --------------------------------------------------------------- */
img.border-btm { /*generic blue*//*used on templates, rd-services, and eng-vehicle pages*/
border-bottom: 6px solid #0071bc;
}
img.border-btm.sample { /*changes color of border to black for sample purposes on templates*/
border-color: #000000;
}
#panoramic-bkgd-image.border-btm { /*generic blue*//*used on templates, rd-services, and eng-vehicle pages*/
border-bottom: 6px solid #0071bc;
}
/* --------------------------------------------------------------- */
/* KEYLINE CLASSES - img.keyline style is also on line 725
/* --------------------------------------------------------------- */
img.keyline {
border: 1px solid #d1d3d4;
}
img.keyline.white {
border-color: white;
}
/* --------------------------------------------------------------- */
/* MISC IMAGE CLASSES - some possibly not being used - 012014 SEE NEW PLUS## STYLES
/* --------------------------------------------------------------- */
img.space-h1 { /*use when IMAGE is below H1 .BORDER-BOTTOM*//*see rd-services.htm*//*plan to replace with ADJACENT SIBLING SELECTOR*//*see TEST.CSS*/
margin-top: 14px;
}
img.space-p {/*use when IMAGE is below P*//*see eng.vehicle.htm, fuels-lubes.htm, geosciences.htm etc*//*plan to replace with ADJACENT SIBLING SELECTOR*//*see TEST.CSS*//*080813 ended up removing from http://www.swri.org/templates/2011/work-needed-some/c2-ex-img-btm.htm not sure why*/
margin-top: 18px;
}
img.space-ul {/*use when IMAGE is below UL*//*not used yet, need to determine increment*//*plan to replace with ADJACENT SIBLING SELECTOR*//*see TEST.CSS*/
margin-top: 14px;
}
.image-rt img.space-p {/*THIS IS GOOD AND WE LIKE IT*//*USING THIS
NEEDS TO BE REMOVED FROM CODING BETWEEN .IMAGE-RT P AND IMAGE BELOW IT*//*120211 JKF*/
margin-top: 15px;
}/*need to address when p tag has a click span, see NetCent.htm line 128*//*existence of a comment makes a difference in IE*/
/* *************************************************************** */
/* MISC CLASSES
/* *************************************************************** */
/*used on institute home and signoff include*//*updated use of .BOLD to .SPAN on home page 111511*//*as of 011212 need to fix this*/
/*ON HOME, SHOULD PROBABLY BE USING STRONG TAG INSTEAD*/
/*ON SIGNOFF, POSSIBLY CREATE SPECIFICS FOR H4*/
/*reference sitepoint Build Your Own Website..., pg 98*/
/*if only presentational/stylistic use and as inline styles in the code*//*use for Technology Today*/
/*if both presentational/stylistic and semantic use and as inline styles in the code*//*translate as strong and emphasize by screen reader*/
.bold {/*should be using or *//*keep for phase out process*/
font-weight: bold;
}
.italic {/*still need to fix on div etc pages*//*division include files div-pubs.asp, dpt-pubs.asp and done, need to do deeper levels*//*should be using or *//*keep for phase out process*/
font-style:italic;
}
.initialcap {/*source Designing CSS Web Pages by Christopher Schmitt page 309*/
font-size: 250%;
font-weight: normal;
color: #c1272d;
line-height: 100%;
}
.section { /*orange large dotted border above section*/
border-top: 4px dotted #fbb03b;
}
.section-btm {/*added for HR left column*/
border-bottom: 4px dotted #ecb744;
padding-bottom:4px; /*adding this changed all browsers except IE*/
padding-top: 5px; /*padding produces more consistent results between IE and other browsers than margin*/
}
.clearboth {
clear: both;
}
.clearright {
clear: right;
}
.clearleft {
clear: left;
}
.clearnone {
clear: none;
}
.floatright {
float: right;
}
.floatleft {
float: left;
}
.hide {/*this hides both the space the element would ordinarily take up and its contents*//*best not to use*/
display: none;
}
.invisible {/*see beijing HEADER.ASP*//*this retains the space the element would ordinarily take up, but contents remain invisible*/
visibility: hidden;
}
.center {/*121411 added to center image-rt captions when appropriate*//*used to center image in /4org/d18/mateng/matint/NASGRO/Overview/equation-new.htm, .image-ctr did not work*//*022813 used in vault*//*033012 see also .txt-ctr in association with tables only in table.css*/
text-align:center;
}
/* --------------------------------------------------------------- */
/*unused as of 4-14-11*/
.separator-tp { /*horizontal small dotted rule above*//*see also #content p.more*//*possibly used in #NEWS asp file*/
border-top: #0065cd dotted 1px;
padding-top: 10px;
}
.bracketed-small { /*SwRI News and Announcements article title dates*//*do not think using, see also small (d09-new) and linkdesc and news-date*/
font-style: italic;
font-size: 70%;
color: #464646;
}
.caption-rt {/*may have used as option for image with caption on rd-services page*//*unused as of 041411 but may derrive from*/
float: right;
margin-top: 12px;
margin-left: 20px;
padding-left: 15px;
border-left: 1px solid #d1d3d4;/*SAME AS SIGNOFF*//*see http://www.hss.edu/why-choose-hss.asp AND bimedical foundation site http://www.sfbr.org/About/milestone_2.aspx*/
margin-bottom: 10px;
width: 150px;
font-size: 110%;
padding-bottom: 8px;
line-height: 180%;
}
.caption-rt.first {
margin-top: 20px;
}
/*CONSIDERED STYLES FROM rebuild.css FOR main-image-small IN TEST/JFOX/LAYOUT FOLDER*//*DECIDED NOT TO GO WITH THIS APPROACH*/
.main-image-small { /* from http://www.uiw.edu/Templates/international%20japanese.dwt *//* in my file, image fills space differently in different browsers */
margin-bottom: 15px;
margin-left: 15px;
width: 250px;
float: right; /*may want to create main-image-small-rt and lft or create a class for right and left instead*/
}
.main-image-large .caption,
.main-image-small .caption { /* from http://www.uiw.edu/Templates/international%20japanese.dwt */
padding-top: 5px;
padding-bottom: 5px;
/* background-attachment: scroll; is this necessary *//* The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page. http://www.w3schools.com/css/pr_background-attachment.asp */
/*background-repeat: repeat; don't know why this is here */
/*background-image: none; don't know why this is here */
/*background-position: 0% 0%; don't know what this is */
/* background-color: #ffffff; is this necessary - may decide to reinstate */
font-size: 85%;
font-style: italic;
color: #464646;
line-height: 180%;
}
/*PULLED FROM STYLE01 AND ADJUSTED NAMES*//*USED WITH BEIJING IMAGE ON CONSULTING PAGE Wimage*//*PULLED FROM THIS APPROACH FOR ONE BELOW*/
/*IMPORTANT NOT USING THESE STYLES*/
.image-rt-wcaption {
float: right;
margin-left: 20px;
/*border-left: 1px solid #d1d3d4;not using, see bimedical foundation site http://www.sfbr.org/About/milestone_2.aspx*/
margin-bottom: 10px;
}
.image-rt-wcaption.first {
margin-top: 20px;
}
.image-lft-wcaption {
float: left;
margin-right: 20px;
/*border-right: 1px solid #d1d3d4;not using, see bimedical foundation site http://www.sfbr.org/About/milestone_2.aspx*/
margin-bottom: 10px;
}
.image-lft-with-caption.first {
margin-top: 20px;
}
.image-rt-wcaption, .image-lft-wcaption p {/* see also #sidebar1pic-btm p line 84*//*ACTION NEEDED this does not look correct*/
font-style: italic;
}
/* --------------------------------------------------------------- */
.note-to-client {
color: red;
text-transform: uppercase;
font-style:italic;
}
.note {/*for NOTES: in C20-TABLE.HTM*/
font-style:italic;
}
.small {/*small span not working so creating a span class*//*d09-new.htm*//*used in left sb1 image with click to enlarged view*//*NEEDS TO BE ADDRESSED*/
font-size:80%;/*determine where this is used and possibly chang to 75%*//*using as span class /4org/d08/beijing-office/rd-services/consortia.htm *//*changed to .CLICK*/
}
.credit,
.click {/*CLASS for Click image for enlarged view and Photo credit line*//*creating both so .CLICK can be hidden in PRINT.CSS but .CREDIT not*//*see also styles for #MAINCONTENT .IMAGE-GROUP .CREDIT and #MAINCONTENT .IMAGE-GROUP .CLICK*/
font-size:80%;
line-height: 120%;/*if exact pixel measure used, line-height does not increase when font size enlarged via browser*/
font-weight: normal;
/*font-style:italic;*/
}
#sidebar1 p.download {/*created in event .DOWNLOAD link needed for #SIDEBAR1, as counterpart to *//*see also #MAINCONTENT .IMAGE-CTR P.DOWNLOAD and #MAINCONTENT .IMAGE-GROUP P.DOWNLOAD*//* potential page /4org/d08/beijing-office/rd-services/consortia.htm*/
/*font-style: normal;
text-align:center;*/
}
/*Begin replacing with .CLICK*//*remove once sure not using on other pages*//*checked all div09 and div10 pages*/
.image-rt .small {
}
/*End replacing with .CLICK*/
.toprule {
border-top: #fbb03b dotted 2px; /*color style width*//*orange*/
padding-top: 8px;
}
.row.toprule {/*080713 creating for /templates/2011/work-needed-some/c2-contact-info.htm*//*specifics for .row with .toprule*/
/*border-top: #fbb03b dotted 2px; color style width*//*orange*/
padding-top: 4px;
margin-top: 4px;
}
.return-to-top {/*using on HR Careers site*//*used on Beijing FAQ.HTM with different symbol, adjust symbol at later date*/
font-size:70%;
}
.return-to-top .pointer,/*using on HR Careers site*/
.return-to-top-cntr .pointer {/*adding for CMS pages for test*//*phase out -cntr version*/
font-size:200%;
color:#fbb03b;
}
.return-to-top-cntr {/*was using on CMS ASP pages*//*removed -cntr and used return-to-top along with center class*//*phase out*/
font-size:70%;
text-align:center;
}
.return-to-top-cntr img {/*using on CMS ASP pages*//*121712 possibly not using anymore, changed to symbol as in HR default*//*phase out*/
margin-bottom:4px;/*either margin or padding work*/
}
#office-identifier {
background-color:gray;
}
#office-identifier h1 {/*validation warning since same color as .boxed-info background-color and body*//*need to determine what #office-identifier is*/
color:#ffffff;
text-align:center;
}
.linkdesc { /* smaller size for [PDF] - small tag not working */
font-size: 70%;
font-weight: normal;/*added for sake of instances TABLE.CSS TH*/
}
/* --------------------------------------------------------------- */
/* .ROW
div to contain individual column divs for #MAINCONTENT
.ROW fills varying widths depending on associated style sheet (COL-01, COL-02, COL-03)
used for organization purpose
042913 in case of http://www.swri.org/3pubs/toc-new-template.htm, .ROW used without all contents being in individual column divs
120913 similar build without .ROW but with DIV with height CLASS applied http://swri.org/4org/d01/fire/listlab/listprod/director.htm after toc-new-template
080713 see also .ROW.TOPRULE
/* --------------------------------------------------------------- */
.row {
height:100%;/*this makes the div area visible in IE when a background-color is applied*//*also needed for space below row in IE*/
}
/*Begin ADJACENT SIBLING SELECTORS*/
/*http://reference.sitepoint.com/css/adjacentsiblingselector*/
/*http://www.w3.org/TR/CSS2/selector.html#child-selectors*/
/*http://meyerweb.com/eric/articles/webrev/200007a.html */
/*NOTE: this selector fails if a comment appears between the combinator and the simple selector that follows it*/
#maincontent h1 + div + ul {/*this adds margin above a UL that immediately follows a DIV (with image) that immediately follows an H1 all with the parent #MAINCONTENT*//*120111*/
margin-top:20px;
}
#maincontent p + img {/*use when IMAGE is below P*//*see eng.vehicle.htm, fuels-lubes.htm, geosciences.htm etc*//*101011 THIS NEEDS ADJUSTING IF MARGIN ADDED TO P TAG*//*applied to about-swri.asp*//*120111*/
margin-top: 10px;
}
/* *************************************************************** */
/* CAREERS
these styles are pulled directly from INSITITUTE-HOME.CSS for use on pages other than DEFAULT.HTM that also utilize the CAREERS BUTTON
styles moved to INSTITUTE.CSS since used on more that just the home
if this works, need to make note in both files that duplicate styles exist
/* *************************************************************** */
#careers h2 {
margin-top: 1px;/*adds additional space between #CAREERS box and .SECTION border-top above it*/
}
#careers {
position: relative; /*this allows a to be absolutely positioned in #CAREERS*/
}
#careers a { /*rules need to be in a to retain section orange dotted border*//*NOTE location*/
width:212px; /*width: 218px; minus 6px*/
border: 1px solid #d1d3d4;
margin-top: 2px; /*distance between #CAREERS box and orange dotted rule of .SECTION border-top*/
background: url('/images/2011/careers.gif') repeat-x right bottom;/*background appearance of button*/
position: absolute;
line-height: 140%;
padding: 6px 0px 6px 6px; /*text-indent also indents box in IE, use padding-left instead*/
color: #000;
}
#careers a:hover {/*background appearance of button when rolled over*/ /*NOTE location*/
background: url('/images/2011/careers-hover.gif') repeat-x left top;
color: #000;
}
.principal {/*D15HOME-NEW.HTM for long list of principal contacts*//*possibly combine other associated classes with this rule, float and width*/
/*margin-top:-8px;*//*this is necessary if placed in separate DIVS*/
font-style:italic;
}
.footnote {/*for TOC.HTM - Download a printable copy of the Spring 2011 Technology Today [PDF]*//*/3pubs/ttoday/spring11/toc-new.htm*/
font-style:italic;
padding-top:16px;
}
.auto-ctr {/*for MediaContacts-new.htm page, also to serve other purposes of centering*/
margin-right:auto;
margin-left:auto;
}
/*Begin styles for highlighting code on a page, use CODE TAG to depict code on a page*/
.highlight-01 {/*using in vault with span for errors and required fields*/
color:red;
}
.highlight-02 {
color:green;
}
.highlight-03 {
color:blue;/*for template instruction navigation*//*subject to change due to closeness to hyperlink color*/
}
.highlight-04 {/*deep red, created for DM*/
color:#800000;
}
/*End NEW styles for depicting coding on a page*/
/*Begin style for print purposes*//*for MEMS brochure comp*/
.show-on-print {/*this information is revealed only when going to print*//*see PRINT.CSS*//*reveals the information for PRINT MEDIA only*/
display:none;
}
/*End style for print purposes*/
.boxed-info { /*medium grey keyline*//*same keyline as formfield, coloredformfield, and unit-02*//*use with WIDTH CLASS if width confinement needed*/
-moz-border-radius: 15px; /* for Firefox */
-webkit-border-radius: 15px; /* for Chrome/Safari */
-khtml-border-radius: 15px; /* for older Konquerer browsers */
border-radius: 15px; /* future-proofing for whenever browsers properly support this attribute */
background-color: #ffffff;/*043012 validation warning since same color as #office-identifier h1*/
border: 1px solid #d1d3d4;/*same as coloredformfield*/
padding: 10px;
font-size:100%;
font-style:italic;
}
/*Begin background style options for .BOXED-INFO*/
.boxed-info.style-01 { /*same appearance as .BOXED-INFO without .STYLE-01*//*medium grey keyline*//*same keyline as formfield, coloredformfield, and unit-02*/
background-color: #ffffff;
border: 1px solid #d1d3d4;/*same as coloredformfield*/
}
.boxed-info.style-02 {/*same as .UNIT-02 as found in SIDEBAR.CSS*//*same as formbox and coloredformfield*/
background-color: #f7f8f9;
}
.boxed-info.style-03 {/*same as .UNIT-03 as found in SIDEBAR.CSS*/
background-color: #faeedb;
border: 1px solid #fdc265;
}
/*End background style options for .BOXED-INFO*/
/*Begin other .BOXED-INFO styles*/
.font-style-normal {/*081613 created to counteract italic display of .BOXED-INFO, use EM TAG as opposed to I TAG if italic needed in instances of .BOXED-INFO FONT-STYLE-NORMAL*/
font-style: normal;
}
.font-size-minus {/*081613 created to enable using .BOXED-INFO instead of .BOXED-AREA for Annual Report page(s)*//*works in all browsers, matches perfectly*/
font-size:75%;
}
/*End other .BOXED-INFO styles*/
/*Begin .IMAGE-GROUP, .IMAGE-INLINE, and .MEDIA-CONTENT styles*/
/*some styles specific to News Release Media Resources pages /templates/2011/working/media-resources.htm*/
.image-group,
.media-content .image-ctr {/*margin: 0 auto; would center the DIV in its outer wrapper*//*auto-ctr added to code instead on individual DIV to enable default of left if needed*/
margin-top: 20px;
}
#maincontent .image-group h3 {/*may need to add .MEDIA-CONTENT .IMAGE-CTR as in prior*//*no longer using h3 on media page*//*using on .IMAGE-GROUP template with no association to media*/
font-weight: normal;
padding: 4px 0 16px 0;
text-align: center;
}
#maincontent .image-group p {/*this styles P tag for .IMAGE-GROUP the same as P tag IMAGE-RT etc*//*#MAINCONTENT needed for AE navigation */
font-style: italic;
font-weight: bold;
line-height: 180%;
color: #464646;
text-align:left;
}
#maincontent .media-content .image-group p {/**/
font-weight: normal;
font-style: normal;
color:#000000;
}
#maincontent .image-group p.credit,
#maincontent .image-group p.click {/*CLASS for Click image for enlarged view and Photo credit line*//*creating both so .CLICK can be hidden in PRINT.CSS but .CREDIT not*//*see also styles for .CREDIT and .CLICK*/
line-height: 120%;
font-weight: normal;
font-style:italic;
}
.media-content {
border-top: 1px solid #d1d3d4;
padding-top: 2px;
padding-bottom:12px;
clear: both;/*needed for some print instances in IE*//*some instances of P CLEARBOTH also needed in code*/
}
.media-content.first {
border-top: none;
}
#maincontent .image-ctr p.download,/*may also need to create for other .IMAGE- styles*//*there are other instances of download that are not using .DOWNLOAD*/
#maincontent .image-group p.download {/*this counteracts rules established in #MAINCONTENT .IMAGE-GROUP P for dowload*//*see also GENERIC DOWNLOAD STYLE for #SIDEBAR1 not in use yet*//*see also #SIDEBAR1 P.DOWNLOAD*/
font-weight: normal;
font-style: normal;
text-align:center;
}
.image-inline {
display:inline;
float: left;
margin-right:10px;
margin-left:10px;
text-align: center;/*this centers graphic regardless if it is the same width of image-inline width class or not*//*it also causes other text items to center*/
}
.image-inline ul li {
text-align:left;/*this negates text-align: center; from .IMAGE-INLINE so UL LI TAGs are left on nav-captions /staging/ae/default.htm and /templates/2011/c2-caption-nav.htm*/
}
.image-inline.left {
text-align: left;
}
.image-inline.center {
text-align: center;
}
.image-inline.right {
text-align: right;/*initially for Beijing flow chart on business page but no longer */
}
.image-group.stack {
margin-top: 0;/*for image-groups stacked*//*/4org/d08/beijing-office/rd-services/consortia.htm*//*/4org/d08/beijing-office/about-swri/business.htm*/
}
/*Begin added 032713 for Beijing business.htm page with flow chart*//*see TEXT-INLINE-2.CSS in !reference for working file*/
.text-inline img {
float: right;/*this floats the image to the right of the P TAG*/
}
.text-inline p {
margin-left:14px; /*this indents the P TAG for the purpose of the Beijing Business.htm page, may need to be specific to it*//*COMPARE TO .INDENT-50 073113*/
}
/*End added 032713 for Beijing business.htm page with flow chart*/
.no-break {white-space:nowrap;}/*SPAN CLASS to be used in cases like a phone number that breaks at the end of a line on either the space after the paren or on the hyphen*//*nowrap prevents an element from line-breaking*/
/* --------------------------------------------------------------- */
/* .RIBBON-ITEM
icon depicting the label with text, such as "NEW!" publication
see also COL-01.CSS .NEW-ITEM associated with .TILE-ROW-OF-5
/* --------------------------------------------------------------- */
.ribbon-item-01 {/*interim catalog pages http://www.swri.org/3pubs/brochure/d01/d01home-new.htm*/
background-color: #FF0000;
color: #FFFFFF;
font-size: 75%;
font-weight:bold;
margin-left:1em;
padding:1px 5px 1px 5px;
}
.ribbon-item-02 {/*interim catalog pages http://www.swri.org/3pubs/brochure/d01/d01home-new.htm*/
background-color:#009933;
color: #FFFFFF;
font-size: 75%;
font-weight:bold;
margin-left:1em;
padding:1px 5px 1px 5px;
}
.ribbon-item-03 {/*interim catalog pages http://www.swri.org/3pubs/brochure/d01/d01home-new.htm*/
background-color:#0000ff;
color: #FFFFFF;
font-size: 75%;
font-weight:bold;
margin-left:1em;
padding:1px 5px 1px 5px;
}
/*Begin SHADOW styles*//*use care in application of this style, the established look of most images on the site are flat with no shadow*/
/*see also .NEW-ITEM*/
.shadow-01 {/*http://css3gen.com/box-shadow/*//*created for /vidclip/vidclip-new.htm*//*added rules to .TILE.VIDCLIP IMG TAG instead and keeping class for individual use*/
-webkit-box-shadow: 2px 2px 6px rgba(50, 50, 50, 0.67);
-moz-box-shadow: 2px 2px 6px rgba(50, 50, 50, 0.67);
box-shadow: 2px 2px 6px rgba(50, 50, 50, 0.67);
}
/*End SHADOW styles*/
/*Begin styles used in FAQs page for Beijing site*/
#question {
margin-bottom: 10px;
font-style: italic;
}
#question ul {
list-style-type: decimal;
}
#answer ul{
font-style: italic;
list-style-type: decimal;
}
#answer ul li ul li{
font-style: normal;
list-style-type: none;
}
#maincontent #answer ul li ul li ul li{ /*making more specific in case #MAINCONTENT UL LI UL LI UL LI is designated differently*/
list-style-type: square;
margin-left: 25px;
}
/*End styles used in FAQs page for Beijing site*/
/*creating for development of brightcove video layout*/
.videocontent {
padding-top:24px;
text-align:center;
}
.videocontent p.return-to-source,
p.return-to-source {/* /templates/2011/working/media-partial-caption-partial.htm and /templates/2011/working/media-up-to-980-caption-partial.htm*/
padding-top:12px;
}
/*Begin for /EMS/ISO14001.htm*//*used to indent sections of page*/
.indent-50 {
margin-left:50px;
}
/*End for /EMS/ISO14001.htm*//*used to indent sections of page*/
/*Begin transferring generic styles from col-02-new-institute-styles, once complete implement same with those found in col-01.css*/
/* --------------------------------------------------------------- */
/* .FRAME and .TILE generic styles
.FRAME to fill #MAINCONTENT's width for .TILE widths to work (COL-01 980px / COL-01 PARTIAL 730px/ COL-02 730px)
specific styles located in COL-01.CSS/COL-02.CSS
a height measurement specific to content needs creation of CLASS, confer with jfox
/* --------------------------------------------------------------- */
#maincontent .frame { /* the single column that contains a number of TILEs across and however many down */
margin-top: 20px;
text-align: center;
/*fixed font-size determined in specific classes since enlarged font would extend beyond depth of .TILE*//*restricts in IE and Chrome, not in Safari and Firefox, Opera undetermined*/
/*line-height moved to specific classes*/
}
#maincontent .frame img {
}
#maincontent .frame h3 {/*ID needed for font-weight to take affect*/
/*font-weight:normal;*//*only need if bold not desired*/
/*padding moved to specific classes*/
}
#maincontent .frame p {/*contact name, not using on VIDCLIP pages*//*if used, may need to make specific to each .BROCHURE and .VIDCLIP*/
margin-top: 0px;
padding-top:4px;
}
.tile {
display: inline;
float: left;
position:relative;/*enables NEW-ITEM-60x60.PNG to be absolutely positioned inside of .TILE*/
}
.tile.brochure {/*specific height for /3pubs/brochure/view-brochure.htm*/
height: 250px;
}
.tile.vidclip {/*specific height for /vidclip/vidclip-new.htm*/
height: 125px;
}
#maincontent .frame .tile.brochure h3 {
padding:8px 8px 0 8px;
font-size: 11px;
line-height: 130%;/*this tightens the leading for brochure H3s*/
}
#maincontent .frame .tile.brochure p {
font-size: 11px;
line-height: 130%;/*this tightens the leading for brochure P TAGs*/
}
#maincontent .frame .tile.vidclip h3 {/*style name needs to be more specific for margin rules*//*others work as .TILE.VIDCLIP H3*/
padding:4px 16px 0 16px;
font-size: 10px;
margin: 0px 6px 4px 6px;
line-height: 100%;/*this tightens the leading for vidclip H3s*/
}
/* --------------------------------------------------------------- */
/* CSS SHADOW
http://css3gen.com/box-shadow/
.TILE.TRIFOLD IMG is not necessary
see also removal of CSS SHADOW from .NEW-ITEM
see also .SHADOW-O1
/* --------------------------------------------------------------- */
.tile.brochure img,
.tile.vidclip img {
-webkit-box-shadow: 2px 2px 6px rgba(50, 50, 50, 0.67);
-moz-box-shadow: 2px 2px 6px rgba(50, 50, 50, 0.67);
box-shadow: 2px 2px 6px rgba(50, 50, 50, 0.67);
}
/* --------------------------------------------------------------- */
/* .NEW-ITEM generic styles used with .FRAME and .TILE
utilizes NEW-ITEM-60X60.PNG
horizontal position located in COL-01.CSS and COL.-02.CSS
see also .RIBBON-ITEM
/* --------------------------------------------------------------- */
.new-item {
position:absolute; /*enables NEW-ITEM-60x60.PNG to be absolutely positioned*/
}
/* vertical position of .NEW-ITEM in .TILE that is 1 of # across for VIEW-BROCHURE.HTM and VIDCLIP-NEW.HTM */
.new-item.brochure, /*.BROCHURE in .TILE 1 of # across for VIEW-BROCHURE.HTM*/
.new-item.trifold, /*.TRIFOLD in .TILE 1 of # across for VIEW-BROCHURE.HTM*/
.new-item.vidclip { /*.VIDCLIP in .TILE 1 of # across for VIDCLIP-NEW.HTM*/
top:-7px;
}
/* removal of CSS SHADOW from .NEW-ITEM */
.new-item.brochure img,
.new-item.trifold img,
.new-item.vidclip img {
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0);
}
/*Derrived from col-02 .two-col-2wide-formbox styles*/
.formbox {
/*width: 457px;this allows for padding in formbox*//*457 plus padding left and right*/
/*margin-right: 0px;*/
background-color: #f7f8f9;
padding: 10px;
text-align: center;
margin-top: 8px;
}
.formbox table {
}
.formbox th {
font-weight: normal;
text-align: left;/*101513 test changing to left*//*text-align: right;*//*fixed issue with http://swri.org/4org/d01/fire/listlab/TestedProductAssemblies/Default.asp*//*verify all else ok*/
vertical-align: top;
padding-right: 10px;
padding-top: 2px;
}
.formbox td {
vertical-align: top;
text-align: left;
padding-bottom: 4px;
}
/*Begin from HR.CSS*//*Eventually make note in HR.CSS*//*DO NOT BELIEVE THIS IS USED OTHER THAN ON HR SITE*/
.translucent-01 {/*padding and height could possibly be moved to a div id, refer to box-01 and box-02*/
padding:0px;/*if padding-top or bottom added need to adjust height if it remains a pixel measure*/
background: transparent url('/HR/images-new/translucent-2x2.gif');/*http://wannabegirl.org/translucent/*//*translucent.gif also works*/
height:100%;/*this allows for user font size changes*/
}
/*End from HR.CSS*/
.transparent {/*added to FORM TABLE so FORMBOX background-color is visible *//*http://swri.org/4org/d01/fire/listlab/listprod/marine.asp*/
background-color:transparent;
}
.text-align-lft {/*quick fix for specific instance of RETURN-TO-TOP *//*http://swri.org/4org/d01/fire/listlab/listprod/marine.asp*//*not needed on http://swri.org/4org/d08/beijing-office/capabilities/capabilities.htm*/
text-align: left;
}
/*121013 Begin adding for use on http://swri.org/4org/d01/fire/listlab/listprod/director.htm*/
.vert-align-mid {
vertical-align: middle;
}
/*121013 End adding for use on http://swri.org/4org/d01/fire/listlab/listprod/director.htm*/
/*101613 Begin test for http://swri.org/4org/d01/fire/listlab/listprod/contact-jkf-intent-test.htm*//*http://www.thesitewizard.com/css/hanging-indents.shtml*/
/*HANDING INDENT*//*http://swri.org/templates/2011/working/indent.htm*/
.hanging-indent-01 {/*use for P TAG where initial line starts at the original left margin, remaining text appears indented*//*note similar effect is achieved with DL, DT, and DD*//*#1*/
padding-left: 20px ;
text-indent: -20px ;
}
/*Alternate to .HANGING-INDENT - HTML Definition Lists*/
/*http://www.thesitewizard.com/css/hanging-indents.shtml and http://www.w3.org/TR/html401/struct/lists.html*/
/*styles undetermined due to reset.css*/
/*.FIRST-LINE-INDENT*//*http://swri.org/templates/2011/working/indent.htm*/
.first-line-indent-01{/*first line indented from left margin; remaining text in paragraph starts from original left margin*//*http://www.w3schools.com/cssref/pr_text_text-indent.asp*/
text-indent:20px;
}
/*created 111313 for http://swri.org/templates/2011/working/indent.htm*//*so far only used on this template and the BRO Patent and Awards pages for use of definintion lists*/
dd {
padding-left: 20px;
}
.absolute-center {/*not working at this time*/
margin:auto;
position:absolute;
top:0;left:0;bottom:0;right:0;
}
/* --------------------------------------------------------------- */
/* H3.PLUS##-MARGIN-BTM
use to add calculated space below H3 TAGS (images with title) as in
http://swri.org/4org/d08/beijing-office/default-option2.htm
if H3 TAG associated with #SIDEBAR1 .SB1-IMAGE a more specific rule applies
refer to #SIDEBAR1 .SB1-IMAGE H3
if H3 TAG associated with .IMAGE-RT a more specific rule applies
refer to .IMAGE-RT H3??????? COME BACK TO THIS
other specific styles exist that are not yet addressed
#maincontent .image-group h3
#maincontent .frame h3
#maincontent .frame .tile.brochure h3
#maincontent .frame .tile.vidclip h3
.sidebar1-image h3 TO BE DEPRACATED
#maincontent .image-rt p.plus-##px does not appear to be necessary COME BACK TO THIS
/* --------------------------------------------------------------- */
/*#maincontent h3.plus5-margin-btm,*//*NOT ACCURATELY WORKING WHEN P TAG FOLLOWS SINCE MARGINS COLLAPSE*//*USE MORE SPECIFIC ONE*//*http://swri.org/!reference/jfox/4org/d08/beijing-office/011714/maincontent-test.htm*/
#sidebar1 h3.plus5-margin-btm,/*WORKS 012714*/
#sidebar2 h3.plus5-margin-btm {/*WORKS 012714*/
margin-bottom: 5px;
}
/*#maincontent h3.plus10-margin-btm,*/
#sidebar1 h3.plus10-margin-btm,
#sidebar2 h3.plus10-margin-btm {
margin-bottom: 10px;
}
/*#maincontent h3.plus15-margin-btm,*/
#sidebar1 h3.plus15-margin-btm,
#sidebar2 h3.plus15-margin-btm {
margin-bottom: 15px;
}
/*#maincontent h3.plus20-margin-btm,*/
#sidebar1 h3.plus20-margin-btm,
#sidebar2 h3.plus20-margin-btm {
margin-bottom: 20px;
}
/*#maincontent h3.plus25-margin-btm,*/
#sidebar1 h3.plus25-margin-btm,
#sidebar2 h3.plus25-margin-btm {
margin-bottom: 25px;
}
/*#maincontent h3.plus30-margin-btm,*/
#sidebar1 h3.plus30-margin-btm,
#sidebar2 h3.plus30-margin-btm {
margin-bottom: 30px;
}
/* --------------------------------------------------------------- */
/* #MAINCONENT P.PLUS##-MARGIN-BTM
use to add calculated space below P TAGS in #MAINCONTENT (WAS captions of images)
other specific styles may exist that are not yet addressed
#maincontent .image-rt p.plus-##px does not appear to be necessary COME BACK TO THIS
/* --------------------------------------------------------------- */
/*#MAINCONTENT P TAGS already have margin-bottom: 8px; therefore 8+*/
#maincontent p.plus5-margin-btm {
margin-bottom:13px;/*8+5=13*/
}
#maincontent p.plus10-margin-btm {
margin-bottom:18px;/*8+10=18*/
}
#maincontent p.plus15-margin-btm {
margin-bottom:23px;/*8+15=23*/
}
#maincontent p.plus20-margin-btm {
margin-bottom:28px;/*8+20=28*/
}
#maincontent p.plus25-margin-btm {
margin-bottom:33px;/*8+25=33*/
}
#maincontent p.plus30-margin-btm {/*WORKS http://swri.org/!reference/jfox/4org/d08/beijing-office/011714/maincontent-test.htm*/
margin-bottom:38px;/*8+30=38*/
}
/* --------------------------------------------------------------- */
/* #SIDEBAR1 and #SIDEBAR2 P.PLUS##-MARGIN-BTM
if P TAG associated with .SB1-IMAGE a more specific rule applies
refer to #SIDEBAR1 .SB1-IMAGE P
#MAINCONTENT .IMAGE-RT P.PLUS-##PX does not appear to be necessary COME BACK TO THIS
more specific #MAINCONTENT P overrides the margin style set for .IMAGE-RT P COME BACK TO THIS
/* --------------------------------------------------------------- */
#sidebar1 p.plus5-margin-btm,
#sidebar2 p.plus5-margin-btm {
margin-bottom: 5px;
}
#sidebar1 p.plus10-margin-btm,
#sidebar2 p.plus10-margin-btm {
margin-bottom: 10px;
}
#sidebar1 p.plus15-margin-btm,
#sidebar2 p.plus15-margin-btm {
margin-bottom: 15px;
}
#sidebar1 p.plus20-margin-btm,
#sidebar2 p.plus20-margin-btm {
margin-bottom: 20px;
}
#sidebar1 p.plus25-margin-btm,
#sidebar2 p.plus25-margin-btm {
margin-bottom: 25px;
}
#sidebar1 p.plus30-margin-btm,
#sidebar2 p.plus30-margin-btm {
margin-bottom: 30px;
}
/* --------------------------------------------------------------- */
/*.SB1-IMAGE H3 and .SB1-IMAGE P already have margin-bottom: 4px; therefore 4+*/
#sidebar1 .sb1-image h3.plus5-margin-btm,
#sidebar1 .sb1-image p.plus5-margin-btm {
margin-bottom: 9px;/*4+5=9*/
}
#sidebar1 .sb1-image h3.plus10-margin-btm,
#sidebar1 .sb1-image p.plus10-margin-btm {
margin-bottom: 14px;/*4+10=14*/
}
#sidebar1 .sb1-image h3.plus15-margin-btm,
#sidebar1 .sb1-image p.plus15-margin-btm {
margin-bottom: 19px;/*4+15=19*/
}
#sidebar1 .sb1-image h3.plus20-margin-btm,
#sidebar1 .sb1-image p.plus20-margin-btm {
margin-bottom: 24px;/*4+20=24*/
}
#sidebar1 .sb1-image h3.plus25-margin-btm,
#sidebar1 .sb1-image p.plus25-margin-btm {
margin-bottom: 29px;/*4+25=29*/
}
#sidebar1 .sb1-image h3.plus30-margin-btm,
#sidebar1 .sb1-image p.plus30-margin-btm {
margin-bottom: 34px;/*4+30=34*/
}
/* --------------------------------------------------------------- */
/*.SB1-IMAGE has padding-bottom: 4px; therefore removing*//*TESTING*/
#sidebar1 .sb1-image .plus5-margin-btm {
padding-bottom:0;
margin-bottom: 5px;
}
#sidebar1 .sb1-image .plus10-margin-btm {
padding-bottom:0;
margin-bottom: 10px;
}
#sidebar1 .sb1-image .plus15-margin-btm {
padding-bottom:0;
margin-bottom: 15px;
}
#sidebar1 .sb1-image .plus20-margin-btm {
padding-bottom:0;
margin-bottom: 20px;
}
#sidebar1 .sb1-image .plus25-margin-btm {
padding-bottom:0;
margin-bottom: 25px;
}
#sidebar1 .sb1-image .plus30-margin-btm {
padding-bottom:0;
margin-bottom: 30px;
}
/* --------------------------------------------------------------- *//*TEST*/
/* IMG.PLUS##-MARGIN-BTM
multiple images, without H3 or P TAGS, inside an .IMAGE-RT DIV stack together when no plus is class added
use to add calculated space below images without H3 or P TAGS
for added space below .IMAGE-RT DIVS refer to #MAINCONTENT .IMAGE-RT
other specific styles exist that are not yet addressed:
.return-to-top-cntr img
if single image only in .SB1-IMAGE DIV without H3 or P TAGS a more specific rule applies
refer to #SIDEBAR1 .SB1-IMAGE
can possibly replace:
img.space-h1
img.space-p
img.space-ul
.unit-01 img.space-img
/* --------------------------------------------------------------- */
#maincontent img.plus5-margin-btm,
#sidebar1 img.plus5-margin-btm,
#sidebar2 img.plus5-margin-btm {
margin-bottom: 5px;
}
#maincontent img.plus10-margin-btm,
#sidebar1 img.plus10-margin-btm,
#sidebar2 img.plus10-margin-btm {
margin-bottom: 10px;
}
#maincontent img.plus15-margin-btm,
#sidebar1 img.plus15-margin-btm,
#sidebar2 img.plus15-margin-btm {
margin-bottom: 15px;
}
#maincontent img.plus20-margin-btm,
#sidebar1 img.plus20-margin-btm,
#sidebar2 img.plus20-margin-btm {
margin-bottom: 20px;
}
#maincontent img.plus25-margin-btm,
#sidebar1 img.plus25-margin-btm,
#sidebar2 img.plus25-margin-btm {
margin-bottom: 25px;
}
#maincontent img.plus30-margin-btm,
#sidebar1 img.plus30-margin-btm,
#sidebar2 img.plus30-margin-btm {
margin-bottom: 30px;
}
/*TESTING*//*NOTE: .IMAGE-RT */
/* --------------------------------------------------------------- */
/*.IMAGE-RT already has margin-bottom: 10px; therefore 10+*/
#maincontent .image-rt .plus5-margin-btm {
margin-bottom: 15px;/*10+5=15*/
}
#maincontent .image-rt .plus10-margin-btm {
margin-bottom: 20px;/*10+10=20*/
}
#maincontent .image-rt .plus15-margin-btm {
margin-bottom: 25px;/*10+15=25*/
}
#maincontent .image-rt .plus20-margin-btm {
margin-bottom: 30px;/*10+20=30*/
}
#maincontent .image-rt .plus25-margin-btm {
margin-bottom: 35px;/*10+25=35*/
}
#maincontent .image-rt .plus30-margin-btm {
margin-bottom: 40px;/*10+30=40*/
}
/* --------------------------------------------------------------- */
/* UL.PLUS##-MARGIN-BTM
used to create added calculated space below UL TAGS in #MAINCONTENT
other specific styles may exist that are not yet addressed:
/* --------------------------------------------------------------- */
/*#MAINCONTENT UL TAGS already have margin-bottom: 4px; therefore +4*/
#maincontent ul.plus5-margin-btm {
margin-bottom:9px;/*4+5=9*/
}
#maincontent ul.plus10-margin-btm {
margin-bottom:14px;/*4+10=14*/
}
#maincontent ul.plus15-margin-btm {
margin-bottom:19px;/*4+15=19*/
}
#maincontent ul.plus20-margin-btm {
margin-bottom:24px;/*4+20=24*/
}
#maincontent ul.plus25-margin-btm {
margin-bottom:29px;/*4+25=29*/
}
#maincontent ul.plus30-margin-btm {
margin-bottom:34px;/*4+30=34*/
}
/*Begin testing only for IM, remove*/
#maincontent p.plus-30px,
#sidebar1 p.plus-30px,
#sidebar2 p.plus-30px {
margin-top: 30px;
margin-bottom: 30px;
}
/*End testing only, remove*/