/* basis */ body { margin: 0; background: #2b2b2b; font-family: 'lucida grande', verdana; } .width { width: 900px; text-align: left; } .break { float: none; clear: both; } .end { width: 100%; height: 40px; } .hidden { display: none; } /* a */ a, a:focus, a img { text-decoration: none; border: none; outline: none; } a, a:hover, a:active, a:focus { outline: 0; outline-style: none; outline-width: 0; } a, input:focus, select:focus { outline: 0; outline-style: none; outline-width: 0; text-decoration: none; } a img { border: 0; outline: 0; outline-style: none; outline-width: 0; } /* top */ .top { margin: 0 0 42px 0; margin: expression('0 0 28px 0'); } .top .roof { height: 45px; } .top .roof .edge { height: 10px; overflow: hidden; background: #131313; } .top .logo { width: 180px; height: 99px; } .top .logo a { width: 180px; height: 99px; display: block; background: url(../graphics/top/logo.gif); } .top .intro { margin: 13px 0 14px 0; font-family: georgia; font-size: 16px; line-height: 24px; color: #76b6ff; } /* navigation */ .nav { font-size: 10px; line-height: 15px; font-weight: bold; } .nav a { text-decoration: none; } .nav a.normal { color: #a0a0a0; } .nav a.normal:hover { color: #fff; } .nav a.selected { color: #fff; } .nav a.login { color: #9fb2c8; margin: 0 0 0 12px; } .nav a.login:hover { color: #fff; } .navTop { cursor: default; width: 100%; float: left; } .navTop a { margin: 5px 24px 0 0; display: block; float: left; } .navTop .button { margin: 0 0 0 6px; float: left; } .navTop .button a { margin: 0; } .navLeft { border-bottom: 1px solid #4b4b4b; cursor: default; text-align: right; } .navLeft a { margin: 0; padding: 7px 0 7px 0; border-top: 1px solid #4b4b4b; display: block; } .navLeft a.indent { padding: 3px 0 7px 0; border-top: none; } .navLeft a p.title { padding-bottom: 20px; xborder-top: 1px solid #4b4b4b; display: block; margin: 0; } .navRight { border-bottom: 1px solid #4b4b4b; cursor: default; } .navRight a { margin: 0; padding: 7px 0 7px 0; border-top: 1px solid #4b4b4b; display: block; } .navRight a.indent { padding: 3px 0 7px 0; border-top: none; } .navRight a p.title { padding-bottom: 20px; xborder-top: 1px solid #4b4b4b; display: block; margin: 0; } .navRight a p.date { font-size: 10px; color: #a0a0a0; margin: 0; } /* columns */ .left { width: 180px; float: left; text-align: right; } .right { width: 660px; float: right; } .column { width: 460px; } .section { width: 100%; height: 1px; margin: 52px 0 16px 0; overflow: hidden; } .pad { padding: 20px 0 0 0; } .line { border-top: 1px solid #4b4b4b; } /* TEXT */ p { margin: 0; } /* head */ .head { width: 95%; } .head p.headline { font-family: georgia; font-size: 23px; line-height: 28px; color: #f0eba8; margin: 0 0 8px 0; } .head p.vinjet { font-size: 10px; font-weight: bold; color: #a0a0a0; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 14px 0; } .head p.intro { font-size: 14px; line-height: 24px; color: #dcdcdc; margin: 0 0 24px 0; } /* text */ .text { } .text p { font-size: 12px; line-height: 19px; color: #fff; margin: 0 0 16px 0; } .text b, .text strong { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; } .text a { color: #fff; border-bottom: 1px dotted #fff; } .text a:hover { border-bottom: 1px solid #fff; } .text h1 { font-family: georgia; font-size: 16px; line-height: 18px; color: #f0eba8; font-weight: normal; margin: 0 0 5px 0; } .text h2 { font-size: 11px; line-height: 19px; color: #f0eba8; font-weight: bold; margin: 0 0 1px 0; } .text h3 { font-size: 11px; line-height: 19px; color: #fff; font-weight: bold; margin: 0 0 1px 0; } .text ul { margin: 0 0 32px 0; padding: 0; list-style: none; color: #fff; } .text ul li { margin: 0 0 14px 0; padding: 0 0 0 23px; font-size: 12px; line-height: 19px; background: url(../graphics/misc/bulletSmall.gif) no-repeat left 4px; background-position: expression('left 5px'); } .text ul li b, .text ul li strong { font-size: 11px; color: #76b6ff; font-weight: normal; text-transform: uppercase; margin: 0 0 4px 0; letter-spacing: 1px; } .text p.cs { padding: 13px 15px 15px 15px; background: #000; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } /* extra */ .extra { width: 165px; padding: 1px 0 0 0; float: right; } .extra p { font-size: 9px; line-height: 15px; color: #c9c9c9; margin: 0 0 12px 0; width: 100%; } .extra h1 { font-size: 10px; line-height: 16px; color: #fff; font-weight: bold; margin: 0 0 1px 0; } .extra h2 { font-size: 10px; line-height: 16px; color: #c9c9c9; font-weight: bold; margin: 0 0 1px 0; } .extra h3 { font-size: 10px; line-height: 16px; color: #c9c9c9; font-weight: bold; margin: 0 0 1px 0; } .extra a { color: #c9c9c9; border-bottom: 1px dotted #c9c9c9; } .extra a:hover { border-bottom: 1px solid #fff; } .extra a img { border: none; outline: none; } .extra ul { margin: 0 0 12px 0; padding: 0 0 0 14px; list-style: square; color: #c9c9c9; } .extra ul li { margin: 0 0 6px 0; padding: 0; font-size: 9px; line-height: 15px; } .extra ul li b, .extra ul li strong { font-size: 10px; color: #76b6ff; font-weight: bold; margin: 0 0 2px 0; } /* buttons */ .button { height: 26px; font-family: 'lucida grande', verdana; font-size: 10px; line-height: 18px; font-weight: bold; } .button a { height: 26px; display: block; padding: 0 0 0 18px; text-decoration: none; float: left; } .button p { height: 26px; margin: 0; float: left; padding: 3px 17px 0 0; } .button a.general { background: url(../graphics/buttons/general_left.png) no-repeat; cursor: pointer; } .button a.general p { background: url(../graphics/buttons/general_right.png) no-repeat right 0; color: white; text-shadow: 0px 1px 1px #2c2c2c; } .button a.general:hover p { text-shadow: #fff 0px 0px 4px; } .button a.default { background: url(../graphics/buttons/default_left.png) no-repeat; cursor: pointer; } .button a.default p { background: url(../graphics/buttons/default_right.png) no-repeat right 0; color: white; text-shadow: 0px 1px 1px #0e3054; } .button a.default:hover p { text-shadow: #fff 0px 0px 4px; } .button a.confirm { background: url(../graphics/buttons/confirm_left.png) no-repeat; cursor: pointer; } .button a.confirm p { background: url(../graphics/buttons/confirm_right.png) no-repeat right 0; color: white; text-shadow: 0px 1px 1px #942a2f; } .button a.confirm:hover p { text-shadow: #fff 0px 0px 4px; } .button a.disabled { background: url(../graphics/buttons/disabled_left.png) no-repeat; cursor: not-allowed; } .button a.disabled p { background: url(../graphics/buttons/disabled_right.png) no-repeat right 0; color: #808080; } /* left */ .left p.title { font-size: 11px; text-transform: uppercase; color: #fff; font-weight: bold; margin: 3px 0 8px 0; } .left p.description { font-size: 10px; line-height: 15px; color: #a0a0a0; } .left p.description a { color: #a0a0a0; display: block; } .left p.description a:hover { color: #76b6ff; } /* link */ p.link a, a p.link { font-size: 9px; font-weight: bold; color: #76b6ff; margin: 6px 0 0 0; } p.link a:hover, a:hover p.link { color: #fff; } .text p.link { margin: -10px 0 0 0; } /* images */ .imageTop { height: 220px; margin: 0 0 30px 0; } .screenshot { width: 165px; height: 144px; margin: 4px 0 16px 0; background: url(../graphics/screenshots/monitor.jpg); } .screenshot a { width: 165px; height: 144px; display: block; border: none; cursor: pointer; } .screenshot a:hover { border: none; } .screenshot .effect { width: 155px; height: 97px; margin: 6px 0 0 5px; background: url(../graphics/screenshots/monitorEffect.png); position: absolute; } .screenshot img { margin: 6px 0 0 5px; } #bigScreen { background: #000; border-bottom: 1px solid #4b4b4b; } #bigScreen img { width: 900px; margin: 10px 0 10px 0; } #bigScreen_description { width: 900px; padding: 2px 0 13px 0; } #bigScreen_description p { font-size: 10px; line-height: 11px; font-weight: bold; color: #868986; } #bigScreen_description p.info { text-align: left; float: left; } #bigScreen_description p.close { text-align: right; float: right; } #bigScreen_description p a { color: #868986; text-decoration: none; } #bigScreen_description p a:hover { color: #fff; } /* badge */ .badge { width: 89px; height: 89px; background: url(../graphics/misc/badge_21.png); position: absolute; margin: -24px 0 0 595px; display: none; } /* form */ input.normal { font-family: 'lucida grande', verdana; } input.normal { width: 100%; height: 18px; padding: 2px 3px 3px 3px; padding: expression('3px 3px 3px 3px'); margin: 0; font-size: 11px; line-height: 11px; border: 0; -moz-border-radius: 2px; -webkit-border-radius: 2px; } /* START */ /* shortcuts */ .shortcuts { overflow: hidden; } .shortcuts .wrapper { margin: 0 -30px 0 0; float: left; } .shortcuts .shortcut { width: 200px; margin: 0 30px 0 0; float: left; } .shortcuts .shortcut a { display: block; float: left; } .shortcuts .shortcut p.title { font-family: georgia; margin: 0; padding: 0 0 6px 0; padding-bottom: expression('7px'); font-size: 15px; line-height: 17px; color: #f0eba8; } .shortcuts .shortcut p.description { padding: 0; font-size: 10px; line-height: 16px; color: #fff; } /* .shortcuts .shortcut a:hover p.title { color: #76b6ff; } /* references */ .references { overflow: hidden; } .references .wrapper { margin: 0 -30px 0 0; float: left; } .references .reference { width: 230px; float: left; } .references .full { width: 660px; margin: 0; } .references .reference a { display: block; width: 100%; float: left; cursor: pointer; color: #fff; } .references .reference a:hover p.description { color: #76b6ff; } .references .reference .image { width: 230px; height: 175px; background: url(../graphics/references/monitor.jpg) no-repeat; overflow: hidden; float: left; } .references .reference .image .effect { margin: 7px 0 0 6px; width: 188px; height: 118px; background: url(../graphics/references/monitorEffect.png); position: absolute; } .references .reference .image img { margin: 7px 0 0 6px; } .references .reference .info { width: 400px; padding: 18px 0 0 0; float: left; } .references .reference .info p.description { width: 400px; font-size: 11px; line-height: 18px; } .references .reference .info p.description b { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; } .references .reference .info p.quot { padding: 16px 60px 0 0; font-family: Georgia; font-size: 14px; line-height: 20px; color: #f0eba8; font-style: italic; } .references .reference .info p.by { padding: 8px 0 0 1px; font-size: 9px; text-transform: uppercase; color: #a0a0a0; letter-spacing: 1px; text-align: right; } /* news */ .news { overflow: hidden; } .news .wrapper { padding: 3px 0 0 0; } .news .item { padding: 0 0 7px 0; background: url(../graphics/misc/lineDotted.gif) repeat-x left 10px; width: 100%; } .news .item a { line-height: 13px; display: block; width: 100%; cursor: pointer; } .news .item a div { background: #2b2b2b; } .news .item .date { padding: 1px 0 0 8px; text-align: right; float: right; padding-top: expression('0'); } .news .item a .date { font-size: 10px; color: #a0a0a0; } .news .item .headline { padding: 0 8px 0 0; float: left; } .news .item a .headline { font-size: 11px; color: #fff; } .news .item a:hover div { color: #76b6ff; } /* benefits */ .benefits { width: 660px; height: 230px; overflow: hidden; } .benefits .top { height: 6px; background: url(../graphics/banners/benefits/top.gif); margin: 0 !important; overflow: hidden; } .benefits .top .left { width: 6px; height: 6px; background: url(../graphics/banners/benefits/topLeft.gif); float: left; } .benefits .top .right { width: 6px; height: 6px; background: url(../graphics/banners/benefits/topRight.gif); float: right; } .benefits .bottom { height: 8px; background: url(../graphics/banners/benefits/bottom.gif); overflow: hidden; } .benefits .bottom .left { width: 6px; height: 8px; background: url(../graphics/banners/benefits/bottomLeft.gif); float: left; } .benefits .bottom .right { width: 6px; height: 8px; background: url(../graphics/banners/benefits/bottomRight.gif); float: right; } .benefits .fadeLeft { width: 16px; height: 168px; background: url(../graphics/banners/benefits/fadeLeft.png); position: absolute; z-index: 10; margin: 0 0 0 6px; overflow: hidden; } .benefits .fadeRight { width: 16px; height: 168px; background: url(../graphics/banners/benefits/fadeRight.png); position: absolute; z-index: 10; margin: 0 0 0 638px; overflow: hidden; } .benefits .click { width: 660px; height: 168px; position: absolute; z-index: 20; margin: 0 0 0 6px; } .benefits .click a { width: 660px; height: 168px; display: block; } .benefits .body { height: 168px; background: url(../graphics/banners/benefits/left.gif) #232323 repeat-y; } .benefits .body .container { height: 168px; background: url(../graphics/banners/benefits/right.gif) right top repeat-y; padding: 0 6px 0 6px; } .benefits .body .container .window { width: 648px; height: 168px; overflow: hidden; } .benefits .steps { width: 660px; height: 16px; background: url(../graphics/banners/benefits/stepsBg.gif); position: absolute; margin: 12px 0 0 0; } .benefits .steps .left { width: 76px; height: 16px; background: url(../graphics/banners/benefits/stepsLeft.gif); float: left; } .benefits .steps .right { width: 76px; height: 16px; background: url(../graphics/banners/benefits/stepsRight.gif); float: right; } .benefits .steps a { width: 16px; height: 16px; display: block; float: left; margin: 0 0 0 105px; } .benefits .steps a.step1 { margin: 0 0 0 4px; } #benefitsScroll { width: 30000px; position: relative; } #benefitsScroll div { width: 648px; height: 168px; float: left; } #benefitsArrow { width: 24px; height: 17px; background: url(../graphics/banners/benefits/arrow.png); position: relative; left: 76px; margin: -5px 0 0 0; display: none; } #benefitsPause { width: 19px; height: 21px; background: url(../graphics/banners/benefits/pause.gif); position: absolute; z-index: 30; margin: 26px 0 0 614px; display: none; } /* MODULES */ /* modules */ .modules { margin: 0 -30px 0 0; padding: 14px 0 0 0; float: left; border-top: 1px solid #4b4b4b; } .modules .module { width: 315px; margin: 0 30px 6px 0; float: left; } .modules .module a { width: 315px; text-decoration: none; cursor: pointer; border: none; background-repeat: no-repeat; display: block; float: left; } .modules .module a .info { width: 256px; padding: 11px 0 0 0; float: right; } .modules .module a .info p { font-size: 11px; line-height: 18px; color: #fff; } .modules .module a .info .readMore { border-bottom: 1px dotted #fff; } .xxmodules .module a:hover .info .readMore { border-bottom: 1px solid #fff; } .modules .module a:hover .info h1 { color: #76b6ff; } .modules .line { margin: 4px 0 16px 0; overflow: hidden; } .modules .break { margin: 0 0 14px 0; margin-top: expression('-8px'); border-top: 1px solid #4b4b4b; } .modules .module a.accounts { background-image: url(http://www.secondbase.se/2b/graphics/basis/modules/accounts_normal.png); } .modules .module a.accounts:hover { background-image: url(http://www.secondbase.se/2b/graphics/basis/modules/accounts_mouse.png); } .modules .module a.pageManager { background-image: url(http://www.secondbase.se/2b/graphics/basis/modules/pageManager_normal.png); } .modules .module a.pageManager:hover { background-image: url(http://www.secondbase.se/2b/graphics/basis/modules/pageManager_mouse.png); } .modules .module a.fileManager { background-image: url(http://www.secondbase.se/2b/graphics/basis/modules/fileManager_normal.png); } .modules .module a.fileManager:hover { background-image: url(http://www.secondbase.se/2b/graphics/basis/modules/fileManager_mouse.png); } .modules .module a.financialManager { background-image: url(http://www.secondbase.se/2b/graphics/basis/modules/financialManager_normal.png); } .modules .module a.financialManager:hover { background-image: url(http://www.secondbase.se/2b/graphics/basis/modules/financialManager_mouse.png); } .modules .module a.workFlowManager { background-image: url(http://www.secondbase.se/2b/graphics/basis/modules/workFlowManager_normal.png); } .modules .module a.workFlowManager:hover { background-image: url(http://www.secondbase.se/2b/graphics/basis/modules/workFlowManager_mouse.png); } .modules .module a.versionManager { background-image: url(http://www.secondbase.se/2b/graphics/basis/modules/versionManager_normal.png); } .modules .module a.versionManager:hover { background-image: url(http://www.secondbase.se/2b/graphics/basis/modules/versionManager_mouse.png); } .modules .module a.searchManager { background-image: url(http://www.secondbase.se/2b/graphics/basis/modules/searchManager_normal.png); } .modules .module a.searchManager:hover { background-image: url(http://www.secondbase.se/2b/graphics/basis/modules/searchManager_mouse.png); } .modules .module a.archiveManager { background-image: url(http://www.secondbase.se/2b/graphics/basis/modules/archiveManager_normal.png); } .modules .module a.archiveManager:hover { background-image: url(http://www.secondbase.se/2b/graphics/basis/modules/archiveManager_mouse.png); } /* FUNCTIONS */ .functions { margin: 0 -30px 0 0; background: url(../graphics/functions/area_middle.gif) repeat-y; float: left; } .functions .functions_top { width: 660px; height: 3px; background: url(../graphics/functions/area_top.gif); overflow: hidden; } .functions .functions_bottom { width: 660px; height: 3px; background: url(../graphics/functions/area_bottom.gif); overflow: hidden; } .functions .role { width: 315; margin: 0 30px 0 0; float: left; } .functions .role a { display: block; background-image: url(../graphics/functions/person_normal.gif); background-position: 21px 20px; background-repeat: no-repeat; float: left; } .functions .role a:hover { background-image: url(../graphics/functions/person_mouse.gif); } .functions .role a .wrapper { padding: 25px 20px 25px 90px; } .functions .role a .wrapper p.title { font-family: georgia; margin: 0; padding: 0 0 6px 0; font-size: 15px; line-height: 17px; color: #f0eba8; } .functions .role a .wrapper p.description { margin: 0 0 12px 0; padding: 0; font-size: 11px; line-height: 17px; color: #fff; } /* RESELLERS */ .resellers { } .resellers .logo { float: right; } .resellers .text p { padding: 1px 0 0 0; font-size: 11px; line-height: 18px; width: 420px; } /* SUPPORT */ /* carbon script */ .cs_logo { width: 252px; height: 45px; } .cs_logo div { width: 252px; height: 32px; background: url(../graphics/support/carbonScript/logo.gif) no-repeat; position: absolute; margin: -2px 0 0 -3px; } .carbonScript .cs_nav { margin: 0 0 22px 0; padding: 0 0 0 2px; font-size: 11px; line-height: 13px; font-weight: bold; border-top: 2px solid #4b4b4b; border-bottom: 2px solid #4b4b4b; } .carbonScript .cs_nav .level { padding: 13px 0 5px 0; float: none; clear: both; } .carbonScript .cs_nav .line { border-top: 1px dotted #4b4b4b; } .carbonScript .cs_nav .level .busy { filter: alpha(opacity=40); -moz-opacity: 0.4; opacity: 0.4; } .carbonScript .cs_nav .level .busy a { cursor: default; } .carbonScript .cs_nav .level .item { height: 32px; float: left; margin: 0 10px 0 0; overflow: hidden; } .carbonScript .cs_nav .level .item a { height: 32px; float: left; padding: 5px 12px 0 12px; display: block; text-decoration: none; color: #fff; } .carbonScript .cs_nav .level .item a.normal { background: url(../graphics/support/carbonScript/nav_normal.gif); text-shadow: 0px -1px 1px #333; } .carbonScript .cs_nav .level .item a.selected { background: url(../graphics/support/carbonScript/nav_selected.gif) center top; text-shadow: 0px 1px 2px #182533; cursor: default; } .carbonScript .column { width: 560px; } .carbonScript .text b, .carbonScript .text strong { color: #9fb2c8; } .carbonScript .cs_column { padding: 0 30px 0 20px; float: left; } .carbonScript .cs_column p { font-size: 10px; line-height: 15px; } .carbonScript .linkPage { margin: 22px 0 0 0; padding: 14px 0 0 0; border-top: 1px dotted #4b4b4b; } .carbonScript .linkPage p { padding: 0 0 8px 0; font-size: 10px; color: #a0a0a0; } /* foot */ .foot { } .foot .info { float: left; } .foot .info p { float: left; padding: 0 26px 0 0; font-size: 10px; line-height: 21px; color: #a0a0a0; } .foot .info p a { color: #a0a0a0; } .foot .info p a:hover { color: #fff; } .foot .logos { float: right; } .foot .logos a { float: left; height: 31px; } .foot .logos a.vh { width: 32px; background: url(../graphics/foot/vh_normal.gif); margin: 0 9px 0 0; display: none; } .foot .logos a.vh:hover { background: url(../graphip/foot/vh_mouse.gif); } .foot .logos a.goobo { width: 54px; background: url(../graphics/foot/goobo_normal.gif); margin: 0 10px 0 0; display: none; } .foot .logos a.goobo:hover { background: url(../graphics/foot/goobo_mouse.gif); } .foot .logos a.binero { width: 52px; background: url(../graphics/foot/binero_normal.gif); margin: 0 12px 0 0; display: none; } .foot .logos a.binero:hover { background: url(../graphics/foot/binero_mouse.gif); } .foot .logos a.mySql { width: 51px; background: url(../graphics/foot/mySql_normal.gif); margin: 0 12px 0 0; } .foot .logos a.mySql:hover { background: url(../graphics/foot/mySql_mouse.gif); } .foot .logos a.apple { width: 16px; background: url(../graphics/foot/apple_normal.gif); margin: 0 10px 0 0; } .foot .logos a.apple:hover { background: url(../graphics/foot/apple_mouse.gif); } .foot .logos a.php { width: 34px; background: url(../graphics/foot/php_normal.gif); margin: 0; } .foot .logos a.php:hover { background: url(../graphics/foot/php_mouse.gif); } .foot .legal { padding: 20px 0 0 0; font-size: 9px; line-height: 13px; color: #4b4b4b; text-align: right; }