/**** global *********************************************************/

body {
  behavior: url(csshover.htc);
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.95em;
}

.spacer {
  clear: both;
}

p {
  margin-bottom: 1em;
}

a { 
  color: #3a74aa;
  font-size: 0.95em;
}

a:visited { 
  color: #3a74aa;
}

a:hover { 
  color: #780042;
}

/**** header *********************************************************/

#header {
  background-color: #7aaede;
}

#logo a {
  background-image: url(../img/logo.png);
  background-repeat: no-repeat;
  position: absolute;
  top: 30px;
  left: 40px;
  padding-top: 38px;
  width: 167px;
  overflow: hidden;
  height: 38px;
  voice-family: "\"}\"";
  voice-family: inherit;
  height: 0;
  font-size: 1em;
}

#infos {
  position: absolute;
  top: 30px;
  right: 20px;
}

#infos table {
  margin: 0;
}

#infos th, #infos td {
  border: 0;
  padding: 0;
  color: #fff;
  font-size: 0.8em;
  text-align: left;
  font-weight: bold;
  background-color: transparent;
}
/**** help ***********************************************************/

#help {
  background: #fff url(../img/background_help_border.png) no-repeat right bottom;
  position: absolute;
  top: 200px;
  right: 0;
  width: 14em;
}

#help h1 {
  background: #780042 url(../img/background_help_corner_up.png) no-repeat left top;
  position: relative;
  margin-left: 7em;
  padding: 6px 12px 6px 40px;
  color: #fff;
  font-size: 0.9em;
  font-weight: bold;
  cursor: pointer;
}

#help h1.helpslideup {
  background: #780042 url(../img/background_help_corner_down.png) no-repeat left top;
}

#help p {
  background: transparent url(../img/background_help_border.png) no-repeat right top;
  position: relative;
  padding: 10px;
  font-size: 0.8em;
  text-align: right;
}

/**** tables *********************************************************/

table {
  margin: 10px 0 20px 0;
}

tr {
  font-size: 0.8em;
}

th {
  padding: 6px 10px 6px 10px;
  background-color: #E3EDF7;
  color: #780042;
  border: 1px solid #fff;
  font-weight: bold;
}

th.hat { 
  background-color: #bfdaf5;
  text-align: center;
}

td {
  padding: 6px 10px 6px 10px;
  background-color: #F2CFE2;
  border: 1px solid #fff;
}

td.desactivated {
  color: #888a85;
  font-style: italic;
  background-color: #f7e2ee;
}

td img {
  vertical-align: -50%;
}

td.col_number, th.col_number {
  width: 15px;
  text-align: right;
}

td.col_action, th.col_action {
  padding: 6px 6px 6px 10px;   
  width: 16px;
  background: #fff;
  text-align: center;
}

/**** buttons ********************************************************/

.button_submit {
  background: transparent url(../img/button_submit_left.png) no-repeat left top;
  display: -moz-inline-box;
  display: inline-block;
  height: 28px;
}

.button_submit button {
  background: transparent url(../img/button_submit_right.png) no-repeat right top;
  overflow: visible;
  height: 28px;
  padding: 6px 16px 6px 6px;
  font-weight: bold;
  color: #296194;
  cursor: pointer;
  margin-left: 9px;
}

.button_submit_disabled {
  background: transparent url(../img/button_submit_left_disabled.png) no-repeat left top;
  display: -moz-inline-box;
  display: inline-block;
  height: 28px;
}

.button_submit_disabled button {
  background: transparent url(../img/button_submit_right_disabled.png) no-repeat right top;
  overflow: visible;
  height: 28px;
  padding: 6px 16px 6px 6px;
  font-weight: bold;
  color: #296194;
  cursor: pointer;
  margin-left: 9px;
}

.button_submit button:hover {
  color: #fff;
}

.button_add {
  background: transparent url(../img/button_add.png) no-repeat left top;
  height: 16px;
  width: 16px;
  cursor: pointer;
}

.button_add:hover {
  background: transparent url(../img/button_add_hover.png) no-repeat left top;
}

.button_generate { 
  background: transparent url(../img/button_generate.png) no-repeat left top;
  height: 16px;
  width: 16px;
  cursor: pointer;
}

.button_generate:hover { 
  background: transparent url(../img/button_generate_hover.png) no-repeat left top;
}

.button_network { 
  background: transparent url(../img/button_network.png) no-repeat left top;
  height: 16px;
  width: 16px;
  cursor: pointer;
}

.button_network:hover { 
  background: transparent url(../img/button_network_hover.png) no-repeat left top;
}

.button_remove {
  background: transparent url(../img/button_remove.png) no-repeat left top;
  height: 16px;
  width: 16px;
  cursor: pointer;
}

.button_remove:hover {
  background: transparent url(../img/button_remove_hover.png) no-repeat left top;
}

.button_edit {
  background: transparent url(../img/button_edit.png) no-repeat left top;
  height: 16px;
  width: 16px;
  cursor: pointer;
}

.button_edit:hover {
  background: transparent url(../img/button_edit_hover.png) no-repeat left top;
}

/**** forms **********************************************************/

input.text {
  border: 1px solid #7aaede;
  padding: 1px 5px;
}

input.readonly {
  background: #eee;
  border: 1px solid #7aaede;
  padding: 1px 5px;
}

textarea { 
  border: 1px solid #7aaede;
}

select {
  border: 1px solid #7aaede;
}

select.error { 
  border: 1px solid #780042;
}

input.error {
  border: 1px solid #780042;
  padding: 1px 5px;
}

div.error, p.error {
  color: #780042;
  font-weight: 600;
}

span.error { 
  color: #780042;
}

div.error_notice { 
  width: 500px;
  margin: 0.8em auto;
  padding: 1em;
  padding-left: 4em;
  color: #780042;
  background: #eebac5 url(../img/icon_error.png) no-repeat 15px 10px;
  border-color: #ec738c;
  border-width: 1px;
  border-style: solid;
  font-weight: 1em;
}

div.success_notice { 
  width: 500px;
  margin: 0.8em auto;
  padding: 1em;
  padding-left: 4em;
  color: #000000;
  background: #c0e0fd url(../img/icon_info.png) no-repeat 15px 10px;
  border-color: #7aaede;
  border-width: 1px;
  border-style: solid;
  font-weight: 1em;
}

div.warning_notice { 
  width: 500px;
  margin: 0.8em auto;
  padding: 1em;
  padding-left: 4em;
  color: #780042;
  background: #ffffdd url(../img/icon_warning.png) no-repeat 15px 10px;
  border-color: #daa520;
  border-width: 1px;
  border-style: solid;
  font-weight: 1em;
}

div.info_notice { 
  width: 300px;
  margin: 0.8em auto;
  padding: 1em;
  color: #000000;
  background-color: #c0e0fd;
  border-color: #7aaede;
  border-width: 1px;
  border-style: solid;
  font-weight: 1em;
}

input[type=text]:focus, textarea:focus {
  border: 1px solid #3973a9;
}

input.error[type=text]:focus, textarea.error:focus {
  border: 1px solid #780042;
}

.enabled {
  background: #F2CFE2 url(../img/icon_enabled.png) no-repeat 10px 5px;
  color: #009933;
  padding: 0 1em 0 2em;
  height: 36px;
}

.disabled {
  background: #F2CFE2 url(../img/icon_disabled.png) no-repeat 10px 5px;
  color: #F90000;
  padding: 0 1em 0 2em;
  height: 36px;
}

.unused {
  background: #F2CFE2 url(../img/icon_unused.png) no-repeat 10px 5px;
  padding: 0 1em 0 2em;
  height: 36px;
}

/**** main ***********************************************************/

.title {
  background: transparent url(../img/background_title_border.png) no-repeat left bottom;
  margin: 10px 0 10px 0;
  padding: 20px 0 1px 0;
}

.title h1 {
  background: #8BA9D8 url(../img/background_title_corner.png) no-repeat right top;
  padding: 6px 10px 6px 45px;
  width: 20em;
  font-size: 0.9em;
  font-weight: bold;
  color: #fff;
}

.title h1.large {
  width: 30em;
}

.content {
  margin: 1em 14em 1em 2em;
}

/**** menu ***********************************************************/

#menu {
  background: transparent url(../img/background_menu_border.png) repeat-x left bottom;
  padding: 91px 0 0 10px;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  font-weight: bold;
  clear: both;
}

#menu .tab_off {
  float: left;
  background: url(../img/tab_menu_right_off.png) no-repeat right bottom;
  padding: 20px 18px 7px 0;
}

#menu .tab_off a:link, #menu .tab_off a:visited {
  background: url(../img/tab_menu_left_off.png) no-repeat left bottom;
  padding: 20px 0 7px 16px;
  color: #D7539F;
  text-decoration: none;
  font-size: 1em;
}

#menu .tab_off a:hover, #menu .tab_off a:active {
  background: url(../img/tab_menu_left_off.png) no-repeat left bottom;
  padding: 20px 0 7px 16px;
  color: #fff;
  text-decoration: none;
  font-size: 1em;
}

#menu .tab_on {
  float: left;
  background: url(../img/tab_menu_right_on.png) no-repeat right bottom;
  padding: 9px 16px 18px 0;
}

#menu .tab_on a:link, #menu .tab_on a:visited, #menu .tab_on a:hover, #menu .tab_on a:active {
  background: url(../img/tab_menu_left_on.png) no-repeat left bottom;
  padding: 9px 0 18px 16px;
  color: #fff;
  text-decoration: none;
  font-size: 1em;
}

#menu .tab_signoff {
  float: right;
  background: url(../img/tab_menu_signoff_right.png) no-repeat right bottom;
  padding: 20px 12px 7px 0;
}

#menu .tab_signoff a:link, #menu .tab_signoff a:visited {
  background: url(../img/tab_menu_signoff_left.png) no-repeat left bottom;
  padding: 20px 0 7px 36px;
  color: #D7539F;
  text-decoration: none;
  font-size: 1em;
}

#menu .tab_signoff a:hover, #menu .tab_signoff a:active {
  background: url(../img/tab_menu_signoff_left.png) no-repeat left bottom;
  padding: 20px 0 7px 36px;
  color: #fff;
  text-decoration: none;
  font-size: 1em;
}

/*#menu .tab_signoff button:hover {
*  background: transparent url(../img/button_quit_hover.png) no-repeat right top;
*}*/


/**** submenu ********************************************************/

#submenu {
  background: transparent url(../img/background_submenu_border.png) repeat-x left bottom;
  height: 38px;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  font-weight: bold;
}

#submenu_tabs {
  background: transparent url(../img/background_submenu_tabs_border.png) repeat-x left bottom;
  height: 38px;
  padding-left: 10px;
  float: left;
}

#submenu .tab_off {
  background: url(../img/tab_submenu_right_off.png) no-repeat right bottom;
  float: left;
  padding: 10px 18px 2px 0;
}

#submenu .tab_off a:link, #submenu .tab_off a:visited {
  background: url(../img/tab_submenu_left_off.png) no-repeat left bottom;
  padding: 10px 0 2px 16px;
  color: #780042;
  text-decoration: none;
  font-size: 1em;
}

#submenu .tab_off a:hover, #submenu .tab_off a:active {
  background: url(../img/tab_submenu_left_off.png) no-repeat left bottom;
  padding: 10px 0 2px 16px;
  color: #fff;
  text-decoration: none;
  font-size: 1em;
}

#submenu .tab_on {
  background: url(../img/tab_submenu_right_on.png) no-repeat right bottom;
  float: left;
  padding: 10px 18px 2px 0;
}

#submenu .tab_on a:link, #submenu .tab_on a:visited, #submenu .tab_on a:hover, #submenu .tab_on a:active {
  background: url(../img/tab_submenu_left_on.png) no-repeat left bottom;
  padding: 10px 0 2px 16px;
  color: #fff;
  text-decoration: none;
  font-size: 1em;
}

#submenu_corner {
  background: transparent url(../img/background_submenu_corner.png) no-repeat left top;
  float: left;
  height: 38px;
  width: 269px;
}

/**** popup ********************************************/

.jqmOverlay { background-color: #000; }

div.popup {
  display: none;
  position: fixed;
  top: 17%;
  width: 100%;
}

* html div.popup {
  position: absolute;
  top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

div.popup_window {
  overflow-y: auto;
  height: 400px;
  width: 650px;
  margin: auto;

  max-width: 500px;
  
  background-color: #ffffff;
  border:1px solid #828282;
}

div.popup .jqmClose em{ display: none; }
div.popup .jqmClose {
  width: 20px;
  height: 20px;
  margin: 2px;
  display:block;
  float:right;
  clear:right;
  background:transparent url(../img/icon_close_double.png) 0 0 no-repeat;
}

div.popup a.jqmClose:hover, div.popup a.jqmCloseHover {
  font-size: 1em;
  background-position: 0 -20px;
}

div.popup_content{
  width: 100%;
  padding:0px;
  background:#fff;
}

.clearfix:after {
  content: "."; 
  display: block; 
  height: 0;
  clear: both; 
  visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/**** blocklist ********************************************/

div.blocklist p {
  float: left;
  text-align: center;
  margin: 0.4em;
  padding: 1em;
  border: 1px #ffffff solid;
  width: 150px;
}

div.blocklist p img { 
  border: 1px #000000 solid;
}

div.blocklist p span {
  display: block;
}

div.blocklist p.selected {
  border: 1px #4bb92e solid;
  background: #cfffc2;
}

div.blocklist p.unselectable {
  border: 1px #d67585 dashed;
  background: #ffc4c4;
}