
# Background color and gradient (mainly visible in banner)
  body.new { background:#44697d url(gradient.png) repeat-x;}

# Top left logo image in banner area
  #top_banner.new {background: url(logo.png) no-repeat;}

# Main toolbar colour and background gradient
  .toolbar{ background:#44697d url(tab_gradient.png) repeat-x;}

# Left column panel headers
  .left_panel_header{ background: url(app_gradient.png);}

# Footer color
  #sw_footer { background:#44697d url(ftr_gradient.png) repeat-x;}

# Message header colors (preview window and message display)
  #msg_headers { background: url(msg_hdr_gradient.png) repeat-x;}


# Appplication menu buttons
  #app_menu div{ background: url(app_gradient.png);}
  #app_menu div.sel{background: url(app_selected.png);}

# Selected tabs when messages displayed in tabbed mode
  #switcher span.selected{background: url(tab_gradient.png);}



# Now for some rather specialised stuff...

# Hack "border lift" to hide white lines around the tops of frames. Bit nasty really... If you really did not want
# these it would be better to use panel_mode none and do any customisation of borders and panelling in extend.js
  .border_lift{border-left:0px;border-top:1px solid #466A7F;}
  .border_lift_left{border-left:0px;}
  .rnd1{background:none;}

# Special class to allow hiding of line between footer and message
  .border_plain_b4footer{border-bottom:none;}

||ifdef||_testing_do_not_use_||
# Hack all the border colors. Again bit nasty, if you really want to set these it is easier to set default in 
# admin interface and set this in one place
	||define||border_color||#822433||
  #switcher span{ border: 1px solid  ||border_color||;}
  .border_top3{border:1px solid ||border_color||;}
  .border_plain{border:1px solid ||border_color||;} 
  .border_plain_bot{border-bottom: 1px solid ||border_color||;}  
  .rnd1{border-left: 1px solid ||p_border||; border-right: 1px solid ||border_color||;}
  .rnd2{border-bottom: 1px solid ||border_color||;}
  .nornd{border-left: 1px solid ||border_color||;border-right: 1px solid ||border_color||;}
  #search_limit{border:1px solid ||border_color||;}
  .move_menu {border:1px solid ||border_color||;}
  #sizer1 {background:||border_color||;}
  #sizer1.active .handle {border:1px solid ||border_color||;}
  #sizer2 .handle { border:1px solid ||border_color||;}
  .a2h_list{border-right:1px solid ||border_color||;}
  .a2v_msg{border-top:1px solid ||border_color||;}
  .xmenu{border:1px solid ||border_color||;}
  .attach_container{border:1px solid ||border_color||;}
||endif||