/* New Settings panel styles */
/* Don't copy the following, it's just needed for this sample page. */
/* You'll kinda have to mix and match stuff to implement this, it should be fairly straightforward though */

html,
body {
	background: #fff url(dummy_bg.gif) top right no-repeat !important;
	margin: 0;
	padding: 0;
	border: 0;
	height: 100%;
}

#settingspanel {
	margin: 0 auto;
	position: relative;
	top: 95px;
}

/* Now, here's the new stuff. Copy away. */

#settingspanel {
	width: 768px;
	padding: 15px;
	padding-bottom: 1px;
	border: 2px solid #ffdf9a;
}

#settingsmenu {
	width: 191px;
	float: left;
	position: relative;
	z-index: 15;
}

#settingslogo {
	margin-bottom: 10px;
}

#settingsmenu ul {
	padding: 0;
	margin: 0;
}

#settingsmenu li {
	padding: 0;
	margin: 0;
	list-style-type: none;
	background: #fff url(images/settings/settings_tab.gif) bottom no-repeat;
	width: 181px;
	height: 21px;
	margin-bottom: 3px;
	cursor: pointer;
	font: 12px Verdana;
	color: #999;
	padding: 6px 0 0 10px;
}

#settingsmenu li:hover {
	background: #fff url(images/settings/settings_tab.gif) top no-repeat !important;
	color: #004bb0;
}

#settingsmenu li.setactive {
	background: #fff url(images/settings/settings_tab.gif) top no-repeat !important;
	color: #004bb0;
}

#settingsmenu li .seticon {
	vertical-align: middle;
	line-height: 27px;
	margin: -2px 5px 0 0;
}

#settingsmenu a.restore {
	display: block;
	text-align: center;
	font: 12px Verdana;
	color: #666;
	text-decoration: none;
	margin-top: 5px;
}

#settingsmain {
	float:left;
	width: 576px;
	position: relative;
	z-index: 1;
	left: -1px;
}

#settingsmtop {
	background: url(images/settings/settings_caps.gif) no-repeat;
	height: 8px;
}

#settingsmbottom {
	background: url(images/settings/settings_caps.gif) bottom no-repeat;
	height: 8px;
}

#settingsmcenter {
	background: url(images/settings/settings_tile.gif) repeat-y;
	padding-left: 7px;
	padding-right: 5px;
}

#settingsaction {
	text-align: center;
	padding-top: 5px;
}

#settingsaction a {
	margin-right: 10px;
}

.settingsclear {
	clear: both;
}

.paneldesc h3 {
	font: bold 16px "Trebuchet MS", Trebuchet, Verdana;
	color: #004bb0;
}

.registration {
	margin-left: 20px;
	width: 500px;
}

.registration label {
	display:block;
	font: bold 15px "Trebuchet MS", Trebuchet, Verdana;
	color: #004bb0;
	margin: 2px 0 5px -12px;
}

.registration input {
	width:200px;
	font: 14px Verdana;
	padding: 4px;
}

.registration select {
	margin: 2px 0 4px 0;
	border: 1px solid #D1D1D1;
	font: 14px Verdana;
}

#captcha {
	width: 82px;
	margin: 0 0 18px 10px;
	border: 1px solid #D1D1D1;
}

#birth {
	width:130px;
}

#bd_day {
	width:55px;
	margin-left:5px;
}

#bd_year {
	width:80px;
	margin-left:5px;
}

.registration .logininput_pass {
	width: 140px;
	margin: 2px 0 4px 0;
	border: 1px solid #D1D1D1;
}

.inputdets {
	font-size: 10px;
	display:block;
}

.regbutton {
	font-size:14px;
	font-weight:bold;
	margin: 10px 0 10px 12px;
}

.sloption { 
	margin-top: 25px;
}

.sloption a {
	margin: 2px 2px 2px 62px;
	padding: 4px;
	float: left;
}

.sloption a:hover {
	border: 2px solid #f0f0f0;
	text-decoration: none;
	margin: 0 0 0 60px;
}

.sloption a.sla {
	border: 2px solid #004bb0 !important;
	margin: 0 0 0 60px !important;
}

.sectab {
	padding-left: 10px;
}

.sectab a {
		float: left;
		padding-top: 0px;
		height: 21px;
		border: 0;
		margin-left: 3px;
		cursor: pointer;
		color: #999;
		margin-bottom: -1px;
		font: 10px Verdana;
		text-decoration: none;
}

.sectab a:hover {
	color: #555;
}

.sectab a .stb4,
.sectab a .staf {
	background: #fff url(http://wkccp.com/av/settings/images/settings/settings_tab2.gif) 0 100% no-repeat;
	width: 4px;
	height: 21px;
	display: block;
	float: left;
}

.sectab a .staf {
	background-position: 100% 100%;
}

.sectab a:hover .stb4 {
	background-position: 0 0;
}

.sectab a:hover .staf {
	background-position: 100% 0%;
}

.sectab a .stce {
	float: left;
	background: #fff url(http://wkccp.com/av/settings/images/settings/settings_tile2.gif) 0 100% repeat-x;
	display: block;
	height: 16px;
	padding: 5px 5px 0 5px;
}

.sectab a:hover .stce {
	background-position: 0 0;
}

.sectab a.stactive .stb4 {
	background-position: 0 0 !important;
}

.sectab a.stactive .staf {
	background-position: 100% 0 !important;
}

.sectab a.stactive .stce {
	background-position: 0 0 !important;
	color: #555 !important;
}

.sectab a:active {
  outline: none;
}

.secpane {
	border-top: 1px solid #f0f0f0;
	clear: left;
	padding-top: 10px;
	font: 11px Verdana;
	color: #666;
}

.fgcontent {
	padding-top: 10px;
}

.sh4 {
	display: block;
	margin: 5px;
	padding: 0;
	color: #004bb0;
	font-size: 12px;
}

#frienduname,
#groupname {
	width: 160px;
	padding: 3px 3px 3px 3px;
	font: bold 14px "Trebuchet MS", Trebuchet, Verdana;
	margin: 0 5px -2px 10px;
	border: 1px solid #ccc !important;
}

#addfriendb,
#joingroupb {
	cursor: pointer;
	vertical-align: middle;
}

.fgovcol {
	width: 170px;
	float: left;
	font-size: 12px;
	background: #fff url(http://wkccp.com/av/settings/images/settings/fgov.gif) no-repeat;
}

.fgovcol .sh4 {
	margin: 2px 0 8px 10px;
}

.fgovcolspacer {
	width: 15px;
	height: 40px;
	float: left;
}

.fgovline {
	padding: 0 3px 5px 9px;
	position: relative;
}

.fgovline img {
	margin: 0 0 -2px 0;
}

.fgovline a {
	text-decoration: none;
	color: #666;
	outline: none;
}

.fgovline .fgmenu {
	width: 100px;
	position: absolute;
	left: 0px;
	top: 17px;
	border: 1px solid #294563;
	background: #FFF;
	z-index: 57;
}

.fgovline .fgmenu a:link,
.fgovline .fgmenu a:visited,
.fgovline .fgmenu a:active {
	display: block;
	color: #777;
	width: 90px;
	height: 14px;
	padding: 2px 5px 0 5px;
	line-height: 20px;
	vertical-align: middle;
	border-bottom: 1px solid #004bb0;
	text-decoration: none;
	font: 10px Verdana;
}

.fgovline .fgmenu a:hover {
	background: #fefefe;
	color: #000;
	text-decoration: none;
}

#invitebox,
#fgov_response,
#addfriend_response,
#joingroup_response {
	clear: left;
	position: relative;
	top: 20px;
}

#changeemail_response,
#changepass_response {
	margin: 10px 0 0 10px;
}

#invitebox select {
	margin: 2px 0 0 20px;
	border: 1px solid #D1D1D1;
	font: 14px Verdana;
	width:160px;
}

.inviteaction {
	position: relative;
	top: 3px;
}

.cgleft {
	width: 125px;
	height: 26px;
	margin: 20px 10px 0 30px;
	clear: left;
	float: left;
	font: bold 16px "Trebuchet MS", Trebuchet, Verdana;
	color: #004bb0;
	text-align: right;
}

.profileform .cgleft {
	width: 155px;
	margin-left: 0px;
}

.cgright {
	float: left;
	margin: 20px 0 0 0;
}

.cginput {
	width: 160px;
	padding: 3px 3px 3px 3px;
	font: bold 14px "Trebuchet MS", Trebuchet, Verdana;
	margin: 0 5px -2px 10px;
	border: 1px solid #ccc !important;
}

.cginput.cgmax {
	width: 30px !important;
}

.cgsub {
	display: block;
	font: 10px Verdana;
	color: #999;
}

.cgta {
	width: 280px;
	height: 40px;
	padding: 3px 3px 3px 3px;
	font: bold 14px "Trebuchet MS", Trebuchet, Verdana;
	margin: 0 5px -2px 10px;
	border: 1px solid #ccc !important;
}

.cgta.profilestatement {
	height: 80px;
}

.cgfile {
	width: 100px;
	padding: 3px 3px 3px 3px;
	font: bold 14px "Trebuchet MS", Trebuchet, Verdana;
	margin: 0 5px -2px 10px;
}

.cgcheck {
	margin: 6px 5px 0 10px;
}

.cgsubmit {
	width:150px;
	padding: 2px;
	font-size:13px;
	font-weight:bold;
	margin: 10px 0 10px 12px;
}

.mygroup,
.fgt1_row {
	border-bottom: 1px solid #efefef;
	padding-bottom: 1px;
	cursor: pointer;
}

.fgt1_row {
	cursor: default !important;
}

.mygroup.mgtitle,
.fgt1_row.fgt1_title {
	border-bottom: 2px solid #004bb0;
}

.mygroup.mgtitle:hover,
.fgt1_row.fgt1_title:hover {
	background: #fff;
}

.mygroup:hover,
.fgt1_row:hover {
	background: #f4f4f4;
}

.mygroup span,
.fgt1_row span {
	float: left;
	text-align: center;
	font-size: 12px;
	color: #929292;
	margin-top: 5px;
}

.mygroup.mgtitle span,
.fgt1_row.fgt1_title span {
	font: bold 14px "Trebuchet MS", Trebuchet, Verdana !important;
	color: #004bb0 !important;
}

.mgav, .fgt1av {width:30px;}
.mgna, .fgt1na {width:200px;}
.mgme, .fgt1me {width:90px;}
.mgse, .fgt1se {width:90px;}
.mgco, .fgt1co {width:90px;}
.mghr, .fgt1hr {border: 0px; margin: 0px; height: 1px; padding: 0; clear: left; font-size: 1px;}
.comav.mgmemdel {cursor:pointer;}

.fgt1option {
	margin: 0 0 5px 0;
	height: 29px;
	padding-left: 158px;
}

.fgt1option span {
	display: block;
	float: left;
	width: 90px;
	height: 29px;
	margin-left: 10px;
	cursor: pointer;
}

.fgt1option #fgt1_friend {background: url(http://wkccp.com/av/settings/images/settings/t1_friends.gif) 0 -29px no-repeat;}
.fgt1option #fgt1_group {background: url(http://wkccp.com/av/settings/images/settings/t1_groups.gif) 0 -29px no-repeat;}


.fgt1option .fgt1_active {
	background-position: 0 0 !important;
}





	

.ico5 {	background: #fff url(http://wkccp.com/av/settings/images/settings/ico_blackwhite.jpg) 50% 0px no-repeat !important; }
.ico6 {	background: #fff url(http://wkccp.com/av/settings/images/settings/ico_register.jpg) 50% 0px no-repeat; }
.ico7 {	background: #fff url(http://wkccp.com/av/settings/images/settings/ico_profile.jpg) 50% 0px no-repeat; }
.ico8 {	background: #fff url(http://wkccp.com/av/settings/images/settings/ico_searchlevel.jpg) 50% 0px no-repeat; }
.ico9 {	background: #fff url(http://wkccp.com/av/settings/images/settings/ico_fg.jpg) 50% 0px no-repeat; }


/* Min height is highly non-supported. This is a workaround. If more tabs are added, increase the number(290px) by ~30px per tab */
*>#settingsmcenter {
 padding-top: 350px;
 min-height: 1px;
}
*>#settingsmcenter .setpane {
 margin-top: -350px;
}
* html #settingsmcenter {
 height: 350px;
}