/* Author: GIC, Jens Wedin & Richard Harris ** Contact: richard.harris@nordea.com ** Version screen_common 2007.11.14 (original version: 2005.01.25) ** Do not make changes in this file, do it in the local file. ** ** 1.0 GRID SECTION ** 1.1 GENERIC SELECTORS ** 1.2 PRINT ** 1.3 TOP ** 1.4 SHORTCUTBOX ** 1.5 SEARCH ** 1.6 TOOLBAR ** 1.7 TABS IN A AND C AREA ** 1.8 MENU ** 1.9 BTC // Updated 2 March 2006, removed margins from css and added space via html instead ** 1.10 TEXT ELEMENTS ** 1.11 LINK LISTS ** 1.12 IMAGES ** 1.13 ILLUSTRATIONS ** 1.14 ICONS ** 1.15 FORMS ** 1.16 CODE EXAMPLES ** 1.17 LISTS ** 1.18 TABLES ** 1.19 BOXES ** 1.20 BARS ** 1.21 2 COLUMS IN C AREA ** 1.22 POPUPS ** 1.23 LIFE EVENTS ** 1.24 ADVICE AND GUIDANCE ** 1.25 CONTEXTUAL NAVIGATION ** 1.26 EXTRAS - added by Mondo, should be cleaned. */ /* DEBUGGERS div {border: 1px solid #c60;} div {background: #aaa;}*/ html, body, div, form {margin: 0; padding: 0;} body {background: #d9d5be; font: 76% Verdana, Geneva, Arial, Lucida, Helvetica, sans-serif; /* Lucida is for Linux */ text-align: center;} /* ************** 1.0 GRID SECTION - fill in with padding, margins, borders and so on. ******************* */ #wrap {background: #fff url(/sitemod/upload/Root/eGuidelines/stylesheets/images/bLine.gif) 154px 110px no-repeat; width: 760px; text-align: left; margin: 0 auto;}/* The margin auto is for Moz to center the wraper. */ #top {} /* in the local file because of info model */ #logo {background: #005284 url(/sitemod/upload/Root/eGuidelines/stylesheets/images/nordea_logo.gif) no-repeat; width: 85px; height: 36px; overflow: visible;} #search {margin: 10px 10px 0 0; text-align: right;} #solo {padding: 5px 10px 0 0; text-align: right;} #mainNavigation {float: left; width: 100%; background: #e4e3e3 url(/sitemod/upload/Root/eGuidelines/stylesheets/images/tab_bg.gif) repeat-x bottom; line-height: normal;} #tabs {font-family: arial, sans-serif;} #toolbar {text-align: right; padding: 8px 0 0 0; margin: 0 5px 0 0;} #container {margin-top: 0; padding: 17px 0 0; min-height: 400px; height: 400px;} #toolbarHolder {margin: 0 10px 0 10px; font-size: 90%;} html>body #menu {font-size: 95%;} /* for Opera SHOULD WE USE THIS ONE */ #content {padding: 0; margin: 0;} #breadCrumbTrail {padding: 0 0 0 10px; color: #999; margin: 0;} #mainContent {padding: 0 10px 0 9px; margin: 0;} #relatedContent {margin-top: 3.9em; padding: 0 10px 0 10px;} #footer {padding: 25px 0 5px 25px; margin: 0 0 0 150px ; font-size: 0.9em; color: #999; background: #fff url(/sitemod/upload/Root/eGuidelines/stylesheets/images/footer.gif) 6px 0 no-repeat;} #footer a {color: #999;} /* Outer sections - leave these with nothing more than floats and widths. */ /* Common for all grids*/ .cp1col #topOut, .cp2col #topOut, .fp1col #topOut, .fp2col #topOut {width: 760px;} .cp1col #logoOut, .cp2col #logoOut, .fp1col #logoOut, .fp2col #logoOut {width: 380px; float: left;} .cp1col #searchOut, .cp2col #searchOut, .fp1col #searchOut, .fp2col #searchOut {width: 380px; float: right;} .cp1col #mainNavigationOut, .cp2col #mainNavigationOut, .fp1col #mainNavigationOut, .fp2col #mainNavigationOut {width: 760px; clear: both;} .cp1col #toolbarOut, .cp2col #toolbarOut, .fp1col #toolbarOut, .fp2col #toolbarOut {float: right;} /* more definitions are in local file */ .cp1col #tabsOut, .cp2col #tabsOut, .fp1col #tabsOut, .fp2col #tabsOut {float: left;} /* more definitions are in local file */ .cp1col #containerOut, .cp2col #containerOut, .fp1col #containerOut, .fp2col #containerOut {width: 760px; clear: both;} .cp1col #footerOut, .cp2col #footerOut, .fp1col #footerOut, .fp2col #footerOut {width: 760px; clear: both;} .cp1col #relatedContent0ut, .cp2col #relatedContent0ut, .fp2col #relatedContent0ut {width: 188px; float: right; overflow: hidden;} /* overflow makes the D area stay in place even if the content is too wide */ /* ******** TWO COLUMN DESIGN ***************/ .cp2col #menuOut, .cp2col #menu-out {width: 156px; float: left;} .cp2col #contentOut {width: 603px; float: right;} .cp2col #breadCrumbTrailOut {width: 603px;} .cp2col #mainContentOut {width: 415px; clear: both; float: left; overflow: hidden;} /* ******** ONE COLUMN DESIGN ***************/ .cp1col #menuOut {width: 156px; float: left;} .cp1col #contentOut {width: 604px; float: right;} .cp1col #breadCrumbTrailOut {width: 604px;} .cp1col #mainContentOut {width: 604px; clear: both; float: left; overflow: hidden;} .cp1col #relatedContent0ut {display: none;} /* ******** FRONTPAGE TWO COLUMN DESIGN ***************/ .fp2col #wrap {background: #fff; background-image: none;} .fp2col #footer {background: 0; margin: 20px 10px 0 10px; font-size: 0.9em; border-top: 1px solid #779abc; padding: 5px 0 5px 0; background-image: none;} .fp2col #relatedContent {margin-top: 0 !important;} .fp2col #mainContent {padding: 0 35px 0 45px; margin-top: 0;} .fp2col #container {background-image: none;} .fp2col #contentOut {width: 760px; float: right; padding-top: 17px;} .fp2col #mainContentOut {width: 572px; clear: both; float: left; overflow: hidden;} .fp2col #footer address {font-style: normal; margin-left: 10px;} /* ******** FRONTPAGE ONE COLUMN DESIGN ***************/ .fp1col #wrap {background: #fff; background-image: none;} .fp1col #footer {background: 0; margin: 20px 10px 0 10px; font-size: 0.9em; border-top: 1px solid #779abc; padding: 5px 0 5px 0; background-image: none;} .fp1col #relatedContent {margin-top: 0 !important;} .fp1col #mainContent {padding: 0 35px 0 45px; margin-top: 0;} .fp1col #container {background-image: none;} .fp1col #contentOut {width: 760px; float: right; padding-top: 17px;} .fp1col #mainContentOut {width: 760px; clear: both; float: left; overflow: hidden;} .fp1col #footer address {font-style: normal; margin-left: 10px;} /* ********* 1.1 GENERIC SELECTORS ************ */ .nowrap {white-space: nowrap !important;} .nodisplay {display: none;} .enclose {clear: both; border: 0 !important;} .floatleft {float: left;} .floatright {float: right;} .alignright {text-align: right !important;} .alignleft {text-align: left !important;} .aligncenter {text-align: center !important;} .asterix {color: #c60; cursor: help;} .line {border-top: 1px solid #779abc; width: 100%; height: 1px; margin: 20px 0 0 0; padding: 0; clear: both;} .hide {display: none !important;} .noborder {border: 0 !important;} .smaller {font-size: 95%; margin: 0;} .larger {font-size: 105%; margin: 0;} .paddingtop {margin-top: 20px; display: block;} .paddingbottom {padding-bottom: 20px; display: block;} .paddingtopbottom {padding-bottom: 20px; padding-top: 20px; display: block;} .middle {vertical-align: middle !important;} .bottom {vertical-align: bottom !important;} .top {vertical-align: top !important;} /* ********* 1.2 PRINT **************** */ #topPrint, #footerPrint, #statement, #accessibility-statement {display: none;} /* ********* 1.3 TOP *************** */ #top img {margin: 0;} #logo img {margin: 8px 0 0 18px !important;} /* ******** 1.4 SHORTCUTBOX ************** */ #shortcutbox {position: absolute; left: -9999px; font-size: small;} #shortcutbox a:focus, #shortcutbox a:hover #shortcutbox a:active {display: block; position: absolute; top: 0; left: 10420px; background: #fff; border: 1px solid #c60; padding: 9px; width: 22em; z-index: 1;} /* ******** 1.5 SEARCH ************** */ #search input {text-align: left; margin: 0 6px 0 0; width: 19em; font-size: 0.9em;} * html #search input {margin: 0 10px 0 0;} /* for ie */ @media all and (min-width: 0px){#search input {margin: 0 5px 2px 0;}} /*for opera */ #search button {margin: 0 !important; float: none; display: inline;} /* ********* 1.6 TOOLBAR ************* */ #toolbar img {margin: 0 0 -1px 0px !important; vertical-align: middle; background: transparent;} #toolbar span {margin: 0; padding: 0 0 0 6px; border-right: 1px solid #779abc/*#005284*/; vertical-align: middle;} #toolbar a {font-size: 0.9em; white-space: nowrap; color: #000; text-decoration: underline; padding: 0 6px 0 0 !important; display: inline; margin: 0 0 0 5px;} #toolbar a:hover {text-decoration: none;} #toolbar .default {font-weight: normal; padding: 2px 0px 5px 6px;} #toolbar .defaultHover {font-weight: normal; padding: 2px 0px 5px 5px; background-color:#e5eaef; border: solid 1px #779abc;} #toolbar .login {font-weight: bold; padding: 2px 0px 5px 6px;} #toolbar .loginHover {font-weight: bold; padding: 2px 0px 5px 5px; background-color:#e5eaef; border: solid 1px #779abc;} #toolbar .nodivider {border: 0; padding: 0 0 0 6px !important;} .toolBarDropdown {padding: 2px 5px 10px 10px; position: absolute; left: -5000px; top: 0px; background-color:#e5eaef; min-width:166px; border: solid 1px #779abc; text-align:left} .toolBarDropdown strong {font-size: 1em; display: block !important; margin: 0 !important;} .toolBarDropdown a {text-decoration:none !important; font-size: 1em; display: block !important; margin: 8px 0 2px !important;} .toolBarDropdown a:hover {text-decoration:underline !important;} .toolBarFillDropdown {color: #005284; padding: 0px; position: absolute; left: -5000px; top: 0px; width: 10px; height: 7px; overflow: hidden; background-color: #e5eaef; border-left: solid 1px #779abc; border-right: solid 1px #779abc;} .emptytablist {height: 14px;} /* ********* 1.7 TABS IN A AND C AREA ************* */ #tabs ul, .tabsC ul {margin: 0; padding: 10px 10px 0; list-style: none;} #tabs li, .tabsC li {display: inline; float: left; background: url(/sitemod/upload/Root/eGuidelines/stylesheets/images/tab_l.gif) no-repeat left top; margin: 0; padding: 0 0 0 9px; border-bottom: 1px solid #779abc; list-style: none; white-space: nowrap;} #tabs a, .tabsC a {display: block; background: url(/sitemod/upload/Root/eGuidelines/stylesheets/images/tab_r.gif) no-repeat right top; font-size: 12px !important; font-family: Arial, Verdana, sans-serif; padding: 5px 10px 3px 1px; text-decoration: none !important; color: #000 !important;} #tabs a:hover, .tabsC a:hover {text-decoration: underline !important;} /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a, .tabsC a {float: none;} /* End IE5-Mac hack */ #tabs .current, .tabsC .current {background-image: url(/sitemod/upload/Root/eGuidelines/stylesheets/images/tab_l_on.gif); border-width: 0;} #tabs .current a, .tabsC .current a {background-image: url(/sitemod/upload/Root/eGuidelines/stylesheets/images/tab_r_on.gif); color: #000; padding-bottom: 4px; font-weight: bold;} /* #tabs #home li {background: url("images/tab_l_home.gif") no-repeat left top; padding: 0 0 0 25px;} #tabs #home .current {background-image: url("images/tab_l_home_on.gif"); border-width: 0;} */ #tabs .home {background: url(/sitemod/upload/Root/eGuidelines/stylesheets/images/tab_l_home.gif) no-repeat left top !important; padding: 0 0 0 25px !important;} #tabs .currenthome {background: url(/sitemod/upload/Root/eGuidelines/stylesheets/images/tab_l_home_on.gif) no-repeat left top !important; padding: 0 0 0 25px; border-width: 0 !important;} #tabs .currenthome a {background-image: url(/sitemod/upload/Root/eGuidelines/stylesheets/images/tab_r_on.gif); padding-bottom: 4px !important; border-width: 0 !important; font-weight: bold;} /* tabs in C area */ .tabsC {float: left; width: 100%; background: #fff url(/sitemod/upload/Root/information_model/tabC_bg.gif) repeat-x bottom; line-height: normal; margin-bottom: 10px; clear: both !important;} * html .tabsC {float: none;} /* for ie */ .tabsC li {background-image: url(/sitemod/upload/Root/information_model/tabC_l.gif);} .tabsC a {background-image: url(/sitemod/upload/Root/information_model/tabC_r.gif);} .tabsC .current {background-image: url(/sitemod/upload/Root/information_model/tabC_l_on.gif); font-weight:bold;} .tabsC .current a {background-image: url(/sitemod/upload/Root/information_model/tabC_r_on.gif); font-weight:bold;} .tabsC ul {margin: 0 !important; padding: 10px 10px 0; list-style: none;} .tabsC li {font: 1.0em Arial, Verdana, sans-serif; float: left; line-height: 1.2em; background: url(/sitemod/upload/Root/information_model/tabC_l.gif) no-repeat left top; margin: 0; padding: 0 0 0 9px; border-bottom: 1px solid #779abc; list-style: none; white-space: nowrap;} .tabsC a {float: left; display: block; background: url(/sitemod/upload/Root/information_model/tabC_r.gif) right top no-repeat; padding: 5px 10px 4px 1px; text-decoration: none !important; color: #000 !important;} .tabsC a:hover {text-decoration: underline !important;} /* Commented Backslash Hack hides rule from IE5-Mac \*/ .tabsC a {float: none;} /* End IE5-Mac hack */ .tabsC .current {background-image: url(/sitemod/upload/Root/information_model/tabC_l_on.gif); border-width: 0; font-weight:bold;} .tabsC .current a {background-image: url(/sitemod/upload/Root/information_model/tabC_r_on.gif); color: #000; padding-bottom: 5px; font-weight: bold;} /* container for tabbed content in c-area */ .tabsContent {float: left; clear: both; width: 100%;} .tabbox {border: 1px solid #779abc; border-width: 0 1px 1px 1px; margin: 0 0 20px 0; padding: 5px} * html .tabbox {padding: 5px 5px 0 5px;} /* for ie */ /* ****************** 1.8 MENU *********************** */ #menuOut {overflow: hidden;} #toolbarHolder * {background-repeat: no-repeat !important;} /* this and all the other redundant instances of this are for Safari 1.03 */ #toolbarHolder ul {margin: 0; padding: 0; list-style: none !important;} #toolbarHolder li {list-style: none !important; position: relative; margin: 0 0 4px; padding: 0;} #toolbarHolder ul ul {margin-left: 0px;} #toolbarHolder a {display: block; padding: 3px 10px 3px 3px; border-width: 1px; border-style: solid; text-decoration: none; color: #000; margin: -3px 0 0px !important;} #toolbarHolder div {padding: 4px;} #toolbarHolder span {height:10px;} #toolbarHolder .parentItem {font-weight: bold; color: #036; background-repeat: no-repeat !important; background:#fff url(/sitemod/upload/Root/eGuidelines/stylesheets/images/arrowleft_brand_blue_8x11.gif) right top no-repeat;} #toolbarHolder .parentOver {border: solid 1px #779abc !important; font-weight: bold; color: #036; background:#e5eaef url(/sitemod/upload/Root/eGuidelines/stylesheets/images/arrowleft_brand_blue_8x11.gif) right top no-repeat !important; background-repeat: no-repeat !important;} #toolbarHolder .currentParentItem {font-weight: bold; color: #036; padding: 5px 4px 6px; border-width: 0; border-top: 1px solid #779abc; border-bottom: 1px solid #779abc; margin: 2px 0 10px !important;} .selected {color: #c60; font-weight: bold; padding: 3px 10px 3px 3px; margin: -3px 0 0px !important;} .currentParentItem .selected {margin-left: -3px !important;} /* Needed for IE/Win bugs \*/ * html #toolbarHolder a {position: relative;} * #toolbarHolder ul ul a:visited, * #toolbarHolder ul ul a:active {color: #000;} * html #toolbarHolder li {height: 1px;} * html #toolbarHolder ul ul li div {margin-bottom: px;} /* do not touch this comment, too */ .subIndicator {position: absolute; top: 6px; right: 3px; width: 5px; height: 9px; background-repeat: no-repeat !important; background: url(/sm_menu/arrow_plus_over.gif) left top no-repeat !important; overflow: hidden;} .toolbarNormal a {border-color:#fff; background: #fff; color: #000;} .toolbarNormal .subIndicator {background-position: 0 0;} ul ul .toolbarOver a {border-color: #779abc; background: #e5eaef; color: #000 !important;} ul .toolbarOver a {border-color: #779abc; background: #e5eaef; color: #005284 !important;} .toolbarOver {border: solid 1px #779abc !important; background: #e5eaef !important; color: #000 !important;} .toolbarOverArrow {border: solid 1px #779abc !important; color: #000 !important; background-repeat: no-repeat !important; background:#e5eaef url(/sitemod/upload/Root/eGuidelines/stylesheets/images/arrowleft_brand_blue_8x11.gif) right top no-repeat !important;} .toolbarOver .subIndicator {background-position: 0 -9px;} /* ****************** Cascade ************************ */ .cascadeMenu div {margin: 0; padding: 3px; padding-top: 2px; width: 150px; border: solid 1px #779abc; text-align:left; background-color: #f2f5f7; filter:progid:DXImageTransform.Microsoft.Shadow(color='gray', Direction=135, Strength=3);} .cascadeMenu ul {margin: 0; padding: 0; list-style: none !important;} .cascadeMenu li {list-style: none !important; position: relative; margin: 0; padding: 0;} .cascadeMenu ul ul {margin-left: 0px;} .cascadeMenu div a {display: block; text-decoration: none; padding: 3px 10px 3px 3px; border: solid 1px #f2f5f7; text-decoration: none; color: #000; width:100%; font-size: 0.9em;} .cascadeMenu div a:hover {text-decoration: none;} .cascadeMenu div a:visited {color: #000 !important;} .cascadeArrow {background: url(/sitemod/upload/Root/eGuidelines/stylesheets/images/arrowright_light_8x11.gif) right top no-repeat !important; text-decoration: none !important;} /* this class does not work in NS 7.01 */ .cascadeNoArrow { text-decoration: none !important; } /* ****************** 1.9 BTC ************************ */ #breadCrumbTrail a:link, #breadCrumbTrail a:visited, #breadCrumbTrail a:active {font-size: 0.9em; color: #999; text-decoration: underline; margin: 0;} #breadCrumbTrail a:hover {text-decoration: none;} #breadCrumbTrail strong {font-size: 0.9em; margin: 0;} /* ***************** MAIN AND RELATED CONTENT ********************** */ /* **************** 1.10 TEXT ELEMENTS ********************* */ h1, h2, h3, h4 {font-weight: bold;} h1 {font-size: 1.4em; margin: 5px 0 20px 0;} h2 {font-size: 1.2em; margin: 17px 0 3px 0;} h3 {font-size: 1.1em; margin: 0;} h4 {font-size: 1em; margin: 0;} h2 a, h3 a, h4 a {text-decoration: underline !important;} h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {text-decoration: none !important;} p {font-size: 1.0em; margin: 0 0 10px 0; line-height: 1.3em;} p.preamble {margin: 0 0 10px 0;} strong {font-weight: bold;} a, a:link, a:active, a:hover {color: #005284; text-decoration: underline;} a:visited {color: #603;} address {font-style: normal;} acronym, span.abbr, abbr {border-bottom: 1px dotted #779abc; cursor: help;} /* span.abbr is for ie, see js file */ hr {clear: both; text-align: right; width: 100%; height: 1px; color: #779abc; border: none; margin: 10px 0 10px 0;} /* For ie6 */ html > body hr {clear: both; margin: 10px 0 10px 0 !important; width: 100%; height: 1px; background-color: #779abc; border: none;} /* For Gecko-based browsers */ /* ************ 1.11 LINK LISTS *************** */ .listlink {text-align: right; clear: both; margin: 10px 0 10px 0;} .listlink a, .listlink a:link, .listlink a:active, .listlink a:hover {color: #005284; text-decoration: underline;} .listlink a:visited {color: #005284;} .listlink strong {color: #c60;} /**************** 1.12 IMAGES ******************/ a img {border: 0;} img {margin:0 !important; border-color: #779abc !important;} img.floatleft {float: left; margin: 0 10px 10px 0 !important; border: 1px solid #779abc;} .popup {margin: 0 0 0 5px !important; padding: 0;} .boxb1 img, .boxg1 img, .boxd1 img, .boxb2 img, .boxg2 img, .boxd2 img, .boxi2 img {margin: -5px -5px 5px -5px !important;} .img {margin: 0 0 10px 0; border: 1px solid #779abc;} /* clickable images with no border */ .noborder {border: 0 !important;} /*************** 1.13 ILLUSTRATIONS ***************/ .illustrationb1, .illustrationg1, .illustrationd1 {float: left; margin: 0 10px 10px 0 !important; width: 53px; height: 53px; border: 1px solid #779abc;} .boxb1 .illustrationb1, .boxg1 .illustrationb1, .boxd1 .illustrationb1, .boxb2 .illustrationb1, .boxg2 .illustrationb1, .boxd2 .illustrationb1 {margin: 0 5px 0 0 !important;} /* This will only fix the blue icons in boxes */ .illustrationb1 {border-color: #779abc; background: #e5eaef;} /* Brand Blue */ .illustrationg1 {border-color: #999; background: #e4e3e3;} /* Cool grey */ .illustrationd1 {border-color: #968f69; background: #d9d5be;} /* Dust green */ /************ 1.14 ICONS ***********************/ .iconn1 {width: 15px; height: 12px; margin: 2px;} .iconb1, .icong1, .icond1 {width: 15px; height: 12px; border: 1px solid #779abc; padding: 2px; margin: 2px;} .iconb2, .icong2, .icond2 {width: 30px; height: 24px; border: 1px solid #779abc; float: left; margin: 0 10px 0 0 !important;} .iconb1, .iconb2 {border-color: #779abc; background: #e5eaef;} .icong1, .icong2 {border-color: #999; background: #e4e3e3;} .icond1, .icond2 {border-color: #968f69; background: #d9d5be;} .iconb1:hover, .iconb2:hover {background: #ccd8de;} .icong1:hover, .icong2:hover {background: #ccc;} .icond1:hover, .icond2:hover {background: #c5bc89;} .boxb1 .iconb1, .boxg1 .iconb1, .boxd1 .iconb1, .boxb2 .iconb1, .boxg2 .iconb1, .boxd2 .iconb1 {margin: 0 5px 0 0 !important;} /* This will only fix the blue icons in boxes */ .baricon {float: right; padding: 8px 10px 0 0; margin: 0;} /* When icon is in a box */ caption img {float: right; padding: 1px ; margin: 0 5px 0 0 !important; border: 1px solid #779abc !important; background: #e5eaef; width: 13px !important; height: 10px !important;} caption img:hover {background: #ccd8de} /* ****************** 1.15 FORMS **************** */ fieldset {margin: 0; padding: 0; border: none; width: 100%;} legend {margin: 0; padding: 0; display: none;} fieldset fieldset legend {font-weight: bold; padding: 0 0 0 5px; display: block;} * html fieldset fieldset legend {padding: 0;} /* for ie */ input, textarea, select {font: 1.0em Verdana, Geneva, Arial, Lucida, Helvetica, sans-serif;} .formgroup {margin: 5px 0 5px 0;} .labelL {text-align: right; width: 100px; float: left; padding: 0.2em; margin: 0; margin-top: 0.3em;} .textfield, .textarea, .select {margin: 5px 5px 5px 6px; font: 1.0em Verdana, Geneva, Arial, Lucida, Helvetica, sans-serif;} .textfield, .textarea {width: 17em;} .select {width: 17.3em;} * html .select {width: 17.5em;} /* ie */ .checkbox {margin-left: 104px; text-align: right; padding: 0;} * html .checkbox {margin-left: 108px;} /* for ie */ .radio {margin-left: 102px; text-align: right; padding: 0;} * html .radio {margin-left: 107px;} /* for ie */ .formbar1 {background: #e5eaef; font-size: 1.0em; margin: 0; padding: 2px 0 2px 5px; border-bottom: 1px solid #779abc;} .formborder1 {border: 1px solid #779abc; border-width: 0 1px 1px 1px;} .fotnote {margin: 10px 0 0 0;} .fotnote p {margin: 0;} fieldset img {padding: 0 0 4px 0;} .help {vertical-align: top; line-height: 4px} /* complex forms (in tables) */ .complexform {} .complexform td {padding: 3px} .complexform label {line-height: 20px; vertical-align: middle;} /* buttons */ .buttongroup {display: block; float: right; margin: 10px 10px 10px 0; clear: both} * html .buttongroup {margin-right: 5px} /* for ie6 */ button {padding: 1px 3px 1px 3px; margin: 0 0 0 10px; font: 0.9em Verdana, Arial, Tahoma, Lucida, Helvetica, Sans-serif; background-color: #e5eaef; border: solid 1px #779abc; border-width: 1px 2px 2px 1px; text-align: center !important; cursor: pointer;} /* display: inline; Display is for Safari, removed because it screws up IE 5 mac */ * html button {padding: 0px 3px 0px 3px;} .ok {width: 4em;} button:hover {background: #ccd8de} .accelerator {text-decoration: underline; font-style: normal;} /* ************* 1.17 LISTS ************** */ ul {margin: 0 0 20px 20px; padding: 0;} ol {margin: 0 0 20px 24px; padding: 0; list-style: decimal-leading-zero;} ol ol {margin: 0 0 14px 24px; list-style: upper-alpha;} ul ul {margin-bottom: 0;} ul li {list-style-type: disc;} li {margin: 5px 0 5px 0; padding: 0;} .portrait {list-style-type: none; margin: 0 0 20px 0; padding: 0;} .portrait li {list-style-type: none; margin: 0 0 4px 0; padding: 0;} /* **************** 1.18 TABLES *********************** */ /* First the common selectors, had to add #container becuase if css collsion with the menu css */ /* Do not remove the #content, it makes the cascade not work in ie */ #content table {border-width: 1px; margin: 20px 0 10px 0; border-collapse: collapse; width: 100%;} #content caption {padding: 3px 5px 3px 5px; text-align: left; font-weight: bold; height: auto; margin: 10px 0 0 0} #content @media all and (min-width: 0px){caption {padding: 3px 5px 2px 5px;}} /* for opera */ #content th {text-align: left; padding: 2px 5px 2px 5px; vertical-align: bottom;} #content td {text-align: left; vertical-align: top;} #content tfoot {font-weight: bold;} #content th.vertical {vertical-align: top; background: #fff !important;} #content table td div {padding-bottom: 10px;} .tableb1 td, .tableb2 td, .tableb3 td, .tableb4 td, .tableg1 td, .tableg2 td, .tableg3 td, .tableg4 td, .tabled1 td, .tabled2 td, .tabled3 td, .tabled4 td {padding: 2px 5px 2px 5px;} table td img {margin-top: 5px;} /* this seems silly (to turn links black) td a {color: #000;}*/ .tablew1 caption {padding: 0 0 5px 0;} .tablew1 table {width: 100%; border: 0;} .tablew1 th {padding: 0;} .tablew1 td {padding: 0;} /* COLUMNS HEADING SORTING */ /* deprecated - see "sortable tables" in screen_local.css */ th a, th a:link, th a:visited, th a:active {color: #000; text-decoration: none;} th a:hover {text-decoration: underline;} th img {margin: 0; padding: 0 0 0 5px;} /* Then the color specific selectors */ /* b = blue , g = grey , d = dust green , i = intranet brown , w = white , 1-3 is the variations */ /*Blue table*/ .tableb1 {border: 1px solid #779abc;} .tableb1 caption {background: #ccd8de;} .tableb1 th {background: #e5eaef;} .tableb1 tr.odd {background: #e5eaef;} /*Blue table with boxes*/ .tableb2 {border: 1px solid #779abc; border-width: 1px 0 0 1px;} .tableb2 caption {background: #ccd8de;} .tableb2 th {background: #e5eaef; border-right: 1px solid #779abc; border-bottom: 1px solid #779abc;} .tableb2 tr.odd {background: #e5eaef;} .tableb2 td {border: 1px solid #779abc; border-width: 0 1px 1px 0;} /*Blue table with lines*/ .tableb3 {border: 1px solid #779abc; border-width: 1px 1px 0 1px;} .tableb3 caption {background: #ccd8de;} .tableb3 th {background: #e5eaef; border: 1px solid #779abc; border-width: 0 0 1px 0;} .tableb3 tr.odd {background: #e5eaef;} .tableb3 td {border: 1px solid #779abc; border-width: 0 0 1px 0;} /*Blue table with no outline */ .tableb4 {border: 0;} .tableb4 caption {display: none;} .tableb4 th {background: #e5eaef; border: 1px solid #779abc; border-width: 0 0 1px 0;} .tableb4 td {border-bottom: 1px solid #e5eaef;} /*Grey table*/ .tableg1 {border: 1px solid #999;} .tableg1 caption {background: #ccc;} .tableg1 th {background: #e4e3e3;} .tableg1 tr.odd {background: #e4e3e3;} /*Grey table with boxes*/ .tableg2 {border: 1px solid #999; border-width: 1px 1px 0 0;} .tableg2 caption {background: #ccc;} .tableg2 th {background: #e4e3e3; border: 1px solid #999; border-width: 0 0 1px 1px;} .tableg2 tr.odd {background: #e4e3e3;} .tableg2 td {border: 1px solid #999; border-width: 0 0 1px 1px;} /*Grey table with lines*/ .tableg3 {border: 1px solid #999; border-width: 1px 1px 0 1px;} .tableg3 caption {background: #ccc;} .tableg3 th {background: #e4e3e3; border: 1px solid #999; border-width: 0 0 1px 0;} .tableg3 tr.odd {background: #e4e3e3;} .tableg3 td {border: 1px solid #999; border-width: 0 0 1px 0;} /*Dust green table*/ .tabled1 {border: 1px solid #968f69;} .tabled1 caption {background: #c5bc89;} .tabled1 th {background: #d9d5be;} .tabled1 tr.odd {background: #d9d5be;} /*Dust green table with boxes*/ .tabled2 {border: 1px solid #968f69; border-width: 1px 1px 0 0;} .tabled2 caption {background: #c5bc89;} .tabled2 th {background: #d9d5be; border: 1px solid #968f69; border-width: 0 0 1px 1px;} .tabled2 tr.odd {background: #d9d5be;} .tabled2 td {border: 1px solid #968f69; border-width: 0 0 1px 1px;} /*Dust green table with lines*/ .tabled3 {border: 1px solid #968f69; border-width: 1px 1px 0 1px;} .tabled3 caption {background: #c5bc89;} .tabled3 th {background: #d9d5be; border: 1px solid #968f69; border-width: 0 0 1px 0;} .tabled3 tr.odd {background: #d9d5be;} .tabled3 td {border: 1px solid #968f69; border-width: 0 0 1px 0;} /*Intranet table*/ .tablei1 {border: 1px solid #7e6d5e;} .tablei1 caption {background: #d6d1c5;} .tablei1 th {background: #d6d1c5;} .tablei1 tr.odd {background: #efeee9;} /*White box with no lines at all*/ .tablew1 {border: 0;} .tablew1 caption {background: #fff;} .tablew1 th {background: #fff; border: 0;} .tablew1 td {border: 0;} /* LISTS OF LINKS */ ul.linklist {margin: 0; padding: 0; list-style-type: none; margin: 0 0 10px 0;} .linklist li {margin: 0 0 5px 0; list-style-type: none;} .box1 .linklist, .box2 .linklist, .box3 .linklist, .box4 .linklist {margin: 0 0 5px 0 !important;} /* Linklists in boxes should have 5px padding instead of 19px */ /* *************** 1.19 BOXES ******************* */ /* First the common selectors */ .boxb1, .boxg1, .boxd1, .boxb2, .boxg2, .boxd2, .boxn2, .boxe1, .boxe2, .boxe3, .boxe4 {margin: 10px 0 20px 0;} .boxb1 h2, .boxg1 h2, .boxd1 h2, .boxe1 h2, .boxe2 h2, .boxe3 h2, .boxe4 h2 {padding: 2px 5px 2px 5px; font-size: 1.0em !important; margin: 0 !important; height: auto;} .boxb1 h3, .boxg1 h3, .boxd1 h3, .boxe1 h3, .boxe2 h3, .boxe3 h3, .boxe4 h3 {padding: 2px 5px 2px 5px; font-size: 1.0em !important; margin: 0 !important; height: auto;} .boxb2 h2, .boxg2 h2, .boxd2 h2, .boxn2 h2 {padding: 0; font-size: 1.0em !important; margin: 0 !important; height: auto;} .boxb2 h3, .boxg2 h3, .boxd2 h3, .boxn2 h3 {padding: 2px 5px 2px 5px; font-size: 1.0em !important; margin: 0 !important; height: auto;} .boxb1 div, .boxg1 div, .boxd1 div, .boxe1 div, .boxb2, .boxg2, .boxd2, .boxn2 {padding: 5px;} .boxe1 div, .boxe2 div, .boxe3 div, .boxe4 div {padding: 5px 5px 5px 45px;} .boxb1 div h2, .boxb1 div h3, .boxg1 div h2, .boxg1 div h3, .boxd1 div h2, .boxd1 div h3, .boxe1 div h2, .boxe1 div h3 {padding: 0; margin: 0; font-size: 1.0em !important;} .boxb1 div p, .boxg1 div p, .boxd1 div p, .boxe1 div p {margin: 0 0 5px 0;} .boxb1 div a, .boxg1 div a, .boxd1 div a, .boxe1 div a {margin: 0 0 5px 0;} /* Then the color specific selectors for boxes */ /* Blue boxes */ .boxb1 div, .boxb2 {border: 1px solid #779abc;} /* Grey boxes */ .boxg1 div, .boxg2 {border: 1px solid #999;} /* Brown boxes */ .boxd1 div, .boxd2 {border: 1px solid #968f69;} /* No background color boxes */ .boxn2 {border: 1px solid #779abc;} /*Error boxes */ .boxe1 div, .boxe2 div, .boxe3 div, .boxe4 div {border: 1px solid #a9af00;} .boxe1 div {background: #eff1cc url(/sitemod/upload/Root/eGuidelines/stylesheets/images/i_SystemFailure.gif) 5px 5px no-repeat;} .boxe2 div {background: #eff1cc url(/sitemod/upload/Root/eGuidelines/stylesheets/images/i_IncorrectInput.gif) 5px 5px no-repeat;} .boxe3 div {background: #eff1cc url(/sitemod/upload/Root/eGuidelines/stylesheets/images/i_Information.gif) 5px 5px no-repeat;} .boxe4 div {background: #eff1cc url(/sitemod/upload/Root/eGuidelines/stylesheets/images/i_Question.gif) 5px 5px no-repeat;} .boxb1 h1, .boxb1 h2, .boxb1 h3 {background: #ccd8de;} .boxg1 h1, .boxg1 h2, .boxg1 h3 {background: #ccc;} .boxd1 h1, .boxd1 h2, .boxd1 h3 {background: #c5bc89;} .boxe1 h1, .boxe1 h2, .boxe2 h2, .boxe3 h2, .boxe4 h2, .boxe1 h3, .boxe2 h3, .boxe3 h3, .boxe4 h3 {background: #d8db7f;} .boxb2, .boxb1 div.bgcolor {background: #e5eaef;} .boxg2, .boxg1 div.bgcolor {background: #e4e3e3;} .boxd2, .boxd1 div.bgcolor {background: #d9d5be;} .boxn2 {background: #fff;} .subboxb1 {border: 1px solid #779abc; border-width: 0 1px 1px 1px !important;} .subboxg1 {border: 1px solid #999; border-width: 0 1px 1px 1px !important;} .subboxd1 {border: 1px solid #968f69; border-width: 0 1px 1px 1px !important;} /* ********************** 1.20 BARS ************************** */ /* First the common selectors */ .barb1, .barg1, .bard1 {margin: 0 0 20px 0; padding: 2px 5px 2px 5px; font-size: 1.0em; margin: 0 0 5px; height: 14px;} /* Then the color specific selectors */ .barb1 {border-bottom: 1px solid #779abc; background: #ccd8de;} .barg1 {border-bottom: 1px solid #999; background: #ccc;} .bard1 {border-bottom: 1px solid #968f69; background: #c5bc89;} /* ************** 1.21 2 COLUMS IN C AREA ******************** */ /* Outer sections, only floats and widths */ .col1-out {width: 50%; float: left;} .col2-out {width: 50%; float: right;} .col1 {margin: 0 10px 0 0;} .col2 {margin: 0 0 0 10px;} .col1 h3, .col2 h3 {margin: 0; padding: 0;} /* ********* 1.22 POPUPS ************* */ /* common */ #popup_small, #popup_medium, #popup_large, #popup_largeNavi {margin: 0; padding: 0; text-align: left;} #popup_medium, #popup_large, #popup_largeNavi {background: #fff url(/sitemod/upload/Root/eGuidelines/stylesheets/images/popupcorner.gif) bottom left no-repeat;} /* small */ #popup_small {background: #d9d5be; padding: 25px 30px 40px 25px;} /* medium and large */ #popup_medium #popupMainContent, #popup_large #popupMainContent, #popup_largeNavi #popupMainContent {padding: 25px 30px 40px 25px; border-left: 10px solid #e5eaef; border-bottom: 10px solid #e5eaef;} #popup_medium #popupMainContent {min-height: 280px;} #popup_large #popupMainContent, #popup_largeNavi #popupMainContent {min-height: 305px; } * html #popup_medium #popupMainContent {height: 280px} /* for ie */ * html #popup_large #popupMainContent, * html #popup_largeNavi #popupMainContent {height: 305px} /* for ie */ /* large with navi */ #popup_largeNavi {padding: 0; border-left: 0; text-align: left;} #popuptop {background: #036 url(/sitemod/upload/Root/eGuidelines/stylesheets/images/popuplogo.gif) right center no-repeat; font-size: 1.0em; color: #fff; font-weight: bold; padding: 4px 0 4px 10px;} #popupnavigation {border-bottom: 1px solid #779abc; background: #e5eaef; height: 17px;} #popupnavigation ul {margin: 0 0 0 5px; padding: 2px 0 0 0; list-style:none;} #popupnavigation li {float: left; margin: 0; padding: 0 5px 0 5px; list-style-type: none; border-left: 1px solid #779abc; border-right: 1px solid #ccd8de;} #popupMainContent {border-left: 10px solid #e5eaef; border-bottom: 10px solid #e5eaef; padding: 10px 30px 40px 25px;} .popupfirst {border-left: 0 !important;} .popuplast {border-right: 0 !important;} #popupcurrent {font-weight: bold;} /* Microsites */ #microsite {padding: 0; text-align: left; background: #fff;} #micrositetop {padding: 10px; background: #036 url(/sitemod/upload/Root/eGuidelines/stylesheets/images/popuplogo.gif) 99% center no-repeat;} #micrositetop span {font-weight: bold; font-size: 1.1em; color: #fff;} #micrositeMainContent {padding: 0 10px 0 10px;} #micrositefooter {background: #036; text-align: right; color: #fff; padding: 5px 10px 5px 0;} #micrositefooter a {color: #fff; text-decoration: none;} #micrositefooter a:hover {text-decoration: underline;} #microsite #micrositeMainContent {min-height: 320px;} /* not sure about these two */ * html #microsite #micrositeMainContent {height: 320px;} /* for ie */ /* ********* ELEMENTS ************* */ /* ********* 1.23 LIFE EVENTS ************* */ /* leD is for D area and leC is for C area */ #leD {background: #eff1cc url(/sitemod/upload/Root/eGuidelines/stylesheets/images/leTop.gif) no-repeat 0 0; margin: 0 0 20px 0; } #leD div {background: url(/sitemod/upload/Root/eGuidelines/stylesheets/images/leBottom.gif) no-repeat 100% 100%; padding: 7px 0 15px 10px;} #leD h2 {font-size: 1.0em; padding: 2px 5px 0 0; margin: 0;} #leD button {margin: 5px 0 0 0; float: right;} #leD select {width: 146px; margin: 0; padding: 0;} * html #leD fieldset {width: 0} #leC {background: #eff1cc url(/sitemod/upload/Root/eGuidelines/stylesheets/images/leTop396.gif) no-repeat 0 0; margin: 0 0 20px 0;} #leC div {height: 5em; background: url(/sitemod/upload/Root/eGuidelines/stylesheets/images/leBottom396.gif) no-repeat 100% 100%;} #leC label {margin: 18px 8px 0 0; width: 140px} #leC select {width: 150px; margin: 19px 0 0 0;} #leC button {margin: 0 0 0 10px;} /* ********* 1.24 ADVICE AND GUIDANCE ************* */ /* leD is for D area and leC is for C area */ #adD {background: #e5eaef url(/sitemod/upload/Root/eGuidelines/stylesheets/images/adTop.gif) no-repeat 0 0; margin: 0 0 20px 0;} #adD div {background: url(/sitemod/upload/Root/eGuidelines/stylesheets/images/adBottom.gif) no-repeat 100% 100%; padding: 7px 0 15px 10px;} #adD h2 {font-size: 1.0em; padding: 2px 5px 0 0; margin: 0;} #adD button {margin: 5px 0 0 0; float: right;} #adD select {width: 146px; margin: 0;} * html #adD fieldset {width: 0} #adC {background: #e5eaef url(/sitemod/upload/Root/eGuidelines/stylesheets/images/adTop396.gif) no-repeat 0 0; margin: 0 0 20px 0;} #adC div {height: 5em; background: url(/sitemod/upload/Root/eGuidelines/stylesheets/images/adBottom396.gif) no-repeat 100% 100%;} #adC label {margin: 18px 8px 0 0; width: 140px} #adC select {width: 150px; margin: 19px 0 0 0;} #adC button {margin: 0 0 0 10px;} /* ********* 1.25 CONTEXTUAL NAVIGATION ************* */ #context {background: #fff url(/sitemod/upload/Root/eGuidelines/stylesheets/images/contextual-navigation-bg.gif) left bottom no-repeat; margin: 0 0 20px 0; padding: 0 0 1px 0;} #context div {padding: 5px 5px 4px 1px;} #context h2 {font-size: 1.0em; padding: 2px 5px 0 5px; margin: 0;} #context ul {padding: 0; margin: 0 0 0 5px !important;} /* Generic classes */ .italic {font-style: italic;} /* ********* 1.26 EXTRAS added by Mondo ************* */ /* generic, added for crisis system messages */ .generic {width: 100%; border: 1px solid #779abc; margin: 0 0 20px 0;} .generic td {padding: 5px;} .generic caption {background: #ccd8de; padding: 3px 0 3px 5px; font-weight: bold; font-size: 12px; text-align: left}