/*
Web Development Framework for XHTML and CSS - Master Style Sheets
Filename: main.css
REVISION HISTORY
Ver 0.94, 2008-07-16
- Work in progress.
Ver 0.95, 2008-10-21
-
Copyright (C) Swedbank AB (publ) 2008.
All rights reserved.
*/
/****/
/* REVISION HISTORY
Ver 1.0, 2008-06-24
- Initial release.*/
/* html{color:#000;background:#FFF;} */ /*Do not style HTML!!!*/
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
/*input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}*/ /*När behövs denna? Den resulterar i mini-knappar*/
legend{color:#000;}
/****/
/* */
#header {
float:left;
clear:both;
width:100%;
}
#content {
float:left;
clear:both;
width:100%;
padding-top:1em;
}
#footer {
float:left;
clear:both;
width:100%;
}
body {
color: #222;
/*font-size: 0.75em; 75%;*/
line-height: 1.333em;
margin: 0;
max-width: 84em;
min-width: 64em;
padding: 0;
}
a,a:link,
a:active,
a:visited,
a:hover { /** Bör hover ändras? **/
color: #ea5e0d;
text-decoration: underline;
}
a.external,
a.external:link,
a.external:active {
font-size: 0.917em;
font-weight: bold;
}
a.external:visited {
font-size: 1em;
font-weight : normal;
}
ol li {
list-style-position: inside;
list-style-type: decimal;
}
/* */
#header {
background: url(../css/images/gradient_grey.gif) repeat-y right; /*Default IB-style*/
overflow: hidden;
}
#header .logo {
float: left;
padding: 1.25em 0 1.25em 1.25em;
vertical-align: middle;
}
#header .logo * {
vertical-align: middle;
}
#header .logo p {
color: #555;
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.333em;
font-weight: normal;
letter-spacing: 1px;
padding-left: 0.833em;
}
#header ul.navigation {
background: transparent url(../css/images/navigation_header_bg.gif) no-repeat left bottom;
float: right;
margin: 0;
padding: 0;
}
#header ul.navigation li {
float: left;
height: 1.667em;
list-style: none;
padding: 0.167em 0 0.167em 0;
}
#header li.logout {
background: #ea5e0d url(../css/images/navigation_header_bg_logout.gif) left bottom repeat-x;
}
#header ul.navigation li a {
border-color: #ccc;
border-style: solid;
border-width: 0 1px 0 0;
color: #fff;
padding: 0 0.833em 0 0.833em;
text-decoration: none;
}
#header ul.navigation li a:hover {
text-decoration: underline;
}
#header ul.navigation li.last a {
border: 0;
}
#header ul.navigation li.logout a {
border: 0;
font-weight: bold;
}
#header ul.navigation li.first a {
padding-left: 18px;
}
#header .user {
color: #666;
float: right;
padding: 0.167em 1em 0 0;
}
#header .current-time {
color: #666;
float: right;
padding: 0.167em 1em 0 0;
}
#header span,
#header ul {
font-size: 0.917em;
}
#header .commitments {
clear: right;
float: right;
margin: 0.833em 0.667em 0.833em 0;
padding: 0;
text-align: right;
width: 33%;
}
#header .commitments li {
color: #666;
line-height: 0.917em;
list-style: none;
margin: 0;
padding: 0 0 0.333em 0;
}
/* */
/* */
#nav h1 {
display: block;
clear:both;
font-size: 1.333em;
font-weight: bold;
padding-top: 0.583em;
}
#nav h2 {
display: block;
clear:both;
font-size: 1.2em;
font-weight: bold;
/* padding: 0.33em; */
}
#nav .sub-nav {
display:block;
padding: 0.25em 0 0 1.25em;
width: 100%;
}
#nav .sub-nav ul {
float:left;
margin: 0 0 0 0;
padding-top: 0.583em;
}
#nav .sub-nav ul li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav .sub-nav ul li a,
#nav .sub-nav ul li span {
border-color: #ccc;
border-style: solid;
border-width: 0 1px 0 0;
padding: 0 0.417em;
text-decoration: none;
}
#nav .sub-nav ul li a:hover {
text-decoration: underline;
}
#nav .sub-nav ul li.first a,
#nav .sub-nav ul li.first span {
padding-left: 0;
}
#nav .sub-nav ul li.last a,
#nav .sub-nav ul li.last span {
border: none;
}
#nav .sub-nav .disabled {
color: #999;
}
#nav .sub-nav .selected {
color: #222;
}
/*******************End Content*****************************/
#content .step-nav {
float: right;
width: auto;
}
#content .step-nav span {
display: block;
float: left;
text-align: right;
width: auto;
}
#content .step-nav ol {
display: block;
float: left;
padding-bottom: 0.25em;
}
#content .step-nav ol li {
border-right: #ccc 1px solid;
color: #ccc;
float: left;
list-style-type: none;
padding: 0 .417em;
}
#content .step-nav ol li.active {
color: #222;
}
#content .step-nav ol li.last {
border: none;
}
#content .step-nav ol li a {
text-decoration: none;
}
#content .step-nav ol li a:hover {
text-decoration: underline;
}
/* */
/* */
/* #content {
clear: both;
padding: 1em 1.25em 0 0;
margin: 0 0 1em 0;
} */
#content .section .footer {
margin-bottom: 1em;
}
/*******************End Content*****************************/
/*******************Start Section*****************************/
.section {
margin: 0 0 0 1.25em;
}
.section .header h3{
font-weight: bold;
letter-spacing: 1px;
display:inline;
font-size: 1em;
padding: 0.25em 65px 0.083em 0.833em;
line-height: 1.39em;
}
.section .content {
clear: left;
padding: 0.833em 0.833em 1em 0;
}
.section .content p,
.section .content a,
.section .content ul,
.section .content ol {
padding-bottom: 0.833em;
margin-left: 0.833em;
}
.section .content li ul,
.section .content li ol {
padding-bottom: 0;
margin-left: 0.833em;
}
.section .content p.lead {
font-weight: bold;
}
.section .content p.image-caption {
font-size: 0.917em;
margin: 0;
}
/* .section .content ul li {
list-style-type: disc;
list-style-position: inside;
} */
.section .content ol li a,
.section .content ul li a {
padding-bottom: 0;
margin-left: 0;
}
.section .content a.expanding {
clear: both;
display: block;
}
.section .content div a {
margin-left: 0;
}
.section .content ol,
.section .content h1,
.section .content h2,
.section .content h3,
.section .content h4,
.section .content h5 {
padding-left: 0.833em;
}
.section .content h4 {
font-size: 1em;
font-weight: bold;
border-bottom:1px solid #666;
margin: 0 -0.833em 0.5em 0;
}
.section .content h4.skum {
border-top:1px solid #666;
}
.section .content h5 {
font-size: 1em;
font-weight: bold;
/* border-bottom:1px solid #222; */
margin-left: 1em;
color:#666;
padding:0;
}
/*temporary */
.section .content .table-container {
margin-left: 0.833em;
}
.section .content .dl-container {
margin-left: 0.833em;
}
/**Behövs fler containers?? **/
.section .content div.last,
.section .content ul.last,
.section .content ol.last,
.section .content p.last,
.section .content a.last,
.section .content span.last {
padding-bottom: 0;
}
/* */
.section.main {
clear: both;
color: #222;
background: url(../css/images/section_body_bg.jpg) repeat-y scroll right center;
}
.section.main .header {
background: #dcdcdc url(../css/images/section_header_bg.gif) left top repeat-x;
border-bottom: #ccc 1px solid;
border-left: #f90 0.4em solid;
border-right: #ccc 1px solid;
border-top: #e1e1e1 1px solid;
color: #222;
display: block;
font-size: 1em;
font-weight: bold;
padding: 1px 0 0.083em 0.5em;
letter-spacing: 1px;
line-height: 1.5em;
}
.section.main div.content {
color: #222;
border-bottom: none;
border-left: #ccc 1px solid;
border-right: #ccc 1px solid;
}
.section.main div.footer {
background: transparent url(../css/images/section_footer_bg.gif) left bottom no-repeat;
border: none;
border-right: #ccc 1px solid;
min-height: 20px;
}
.section.main div.delimiter {
border-top: #ccc 1px dashed;
}
.section.main div.footer button,
.section.main div.delimiter button,
.section.main div.footer input,
.section.main div.delimiter input {
margin: 0.533em 0.2em 0.533em 0; /*0.833em*/
}
/* */
/* */
.section.system {
color: #222;
clear: both;
}
.section.system .header h3{
background: #ff9900 url(../css/images/section_system_header_bg.gif) right no-repeat;
color: #fff;
}
.section.system div.content {
border: #f90 1px solid;
border-bottom: none;
padding: 0.833em;
padding-bottom: 0;
}
.section.system div.footer {
background: transparent url(../css/images/section_system_bg.gif) left bottom no-repeat;
border: none;
border-right: #f90 1px solid;
min-height: 20px;
}
.section.system div.delimiter {
border-top: #f90 1px dashed;
}
/* */
/* */
.section.operation {
/* clear: both; */
color: #222;
}
.section.operation .header{
padding:0;
}
.section.operation .header h3 {
background: #ff9900 url(../css/images/section_operation_header_bg.gif) right no-repeat; /*#ff9900*/
color: #fff;
}
.section.operation div.content {
border: #f90 1px solid;
border-bottom: none;
margin-top:0px;
padding: 0.833em 0 0 0;
}
.section.operation div.footer {
border: none;
border-right: #f90 1px solid;
background: transparent url(../css/images/section_operation_bg.gif) left bottom no-repeat;
min-height: 20px;
}
.section.operation div.delimiter {
border-top: #f90 1px dashed;
}
/* */
/* */
.section.reminder{
color: #222;
clear: both;
}
.section.reminder .header h3 {
background: #ff6600 url(../css/images/section_reminder_header_bg.gif) right no-repeat;
color: #fff;
}
.section.reminder div.content {
border: #f90 1px solid;
border-bottom: none;
padding-bottom: 0;
}
.section.reminder div.footer {
border: none;
border-right: #f90 1px solid;
background: transparent url(../css/images/section_reminder_bg.gif) left bottom no-repeat;
min-height: 20px;
}
.section.reminder div.delimiter {
border-top: #f90 1px dashed;
}
/* */
/* */
.section.info {
clear: both;
color: #222;
}
.section.info .header h3{
background: #222222 url(../css/images/section_info_header_bg.gif) right no-repeat;
color: #fff;
}
.section.info .content .inactive {
color: #999;
}
.section.info div.content {
border: #ccc 1px solid;
border-bottom: none;
padding-bottom: 0;
}
.section.info div.footer {
background: transparent url(../css/images/section_info_bg.gif) left bottom no-repeat;
border: none;
border-right: #ccc 1px solid;
min-height: 20px;
}
.section.info div.delimiter {
border-top: #ccc 1px dashed;
}
/* */
/* */
.section.error {
color: #222;
clear: both;
}
.section.error .header h3{
background: #cc0e08 url(../css/images/section_error_header_bg.gif) right no-repeat;
color: #fff;
}
.section.error div.content {
border: #c00 1px solid;
border-bottom: none;
padding-bottom: 0;
}
.section.error div.footer {
background: transparent url(../css/images/section_error_bg.gif) left bottom no-repeat;
border: none;
border-right: #c00 1px solid;
min-height: 20px;
}
.section.error div.delimiter {
border-top: #c00 1px dashed;
}
ol.error, span.error {
color: #c00;
font-weight: bold;
}
ol.error label {
font-weight: normal;
}
input.error {
background-color: #eececc;
}
select option.error {
background-color: #eececc;
}
p.error {
color: #c00;
}
/* */
/*******************End Section*****************************/
/* */
#content .section .content dl {
float:left;
clear: both;
width:100%;
padding: 0.25em;
/* padding-left: 40%; */ /*Old version */
/* position: static; */ /*Static behövs för att de skö döljas vid blindup i floatstrukturen */
/* width: 60%; */
}
#content .section .content dl.first {
border-top: none;
}
#content .section .content dl dt {
float: left;
font-size: 0.917em;
font-weight: bold;
/* display: block; */ /*Old version */
/* margin-left: -66%; */ /** margin-left = dl:width/dl-padding-left **/
/* width: 66%; */ /** width = dl:width/dl-padding-left **/
}
#content .section .content dl dd {
float:right;
clear:right;
}
dl{border-top: 1px dotted #ccc;}
dt {width:30%;}
dd {width:70%;}
#content .section .content dl dd label {
padding-right: 0.25em;
}
#content .section .footer {
clear: both;
text-align: right;
}
/* */
/* */
#content .section .content .table-container table {
width: 100%;
clear: both;
}
#content .section .content .table-container table caption {
color: #555;
font-weight: bold;
padding: 0.417em 0 0 0.25em;
}
#content .section .content .table-container table th {
border-top: 1px dotted #ccc;
padding: 0.167em .25em 0 .25em;
color: #222;
font-size: 0.917em;
font-weight: bold;
}
#content .section .content .table-container table th a {
color: #222;
text-decoration: none;
}
#content .section .content .table-container table th a:hover {
text-decoration: underline;
}
#content .section .content .table-container table td {
padding: 0.25em;
border-top: 1px dotted #ccc;
height: 2.3em;
}
#content .section .content .table-container table td p {
margin-left: 0;
}
#content .section .content .table-container table tr.first td,
#content .section .content .table-container table tr.first th {
border: none;
}
#content .section .content .table-container table tr td.sum,
#content .section .content .table-container table tr th.sum { /*th tillagd*/
border-top: 1px solid #222;
font-weight: bold;
/* text-align: right; */
}
#content .section .content .table-container table .currency {
text-align: right;
}
/* */
/* */
.grid {
float: left;
clear: right;
}
.width100,
.width-full {
width: 100%;
}
.width95 {
width: 95%;
}
.width90 {
width: 90%;
}
.width85 {
width: 85%;
}
.width80 {
width: 80%;
}
.width75,
.width-threeforths {
width: 75%;
}
.width70 {
width: 70%;
}
.width66,
.width-twothirds {
width: 66.66%;
}
.width65 {
width: 65%;
}
.width60 {
width: 60%;
}
.width55 {
width: 55%;
}
.width50,
.width-half {
width: 50%;
}
.width45 {
width: 45%;
}
.width40 {
width: 40%;
}
.width35 {
width: 35%;
}
.width33,
.width-third {
width: 33.33%;
}
.width30 {
width: 30%;
}
.width25,
.width-forth {
width: 25%;
}
.width20 {
width: 20%;
}
.width15 {
width: 15%;
}
.width10 {
width: 10%;
}
.width5 {
width: 5%;
}
/* */
/* */
/* */
/* */
.popup #nav ul {
display: block;
float: right;
font-size: 0.917em;
}
.popup #nav ul li {
float: left;
height: 1.667em;
padding: 0.167em 0;
}
.popup #nav ul li a {
border-right: #ccc 1px solid;
display: block;
padding: 0 0.833em;
}
.popup #nav ul li.last a {
border: none;
padding-right: 0.833em;
}
.popup #content {
padding: 1.25em;
}
.popup #content h1,
.popup #content h2 {
font-size:1.333em;
font-weight: bold;
padding-bottom:0.833em;
}
/* */
/* alternative*/
.section .content .steps ul li { /* Stegat flöde */
list-style:none;
padding: 0.4em 0 0.4em 2.2em;
min-height: 0.8em;
vertical-align:middle;
}
.section .content .steps ul li span{
font-weight: normal;
}
.section .content .steps li.i1 { background: url(../css/images/linkicons/bullet-orange-1.gif) left no-repeat; }
.section .content .steps li.i1.current{ background: url(../css/images/linkicons/bullet-gray-1.gif) left no-repeat; }
.section .content .steps li.i2 { background: url(../css/images/linkicons/bullet-orange-2.gif) left no-repeat; }
.section .content .steps li.i2.current { background: url(../css/images/linkicons/bullet-gray-2.gif) left no-repeat; }
.section .content .steps li.i3 { background: url(../css/images/linkicons/bullet-orange-3.gif) left no-repeat; }
.section .content .steps li.i3.current { background: url(../css/images/linkicons/bullet-gray-3.gif) left no-repeat; }
.section .content .steps li.i4 { background: url(../css/images/linkicons/bullet-orange-4.gif) left no-repeat; }
.section .content .steps li.i4.current { background: url(../css/images/linkicons/bullet-gray-4.gif) left no-repeat; }
.section .content .steps li.i5 { background: url(../css/images/linkicons/bullet-orange-5.gif) left no-repeat; }
.section .content .steps li.i5.current { background: url(../css/images/linkicons/bullet-gray-5.gif) left no-repeat; }
.section .content .steps li.i6 { background: url(../css/images/linkicons/bullet-orange-6.gif) left no-repeat; }
.section .content .steps li.i6.current { background: url(../css/images/linkicons/bullet-gray-6.gif) left no-repeat; }
.section .content .steps li.i7 { background: url(../css/images/linkicons/bullet-orange-7.gif) left no-repeat; }
.section .content .steps li.i7.current { background: url(../css/images/linkicons/bullet-gray-7.gif) left no-repeat; }
.section .content .steps li.i8 { background: url(../css/images/linkicons/bullet-orange-8.gif) left no-repeat; }
.section .content .steps li.i8.current { background: url(../css/images/linkicons/bullet-gray-8.gif) left no-repeat; }
.section .content .steps li.i9 { background: url(../css/images/linkicons/bullet-orange-9.gif) left no-repeat; }
.section .content .steps li.i9.current { background: url(../css/images/linkicons/bullet-gray-9.gif) left no-repeat; }
.section .content .steps li.i10 { background: url(../css/images/linkicons/bullet-orange-10.gif) left no-repeat; }
.section .content .steps li.i10.current { background: url(../css/images/linkicons/bullet-gray-10.gif) left no-repeat; }
.section .content .steps li.i11 { background: url(../css/images/linkicons/bullet-orange-11.gif) left no-repeat; }
.section .content .steps li.i11.current { background: url(../css/images/linkicons/bullet-gray-11.gif) left no-repeat; }
.section .content .steps li.i12 { background: url(../css/images/linkicons/bullet-orange-12.gif) left no-repeat; }
.section .content .steps li.i12.current { background: url(../css/images/linkicons/bullet-gray-12.gif) left no-repeat; }
li.current a {
text-decoration:none;
color: #000;
font-weight:bold;
}
.section .content .steps ul li p {
margin-top: 0.5em;
}
/* */
/* */
/* */
.clear { clear: both;}
.right {text-align:right;}
.floatright {float:right;}
.left {text-align:left;}
.floatleft {float:left;}
.noborder {border:none;}
.nobackground {background:none;}
#header .hidden,
#nav .hidden,
#content .hidden,
#footer .hidden {
display: none;
}
#header .speech-only,
#nav .speech-only,
#content .speech-only,
#footer .speech-only {
display: none;
}
/* */
/**Expanders start **/
/* .section .header .expand{
float:right;
background: url(images/smallbtn/smallbtn-gray-collapse.png) no-repeat;
width:18px;
height:18px;
}
.section .header .expand.up{
background: url(images/smallbtn/smallbtn-gray-expand.png) no-repeat;
}
.section .header .help{
float:right;
background: url(images/smallbtn/smallbtn-orange-query.gif) no-repeat;
width:18px;
height:18px;
} */
.section .header button{float:right;}
.section .header .helptext{
position: absolute;
display:none;
width:200px;
background:#fff;
border:1px solid #009;
padding:5px;
}
/**Expanders slut **/