/*! normalize.css v2.0.1 */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined in IE 8/9. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 8/9. */ audio, canvas, video { display: inline-block; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 8/9. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address variable `h1` font size within `section` and `article` contexts in * Firefox 4+, Safari 5, and Chrome. */ h1 { font-size: 2em; } /** * Address styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Correct font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /** * Set consistent quote types. */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9. */ img { border: 0; } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari 5. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to `content-box` in IE 8/9. * 2. Remove excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /* Main ----------------------------------*/ body{font-family: Verdana, Arial, sans-serif;font-size: 11px;text-align: center; /* pour corriger le bug de centrage IE */ } #global {width:900px; margin:0 auto; text-align:left;} #content {padding:0;margin:0;} #center {background-color:#fff;padding:5px 0;} div.paragraph {margin:5px;padding:5px;} #footer {clear:both;text-align:center;margin-top:15px;} #footer p {font:0.9em Arial, Helvetica, sans-serif; } .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;zoom:1;} a:link {color: #9c093a; text-decoration:none;} a:visited {color: #0000CC; text-decoration:none;} a:hover {color: #000066; text-decoration:none;} #center h1 {clear:both;margin:5px;padding:5px; background:#606060; color:#ffffff;font:600 1.4em Arial, Verdana, Sans-serif; letter-spacing:1px; line-height:1.2em;} #center h2 {clear:both; margin:5px; padding:5px; background:#00008c; color:#ffffff; font:bold 1.2em Arial, Verdana, Sans-serif; } .StyleInfoLib {font-family: Arial, Helvetica, sans-serif;font-size: 11px;font-weight: bold;color:#535353;} .StyleInfoData {font-family: Arial, Helvetica, sans-serif;font-size: 11px;color:#535353;} .StyleInfoDataActif {font-family: Arial, Helvetica, sans-serif;font-size: 11px;} table.identite {border-collapse:separate;border-spacing:4px;} .confidentiel {border-top:1px solid; padding-top:5px; font-style:italic; font-size:9px;} .ui-dialog {text-align:left;} .ui-widget {font-size: 1em;} input, select {border: 1px solid #999999;vertical-align: middle;font: 11px Arial,Helvetica,sans-serif;} .ui-autocomplete-loading {background: white url('/themes/default/images/ui-anim_basic_16x16.gif') right center no-repeat; } div.ui-state-highlight p {margin: 10px;} div.ui-state-highlight a {text-decoration: underline;} .noborder {border:0;} img { vertical-align:middle; } /* Menu ----------------------------------*/ div#menu {display:none;} div#menu .ui-widget {font-family:Arial, Sans-serif;font-size:12px;} div#menu ul.navigation li {list-style-type:none;} div#menu ul.navigation li a {display:block;padding:0 20px;text-decoration:none;font-weight:bold;color:#fff;height:25px;line-height:25px;background:#808080 url(/themes/default/images/menu/title.gif);} div#menu ul.navigation li ul {padding:0;overflow:hidden;} div#menu ul.navigation li ul li a {padding:0 5px;margin:0;background:#eee;border-bottom:1px solid #ddd;text-decoration:none;color:#066;font-weight:normal;} div#menu ul.navigation li ul li a:hover {background:#066 url(/themes/default/images/menu/linkarrow.gif) no-repeat right center; color: #fff;} div#menu ul.navigation li ul li a.inactif {color:gray;} div#menu ul.navigation li a .ui-icon-triangle-1-e {background:url(/themes/default/images/menu/collapsed.gif) no-repeat left center; } div#menu ul.navigation li a .ui-icon-triangle-1-s {background:url(/themes/default/images/menu/expanded.gif) no-repeat left center; } div#menu ul.navigation li ul li a .ui-icon {margin:0;padding:0;background:none;} .ui-accordion-content {overflow: hidden;} div#menu ul.navigation li a.ui-corner-all {border-radius: 0;} div#menu ul.navigation li a.ui-corner-top {border-top-left-radius: 0;border-top-right-radius: 0;} div#menu ul.navigation li a.ui-accordion-header {margin-top: 0;} div#menu ul.navigation li a.ui-state-default, div#menu ul.navigation li a.ui-state-hover, div#menu ul.navigation li a.ui-state-active {border: 0;} div#menu div.icones {text-align:center;margin-top:5px;} /* Recherche ----------------------------------*/ /*#center{padding:5px;}*/ #center-recherche{text-align:center; padding:0;} #recherche{margin:78px auto 20px auto;} #recherche h3{color:#ffffff; font-size:medium; font-weight:bold;} #recherche-info{text-align:center;} #recherche-page{text-align:center;} #recherche-page img{vertical-align:middle;} form.recherche{padding:20px 0; text-align:left;} form.recherche label {clear:both;float:left;width:250px;line-height:20px;font-weight:bold;text-align:right;padding-right:5px;} form.recherche div.field {float:left;} form.recherche div.row {clear:both;padding:5px 0;} form.recherche div.submit {text-align:center;} form.recherche div.field input, form.recherche div.field select {margin:0 2px;} form.recherche input {font-family: arial, sans-serif;border:1px solid #999999;} form.recherche input#voie {margin-left:11px;} form.recherche select {font-family: arial, sans-serif;border:1px solid #999999;} ul.derniereRecherche {margin:5px;} ul.derniereRecherche li {margin:5px;} ul.derniereRecherche p {text-decoration:underline;} ol {text-align:left;margin:10px;padding:0 20px;} ol li {margin:5px; padding:5px;} .StyleInfoLib {align: left;font-family: Arial, Helvetica, sans-serif;font-size:11px;font-weight: bold;color:#535353;} .ui-autocomplete {text-align:left;} /* Identite ----------------------------------*/ .datemaj span { display:none; } div.adresse { float:left; margin:5px 5px 0 0; } div.adresse span { clear:both; float:left; vertical-align:middle; } div.domiciliation { float:left; margin:5px 0 0 5px; line-height:16px; } div.domiciliation img { vertical-align:middle; } div.domiciliation span{ display:none; } a.AncienSiege { background-color: #4D90FE; border: 1px solid #3079ED; color: #FFFFFF; font-weight: bold; padding: 2px 5px; } /* Finance ----------------------------------*/ .bilans {font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size:12px; margin: 10px 0 0 0; width:100%; text-align:left; border-collapse:collapse;} .bilans th {padding:4px; font-weight:normal; font-size:11px; border:1px solid #000; color:#000; background:#b9c9fe; text-align:center; font-weight:bold;} .bilans td {font-size:11px;padding:4px; border:1px solid #000; color:#000;} .bilans td.graph {padding:0; margin:0;} .bilans th.date {font-size:10px;cursor:pointer} .bilans td.right {text-align:right;} .bilans td.center {text-align: center;} .bilans td.italique {font-style:italic;} .bilans tr.subhead td {font-size:10px;padding:4px; background:#b9c9fe; border: 1px solid #000; font-weight:bold; color:#000;} .bilans tr.darkblue td {padding:4px; background:#00008c; border: 1px solid #000; font-weight:bold; color:#fff;} .bilans tr {font-size:10px}; .entete {margin:1px;} .subentete {margin:2px;} .bilanDatas:hover td{background-color:#E5EBFF;} #ratios { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; width:100%; border-collapse:collapse; } #ratios a { color:#000000; cursor:help; } #ratios th { padding:8px; font-weight:normal; font-size:13px; color:#039; background:#b9c9fe; } #ratios td { padding:8px; border:1px solid #000; color:#000; } #ratios td.center { text-align:center; } #ratios td.italique { font-style:italic ; } #ratios td.right { text-align:right; } #ratios td.position { text-align:center; } #ratios td.position a { cursor:default; } #ratios tr.subhead td { padding:8px; background:#b9c9fe; border:1px solid #000; font-weight:bold; color:#000; } #ratios tr:hover td { background-color:#E5EBFF; } #rowGraph:hover {background-color: silver;} #ratio {clear: both;font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;font-size: 12px;margin: 10px 0 0;text-align: left;width: 100%;} #LiasseTable {border-collapse: collapse;color:#606060;margin:5px 0 10px 0;} #LiasseTable td {font-size:11px;font-family: arial,sans-serif;border:1px solid silver;padding:2px;} #liasseForm th {color:#606060;font-weight:bold;} #liasseForm {margin-left:30px;} #liasseForm td {color:#606060;} #synthese .head {font-weight: bold;} #synthese th {background: none repeat scroll 0 0 #B9C9FE;border: 1px solid #FFFFFF;color: #003399;font-size: 13px;font-weight: normal;padding: 4px;} #synthese td.right {text-align: right;} #synthese {border-collapse: collapse;clear: both;font-size: 12px;margin: 10px 0px 0;padding: 2px;text-align: left;width: 100%;font-family: arial,sans-serif;font-size: 11px;} #synthese td {background: none repeat scroll 0 0 #E8EDFF;border: 1px solid #FFFFFF;color: #666699;padding: 4px;} #synthese tr:hover td {background: none repeat scroll 0 0 #D0DAFD;} #tabbed_box {margin: 0px auto 0px auto;width:300px;} .tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;} .tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;} .tabbed_area {text-align:center;background-color:#636d76;padding:8px;} ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;} ul.tabs li {list-style:none;display:inline;line-height:32px;} ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;text-transform:uppercase;border:1px solid #FFFFFF;} ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;} ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;} .content {background-color:#ffffff;margin:10px 0;padding:0;} .content a {font-size:1.5em;font-weight:bold;} .content ul {margin:0px;padding:0px 20px 0px 20px;} .content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;} .content ul li a {text-decoration:none;color:#3e4346;} .content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;} .content ul li:last-child {border-bottom:none;} /* Géolocalisation ----------------------------------*/ #infogeo_txt {float:left;width:250px;padding:10px 0;} #infogeo_photo {float:left;margin:0;padding:0;width:340px;} #legende-photo {display:none;width:278px;margin:5px 0 10px 0;padding:10px;border:1px solid #0000ff;color:#0000ff;} #pp-cb-thumb {display:none;} #pp-cb-thumb div.left {float:left;position:relative;width:256px;height:128px;overflow:hidden;} #pp-cb-thumb div.right {float:left;position:relative;width:44px;height:128px;overflow:hidden;} #pp-cb-thumb div.left img{position:relative;left:-256px;top:-140px;} #pp-cb-thumb div.right img{position:relative;top:-140px;} /* Juridique ----------------------------------*/ #annoncesDate p {margin:0; line-height:16px; vertical-align:middle;} #annoncesImg { float:right; border:0; margin:0 20px 0 0;} #annoncesImg img {margin:0; border:0;} .listeCompetences { margin:5px 5px 5px 50px;} .listeCompetences li {margin:10px 5px 20px 5px;} tr.deleted {text-decoration:line-through;} /* Evaluation ----------------------------------*/ h3 { margin-top:10px; } h3 u { font-size:13px; color:#535353; font-weight:bold;} div.stats ul { width: 400px; list-style: none; margin:10px;padding:10px;} div.stats .percent {display: block;height: 1.5em;line-height: 1.5em;margin: 5px 10px 0 10px;padding: 0 5px;text-align: right;color: #fff;font-weight: bold;font-family: monospace;-moz-border-radius: 5px;border-bottom: 1px solid #aaa;border-right: 1px solid #aaa;cursor: default;} .blocdegrade {width:300px;} .imgdegrade {width:310px;} .textdegrade {position:absolute;overflow:hidden;margin-left:10px;line-height: 18px;color: #000;font-size:11px;font-weight: bold;font-family: monospace;} div.blocdegrade div { margin:0; } div.blocdegrade .echelle{width:100%;} div.blocdegrade .echelleleft{float:left;} div.blocdegrade .echelleright{float:right;} .textdegrademin { position:absolute;overflow:hidden; margin-left:10px;line-height: 20px;color: #000;font-size:11px;font-weight: bold;font-family: monospace;} .regle {clear:both; } .clearfix:after {clear: both;content: ".";display: block;height: 0;visibility: hidden;} #synthese .head {font-weight: bold;} #synthese th {background: none repeat scroll 0 0 #B9C9FE;border: 1px solid #FFFFFF;color: #003399;font-size: 13px;font-weight: normal;padding: 4px;} #synthese td.right {text-align: right;} #synthese{border-collapse: collapse;clear: both;font-size: 12px;margin: 10px 0px 0;padding: 2px;text-align: left;width: 100%;font-family: arial,sans-serif;font-size: 11px;} #synthese td {background: none repeat scroll 0 0 #E8EDFF;border: 1px solid #FFFFFF;color: #666699;padding: 4px;} #synthese tr:hover td {background: none repeat scroll 0 0 #D0DAFD;} /* Comment ----------------------------------*/ #commentaires h1 {clear:both;margin:20px 0 5px 0;padding:0;background:none;color:#000000;font:bold 1.2em Arial, Verdana, Sans-serif;border:0;} #commentaires h2 {clear:both;margin:20px 0 5px 0;padding:0;background:none;color:#000000;font:italic 1.1em Arial, Verdana, Sans-serif;border:0;} #commentaires h3 {clear:both;margin:10px 0;padding:0;background:none;color:#000000;font:normal 1em Arial, Verdana, Sans-serif;border:0;text-decoration:underline;} #commentaires h4 {clear:both;margin:10px 0;padding:0;background:none;color:#000000;font:normal 0.8em Arial, Verdana, Sans-serif;border:0;text-decoration:underline;} #commentaires table td, #commentaires table th {border:1px solid #000000;padding:5px;} #commentaires table {border-collapse:collapse;margin:5px 0;width:100%;} #commentaires table td {color:#000000;} #commentaires table.TABLEAUDEFAUTPLUS {width:48%;float:left;margin:2px;} #commentaires table.TABLEAUDEFAUTMOINS {width:48%;float:left;margin:2px;} #commentaires table.TABLEAUDEFAUTNORME {clear:both;width:100%;} #commentaires table.TABLEAUDEFINANCIER {clear:both; width:100%;} #commentaires table.TABLEAUDEFINANCIER NORMAL { } #commentaires table tr.TITRES {background:#000000;color:#ffffff;} #commentaires table tr.VERT {background:#00ff99;color:#000000;} #commentaires table tr.ROUGE {background:#ff3030;color:#000000;} #commentaires table tr.JAUNE {background:#ffff66;color:#000000;} #commentaires span{padding-left:15px;} #commentaires span.plus{background: white url('/themes/default/images/comment/li-plus.gif') no-repeat left center;} #commentaires span.moins{background: white url('/themes/default/images/comment/li-moins.gif') no-repeat left center;} #commentaires span.point{background: white url('/themes/default/images/comment/li-point.gif') no-repeat left center;} #commentaires div.texth1 {margin-left:2px;} #commentaires div.texth2 {margin-left:10px;} #commentaires div.texth3 {margin-left:10px;} #commentaires div.texth4 {margin-left:10px;} /* Surveillances ----------------------------------*/ #surveillance {width:100%;border-collapse:collapse; border:1px solid; font:normal 11px Arial, Verdana, Sans-serif; letter-spacing:1px;line-height: 1em;} #surveillance tr {border:1px solid;} #surveillance th {border:1px solid; padding:5px;font-weight:bold;} #surveillance td {border:1px solid;text-align:center;padding:2px;} #surveillance .aleft {text-align:left;} #surveillance .action {clear:both; margin:0;padding:0; } #surveillance td p {line-height:16px;margin: 0;} #surveillance .action p {display:inline-block; float:left; line-height:16px; margin:0; font-size:11px;} #surveillance .action a {display:inline-block; float:right;} #surveillance .action img {vertical-align:middle;} #surveillance #type {width:120px;} #tri li {list-style-type:none; margin-left:10px; display:inline; font-size:11px; } .options { margin-left:10px; margin-top:5px; font-size:11px; } #telechargementjsMsg { margin-left:10px; margin-top:5px; } .valign img, .valign span {vertical-align: middle; display: inline-block;} #surveillance td.encours { text-align:right; } #surveillance th.score { width:60px; } #surveillance td a.editencours { display:none; } #formSurveillance input.search {border:1px solid; padding:3px 5px;width:200px;} #formSurveillance input.search:focus {border:1px solid #4D90FE;} #formSurveillance input.submit {font-weight:bold;padding:2px 5px; background-color:#4D90FE; border:1px solid #3079ED;color:#ffffff; } .pagination {background: none repeat scroll 0 0 transparent; border: 0 none; font-weight: bold; margin: 0; min-width: 1.5em; padding: 0.3em 0.5em;} .pagination:hover {background: black repeat scroll 0 0;color:white;} /* Pieces ----------------------------------*/ .marge {margin-left:30px;} /*#identite { margin-left:30px; }*/ form em { color:#FF0000;} fieldset {border:0; margin:0; padding:0;} fieldset legend{ padding:0 0 0 10px;} .fieldgrp{clear:both; margin:0 0 .5em 30px; overflow:hidden;} .fieldgrp:after{content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; } .fieldgrp label{font-weight:bold; margin-left:30px; width:100px; clear:both; padding:0 10px 0 0; line-height:22px;_padding-top:3px; float:left; display:block; font-size:108%;} .fieldgrp label span{font-weight:normal;} .fieldgrp label abbr{color:#4B911C; font-size:120%; vertical-align:middle;} .field { float:left; padding:0 10px 0 0; line-height:22px; _padding-top:3px;} .field .longfield{width:215px;} .field .longfield-select{width:220px;} .field .smallfield{width:95px;} .field .medfield{width:110px;} .field span { display:block; } .field input, .field select{ font-size:110%; margin:2px 0; } .field input[type="radio"] { margin:0 5px 0 5px; border:0; } input[type="checkbox"] { margin:0 5px 0 5px; border:0; } .submit {text-align:center;} .noborder {border:none;} #message {margin:10px 0 10px 30px;} table.greffe {width:95%; margin:5px 10px;border-collapse:collapse;} table.greffe th {border:1px solid #000000;padding:8px 4px 8px 4px;background-color:#eeeeee;text-align: center; } table.greffe .date { text-align: center; } table.greffe td.date { background-color:#2b2b8b;color:white;font-weight:bold;} table.greffe td { border:1px solid #000000;padding:8px 4px 8px 4px;} table.greffe td.decision { width:50%; } table.greffe td.type {text-align:center;} /* Kbis ----------------------------------*/ /* progress bar container */ #progressbar { border:1px solid black;width:200px;height:20px;position:relative;color:black;} /* color bar */ #progressbar div.progress {position:absolute;width:0;height:100%;overflow:hidden;background-color:#369;} /* text on bar */ #progressbar div.progress .text {position:absolute;text-align:center;color:white;} /* text off bar */ #progressbar div.text {position:absolute;width:100%;height:100%;text-align:center;}