# ****************************************************************************
# Surgeweb javascript - Primary Surgeweb CSS
# ----------------------------------------------------------------------------
# This still needs a major cleanup!!
# ****************************************************************************

||define||top_icon_size||19||
# Some attempts at more consistent (and nice looking) selection coloring....
# someone is bound to not like it regardless of colours selected so lets provide some possible examples.

# #FFFFE5 << Old pale selection color
# #A8C7E1 << Old menu color
# #DCF0D1 << Old light green selection
#C2CFF1" << New selection 

#||define((selection_scheme),(test))||
||if(equal(selection_scheme,(custom)))||

||else|| ||if(equal(selection_scheme,(test)))||
	
	||define||selection_color||#3E79B0||
	||define||selection_txtcolor||white||
	||define||selection_hovercolor||#A8DBDB||

	||define||selection_msglist_color||#FFFFE5||
	||define||selection_msglist_txtcolor||black||
	||define||selection_msglist_sepcolor||#f3f3f3||
	
||else|| ||if(equal(selection_scheme,(white_on_blue)))||

#	All selections throughout the interface are dark blue with white text
#	slightly lighter greeny blue for drag&drop and folderlist hover
	||define||selection_color||#3E79B0||
	||define||selection_txtcolor||white||
	||define||selection_hovercolor||#A8DBDB||

	||define||selection_msglist_color||selection_color||
	||define||selection_msglist_txtcolor||selection_txtcolor||
	||define||selection_msglist_sepcolor||#5186B8||

||else||

#	All selections pale green other than msglist which is pale yellow
	||define||selection_color||#d6e4e9||
	||define||selection_txtcolor||black||
	||define||selection_hovercolor||#d6e4e9||

	||define||selection_msglist_color||#fff8ce||
	||define||selection_msglist_txtcolor||black||
	||define||selection_msglist_sepcolor||#e9e9e9||

||endif|| ||endif|| ||endif||

# More subtle blue for links
||define||link_blue||#0066CC||

  a, a:visited, a:hover {
 	color:#0066CC;
 }
 body {
    font-family: Arial, Helvetica, sans-serif;
	font-size:.8em;
    margin: 0 !important;
    padding: 0 !important;
	cursor: default;
#	padding 50px;
}
 #top_banner{
    margin: 0;
    padding: 0;
	width: 100%;
    height: ||plus(banner_height,banner_overlap)||px;
    margin-bottom:-||banner_overlap||px;
}
 #left_column{
    float: left;
# 	 Conflicting declaration, makes scrollbar look ok if no panelisation, but messes background if panelisation is used
#    background:||lpanel_color||;
#    margin:2px;
}
 #left_panel{
    background:white;
#    padding: 4px;
#    margin:2px;
}


 #center_column{
    float: left;
# 	width:600;
    
#    background:#f0f0f0;
#    padding: 4px;
}
 #sw_footer, #prefooter{
	padding-top:2px;
    text-align: center;
    clear:both;
}
 #sw_footer {
 	background:||footer_color||;
 	height:||footer_height||px;
 }

||if(or(blank(footer),equal(footer_height,0)))||
  #sw_footer {display:none;}
||endif||

 .left_pane{
# 	margin-top: 4px;
# 	border: 1px solid blue;
 }
 
 #switcher{
    position: absolute;
#    padding: 2px; 
	left: 310px; top:||minus(plus(banner_height,panel_gap),22)||px;
    text-align: center;
    height:23px;
    overflow:hidden;
}
 #switcher .tab_outer{
    float:left;
	margin-top:2px;
    margin-left:4px;
	width:140px;
	height:21px;
 }
# #switcher span{
 #switcher .amsg_class{
#     margin: 2px;
     background: #ccc;
#     padding: 3px;
#     border: 1px solid ||border_color||;
#     border-bottom: none;
     color:#999;
#     float:left;
#     list-style-type:none;
	padding-right:20px;
	overflow:hidden;
 	position:relative;
	height:18px;
	white-space:nowrap;
}
 #switcher .selected .amsg_class{
     font-weight:bold;
     color:black;
#	 margin-top:-1px;
#	 padding-top:1px;
	 height:20px;
}
 #switcher .selected {
	 margin-top:1px;
#	 padding-top:1px;
	 height:23px;
}
 #switcher .tab_outer .rnd1 {background:#ccc;}
 #switcher .tab_outer .border_lift_left {border-left-color:#ccc;}
 #switcher .selected .rnd1 {background:white;}
 #switcher .selected .border_lift_left {border-left-color:white;}

 .tabpix_left{width:1px;height:1px;background:||ac_bgcolour||;left:-1px;top:-1px;position:absolute;}
 .tabpix_right{width:1px;height:1px;background:||ac_bgcolour||;right:-1px;top:-1px;position:absolute;}
 .tab_center{padding-left:5px;padding-right:5px;}

 .xxl{
 	background:white;
 	border:1px solid ||border_color||;
 	border-bottom:none;
 	float:left;
 	margin-left:3px;
 	position:relative;
 	margin-top:8px;
 }

 #contacts_picker .tab_center{
    background: #ccc;
    color:#999;
 	font-weight:bold;
 }
 #contacts_picker .selected{
 	color:black;
 }

 #status_container{
 	position: absolute;
 	left:155px;
 	top:||minus(8,panel_gap)||px;
	padding:2px;
 } 
 #status{
 	padding:1px 3px;
#	text-align:center;
 }
 #status_outer.success div div, #status_debug .success{
 	background: lightgreen;
 } 
 #status_outer.info div div, #status_debug .info{
 	background: #EDED91;
 } 
 #status_outer.warning div div, #status_debug .warning{
 	background: #EDB2BC;
 } 
 
 #link_bar{
    float: right;
    color:||linkbar_text_color||;
 } 
 #link_bar a{
     color:||linkbar_text_color||;
     margin-right:4px;
 }   
 
.mnu{
||iftrue(force_button_look_disable)||
  	padding-left:3px;
  	padding-right:3px;
  	margin:0;
||else||
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin: 2px;
    background: white;
    border: 1px solid #aaa;
    border-radius: 7px;
||endif||
  	font-size:11px;
 }

||iftrue(force_button_look_disable)||
||else||
.mnu:focus {
 	outline:none;
	box-shadow: 0px 0px 1px 0.5px rgba(0,0,255,0.5);
 }    
||endif||


 .mnu2{
  	margin:0;
  	font-size:11px;
 }
 .mnu_small{
  	padding:0;
  	margin:0;
  	font-size:.8em;
 }
  
  
 .compose{
#    background:lightblue;
 	background: ||message_edit_header_color||;    
 }


 .menu_bar a{
   	text-decoration: none;
 }
  
 .menu_links a{
 	margin-left: 4px;
  	font-size:0.8em;
 }
 
  .mnu_foldername{
  	font-weight:bold;
  	font-size:1.05em;
  	padding:2px 10px;
  	
  }
  
  #utility {
  }
  
  #messages {
    background:white;  
  }
  .message {
    background:white;  
  }  
  
  #msg_headers, .msg_headers{
  	padding:3px 5px 3px 6px;
  	background:||message_header_color||;
  }

  .msg_body{
  	padding:3px 5px 3px 6px;
  }  
  
  .nomessages{
  	padding:60px;
  	text-align:center;
  }
  


  .msgs_table{
  	border-collapse:collapse;
#  	width:100%;
  }
  .msgs_line td, #cloud_list .file_row td{
  	border-bottom:1px solid #f3f3f3;
  	padding:0px;
  }
  .msgs_line.selected td, #cloud_list .file_row.selected td{
  	border-bottom:1px solid ||selection_msglist_sepcolor||;
  }
  
#QQQCOLOR  
  .msgs_line:hover td, #cloud_list tr.file_row:hover td {
 	background:#f7f7f7 !important;
 }
  .msgs_line.selected:hover td, #cloud_list tr.file_row.selected:hover td {
 	background:#fff4c2 !important;
 }

  .wide_list.wide_new_format .msgs_line input{
  	display:none;
  }
  .wide_list.wide_new_format .msgs_line.selected input{
  	display:block !important;
	-moz-opacity: 0.7; opacity: 0.7;
	filter:alpha(opacity=70);
  }
  .wide_list.wide_new_format .msgs_line:hover input{
  	display:block !important;
	-moz-opacity: 1.0; opacity: 1.0;
	filter:alpha(opacity=100);
  }

  .msgs_table tr{
  	width:100%;
  }
  
  .msgs_line a{
  	text-decoration:none;
  }

  .wide_list .msgs_line td{
  	border-bottom:1px solid #ddd;
  }


 #anchor_msgcache{
 	display:none;
 }
 
 
 .compose_x1{
 	font-weight:bold;
 }
 .compose_x2{
 	width:300px;
 } 
 
 .msg_subject{
 	font-weight:bold;
 }
 
  .message{
#  	margin:2px;
  }
  
#	Original
  body.orig{background:||border_color|| url(img/gradient_bg_orig.gif?||vz||) repeat-x;}
  #top_banner.orig{background: #336699 url(img/banner_orig.jpg?||vz||) no-repeat ; }

# 	PN Suggestions
  body.pn{background:#A8C7E1 url(img/gradient_bg_pn.gif?||vz||) repeat-x;}
  #top_banner.pn{background: url(img/banner_pn.jpg?||vz||) no-repeat;}

# Final implementation of defs file setting based "look" customisation
  body.new{
	||if(equal(background_gradient,(default)))||
  	  background:||background_color|| url(||www_base||shared/img/gradient_huge.jpg?||vz||) repeat-x;
	||else||||if(equal(background_gradient,(none)))||
  	  background:||background_color||;
	||else|| 
  	  background:||background_color|| url(||www_base||custom/||background_gradient||?||vz||) repeat-x;
  	||endif|| ||endif||
  }

  #top_banner.new{
	||if(equal(logo,(default)))||
  	  background: url(||www_base||shared/img/banner.jpg?||vz||) no-repeat;
	||else||||if(equal(logo,(none)))||
  	||else||
  	  background: url(||www_base||custom/||logo||?||vz||) no-repeat;
  	||endif|| ||endif||
  }


 .left_panel_header, .menu_bar, .toolbar, ._spam_info{
	||if(equal(toolbar_gradient,(default)))||
   	  background: url(||www_base||shared/img/gradient_big.gif?||vz||);
	||else||||if(equal(toolbar_gradient,(none)))||
	
  	||else||
  	  background: url(||www_base||custom/||toolbar_gradient||?||vz||);
  	||endif|| ||endif||
 } 

   #app_menu div, #switcher .selected .amsg_class, #contacts_picker .selected{
	||if(equal(button_gradient,(default)))||
   	  background: #7FB7E1 url(||www_base||shared/img/gradient_small.gif?||vz||);
	||else||||if(equal(button_gradient,(none)))||
	
  	||else||
  	  background: #7FB7E1 url(||www_base||custom/||button_gradient||?||vz||);
  	||endif|| ||endif||
 }
 #app_menu div.sel{
	||if(equal(button_gradient_highlight,(default)))||
   	  background: url(||www_base||shared/img/gradient_small_sel.gif?||vz||);
	||else||||if(equal(button_gradient_highlight,(none)))||
	
  	||else||
  	  background: url(||www_base||custom/||button_gradient_highlight||?||vz||);
  	||endif|| ||endif||
 }


  
  .pad3{
	padding:3px;
  }


 .border_lift{
  	border-top:1px solid white;  
  	border-left:1px solid white; 
 }
 .border_lift_left{
  	border-left:1px solid white; 
 }

 .border_top3{
  	border:1px solid ||border_color||;  
   	border-bottom:none;  
 } 
 .border_plain_notop{
   	border-top:none;  
 }

 .border_plain{
  	border:1px solid ||border_color||;  
 } 
 .border_plain_notop{
   	border-top:none;  
 } 
 .border_plain_nobot{
   	border-bottom:none;  
 }  
 .border_plain_noside{
   	border-left:none;  
   	border-right:none;  
 }  
 .border_plain_topright{
   	border-left:none;  
   	border-bottom:none;  
 }  
  .border_plain_bot{
    border-bottom:1px solid ||border_color||;  
 }  

# Class espcially for footer to allow hiding of border between footer and message
 .border_plain_b4footer{
  	border:1px solid ||border_color||;  
 } 


 .panel_inset{
 	margin-left:||panel_gap||px;
 	margin-top:||panel_gap||px;
 }
 .panel_inset_flushtop{
 	margin-left:||panel_gap||px;
 }

 #left_column{
# 	background:red;
 }
#//QQ  
 .left_panel_header{
  	font-weight:bold;
  	height:17px;
   }


 .toolbar {
 	padding:3px;
  }




 .lpanel{
 	background:white;
 }

 
 #app_menu{
 	text-align:center;
 }
 #app_menu div{
# 	padding:1px;
  	font-weight:bold;
	height:18px;
	padding-top:2px;
    cursor:pointer;
 }
 
 #app_menu a{
     text-decoration:none;
 }
  #contacts{
   	background:	white;
  }
  
  
  ||define||p_border||border_color||
  ||define||sw_background||white||
  
  	.rnd1{
  		border-left: 1px solid ||p_border||; 
  		border-right: 1px solid ||p_border||; 
  		background:  ||sw_background||;  
  		margin: 0 1px; height: 1px; font-size: 1px;
#		display:inline-block;
  	}
  	.rnd2{
  		background: ||sw_background||;  
  		margin: 0 2px; 
  		height: 0px;
  		font-size:1px;
  		line-height:0;
  		border-bottom: 1px solid ||p_border||;
#		display:inline-block;
	}
  	.nornd {
  		border-left: 1px solid ||p_border||; 
  		border-right: 1px solid ||p_border||; 
  	}

	.hidden{
		display:none;
	}
	.xhidden{
		display:none important!;
	}
	
	
	.options, .cloud, .calendar{
		background:white;
	}
	
	.spacer{
		width:250px;
		height:2px;
		background:gray;
		margin-top:20px;
		margin-bottom:10px;
	}
	.message_attachments{
#		margin-top:20px;
#		margin-bottom:10px;
		font-size:1.1em;
		font-weight:bold;
	}
	.an_attachment{
		padding:10px;	
	}
	
	.dbginfo{
		color:gray;
		font-style:italic;
	}
		
	
# Specify the container
# #flist {
#    width: 200px;
#    border: 1px solid black;
#    font-family: Arial, Helvetica, sans-serif;
#    font-family: Arial, Helvetica, sans-serif;
#    font-size: 12px;
#    overflow: hidden;
# }



	#folders ul{
#		list-style: none;
#		padding-left: 16px;
#		margin:0;
	}

 #folders {
 	overflow:hidden;
}

||define||_junk_||true||
||ifdef||_junk_||

# Setup tree styling basics
ul.ftree li, ul.xtree li { list-style: none; }
ul.ftree, ul.ftree ul, ul.ftree li, ul.xtree, ul.xtree ul, ul.xtree li {
  margin: 0; padding: 0;
  white-space: nowrap;
  overflow: hidden;
}
ul.ftree li, ul.xtree li {padding:0 0 0 0;}
# This controls the indent for each subfolder and prevents wrapping when folder name is long
#ul.ftree ul {padding-left: 16px;}
#.ftree{width:1000px;}

# Show node icon - different for top level and other levels (could depend on open/closed but not necessary)
.ftree ul{
	clear:both;
}

#ul.ftree li a{
ul.ftree .folder_icon, .ltree .folder_icon{
    height: 16px;
    padding-left: 2px;
}
#ul.ftree li li a{

ul.ftree .full_cursor, .ltree .full_cursor, .caltree .full_cursor, .xtree .full_cursor{
    height: 20px;
    margin:0;
}
ul.ftree .folder{
    margin:0px 0 2px 40px;
	text-overflow:ellipsis;
}
ul.ftree .tree_icons, .ltree .tree_icons, .cm_groups .tree_icons{
	float:left;
	padding-top:3px;
	width:38px;
	height:16px;
}

.top_lev_link{
	text-align:center;
#	margin-left:||plus(20,top_icon_size)||px !important;
}
 #ftree .top_lev_folder{
	margin-left:||plus(20,top_icon_size)||px !important;
}
 #ftree .folder_icons_top{
	width:||plus(19,top_icon_size)||px;
}
ul.ftree .folder_icons_none{
	width:19px;
}
.folder_icon{
    background: url(||www_base||shared/img/vbtn_icons.gif?||vz||) no-repeat 0 -80px;
    margin-left: 20px;
	height:16px; width:16px;
}
.folder_icon_shared{
    background: url(||www_base||shared/img/vbtn_icons.gif?||vz||) no-repeat 0 -96px;
    margin-left: 20px;
	height:16px; width:16px;
}
.folder_icon_active{
    background: url(||www_base||shared/img/vbtn_icons.gif?||vz||) no-repeat 0 -112px;
    margin-left: 20px;
	height:16px; width:16px;
}

.top_icon{
   	background: url(||www_base||shared/img/del2.png?||vz||) 0px -417px;
    margin-left: 20px; margin-right:1px; margin-top:3px;
	height:16px; width:16px;
}
.group_icon{
   	background: url(||www_base||shared/img/del2.png?||vz||) 0px -336px;
    margin-left: 20px; margin-right:1px; margin-top:3px;
	height:16px; width:16px;
}
.abook_icon{
   	background: url(||www_base||shared/img/del2.png?||vz||) 0px -368px;
    margin-left: 20px; margin-right:1px; margin-top:3px;
	height:16px; width:16px;
}
.label_icon, .label_icon2, .label_icon3{
	height:16px;
	width:16px;
}

ul.ftree .folder, .ltree .label{
    padding-top:2px;
    height: 18px;
}

#	Display of folders one level down slightly narrower
ul.ftree ul .full_cursor{
    height: 16px;
}
ul.ftree ul .tree_icons{
	padding-top:1px;
	height:15px;
}
ul.ftree ul .part_cursor{
    padding-top:0px;
    height: 16px;
}




#ul.ftree li.open a{background-position: 0 -112px;}
#ul.ftree li.closed a{background-position: 0 -96px;}
#ul.ftree li.leaf a{background-position: 0 -80px;}

# Actually show and hide nodes
ul.ftree li.open ul { display: block; }
ul.ftree li.closed ul { display: none; }

# Display of the tree toggle
ul.ftree  li .tog, #accounts .tog {
    width: 16px; height: 14px; 
    float: left; 
    overflow: hidden; 
    margin-right:2px;
    margin-top:0;
    cursor: pointer; 
}
ul.ftree li.open div.tog, ul.ftree li.closed div.tog, #accounts .tog {background: url(||www_base||shared/img/vbtn_icons.gif?||vz||) no-repeat 0 -200px;}
ul.ftree li.open div.tog, #accounts .tog   {background-position: 0 -144px;}
ul.ftree li.closed div.tog, #accounts .tog.closed {background-position: 0 -128px;}
ul.ftree li.leaf div.tog{background: none;}

# Our specifics
ul.ftree li {font-weight:bold;}
ul.ftree li li{font-weight:normal;}
#ul.ftree a {color:black;text-decoration:none;}
ul.ftree a, #accounts a{text-decoration:none;}
#ul.ftree a:hover {text-decoration:underline;}

# Allow normal links in our tree again
.flist_link{
#	QQQ need to prevent this
	color:||link_blue||;
	margin-left:5px;
	font-weight:normal !important;
	font-size:0.8em !important;
}

.flist_link:hover{
	text-decoration:underline !important;
}

 .fld_link,.fld_fld{
   font-weight:bold;
#   padding-left:20px;
   padding-top:1px;
   padding-bottom:1px;
   text-align:left;
 }
  .fld_link a, .fld_fld a{
    text-decoration:none !important;
 }
  .fld_link a:hover{
    text-decoration:underline !important;
 }
  .fld_text_spacer{
  	padding:0;
  	margin:0;
  	height:7px;
  }
||else||

ul.ftree li { list-style: none; }
ul.ftree, ul.ftree ul, ul.ftree li {
  margin: 0; padding: 0;
  white-space: nowrap;
  overflow: hidden;
}

# Show node icon - different for top level and other levels (could depend on open/closed but not necessary)
ul.ftree .folder{
    height: 16px;
#    padding-left: 2px;
}
ul.ftree .folder{
    background: url(||www_base||shared/img/vbtn_icons.gif?||vz||) no-repeat 0 -80px;
    padding-left: 20px;
	text-overflow:ellipsis;
}

# Actually show and hide nodes
ul.ftree li.open ul { display: block; }
ul.ftree li.closed ul { display: none; }

# Display of the tree toggle
ul.ftree  li .tog {
    width: 16px; height: 14px; 
    float: left; 
    overflow: hidden; 
    margin-right:2px;
    margin-top:1px;
    cursor: pointer; 
}
ul.ftree li.open div.tog, ul.ftree li.closed div.tog {background: url(||www_base||shared/img/vbtn_icons.gif?||vz||) no-repeat 0 -200px;}
ul.ftree li.open div.tog  {background-position: 0 -144px;}
ul.ftree li.closed div.tog{background-position: 0 -128px;}
ul.ftree li.leaf div.tog{background: none;}

# Our specifics
ul.ftree li {font-weight:bold;}
ul.ftree li li{font-weight:normal;}
ul.ftree a {text-decoration:none;}
ul.ftree a:hover {text-decoration:underline;}

# Allow normal links in our tree again
.flist_link{
	margin-left:5px;
	font-weight:normal !important;
	font-size:0.8em !important;
	text-decoration:underline !important;
}

 .fld_link,.fld_fld{
   font-weight:bold;
#   padding-left:20px;
   padding-top:1px;
   padding-bottom:1px;
   text-align:left;
 }
  .fld_link a, .fld_fld a{
    text-decoration:none !important;
 }
  .fld_link a:hover{
    text-decoration:underline !important;
 }
  .fld_text_spacer{
  	padding:0;
  	margin:0;
  	height:7px;
  }

||endif||

.info1{
	display:none;
	float:right;
	background:yellow;
	padding:1px;
}

 #msg_navigator a, #msg_navigator_wide a{
 	font-weight:bold;
 	text-decoration:none;
 }
  #msg_navigator a:hover, #msg_navigator_wide a:hover  {
  	text-decoration:underline;
 }
 #msg_navigator_wide a{
 	color:||link_blue|| !important;
 }
 
  #search_limit{
  	padding:1px;
  	padding-top:0px;
  	background:#F1CCD3;
  	border:1px solid ||border_color||;
  	border-bottom:1px solid #bbb;
  	margin-top:5px !important;
  	margin-right:5px;
  	height:23px;
  	bottom:21px;
  	right:1px;
  }
  
 .menu_extra {
# 	padding-left:10px;
 	font-size:0.85em;
 }
   
 .menu_extra a{
 	text-decoration:none;
 }
 .menu_extra a:hover {
  	text-decoration:underline;
 }

 .msg_unread{
   	font-weight:bold;
 }
   
 #messages a.wide_to, #messages a.wide_to:visited, .extra_list a{
 	color:#222;
 }
 #messages a.wide_subj, .extra_list a {
 	color:black;
 }
 .wide_to{
   	font-weight:bold;
 }
 #messages a.wide_subj{
   	font-weight:normal !important;
 }

# Clickable horizontal message lines
 .msgs_table a,.msgs_table a:hover{
 	text-decoration:none !important;
 }

 form{
	margin:0;
	padding:0;
}


 .xtrim{
	width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
 }
 .xwide{
 	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
 }
 .xwide2{
 	white-space:nowrap;
	overflow:hidden;
 }
  .better_wide{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
 }

  .msg_sent, .msg_sent a{
   	color:#666 !important;
  }
  .action_pending, .action_pending a{
  	color:#bbb !important;
  }
  .action_pending_hide, .action_pending_hide a{
  	color:#bbb !important;
  	display:none !important;
  }
  
  #folders_panel, #labels_panel, #labels_panel_outer, #identity_panel, #calendars_panel{
      background:white;  
  }
#xmenu  TODO tidy
  .folder_menu, .defer_menu, .qpick_menu  {
	position:absolute;
	width:180px !important;
	overflow:none !important;
  }
  .folder_menu ul, .defer_menu ul, .qpick_menu ul{
	margin:0;
	padding:0;
  }
  .folder_menu li, .defer_menu li, .qpick_menu li{
	list-style: none;
#	padding-left:5px;
	margin:0;
  }

  .label_menu {
#	position:absolute;
#	background:white;
#	left:0;
#	border-bottom:1px solid ||border_color||;
	width:180px !important;
	overflow:none !important;
#	overflow-x:hidden;
#	padding:0;
  }
  .label_menu ul{
	margin:0;
	padding:0;
  }
  .label_menu li{
	list-style: none;
#	padding-left:5px;
	margin:0;
  }



  .weirdness li:hover{
  	background:#ddd;
  }
  .weirdness li li{
  	background:white;
  }    
  .weirdness li li:hover{
  	background:#ddd;
  }  
  
  
  #images_disabled{
  	background:pink;
  	padding:3px;
	border-top:1px solid #aaa;
	border-bottom:1px solid #aaa;
  }
    
  .attach_info{
  	background:#DAF5DA;
  	padding:3px;
	border-top:1px solid #aaa;
	border-bottom:1px solid #aaa;
  }
    
  .x_replied{
	width:16px;
	height:16px;
  }
  
  .msg_recent .x_replied{
#  	background: url(||www_base||shared/img/x_status.png?||vz||) -33px -2px;
  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -596px;
  }
  .msg_replied .x_replied{
#  	background: url(||www_base||shared/img/x_status.png?||vz||) -1px -2px;
  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -548px;
  }
  .msg_forward .x_replied{
#  	background: url(||www_base||shared/img/x_status.png?||vz||) -17px -2px;
  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -564px;
  }
  .msg_both .x_replied{
  		background: url(||www_base||shared/img/del2.png?||vz||) -1px -580px;
  }
  .wide_list .msg_unread .x_replied{
  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -532px !important;
  }
  
  .msg_sent{
  	color:#777 !important;
  } 

# QQCOLOR primary row selection color
  #messages_list .selected, #cloud_list .msgs_table .selected, .opanel_list .selected{
	color:||selection_msglist_txtcolor||;
  	background:||selection_msglist_color||;
	||if(equal(selection_scheme,(white_on_blue)))||
	  	text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 0px;
	||endif||
  	cursor:pointer;
  }
  
  
# -----

  .sizer {
 	position:absolute;
 	cursor:w-resize;
 	background:#aaa;
	font-size:1px;
 	opacity:0.01;filter:alpha(opacity=1);
 }
 .sizer_active{
 	opacity:0.7;filter:alpha(opacity=70);
 }  

 #messages a, #messages a:visited{
 	color:black;
 }
# #messages .selected a, #messages .selected a:visited{
# 	color:||selection_msglist_txtcolor||;
# }

 #messages a:hover{
  	text-decoration:underline !important;
 }

 #app_menu a{
 	color:black;
 }
 #app_filestore{
 	display:none;
 }
 
 #sizer2{
# 	display:none;
 }

 #layout_mnu {
 	margin-left: 4px;
  	font-size:0.8em;
  	color:||link_blue||;
  	text-decoration:underline;
 }
 
 
 html {
 	overflow: hidden;
 } 
 .html_scroll {
# 	overflow: auto !important;
# 	overflow-y: auto !important;
 	overflow-x: auto !important;
	overflow-y: scroll;
 }
 .message{
    overflow:hidden;  
 }  
 #utility{
# 	position:relative;
 }
 
 #msglist_box{
 	overflow:auto;
 }
 .hack_scroller{
 	overflow-y:scroll !important;
	overflow-x:hidden !important;
#	padding-right:15px;
 }
 
  .a2h_list{
	float:left;
  	border-right:1px solid ||border_color||;  
  }
  .a2v_msg{
  	border-top:1px solid ||border_color||;  
  }
  
  
 #message_preview{
 	overflow-y:scroll !important;
	overflow-x:hidden !important;
 }  
  
  #folder_menu a:hover{
# 	background:||selection_color|| !important;
  }
    
  
  #sw_popup .popout{
  	display:none;
  }
  #center_column .popin{
  	display:none;
  }
  .popout{
#  	background: url(/surgeweb/ajax/img/x_status.png?||vz||) -65px -2px;
#  	background: url(/surgeweb/ajax/img/sw_img.png?||vz||) -1px -0px;
  	background: url(||www_base||shared/img/sw_img.png?||vz||) -86px -0px;
  	margin-top:2px;
  	width:19px;
  	height:18px;
  }
  .popout:hover{
#  	background: url(/surgeweb/ajax/img/x_status.png?||vz||) -||plus(65,33)||px -2px;
#  	background: url(/surgeweb/ajax/img/sw_img.png?||vz||) -1px -20px;
  	background: url(||www_base||shared/img/sw_img.png?||vz||) -86px -20px;
  }

  .popin{
#  	background: url(/surgeweb/ajax/img/x_status.png?||vz||) -81px -2px;
#  	background: url(/surgeweb/ajax/img/sw_img.png?||vz||) -20px -0px;
  	background: url(||www_base||shared/img/sw_img.png?||vz||) -108px -0px;
  	margin-top:2px;
  	width:19px;
  	height:18px;
  }
  .popin:hover{
#  	background: url(/surgeweb/ajax/img/x_status.png?||vz||) -||plus(81,33)||px -2px;
#  	background: url(/surgeweb/ajax/img/sw_img.png?||vz||) -20px -20px;
  	background: url(||www_base||shared/img/sw_img.png?||vz||) -108px -20px;
  }
  
  
  .btn_prev{
  	background: url(||www_base||shared/img/sw_img.png?||vz||) -42px -0px;
  	margin-top:2px;
  	width:19px;
  	height:18px;
  }
  .btn_prev:hover{
  	background: url(||www_base||shared/img/sw_img.png?||vz||) -42px -20px;
  }

  .btn_next{
  	background: url(||www_base||shared/img/sw_img.png?||vz||) -64px -0px;
  	margin-top:2px;
  	width:20px;
  	height:18px;
  }
  .btn_next:hover{
  	background: url(||www_base||shared/img/sw_img.png?||vz||) -64px -20px;
  }
 

  .btn_thread{
  	background: url(||www_base||shared/img/sw_img.png?||vz||) -130px -0px;
  	margin-top:2px;
  	width:19px;
  	height:18px;
  }
  .btn_thread:hover{
  	background: url(||www_base||shared/img/sw_img.png?||vz||) -130px -20px;
  }

  .btn_history{
  	background: url(||www_base||shared/img/sw_img.png?||vz||) -152px -0px;
  	margin-top:2px;
  	width:20px;
  	height:18px;
  }
  .btn_history:hover{
  	background: url(||www_base||shared/img/sw_img.png?||vz||) -152px -20px;
  }

  .btn_preview{
#    background: url(||www_base||shared/img/sw_img.png?||vz||) -174px -0px;
    background: url(||www_base||shared/img/sw_img.png?||vz||) -196px -0px;
    margin-top:2px;
    width:19px;
    height:18px;
  }
  .btn_preview:hover{
#    background: url(||www_base||shared/img/sw_img.png?||vz||) -174px -20px;
    background: url(||www_base||shared/img/sw_img.png?||vz||) -196px -20px;
  }


  
  
  #folders_panel, #options_panel, #labels_panel, #identity_panel, #calendars_panel {
      overflow:auto;
  }
  
#   body {
#      background-attachment:fixed;
#  }


 #busy{
 	float:right;
	width:16px;
	height:16px;
	background: url(||www_base||shared/img/del2.png?||vz||) -1px -97px;
	margin-top:1px;
 }

 #busy.busy_busy{
 	background: url(||www||img/busy.gif?||vz||);
 }

 #busy.busy_loading{
	background: url(||www_base||shared/img/del2.png?||vz||) -1px -435px;
 }


 .option_disabled{
 	color:gray;
 }


 #options_mnu {
# 	margin-left: 4px;
#  	font-size:0.8em;
#  	color:blue;
  	text-decoration:underline;
 }

# QQQ do we move this to a common module to avoid duplication?
#xmenu  TODO tidy
 .xmenu{
 	position:absolute;
 	background:#fff;
# 	border:1px solid ||border_color||;
#	width:120px;

#	background: url(||www_base||shared/img/menu_pane.png?||vz||);
#	background-repeat:no-repeat;
#	background-position:bottom left;
	width:130px;
#	padding:0 6px 14px 6px;
#	margin-left:-6px;
	
	margin-top:2px;
	margin-left:-6px;
#	border-bottom:3px;
	z-index:50;
 }
  .xmenu_wider{
  	width:143px;
  }
 
 
  .shortcut{
	float:right;
	padding-right:3px;
#	font-style:italic;
  }
  .xmenu a{
  	display:block;
  	padding:2px 3px 2px 6px;
  	text-decoration:none;
  	color:black;
  }

 .mw_menu{
 	color:||link_blue||;
 }
 .mw_menu:hover{
  	text-decoration:underline;
 } 

 .menu_extra{
 	color:#555;
 }
 
 #message_preview .hidden_in_preview{
 	display:none;
 }

 .float_left{
 	float:left;
 	margin-right:25px
 }
 
 
 #search_input{
 	font-size:13px;
 }
 
 


# *** OPtions related formatting

 .pg_title{
 	font-size:16px;
 	font-weight:bold;
 	width:100%;
 	text-align:center;
 }
 
  #options_panel{
# 	padding: 3px;
 	background:#FFF7D7;
  }
  
  #options_pretabs {
  	background:white;
  }
   	#admin_info{padding:0px;border-bottom:1px solid;}
	#admin_pretabs{padding:3px;color:black;background:#FEFF78;}
	#admin_tabs{background:#FEFF78;}
	.vtabs_hdr div{
		background:#FAD163;
		float:left;
		padding:3px 10px;
		border-bottom:none;
		white-space:nowrap;
		cursor:pointer;
		text-decoration:underline;
	}
 	.vtabs_hdr div.selected{
 		background:#FFF7D7;
 		text-decoration:none;
 		font-weight:bold;
 		font-size:1.05em;
 	}
 	.vtabs_body{
 		background:#FFF7D7;
 	}

 	.vtabs_hdr{
 		width:100%;
		background:#FAD163; 
 	} 
 	
 	.vtabs_body div{
 		padding:3px;
 	}
 	
 	#options_tabs_hdr{
		background:#FAD163; 
 	}
 	
 	
 	
# **** File upload styles

#	.uploads{
#		background:white;
#	}

	.progressWrapper {
		white-space: normal;
	}

	.progressContainer {
#		background:white;
		color: #bbb;
	}
	/* Message */
#	.message {
#		margin: 1em 0;
#		padding: 10px 20px;
#		background-color: #FFFFCC;
#		overflow: hidden;
#	}
	/* Error */
	.red {
		border: solid 1px #B50000;
		font-weight:bold;
		color: #FFEBEB;
	}

	/* Current */
	.green {
		font-weight:bold;
		color: green;
# On safari does not change back to inline onceit has been block. I 
# guess we just live with the way it was. Does not matter really
#		display:block;
	}

	/* Complete */
	.blue {
		color: black;
	}

	.progressName {
		white-space:nowrap;
	}

	.progressBarInProgress,
	.progressBarComplete,
	.progressBarError {
		font-size: 8pt;
		margin-top: 2px;
	}

	.progressBarComplete {
		background-color: green;
		visibility: hidden;
	}

	.progressBarError {
		background-color: red;
		visibility: hidden;
	}

	.progressBarStatus {
		margin-left:1px;
		font-size: 7pt;
		font-family: Arial;
		text-align: left;
	}

	.progressCancel {
		margin-bottom:-4px;
		width:16px;
		height:16px;
	  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -1px;
	}

	.progressCancel:hover {
	  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -65px;
	}

	.progressIcon{
		white-space:nowrap;
		margin-left:4px;
		margin-bottom:-2px;
		margin-right:2px;
		width:16px;
		height:16px;
	  	background: url(||www_base||shared/img/x_status.png?||vz||) -49px -2px;
	}


# ************

	.edit_headers td:first-child {
		text-align:right;
		vertical-align:top;
		padding-top:4px;
	}
	.edit_headers td:first-child + td {
		width:100%;
	}	
	.edit_headers td:first-child + td + td + td {
		width:2px;
	}
	
	.attach_container{
		background:white;min-height:30px;padding:3px;border:1px solid ||border_color||;
	}
	
	.edit_headers {
		width:100%;border-collapse:collapse;
#		text-align:right;
	}
	
# ********
	.tab_text{
		display:inline-block;
		padding-left:3px;
		padding-right:20px;
		width:100%;
		overflow:hidden;
	}

	.closetab {
		margin-bottom:-4px;
		width:16px;
		height:16px;
	  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -17px;
		position:absolute;
		top:2px;
		right:2px;
	}

	.closetab:hover {
	  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -65px;
	}
	.attach_sizing {
		font-size:0.9em;
	}
	a.image_attachment {
		border:none;
		text-decoration:none;
	}
	
	#manage_folders td:first-child + td + td, #manage_folders td:first-child + td + td + td {
		text-align:right;
		padding-right:20px;
	}
	#manage_folders th:first-child + th + th {
		padding-right:10px;
	}
#	#manage_folders td:first-child{
#		text-align:center;
#		padding:0px 8px 0px 4px;
#	}
	
    .dropdown {
    	background: url(||www_base||shared/img/vbtn_icons.gif?||vz||) no-repeat -2px -192px;
    	width:10px;
    	height:11px;
    }
    .dropup {
    	background: url(||www_base||shared/img/vbtn_icons.gif?||vz||) no-repeat -2px -208px;
    	width:12px;
    	height:11px;
    }

	#list_extra, #chat_pending{
		text-align:center;
		background:#FFFF80;
		padding:2px;
	}
	#list_extra.all_sel{
		background:pink;
	}
	#list_extra.hint{
		border-bottom:1px solid ||border_color||;
		background:white;
	}
	.hint_style{
		font-size:10px;
		font-weight:bold;
		color:#555;
		font-style:italic;
	}
	.hint_style2{
		font-size:10px;
		font-weight:bold;
		color:#999;
		font-style:italic;
	}
	.hint_style3{
		font-size:10px;
		font-weight:bold;
		color:#777;
		font-style:italic;
	}
	.hint_seen{
		color:#797;
		font-weight:bold;
		font-style:italic;
		padding:2px;
	}
	.hint_table a {		
		color:||link_blue|| !important;	
		text-decoration:none;
	}
	.hint_table a:hover{
		color:||link_blue||;	
		text-decoration:underline;
	}	


	#chat_pending{
		background:#fff url(||www||img/new_chat.gif?||vz||) ;
		border-bottom:1px solid #ddd;
	}
	.chat_pending{
		background:#fff url(||www||img/new_chat2.gif?||vz||) ;
		border-bottom:1px solid #ddd;
	}
	
	
	.fld_menu_2 #main_reply{
		display:none;
	}
	
	#compose_info{
		color:#666;
		font-style:italic;
		margin-left:15px;
	}
	
	.rcpt:hover{
		text-decoration:underline;
#		font-weight:bold;
	}
	
	.main_menu_fld #mnu_edit, .main_menu_fld #mnu_resend{
		display:none;
	}
	.main_menu_draft #mnu_reply, .main_menu_draft #mnu_forward, .main_menu_draft #mnu_resend{
		display:none;
	}
	.main_menu_sent #mnu_reply, .main_menu_sent #mnu_forward, .main_menu_sent #mnu_edit{
		display:none;
	}
	.main_menu_notes #mnu_reply, .main_menu_notes #mnu_forward, .main_menu_notes #mnu_resend {
		display:none;
	}


	#mnu_new_note, #send_extra{
		margin-left:6px;
	}
	
	#save_note2{
		margin-right:6px;
	}

	#sw_popup{
		background:none;
	}

#	#left_column{
#		background:||border_color||;
#	}


	.doredirect .redirect_hide{
		display:none;
	}
	.noredirect .redirect_show{
		display:none;
	}

	.donote .note_hide{
		display:none;
	}
	.donote .note_show{
		display:block !important;
	}
	
  .msg_info{
  	background:pink;
  	padding:3px;
	border-bottom:1px solid #aaa;
	text-align:center;
  }
	
# QQQ
 	a.selfld{
 		color:black;
 		font-weight:bold;
 	}	
 	
	.swfupload {
		position: absolute;
		z-index: 1;
	}
 	
 	
 	
 	.rcol_size1 {
 		width:120px;height:600px;
 	}
 	.rcol_size2 {
 		width:180px;
 	}
 	
 	.rcol_border {
 		border:1px solid ||border_color||;
 	} 	
 	
 	.filter_td{
 	 	padding:5px;
 	 	background:white;
 	 	border:1px solid #aaa;
 	}
 	.filter_td_3l{
 	 	padding:5px;
 	 	background:white;
 	 	border:1px solid black;
 	 	border-right:1px solid #aaa;
 	}
 	.filter_td_3r{
 	 	padding:5px;
 	 	background:white;
 	 	border:1px solid black;
 	 	border-left:1px solid #aaa;
 	}
 	.filter_td2{
 	 	padding:5px;
 	 	background:white;
 	 	border:1px solid #aaa;
 	 	width:70px;
 	}
 	
 	 .space_left{
 	 	margin-left:15px;
 	 }
 	 
 	 .filter_item{
 	 	font-weight:bold;
 	 }

 	 .filter_desc{
 	 	color:#888;
 	 }


# *** Contact Picker Dialog CSS definitions *** 	 

#	Table like layout using divs
	#cp_contact_list .xrow_container{
		border-bottom:1px solid #aaa;
 	}
 	#cp_contact_list .xrow_subcontainer{
		border-bottom:1px solid #aaa;
 	}
 
	#cp_contact_list .xrow_subcontainer .xrow_container{
 		border-bottom:none;
 	}
  	 
 	#cp_contact_list .xrow{
		padding:5px;
		padding-left:15px;
 	 	position:relative;
 	 	height:20px;
 	}
 	#cp_contact_list .xcol1{
 	 	position:absolute; overflow:hidden;
 	 	left:0; width:4%; padding-top:2px; padding-left:3px;
 	}
 	#cp_contact_list .xcol2{
 	 	position:absolute; overflow:hidden; white-space:nowrap;
 	 	left:4%; width:4%;
 	}
 	#cp_contact_list .xcol3{
 	 	position:absolute; overflow:hidden; white-space:nowrap;
 	 	left:9%; width:34%; padding-top:2px;
 	}
 	#cp_contact_list .xcol4{
 	 	position:absolute; overflow:hidden; white-space:nowrap;
 	 	left:45%; width:54%; padding-top:2px;
 	}
 	
# 	xtable row toggling 	 
 	#cp_contact_list .xtog {
		width: 16px; height: 14px; 
		overflow: hidden; 
		margin-right:2px;
		margin-top:1px;
		cursor: pointer; 
	}	
	#cp_contact_list .xtog {background: url(||www_base||shared/img/vbtn_icons.gif?||vz||) no-repeat 0 -200px;}
	#cp_contact_list .open .xtog {background-position: 0 -144px;}
	#cp_contact_list .closed .xtog {background-position: 0 -128px;}

#	Contact list selection handling

# *** Contact Picker Dialog CSS definitions *** 	 

	.contact_lister{
		background:white;min-height:22px;border:1px solid ||border_color||;max-height:67px;overflow:auto;
	}

	.contact_lister li{
		float:left;
		padding:1px;
		padding-left:3px;
		padding-right:0;
		margin-left:2px;
		margin-top:2px;
		white-space:nowrap;
	}

	.contact_lister .cl_text{
		float:left;font-family:Arial;font-size:14px;border:0;overflow:hidden;
		width:50px;height:20px;
		outline:none;resize:none;
	}

    .contact_lister .rcpt_valid	{
    	border: 1px solid #BBEBAE;
    	background:#F5FDF3;
    }
    .contact_lister .rcpt_invalid	{
    	border: 1px solid #B55E5E;
    	background:#FDF5F5;
    }    

	.contact_lister .rcpt_remove {
		margin-bottom:-3px;
		width:16px; height:16px;
	  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -127px;
	  	margin-left:2px;
	}
	.contact_lister .rcpt_remove:hover {
#	  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -65px;
		cursor:pointer;
	}

	.contact_lister .rcpt_expand {
		margin-bottom:-4px;
		width:16px; height:16px;
	  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -113px;
	}
	.contact_lister .rcpt_expand:hover {
#	  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -65px;
		cursor:pointer;
	}

	.contact_lister .cl_ruler{
		position: absolute;
		visibility: hidden;
		font-family:Arial;
		font-size:14px;
	}


 
 
  	#compose_header1 .xrow{
 		padding:5px;
 		padding-left:15px;
  	 	position:relative;
#  	 	height:20px;
  	}
  	#compose_header1 .xcol1{
  	 	position:absolute; overflow:hidden;
  	 	left:0; width:10%; padding-top:2px; padding-left:3px;
  	}
  	#compose_header1 .xcol2{
  	 	position:absolute; overflow:hidden; white-space:nowrap;
  	 	left:10%;
  	}

	.compose_hdr_row{
		padding-top:2px;
	}
	.compose_label{
		text-align:right;
		width:65px; 
		font-weight:bold;
		position:relative;
	}

	.custom_edit_outer{
		border:1px solid #999;overflow:hidden;padding:0;background:white;padding:3px;height:16px;		
	}
	.custom_edit_outer2{
		border:1px solid transparent;overflow:hidden;padding:0;padding:3px;padding-top:1px;height:16px;		
	}
	.custom_edit_inner{
		width:100% !important;border:0;margin:0;padding:0;background:white;outline:none;resize:none;font-size:13px;
		margin-left:0 !important;
	}
	.custom_edit_disabled{
		border:1px solid transparent;background:none;
	}
	
	.compose_field{
		margin-left:65px;
	}
	
	.contact_button{
		position:absolute;
		right:2px;
		width:45px;
		height:15px;cursor:pointer;text-decoration:none;
		padding:2px;padding-top:2px;margin-top:3px;	
		border:1px solid #aaa;
		background:url(||www_base||shared/img/gradient_big.gif?||vz||);
	}

	.contact_hdrleft{
		position:absolute;
		right:2px;
		width:100%;
		height:15px;
		padding:2px;margin-top:2px;	
	}

	
	.contact_button:hover{
		background:url(||www_base||shared/img/gradient_small.gif?||vz||);
	}	
	
	.plain_edit{
		margin-left:0;
		width:500px;
	}
	
	a.plain_link, a.plain_link:visited{
		color:black;
		text-decoration:none;
	}
	a.plain_link:hover{
		text-decoration:underline;
	}	

	a.link_blue2, a.link_blue2:visited{
		color:||link_blue|| !important;	
		text-decoration:none;
	}
	a.link_blue2:hover{
		text-decoration:underline !important;
	}	
	
	
	.xright{
		float:right;
		font-weight:bold;
		color:#888;
	}
	
	.lpanel_toplink a{
		text-decoration:none;
	}	
	.lpanel_toplink a:hover{
		text-decoration:underline;
	}	
	.lpanel_toplink{
		text-align:center;
		padding:5px 0;
		font-weight:bold;
#		border-bottom:1px solid #bbb;
		border-bottom:1px solid #e8e8e8;
	}
	.cm_group{
#		padding:8px 15px;
		padding:5px 3px 5px 10px;
		border-bottom:1px solid #ddd;
		font-weight:bold;
	}
	.cm_contact{
		padding:5px 3px 3px 3px;
		border-bottom:1px solid #eee;
#		position:relative;
	}
	.cm_panel{
#		height:350px;
#		overflow:auto;
	}
	
	#contacts_panel{
		overflow:auto;
	}
	
	.cm_left{
		float:left;
	}
	.cm_right{
		float:right;
	}
	.cm_extra{
		width:14px;
		height:14px;
		padding:1px;
		text-align:center;
		font-size:12px;
		font-weight:bold;
		color:#888;
		border:1px solid #bbb;
	}
	.cm_count{
		font-size:12px;
		font-weight:bold;
		color:#aaa;
	}	
	
	.cm_warning, .sig_warning{
		background:pink;
		border:1px solid #aaa;
		padding:3px;
	}
	.cm_info{
		color:#999;
		border:1px solid #bbb;
		padding:3px;
	}
	.cm_box{		
		margin:7px 40px 0px 40px;
		text-align:center;		
	}
	.cm_draggable{
		cursor:pointer;
	}
# DND classes

	.dnd_info{
		border: 3px solid #bbb;
		background:#ccc;
#		border: 3px solid #aaa;
#		background:#faa;
		position:absolute;
		padding:2px 4px;
		font-weight:bold;
#		font-family: arial;
		font-size:12px;
		color:black;
	}
	.dnd_bad{
		border: 3px solid #faa;
		color:#777;
	}
	.dnd_drop{
		border: 3px solid #AEE9A4;
		color:black;
	}
	.remove_contact, .delete_contact {
		margin-bottom:-4px;
		width:16px;
		height:16px;
	  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -17px;
	}
	.delete_contact:hover {
	  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -65px;
	}
	.remove_contact:hover {
	  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -177px;
	}
	
	.cm_index{
		margin-top:4px;
		float:left;
		padding:2px;
		font-weight:bold;
		border:1px solid transparent;
		color:#888;
	}
	
# 	Netscape 7 compatibility
	#lpanel_body,#message_preview{
		overflow:auto;
	}

#	IE 6 compatibility styling	
	#lpanel_body{
		overflow-x:hidden;
	}


	.swish_edit_outer{
		background:white;
		border:1px solid ||border_color||;
		width:260px;height:20px;
		overflow:hidden;
	}
	.swish_edit_inner{
		margin-left:2px;
		background:none;
		float:left;
		border:0;
		overflow:hidden;
		width:200px;height:20px;
		outline:none;resize:none;
	}
    .search_icon_tree {
    	background: url(||www_base||shared/img/del2.png?||vz||) 0px -192px;
    	width:16px; height:16px;
    }
    .search_icon {
    	background: url(||www_base||shared/img/del2.png?||vz||) 0px -192px;
    	width:16px; height:16px;
    	margin-left:2px;
    	border:0;
    }
    .search_icon2 {
    	background: url(||www_base||shared/img/del2.png?||vz||) 0px -304px;
    	width:16px; height:16px;
    	margin-left:2px;
    	border:0;
    }
    .search_icon3 {
    	background: url(||www_base||shared/img/del2.png?||vz||) 0px -320px;
    	width:16px; height:16px;
    	margin-left:2px;
    	border:0;
    }

	
    .menu_tick {
#    	background: url(||www_base||shared/img/del2.png?||vz||) 0px -208px;
    	width:12px;
    	height:12px;
    	margin-left:-17px;
    	border:0;
    	float:left;
    }

	.menu_tick_row .selected{
    	background: url(||www_base||shared/img/del2.png?||vz||) 0px -208px;
	}
	.menu_tick_row{
		padding-left:20px !important;
	}
	
	.contact_show .tcell1, .contact_edit .tcell1{
		width:82px;
		vertical-align:top;
		text-align:right;
		padding-top:4px;
		padding-right:10px;
		padding-bottom:5px;
		clear:both;
		float:left;
	}
	.contact_show .tcell1{
		padding-top:2px;
		padding-bottom:2px;
		color:#666;
	}
	.contact_show .tcell2, .contact_edit .tcell2{
		padding:2px;
		left:90px;
		margin-left:90px;
		font-weight:bold;
	}
	
	.valid{
		width:200px;
		font-weight:bold;
	}
	.invalid{
		width:200px;
		color:#888;
	}	
	
	.contact_show .box, .contact_edit .box{
		background:white;
#		width:300px;
#		position:relative;
#		border:1px solid black;
	}
	.contact_show .grouping, .contact_edit .grouping{
		margin:15px 0;
	}
	


	
	.xclosetab {
		margin:auto 2px 2px 2px;
		height:12px; width:12px;
	  	background: url(||www_base||shared/img/contacts_images.png?||vz||) 0px -16px;
	}

	.xclosetab:hover {
	  	background: url(||www_base||shared/img/contacts_images.png?||vz||) -16px -16px;
	}
	
	.xaddtab {
		margin:auto 2px 2px 2px;
		width:12px; height:12px;
	  	background: url(||www_base||shared/img/contacts_images.png?||vz||) 0px 0px;
	}

	.xaddtab:hover {
	  	background: url(||www_base||shared/img/contacts_images.png?||vz||) -16px 0px;
	}

	.xtype{
#		margin:auto 2px 3px 2px;
		margin-left:2px;
		margin-right:2px;
		margin-left:3px;
		height:8px; width:5px;
	  	background: url(||www_base||shared/img/contacts_images.png?||vz||) 0px -32px;
	}

	.cm_present{
		color:black;
	}
	.cm_present.selected{
		border:1px solid ||border_color||;
	}	
	.cm_present:hover{
		text-decoration:underline;
		border:1px solid ||border_color||;
		background:white;
	}	
	
	a.link_black{
		color:black;	
		text-decoration:none;
	}
	a.link_black:hover{
		text-decoration:underline;
	}
	a.link_blue{		
		color:||link_blue|| !important;	
		text-decoration:none;
	}
	a.link_blue:hover{
		color:||link_blue||;	
		text-decoration:underline;
	}	
	
	.cm_edit{
	    font-family: Arial, Helvetica, sans-serif;
	}
	
	.cp_hbar{
		clear:both;
		border-top:1px solid #aaa;
		border-bottom:1px solid #aaa;
		padding-left:20px;
		height:25px;background: url(||www_base||shared/img/gradient_big.gif?||vz||);
	}

#	Hack for Firefox, without this dragging and droppping of contacts does not work because 
# 	some of the divs have overflow set!!!
	#contacts_panel {-moz-user-select: none;}
	
	span.mark {
		background:url(||www_base||shared/img/squiggle.gif?||vz||) bottom repeat-x;
	}
	
	.spellmenu{
		background:red;
		position:absolute;
#		left:250px;
#		top:250px;
	}
	
	.spellmenu item{
		display:block;
	}
	
	
# 	Try and bring all the selection colour handling together...
#	Selection coloring state of all normal menus (important for dimmed items in contacts additional fields menu)
  .xmenu a:hover, a.hover_js {
  	background:||selection_color|| !important;
  	color:||selection_txtcolor|| !important;
  }
	
	
#	Contacts management page selection
	#lpanel_contacts .selected, #contacts_panel .selected, #contacts_panel .selected div{
	  	background:||selection_color|| !important;	
		color:||selection_txtcolor||;
	}
	
#	Contact picker selection state handling
	#cp_contact_list .selected{
		background:||selection_color||;	
		color:||selection_txtcolor||;
    }
	
#	Folder tree selection handling	QQSEL
#	Three mechanisms 1) Normal css hover 2) JS based hover 3) selection	
	.ftree .selected, .ftree .hover_js, .ftree .hover_js a, .ltree .selected, .ltree .hover_js, .caltree .selected, .xtree .hover_js, .xtree .selected {
		background:||selection_color||;
		color:||selection_txtcolor||;		
	}
	ul.ftree .selected a {
		color:||selection_txtcolor||;
	}
	#folders .part_cursor:hover, #folders .part_cursor:hover a {
		background:||selection_hovercolor||;
		color:black;
	}
# Switch for 
	ul.ftree .full_cursor:hover a{
#		color:black;
	}
	#folders .part_cursor a:hover{
		text-decoration:underline;
	}

	
#   DND selection handling
	.dnd_sel .part_cursor, .dnd_sel .part_cursor a, #cm_groups .dnd_sel{
		background:||selection_hovercolor|| !important;
		color:black !important;
	}
  	#folders a.dnd_sel{
#  		color:black !important;
# 		background:||selection_color||;
  	}
	
	#folders li{
		border-bottom:1px solid #f4f4f4 !important;	
	}
	#folders li.fake, #folders li li{
		border-bottom:none !important;	
	}	

	#folders a.fake{
		color:||link_blue|| !important;
	}
	#folders a.fake:hover{
		text-decoration:underline !important;
	}
	.fld_link{
		padding:5px 0;
		border-bottom:1px solid #e8e8e8;
	}
    .full_cursor{
		cursor:pointer;
    }
    
#	This will hide the "compose new" link in the ajax interface
#    #lpanel_compose{display:none;}

	.spam_info{
	  	background:#DAF5DA;
		font-style:italic;
		font-weight:bold;
		padding:3px;
		border-bottom:1px solid #ccc;
	}
	.spam_help_link{
		margin-left: 4px;
		font-size:0.8em;
		color:||link_blue|| !important;
		text-decoration:none;
	}
 	.spam_help_link:hover{
		text-decoration:underline;
 	}
	
	.opt_indent{
		padding-left:15px;
	}
	.bold{
#		padding-top:7px 0;
		font-weight:bold;
	}
	.mnu_space{
		margin-left:5px;
	}
	
	.opt_t1{
		border-collapse:collapse;
		background:white;
		border:1px solid #aaa;
	}
	.opt_t1 td{
		text-align:left;
		padding-left: 10px;
		border-bottom:1px solid #aaa;
	}

	.general_tick{
		background: url(||www_base||shared/img/del2.png?||vz||) 0px -209px;
		width:12px;
		height:12px;
		margin:0 4px;
		border:0;
	}

	.fixed_btn{
		width:16px;height:16px;
		background: url(||www_base||shared/img/del2.png?||vz||) -0px -208px;
		margin:0 2px;padding:0 !important;
		float:left;
	}
	.opt_green{
		border:1px solid #777;
		padding:2px;
		background:#DAF5DA;
	}
	.opt_warning{
		background:pink;
		border:1px solid #777;
		padding:2px;
	}
	.opt_blue{
#		background:#E3EEFB;
		background:#DADAF5;
		border:1px solid #777;
		padding:2px;
	}
	
	.asl{
		float:left;
		white-space:nowrap;
		overflow:hidden;
	}
	.as{
		float:right;
		white-space:nowrap;
		overflow:hidden;
	}
	.at, .au{
		border-style:solid;
		font-weight:normal;
	}

	.ar{
		font:9px verdana,arial,sans-serif;
		height:14px;
		margin:0px;
		margin-top:1px;
		outline:none;
		padding: 0px 5px 1px 0px;
		text-decoration:none;
	}
	.at{
		border-width:1px 0px;
		margin:0px 1px;
		padding:0px;
	}
	.au{
		border-width:0px 1px;
		margin:0px -1px;
		padding:1px 0px;
	}	
	.av{
		padding: 0px 5px;
		margin-top:-1px;
	}
	.aa{
		margin-top:2px;
	}

	.ar2{
		font:9px verdana,arial,sans-serif;
		height:14px;
		margin:0px;
		margin-top:0px;
		outline:none;
		padding: 0px 0px 1px 0px;
		text-decoration:none;
	}
	.av2{
		padding: 0px 2px;
		margin-top:-1px;
		font-weight:bold;
	}




#   td:first-child + td + td,
#   td:first-child + td + td + td ,
# .msgs_table td:first-child + td + td + td + td { text-align: right; }
# .msgs_table td:first-child + td + td + td + td + td { text-align: center; }

 .msgs_table .mi { padding-left:2px;}
 .msgs_table .ms { text-align: right; }
 .msgs_table .md { text-align: center; }

# cf x_replied
 .star{
	width:16px;height:16px;
	background: url(||www_base||shared/img/del2.png?||vz||) -1px -144px !important;
 }
.star_sel{	
	width:16px;height:16px;
	background: url(||www_base||shared/img/del2.png?||vz||) -0px -160px !important;
}
.star_blue{	
	width:16px;height:16px;
	background: url(||www_base||shared/img/del2.png?||vz||) -0px -451px !important;
}
.star_red{	
	width:16px;height:16px;
	background: url(||www_base||shared/img/del2.png?||vz||) -0px -485px !important;
}


 .clip{
	width:15px;
	height:15px;
  	background: url(||www_base||shared/img/x_status.png?||vz||) -52px -2px;
 }

.label_icon{
    background: url(||www_base||shared/img/del2.png?||vz||) no-repeat 0 -240px;
}
.label_icon2{
   background: url(||www_base||shared/img/del2.png?||vz||) no-repeat 0 -272px;
}
.label_icon3{
   background: url(||www_base||shared/img/del2.png?||vz||) no-repeat 0 -288px;
}

ul.ftree .search_icon_tree, .ltree .search_icon_tree{
    background: url(||www_base||shared/img/del2.png?||vz||) no-repeat 0 -255px;
    margin-top:-2px;
}

 .msg_history{
 	background: ||message_header_color||;
 	border-bottom: 1px solid #ccc;
 	height:150px;
 	overflow-y:scroll;
 }
 
  .search_local{
#  	background:#e3efff;
  }
.search_close {
	margin-bottom:-4px;
	width:16px;
	height:16px;
	background: url(||www_base||shared/img/del2.png?||vz||) -1px -49px;
	position:absolute;
	top:4px;
	right:3px;
}

.search_close:hover{
	background: url(||www_base||shared/img/del2.png?||vz||) -1px -65px;
}

  .thread{
  	background: url(||www_base||shared/img/clock.png?||vz||) -2px -1px;
#  	margin-top:8px;
  	margin-left:7px;
  	margin-bottom:-2px;
  	width:13px;
  	height:13px;
  }
  .thread:hover{
  	background: url(||www_base||shared/img/sw_img.png?||vz||) -108px -20px;
  }

	.smart_folder_rule{
		font-family:courier;
		font-size:10px;
		border-left:2px dotted #555; 
		padding-left:3px;
		color:#555;
	}

	.smart_folder_delete {
		margin-bottom:-4px;
		width:16px;
		height:16px;
	  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -1px;
	  	z-index:1;
	}
	.smart_folder_delete:hover {
	  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -65px;
	}
	
	.mnu_filter{
#		width:16px;
#		height:16px;
    	background: url(||www_base||shared/img/del2.png?||vz||) 0px -224px;
		position:absolute;
		top:2px;
		right:2px;
	}

	.quota_info{
		float:right;
		color:green;
		margin-top:1px;
		margin-right:5px;
		font-weight:normal;
		font-size:11px;
	}
	.quota_warn{
		color:red;
	}	
	#manage_labels td{
		padding:0 10px;
	}
	
	.lab_warning{
		background:pink;
		border:1px solid #aaa;
		padding:3px;
		margin:10px;
		width:90%;
		text-align:left;
	}

	.lab_info{
		color:#555;
		border:1px solid #bbb;
		padding:3px;
		font-size:10px;
		width:90%;
		text-align:left;
	}

	.label_menu div{
	
	}
	
	.swatch{
		width:15px;
		height:15px;
	}
	.swatch_hover{
		padding:1px;
		border:2px solid transparent;
	}
	.swatch_hover:hover{
		border:2px solid #98BB74;
	}

	.emo_swatch{
		width:20px;
		height:20px;
	}
	
# xmenu

#||define((rounded),(true))||
||ifdef||rounded||
	||define((rounded),(_rnd))||
	||define||space||4||
||else||
	||define||space||0||
||endif||
	.top_left {
		background: transparent url(||www_base||shared/img/shadow_cnr||rounded||.png?||vz||) no-repeat scroll 0 0 ; position:absolute;
		height:30px;width:25px; left:-20px;top:-||plus(20,space)||px;		
	}
	.top_edge {
		background: transparent url(||www_base||shared/img/shadow_horiz||rounded||.png?||vz||) repeat-x scroll 0 0 ; position:absolute;
		height:||plus(20,space)||px;			left:5px;right:20px;top:-||plus(20,space)||px;		
	}
	.top_right {
		background: transparent url(||www_base||shared/img/shadow_cnr||rounded||.png?||vz||) no-repeat scroll 0 -80px ; position:absolute;
		height:30px;width:40px; right:-20px;top:-||plus(20,space)||px;		
	}
	.left_edge {
		background: transparent url(||www_base||shared/img/shadow_vert||rounded||.png?||vz||) repeat-y scroll 0 0 ; position:absolute;
		width:20px; 			left:-20px;top:||minus(10,space)||px;bottom:||minus(5,space)||px;		
	}
	.right_edge {
		background: transparent url(||www_base||shared/img/shadow_vert||rounded||.png?||vz||) repeat-y scroll -30px 0 ; position:absolute;
		width:20px; 			right:-20px;top:||minus(10,space)||px;bottom:||minus(5,space)||px;		
	}
	.bottom_left {
		background: transparent url(||www_base||shared/img/shadow_cnr||rounded||.png?||vz||) no-repeat scroll 0 -55px ; position:absolute;
		height:25px;width:40px; left:-20px;bottom:-||plus(20,space)||px;		
	}
	.bottom_edge {
		background: transparent url(||www_base||shared/img/shadow_horiz||rounded||.png?||vz||) repeat-x scroll 0 -||minus(30,space)||px ; position:absolute;
		height:||plus(20,space)||px;			left:20px;right:20px;bottom:-||plus(20,space)||px;		
	}
	.bottom_right {
		background: transparent url(||www_base||shared/img/shadow_cnr||rounded||.png?||vz||) no-repeat scroll 0 -135px ; position:absolute;
		height:25px;width:40px; right:-20px;bottom:-||plus(20,space)||px;		
	}

	.filtermenu_outer{
		width:180px;overflow:hidden;
	}
	.filtermenu_search{
		position:relative;
	}
	.filtermenu_input{
		width:170px;border:none;padding-left:5px;outline:none;border:0;
	}
	.filtermenu_scrolling, .menu_scrolling{
		overflow-y:scroll;border-top:1px solid #ddd;border-bottom:1px solid #ddd;width:180px;
	}
	
	#dummy_input{
		top:0;left:0;
		position:absolute;
		border:none;
		background:transparent;
	}
	
	.sw_message blockquote{
		margin-left:15px;
		border-left:0;
		color:black;
	}
	.sw_message P{
		margin:0px;padding:0px;
	}
	.sw_message {
		font-size: 12pt;
		font-family:Arial,Helvetica,sans-serif;background:white;
	}
	
	.reply_colors blockquote {
		margin-left:5px;
		padding-left:5px;
		border-left:2px solid #144fae !important;
		color: #144fae !important;
	}
	.reply_colors blockquote .Apple-style-span {
		color: #144fae !important;
	}

	.reply_colors blockquote blockquote{
		border-left:2px solid #006312 !important;
		color: #006312 !important;
	}	
	.reply_colors blockquote blockquote .Apple-style-span {
		color: #006312 !important;
	}	

	.reply_colors blockquote blockquote blockquote{
		border-left:2px solid #8e5656 !important;
		color: #8e5656 !important;
	}		
	.reply_colors blockquote blockquote blockquote .Apple-style-span{
		color: #8e5656 !important;
	}		

	.reply_colors blockquote blockquote blockquote blockquote{
		border-left:2px solid #888 !important;
		color: #888 !important;
	}			
	.reply_colors blockquote blockquote blockquote blockquote .Apple-style-span{
		color: #888 !important;
	}			
	
	.lock{
	  	background: url(||www_base||shared/img/lock.png?||vz||) 0px -0px;
		width:20px; height:19px;
		margin-bottom:-5px;
#		margin-top:5px;
		cursor:pointer;
	}
	.surgevault{
	  	background: url(||www_base||shared/img/lock.png?||vz||) 0px -20px;
	}	
	.surgevault_multi{
	  	background: url(||www_base||shared/img/lock.png?||vz||) 0px -40px;
	}	
	.override{
	  	background: url(||www_base||shared/img/lock.png?||vz||) 0px -80px;
	}	
	.surgevault.override{
	  	background: url(||www_base||shared/img/lock.png?||vz||) 0px -60px;
	}	
	
   .msgline_high{
		width:15px;
		height:15px;
		background: url(||www_base||shared/img/x_status.png?||vz||) -68px -2px;
    }
   .msgline_low{
		width:15px;
		height:15px;
		background: url(||www_base||shared/img/x_status.png?||vz||) -84px -2px;
    }
   .msgline_clip{
		width:15px;
		height:15px;
		background: url(||www_base||shared/img/x_status.png?||vz||) -52px -2px;
    }
   .msgline_lock_silver{
		width:15px;
		height:15px;
		background: url(||www_base||shared/img/x_status.png?||vz||) -100px -2px;
    }
   .msgline_lock_gold{
		width:15px;
		height:15px;
		background: url(||www_base||shared/img/x_status.png?||vz||) -132px -2px;
    }
	
	#message_preview{
		outline:none;
	}
	
	.cxx:hover{
#		background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAoElEQVR42pWRQQ7CIBBFuZsn8BJezAN4BI/goqx0p4lpIwtNaVIowy8zIKmr1kl+/v/DYzVKpTmezliT+oJbRj78DXuKmELEbn/AJBnwpfvSK2xdRO8AO0IA7uz9WPZuARsbYYaIVxGDZqDa+a3C9zdlfTLIOXvEI2VWhW+GRAzkHGq/ll5h3QboLqklNCk3HUnW7LJfwJdnWNXPYbZccAaPd5VkvusvLAAAAABJRU5ErkJggg==);
#		width:11px;
#		height:11px;
#		position:absolute;
#		left:-10px;
#		top:-8px;
		background:red;
	}
	.cxx_wrap{
		width:1px;
		height:1px;
		position:relative;
	}
	#msg_from{
#		position:relative;
#		float:left;
#		display:inline-block;
	}
	.rcpt{
#		position:relative;
#		float:left;
#		display:inline-block;
	}
	.shared_abook{
		text-align:center;
		font-size:11px;
		padding:2px 5px;
		color:#eee;
		font-weight:bold !important;
		background:#5a82b8;
	}
	.shared_abook3{
		text-align:center;
		font-size:10px;
		padding:1px 5px;
		color:#eee;
		font-weight:bold !important;
		background:#aaa;
#		border-top: 1px solid #888;
#		border-bottom: 1px solid #888;
	}	
	.shared_abook4{
		text-align:center;
		font-size:10px;
		padding:1px 5px;
		color:#777777;
		font-weight:bold !important;
		background:#ddd;
		border-top: 1px solid #ccc;
	}	
	.gray_bg{
		background:#ccc;
	}


	#gtree .full_cursor{
		height:auto !important;
	}
	#gtree li{
		border-bottom:1px solid #f4f4f4 !important;	
	}
	#gtree .part_cursor{
		height:auto !important;
		padding:5px 3px 2px 3px;
	}
	#gtree .part_cursor:hover, #gtree .part_cursor:hover a {
		background:||selection_hovercolor||;
	}
	#gtree .part_cursor{
		margin-left:||plus(20,top_icon_size)||px;
	}
	#gtree .top_lev_folder{
		margin-left:||plus(1,top_icon_size)||px !important;
	}
	#gtree .folder_icons_top{
		width:||plus(19,top_icon_size)||px;
	}
	#gtree .tog, #gtree .cm_right{
		margin-top:3px;
	}
	
#	data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAmklEQVR42mNgAIL////rAfF+IP4BxH+A+BsQrwBiSQaoAn0gvrr02qrjyrONH8vP1P8PokF8oPgtINYAKVoNEgBJouOl19aAFM4FKXoBMwEdg8SB8s9Ain5jUwDDQPALpOgDAZOegBQtXn597QlsioDiIDdNAylSA+LHIIXIvgPxgeJnwL6DBoMYEM8G4tfQsPoIxMuAWB4kDwCRrNHJnDC8OAAAAABJRU5ErkJggg==

 .nopad{
 	padding:0 !important;
 	margin-top:0 !important;
 }
  	.ml{
   	margin-left:25px;
 } 
 	.ml2{
  	margin-left:10px;
 }
  	.mr{
   	margin-right:25px;
 } 
 
	.green_text{
		color:green;
	}
	.gray{
		color:#888;
	}
	 
	#accounts{
		margin-top:-1px;margin-bottom:8px;border-top:#ccc 1px solid;width:800px;
	}
 	.act_panel{
 		background:#e6e6e6;
 		border-top:1px solid white;
 		border-bottom:#ccc 1px solid;
 		padding:0 0;
 	}
	
	.col_self{
		background:#eee;
	}
	.col_acct{
		background:#e3eefb;
	}
	.col_ident{
		background:#fff7d7;
	}
	.col_alias{
	
	}
 	
 	.account_sel{
 		font-weight:bold;
 	}
 	.account_horiz:hover{
		background:||selection_hovercolor||;
 	}
 	
 	.missing{
 		color:#777; font-style:italic;
 	}
 	.error_surgeweb{
 	
 	}
 	.error_other{
		font-size:0.8em !important; 	
 	} 	
 	.ok_surgeweb{
 	
 	}
 	
 	.fdnd_drag{
		background:#b5edbc;
 	}
 	
 	.L1{
 		background:#f0f0f0;
 	}
	.flds_link{
		color:||link_blue||;
		text-decoration:none;
		font-size:0.8em;
	}
	.flds_link:hover{
		text-decoration:underline;
	} 
	.pl20{
		padding-left:20px;
	}
	.pl10{
		padding-left:10px;
	}
	.pr20{
		padding-right:20px;
	}
	.pt20{
		padding-top:20px;
	}
	.pt3{
		padding-top:3px;
	}
 	.xl {
 		text-align:left;
# 		padding-left:3px;
 	}
 	.xc {
 		text-align:center;
 	}
 	.xr {
 		text-align:right;
# 		padding-right:3px;
 	}
 	.xbl {
 		border-left:1px solid #ddd;
 	} 	
 	.xbu {
 		border-bottom:1px solid #ddd;
 	}
 	.xbr {
 		border-right:1px solid #ddd;
 	} 
 	.vt{
 		vertical-align: top;
 		padding-top:3px;
 	}
	.fldmng_fld_icon{
		background: url(||www_base||shared/img/vbtn_icons.gif?||vz||) no-repeat 0 -80px;
		margin: 2px;
		height:16px; width:16px;
		float:left;
	}
	.fldmng_fld_shared_icon{
		background: url(||www_base||shared/img/vbtn_icons.gif?||vz||) no-repeat 0 -96px;
		margin: 2px;
		height:16px; width:16px;
		float:left;
	}
 	.smaller{
 		font-size:0.9em;
 	}
 	.fld_update td:first-child + td, .fld_update td:first-child + td + td, .fld_update td:first-child + td + td + td, .fld_update td:first-child + td + td + td a  {
 		color:#aaa;
 	}
 	
	.win_width{
		max-width:100% !important;
	} 	
	
	.labels, date_etc{
		padding-left:15px;
	}
	.infoicons{
		float:right;
		padding-left:10px;
#		padding-left:5px;
	}	

	.snippet{
		color:#999;	
		font-weight:normal;
	}
	.wide_list .snippet{
		color:#666 !important;
	}
	#search_controls{
		float:right;
		text-align:right;
	}
	#search_controls.widescreen {
		float:left;
		text-align:left;
		margin-right:20px;
	}
	#navigator_outer.widescreen{
		display:none;
	}
	
	.msglist_nav{
		font-weight:bold;
		font-style:italic;
		padding:20px;
		text-align:center;
		font-size:1.2em;
		color:#777;
	}
	.wxc {
		font-weight:normal;
		color:#779;
	}
	.widescreen_msg{
		border-left:1px solid ||border_color||;
	}
	.chat_add a{
		color:black;
		text-decoration:none;
	}
	.chat_add a:hover{
		text-decoration:underline;
	}
	
	.nosmart{
		display:none;
	}
	
	
.dummy_value{domain:||domain|| }
.dummy_value{domain_ex:||domain_ex||  ||foobar||}
	
	#paste_container{
		position:absolute;
		left:10px; top:300px;
	}
	#text_paste{
		height:300px;
	}

 .no_round{
     outline: none;
     -webkit-appearance: none;
     -webkit-border-radius:0px;
 }
	
	
 .redirect_info{
	font-style:italic;
 	color:#d00;
	border:1px transparent;
	overflow:hidden;
	padding:0;
	padding:3px;
	height:16px;
 }
 .note_info{
	font-style:italic;
	border:1px transparent;
	overflow:hidden;
	padding:0;
	padding:3px;
	height:16px;
 }
 .triangle_font{
 	color:#777;
 	font-size:11px;
 }

 .msg_rpath{
	color:#b00;		
 }


 
 .allow_rpath a{
	text-decoration:none;
	font-style:italic;
 }
 .chat_add a:hover{
	text-decoration:underline;
 }
 .extras_table{
	 border-collapse:collapse;border: 1px solid black;width:540px;
	 margin-top:15px;
 } 
 
 .scroll_dlg{
  	overflow-y:auto !important;
 }
 .nobold{
	font-weight:normal !important;
 }

 .vaultsafe{
	color:#999;
 }
 
  #xol_indicator{
     position: absolute;
 	 right: 0px; top:||minus(plus(banner_height,panel_gap),25)||px;
     text-align: center;
     height:23px;
     overflow:hidden;
 }

 .xol_link{
 	color:black !important;
	text-decoration:none;
 }
 .xol_link:hover{
	text-decoration:underline;
 }

	.closeconv {
		margin-bottom:-4px;
		margin-right:3px;
		width:16px;
		height:16px;
	  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -17px;
	}

	.closeconv:hover {
	  	background: url(||www_base||shared/img/del2.png?||vz||) -1px -65px;
	}


# Todo and XOL css handling

	 .xol_hdr{border-top:1px solid #aaa;border-bottom:1px solid #aaa;padding-left:3px;background-color:#dfd;height:12px;font-size:10px;}
	 .yio_cell{border-bottom:1px solid #ddd;padding-left:1px;height:28px;white-space:nowrap;}
	 .yio_img{float:left;margin-right:3px;}
	 .offline{font-size:9px;color:#999;}
	 .online{font-size:9px;color:#696;}
	 .dot_online{width:8px;height:8px;background-color:green;display:inline-block;margin-right:2px;margin-bottom:-1px;}
	 ._conv_image{float:right;margin:-2px 2px 0 0;}
	 .yio_conv {display:none;width:32px;height:28px;position:absolute;right:0;}
	 .conv_image { background: url(||www||img/conv.png?||vz||);margin:-2px 0 0 3px;height:28px;width:24px;}
	 .yio_cell:hover { background:||selection_hovercolor||;}
	 .yio_cell:hover .yio_conv { display:block;}
	 .yio_cell:hover .yio_conv { display:block;background:||selection_hovercolor||;}
	 .yio_conv:hover .conv_image { background:url(||www||img/conv2.png?||vz||);}


	 .xol_activity{color:#007700;}
	 .xol_red{color:#a00;}
	 .xol_gray{color:#888888;}
	 .xol_menu_absent{color:#888888;}
	 .xol_menu_present{color:#007700;}
	 .xol_menu_small{font-size:11px;}
	 
	 .todo_cell{border-bottom:1px solid #ddd;padding-left:5px;padding-top:3px;height:28px;white-space:nowrap;overflow:hidden;}
	 #todo_list{text-align:left;overflow-y:auto; position:relative;}
	 #todo_btns{background:gray;height:22px;}
	 .todo_hdr{border-top:1px solid #aaa;border-bottom:1px solid #aaa;padding-left:3px;background-color:#ffec89;height:12px;font-size:10px;}

	.todo_congrat{ background:url(||www_base||shared/img/todo_gradient.png?||vz||);height:80px;}

	.todo_column .head{
		padding:10px;
	}
	.todo_column .head_right{
		float:right;
		margin-right:10px;
		color:gray;
	}
	.todo_column ul {
		margin:10px; padding:0;
	}
	.todo_column li {
		list-style: none;
		margin:0; padding:0; padding-top:3px; padding-left:2px;
		border-bottom:1px dotted lightgray;
		height:22px;
	}
	.todo_column {
		width:33%;position:absolute;top:0;
#		padding:10px;
#		border-bottom:1px dotted lightgray;
	}
	.todo_column .sel{
		background:pink;
	}
	.todo_done{
		text-decoration: line-through;
	}
	.todo_fade_animated{
#		height:0px;
#		padding-top:0px;
		opacity:0.1;
		-moz-transition-property: height,opacity,padding-top;  
		-moz-transition-duration: 1s;  
		-webkit-transition-property: height, opacity, padding-top;  
		-webkit-transition-duration: 1s;  
		-o-transition-property: height, opacity, padding-top;  
		-o-transition-duration: 1s;  
	}
	.todo_hide_animated{
		height:0px;
		padding-top:0px;
		opacity:0.1;
		-moz-transition-property: height,opacity,padding-top;  
		-moz-transition-duration: 0.1s;  
		-webkit-transition-property: height, opacity, padding-top;  
		-webkit-transition-duration: 0.1s;  
		-o-transition-property: height, opacity, padding-top;  
		-o-transition-duration: 0.1s;  
	}
	#todo_footer{
		height:14px;
		border-top:1px solid gray;
		color:gray;
		text-align:left;
		padding:3px;
	}
	
# Calendar formatting
	#cal_width{
		margin:auto;
		text-align:left;
		width:500px;
#		position:relative;
		margin-bottom:10px;
	}
	#cal_title{
		display:inline-block;
		position:absolute;
		margin-top:5px;
		margin-left:10px;
		margin-right:20px;
		font-size:35px;
	}
	#cal_header{
		position:absolute;
#		margin-top:30px;
		height:12px;
	}
	#cal_shadow{
		position:absolute;
		background: url(||www_base||shared/img/cal.png?||vz||) -0px -36px;
	}

	#cal_frame{
		position:relative;
		margin:0;
		width:100%;
		border-collapse:collapse;
		text-align:left;	
	}
	.cal_box{
		position:absolute;
		padding-bottom:10px;
	}
	#cal_header_table{
		border-collapse:collapse;
	}
	#cal_body_table{
		border-collapse:collapse;
	}


	.cs_bb1{ border-bottom:1px solid #aaa;}
	.cs_bt1{ border-top:1px solid #aaa; }
	.cs_bl1{ border-left:1px solid #aaa; }
	.cs_bb2{ border-bottom:1px solid lightgray; }
	.cs_bt2{ border-top:1px solid lightgray; }
	.cs_bl2{ border-left:1px solid lightgray; }
	
	.cs_TH{
		vertical-align:top;
#		height:50px;
	}
	
	.cal_b{
		border-bottom:1px solid lightgray;
		border-right:1px solid lightgray;
	}
	.cal_l{
		border-bottom:1px solid lightgray;
		border-left:1px solid lightgray;
	}
	
	.cal_week_hour, .cal_day_hour{
		border:1px solid lightgray;
		border-top:none;
		height:30px;
	}
	.cal_month_day{
		border:1px solid lightgray;
		border-top:none;
		height:100px;	
	}
	.cal_year_month{
		border:1px solid lightgray;
		border-top:none;
		height:200px;	
	}
	.cal_year_day{
		border-top:1px solid lightgray;
		border-bottom:1px solid lightgray;
		border-left:1px solid gray;
		border-right:1px solid gray;
	}
	.cal_year_noday{
		border-left:1px solid gray;
		padding:2px;
		height:14px;
	}
	.cal_font{
		font-size:11px;
		color:#444;
	}
	

	.cal_bt{
		border-top:1px solid #aaa;
		border-bottom:1px solid lightgray;
	}
	.cal_bm{
		border-top:1px solid lightgray;
		border-bottom:1px solid lightgray;
	}
	.cal_bb{
		border-top:1px solid lightgray;
		border-bottom:1px solid #aaa;
	}
	.cal_bs{
		border-left:1px solid #999;
	}
	.cal_pl2{
		padding-left:2px;
	}

	.cal_bt2{
		border-top:1px solid #aaa;
	}
	.cal_btb{
		border-top:1px solid #aaa;
		border-bottom:1px solid #aaa;
	}

	.cal_bt3a{
		border-top:1px solid lightgray;
	}
	.cal_bt3b{
		border-top:1px solid #e7e7e7;
	}

	
	.cal_font2{
		font-size:11px;
		color:#007700;
	}
	#cal_lpane ul, #cloud_lpane ul{
		margin:5px; padding:0;
	}
	#cal_lpane li, #cloud_lpane li{
		height:20px;
		list-style:none;
	}
	#cal_lpane a, #cloud_lpane a{
		text-decoration:none;
		color:black;
	}
	#cal_lpane a:hover, #cloud_lpane a:hover{
		text-decoration:underline;
	}
	
	
	.cbox_outer{
		display:inline-block;
		position:relative;
		width:15px;height:16px;
		margin-bottom:-3px;
	}
	.cbox_col{
		position:absolute;
		top:1px; left:0px;
		width:14px;height:14px;
	}
	.cbox_bg{
		position:absolute;
		top:0; left:0;
		width:15px;height:16px;
		background: url(||www_base||shared/img/cal.png?||vz||) no-repeat -2px -1px;
	}
	.cbox_bg.icon_at{background-position: -2px -55px;}
	.cbox_bg.icon_hs{background-position: -2px -73px;}
	.cbox_bg.icon_pr{background-position: -2px -109px;}
	.cbox_bg.icon_snd{background-position: -2px -127px;}
	.cbox.active .cbox_bg{
		background: url(||www_base||shared/img/cal.png?||vz||) no-repeat -20px -1px;
	}			
	.cbox_outer.active .cbox_bg.icon_at{background-position: -20px -55px;}
	.cbox_outer.active .cbox_bg.icon_hs{background-position: -20px -73px;}
	.cbox_outer.active .cbox_bg.icon_pr{background-position: -20px -109px;}
	.cbox_outer.active .cbox_bg.icon_snd{background-position: -20px -127px;}
	.cbox_outer.sel .cbox_bg{
		background: url(||www_base||shared/img/cal.png?||vz||) no-repeat -20px -19px;
	}			
	.cbox_outer.active.sel .cbox_bg{
		background: url(||www_base||shared/img/cal.png?||vz||) no-repeat -2px -19px;;
	}			

	.xmenu .menu_cbox{
		display:none;
	}
	.xmenu .sel .menu_cbox{
		display:block;
		float:right;
		width:15px;height:16px;
		background: url(||www_base||shared/img/cal.png?||vz||) no-repeat -2px -145px;
	}



	
	.cal_ymini{
		border:1px solid gray;
		background:white;
	}
	.cal_ymini a{
		text-decoration:none;
		color:black;
	}
	.cal_ymini:hover a{
		text-decoration:underline;
	}	
	.cal_mini_title{
		text-align:center;
	}
	.hline{
		margin:0px;margin-top:3px;margin-bottom:3px;
		height:1px;
		width:100%;
		border-top:1px solid #bbb;
	}
	.nav_mini_outer{
		padding:5px; 
		background:#e6e6e6;
		border-bottom:1px solid #ccc;
	}
	.w25 {
		width:25%;
	}
	.w12 { width:12%; }
	.w33 { width:33.3%; }
	.h25 { height:25px;}
	.h20 { height:20px;}
	.chy {
		height:14px;
	}
	.cHd {
		height:23px;
	}
	.chm {
# 85	
		height:95px;
	}
	.chV{
#		background:red;
		height:4px;
		cursor:s-resize;
		position:absolute;
		left:0px;top:0px;
		z-index:20;
	}
	.chH{
		margin:0;
#		background:red;
		width:4px;
		cursor:w-resize;
		position:absolute;
		left:0px;top:0px;
		z-index:20;
	}
	.cal_outside a, .cal_outside .day_span{
		color:#aaa !important;
	}
	.cal_weekend2{
		background:#eaeaea;
		background-clip:padding-box;
	}
	.cal_outside{
		background:#e0e0e0;
		background-clip:padding-box;
	}
	.cal_sel{
		background: #d6e4e9;
		background-clip:padding-box;
	}
	.cal_weekend{
		background:#e0e0e0;
		background-clip:padding-box;
	}
	.cal_today a{
		font-weight:bold;
		color:#770000 !important;
	}
	._cal_frame{
		margin:0;
		width:100%;
		border-collapse:collapse;
		text-align:left;	
	}
	.cal_today2 .day_span{
		font-weight:bold;
		color:#ff0000 !important;
	}
	.cal_today2 {
		border:#ff0000 1px solid;
	}
	#cal_title{
	}
	
	.more_span{
		position:absolute; display:none; bottom:0;left:0;right:0;font-size:9px;text-align:center;color:||link_blue|| !important;
	}
	.overfull .more_span{
		display:block	;
	}
	.more_span:hover{
		text-decoration:underline;
	}
	
# what was this???
# background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABACAYAAADbER1AAAAAJ0lEQVQYlWP4//9/MxMDA8MxJgYGht9w4hec+IlKICQQin8zjFgAACmEEBsSAfiSAAAAAElFTkSuQmCC")	

 .cal_spinouter{
 	opacity:0.7;filter:alpha(opacity=70);
 	background:gray;
 	position:absolute; left:100px; top:5px;width:66px;height:52px; 
 	border-radius:10px;
# 	position:relative;
 	z-index:20;
 }

 .cal_spinner {
 	position:absolute; left:12px; top:5px;width:42px;height:42px; 
 	background-image: url(||www_base||shared/img/spinner.png?||vz||);
 	z-index:21;
 }


.color0 { background-color: #efb4cf !important; border-color: #bb8ea4 !important;}
.color1 { background-color: #e2d2c3 !important; border-color: #b1a79c !important;}
.color2 { background-color: #b3e5e1 !important; border-color: #8fb2b2 !important;}
.color3 { background-color: #b7cfed !important; border-color: #92a5bc !important;}
.color4 { background-color: #c9c9f7 !important; border-color: #a09fb6 !important;}
.color5 { background-color: #fcb895 !important; border-color: #c49176 !important;}
.color6 { background-color: #f7e5c1 !important; border-color: #c0b49a !important;}
.color7 { background-color: #ade0b9 !important; border-color: #89ad92 !important;}
.color8 { background-color: #d4eafc !important; border-color: #a7b8c5 !important;}
.color9 { background-color: #d5befc !important; border-color: #a396b0 !important;}
.color10 { background-color: #fcd192 !important; border-color: #c3a475 !important;}
.color11 { background-color: #ffeea6 !important; border-color: #c6bb85 !important;}
.color12 { background-color: #abcecd !important; border-color: #87a4a5 !important;}
.color13 { background-color: #abe6ed !important; border-color: #8ab1b9 !important;}
.color14 { background-color: #dae1e5 !important; border-color: #acb2b7 !important;}
.color15 { background-color: #f0f4f5 !important; border-color: #adb2b7 !important;}
.colorClear { background-color: white; border-color: #A1ADAD !important;}


.animate_move, .grid_animated li{  
  position: absolute;  
  -moz-transition-property: left, top, opacity;  
  -moz-transition-duration: 0.2s;  
  -webkit-transition-property: left, top, opacity;  
  -webkit-transition-duration: 0.2s;  
  -o-transition-property: left, top, opacity;  
  -o-transition-duration: 0.2s;  
}  

 #cloud_list{
	position:relative;
}

.animate_slide {  
  position: absolute;  
  -moz-transition-property: left, right, opacity;  
  -moz-transition-duration: 0.4s;  
  -webkit-transition-property: left, right, opacity;  
  -webkit-transition-duration: 0.4s;  
  -o-transition-property: left, right, opacity;  
  -o-transition-duration: 0.4s;  
  opacity:0.0;
}  

 #cloudlist_extra{
	background:#E6E6E6;
	padding:2px;
	padding-left:30px;
}
.cals_header{
	color:gray;
	margin-top:3px;
}

.cld_fld_nlarge{
	font-family: Segoe UI,Tahoma,Verdana,Arial;
	font-size: 40px;
	line-height: 40px;
}
# *** Photo & folder display styling
.pht_node{display:block;overflow:hidden;position:relative;cursor:default}
a .pht_node{cursor:pointer}
a .pht_node img{ border-width:0px;}
# Image / Album display properties
.pht_layout{background-color:#d9d9d9;display:block;position:relative}
a:hover .pht_layout img{opacity:.85;filter:alpha(opacity=85)}
.pht_layout img{visibility:hidden;width:100%;height:100%;position:absolute;top:0;left:0}
.pht_with_img .pht_layout img, .pht_imgfld img{visibility:visible}

# Set the image z indexes :-)
.pht_txt_blk{z-index:1}
.pht_img_blk{z-index:0;overflow:hidden}

# Text styling
.pht_txt_blk,.pht_img_blk,.pht_none_blk{position:absolute;top:0;left:0}
.pht_txt_blk2{position:absolute;bottom:0;width:90%;display:block;}

# Folder display styling 
.pht_with_fld{width:100%;height:100%}
.pht_with_fld,.pht_with_fld .et_text{color:#000}
.pht_fld_outer{background:#faf5c7;display:block;position:absolute;top:8px;left:0;bottom:0;right:0;border:1px solid #ecd8a2;border-radius:4px 4px 0 0}
.pht_fld_gradient{position:absolute;top:0;left:0;right:0;bottom:0;border:1px solid #faf5c7;border-radius:4px 4px 0 0}
.pht_fld_gradient img{position:absolute;left:0;top:0;width:100%;height:100%}
.pht_fld_tab{width:82px;height:18px;top:-9px;position:absolute;right:-1px;border:none}
.pht_fld_blk2{position:absolute;width:100%;height:100%;top:0;left:0}
#a:hover .pht_fld_blk2{opacity:.85;filter:alpha(opacity=85)}
.pht_node:hover .pht_fld_blk2{opacity:.85;filter:alpha(opacity=85)}

 li.selected .pht_node .pht_fld_blk2{opacity:.45;filter:alpha(opacity=45)}

# Document links styling
.pht_doc_blk,.pht_doc_blk2{display:block;width:100%;white-space:nowrap}
.pht_doc_blk{height:100%}
.pht_doc_color{background-color:#f5f5f5}
a:hover .pht_doc_color{background-color:#f9f9f9}
.pht_doc_outer{position:absolute;left:0;top:50%;display:block}
.pht_doc_img{display:block;position:absolute}	
.pht_doc_blk3{position:absolute;top:0;bottom:0}
.pht_doc_stl1 .et_text,.pht_doc_stl1 .et_main a.et_text:hover{color:#2a2a2a}
.pht_doc_stl2{font-size:84.6%;color:#6e6e6e;top:50%}
	
# various addiotional stylings
.pht_with_img .pht_with_text , .QQQ{background-image:url('||www_base||shared/img/pht_gradient.png');background-position:center bottom;background-repeat:repeat-x}
.IE_M6 .pht_with_img .pht_with_text{background:none}
.pht_with_text,.pht_with_text .et_text, .QWHITE{color:#fff !important;}
.pht_name_stl2 .pht_name_stl{display:block;margin:0 6px;padding-bottom:6px;white-space:pre;overflow:hidden;text-overflow:ellipsis;}
.pht_number_stl{position:absolute;bottom:-2px;right:-2px;font-family:Segoe UI,Tahoma,Verdana,Arial;font-size:40px;line-height:40px;}
.pht_with_fld .pht_number_stl{bottom:0;right:0}
.pht_with_text .pht_number_stl{opacity:.4;filter:alpha(opacity=40)}
.pht_with_fld .pht_number_stl{opacity:.1;filter:alpha(opacity=10)}
.pht_imgfld .pht_number_stl{opacity:.4;filter:alpha(opacity=40)}
.pht_doc_stl1 .pht_name_stl,.pht_doc_stl2{overflow:hidden;text-overflow:ellipsis;display:block;overflow:hidden;
						text-overflow:ellipsis;white-space:nowrap;position:absolute;left:0;width:100%}
.pht_doc_stl1 .pht_name_stl{bottom:50%}

.pht_slow_fade {  
  -moz-transition-property: opacity;  
  -moz-transition-duration: 2s;  
  -webkit-transition-property: opacity;  
  -webkit-transition-duration: 2s;  
  -o-transition-property: opacity;  
  -o-transition-duration: 2s; 
 }  

# selection checkbox handling
.pht_node .pht_sel{ position:absolute; left:5px;top:10px; z-index:50; opacity:.5;filter:alpha(opacity=50);}
.pht_node:hover .pht_sel {opacity:1.0;filter:alpha(opacity=100);}
li.selected .pht_node .pht_sel {opacity:1.0; filter:alpha(opacity=100);}
li.selected .pht_node .pht_doc_color {background:||selection_msglist_color||;}

.pht_info { position:absolute; right:5px;top:13px; z-index:50; font-size:10px; width:100px; height:30px; text-align:right;color:#999;}
.pht_info_fld { position:absolute; right:5px;top:20px; z-index:50; font-size:10px; width:100px; height:30px; text-align:right;color:#999;}

#itemT itemTl -> pht_node pht_with_img
#itemTo -> pht_txt_blk
#itemTa itemTan -> pht_txt_blk2 pht_name_stl2
#itemTac -> pht_number_stl
#.itemTfhov -> .pht_fld_blk2
#itemName -> pht_name_stl
#itemTd -> pht_doc_blk 

.QQQ{background-image:url('||www_base||shared/img/pht_gradient.png') !important;background-position:center bottom;background-repeat:repeat-x}


.file_link{
	margin-top:2px; margin-right:10px;
	width:16px;
	height:16px;
	background: url(||www_base||shared/img/del2.png?||vz||) 0px -468px;
	z-index:1;
	float:right;
}

 #cloud_list .file_link{
 	visibility:hidden;
 }
# #cloud_list tr:hover .file_link{
# 	visibility:visible;
# }
 #cloud_list tr.shared .file_link{
 	visibility:visible;
 }
 #cloud_list tr.file_row:hover td {
 	background:#f7f7f7 !important;
 }
 #cloud_list tr.file_row.selected:hover td {
 	background:#fff4c2 !important;
 }


# Cloud tree in the left panel  QQSEL
#	Three mechanisms 1) Normal css hover 2) JS based hover 3) selection	

	#cloud_tree .part_cursor:hover, #cloud_tree .part_cursor:hover a {
		background:||selection_hovercolor||;
		color:black;
	}
# 	ul.ftree .selected a {
# 		color:||selection_txtcolor||;
# 	}

.cloud_folder_icon{
    background: url(||www_base||shared/img/vbtn_icons.gif?||vz||) no-repeat 0 -80px;
    margin-top:2px;
    margin-left: 5px;
	height:16px; width:16px;
}

.grid_dynamic li{  
  position: absolute;  
#  width:150px;
  height:100px;
  display:inline-block;
  overflow:hidden;
#  border:1px solid gray;
  margin:3px;
}

.cloud_info_list, .cloud_info_list li{
	list-style:none;
	padding:0; margin:0;
}


.cal_edit_gray{
	color:#666;
	text-align:right;
	width:70px;
	vertical-align:top;
	padding-top:3px;
}
.cal_switch_btn{
  	margin:0;
  	margin-right:3px;
  	padding:0 7px 0 7px;
  	font-size:11px;
}
.cal_cur_view{
	font-weight:bold;
}
.cal_day, .cal_time{
	width:80px;
}

 .calhint{
	position:absolute;
	z-index:100;
	padding:5px;
	border:1px solid #777;
	border-radius:4px;
	width:330px;
	height:130px;
	background:white;
 }

.hint_arrow_outer{
	position:absolute;
	z-index:1;
}
.hint_arrow_border, .hint_arrow_bg{
	top:0px;width:0px;height:0px;
	position:absolute;
}


  #xol_icon{
  	height:18px;
  	width:18px;
	background: url(||www_base||shared/img/xol.png?||vz||) no-repeat 0 -0px;
  }
  #xol_icon.xol_online{
	background-position: -0px -54px;
  }
  #xol_icon.xol_idle{
	background-position: -0px -36px;
  }

	.cal_hint_extra{
		font-size:9px;
		color:gray;
	}
	.hint_desc_edit{
		margin-top:-2px;
		margin-left:-2px;
		width:315px;
		font-size:17px;
		font-weight:bold;
		padding:2px;
	}
	.hint_desc_noedit{
		font-weight:bold;
		padding-bottom:3px;
		display:block;
	}
	.daylist_list{
		height:500px;
		width:350px;
		overflow-Y:auto;
	}
	.daylist_item{
		font-size:16px;
		height:32px;
		border-top:
		1px solid gray;
		border-left:1px solid gray;
		font-size:12px;
	}
	.body_time{
		color:#444;
	}
  .hatched .cal_block{
	background: url(||www_base||shared/img/hatched.png?||vz||) !important;
	opacity:1;
  }
	
  .hint_box{
  	padding:5px;
  }
  
  
# *** popup styling

	.popover_ovrl {
	  top: 0; left: 0; position: fixed;
	  width: 100%; height:100%;
	}
	.popover_ovrl_dark {
	  background-color: #eee;
	  -moz-opacity: 0.7; opacity: 0.7;
	  filter:alpha(opacity=70);
	}


# ***

 #cal_date_outer{
	position:absolute;
}	
.hint_date_box{
	padding:20px;
	background:white;
	width:120px;
	height:60px;
	border:1px solid #777;
	border-radius:4px;
}

.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.popover_btn_right{
	float:right; 
}
.popover_btn{
	width:60px;
	margin-right:10px;
}

 #hist_canvas{
	height:20px;
	width:150px;
 }
  a.link_htag {		
  		color:#999;	
  		text-decoration:none;
  	}
  a.link_htag:hover{
  		text-decoration:underline;
  	}	

.evt_list_item{
	border:1px solid lightgray;
	font-size:12px;padding:5px;
}
.evt_list_empty{
	font-size:14px;padding:20px;
	color:gray;
}
.cal_hint{
	padding:10px;	
	color:gray;
}
.log_links{
	margin:auto;text-align:center;
	padding:0px;
}

.nav_outer{
	margin-left:-300px;text-align:right;
}

.htags_plain{
	top:3px;
	left:6px;
	background:white;
	position:absolute;
	width:168px;
	height:16px;
	vertical-align:top;
	font-family:arial;
	font-size:12px;
}
.htags_input{
	top:0px;
	background:white;
	position:absolute;
	width:170px;
	height:16px;
	vertical-align:top;
	resize:none;
	overflow:hidden;
	font-family:arial;
	font-size:12px;
	border:1px solid #c7cfd9;
}
.htags_outer{
	height:20px;
	width:185px;
	padding:0px;
	display:inline-block;
	position:relative;
}

 .todo_search_outer{
 	position:relative;
 }
 .todo_search{
 	bottom:0px;right:1px;
 	height:18px;
 	background:#dddddd;
 	position:absolute;
 	border-top:1px solid lightgray;
# 	color:gray;
 	text-align:left;
 	padding-left:1px;
 }
 .todo_search_ip{
 	border:none;
 	background:none;
 	margin-top:-1px;
 	padding-left:3px;
 	margin-right:1px;
 	color:gray;
 }
 
 #todo_noscroller{
 	overflow:hidden;
 }
 .sysfld a, .sysfld{
 	font-weight:bold;
 	color:black;
 	text-decoration:none;
 }
  .sysfld a:hover{
  	text-decoration:underline;
 }
 
  .view_container, .compose_container{
  	position:relative;
  }
  .view_extra, .compose_extra{
  	position:absolute;
  	height:100%;
  	right:0; 
	background:white;
  	border-left:1px solid ||border_color||;
  	overflow-y:auto;
  }
  .message_view{
  	overflow-y:auto; overflow-x:auto;
  	height:100%;
  }
  .separator_right, .separator_left{
  	background:#bbb;
  	color:#fff;
	font-size:12px;
  }
  .separator_right{
  	padding:2px 1px 2px 1px;
  }
  .separator_left{
  	text-shadow: rgba(0, 0, 0, 0.198039) 1px 1px 0px;
#  	text-shadow: -1px -1px 0px #374683;
  	padding:2px 1px 2px 5px;
  }
  .separator_right a{
  	font-size:10px;
  	text-shadow: none;
  }
  .snippet_outer_wide{
  	overflow:hidden;
  	font-size:11px;
  	line-height:14px;
  	padding-top:3px;
  }
  
 .deferred{
	width:16px;height:16px;
	background: url(||www_base||shared/img/del2.png?||vz||) -0px -502px !important;
  }
 .deferred2{
	width:16px;height:16px;
	background: url(||www_base||shared/img/del2.png?||vz||) -0px -518px !important;
  }

 .wide_fld{
 	font-weight:normal !important;
 }
 
  .wide_itm{
  	margin-top:6px;
  	margin-left:2px;
  	margin-bottom:4px;
  }
  
   .xtree li div{
   	padding:5px !important;
   	padding-left:8px !important;
   }
   
  .defer_menu li:hover, .qpick_menu li:hover {
  	background:||selection_color|| !important;
  	color:||selection_txtcolor|| !important;
  }   
  
  .msgs_line.dnd_sel_top{
  	border-top:2px solid red;
  }
  .msgs_line.dnd_sel_btm{
  	border-bottom:2px solid red;
  }  
  .hline{
  	position:absolute !important;
  	height:2px;
  	background:red;
  	border:none;
  }
  
  #messages_list{
  	position:relative;
  }
  .deferred_message
  {
  	background:#f0db14;
  	text-align:center;
  	padding:2px 0 2px 0;
  	border-bottom:1px solid #ccc;
  	color:#555;
  	font-size:11px;
#  	font-weight:bold;
#  	text-shadow: rgba(0, 0, 0, 0.198039) 1px 1px 0px;
  }
  
  .defer_menu li.menu_spacer, .qpick_menu li.menu_spacer, .xtree li.menu_spacer
  {
  	height:4px !important;
  	padding:4px 0px 2px 6px !important;
  	background:white !important;
  }
  .defer_menu hr, .qpick_menu hr{
  	border-top:1px solid #aaa;
  	border-bottom:none;
  }
  
  .PTime li:hover{
  	background:||selection_color||;
  }
  .menu_row2{
  	padding-top:2px;clear:left;
  }
   #send_encrypt{
    margin-right:7px;
   }

# QQQCOLOR
||ifdef||_note_not_yet_||
   .note_itself, .note_itself .reply_colors .sw_message{
    background: #F1EED5;
   }
   .note_itself .sw_message{
    font-family:Monaco,"Lucida Console","Courier New",monospace;
    font-size:10pt;
   }
   .note_inlist, .msgs_line:hover td.note_inlist{
   	background: #efe9b7 !important;
   }   
   .note_itself .reply_colors{
   	background:none;
   }
||endif||

   .compose_right{
    float:right;margin-top:1px;padding-right:3px;height:15px;
   }

   #lpanel_body, #msglist_box, #message_preview, #message_panel_outer, #contacts_panel {
    -webkit-overflow-scrolling: touch;
  }

   .html5_select{
   	width:80px;opacity:0;filter:alpha(opacity=0);position:absolute; text-align:center;z-index:2;
   }
   
   	.invite_info{
   	  	background:#ffd0ac;
   		font-style:italic;
   		font-weight:bold;
   		padding:3px;
   		border-bottom:1px solid #ccc;
   	}

 #cloud_file_content{
 	width:100%; height:800px;
 }


# New calender invites integration
 .invitee_ul{
	list-style-type:none; 
    margin:0;
    padding:0;
 }
 .invitee_li{
	list-style-type:none; 
    padding:2px;
 } 
 .invitee_li a{
  	color:#000000;
    text-decoration: none;
 }
 .invitee_li a:hover {
  	color:#0066CC;
    text-decoration: underline;
 }
 .menu_over_menu{
 	z-index:1010;
 }
 
 
# Add some subtle animations
.list_animate_in{
	-webkit-animation-duration:.15s;
	-moz-animation-duration:.15s;
	animation-duration:.15s;
	-webkit-animation-name:slide_frames,fade_frames;
	-moz-animation-name:slide_frames,fade_frames;
	animation-name:slide_frames,fade_frames;
}
.msg_animate_in{
	-webkit-animation-duration:.15s;
	-moz-animation-duration:.15s;
	animation-duration:.15s;
	-webkit-animation-name:slide_frames,fade_frames;
	-moz-animation-name:slide_frames,fade_frames;
	animation-name:slide_frames,fade_frames;
}
@-webkit-keyframes slide_frames{
	from{
		-webkit-transform:translate(-10px,0);
		transform:translate(-10px,0);
		-webkit-animation-timing-function:cubic-bezier(.17,.17,0,1);
		animation-timing-function:cubic-bezier(.17,.17,0,1)
		}
	to{
		-webkit-transform:translate(0,0);
		transform:translate(0,0)
	}
}
@-moz-keyframes slide_frames{
	from{
		-moz-transform:translate(-10px,0);
		transform:translate(-10px,0);
		-moz-animation-timing-function:cubic-bezier(.17,.17,0,1);
		animation-timing-function:cubic-bezier(.17,.17,0,1)
		}
	to{
		-moz-transform:translate(0,0);
		transform:translate(0,0)
	}
}
@keyframes slide_frames{
	from{
		-webkit-transform:translate(-10px,0);
		-moz-transform:translate(-10px,0);
		transform:translate(-10px,0);
		-webkit-animation-timing-function:cubic-bezier(.17,.17,0,1);
		-moz-animation-timing-function:cubic-bezier(.17,.17,0,1);
		animation-timing-function:cubic-bezier(.17,.17,0,1)
		}
	to{
		-webkit-transform:translate(0,0);
		-moz-transform:translate(0,0);
		transform:translate(0,0)
	}
}
@-webkit-keyframes fade_frames{
	from{opacity:0;-webkit-animation-timing-function:linear;animation-timing-function:linear}
	to{opacity:1}
}
@-moz-keyframes fade_frames{
	from{opacity:0;-moz-animation-timing-function:linear;animation-timing-function:linear}
	to{opacity:1}
}
@keyframes fade_frames{
	from{opacity:0;-webkit-animation-timing-function:linear;-moz-animation-timing-function:linear;animation-timing-function:linear}
	to{opacity:1}
}

# ----

 .widescreen_dots .wait_dots{
  margin-top: 30px;
}
 .widescreen_dots .wait_dots_filler{
 	height:51px;
 	width:10px;
}

 .tallscreen_dots .wait_dots{
  margin-top: 10px;
  margin-bottom:10px;
}
 .tallscreen_dots .wait_dots_filler{
 	height:38px;
 	width:10px;
}

.wait_dots {
  margin: 30px auto 0;
  width: 70px;
  text-align: center;
}

.wait_dots > div {
  width: 18px;
  height: 18px;
  background-color: #aaa;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: dotdelay 1.4s infinite ease-in-out both;
  animation: dotdelay 1.4s infinite ease-in-out both;
}

.wait_dots .dot1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.wait_dots .dot2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes dotdelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes dotdelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

# ----

