* { margin: 0; padding: 0; } body, input { font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif; font-size: 12px; margin: 0px; padding: 0px; background-color: #fff; color: #8b8b8b; } h1 { font-weight:bold; margin:0 0 20px 0; padding:0; font-size:28px; color: #ff9300; } h2 { margin:0 0 20px 0; padding:0; font-size:20px; } h3 { font-weight:bold; margin:0 0 20px 0; padding:0; font-size:24px; clear:left; } h4 { font-weight:bold; margin:10px 0 30px 0; padding:0; font-size:20px; } p { margin:0 0 15px} a img { border:0; } a { color:#ff9300; } a:hover {} a.link2:hover { border-bottom-style:solid; } a.link2 { border-bottom:1px dotted #777777; color:#666666; text-decoration:none; } .hand { cursor: pointer; } #headerWrap1, #content, #footer { width:900px; margin:0 auto; padding:0; position:relative;} .clear { clear:both; height:0px; line-height:0px; font-size:0px } /* GENERAL BUTTONS --------------------------------------------------------------------------*/ /* width can be set either in px or with padding (current max 128px), height fixed at 28px */ .button { display:block; height:28px; line-height:26px; color:#fff; text-align:center; cursor:pointer; text-decoration:none; margin:0; padding:0; cursor:pointer; background:url(http://www.flexer.dk/images/layout/button-small-orange-right.png) top right no-repeat } .button .buttonLabel { height:28px; margin:0; padding:0 0 0 12px; position:relative; left:-12px; height:100%; font-size:11px; display:block; color:#fff; font-weight:bold; background:url(http://www.flexer.dk/images/layout/button-small-orange-left.png) top left no-repeat } .button:hover {background-position:bottom right !important} .button:hover .buttonLabel {background-position:bottom left !important} .button.large { height:52px; line-height:48px; padding:0; background-image:url(http://www.flexer.dk/images/layout/button-large-outlined-orange-right.png) } .button.large .buttonLabel { height:52px; font-size:16px; padding:0 0 0 26px; position:relative; left:-26px; background-image:url(http://www.flexer.dk/images/layout/button-large-outlined-orange-left.png) } form .button { float:right; margin:30px 0 10px} form .button.large { margin:0; position:absolute; bottom:5px; right:0px; } .login form .button.large { margin:0; position:absolute; bottom:15px; right:17px; } fieldset .button.large { bottom:0; } .button input { border:0 none; clear:none; padding:0 36px 0 10px; cursor:pointer; height:28px !important /* IE bug fix */ ;} .button.large input { height:52px !important /* IE bug fix */ ; } .prev.button { position:absolute; bottom:0; left:13px; } .next.button { position:absolute; bottom:0; right:0; } /* GENERAL BOX --------------------------------------------------------------------------*/ /* 4 corners and a gradient on top of a base color, can be any size (current max about 900px wide), but must be on a white background and keep L/R padding */ /* only problem is slightly lengthy markup:
*/ .boxWrap1 { background:url(http://www.flexer.dk/images/layout/box-gradient-small.png) bottom left repeat-x #a3a9af; margin:25px auto; clear:left;} .boxWrap2 { background:url(http://www.flexer.dk/images/layout/box-corner-TL.png) top left no-repeat; } .boxWrap3 { background:url(http://www.flexer.dk/images/layout/box-corner-TR.png) top right no-repeat; padding:10px 0 0; } .boxWrap4 { background:url(http://www.flexer.dk/images/layout/box-corner-BL.png) bottom left no-repeat; padding: 0 0 0 21px; } .box { background:url(http://www.flexer.dk/images/layout/box-corner-BR.png) bottom right no-repeat; padding: 0 21px 0 0; } .header, .tableHeader, table, .tableFooterv2 { width:800px; } form .tableHeader, form table, form .tableFooterv2 { width:720px; } form .tableHeader h3 { float:left; } /* the curling down corners... */ .header .boxWrap4, .tableHeader .boxWrap4 { background:url(http://www.flexer.dk/images/layout/box-corner-inverse-BL.png) bottom left no-repeat; } .header .box, .tableHeader .box { background:url(http://www.flexer.dk/images/layout/box-corner-inverse-BR.png) bottom right no-repeat; margin:0; padding-bottom:15px; } .box h1 { color:#fff; margin:0 20px 40px 0;} .login h1 { margin-left:20px; } .box h3 { color:#fff; margin:0 20px 15px 0; } .login .label, .box h4 { color:#fff; font-weight:normal; font-size:18px; float:left; clear:left; margin:0; padding:0; } .box h4 { margin:0 0 10px; } .boxedMessage { width:756px; margin:0 auto; padding:20px; position:relative; z-index:100; border:2px solid #DCDEE0; border-width:0 2px; } /* TABLE --------------------------------------------------------------------------------- */ .tableHeader { position:relative; margin-bottom:-20px; z-index:0 } .tableHeader .box { margin:0 1px 0 0 } .tableHeader .boxWrap4 { margin:0 0 0 2px } /* for tables with TH - table is shifted up over solid box */ .tableHeader.withHeadings .box, .tableHeader.withTabs .box { padding-bottom:45px; } .tableHeader.withHeadings, .tableHeader .withTabs { margin-bottom:-48px; background-image:url(http://www.flexer.dk/images/layout/box-gradient.png) } .tableHeader.withTabs { margin-bottom:0;} #content table { margin:0 auto 0; position:relative; border:2px solid #DCDEE0; border-width:0 2px 0 0; empty-cells:show} #content th { color:#fff; font-weight:normal; padding:0 0 6px 20px; text-align:left; height:25px; position:relative; text-align:left; } #content td { padding:8px 20px; color:#8b8b8b; border:2px dotted #DCDEE0; border-width:2px 0 0 0; position:relative; text-align:left; vertical-align:top; } #content td a { text-decoration:none; color:#696e78 } #content tr:first-child td { border:none; } #content tr:first-child td:first-child { border:2px solid #DCDEE0; border-width:0 0 0 2px;} #content tr td:first-child { border-width:2px 0 0 2px; border-left-style:solid; } #content tr th:first-child { padding-left:22px !important; } /* { text-align:center; padding-left:0px; } */ .tableFooterv2 { position:relative; z-index:100; margin:2px auto; border:2px solid #DCDEE0; border-width:2px 0 0;} .tableFooterLeft { width:21px; height:21px; position:absolute; left:0px; top:-21px; background:url(http://www.flexer.dk/images/layout/table-corner-BL.png) bottom left no-repeat #DCDEE0; } .tableFooterRight { width:21px; height:21px; position:absolute; right:0px; top:-21px; background:url(http://www.flexer.dk/images/layout/table-corner-BR.png) bottom right no-repeat #DCDEE0; } #prev_next { width:300px; margin:20px auto 20px; text-align:center; position:relative;} #prev a, #next a { color:#ff9300; } #prev { width:100px; height:20px; position:absolute; left:0; top:-1px; } #next { width:100px; height:20px; position:absolute; right:0; top:-1px; } #from_to { text-align:center; } /* table in a table */ #content table table { width:100%; border:none; margin:-10px 0 -8px 0; position:relative; left:20px; border:2px dotted #DCDEE0; border-width:0 0 0 2px; } #content table table tr td, #content table table tr td:first-child { border:2px dotted #DCDEE0 !important; border-width:2px 0 0 0 !important; } #content table table tr:first-child td, #content table table tr:first-child td:first-child { border:none !important; } /* table in a form */ #content form td .textfield { background:transparent } #content form th { padding-bottom:5px; } #content form td { padding:0; height:38px; border-top-width:0 !important;; } /* #content form td:last-child { border-top-width:0;} */ #content form tr.js-empty-row td { border:none; } /* table in a box */ .boxedMessage .tableHeader, #content .boxedMessage table, .boxedMessage .tableFooterv2 { width:100% } .boxedMessage .tableHeader.withHeadings .box { padding-bottom:45px !important; } .boxedMessage .tableHeader { margin-top:5px; } .boxedMessage .tableFooterv2 { margin-bottom:20px; } /* LOGIN / SEARCH BOX -------------------------------------------------------------------------------*/ #content .search, #content .login { width:800px; background-image:url(http://www.flexer.dk/images/layout/box-gradient-large.png) } #content .login { width:450px; } .login .box { padding-bottom:10px;} .login form { padding-left:20px; padding-right:20px; } /* IE bug fix */ .search form { margin:0 10px } .login fieldset { margin:0; padding:0 0 5px; position:relative;top:0;} #lost_password { text-decoration:none; font-weight:bold; font-size: 12px; margin-left:8px; } #login_error { display:none; margin:-15px 20px 15px; border:2px solid #F00; -webkit-border-radius:4px; -moz-border-radius: 4px; background:#fff; padding: 5px 10px; cursor:default; } .login_footer { width:450px; margin:20px auto 50px; font-size:18px; text-align:right} .search .box { position:relative } /* IE bug fix */ #filters .button { float:left; clear:both; margin:0; position:relative; right:-25px; } #filters .button.large { float:left; clear:none; position:relative; bottom:25px; right:-590px; margin:0; } /* IE bug fix */ #filters .button.large .buttonLabel { width:100px; } /* IE bug fix */ .lost_password_form, .change_email_form, .change_password_form { padding-bottom:90px } /* FORM --------------------------------------------------------------------------------- */ form { position:relative; padding-bottom:60px; } form#filters { width:738px; padding-bottom:0; } /* IE bug fix */ #competence_filters { float:left; position:relative; left:-80px; padding:0 0 20px; } /* IE bug fix */ fieldset { border:0 none; display:block; margin:0 0 5px; position:relative; width:100%} .search fieldset {clear:left; } input.textfield, textarea, table .textfield, #fileLoad span, .readonly-input { padding:3px 6px; color:#000; font-size:14px; margin:8px 0 10px; border:1px solid #DCDEE0; font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif; } .login input.textfield { width:348px; border:0px none; padding:4px 10px; font-size:16px; clear:both; } .search input.textfield { float:left; border:0px none; margin:0 0 10px 10px; width:135px; padding:2px 8px 3px; } #content form table .textfield, #content form table span { padding:6px 10px; margin:0; -webkit-user-select: text;} #content form td:first-child .textfield, #content form td:first-child span, #content form th:first-child { padding-left:20px !important;} #content form td:last-child .textfield, #content form td:last-child span, #content form th:last-child { padding-right:20px !important;} .readonly-input { cursor:default; color:#8b8b8b; border-style:dotted } #content table td input { margin:0 5px 10px!important; position:relative; z-index:10000; } #content table tr:first-child td input { margin-top:10px !important; } #content table td:first-child input { margin-left:19px !important; } #login_remember { float:left; margin:7px 0} .instruction, .instruction a { color:#696e78; font-style:italic; float:left; font-size:11px; margin:0; padding:6px 0 0 10px; } .instruction a { padding:0; } p.instruction { padding-left:0; } .profile .instruction, .profile .instruction a { float:none; } .label { font-weight:normal; font-size:16px; margin:0; padding:0; } .errorMessage { position:absolute; right:-5px; bottom:-25px; margin:0; display:block; height:48px; font-style:italic; font-size:10px; line-height:16px; background:url(http://www.flexer.dk/images/layout/note-R.png) top right no-repeat} .success, .error { display:block; float:right; height:30px; padding:18px 8px 0 19px; margin:0 13px 0 0; background:url(http://www.flexer.dk/images/layout/note-L.png) top left no-repeat} .success { color: #ABD409; } .error { color: #f00; } /* PAYMENT FORMS --------------------------------------------------------------------------------- */ /* reset values of form > table */ #payment_form { margin:0 auto; } #payment_form, #payment_form .tableHeader, #content #payment_form table, #payment_form .tableFooterv2 { width:800px; } #payment_form .button.large { bottom:0; } #payment_form h3 { float:none; } #content #payment_form input.textfield { width:92%; margin-left:0 !important; } #content #payment_form td:first-child { border-top-width:0; padding:0 20px; } /* TABS --------------------------------------------------------------------------------- */ .tabs { height:34px;} /* IE bug fix */ .tabs a, .tabs a:link, .tabs a:visited { color:#8b8b8b; text-decoration:none; display: block; padding:0 20px; } .tabs ul { list-style:none; } .tabs li { float:left; font-size: 14px; line-height:32px; font-weight: bold; margin:1px; padding:0; height:32px; background:url(http://www.flexer.dk/images/layout/tab.png) left 50% repeat-x transparent; } .tabs li:first-child { background:url(http://www.flexer.dk/images/layout/tab-L.png) left 50% no-repeat transparent; } .tabs li:last-child { background:url(http://www.flexer.dk/images/layout/tab-R.png) right 50% no-repeat transparent; } .tabs li a { color: #fff !important; } .tabs li:hover { background-position:bottom left; } .tabs li:hover:last-child { background-position:bottom right } .tabs li:hover a { color:#fff !important; } .tabs li.active { background-position:top left; } .tabs li.active:last-child { background-position:top right } .tabs li.active a { color:#8b8b8b !important; } .tab-content { width:760px; margin:0 auto; } .tab-content p { margin:0 0 30px; } .tabButtons { margin:40px 0 0; position:relative; clear:left; float:left; width:100%;} /* STEPS --------------------------------------------------------------------------------- */ ol.steps { height:62px; width:900px; margin:0 auto 30px; list-style:none; } ol.steps li { position:relative; width:280px; margin:0 41px 0 -32px; color:#fff; height:62px; float:left; cursor:default; background:url(http://www.flexer.dk/images/layout/process-L.png) left center no-repeat } ol.steps4 li { width:210px; } ol.steps li#tab1 { margin-left:0px; } ol.steps3 { width:890px; } ol.steps li#tab1 { background-image: url(http://www.flexer.dk/images/layout/process-start-L.png); } ol.steps li .header { width:265px; font-size:22px; padding:5px 0 0 15px; font-weight:bold; height:57px; display:block; position:relative; right:-31px; background:url(http://www.flexer.dk/images/layout/process-R.png) right center no-repeat; } ol.steps4 li .header { width:195px; } ol.steps3 li#tab3, ol.steps4 li#tab4 { margin-right:27px; } ol.steps3 li#tab3 .header, ol.steps4 li#tab4 .header { background-image: url(http://www.flexer.dk/images/layout/process-end-R.png); right:-27px; } ol.steps li#tab1 .header { width:280px; padding-left:0; } ol.steps4 li#tab1 .header { width:210px; } ol.steps.clickable li { cursor:pointer; } ol.steps.clickable li:hover { background-position: left bottom; } ol.steps.clickable li:hover .header { background-position: right bottom; } ol.steps li.active { background-position: left top !important; color:#696e78; cursor:default; } ol.steps li.active .header { background-position: right top !important;} .steps .description { position:absolute; bottom:10px; left:40px; font-size:12px; white-space:nowrap; } .steps li#tab1 .description { left:28px;} /* RATINGS --------------------------------------------------------------------------------- */ .star { background:url(http://www.flexer.dk/images/layout/star.png) left top no-repeat #DCDEE0 } .star.selected { background-color:#696e78 } .rating img, .changed .star.selected { background-color:#ff9300 } .rating img { float:right } .clickable.star { float:left; width:20px; height:20px; position:relative; top:-2px; left: -10px; cursor:pointer; } /* messages -----------------------------------------------------------------------------------------*/ #content td.messageSend { vertical-align:bottom; width:70px; padding-bottom:12px; } #content table tr td.messageSend .button input.buttonLabel { width:70px; margin:0 !important; } #new_message { height:100px; margin:5px 0 5px 10px; width:620px /* IE bug fix */; } .message-picture img { position:relative; z-index: 1000 } table .message-picture { padding:10px 0; text-align:center } .owner { color:#ff9300; } /* tasks ----------------------------------------------------------------------------------------- */ table .close-task.button { width:90px; position:relative; right:-8px;} p.close-task { width:580px; margin:20px auto 10px; text-align:right; position:relative; } p.close-task .button { top:-5px; right:-95px; position:absolute; } .task-budget { color:#ff9300 } /* CALENDER ----------------------------------------------------------------------------------------- */ #ui-datepicker-div { z-index:10000; } /* HEADER --------------------------------------------------------------------------------- */ #headerWrap1 { background:url(http://www.flexer.dk/images/layout/header-gradient.png) top left repeat-x #8f969e; } #headerWrap2 { background:url(http://www.flexer.dk/images/layout/box-corner-BL.png) bottom left no-repeat; } #header { height:48px; padding:0 20px; position:relative; background:url(http://www.flexer.dk/images/layout/box-corner-BR.png) bottom right no-repeat; } #header #logo { float:left } #header #logo img { vertical-align:bottom; } #header .button { float:right; margin:9px 0 0 20px; width:66px; } #header .button.register { background-image:url(http://www.flexer.dk/images/layout/button-small-white-right.png) } #header .button.register .buttonLabel { background-image:url(http://www.flexer.dk/images/layout/button-small-white-left.png); color:#ff9300} #menu { margin:0; padding:0; list-style:none; float:right;} #menu li { float:left; color:#fff; margin:15px 0; background:transparent url(http://www.flexer.dk/images/layout/menu-seperator.png) left top repeat-y; } #menu li:first-child { background:none } #menu li a { display:block; line-height:12px; padding:2px 12px; text-decoration:none; color:#fff; opacity:0.8} #menu li a:hover, #menu li.active a { text-decoration:none; opacity:1.0} /* FOOTER --------------------------------------------------------------------------------- */ #footer { margin-top:50px; padding:12px 0; border:1px solid #ff9300; border-width: 2px 0 0 0; color:#949494; font-size:11px; height: 15px; } #footer_menu { float:right; margin:0 0 12px; } #footer_menu a { color:#949494; text-decoration:none; } /* CONTENT --------------------------------------------------------------------------------- */ #content { margin-top:40px; } #intro, .text { width:800px; margin:0 auto } .text { width:760px; text-align:justify } .text ol li a { color: #8b8b8b; font-weight:bold; font-size:14px; text-decoration:none; } .text ol { list-style-type:decimal; margin: 12px; padding: 10px; } .column { width:380px; float:left; position:relative; } .column.right { float:right; } #introText { padding:15px 0 30px; font-family:Georgia,"Bitstream Vera Serif","Times New Roman",serif; color:#8f969e; font-size:20px; line-height:24px; } #introText p { margin: 0 0 10px } #introText em { color:#ff9300 } p#introText { padding:0; margin:10px 0 30px; } #introText img { float:left; margin:0 10px 0 -20px} #intro .column .box { padding-top:0;padding-bottom:0; } #intro .column .header { width:100%; background-image:url(http://www.flexer.dk/images/layout/box-gradient.png) } #intro .column .header h1 { font-size:36px; margin:0 0 0 120px; padding:0; color:#fff; } #intro .column .header h2 { font-size:18px; margin:0 0 10px 120px; color:#fff; font-weight:normal; font-style:italic} #intro .column .button { margin:0 auto; clear:both; width:175px; position:relative; right:-13px; bottom:-5px; } #intro .column .header img { position:absolute; top:-14px; left:0;} .testimonials { clear:left; margin:20px 20px; } .testimonials h3 { font-style:italic; font-weight:normal; padding:0; margin:0 0 15px; font-size:13px; } .testimonial { clear:left; margin:0 0 15px;} .testimonial img { float:left; margin: 0 20px 0 0} .testimonial p {margin-left: 60px;} .testimonial .name {color: #C0C2C4;font-style:italic;} .testimonial .name a {color: #C0C2C4; text-decoration:none; }