# Surgeweb plain HTML interface
# Main CSS file


 body {
    font-family: Arial, Helvetica, sans-serif;
	font-size:.8em;
#	background: ||sw_background||;
    margin: 0;
    padding: 0;
	cursor: default;
}
body{
	||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||
}

table, table tr, table td {
    border-collapse:collapse;
}
table{
	font-size:12px;
}
table, table td {
    padding: 0;
}
.hidden{
	display:none;
}
.hidden2{
	visibility:hidden;
}


 #top_banner{
    margin: 0;
    padding: 0;
	width: 100%;
    height: 52px;
}
#  body{background:#BCD8FF;}
  #top_banner{
	||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||
  }

 #link_bar{
    float: right;
    color:||linkbar_text_color||;
 } 
 #link_bar a{
    margin-right:4px;
    color:||linkbar_text_color||;
 } 

 #messages_list{
    background:white;   	
	white-space:nowrap;
 }
 
 #message{
     background:white;
 }
 #messages_list th{
#  	border-bottom:1px solid #aaa;
	background:#eee;
 }
 #messages_list tr td{
 	white-space:nowrap;
  	border-bottom:none;
#  	1px solid #f3f3f3;
 } 
 #messages_list td.link:hover{
 	text-decoration:underline;
 } 
 
# Message replied indicator
  .x_replied{
	width:15px;
	height:15px;
  }  
  .msg_replied .x_replied{
  	background: url(||www_base||shared/img/x_status.png) -1px -2px;
  }
  .msg_forward .x_replied{
  	background: url(||www_base||shared/img/x_status.png) -16px -2px;
  }
  .msg_recent .x_replied{
  	background: url(||www_base||shared/img/x_status.png) -33px -2px;
  }
 .msg_unread{
   	font-weight:bold;
   }


  #msg_headers{
  	padding:3px;
  	background:#e3efff;
  }

  #msg_body{	
     padding:3px;
  }
  
  #menubar{
   	valign:center;
   	background:	url(||www_base||shared/img/gradient_big.gif);
  }

 .toolbar {
 	padding:3px;
  }


# *** Folder list styling *** direct copy from ajax (share somehow)

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

# Show node icon - different for top level and other levels (could depend on open/closed but not necessary)
ul.ftree li a{
    height: 16px;
    padding-left: 2px;
#    margin-bottom: 1px;
}
ul.ftree li li a{
    background: url(||www_base||shared/img/vbtn_icons.gif) no-repeat 0 -80px;
#    height: 16px;
    padding-left: 20px;
#    margin-bottom: 1px;
}
#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 {
    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) 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:18px;
  }

.info1{
	display:none;
	position:absolute;
	left:121px;
	background:yellow;
	padding:1px;
}

# *** Folder list styling end *** direct copy from ajax (share somehow)

 .mnu{
  	padding:0;
  	margin:0;
  	padding-left:3px;
  	padding-right:3px;
  	font-size:.9em;
 }

# *** App menu copied items: 

 #app_menu{
 	text-align:center;
 	margin:0px;
 }
 #app_menu div{
# 	padding:1px;
  	background:	#7FB7E1 url(||www_base||shared/img/gradient_small.gif);
  	font-weight:bold;
	height:18px;
	padding-top:2px;
 }
 
 #app_menu a{
    text-decoration:none;
 	color:black;
 }
 #app_filestore{
 	display:none;
 }
  #app_menu div.sel{
   	background:	url(||www_base||shared/img/gradient_small_sel.gif);
  }

  #folder_panel{
  	overflow:auto;
  }
  
     .nomessages{
     	padding:50px;
     	text-align:center;
     }

  .mnu_foldername{
  	font-weight:bold;
  	font-size:1.05em;
  	padding-top:2px;
  }

 #sw_footer, #prefooter{
	padding-top:2px;
    text-align: center;
    clear:both;
}

 #info{	
 	position:absolute;
 	top:36px;
 	width:100%;
 }
 #interface_type{
 	font-weight:bold;
 	font-style:italic;
 	color:white;
 	margin-left:72px;
 }
 #skeleton{
 	color:red;
 	float:right;
 	font-weight:bold;
 	font-style:italic;
 }



 #options_panel{
 	padding:3px;
 }
 
 #status{
 	position:absolute;
 	left:155px;
 	top:8px;
 }
 
  #status{
  	padding:1px 3px;
#	text-align:center;
  }
  #status.success{
  	background: lightgreen;
  } 
  #status.info{
  	background: #EDED91;
  } 
  #status.warning{
  	background: #EDB2BC;
  }



# # Revisit of the HTML interface....

	.rcpt:hover{
		text-decoration:underline;
		font-weight:bold;
	}

	 .msg_subject{
		font-weight:bold;
	 }



 .compose{
#    background:lightblue;
 	background: ||message_edit_header_color||;    
 }
 #menubar{
 	border-bottom:1px solid ||border_color||; 
 }
 
 
   #images_disabled{
   	background:pink;
   	padding:3px;
 	border-top:1px solid #aaa;
 	border-bottom:1px solid #aaa;
   }

 	.selfld{
 		color:black;
 		font-weight:bold;
 	}
 	
 .pg_title{
 	font-size:16px;
 	font-weight:bold;
 }
 
  #options_panel{
# 	padding: 3px;
 	background:#FFF7D7;
  }
 	
 .compose_x1{
 	font-weight:bold;
 } 	
 .compose_x2{
 	width:300px;
 } 
 	
 	
#folder menu stuff...
 .folder_menu {
	position:absolute;
	background:white;
	height:200px;
	width:150px;
	left:0;
	bottom:-200px;
	border:1px solid ||border_color||;
	overflow-y:scroll;
	overflow-x:hidden;
	padding:0;
  }
  .folder_menu ul{
	margin:0;
	padding:0;
  }
  .folder_menu li{
	list-style: none;
	padding-left:5px;
	margin:0;
  }
	
# QQQ do we move this to a common module to avoid duplication?	
 .xmenu{
 	position:absolute;
 	background:#fff;
 	border:1px solid ||border_color||;
 }
  .xmenu a{
  	display:block;
  	padding:1px 3px;
  	text-decoration:none;
  	color:black;
  }
  .xmenu a:hover, a.hover_js{
  	background:#A8C7E1;
  }

 .mw_menu{
 	color:blue;
 }
 .mw_menu:hover{
  	text-decoration:underline;
 } 
	
 .quota_warn{
	color:red;
 }
 .quota_info{
	color:green;
 } 
 .sw_message P{
	margin:0px;padding:0px;
 }
 .sw_message {
	font-size: 12pt;
	font-family:Arial,Helvetica,sans-serif;background:white;
 }
 
 
	.swatch{
		width:15px;
		height:15px;
	}
	.swatch_hover{
		padding:1px;
		border:2px solid transparent;
	}
	.swatch_hover:hover{
		border:2px solid #98BB74;
	}
 
 .abook_icon{
     background: url(||www_base||shared/img/del2.png?||vz||) no-repeat 0px -368px !important;
 }
 .group_icon{
     background: url(||www_base||shared/img/del2.png?||vz||) no-repeat 0px -336px !important;
 }

	||define||selection_color||#DCF0D1||

	#contacts_list .selected{
	  	background:||selection_color|| !important;	
	}
	#contacts_list a{
		color:black;
		text-decoration:none;
	} 
	#contacts_list a:hover{
		text-decoration:underline;
	} 
    	
 
	.cm_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;		
	}

	.g{
		color:#666;
	}

	.main_pane{
		background:white;\
		border-left:1px solid ||border_color||;
	}

	#app_menu.panel_styling{
		margin-top:||panel_gap||px;
	}
	#panel_gap img{
		width:||panel_gap||px; 
	}
	#main_pane.panel_styling{
	 	border-top:1px solid ||border_color||; 
	 	border-right:1px solid ||border_color||; 
	 	border-bottom:1px solid ||border_color||; 
	}
	#folder_panel.panel_styling{
	 	border:1px solid ||border_color||; 
	}
	#app_menu.panel_styling{
	 	border:1px solid ||border_color||; 
	}


 #sw_footer{
 	margin:0px;
 	margin-top:2px;
 }