/* TRILLIAN 5 WEBSITE CSS 3.0 Designed and Coded by Cerulean Studios, 2006-2012 Deutsche Anpassungen by jazde86 of Deutsches Trillian Team, 2006-2012 */ *{padding: 0; margin: 0;} /* FONTS */ .title .text {font-family: Segoe UI, Arial, Helvetica, sans-serif; font-size: 48px; letter-spacing: 1px; color: #0054A8; text-align: left;} .title .subtext {font: 14px Segoe UI, Arial, Helvetica, sans-serif; color: #555; text-align: left;} .h100 .text, .top > .text {font-family: Segoe UI, Arial, Helvetica, sans-serif; font-size: 70px;} .h100 .subtext {font: 16px Segoe UI, Arial, Helvetica, sans-serif; font-weight: normal;} .h100.center .text, .h100.center .subtext {width: 100%; text-align: center; } .top .subtext {font: 16px Segoe UI, Arial, Helvetica, sans-serif; font-weight: normal;} .title .text.left, .title .subtext.left, .h100 .text.left, .h100 .subtext.left {text-align: left;} #dialog .title .text {text-align: center;} .header .nav, #header #nav {font: 11px Segoe UI, Arial, Helvetica, sans-serif; font-weight: 900; text-align: center; line-height: 48px; text-transform: uppercase; left: 181px; top:15px; width: 600px;} .header .nav a, #header #nav a {color: #0054A8; text-decoration: none; } #footer a, #helper a, #TB_helper a, .top a {color: #5C7A99; text-decoration: none; } .nav a:hover, .nav .select, .nav .select-small {color: #0054A8;} .subnav, #subnav {font: 12px Segoe UI, Arial, Helvetica, sans-serif; font-weight: 400; line-height: 24px; text-transform: none;} .top, .top p, .title .content p {color: 0054A8;} .top .content p {} /*filter:alpha(opacity=75); -moz-opacity:.75; opacity:.75;}*/ #footer p, #helper p, #TB_helper p {font: 11px Segoe UI, Arial, Helvetica, sans-serif; color: #5C7A99; text-align: right;} /* filter:alpha(opacity=67); -moz-opacity:.67; opacity:.67;*/ #footer .copyright { margin-top: -50px; } #footer strong {text-transform: uppercase;} .bbox .nav p {font: 11px Segoe UI, Arial, Helvetica, sans-serif; color: #0054A8; text-align: center; text-transform: uppercase;} .bbox .nav .select p {font-weight: 900;} h1 {color: #003060;} h2 {font: 32px "Segoe UI", Helvetica, Arial, sans-serif; color: #0054A8; letter-spacing: -1px; line-height: 30px; margin: 0;} h3 {font: 26px Segoe UI Light, Segoe UI, Helvetica, Arial, sans-serif; color: #0055AB; letter-spacing: -1px; line-height: 26px; margin: 0; padding: 0 0 20px 0;} h4, .h4 {font: 18px "Segoe UI", Helvetica, Arial, sans-serif; font-weight: normal; color: #0055AB; padding: 0; margin: 8px 0 5px 0;} h5, .h5 {font: 11px Arial Black, Arial, Helvetica, sans-serif; color: #004080; letter-spacing: -1px; margin: 0; padding: 0 0 8px 0; text-transform: uppercase;} h6, .h6 {font: bold 8px Arial, Helvetica, sans-serif; color: #728FAB; letter-spacing: 1px; margin: 0; padding: 5px 0 5px 0; text-transform: uppercase;} p, td, .card-field, .tile .text, li, #TB_caption {font: 13px "Segoe UI", Arial, Helvetica, sans-serif; line-height: 18px;} .card-desc, .card-header p {font: bold 11px Arial, Helvetica, sans-serif; color: #0055AB; text-transform: uppercase;} .card-desc strong {font: 11px Arial Black, Arial, Helvetica, sans-serif; font-weight: normal;} textarea, input, select {font: 12px "Segoe UI", Arial, Helvetica, sans-serif;} .card-input.large {font: 28px Arial, Helvetica, sans-serif;} .w4 .rbox h4, .w5 .rbox h4 {font-size: 12px; text-align: center; line-height: 14px; letter-spacing: 0;} .w4 .rbox p, .w5 .rbox p {font-size: 11px; text-align: center; line-height: 14px;} .w4 .rbox li, .w5 .rbox li {font-size: 11px; line-height: 14px;} .sIFR-active .title .text span, .sIFR-active .title .subtext span {visibility: hidden;} .sIFR-active .h100 .text span, .sIFR-active .h100 .subtext span {visibility: hidden;} .sIFR-active .top .text span, .sIFR-active .top .subtext span {visibility: hidden;} .more {text-align: right;} a {color: #004080;} .mbox a {text-decoration: none; border-bottom: 1px dotted #B2CFFB; color: #004080;} .mbox a:hover {text-decoration: none; border-bottom: 1px dotted #004080; } a.zoom, a.zoom:hover {border: 0;} .top a:hover {text-decoration: none; border-bottom: 1px dotted #FFFFFF; } .rbox.button p {color: black;} .button p, .button .text {font-family: "Segoe UI", Arial, Helvetica, sans-serif; color: white;} .button p {text-align: center; font-size: 12px;} .s100x25 {color: #fff; font-weight: 800; font-size: 12px; margin-top: -2px; margin-bottom: -4px;} .s180x40 p, .s400x40 p {font-family: Arial, Helvetica, sans-serif; color: #fff; font-weight: 800; font-size: 18px; letter-spacing: -1px;} .s200x60 {color: #fff; font-weight: 800; font-size: 24px; letter-spacing: -1px;} .s220x60 .text {font-size: 32px;} .s240x60 .text {font-size: 32px;} .s300x60 .text {font-size: 32px;} .sidebar, .sidebar p, .sidebar li {font: 11px "Segoe UI", Arial, Helvetica, sans-serif; color: black; line-height: 16px;} .diagram p {font-size: 11px; line-height: 14px;} .betatag {position: relative; top: -4px; font-size: 66%; font-style: italic; color: #FF8800} .h100 .betatag {top: -10px;} .emboss .first, .emboss .first a {position: relative; display: block; max-height: 1px; height: 1px; color: #000;} .emboss .second, .emboss .second a {position: relative; display: block;} .shadow .first {position: relative; display: block; max-height: 1px; height: 1px; z-index: 5;} .shadow .second {position: relative; display: block; color: #000;} .shadow.white .second {color: #fff;} .count {font-size: 75%;} .highlight h4 {color: #2288DD;} .highlight {cursor: help;} .highlight-cover {display: none;} strong.point {color: #0055AB;} /* POSITION */ html, body {overflow-x: auto; overflow-y: auto; background: white;} /* Container is used for normal scrolling pages, while Dialog is used for modal wizard-like pages. */ #container, #dialog {position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 540px; min-width: 1000px;} /* Background is done with my special stretch technique */ #container .background .layer, #dialog .background .layer {position: fixed; top: 0; left: 0; width: 100%; height: 100%;} .background-simple {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/common/images/DBox-Simple-v5.png') repeat-x;} /* Header */ #container .header, #container #header {position: relative; top: 0; margin: 0 auto; width: 1000px; height: 70px; z-index: 100;} #container #header #logo, #container .header .logo {position: absolute; top: 25px; left: 32px; width: 151px; height: 32px; background: url('/common/images/logo-de.png') no-repeat;} #dialog .header {position: absolute; top: 0; left: 0; width: 100%; height: 80px;} #dialog .header .logo {position: fixed; top: 16px; left: 16px; width: 36px; height: 32px; background: url('/common/images/logo-single.png') no-repeat; z-index: 9999;} #dialog.narrow .header .logo {left: 50%; margin-left: -474px;} .header .button {position: absolute; right: 30px; top: 25px;} /* Header Navigation */ .header .nav {position: absolute; top: 2px; width: 700px; height: 50px; padding-left: 15px;} #header #nav { top:15px; width: 700px; padding-left: 15px; } .header .nav div, #header #nav div {display: inline; padding: 0 10px 10px 10px; float: left;} .header .nav .select, #header #nav .select {background: url('/common/images/nav-select.png') center 25px no-repeat;} .nav .download {color: #4499DD; background: url('/common/images/nav-select-download.png') center 25px no-repeat;} .header .nav .select-small, #header #nav .select-small {background: url('/common/images/nav-select-small.png') center 25px no-repeat;} .header #help .select-small {background: url('/common/images/nav-select-small.png') center 4px no-repeat;} #container #header .logo-index {position: absolute; top: 22px; left: 0px; width: 115px; height: 9px; background: url('/images/nav-ceruleanstudios.png') no-repeat;} #header #nav {position: absolute; top: 15px; left: 181px; width: 700px; height: 50px;} #header #login { margin-top:30px; } #header #login, #header #login a, #header #login a:visited, .header #login, .header #login a, .header #login a:visited {font: 12px Segoe UI, Arial, Helvetica, sans-serif; text-align: right; color: #0054A8; text-decoration: none; underline: none; } #header #login {float: right; cursor: pointer; padding-right: 31px;} .header #login {float: right; margin-top: 18px; cursor: pointer; padding-right: 31px;} #header #login img, .header #login img {margin-bottom: -3px;} #header #login a, .header #login a {text-decoration: none;} #header #help, .header #help {font: 12px Segoe UI, Arial, Helvetica, sans-serif; text-align: right; color: #0054A8; } #header #help, .header #help {float: right; margin-top: 19px; margin-right: 30px; cursor: pointer; width: 50px; text-align: center; } #header #help a, #header #help a:visited, .header #help a, .header #help a:visited {text-decoration: none; underline: none; color: #0054A8; } /* Header Sub-Navigation (Line 2) */ .header .nav .subnav, #header #nav .subnav {position: absolute; top: 38px; left: 15px; margin-left: -11px; height: 20px; width: 635px;} .header .nav .subnav div, #header #nav .subnav div {display: inline; float: left; padding: 0 10px 10px 10px;} .header .nav .subnav .select, #header #nav .subnav .select {background: url('/common/images/nav-select-small.png') center 12px no-repeat;} .header .nav .subnav .select-small, #header #nav .subnav .select-small { background: url('/common/images/nav-select-small.png') center 12px no-repeat;} .header .nav .subnav .nav-search {display: inline;} .header .nav .subnav .nav-search .nav-search-text {width: 150px;} /* Main Content */ #container #content {position: relative; top: 0; left: 50%; margin-left: -490px; width: 980px; z-index:1;} #container #content-gad {position: relative; top: 0; left: 50%; margin-left: -490px; width: 450px; z-index:1;} #dialog #content {position: absolute; top: 80px; bottom: 80px; left: 50%; margin-left: -490px; width: 980px; z-index:1;} #dialog #c2 {display: table; width: 100%; height: 100%; margin-bottom: 80px;} #dialog #c3 {display: table-cell; vertical-align: middle;} /* #dialog #content {position: relative; top: -80; left: 50%; margin-left: -490px; width: 980px; margin-bottom: -80px;} */ /* Page Title */ .title {position: relative; margin: 0 auto; width: 1000px; height: 120px;} #dialog .title {top: -10px; z-index: 5;} .title .back {display: none;} .title .text {position: absolute; top: 24px; left: 20px; width: 920px; height: 30px;} .title .content {position: relative; top: 30px; left: 20px; width: 100%} /* Page Title - Tall 100px Type */ .h100 {height: 170px;} .h100 .back .l {position: absolute; top: 11px; left: 0; width: 11px; height: 90px; background: url('/common/images/tbox-l-100.png') no-repeat;} .h100 .back .m {position: absolute; top: 11px; left: 11px; width: 978px; height: 90px; background: url('/common/images/tbox-m-100.png') repeat-x;} .h100 .back .r {position: absolute; top: 11px; right: 0; width: 11px; height: 90px; background: url('/common/images/tbox-r-100.png') no-repeat;} .h100 .text {position: absolute; top: 20px; left: 20px; width: 920px; height: 100px;} .h100 .subtext {position: absolute; top: 105px; left: 22px; width: 920px; height: 30px;} /* Page Top (for display screenshots without Title) */ .top {position: relative; margin: 0 auto; width: 980px; z-index: 5;} .top .text {padding: 20px 20px 0 20px;} .top .subtext {padding: 0 20px 0 20px;} .top .content {position: relative; top: 30px; left: 30px; width: 100%} /* Bottom Navigation Box */ .bbox {position: fixed; top: 100%; margin: -59px auto 0 auto; width: 100%; height: 59px;} .bbox .back {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .bbox .back .l {position: absolute; top: 0; left: 0; width: 11px; height: 59px; background: url('/common/images/bbox-l.png') no-repeat;} .bbox .back .m {position: absolute; top: 0; left: 11px; width: 978px; height: 59px; background: url('/common/images/bbox-m.png') repeat-x;} .bbox .back .r {position: absolute; top: 0; right: 0; width: 11px; height: 59px; background: url('/common/images/bbox-r.png') no-repeat;} .bbox .nav {position: absolute; top: 0; left: 0; width: 100%; height: 59px;} .bbox .nav div {display: inline-block; position: relative; width: 60px; height: 59px;} .bbox .center {text-align: center;} .bbox .nav div p {position: absolute; top: 36px; left: 2px; width: 56px; margin: 0; padding: 0;} .bbox .nav a {text-decoration: none;} .bbox .nav div img {position: absolute; top: 0; left: 14px; margin: 0; padding: 0; border: 0;} .bbox .nav .next {width: 22px; background: url('/common/images/next.png') center center no-repeat;} .bbox .nav .select {background: url('/common/images/bbox-select.png') center bottom no-repeat;} .bbox .nav .disabled {background: none;} /* Middle Boxes */ .mbox {position: relative; margin: 0 auto; width: 980px; min-height: 120px; display: inline-block; margin-bottom: 20px; z-index:1;} .mbox-de {position: relative; margin: 0 auto; width: 980px; min-height: 120px; display: inline-block; margin-bottom: 20px; margin-top: 100px;} .mbox .back {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .mbox .back .tl {position: absolute; top: -4px; left: -4px; width: 5px; height: 5px; background: url('/common/images/mbox-tl.png') no-repeat;} .mbox .back .tm {position: absolute; top: -4px; left: 1px; right: 1px; height: 5px; background: url('/common/images/mbox-tm.png') repeat-x;} .mbox .back .tr {position: absolute; top: -4px; right: -4px; width: 5px; height: 5px; background: url('/common/images/mbox-tr.png') no-repeat;} .mbox .back .t-arrow {position: absolute; top: -13px; right: 0; width: 48px; height: 14px; background: url('/common/images/mbox-arrow-t.png') no-repeat;} .mbox .back .ml {position: absolute; top: 1px; bottom: 1px; left: -4px; width: 5px; background: url('/common/images/mbox-ml.png') repeat-y;} .mbox .back .mm {position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #F0F4F7; z-index:1;} .mbox .back .mr {position: absolute; top: 1px; bottom: 1px; right: -4px; width: 5px; background: url('/common/images/mbox-mr.png') repeat-y;} .mbox .back .b-arrow {position: absolute; bottom: -13px; right: 0; width: 48px; height: 14px; background: url('/common/images/mbox-arrow-b.png') no-repeat;} .mbox .back .bl {position: absolute; bottom: -12px; left: -4px; width: 5px; height: 13px; background: url('/common/images/mbox-bl.png') no-repeat;} .mbox .back .bm {position: absolute; bottom: -12px; left: 1px; right: 1px; height: 13px; background: url('/common/images/mbox-bm.png') repeat-x;} .mbox .back .br {position: absolute; bottom: -12px; right: -4px; width: 5px; height: 13px; background: url('/common/images/mbox-br.png') no-repeat;} .mbox .backtop-link {position: absolute; top: 20px; right: 20px; z-index: 20;} .mbox .backtop-link a, .mbox .backtop-link a:hover {border: 0;} /* Middle Boxes with a Specific Width or Height */ .w50 {width: 489px; display: inline-block; margin-right: -2px; vertical-align: top;} .w33 {width: 326px; display: inline-block; margin-right: -2px; vertical-align: top;} .w67 {width: 654px; display: inline-block; margin-right: -2px; vertical-align: top;} .h300 {height: 300px; max-height: 300px;} .mbox-with-h3 .back .mm {position: absolute; top: 100px; bottom: 0; left: 0; right: 0; background: url('/common/images/mbox-mm.png') repeat; z-index:1;} .mbox-with-h4 .back .mm {position: absolute; top: 40px; bottom: 0; left: 0; right: 0; background: url('/common/images/mbox-mm.png') repeat; z-index:1;} .h300 .back .mm {background: url('/common/images/mbox-mm-300.png') repeat-x;} .h100 .back .mm {background: url('/common/images/mbox-mm-160.png') repeat-x;} .h160 .back .mm {background: url('/common/images/mbox-mm-160.png') repeat-x;} .h50 {min-height: 50px;} .h50 .back .tl, .h50 .back .tr {background: none;} .h50 .back .ml, .h50 .back .mr {top: 0;} /* Middle Box Content */ .mbox .content {position: relative; z-index: 2; padding: 20px; zoom: 1; z-index:1;} #TB_window.mbox .content {padding: 0;} .mbox .content h1 {position: relative; height: 40px; max-height: 31px; padding: 9px 30px 0 30px; background: url('/common/images/mbox-mm-40.png') repeat-x; margin-bottom: 20px; z-index:1;} .mbox .content h2 {position: relative; padding: 16px 20px 23px 20px; background: #F8FAFC; border-bottom: 1px solid #E7EDF2; margin: -20px -20px 20px -20px; z-index:1;} .mbox .content p {position: relative; margin: 0; padding: 0 0 5px 0; text-align: justify; z-index:1;} /* #dialog .mbox .content {max-height: 500; overflow-x: hidden; overflow-y: auto;} This puts the scrollbar in a neat place, but I don't have a way to determine a max-height in CSS, and will result in double scrollbar hell in x768 users. 600 is a little arbitrary, no? I guess for 1280x1024 not to explode */ .mbox .full-diagram {position: relative; z-index: 2;} .mbox .diagram {position: relative; z-index: 2;} .mbox .diagram h5 {padding: 0; margin: 0 0 5px 0;} .mbox .diagram p {padding: 0; margin: 0 0 5px 0;} /* Sidebar Box */ .mbox .sidebar {position: relative; float: right; margin-right: -20px; width: 320px;} .sbbox {position: relative; margin: 0 0 20px 20px; padding: 1px 20px 1px 0;} .sbbox .back {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .sbbox .back .t {position: absolute; top: 0; left: 0; width: 280px; height: 10px; background: url('/common/images/sbbox-t.png') no-repeat;} .sbbox .back .m {position: absolute; top: 10px; bottom: 100px; width: 280px; background: url('/common/images/sbbox-m.png') repeat-y;} .sbbox .back .b {position: absolute; bottom: 0; left: 0; width: 280px; height: 100px; background: url('/common/images/sbbox-b.png') no-repeat;} /* Round Box */ .rbox {position: relative; display: inline-block; margin: 0 0 20px 0; width: 100%; height: 100%;} .rbox .back {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .rbox .back .tl {position: absolute; top: 0; left: 0; width: 10px; height: 10px; background: url('/common/images/rbox-tl.png') no-repeat;} .rbox .back .tm {position: absolute; top: 0; left: 10px; right: 10px; height: 10px; background: url('/common/images/rbox-tm.png') repeat-x;} .rbox .back .tr {position: absolute; top: 0; right: 0; width: 10px; height: 10px; background: url('/common/images/rbox-tr.png') no-repeat;} .rbox .back .ml {position: absolute; top: 10px; bottom: 10px; left: 0; width: 10px; background: url('/common/images/rbox-ml.png') repeat-y;} .rbox .back .mm {position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; background: url('/common/images/rbox-mm.png') repeat; z-index:1;} .rbox .back .mr {position: absolute; top: 10px; bottom: 10px; right: 0; width: 10px; background: url('/common/images/rbox-mr.png') repeat-y;} .rbox .back .bl {position: absolute; bottom: 0; left: 0; width: 10px; height: 10px; background: url('/common/images/rbox-bl.png') no-repeat;} .rbox .back .bm {position: absolute; bottom: 0; left: 10px; right: 10px; height: 10px; background: url('/common/images/rbox-bm.png') repeat-x;} .rbox .back .br {position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; background: url('/common/images/rbox-br.png') no-repeat;} /* Round Box on Hover or Select */ .rbox.hover .back .tl {background: url('/common/images/rbox-hover-tl.png') no-repeat;} .rbox.hover .back .tm {background: url('/common/images/rbox-hover-tm.png') repeat-x;} .rbox.hover .back .tr {background: url('/common/images/rbox-hover-tr.png') no-repeat;} .rbox.hover .back .ml {background: url('/common/images/rbox-hover-ml.png') repeat-y;} .rbox.hover .back .mm {background: url('/common/images/rbox-hover-mm.png') repeat;} .rbox.hover .back .mr {background: url('/common/images/rbox-hover-mr.png') repeat-y;} .rbox.hover .back .bl {background: url('/common/images/rbox-hover-bl.png') no-repeat;} .rbox.hover .back .bm {background: url('/common/images/rbox-hover-bm.png') repeat-x;} .rbox.hover .back .br {background: url('/common/images/rbox-hover-br.png') no-repeat;} .rbox.select .back .tl {background: url('/common/images/rbox-select-tl.png') no-repeat;} .rbox.select .back .tm {background: url('/common/images/rbox-select-tm.png') repeat-x;} .rbox.select .back .tr {background: url('/common/images/rbox-select-tr.png') no-repeat;} .rbox.select .back .ml {background: url('/common/images/rbox-select-ml.png') repeat-y;} .rbox.select .back .mm {background: url('/common/images/rbox-select-mm.png') repeat;} .rbox.select .back .mr {background: url('/common/images/rbox-select-mr.png') repeat-y;} .rbox.select .back .bl {background: url('/common/images/rbox-select-bl.png') no-repeat;} .rbox.select .back .bm {background: url('/common/images/rbox-select-bm.png') repeat-x;} .rbox.select .back .br {background: url('/common/images/rbox-select-br.png') no-repeat;} /* Round Box Rows and Columns */ .row {margin: 0 -30px 0 0;} .content .flush {margin: -20px -20px 0 -20px; padding: 0px 0px 10px 0px;} .flush .w3 {width: 298px; } .flush .row .column.w3 .feature { padding-left: 20px; margin-right: -20px; padding-right: 10px;} .flush .row .column.w6 .feature { padding-left: 20px; margin-right: -20px; padding-right: 10px;} .flush .row .column .feature.text { margin-top: 20px; } .flush .row .column .feature-de { position: absolute; top: 20px; left: 249px; margin-top: 0px; padding-right: 10px; } .flush .row .column .feature-down { position: absolute; top: 80px; left: 249px; margin-top: 0px; padding-right: 10px; } .flush .row .column .feature-pri { position: absolute; top: 80px; left: 249px; margin-top: 0px; padding-right: 10px; } .flush .row .column.w6 .feature img { margin-left: -20px; } .flush .row .column.w3 .feature img { margin-left: -20px; } .column {display: inline-block; vertical-align: top; margin: 0 25px 0 0;} .column-block {display: inline-block; vertical-align: top; margin: 0 25px -20px 0;} .w2 {width: 445px;} .w3 {width: 293px;} .w32 {width: 586px;} .w4 {width: 220px; margin-right: 15px;} .w5 {width: 172px; margin-right: 15px;} .w6 {width: 140px; margin-right: 15px;} .de {display: inline-block; min-height: 420px; height: auto;} .pri {display: inline-block; min-height: 1180px; height: auto;} .rbox-w2 {width: 460px; margin-right: 15px;} .rbox-w3 {width: 300px; margin-right: 15px;} .rbox-w23 {width: 620px; margin-right: 15px;} /* List Adjustments */ li {margin: 0 0 5px 0; padding-left: 12px; text-indent: -12px; list-style-image: url('/common/images/bullet.png'); list-style-position: inside;} ul {margin-bottom: 20px;} .w4 .rbox li {margin: 0; list-style-image: url('/common/images/bullet-small.png');} /* Helper Buttons */ #helper, #TB_helper {position: fixed; top: 0; right: 0; width: 100px; padding: 10px 10px 0 0; z-index: 90;} #TB_helper {z-index: 1000;} #helper p, #TB_helper p {padding: 0 0 3px 0; margin: 0;} #helper p span, #TB_helper p span {display: none; padding-right: 3px;} #helper img, #TB_helper img {display: inline; vertical-align: middle; margin: 1;} #dialog.narrow #helper {right: 50%; margin-right: -490px;} /* Footer */ #container #footer {position: relative; top: 0; left: 0; width: 100%; padding: 15px 0 37px 0; margin-top: 50px; background: white url('/common/images/DBox-Simple.png') repeat-x;} #container #footer .fbox {position: relative; margin: 0 auto; width: 1000px;} #content #footer {position: relative; top: 10px; width: 1000px; z-index:1;} #dialog #footer {position: fixed; bottom: 0; right: 0; margin-left: 500px; padding: 0 10px 10px 0; overflow: hidden; z-index: 1000;} #footer p {padding: 0; margin: 0;} #dialog.narrow #footer {right: 50%; margin-right: -490px; margin-left: 400px;} /* Miscellaneous */ hr {border: 0px; background: #edf6f9; height: 1px; margin: 20px -20px 20px -20px;} .thickboxed {display: none;} #TB_window .ajax {width: 980px;} #TB_window .ajax .content {width: 940px;} #TB_window .table {width: 940px;} #TB_window h2 {padding-right: 80px; margin-right: -80px;} #TB_window .command {position: relative; width: 980px; margin: 20px 0 0 -20px;} /* Buttons */ .button {cursor: pointer;} .button a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-decoration: none; border: none; color: white; z-index: 10; } .button a:hover {border: none;} .button.disabled {cursor: default; color: gray;} .button.disabled a {color: gray;} .s100x25 {position: relative; top: 0; left: 0; width: 114px; height: 39px;} .s100x25 .text {position: absolute; top: 7px; left: 12px; width: 90px; height: 20px; text-align: center;} .s100x25.green {background: url('/common/images/button-green-100x25.png') no-repeat;} .s100x25.orange {background: url('/common/images/button-orange-100x25.png') no-repeat;} .s180x40 {position: relative; width: 180px; height: 40px;} .s180x40 p {line-height: 40px;} .s180x40.green {background: url('/common/images/button-green-180x40.png') no-repeat;} .s180x40.orange {background: url('/common/images/button-orange-180x40.png') no-repeat;} .s190x30 {position: relative; top: 0; left: 0; width: 190px; height: 30px;} .s190x30 p {line-height: 26px;} .s190x30.green {background: url('/common/images/button-green-190x30.png') no-repeat;} .s200x30 {position: relative; width: 200px; height: 30px;} .s200x30 p {line-height: 30px; text-align: center !important;} .s200x30.green {background: url('/common/images/button-green-200x30.png') no-repeat;} /* Green is for Beginning a process that is no permanent yet. */ .s200x30.blue {background: url('/common/images/button-blue-200x30.png') no-repeat;} /* Blue is for normal things. */ .s200x30.gray {background: url('/common/images/button-gray-200x30.png') no-repeat;} /* Gray is for Cancellation that is no big deal. */ .s200x30.orange {background: url('/common/images/button-orange-200x30.png') no-repeat;} /* Orange is for Creation of a process that is permanent. */ .s200x30.red {background: url('/common/images/button-red-200x30.png') no-repeat;} /* Red is for Destruction that is big deal. */ .s200x30.disabled {background: url('/common/images/button-disabled-200x30.png') no-repeat;} /* Disabled is for any temporarily disabled functions. */ .s200x60 {position: relative; top: 0; left: 0; width: 234px; height: 74px;} .s200x60 .icon {position: absolute; top: 16px; left: 20px; width: 32px; height: 32px;} .s200x60 .text {position: absolute; top: 16px; left: 62px; width: 180px; height: 40px;} .green.s200x60 {background: url('/common/images/button-green-200x60.png') no-repeat;} .s200x60.disabled {background: url('/common/images/button-disabled-200x60.png') no-repeat;} .s240x70 {position: relative; width: 254px; height: 84px;} .s240x70 .text {position: absolute; top: 10px; left: 15px; width: 224px; height: 64px;} .s240x70.blue {background: url('/common/images/button-blue-240x70.png') no-repeat;} .s400x40 {position: relative; width: 400px; height: 40px;} .s400x40 p {position: absolute; top: 10px; left: 10px; width: 380px; height: 30px;} .s400x40.blue {background: url('/common/images/button-blue-400x40.png') no-repeat;} .s220x60 {position: relative; width: 200px; height: 60px;} .s220x60 .text {position: absolute; top: 0px; left: 0px; width: 200px; height: 60px;} .s220x60.pink { background: url('/common/images/button-pink-200x60.png'); } .s240x60 {position: relative; width: 240px; height: 60px;} .s240x60 .text {position: absolute; top: 0px; left: 0px; width: 240px; height: 60px;} .s240x60.blue { background: url('/common/images/button-blue-240x60.png'); } .s240x60.pink { background: url('/common/images/button-pink-240x60.png'); } .s300x60 {position: relative; width: 300px; height: 60px;} .s300x60 .text {position: absolute; top: 0px; left: 0px; width: 300px; height: 60px;} .s300x60.green {background: url('/common/images/button-green-300x60.png') no-repeat;} .s300x60.orange {background: url('/common/images/button-orange-300x60.png') no-repeat;} .s300x60.blue { background: url('/common/images/button-blue3-300x60.png'); } .s300x60.pink { background: url('/common/images/button-pink-300x60.png'); } /* DTT */ .s300x30 {position: relative; width: 300px; height: 30px;} .s300x30 .text {position: absolute; top: 0px; left: 0px; width: 300px; height: 30px;} .s300x30.blue { background: url('/common/images/button-blue-300x30.png'); } /* Tiles for Icons */ .tiles {padding: 5px 0 5px 0;} .tiles + .tiles {padding: 0 0 5px 0; margin-top: -5px;} .tile.s48x48 {position: relative; display: inline-block; width: 88px; height: 94px; margin: 1;} .tile.s48x48 .icon {position: absolute; top: 6px; left: 0; width: 88px; text-align: center;} .tile.s48x48 .text {position: absolute; top: 58px; left: 0; width: 88px; text-align: center;} .tile.s48x48 .back {position: absolute; top: 0; left: 0; width: 88px; height: 94px;} .tile.s64x64 {position: relative; display: inline-block; width: 102px; height: 104px; margin: 1;} .tile.s64x64 .icon {padding-top: 6px; left: 0; width: 102px; text-align: center;} .tile.s64x64 .text {padding-top: 6px; left: 0; width: 102px; text-align: center;} .tile.s64x64 .back {top: 0; left: 0; width: 102px; height: 104px;} .tile.s96x96 {position: relative; display: inline-block; width: 144px; height: 148px; margin: 1;} .tile.s96x96 .icon {position: absolute; top: 6px; left: 0; width: 144px; text-align: center;} .tile.s96x96 .text {position: absolute; top: 108px; left: 4px; width: 136px; text-align: center;} .tile.s96x96 .back {position: absolute; top: 0; left: 0; width: 144px; height: 148px;} .tiles a, .tiles a:hover {border: 0;} a:hover .tile .back {border: 1px solid black; background: #004488; -webkit-border-radius: 5px; -webkit-opacity: .10; -moz-border-radius: 5px; -moz-opacity: .10; border-radius: 5px; opacity: .10; filter: alpha(opacity = 10);} /* Tables */ /* Edit Cards or Settings Cards for Dialog Mode */ .card {display: table; padding: 10px 0 10px 0; width: 100%;} .table {display: table; margin: 10px 0 10px 0; border-top: 1px dotted white; width: 100%;} .card-row {display: table-row;} .table .card-row div {border-bottom: 1px dotted white; padding: 8px 0 2px 0;} .card-desc {display: table-cell; width: 240px; padding: 3px 10px 3px 0; text-align: right; vertical-align: middle;} .card-field {display: table-cell; padding: 3px 0 3px 0; text-align: left; vertical-align: middle;} .card-field.error {background: url('/common/images/warn.png') 0px 4px no-repeat; text-indent: 20px;} .card-input {width: 600px;} .card-input.small {width: 175px;} .card-input.large {width: 600px; height: 40px;} .card-input.error {background: #FFEEBB;} .card-checkbox {position: relative; top: 2px; margin-right: 5px;} .card-field textarea {width: 600px; height: 90px;} .command {position: relative; height: 60px; width: 100%; left: 0; background: url('/common/images/mbox-mm-60.png') repeat-x bottom; text-align: center;} .command .left {display: inline-block; float: left; left: 20px; width: 200px; height: 30px; top: 15px; margin-right: 10px;} .command .center {position: absolute; left: 50%; margin-left: -100px; width: 200px; height: 30px; top: 15px;} .command .right {display: inline-block; float: right; right: 20px; width: 200px; height: 30px; top: 15px; margin-left: 10px;} input.button {border: 0; color: white; cursor: pointer;} .command .button.green {background: url('/common/images/button-green-200x30.png') no-repeat;} .command .button.blue {background: url('/common/images/button-blue-200x30.png') no-repeat;} .command .button.gray {background: url('/common/images/button-gray-200x30.png') no-repeat;} .command .button.orange {background: url('/common/images/button-orange-200x30.png') no-repeat;} .command .button.red {background: url('/common/images/button-red-200x30.png') no-repeat;} .command .button.disabled {background: url('/common/images/button-disabled-200x30.png') no-repeat;} .command p {margin: 0;} /* Drooping buttons in Chrome and FF? */ .error-field {font: 12px "Segoe UI", Arial, Helvetica, sans-serif; line-height: 18px; display: table-cell; padding: 3px 0 3px 0; text-align: left; vertical-align: middle; background: url("/common/images/warn.png") 0px 4px no-repeat; text-indent: 20px;} img { border: none; }