/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/

/*curved div
http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml
wcs.css
*/

body
{
    background-color: Window;   /*#F2F7F7; #E6FCFF; #C8E0E4; project default #5c87b2;*/
    font-size: 14px; /*85%;*/
    font-family: Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
    background-image:url('./Images/gradientfromtop.gif');
    background-repeat:repeat-x;
    
    min-width:1115px;
}

a:link
{
    color: #0682B4;/*#034af3;*/
    text-decoration: none;
}
a:visited
{
    color: #0682B4;/*#505abc; MAKE THE SAME AS */
    text-decoration: none;
}
a:hover
{
    color: #12eb87;
    text-decoration: none;
}
a:active
{
    color: Orange; /* #12eb87;*/
}

p, ul
{
    margin-bottom: 20px;
    line-height: 1.6em;
}
#newsContent > p + ul
{
    width: 50%;
}
p.indent { text-indent: 3em; } 
/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #000;
}

h1
{
    font-size: 2em;
    padding-bottom: 0;
    margin-bottom: 0;
}
h2
{
    padding: 0 0 10px 0;
}
h3
{
    font-size: 1.2em;
}
h4
{
    font-size: 1.1em;
}
h5
{
    font-size: 1em;
}

H6
{
    font-size: 0.8em;
}

/* this rule styles <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page
{
    width: 90%; /*project default 90%*/
    margin-left: auto;
    margin-right: auto;
        /*-330--------*/
    min-height: 100%;
    margin-bottom: -120px;
    position: relative;
}

#header
{
    width: 100%;
    position: relative;
    margin-bottom: 0px;
    color: #000;
    padding: 0;
    /*background-color: #C8E0E4;*/
}

#header h1
{
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-size: 36px !important;
}

#main
{
    padding: 20px 12px 15px 13px;   /*30 30 15 30*/
    background-color: #fff;
    margin-bottom: 0; /*30px before but not leveled with left bar*/
    /*_height: 1px;  only IE6 applies CSS properties starting with an underscore */
    overflow:hidden;
    min-height:420px;
    
    /*added after main_background
    position: absolute;
    z-index: 1;
    background-color:transparent;*/
}
.main_center { width: 970px; margin:0 auto; }
.main_background 
{
    background-image: Url('./Images/Water_drops_on_spider_web.jpg');
    background-repeat: no-repeat;
	/*width: 100%; 
    position: absolute;
    z-index: 0;*/
}
.main_shift_left
{
    margin-left:-20px;
}

#footer
{
    color: #999;
    padding: 10px 0;
    text-align: center;
    line-height: normal;
    margin: 0;
    font-size: .9em;
    padding-top: 10px; /*450px;  modified after main_background*/
    /*---------------------330*/
    height: 120px;
    position: relative;
}

.clearfooter { height: 120px; clear: both; }

/* TAB MENU   
----------------------------------------------------------*/
ul#menu
{
    min-width: 750px;   /*800*/
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: left;
    background-image:url('./Images/bamboo_menu.jpg');
    background-repeat:repeat-x;
    background-position: left;
/*http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizontal_css_menu.html*/
    
    padding-left:168px;
}

ul#menu li
{
    display: inline;
    list-style: none;
    text-align:left;
    /*width:76px;
    background-image: url('./Images/bamboo_menu_divider1.jpg');
background-repeat: no-repeat;
background-position: right;*/

}

ul#menu li#greeting
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a
{
    /*padding: 5px 5px;  10px 20px*/
    padding-top: 5px;
    padding-bottom: 3px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2em;   /*2.8em*/
    /*background-color: #e8eef4;*/
    color: #088A08; /*Green; *#034af3;*/
    display:inline-block;
    width:77px;
    text-align:center;
}

ul#menu li a:hover
{
    background-color: #fff;
    text-decoration: underline;
}

ul#menu li a:active
{
    background-color: #a6e2a6;
    text-decoration: none;
}

ul#menu li.selected a
{
    background-color: #fff;
    color: #000;
}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset 
{
    border: 1px solid #ddd;
    padding: 0 1.4em 0.5em 1.4em;   /*0 1.4em 1.4em 1.4em;*/
    margin: 0 0 1.5em 0;
}

legend 
{
    font-size:1.2em;
    font-weight: bold;
}

textarea 
{
    min-height: 20px; /*75*/
}

input[type="text"] 
{
    width: 200px;
    border: 1px solid #CCC;
    padding-top: 5px;
}

input[type="password"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

input[type="submit"], .deleteButton, .button
{
	background-color: #C8E0E4;
	border: 1px solid #6593cf;
	cursor:pointer;
	color: Navy;
	/*padding-top:5px;*/
	padding: 2px 3px 2px 3px;
}

input[type="submit"]:hover, .deleteButton:hover, .button:hover
{
	background-color: #EFFBEF;
}

/* TABLE
----------------------------------------------------------*/

table 
{
  border: solid 0px #e8eef4;
  border-collapse: collapse;
}

table td
{
  padding: 5px;   
  border: solid 0px #e8eef4;
}

table tr
{
  background: #e7f4fe; /*#C8E0E4;*/
}

table th
{
  padding: 6px 5px;
  text-align: left;
  background-color: #e8eef4; 
  border: solid 1px #e8eef4;   
}

/* MISC  
----------------------------------------------------------*/
.clear
{
    clear: both;
}
.errormessage { margin-left: 80px;}
.error { color:Red; }
.homemessage { color: Green; width: 87%;}
.homemessageAlert { color: Red; width: 87%;}

#menucontainer
{
    margin-top:-24px;       /*40px;*/
    /*background-image:url('./Images/bamboo_menu.jpg');
    background-repeat:repeat-x;
    background-position: left;*/
    font-size: 14px;
    clear: both;
}

div#title
{
    display:block;
    float:left;
    text-align:left;
    background-image: url('./Images/guanxiWeb.png');
    background-repeat: no-repeat;
    background-position: left;
    height:80px;
    width: 150px;
    margin: -8px 0 0 60px;     /*b/c 10px of logindisplay*/
}

#logindisplay
{
    font-size:1em;
    display:block;
    text-align:right;
    margin:10px;
    color:Gray;
}

#logindisplay a:link
{
    color: Gray;
    text-decoration: none;
}

#logindisplay a:visited
{
    color: Gray;
    text-decoration: underline;
}

#logindisplay a:hover
{
    color: #0682b4;
    text-decoration: none;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label,
.editor-label
{
    padding: 1.3em 0.2em 0 0.5em;
    width:81px;
    float:left;
    clear:both;
}

.editor-label.long { width:120px; }

.display-field,
.editor-field
{
    padding: 1em 0 0 0;
}

.editor-group-label
{
    padding: 0.7em 0.2em 0 0.5em;
    width:81px;
    float:left;
    clear:both;
}
.editor-group-field { padding: 0.4em 0 0 0; }

.text-box
{
    width: 30em;
}

.text-box.multi-line
{
    height: 6.5em;
}

.tri-state
{
    width: 6em;
}

/* header, footer, side bars 
-------------------------------------------------------------*/
#left-sidebar
{
    float: left;
    /*margin: 10px 10px 0px 2px;
    padding: 5px;*/
    width: 132px;
    background-color: #E6FCFF;/*C0F7FE;#C8E0E4;*/
    /*min-height: 300px;*/
	overflow: hidden;
	font-size: 14px;
	margin: 0;
	padding: 0;
}

#wrapper { /*background: url(./Images/bg-channel-side.gif) repeat-y !important; overflow:hidden; clear: both;*/ }
.main_wrapper { background: url(./Images/bg-channel-side.gif) repeat-y !important; overflow:hidden; clear: both; border: solid 1px #e8eef4; }

#left-menu
{
    width: 99%;
    padding-bottom:0;
}

#left-sidebar table td
{
  border-bottom : solid 3px #e8eef4;
  background: #e7f4fe;/*#C8E0E4;*/
}

/*#left-sidebar ul {
	list-style: none;
	margin: 0;
	margin-top: 8px;
	padding-left: 6px;
}
#left-sidebar ul li {
	background: url(./Images/linknav.gif) no-repeat right 5px;
	margin: 0 0;
	padding: 0 0;
	padding-left: 5px;
}*/

#left-rel-menu ul {
	list-style: none;
	margin: 0;
	margin-top: 8px;
	padding-left: 6px;
}
#left-rel-menu ul li {
	/*background: url(./Images/linknav.gif) no-repeat right 5px;*/
	margin: 0 0;
	padding: 0 0;
	padding-left: 5px;
}

#left-sub-menu ul {
	list-style: none;
	margin: 0;
	margin-top: 8px;
	padding-left: 6px;
}
#left-sub-menu ul li {
	margin: 0 0;
	padding: 0 0;
	padding-left: 5px;
}
/*color codes http://www.immigration-usa.com/html_colors.html 
http://w3schools.com/html/html_colors.asp*/


/*may to need to move to other file
-------------------------------------------*/
.readonly { Color: Gray; border-color: Gray; }
.readFalse { font-weight:bold; } /*message read or not dynamic assinged*/
.need_bold { font-weight:bold; }
.title { background: #C8E0E4; padding: 0.5em; margin-bottom:0.5em; }    /*##0682B4*/
.title2 { background: #F5F6CE; padding: 0.5em; margin-bottom:0.5em; }
.wrapper { text-align:center; border: 1px solid #C8E0E4;}
.boarder_frame {border: 1px solid #C8E0E4;}
.expand
{
    width:13px;
	height:13px;
	float:right;
	background-image: url('./Images/expand.jpg');
	background-repeat:no-repeat;
	padding-right:32px;
}
.collapse
{
	width:13px;
	height:13px;
	float:right;
	background-image: url('./Images/collapse.jpg');
	background-repeat:no-repeat;
	padding-right:32px;
}

.selectable .ui-selecting { background: silver; }
.selectable .ui-selected { background: yellow; }

table.tableSelect { border: solid 1px #e8eef4; border-collapse: collapse; }

table.tableSelect td { padding: 5px; border: solid 1px #e8eef4; }

table.tableSelect tr { background: transparent; }

table.tableSelect th
{
  padding: 6px 5px;
  text-align: left;
  background-color: #C8E0E4; 
  border: solid 1px #e8eef4;   
}

table.form td { padding: 2px;}

.gridRow { background-color: #F0F0F0; /*#F5F7C4; will use for highlight*/ }

.alt { background-color: window; }

table.msggrid { width:100%; }
.msg_menu { background-color: #EFFBFB; }

table.grid th { background-color: #0682B4; border: solid 1px #0682B4; color: window; }

table.grid th a:link { color:Window; text-decoration: none; }

table.grid th a:visited { color:Window; text-decoration: none; }

.checked { background-color: #FFFFB8;	/*#F5F7C4;*/}

.highlight { background-color: #C8E0E4; }
.highlight_green { background-color: #E3F6CE; }

.userImage { width: 75px; height: 75px; }
.userSearchImage { width: 50px; height: 50px; }
.groupLogoImage { height: 83px; width: 120px; }
.groupLogo { height: 75px; }
.groupImageList { width: 90px; float:left;}
.groupImage { height: 50px; }
/*-------------------------------------
mail message menu
*/
/*ul#messageMenu { position: relative; margin: 2px; text-align: left; }
ul#messageMenu li { display: inline; list-style: none; text-align:left; }*/
#messageMenucontainer { margin-bottom: 2px; }

.homepartial { padding-top:0; float:left; margin-top:-10px; }

div.field { margin-bottom: 0.8em; }
div.userimage { float:left; margin-right:0.5em; }

.remaining { color:Red; font-size: 90%;}

.tdTitle {width:132px;}
.tdTitleMessage {width:80px;}

.dialogform { background-color: #FBFBEF; }

.waiting { position:absolute; width:100%; text-align:center; }
.opaqueLayer 
{
    display: none;
    filter: alpha(opacity=50);
    opacity: 0.5;
    position:absolute; 
    top:0px; 
    left:0px;
    width:100%;
    height:100%;
    background-color: Gray; 
    z-Index:1000; 
} 

img { border:0;}
.menuimage { margin-left:-7px; margin-bottom:-3px;}
.questionicon { margin-left:0.5em;}

a.link_button
{
   border: solid 1px #ccc;
   background-color: #f7f7f7;
   padding: 3px 5px 3px 25px;
   background-position: 5px center;
   background-repeat: no-repeat;
   display: inline-block;
}
a.link_button:hover { background-color: #C8E0E4; text-decoration: none; }
a.create_subject { background-image: url('./Images/new_doc.png'); }
a.create_group { background-image: url('./Images/image_new.gif'); }
a.user_message_board { background-image: url('./Images/comment.png'); }
a.relation_category { background-image: url('./Images/categories.png'); }
a.text_edit { background-image: url('./Images/text_edit.png'); }
a.read_message_board { background-image: url('./Images/board.png'); }
a.friend_connections { background-image: url('./Images/sharethis.gif'); }
a.edit_post { background-image: url('./Images/text_edit.png'); }
a.top_post { background-image: url('./Images/ontop.gif'); }
a.delete_post { background-image: url('./Images/message-delete.png'); }
a.light_bulb { background-image: url('./Images/bulb.gif'); }
a.setting { background-image: url('./Images/setting.png'); }
a.pictures { background-image: url('./Images/pictures.png'); }
a.vip { background-image: url('./Images/vip.png'); }
a.send_message { background-image: url('./Images/mail-send.png'); }
a.join_group { background-image: url('./Images/group_add.png'); }
a.add { background-image: url('./Images/plus.png'); }

.hoverChange { display:block;padding: 5px 0;width:100%;outline:none; }
.hoverChange:hover {background-color: #C8E0E4; text-decoration: none;}
/*------user info------------*/
.userinfo { padding: 0.2em; background-color: #e7f4fe; margin-bottom: 0.5em; min-height:90px;}
.userbio { padding: 0.3em 0 0.3em 1em; margin:0.2em 0 0 0; }
.bio_period { padding:1em; background-color: #f7f7f7; border-bottom: 1px dotted green; }
.smaller_font { font-size: 95%; }
.hcross { overflow:hidden; }
.contained { overflow:hidden; }
/*-----message board-----*/
.view_thread 
{
    margin: 0;
    width: 90%;
}
.view_thread .reply a
{
    background-color: #F7F7F7;
    background-position: 3px center;
    background-repeat: no-repeat;
    border: 1px solid #CCCCCC;
    display: inline-block;
    font-weight: bold;
    padding: 5px;
    text-decoration: none;
}

.view_thread .header .pagination, .view_thread .footer .pagination
{
    float: left;
}

.view_thread .details
{
    clear: both;
    background-color:#eee;
    overflow: auto;
    border: 1px solid #ccc;
    padding: 5px;
    margin: 5px 0;
}

.view_thread .details .actions
{
    float: right;
}

.view_thread .details .subject
{
    float: left;
    font-weight: bold;
    font-size: 13px;
    margin-top: 5px;
}

.view_thread .details .subject img
{
    vertical-align: text-top;
}
hr.hrmessage { border: dotted 1px #1B5790; border-style: dotted none none none; }
.posting .message .text { float: left; }
.post_row
{
    overflow:hidden; clear: both;
    border: 1px solid #ddd;
    margin-bottom: 0.8em;
}
.post_row .postuser
{
    float: left;
    width: 81px;
    padding: 0px 10px 10px 10px;
    margin-right: -1px;
    border-right:1px solid #ddd;
}

.post_row .postuser .postusername
{
    margin: 8px 0;
    font-size: 13px;
}
.post_row .postbody
{
    /*min-width: 600px;*/
    clear: right;
    padding: 5px 10px;
    margin-bottom:5px;
    overflow: hidden;
    border-left: 1px solid #ddd;
}

.post_row .postbody .posttop
{
    padding-bottom: 5px;
    overflow: auto;
}
.post_row .postbody .posttop .postdate
{
    float: left;
    margin-top: 7px;
    padding-top: 1px;
}

.post_row .postbody .posttop .actions 
{
    float:left;
    padding-right: 1em;
}
.post_row .postbody .posttop .actions ul
{
    margin: 0;
    padding: 0;
    list-style: none;   
}

.post_row .postbody .posttop .actions ul li
{
    display: inline-block;
}
.breadCrumbContent { margin-bottom: 1.2em; margin-top: -10px; font-size: 90%;}

.checkUser { color: #0682B4; }
/*-----------------------photos-----------------------*/
.album-frame { border: 1px solid #ccc; width: 196px; height: 146px; }
.album-frame:hover { border-color: #0682B4; }

.photo-container 
{
	border-left:1px solid #ccc;
	padding-left:8px;
	float:left;
	width:134px;
	margin:0px;
	margin-top:8px;
	height:108px;
	position:relative;
	overflow:hidden;
}
.album-container
{
	padding-left:8px;
	float:left;
	width:200px;
	margin:0px;
	margin-top:8px;
	height:190px;
	position:relative;
	overflow:hidden;
}
.group-container 
{
	border-left:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding-left:12px;
	float:left;
	width:70px;
	margin:0px;
	margin-top:8px;
	height:1.5em;
	/*position:relative; 8/12/2011 out b/c of IE7*/
	overflow:hidden;
}

.user-container 
{
	padding-left:8px;
	float:left;
	width:75px;
	margin:0px;
	margin-top:8px;
	height:100px;
	position:relative;
	overflow:hidden;
}

.adsbygoogle-top { width: 320px; height: 100px; }
@media(min-width: 500px) { .adsbygoogle-top { width: 468px; height: 60px; } }
@media(min-width: 800px) { .adsbygoogle-top { width: 100%; height: 160px; } }

.adsbygoogle-middle { width: 320px; height: 100px; }
@media(min-width: 500px) { .adsbygoogle-middle { width: 468px; height: 60px; } }
@media(min-width: 800px) { .adsbygoogle-middle { width: 728px; height: 120px; } }

.adsbygoogle-middle-h { width: 120px; height: 400px; }
@media(min-width: 500px) { .adsbygoogle-middle-h { width: 120px; height: 200px; } }
@media(min-width: 800px) { .adsbygoogle-middle-h { width: 200px; height: 350px; } }

.adsbygoogle-block { width: 220px; height: 240px; }
@media(min-width: 500px) { .adsbygoogle-block { width: 220px; height: 200px; } }
@media(min-width: 800px) { .adsbygoogle-block { width: 450px; height: 250px; } }

/*
table.tableSelect 
{
	font-family:arial;   
    border-collapse:collapse;	
    border: solid 3px #7f7f7f;
    font-size:small;
}

table.tableSelect td {	
	padding: 5px;
	border-right: solid 1px #7f7f7f;
	background:  window;
}
table.tableSelect .even {
	background-color: #fff;
}
table.tableSelect .odd {
	background-color: #edf5ff;
}

table.tableSelect thead td
{
    vertical-align:middle;
    background-color:#C8E0E4;
    border:none;
}

table.tableSelect thead .tableHeader
{
    font-size:larger;
    font-weight:bold;
}*/


/*p {
padding: 0 0 1em;
}
.msg_list {
margin: 0px;
padding: 0px;
width: 383px;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FFCCCC;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}

.header th:nth-child(2) {
    background-image: url('./Images/expand.jpg');
}*/